html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.value-positive {
    color: #0f9d58;
    font-weight: 600;
}

.value-negative {
    color: #d93025;
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Reporting look - panels, compact tables, tiles and bars.

   Global rather than component-scoped on purpose: the tennis report renders parts of itself
   through child components (counterparty table, bar and ladder charts) and scoped CSS does not
   cross component boundaries, so the same rules would have to be redeclared per component.
   --------------------------------------------------------------------------- */

.rpt {
    font-size: 13px;
    color: #212529;
    padding-bottom: 40px;
    min-width: 0;
}

.rpt-title {
    font-size: 32px;
    font-weight: 300;
    letter-spacing: -.5px;
    margin: 0;
}

.rpt-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.rpt-sub {
    color: #6c757d;
    font-size: 12px;
}

/* ---------- tabs ----------
   One report screen holding several panes (Tennis: Analytics / Totals). Same treatment the crypto
   up/down screen uses, kept here with the rest of rpt-* so a third report does not need a fourth
   copy of it. */

.rpt-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
    border-bottom: 1px solid #dee2e6;
}

.rpt-tab {
    border: 1px solid transparent;
    border-bottom: none;
    background: none;
    padding: 7px 18px;
    font-size: 13px;
    color: #6c757d;
    border-radius: 6px 6px 0 0;
    margin-bottom: -1px;
}

.rpt-tab:hover {
    color: #212529;
    background: #f8f9fa;
}

.rpt-tab-active {
    border-color: #dee2e6;
    background: #fff;
    color: #212529;
    font-weight: 600;
}

/* ---------- panels ---------- */

.rpt-panel {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 14px;
    background: #fff;
    min-width: 0;
}

.rpt-panel-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin: -14px -16px 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #dee2e6;
}

.rpt-panel-title {
    font-size: 16px;
    font-weight: 600;
}

.rpt-panel-note {
    color: #6c757d;
    font-size: 12px;
}

.rpt-spacer {
    flex: 1;
}

.rpt-note {
    color: #6c757d;
    font-size: 12px;
    margin: 8px 0 0;
}

/* ---------- AI commentary ---------- */

.rpt-ai-set + .rpt-ai-set {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #dee2e6;
}

.rpt-ai-set-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.rpt-ai-set-period {
    font-weight: 600;
    font-size: 13px;
}

.rpt-ai-set-meta {
    color: #6c757d;
    font-size: 12px;
}

/* The category accent is a left edge and a tinted title, nothing more: a dozen remarks in solid
   colour blocks stops being a signal and starts being wallpaper. */
.rpt-ai-item {
    border-left: 3px solid #dee2e6;
    padding: 2px 0 2px 12px;
    margin-bottom: 12px;
}

.rpt-ai-item:last-child {
    margin-bottom: 0;
}

.rpt-ai-item-title {
    font-weight: 600;
    margin-bottom: 3px;
}

.rpt-ai-item-body {
    font-size: 13px;
    line-height: 1.5;
}

.rpt-ai-critical {
    border-left-color: #dc3545;
}

.rpt-ai-critical .rpt-ai-item-title {
    color: #b02a37;
}

.rpt-ai-warning {
    border-left-color: #ffc107;
}

.rpt-ai-warning .rpt-ai-item-title {
    color: #9a7000;
}

.rpt-ai-good {
    border-left-color: #198754;
}

.rpt-ai-good .rpt-ai-item-title {
    color: #146c43;
}

/* ---------- filters ---------- */

.rpt-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: flex-end;
}

.rpt-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 150px;
}

.rpt-field-wide {
    min-width: 220px;
}

/* A picker with a back/forward arrow on either side (Tennis analytics' day and week views). The
   picker keeps the field's width; the arrows are square and never shrink. */
.rpt-stepper {
    display: flex;
    align-items: center;
    gap: 4px;
}

.rpt-stepper > .form-select,
.rpt-stepper > .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.rpt-step {
    flex: 0 0 auto;
    width: 28px;
    padding-left: 0;
    padding-right: 0;
    line-height: 1;
    font-size: 16px;
}

/* A block of related checkboxes (Totals' group-by switches). A wrapping grid rather than a bootstrap
   row, so a column count is never hardcoded and long labels do not force a ragged layout. */
.rpt-checks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 4px 18px;
}

.rpt-field .form-label {
    font-size: 12px;
    color: #495057;
    margin: 0;
}

/* ---------- tiles ---------- */

.rpt-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.rpt-tile {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: #fff;
    padding: 12px 14px;
}

