/* Slate background with a light diagonal lattice */
body {
    background: linear-gradient(135deg, #708090 21px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px), linear-gradient(225deg, #708090 21px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px) 0 64px;
    background-color: #708090;
    background-size: 64px 128px;
    min-height: 100vh;
}

.navbar.bg-custom {
    background-color: #222;
}

.navbar .nav-link {
    padding: 10px 15px;
}

.navbar .nav-link.active,
.navbar .nav-link.active:hover,
.navbar .nav-link.active:focus {
    color: white;
    border-radius: 5px;
    background-color: #4189C7;
}

/* The router focuses the page heading after each navigation (for screen readers); don't outline it */
h1:focus {
    outline: none;
}

/* Bootstrap Icons only come in one weight, so outline each glyph in its own colour to make it chunkier */
.bi::before {
    -webkit-text-stroke: 0.06em currentColor;
}

/* Filled icons are chunky already, and outlining them fills in their details */
.bi[class*="-fill"]::before {
    -webkit-text-stroke: 0;
}

/* Beige rounded box that every page sits in */
.body-content {
    margin: 10px;
    padding: 20px;
    background-color: beige;
    border-radius: 15px;
}

/* White rounded panel inside it, e.g. for a credential */
.panel {
    background-color: white;
    padding: 15px;
    border-radius: 15px;
    border: 1px solid rgba(0, 0, 0, .125);
}

/* Bootstrap 4's brighter colours, which the site used before Bootstrap 5 */
:root {
    --bs-link-color: #007bff;
    --bs-link-color-rgb: 0, 123, 255;
    --bs-link-hover-color: #0056b3;
    --bs-link-hover-color-rgb: 0, 86, 179;
}

.btn-primary {
    --bs-btn-bg: #007bff;
    --bs-btn-border-color: #007bff;
    --bs-btn-hover-bg: #0069d9;
    --bs-btn-hover-border-color: #0062cc;
    --bs-btn-active-bg: #0062cc;
    --bs-btn-active-border-color: #005cbf;
    --bs-btn-disabled-bg: #007bff;
    --bs-btn-disabled-border-color: #007bff;
    --bs-btn-focus-shadow-rgb: 38, 143, 255;
}

.btn-success {
    --bs-btn-bg: #28a745;
    --bs-btn-border-color: #28a745;
    --bs-btn-hover-bg: #218838;
    --bs-btn-hover-border-color: #1e7e34;
    --bs-btn-active-bg: #1e7e34;
    --bs-btn-active-border-color: #1c7430;
    --bs-btn-disabled-bg: #28a745;
    --bs-btn-disabled-border-color: #28a745;
    --bs-btn-focus-shadow-rgb: 72, 180, 97;
}

.btn-secondary {
    --bs-btn-bg: #6c757d;
    --bs-btn-border-color: #6c757d;
    --bs-btn-hover-bg: #5a6268;
    --bs-btn-hover-border-color: #545b62;
    --bs-btn-active-bg: #545b62;
    --bs-btn-active-border-color: #4e555b;
}

.btn-danger {
    --bs-btn-hover-bg: #c82333;
    --bs-btn-hover-border-color: #bd2130;
    --bs-btn-active-bg: #bd2130;
    --bs-btn-active-border-color: #b21f2d;
}

/* Sits under an open dropdown menu (z-index 1000) and over everything else */
.dropdown-backdrop {
    z-index: 999;
}

.form-control[readonly] {
    background-color: #e9ecef;
}

.list-group {
    --bs-list-group-active-bg: #007bff;
    --bs-list-group-active-border-color: #007bff;
}

.credential-field-row {
    margin-bottom: 1rem;
}

@media only screen and (max-width: 576px) {
    .credential-field-row {
        padding: 1rem;
        border-radius: 5px;
        background-color: palegoldenrod;
    }

    .credential-field-row > div {
        margin-bottom: 1rem;
    }
}

/* Shown by Blazor when the client hits an unhandled error */
#blazor-error-ui {
    background: lightyellow;
    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: 1000;
}

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