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

html {
    /* 87.5% of the browser's default (16px) is the same 14px as before, but unlike a fixed 14px it still follows
       the text size a user has chosen in their browser or operating system settings. */
    font-size: 87.5%;
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 0;
}

/* ── Shared brand/utility colors ─────────────────────────────────────────────
   Single source of truth for colors that previously repeated as literal hex
   values in 2-3 places each. Purely a refactor - every value below matches
   what was already in use, so nothing should look different. */
:root {
    --color-epson-blue: #10218b;
    /* Was #90949c: white text on it (secondary buttons) was 3.0:1, below the 4.5:1 needed. */
    --color-gray: #6c757d;
    --color-link-blue: #0071c1;
    --color-focus-blue: #258cfb;
    --color-error: #e50000;
    /* Was #26b050 (2.8:1 against white) for the "valid" input outline, below the 3:1 needed for a UI boundary. */
    --color-success: #1e8e3e;
    --color-warning: #f0ad4e;
    --color-warning-bg: #fff8e6;
    --color-warning-text: #6b4e00;
}

/* Backgrounds */
.bg-dark {
    background-color: #19212b !important;
}

.bg-Epson {
    background-color: var(--color-epson-blue) !important;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: var(--color-link-blue);
}

.content {
    padding-top: 1.1rem;
}

/* Container max width */
@media (min-width: 1400px) {
    .container {
        max-width: 1400px;
    }
}

/* Epson text */
.Epson-text, .Epson-text a, .Epson-text a:hover {
    color: var(--color-epson-blue) !important;
}

/* Buttons */
.btn {
    padding: 0.5rem 2rem 0.5rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0;
    text-align: left;
    transition: background-color .3s ease-in-out;
    white-space: normal;
}

/* Bootstrap's own .btn-sm gets silently overridden by the unscoped .btn rule above
   (same specificity, app.css loads after bootstrap.css) without this - restores the
   intended smaller sizing, proportioned the same way as the base .btn rule so the
   trailing arrow (::after, right: 10px) still clears the text correctly. */
.btn-sm {
    padding: 0.25rem 2rem 0.25rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.35;
}

.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 var(--color-focus-blue);
}

/* Primary / Secondary buttons */
.btn-primary,
.btn-secondary {
    color: #fff;
    border: none;
    position: relative;
}

.btn-primary {
    background-color: var(--color-epson-blue);
}

.btn-secondary {
    background-color: var(--color-gray);
}

    /* Trailing arrow - identical shape/position for both button variants */
    .btn-primary::after,
    .btn-secondary::after {
        content: "";
        width: 0;
        height: 0;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-left: 10px solid #fff;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
    }

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #9ddfff;
    color: var(--color-epson-blue);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: #353535;
    color: #fff;
}

.btn-primary--arrowless::after,
.btn-secondary--arrowless::after {
    display: none;
}

/* Disabled state - identical for both button variants */
.btn-primary:disabled,
.btn-secondary:disabled {
    background-color: var(--color-gray);
    color: #fff;
}

/* Card nav tabs
   The selected tab used to differ from the others only by text colour (black vs Bootstrap blue) and a pale grey
   outline that is 1.3:1 against white, so it was hard to tell which tab you were on. Now the selected tab is
   white, bold, brand blue, with a thick blue top bar; the others are filled grey buttons with dark text.
   Contrast: text 9.7:1 (unselected) and 13:1 (selected), outlines 4.7:1 on white, bar 11:1 against the grey.
   The two states also differ in shape (the bar) and weight, not just colour, so it works without colour vision. */
.card.card-nav-tabs .card-header {
    padding: 5px 5px 0;
    /* The line the tabs stand on. Same grey as the tab outlines so tabs and line read as one piece. */
    border-bottom-color: #6c757d !important;
}

.card.card-nav-tabs .nav-tabs {
    border-bottom: none;
    row-gap: 4px;
}

