/* Schibsted Grotesk, self-hosted (variable, 400–900). Duplicated from eball-theme.css on purpose:
   MVC/account pages reach fonts only through this bundled file, and identical @font-face blocks
   dedupe in the browser. Keep the two declarations in sync. */
@font-face {
    font-family: 'Schibsted Grotesk';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('/fonts/schibsted-grotesk-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Schibsted Grotesk';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('/fonts/schibsted-grotesk-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

#blazor-error-ui {
    background: lightyellow;
    color: #212529;
    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: 1030;
}

#blazor-error-ui .reload {
    color: #0d6efd;
    text-decoration: underline;
}

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

/* ============================================================
   Account pages (login / register / forgot password / 2FA).
   These are MVC Razor Pages on the Bootstrap Basic theme, so
   they don't inherit the Blazor MudBlazor theme. Everything
   below is scoped to body.abp-account-layout to bring them in
   line with the "Immersive" design: near-black page, dark
   surfaces, hairline borders, one popping orange accent.
   ============================================================ */

body.abp-account-layout {
    /* Feed Bootstrap's own custom props so components (floating labels,
       borders, etc.) pick up the dark palette automatically. */
    --bs-body-bg: #0C0C0E;
    --bs-body-color: #FFFFFF;
    --bs-border-color: #232326;
    --bs-secondary-color: #8A8A92;
    --bs-tertiary-bg: #17171A;
    --bs-emphasis-color: #FFFFFF;
    --bs-link-color: #E8630A;
    --bs-link-hover-color: #F47B2A;

    background-color: #0C0C0E;
    font-family: 'Schibsted Grotesk', 'Segoe UI', system-ui, sans-serif;
    color: #FFFFFF;
}

.abp-account-layout h1,
.abp-account-layout h2,
.abp-account-layout h3,
.abp-account-layout h4,
.abp-account-layout h5 {
    font-family: 'Schibsted Grotesk', 'Segoe UI', system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #FFFFFF;
}

.abp-account-layout p,
.abp-account-layout label,
.abp-account-layout .form-text {
    color: #B8B8C0;
}

/* --- top navbar: hidden on login/register (bare, header-less page) ------ */
/* Deliberate: the account pages are a single-card conversion surface with no
   chrome. A stripped-back brand bar was tried and rejected — the card's own
   lockup is the brand, and a second wordmark 200px above it reads as a repeat. */

.abp-account-layout #main-navbar,
.abp-account-layout .navbar {
    display: none !important;
}

/* the brand anchor holds the logo img plus a text node — size the img,
   collapse the duplicate text */
.abp-account-layout .navbar-brand {
    color: #FFFFFF !important;
    font-weight: 800;
    font-size: 0;
    letter-spacing: -0.02em;
}

.abp-account-layout .navbar-brand img {
    height: 34px;
    width: auto;
}

.abp-account-layout .navbar .nav-link {
    color: #B8B8C0 !important;
    font-weight: 600;
    font-size: 0.9rem;
}

.abp-account-layout .navbar .nav-link:hover,
.abp-account-layout .navbar .nav-link:focus {
    color: #E8630A !important;
}

.abp-account-layout .navbar-toggler {
    border-color: #3A3A40;
}

/* --- centre the card in the viewport ----------------------------------- */
/* The navbar is hidden above, so nothing stretches the page — pin the
   container to full viewport height and centre the row within it. */

/* The 100vh lives on the body, not the container, because the register consent
   line is rendered by a layout hook at the very end of <body> — outside the
   container. With the height on the container that line landed below the fold. */
body.abp-account-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Direct child only — the navbar above carries its own .container, and an
   unscoped selector would stretch that one to 100vh too. */
body.abp-account-layout > .container {
    display: flex;
    flex-direction: column;
    /* grow to fill, but shrink so the consent line never forces a scrollbar */
    flex: 1 1 auto;
    min-height: 0;
    padding-top: 24px;
    padding-bottom: 24px;
}

/* --- register-only Terms / Privacy consent (layout hook) ---------------- */

.abp-account-layout .eb-account-consent {
    flex: 0 0 auto;
    margin: 0 auto;
    padding: 0 24px 28px;
    max-width: 460px;
    text-align: center;
    font-size: 12px;
    line-height: 1.6;
    color: #7A7A82;
}

.abp-account-layout .eb-account-consent a {
    color: #9A9AA2;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.abp-account-layout .eb-account-consent a:hover,
.abp-account-layout .eb-account-consent a:focus {
    color: #E8630A;
}

/* auto margins centre the row when it's shorter than the viewport, and
   collapse to 0 when it's taller — so tall pages (register/2FA) stay
   fully scrollable instead of clipping at the top. */
.abp-account-layout .container > .row {
    width: 100%;
    margin-top: auto;
    margin-bottom: auto;
    /* Bootstrap's .row sets margin-inline: calc(-.5 * var(--bs-gutter-x)). width:100% does not
       clear it, so the negative left margin shifted the card ~12px left of centre — and put its
       left edge hard against the screen at 390px. */
    margin-inline: 0;
}

/* --- the form column becomes a dark hairline-outlined card -------------- */

.abp-account-layout .container > .row > .col.mx-auto {
    background-color: #17171A;
    border: 1px solid #232326;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
    padding: 40px 34px 30px;
    max-width: 460px;
    /* neutralise the framework's mt-3/mt-md-5 so centring is true */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* --- brand block inside the card: white-on-dark logo -------------------- */

.abp-account-layout .brand-logo {
    /* Horizontal lockup (mark + wordmark) — the same artwork the top bar and footer use. The bask
       v1.0.0 identity ships no stacked variant and no tagline lockup, so the account card shares the
       horizontal one rather than keeping older draft artwork; the light variant is swapped in below. */
    display: block;
    content: url('/images/brand/bask-logo-horizontal-negative-1200w.png?v=bask-v1-20260812');
    height: auto;
    width: 100%;
    max-width: 280px;
    margin: 0 auto 18px;
}

.abp-account-layout .brand-container {
    margin: 0 0 8px;
}

.abp-account-layout .brand-text {
    display: none;
}

/* --- inputs ------------------------------------------------------------- */

.abp-account-layout .form-control,
.abp-account-layout .form-select {
    background-color: #111114;
    border-radius: 10px;
    border: 1px solid #3A3A40;
    color: #FFFFFF;
}

.abp-account-layout .form-control::placeholder {
    color: #6A6A72;
}

/* Bootstrap floating-label fields (login / register) use the <label> itself AS
   the placeholder, so the real placeholder text must stay transparent —
   otherwise the label and the placeholder render on top of each other as
   doubled/overlapping text. (Higher specificity than the rule above.) */
.abp-account-layout .form-floating > .form-control::placeholder {
    color: transparent;
}

.abp-account-layout .form-control:focus,
.abp-account-layout .form-select:focus {
    background-color: #111114;
    border-color: #E8630A;
    color: #FFFFFF;
    box-shadow: 0 0 0 0.2rem rgba(232, 99, 10, 0.22);
}

.abp-account-layout .form-floating > label {
    color: #8A8A92;
}

.abp-account-layout .form-check-input {
    background-color: #111114;
    border: 1px solid #3A3A40;
}

.abp-account-layout .form-check-input:checked {
    background-color: #E8630A;
    border-color: #E8630A;
}

.abp-account-layout .form-check-input:focus {
    border-color: #E8630A;
    box-shadow: 0 0 0 0.2rem rgba(232, 99, 10, 0.22);
}

/* --- validation / error states ------------------------------------------ */
/* Bootstrap ships these unstyled against a dark card, so a rejected password
   used to render as raw framework output on an otherwise themed page. Colour
   is the theme's --eb-error (#F4644C dark / #C4331C light) written literally,
   since eball-theme.css is not on the MVC bundle. */

.abp-account-layout .invalid-feedback,
.abp-account-layout .text-danger,
.abp-account-layout .field-validation-error,
.abp-account-layout .validation-message {
    color: #F4644C;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 6px;
}

.abp-account-layout .form-control.is-invalid,
.abp-account-layout .form-select.is-invalid,
.abp-account-layout .form-control.input-validation-error {
    border-color: #F4644C;
    /* Bootstrap's inline warning glyph is a data-URI on a light assumption —
       drop it and let the border and the message carry the state. */
    background-image: none;
    padding-right: 0.75rem;
}

.abp-account-layout .form-control.is-invalid:focus,
.abp-account-layout .form-control.input-validation-error:focus {
    border-color: #F4644C;
    box-shadow: 0 0 0 0.2rem rgba(244, 100, 76, 0.22);
}

/* Summary block (server-side errors: bad credentials, taken email). */
.abp-account-layout .validation-summary-errors,
.abp-account-layout .alert-danger {
    background-color: rgba(244, 100, 76, 0.1);
    border: 1px solid rgba(244, 100, 76, 0.38);
    border-radius: 12px;
    color: #FFC9BF;
    padding: 12px 14px;
    margin-bottom: 18px;
    font-size: 0.9rem;
}

.abp-account-layout .validation-summary-errors ul {
    margin: 0;
    padding-left: 18px;
}

.abp-account-layout .validation-summary-valid {
    display: none;
}

/* --- buttons ------------------------------------------------------------ */

.abp-account-layout .btn {
    border-radius: 12px;
    font-weight: 700;
    border-width: 1px;
}

.abp-account-layout .btn-primary {
    background-color: #E8630A;
    border-color: #E8630A;
    color: #0C0C0E;
    padding: 0.65rem 1.1rem;
    box-shadow: none;
    transition: background-color 140ms ease, box-shadow 140ms ease;
}

.abp-account-layout .btn-primary:hover,
.abp-account-layout .btn-primary:focus,
.abp-account-layout .btn-primary:active,
.abp-account-layout .btn-primary:first-child:active {
    background-color: #F47B2A;
    border-color: #F47B2A;
    color: #0C0C0E;
    box-shadow: 0 0 28px rgba(232, 99, 10, 0.32);
}

.abp-account-layout .btn-primary:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(232, 99, 10, 0.4);
}

.abp-account-layout .btn-secondary,
.abp-account-layout .btn-outline-primary,
.abp-account-layout .btn-outline-secondary {
    background-color: transparent;
    border-color: #3A3A40;
    color: #FFFFFF;
}

.abp-account-layout .btn-secondary:hover,
.abp-account-layout .btn-outline-primary:hover,
.abp-account-layout .btn-outline-secondary:hover {
    background-color: transparent;
    border-color: #E8630A;
    color: #E8630A;
}

/* --- links -------------------------------------------------------------- */

.abp-account-layout main a,
.abp-account-layout .container a:not(.btn):not(.nav-link):not(.navbar-brand) {
    color: #E8630A;
    text-decoration: none;
    font-weight: 600;
}

.abp-account-layout main a:hover,
.abp-account-layout .container a:not(.btn):not(.nav-link):not(.navbar-brand):hover {
    color: #F47B2A;
    text-decoration: underline;
}

/* --- "Not a member yet? Register" heading: give it breathing room -------- */

.abp-account-layout .account-module-form > h5 {
    margin: 6px 0 22px;
    font-size: 1rem;
    font-weight: 600;
    color: #B8B8C0;
}

/* --- external-login (Google) button ------------------------------------- */
/* Framework markup: `.btn text-dark ... bg-info bg-opacity-10`. On the dark
   card the text-dark label is invisible and the faint cyan bg looks off — make
   it a proper dark outlined button with a visible white label. */

.abp-account-layout button[name="provider"] {
    /* ABP ships this button with Bootstrap's .rounded-5 (2rem, and the utility carries
       !important), so it rendered as a pill beside the 12px Login button. Match the card. */
    border-radius: 12px !important;
    background-color: #111114 !important;
    border: 1px solid #3A3A40 !important;
    color: #FFFFFF !important;
    opacity: 1 !important;
    gap: 8px;
    padding: 0.6rem 1rem;
}

.abp-account-layout button[name="provider"] span {
    color: #FFFFFF !important;
}

.abp-account-layout button[name="provider"]:hover {
    background-color: #17171A !important;
    border-color: #E8630A !important;
}

/* the "Or sign in with" divider text */
.abp-account-layout .account-external-login-container,
.abp-account-layout .separator {
    color: #8A8A92;
}

/* ============================================================
   MVC application-layout pages (e.g. /Account/Manage). These are
   Bootstrap MVC pages that use body.abp-application-layout and are
   reached by neither the account-scoped rules above nor the Blazor
   eball-theme.css. The Blazor host uses .mud-* classes, so these
   Bootstrap-targeted rules only visibly affect the MVC pages.
   ============================================================ */

body.abp-application-layout {
    background-color: #1A1A20;
    color: #FFFFFF;
}

body.abp-application-layout h1,
body.abp-application-layout h2,
body.abp-application-layout h3,
body.abp-application-layout h4,
body.abp-application-layout h5 {
    color: #FFFFFF;
}

/* top navbar (ABP Basic theme) */
body.abp-application-layout #main-navbar,
body.abp-application-layout .navbar {
    background-color: #0C0C0E !important;
    border-bottom: 1px solid #232326;
    box-shadow: none !important;
}

/* Brand: the bask horizontal lockup already contains the wordmark, so the image is the whole
   brand — exactly as in the Blazor header. The framework renders the brand anchor as an image
   followed by the AppName text node, and AppName is itself "bask", so font-size:0 stays to hide
   that text; without it the wordmark would render twice, once as artwork and once as text.
   (Earlier this rebuilt a two-tone "Regius"/"Market" wordmark from pseudo-elements — removed
   with the bask rebrand.) */
body.abp-application-layout .navbar-brand {
    display: flex;
    align-items: center;
    font-size: 0;
    letter-spacing: -0.01em;
}

body.abp-application-layout .navbar-brand img {
    /* The bask lockups are named for the background they sit ON, so "light-background" is the
       dark-ink artwork. ABP's branding provider hands the Basic theme its LogoUrl regardless of
       our theme, and this bar is near-black — so serve the dark-background (light-ink) lockup
       here and swap it under [data-theme="light"], the same pairing .brand-logo uses. Without
       this the mark renders charcoal-on-charcoal and only the orange heat disc is visible. */
    content: url('/images/brand/bask-logo-horizontal-negative-1200w.png?v=bask-v1-20260812');
    height: 30px;
    width: auto;
    order: 0;
}

[data-theme="light"] body.abp-application-layout .navbar-brand img {
    content: url('/images/brand/bask-logo-horizontal-positive-1200w.png?v=bask-v1-20260812');
}

/* Left-align the main menu next to the brand (ABP centres it with .mx-auto); the
   margin-right:auto keeps the user menu pushed to the far right, like the Blazor header. */
body.abp-application-layout .navbar-nav.mx-auto {
    margin-left: 0 !important;
    margin-right: auto !important;
}

body.abp-application-layout .navbar .nav-link {
    color: rgba(255, 255, 255, 0.75) !important;
    font-weight: 600;
}

body.abp-application-layout .navbar .nav-link:hover,
body.abp-application-layout .navbar .nav-link:focus {
    color: #FFFFFF !important;
}

/* dropdowns (Selling / Administration / user menu) — Bootstrap defaults to a white menu;
   dark it to match the rest of the site. */
body.abp-application-layout .dropdown-menu {
    background-color: #17171A;
    border: 1px solid #232326;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}

body.abp-application-layout .dropdown-item {
    color: #B8B8C0;
}

body.abp-application-layout .dropdown-item:hover,
body.abp-application-layout .dropdown-item:focus {
    background-color: rgba(232, 99, 10, 0.12);
    color: #FFFFFF;
}

body.abp-application-layout .dropdown-divider {
    border-color: #232326;
}

/* content cards */
body.abp-application-layout .card {
    background-color: #24242A;
    border: 1px solid #2C2C33;
    color: #FFFFFF;
}

body.abp-application-layout .card-header,
body.abp-application-layout .card-footer {
    background-color: #24242A;
    border-color: #2C2C33;
    color: #FFFFFF;
}

/* left nav-pills (Personal info / Profile picture / Change password) */
body.abp-application-layout .nav-pills .nav-link {
    color: #B8B8C0;
}

body.abp-application-layout .nav-pills .nav-link.active {
    background-color: #E8630A;
    color: #0C0C0E;
}

/* inputs */
body.abp-application-layout .form-control,
body.abp-application-layout .form-select {
    background-color: #111114;
    border: 1px solid #3A3A40;
    color: #FFFFFF;
}

body.abp-application-layout .form-control::placeholder { color: #6A6A72; }

body.abp-application-layout .form-control:focus,
body.abp-application-layout .form-select:focus {
    background-color: #111114;
    border-color: #E8630A;
    color: #FFFFFF;
    box-shadow: 0 0 0 0.2rem rgba(232, 99, 10, 0.22);
}

body.abp-application-layout label,
body.abp-application-layout .form-label,
body.abp-application-layout .form-text {
    color: #B8B8C0;
}

/* buttons */
body.abp-application-layout .btn-primary {
    background-color: #E8630A;
    border-color: #E8630A;
    color: #0C0C0E;
    font-weight: 700;
}

body.abp-application-layout .btn-primary:hover,
body.abp-application-layout .btn-primary:focus {
    background-color: #F47B2A;
    border-color: #F47B2A;
    color: #0C0C0E;
}

body.abp-application-layout .btn-outline-primary,
body.abp-application-layout .btn-secondary,
body.abp-application-layout .btn-outline-secondary {
    background-color: transparent;
    border-color: #3A3A40;
    color: #FFFFFF;
}

body.abp-application-layout .btn-outline-primary:hover,
body.abp-application-layout .btn-secondary:hover,
body.abp-application-layout .btn-outline-secondary:hover {
    border-color: #E8630A;
    color: #E8630A;
}

body.abp-application-layout hr,
body.abp-application-layout .border-bottom,
body.abp-application-layout .border-top {
    border-color: #232326 !important;
}

/* :not(.mud-button-root) — MudButtons rendered with an Href are <a> anchors; without this
   exclusion this content-link colour bleeds onto them and wins over the button's own styling,
   turning filled-primary buttons into invisible orange-on-orange (and overriding the theme's
   outlined-button colour). Completes the intent of the .btn exclusion for the Blazor host. */
/* :not(.eb-welfare-note-link):not(.eb-morph-spec-value--warn) — welfare links must stay on the
   welfare accent, never brand orange: a hereditary-concern warning that reads as a call to action
   is the one colour mistake this system cannot make. :not(.eb-crumb-link) keeps breadcrumbs quiet
   navigation rather than lighting the top of every morph page orange. */
/* :not(.eb-hero-cta-btn) — the hero's account/seller buttons are plain <a>, not MudButtons, so the
   .mud-button-root escape hatch does not cover them. Without this the primary rendered as literal
   orange-on-orange: the label was in the DOM and invisible on screen. */
body.abp-application-layout main a:not(.btn):not(.nav-link):not(.navbar-brand):not(.mud-button-root):not(.eb-chat-listing-link):not(.eb-store-live-url):not(.eb-welfare-note-link):not(.eb-morph-spec-value--warn):not(.eb-crumb-link):not(.eb-guide-next-link):not(.eb-store-gene):not(.eb-gene-name):not(.eb-ld-gene):not(.eb-detail-nav-btn):not(.eb-ld-trust):not(.eb-hero-cta-btn):not(.eb-species-chip) {
    color: #E8630A;
}

/* Bootstrap's coloured semantic buttons (e.g. ABP renders the email "Verify" action as
   btn-warning — a jarring yellow here) have no place in the one-orange dark theme. Render
   them as the neutral outlined button so they match the Blazor surfaces. Destructive
   .btn-danger keeps its red — red still reads as "destructive" and is a legitimate signal. */
body.abp-application-layout .btn-warning,
body.abp-application-layout .btn-info,
body.abp-application-layout .btn-success {
    background-color: transparent;
    border: 1px solid #3A3A40;
    color: #FFFFFF;
    box-shadow: none;
}

body.abp-application-layout .btn-warning:hover,
body.abp-application-layout .btn-info:hover,
body.abp-application-layout .btn-success:hover,
body.abp-application-layout .btn-warning:focus,
body.abp-application-layout .btn-info:focus,
body.abp-application-layout .btn-success:focus {
    background-color: transparent;
    border-color: #E8630A;
    color: #E8630A;
}

/* The ABP Basic-theme navbar prints each menu item's FontAwesome icon (CMS, Files,
   Administration…); the Blazor top nav is icon-free, so the two navbars look like
   different sites. Drop the icons here so the MVC chrome reads like the Blazor one. */
body.abp-application-layout .navbar-nav .nav-link i,
body.abp-application-layout .navbar-nav .dropdown-item i {
    display: none;
}

/* ABP renders a light Bootstrap table on MVC list pages — dark it to the surface palette
   so any MVC data page matches the Blazor MudTables. */
body.abp-application-layout .table {
    --bs-table-bg: transparent;
    --bs-table-color: #FFFFFF;
    --bs-table-border-color: #2C2C33;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
    --bs-table-striped-color: #FFFFFF;
    --bs-table-hover-bg: rgba(232, 99, 10, 0.06);
    --bs-table-hover-color: #FFFFFF;
    color: #FFFFFF;
}

body.abp-application-layout .table > thead {
    color: #9C9CA6;
}

/* Bootstrap modals/list groups on MVC dialogs → dark surfaces */
body.abp-application-layout .modal-content,
body.abp-application-layout .list-group-item {
    background-color: #24242A;
    border-color: #2C2C33;
    color: #FFFFFF;
}

body.abp-application-layout .modal-header,
body.abp-application-layout .modal-footer {
    border-color: #2C2C33;
}

/* Bootstrap badges default to bright fills; tint them to the brand's chip treatment */
body.abp-application-layout .badge.bg-primary {
    background-color: rgba(232, 99, 10, 0.14) !important;
    color: #F47B2A;
}

/* --- Navbar item parity with the Blazor top nav -------------------------- */
/* The Blazor MainAppLayout nav shows only marketplace items (Home / Ball Pythons /
   Breeders / News) plus CMS + Admin dropdowns; Dashboard and File Management live UNDER
   the Admin dropdown there. The MVC Basic-theme navbar renders the raw menu, so those two
   leak to the top level. Hide them so the two navbars carry the same items.
   (:has() is baseline in current browsers; the ABP admin targets evergreen browsers.) */
body.abp-application-layout .navbar-nav > li.nav-item:has(a[href="/admin-dashboard"]),
body.abp-application-layout .navbar-nav > li.nav-item:has(a[href="/file-management"]) {
    display: none;
}

/* --- Footer parity: mirror the Blazor .eb-footer on MVC pages ------------ */
/* eball-theme.css (which defines .eb-footer) isn't loaded on MVC pages, and global-scripts.js
   injects a matching <footer class="eb-mvc-footer"> only on application-layout MVC pages —
   restyle it here to match the Blazor footer exactly (near-black bar, two-tone wordmark,
   muted links). */
body.abp-application-layout .eb-mvc-footer {
    background: #0C0C0E;
    border-top: 1px solid #232326;
    padding: 30px 0;
    margin-top: 56px;
}

body.abp-application-layout .eb-mvc-footer-inner {
    /* Mirrors --eb-container-max in eball-theme.css, which MVC pages do not load — the two have to
       move together or the footer stops lining up with the page above it. */
    max-width: 1400px;
    margin-inline: auto;
    padding-inline: 28px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

body.abp-application-layout .eb-mvc-footer-brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 44px;
    line-height: 1;
    text-decoration: none;
}

body.abp-application-layout .eb-mvc-footer-mark {
    display: block;
    height: 32px;
    width: auto;
    margin-right: 10px;
}

body.abp-application-layout .eb-mvc-footer-mark--light {
    display: none;
}

body.abp-application-layout .eb-mvc-footer-wordmark {
    color: #F8F4ED;
    font-family: 'Schibsted Grotesk', 'Segoe UI', system-ui, sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0;
    white-space: nowrap;
}

body.abp-application-layout .eb-mvc-footer-links {
    margin-left: auto;
    display: flex;
    gap: 24px;
    font-size: 0.8rem;
}

body.abp-application-layout .eb-mvc-footer-links a {
    color: #8A8A92;
    text-decoration: none;
    font-weight: 600;
}

body.abp-application-layout .eb-mvc-footer-links a:hover {
    color: #FFFFFF;
}

@media (max-width: 767.98px) {
    body.abp-application-layout .eb-mvc-footer-inner {
        gap: 16px;
    }

    body.abp-application-layout .eb-mvc-footer-links {
        width: 100%;
        margin-left: 0;
        gap: 8px 20px;
    }

    body.abp-application-layout .eb-mvc-footer-links a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* Passkeys are not offered (the Manage-profile "Passkeys" tab is removed in
   eBallHidePasskeysContributor). Hide the passkey sign-in button on the login page too —
   ABP renders it with Bootstrap's `text-dark` class, which is invisible on the dark login
   card and read as a "ghost" empty pill between Login and the Google button. */
body.abp-account-layout #passkeyLoginButton {
    display: none !important;
}

/* ============================================================
   LIGHT THEME — "Day Vivarium" overrides for the Bootstrap MVC
   surfaces. Activated by html[data-theme="light"], set by the
   ebTheme boot script (Blazor host) and global-scripts.js (MVC /
   account pages). The rules above stay the dark default; each
   selector here is the same rule with the light palette, one
   attribute more specific so it wins. Approved #E8630A stays on
   FILLS (primary buttons, checked inputs, active pills); orange
   TEXT darkens to #B84A08 (>=4.5:1 on white). Some of these
   application-layout rules also govern the Blazor host, whose
   <body> carries .abp-application-layout (e.g. the h1-h5 colour).
   ============================================================ */

/* ---- Account pages (login / register / 2FA) ---- */
[data-theme="light"] body.abp-account-layout {
    --bs-body-bg: #F4F4F6;
    --bs-body-color: #17171A;
    --bs-border-color: #E4E4E9;
    --bs-secondary-color: #63636B;
    --bs-tertiary-bg: #EDEDF1;
    --bs-emphasis-color: #17171A;
    --bs-link-color: #B84A08;
    --bs-link-hover-color: #A03F06;
    background-color: #F4F4F6;
    color: #17171A;
}

[data-theme="light"] .abp-account-layout h1,
[data-theme="light"] .abp-account-layout h2,
[data-theme="light"] .abp-account-layout h3,
[data-theme="light"] .abp-account-layout h4,
[data-theme="light"] .abp-account-layout h5 {
    color: #17171A;
}

[data-theme="light"] .abp-account-layout p,
[data-theme="light"] .abp-account-layout label,
[data-theme="light"] .abp-account-layout .form-text {
    color: #44454D;
}

[data-theme="light"] .abp-account-layout .navbar-brand {
    color: #17171A !important;
}

[data-theme="light"] .abp-account-layout .navbar .nav-link {
    color: #44454D !important;
}

[data-theme="light"] .abp-account-layout .navbar .nav-link:hover,
[data-theme="light"] .abp-account-layout .navbar .nav-link:focus {
    color: #B84A08 !important;
}

[data-theme="light"] .abp-account-layout .container > .row > .col.mx-auto {
    background-color: #FFFFFF;
    border-color: #E4E4E9;
    box-shadow: 0 24px 64px rgba(20, 22, 40, 0.12);
}

[data-theme="light"] .abp-account-layout .eb-account-consent {
    color: #6B6B75;
}

[data-theme="light"] .abp-account-layout .eb-account-consent a {
    color: #4A4A55;
}

[data-theme="light"] .abp-account-layout .eb-account-consent a:hover,
[data-theme="light"] .abp-account-layout .eb-account-consent a:focus {
    /* orange as text darkens on light for contrast — see DESIGN.md, The Two-Theme Rule */
    color: #B84A08;
}

/* Light card gets the light-background lockup (dark ink on cream). */
[data-theme="light"] .abp-account-layout .brand-logo {
    content: url('/images/brand/bask-logo-horizontal-positive-1200w.png?v=bask-v1-20260812');
}

[data-theme="light"] .abp-account-layout .form-control,
[data-theme="light"] .abp-account-layout .form-select {
    background-color: #FFFFFF;
    border-color: #CFCFD6;
    color: #17171A;
}

[data-theme="light"] .abp-account-layout .form-control:focus,
[data-theme="light"] .abp-account-layout .form-select:focus {
    background-color: #FFFFFF;
    border-color: #E8630A;
    color: #17171A;
}

[data-theme="light"] .abp-account-layout .form-floating > label {
    color: #63636B;
}

[data-theme="light"] .abp-account-layout .form-check-input {
    background-color: #FFFFFF;
    border-color: #CFCFD6;
}

/* Error red darkens on light for the same reason orange text does — #F4644C
   is 2.9:1 on white. #C4331C is the theme's light --eb-error. */
[data-theme="light"] .abp-account-layout .invalid-feedback,
[data-theme="light"] .abp-account-layout .text-danger,
[data-theme="light"] .abp-account-layout .field-validation-error,
[data-theme="light"] .abp-account-layout .validation-message {
    color: #C4331C;
}

[data-theme="light"] .abp-account-layout .form-control.is-invalid,
[data-theme="light"] .abp-account-layout .form-select.is-invalid,
[data-theme="light"] .abp-account-layout .form-control.input-validation-error {
    border-color: #C4331C;
}

[data-theme="light"] .abp-account-layout .form-control.is-invalid:focus,
[data-theme="light"] .abp-account-layout .form-control.input-validation-error:focus {
    border-color: #C4331C;
    box-shadow: 0 0 0 0.2rem rgba(196, 51, 28, 0.2);
}

[data-theme="light"] .abp-account-layout .validation-summary-errors,
[data-theme="light"] .abp-account-layout .alert-danger {
    background-color: rgba(196, 51, 28, 0.07);
    border-color: rgba(196, 51, 28, 0.3);
    color: #8E2413;
}

/* The fill deepens and the label turns white on light, matching --eb-orange / --eb-on-orange in
   eball-theme.css: near-black on #E8630A reads muddy on a white card, and white on it is 3.38:1.
   White on #B84A08 is 5.22:1. */
[data-theme="light"] .abp-account-layout .btn-primary {
    background-color: #B84A08;
    border-color: #B84A08;
    color: #FFFFFF;
}

[data-theme="light"] .abp-account-layout .btn-primary:hover,
[data-theme="light"] .abp-account-layout .btn-primary:focus,
[data-theme="light"] .abp-account-layout .btn-primary:active,
[data-theme="light"] .abp-account-layout .btn-primary:first-child:active {
    background-color: #9E3F06;
    border-color: #9E3F06;
    color: #FFFFFF;
    box-shadow: 0 0 28px rgba(184, 74, 8, 0.28);
}

[data-theme="light"] .abp-account-layout .btn-secondary,
[data-theme="light"] .abp-account-layout .btn-outline-primary,
[data-theme="light"] .abp-account-layout .btn-outline-secondary {
    border-color: #CFCFD6;
    color: #17171A;
}

[data-theme="light"] .abp-account-layout main a,
[data-theme="light"] .abp-account-layout .container a:not(.btn):not(.nav-link):not(.navbar-brand) {
    color: #B84A08;
}

[data-theme="light"] .abp-account-layout main a:hover,
[data-theme="light"] .abp-account-layout .container a:not(.btn):not(.nav-link):not(.navbar-brand):hover {
    color: #A03F06;
}

[data-theme="light"] .abp-account-layout .account-module-form > h5 {
    color: #44454D;
}

[data-theme="light"] .abp-account-layout button[name="provider"] {
    background-color: #FFFFFF !important;
    border-color: #CFCFD6 !important;
    color: #17171A !important;
}

[data-theme="light"] .abp-account-layout button[name="provider"] span {
    color: #17171A !important;
}

[data-theme="light"] .abp-account-layout button[name="provider"]:hover {
    background-color: #F4F4F6 !important;
    border-color: #B84A08 !important;
}

[data-theme="light"] .abp-account-layout .account-external-login-container,
[data-theme="light"] .abp-account-layout .separator {
    color: #63636B;
}

/* ---- Application-layout pages (MVC admin/manage) + Blazor-host bleed ---- */
[data-theme="light"] body.abp-application-layout {
    background-color: #F4F4F6;
    color: #17171A;
}

[data-theme="light"] body.abp-application-layout h1,
[data-theme="light"] body.abp-application-layout h2,
[data-theme="light"] body.abp-application-layout h3,
[data-theme="light"] body.abp-application-layout h4,
[data-theme="light"] body.abp-application-layout h5 {
    color: #17171A;
}

[data-theme="light"] body.abp-application-layout #main-navbar,
[data-theme="light"] body.abp-application-layout .navbar {
    background-color: #FFFFFF !important;
    border-bottom-color: #E4E4E9;
}

[data-theme="light"] body.abp-application-layout .navbar-brand::before {
    color: #17171A;
}

[data-theme="light"] body.abp-application-layout .navbar-brand::after {
    color: #B84A08;
}

[data-theme="light"] body.abp-application-layout .navbar .nav-link {
    color: rgba(23, 23, 26, 0.72) !important;
}

[data-theme="light"] body.abp-application-layout .navbar .nav-link:hover,
[data-theme="light"] body.abp-application-layout .navbar .nav-link:focus {
    color: #17171A !important;
}

[data-theme="light"] body.abp-application-layout .dropdown-menu {
    background-color: #FFFFFF;
    border-color: #E4E4E9;
    box-shadow: 0 16px 40px rgba(20, 22, 40, 0.14);
}

[data-theme="light"] body.abp-application-layout .dropdown-item {
    color: #44454D;
}

[data-theme="light"] body.abp-application-layout .dropdown-item:hover,
[data-theme="light"] body.abp-application-layout .dropdown-item:focus {
    background-color: rgba(232, 99, 10, 0.12);
    color: #17171A;
}

[data-theme="light"] body.abp-application-layout .dropdown-divider {
    border-color: #E4E4E9;
}

[data-theme="light"] body.abp-application-layout .card,
[data-theme="light"] body.abp-application-layout .card-header,
[data-theme="light"] body.abp-application-layout .card-footer {
    background-color: #FFFFFF;
    border-color: #E4E4E9;
    color: #17171A;
}

[data-theme="light"] body.abp-application-layout .nav-pills .nav-link {
    color: #44454D;
}

[data-theme="light"] body.abp-application-layout .form-control,
[data-theme="light"] body.abp-application-layout .form-select {
    background-color: #FFFFFF;
    border-color: #CFCFD6;
    color: #17171A;
}

[data-theme="light"] body.abp-application-layout .form-control:focus,
[data-theme="light"] body.abp-application-layout .form-select:focus {
    background-color: #FFFFFF;
    border-color: #E8630A;
    color: #17171A;
}

[data-theme="light"] body.abp-application-layout label,
[data-theme="light"] body.abp-application-layout .form-label,
[data-theme="light"] body.abp-application-layout .form-text {
    color: #44454D;
}

[data-theme="light"] body.abp-application-layout .btn-primary {
    background-color: #B84A08;
    border-color: #B84A08;
    color: #FFFFFF;
}

[data-theme="light"] body.abp-application-layout .btn-primary:hover,
[data-theme="light"] body.abp-application-layout .btn-primary:focus {
    background-color: #9E3F06;
    border-color: #9E3F06;
    color: #FFFFFF;
}

[data-theme="light"] body.abp-application-layout .btn-outline-primary,
[data-theme="light"] body.abp-application-layout .btn-secondary,
[data-theme="light"] body.abp-application-layout .btn-outline-secondary,
[data-theme="light"] body.abp-application-layout .btn-warning,
[data-theme="light"] body.abp-application-layout .btn-info,
[data-theme="light"] body.abp-application-layout .btn-success {
    border-color: #CFCFD6;
    color: #17171A;
}

[data-theme="light"] body.abp-application-layout hr,
[data-theme="light"] body.abp-application-layout .border-bottom,
[data-theme="light"] body.abp-application-layout .border-top {
    border-color: #E4E4E9 !important;
}

[data-theme="light"] body.abp-application-layout main a:not(.btn):not(.nav-link):not(.navbar-brand):not(.mud-button-root):not(.eb-chat-listing-link):not(.eb-store-live-url):not(.eb-welfare-note-link):not(.eb-morph-spec-value--warn):not(.eb-crumb-link):not(.eb-guide-next-link):not(.eb-store-gene):not(.eb-gene-name):not(.eb-ld-gene):not(.eb-detail-nav-btn):not(.eb-ld-trust):not(.eb-hero-cta-btn):not(.eb-species-chip) {
    color: #B84A08;
}

[data-theme="light"] body.abp-application-layout .table {
    --bs-table-color: #17171A;
    --bs-table-border-color: #E4E4E9;
    --bs-table-striped-bg: rgba(0, 0, 0, 0.02);
    --bs-table-striped-color: #17171A;
    --bs-table-hover-bg: rgba(232, 99, 10, 0.06);
    --bs-table-hover-color: #17171A;
    color: #17171A;
}

[data-theme="light"] body.abp-application-layout .table > thead {
    color: #63636B;
}

[data-theme="light"] body.abp-application-layout .modal-content,
[data-theme="light"] body.abp-application-layout .list-group-item {
    background-color: #FFFFFF;
    border-color: #E4E4E9;
    color: #17171A;
}

[data-theme="light"] body.abp-application-layout .modal-header,
[data-theme="light"] body.abp-application-layout .modal-footer {
    border-color: #E4E4E9;
}

[data-theme="light"] body.abp-application-layout .eb-mvc-footer {
    background: #FFFFFF;
    border-top-color: #E4E4E9;
}

[data-theme="light"] body.abp-application-layout .eb-mvc-footer-mark--dark {
    display: none;
}

[data-theme="light"] body.abp-application-layout .eb-mvc-footer-mark--light {
    display: block;
}

[data-theme="light"] body.abp-application-layout .eb-mvc-footer-wordmark {
    color: #111315;
}

[data-theme="light"] body.abp-application-layout .eb-mvc-footer-links a {
    color: #63636B;
}

[data-theme="light"] body.abp-application-layout .eb-mvc-footer-links a:hover {
    color: #17171A;
}