/*  site.css - what is true at every width.
    See docs/reference/app/stylesheets.md and docs/decisions/layout-ownership.md.

    **THERE IS NOT A SINGLE MEDIA QUERY IN THIS FILE AND THERE MUST NOT BE ONE.** Every breakpoint
    lives in responsive.css, next to the tier boundaries it tests. CSS gives no way to share a
    number between the two - `var()` is not allowed in a media query - so it is one file or two
    sources of truth. */

body {
    background: inherit !important;
}

.pagination .page-item .page-link {
    background-color: #858796;
    color: white;
    cursor: pointer;
}

.pagination .page-item.disabled .page-link {
    background-color: #f4f4f4;
    cursor: default;
}

/*  The expander's own row. ListTable draws it, so there is one class for it. */
.details-row > td {
    background-color: #fff;
}

.details-row label {
    font-weight: bold;
    margin-right: 0.5em;
}

.details-row .nav-link {
    background-color: aliceblue;
    border: none;
}

.details-row .nav-link.active {
    background-color: #4e73df;
}

.toast-header,
.toast-error-header {
    background-color: #1e70b2 !important;
    color: #FFF !important;
    padding: 1em;
}

.toast-header i,
.toast-error-header i {
    margin-right: 1em;
}

.toast-header strong,
.toast-error-header strong {
    min-width: 5em;
}

.toast-error-header {
    background-color: red !important;
}

/*  Bootstrap's own close button, which is what the toast markup emits
    rather than Bootstrap 4's `.close`. On a coloured header it needs inverting. */
.toast-header .btn-close,
.toast-error-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    margin-right: 0;
}

.validation-errors {
    padding-left: 0;
    padding-right: 1em;
    color: red;
}

.validation-errors li {
    list-style-type: none;
}

/*  Toasts are how every API error reaches a user, so they have to be visible on a phone with the
    on-screen keyboard up: fixed to the viewport, capped so they cannot be wider than the screen,
    and above the error bar. The phone-tier inset is in responsive.css. */
#toast-container {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    max-width: min(24rem, calc(100vw - 3rem));
    z-index: 1090;
}

table {
    margin-top: 1rem;
}

.validation-message {
    color: red;
}

.switch {
    padding-left: 1rem;
    padding-top: 1rem;
}

.switch label {
    margin-left: 1rem;
}

.clickable {
    cursor: pointer;
}

.buttons {
    margin-right: 1rem;
}

.buttons a, .buttons button {
    margin-left: 0.5rem;
}

.row.head {
    margin-bottom: 1rem;
}

.save-col {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.save-col a:not(.btn-secondary) {
    flex-basis: 100%;
    text-align: right;
    font-size: 90%;
}

.save-col button, button[type=submit] {
    min-width: 6rem;
}

.row.footer {
    margin: 2rem;
}

.fa-times-circle {
    margin-right: 10px;
}

.company-name {
    padding: 0.4em;
    color: #1e5fa4;
    font-weight: bolder;
    font-size: 1.1em;
}

/*  The login and password forms. A max-width with no auto margins leaves the form glued to the
    left edge of a desktop window - the one item in that inventory that was a desktop defect rather
    than a phone one. */
.form-container {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

/*  The conditional-skip form. A fixed minimum wider than the phone
    tier by construction, and a minimum cannot be overridden by a narrower container. It fills what
    it is given and stops at 45rem. */
.skip-form .rz-dropdown {
    width: 100%;
    max-width: 45rem;
}

.skip-form label {
    display: block;
    margin-top: 1rem;
}

.skip-form button {
    display: block;
    margin-top: 0.5rem;
}
/* The row count beside the page-size selector. Muted, because it is a reading of the list
   rather than a control on it. */
.results-count {
    color: #6c757d;
    white-space: nowrap;
}

/* Blazor writes to #blazor-error-ui when a circuit faults, and to nothing else. The element
   was missing, so a fault was invisible - the page just stopped responding. */
#blazor-error-ui {
    background: #ffefc3;
    border-top: 1px solid #d9c88c;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1080;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

#blazor-error-ui .reload {
    margin-left: 0.5rem;
}

/*  The reconnect overlay. THIS BLOCK IS LOAD-BEARING, not decoration: as soon as an element with
    that id exists Blazor switches to a display that sets no inline styles at all and only adds one
    of four class names - so without these rules the element is either always visible or never. */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(0, 0, 0, 0.45);
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

#components-reconnect-modal .reconnect-dialog {
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.3);
    padding: 1.25rem 1.5rem;
    max-width: 32rem;
}

#components-reconnect-modal .reconnect-dialog p {
    display: none;
    margin: 0;
}

#components-reconnect-modal.components-reconnect-show .reconnect-connecting,
#components-reconnect-modal.components-reconnect-failed .reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected .reconnect-rejected {
    display: block;
}

#components-reconnect-modal .btn {
    margin-top: 0.75rem;
}

/*  The attempt counter the framework fills in. Muted and small, because it is diagnostic
    detail beside a sentence that already says what is happening - but it is the only evidence on
    screen that the retries are still running, which is what a dialog reading "reconnecting" for
    three minutes cannot convey on its own. */
#components-reconnect-modal .reconnect-attempt {
    display: block;
    margin-top: 0.25rem;
    color: #6c757d;
    font-size: 0.875rem;
}

/*  A fieldset that does not look like one. Two places group several controls under one heading and
    need that heading to BE the group's name for a screen reader, which is what a legend does - but
    the framework's reset styles a legend as a floated heading, so without these declarations the
    text jumps a size and what follows it lays out against a float. */
.plain-fieldset {
    min-width: 0;
}

.plain-fieldset > legend {
    float: none;
    width: auto;
    margin-bottom: 0;
    font-size: inherit;
    line-height: inherit;
}

/*  An empty validation summary takes no space. The alert region has to be in the DOM before there
    is anything in it or the announcement never happens, and the empty list inside it would
    otherwise give every form in the product a blank line above its first field. The region stays;
    only the empty list is hidden. */
.form-validation-summary .validation-errors:empty {
    display: none;
}