/* The pages give the header no bottom padding, so the tabs rest directly on its line. Bootstrap's built-in
   -0.5rem here assumes 0.5rem of padding to cancel out; with none it would drag the tabs below the line. The 1px
   lets the bottom of the tabs overlap the line, which is what lets the selected tab join the content below. */
.card.card-nav-tabs .card-header-tabs {
    margin-bottom: -1px;
}

.card.card-nav-tabs .nav-justified {
    margin-bottom: -1px;
}

.card.card-nav-tabs .nav-tabs .nav-link {
    color: #343a40;
    background-color: #e9ecef;
    border: 1px solid #6c757d;
    border-top-width: 3px;
    border-top-color: #6c757d;
    border-radius: 4px 4px 0 0;
}

.card.card-nav-tabs .nav-tabs .nav-link:hover {
    color: var(--color-epson-blue);
    background-color: #dbe0e6;
    text-decoration: underline;
}

.card.card-nav-tabs .nav-tabs .nav-link.active {
    color: var(--color-epson-blue);
    background-color: #fff;
    border-color: #6c757d;
    border-top-color: var(--color-epson-blue);
    /* white, so the selected tab visually opens into the content below it instead of sitting on the line */
    border-bottom-color: #fff;
    font-weight: 700;
    text-decoration: none;
}

/* Bootstrap's own focus ring on a tab is a 25%-opacity glow, which is barely visible. */
.card.card-nav-tabs .nav-tabs .nav-link:focus-visible {
    outline: 3px solid var(--color-epson-blue);
    outline-offset: 2px;
    box-shadow: none;
}

/* Windows High Contrast / forced colours drop backgrounds, so the selected tab needs a border cue of its own. */
@media (forced-colors: active) {
    .card.card-nav-tabs .nav-tabs .nav-link.active {
        border: 2px solid Highlight;
        border-top-width: 5px;
    }
}

/* Error image */
.bg-errorimage {
    background-image: url('images/notfound.webp');
    height: 700px;
}

/* Blazor error UI */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.2);
}

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

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

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

/* Wizard */
.wizard-container {
    max-width: 780px;
    margin: 0 auto;
}

.wizard-steps {
    display: flex;
    align-items: center;
    margin-bottom: 32px;
    position: relative;
}

    .wizard-steps::before {
        content: '';
        position: absolute;
        top: 20px;
        left: 40px;
        right: 40px;
        height: 2px;
        background: #e2e6ed;
        z-index: 0;
    }

.wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    z-index: 1;
}

.wizard-step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #e2e6ed;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    color: #6b7589;
    transition: all 0.25s;
}

.wizard-step.active .wizard-step-circle {
    background: #0057b8;
    border-color: #0057b8;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(0,87,184,0.18);
}

/* Was #00c7b1: white on it was 2.1:1, and the matching label below 3.4:1. #00796b gives 5.3:1 for both. */
.wizard-step.completed .wizard-step-circle {
    background: #00796b;
    border-color: #00796b;
    color: #fff;
}

.wizard-step-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7589;
    margin-top: 8px;
    text-align: center;
}

.wizard-step.active .wizard-step-label {
    color: #0057b8;
}

.wizard-step.completed .wizard-step-label {
    color: #00796b;
}

.wizard-card {
    background: #fff;
    border: 1px solid #e2e6ed;
    border-radius: 16px;
    overflow: hidden;
}