.rpt-tile-value {
    font-size: 24px;
    font-weight: 650;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.rpt-tile-label {
    color: #6c757d;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-top: 3px;
}

.rpt-tile-sub {
    color: #adb5bd;
    font-size: 11px;
    margin-top: 2px;
}

/* ---------- tables ---------- */

/* Section tables can be wide once the EV columns are on; they scroll inside their panel rather
   than widening the page. */
.rpt-scroll {
    overflow-x: auto;
}

.rpt-table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.rpt-table th,
.rpt-table td {
    padding: 5px 8px;
    text-align: right;
    white-space: nowrap;
    border-bottom: 1px solid #f1f3f5;
}

/* Group keys like "Against comeback (backed leader) / ATP" are the one column long enough to
   push a table past its panel; letting them wrap keeps the numbers on screen. */
.rpt-table th.rpt-wrap,
.rpt-table td.rpt-wrap {
    white-space: normal;
    min-width: 8rem;
}

.rpt-table thead th {
    font-size: 11px;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: .4px;
    border-bottom: 1px solid #dee2e6;
    background: #fff;
}

.rpt-table th.rpt-left,
.rpt-table td.rpt-left {
    text-align: left;
}

.rpt-table tbody tr:last-child > td {
    border-bottom: none;
}

.rpt-table tbody th {
    text-align: left;
    font-weight: 600;
    color: #495057;
}

.rpt-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
}

.rpt-dim {
    color: #6c757d;
}

/* Whole-row hover: a soft tint the eye can follow across a wide row, with a thin accent on the
   leading edge so it reads as "this row" rather than as a selection. */
.rpt-table tbody tr:hover > td,
.rpt-table tbody tr:hover > th {
    background: #f1f6fc;
}

.rpt-table tbody tr:hover > td:first-child,
.rpt-table tbody tr:hover > th:first-child {
    box-shadow: inset 2px 0 0 #9ec1ea;
}

.rpt-table tbody tr,
.rpt-table tbody tr > td {
    transition: background-color .12s ease-in-out;
}

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

/* Three panels per row at most, however wide the screen gets: the section tables carry eight
   columns, and a fourth column squeezes them narrow enough to need a horizontal slider. The
   max() is what caps the count - each track is at least a third of the row, so a fourth never
   fits, while the 430px floor still lets the grid drop to two columns and then one. */
.rpt-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(max(430px, calc((100% - 28px) / 3)), 1fr));
    gap: 14px;
    align-items: start;
}

.rpt-cols > .rpt-panel {
    margin-bottom: 0;
}

.rpt-col-wide {
    grid-column: 1 / -1;
}

/* ---------- horizontal bars ---------- */

.rpt-bars {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rpt-bar-row {
    display: grid;
    grid-template-columns: minmax(120px, 210px) 1fr minmax(80px, auto);
    align-items: center;
    gap: 12px;
    padding: 3px 4px;
    border-radius: 4px;
}

.rpt-bar-row:hover {
    background: #f1f6fc;
}

.rpt-bar-label {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.rpt-bar-name {
    font-weight: 600;
}

.rpt-bar-sub {
    color: #adb5bd;
    font-size: 11px;
}

.rpt-bar-track {
    position: relative;
    height: 22px;
    background: #f8f9fa;
    border-radius: 3px;
}

.rpt-bar-zero {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #ced4da;
}

.rpt-bar-fill {
    position: absolute;
    top: 3px;
    bottom: 3px;
    border-radius: 2px;
    min-width: 1px;
}

.rpt-bar-fill.is-pos {
    background: #198754;
}

.rpt-bar-fill.is-neg {
    background: #dc3545;
}

.rpt-bar-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---------- svg charts ---------- */

.rpt-chart-scroll {
    overflow-x: auto;
    overflow-y: hidden;
}

.rpt-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    color: #495057;
    font-size: 12px;
    margin-bottom: 6px;
}

.rpt-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.rpt-swatch {
    width: 14px;
    height: 3px;
    border-radius: 2px;
    display: inline-block;
}

.rpt-grid-line {
    stroke: #dee2e6;
    stroke-width: 1;
}

.rpt-zero-line {
    stroke: #6c757d;
    stroke-width: 1.5;
}

.rpt-axis-label {
    fill: #6c757d;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.navbar-brand .navbar-logo {
    max-height: 40px;
    max-width: 140px;
    width: auto;
}
.navbar-logo-full {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    padding: 10px;
}

.auth-block {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
}

.account-list-main {
    min-width: 0;
    text-align: left;
}

.account-wallet-tags {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.25rem;
    max-width: 48%;
    margin-left: auto;
    text-align: right;
}

.statuses-webhook-update {
    min-width: 28rem;
    max-width: 44rem;
    overflow-wrap: anywhere;
    vertical-align: top;
}

.statuses-webhook-update p {
    margin-bottom: 0.35rem;
}

.statuses-webhook-update p:last-child,
.statuses-webhook-update ul:last-child,
.statuses-webhook-update ol:last-child {
    margin-bottom: 0;
}

.statuses-webhook-update ul,
.statuses-webhook-update ol {
    padding-left: 1.25rem;
}

.statuses-webhook-update code {
    color: #212529;
    background-color: #e9ecef;
    border-radius: 0.2rem;
    padding: 0.1rem 0.25rem;
}