/* Only what Tabler does not already give us. */

/* The invoice grid is wide; keeping the header in view while scrolling a page of
   fifty rows is the difference between reading it and counting columns. */
.table-sticky thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--tblr-bg-surface);
}

/* Codes and document numbers line up only in a monospaced face, and they are
   compared by eye constantly. */
.cell-code {
    font-family: var(--tblr-font-monospace);
    font-size: .8125rem;
}

/* Hidden until Blazor reports an error, when its script shows it. Without this the
   bar reads "an error occurred" on every page, which makes a successful action look
   as if it failed. */
#blazor-error-ui {
    display: none;
}

#blazor-error-ui .dismiss {
    float: right;
    cursor: pointer;
}

/* Sign in with Microsoft, in the light version Microsoft's branding guidelines give:
   white, a grey border, grey semibold text and the four-square logo, 41px high. */
.btn-microsoft {
    --tblr-btn-bg: #fff;
    --tblr-btn-color: #5e5e5e;
    --tblr-btn-border-color: #8c8c8c;
    --tblr-btn-hover-bg: #f3f3f3;
    --tblr-btn-hover-color: #5e5e5e;
    --tblr-btn-hover-border-color: #8c8c8c;
    --tblr-btn-active-bg: #e6e6e6;
    --tblr-btn-active-color: #5e5e5e;
    --tblr-btn-active-border-color: #8c8c8c;
    --tblr-btn-font-family: "Segoe UI", var(--tblr-font-sans-serif);
    --tblr-btn-font-weight: 600;
    --tblr-btn-font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    min-height: 41px;
}

.btn-microsoft-logo {
    flex-shrink: 0;
}

/* Suggestions under the town box: above the cards that follow, and scrollable. */
.town-options {
    z-index: 1050;
    max-height: 16rem;
    overflow-y: auto;
}

/* The test invoice customer list: above the cards that follow. Never scrolled, as it
   holds few enough entries for the one the arrow keys reach to be always in view. */
.customer-options {
    z-index: 1050;
}

/* The guide: its index stays beside the text while reading on wide screens, and a
   section reached from the index does not start flush against the window's edge. */
@media (min-width: 992px) {
    .guide-toc {
        position: sticky;
        top: 1rem;
    }

    /* Room for the last sections to reach the upper part of the window, where the
       index marks a section as being read; only where the index is beside the text.
       16rem covers the marking line and what follows the text: card, page margin,
       footer. */
    .guide section:last-of-type {
        min-height: calc(100vh - 16rem);
    }
}

/* The section being read, marked as kora.elvira marks the open section of the studio
   profile: the primary colour, a faint tint and a bar down its left edge. Bootstrap's
   own active item has primary borders and moves up a pixel; neither is wanted here. */
.guide-toc .list-group-item.active,
.guide-toc .list-group-item + .list-group-item.active {
    color: var(--tblr-primary);
    font-weight: var(--tblr-font-weight-medium, 500);
    background: rgba(var(--tblr-primary-rgb), .06);
    box-shadow: inset 3px 0 0 var(--tblr-primary);
    border-color: var(--tblr-list-group-border-color);
    border-left-color: transparent;
    border-top-width: 0;
    margin-top: 0;
}

.guide section {
    scroll-margin-top: 1rem;
}

.guide section + section {
    margin-top: 2.5rem;
}

/* Where a page sits in the menu bar, under a section's heading. */
.guide-where {
    color: var(--tblr-secondary);
    font-size: .875rem;
    margin-bottom: .75rem;
}