.wizard-card-header {
    padding: 20px 24px;
    border-bottom: 1px solid #e2e6ed;
    background: linear-gradient(135deg, #e8f0fb 0%, #fff 60%);
}

    .wizard-card-header .wizard-step-title {
        font-size: 1.25rem;
        font-weight: 700;
        color: #1a2033;
    }

    .wizard-card-header .wizard-step-desc {
        font-size: 0.9rem;
        color: #6b7589;
    }

.wizard-card-body {
    padding: 24px;
}

.wizard-footer {
    padding: 16px 24px;
    border-top: 1px solid #e2e6ed;
    background: #fafbfd;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Validation */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--color-success);
}

.invalid {
    outline: 1px solid var(--color-error);
}

.validation-message {
    color: var(--color-error);
}

/* Blockquote - used for inline notes/warnings (e.g. "Wait at least 2 minutes
   between searches") that need to stand out from surrounding body text */
blockquote {
    margin: 0.75rem 0;
    padding: 0.6rem 1rem;
    border-left: 4px solid var(--color-warning);
    background-color: var(--color-warning-bg);
    color: var(--color-warning-text);
    font-size: 0.875rem;
    font-style: normal;
}

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

/* Edges of inputs, selects and checkboxes. Bootstrap's defaults (#dee2e6 / 25%-black) are about 1.3:1 against
   white, so the controls nearly disappear for low-vision users; 3:1 is the minimum for a control's boundary. */
.form-control,
.form-select,
.form-check-input {
    border-color: #6c757d;
}

/* Honour the operating system's "reduce motion" setting. The animations here are short fades, but they should
   still switch off for people who ask for it. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Floating labels */
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

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

/* Login page
   A white card on the dark backdrop: dark brand band with the logo, then title, form and a short note. */
.login-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    padding: 1rem;
}

/* The card has no background of its own. Each part (dark band, white body) paints its own colour and its own
   rounded corners. With a white card underneath the dark band, the anti-aliased pixels along the band's rounded
   edge blended with the white and left a pale fringe around it. */
.login-card {
    background: transparent;
    border-radius: 8px;
    width: 100%;
    max-width: 420px;
    overflow: hidden;
}

.login-header {
    background: #19212b; /* same dark as the app's .bg-dark band */
    border-radius: 8px 8px 0 0;
    text-align: center;
    padding: 1.5rem 2rem;
}

    .login-header img {
        max-width: 100%;
        height: auto;
    }

.login-body {
    background: #fff;
    border-radius: 0 0 8px 8px;
    padding: 2rem;
}

.login-title {
    font-size: 1.75rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.25rem;
}

.login-subtitle {
    text-align: center;
    color: #495057; /* 7.6:1 on white */
    margin-bottom: 1.5rem;
}

.login-body .form-control {
    padding: 0.6rem 0.75rem;
    border-radius: 6px;
}

.login-body .form-check-input {
    margin-top: 0.2rem;
}

/* Full-width solid blue button. The global .btn-primary look (navy, trailing arrow, light-blue hover) is overridden
   here, hover and focus included, or it would flash light blue with navy text. White on #0071c1 is 5.1:1. */
.login-body .login-submit,
.login-body .login-submit:hover,
.login-body .login-submit:focus,
.login-body .login-submit:active {
    background-color: var(--color-link-blue);
    color: #fff;
    border-radius: 6px;
    font-weight: 600;
    text-align: center;
    padding: 0.65rem 1rem;
}

    .login-body .login-submit:hover,
    .login-body .login-submit:active {
        background-color: #005a9c; /* 7.1:1 */
    }

    .login-body .login-submit:disabled {
        background-color: var(--color-link-blue);
        opacity: 0.75;
    }

.login-note {
    text-align: center;
    color: #495057;
    font-size: 0.9rem;
    margin: 1.5rem 0 0;
}
/* ── Login page language picker (floated top-right over the gradient bg) ───── */
.login-lang-picker {
    position: fixed;
    top: 1rem;
    right: 1.25rem;
    z-index: 100;
}

/* ── QuickGrid font size ────────────────────────────────────────────────────
   Applied via a shared marker class (added to each QuickGrid's Class=
   attribute) rather than targeting .table directly, since one unrelated
   table (Import/UploadImport.razor, id="resultset") shares the same
   table/table-bordered classes and shouldn't be affected. */
.grid-sm {
    font-size: 0.875rem;
}