/* ---------------------------------------------------------------------------
   AVA theme — brand colour system, typography scale and full-bleed page
   backgrounds ported from the original Ava.Blazor.Client (wwwroot/Content/site.css).

   IMPORTANT: this file must be linked AFTER MudBlazor.min.css in App.razor so
   these brand classes win over MudBlazor's component defaults (the original site
   relied on the same load order).
   --------------------------------------------------------------------------- */

.bg-primary-1 { background-color: #005789; color: #ffffff; }
.bg-primary-2 { background-color: #008ccc; color: #000000; }
.bg-primary-3 { background-color: #495965; color: #ffffff; }
.bg-secondary-1 { background-color: #dfe1df; color: #000000; }
.bg-secondary-2 { background-color: #003660; color: #ffffff; }
.bg-secondary-3 { background-color: #10253f; color: #ffffff; }
.bg-transparent { background-color: transparent; }

.colour-primary-1 { color: #005789; }
.colour-primary-2 { color: #008ccc; }
.colour-primary-3 { color: #495965; }
.colour-secondary-1 { color: #dfe1df; }
.colour-secondary-2 { color: #003660; }
.colour-secondary-3 { color: #10253f; }
.colour-white { color: #ffffff; }

.font-size-1 { font-size: 1em; }
.font-size-2 { font-size: 1.1em; }
.font-size-3 { font-size: 1.2em; }
.font-size-4 { font-size: 1.3em; }

/* The AppBar (page header) uses the brand primary-1 colour. */
.mud-appbar.bg-primary-1 { background-color: #005789 !important; color: #ffffff; }

/* Full-bleed background image behind a page's content.
   The page sits inside a centred MudContainer; these rules break the image out
   to the full content width and pull it up under the AppBar so there is no white
   border around it. #003660 (brand secondary-2) tints any area the image doesn't
   cover — this was the old site's body colour. */
.page {
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: -24px;
    margin-bottom: -24px;
    /* Fill from just under the AppBar to the bottom of the viewport so the image/
       tint reaches the bottom edge (no white band below short content). */
    min-height: calc(100vh - var(--mud-appbar-height, 64px));
    padding: 40px max(100px, calc(50vw - 780px));
    background-color: #003660;
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}

/* The full-bleed trick above uses 100vw; stop it introducing a horizontal
   scrollbar from the vertical scrollbar's width. */
.mud-main-content { overflow-x: hidden; }

button.bg-primary-2:hover {
    color: #ffffff !important;
    background-color: #005789;
}

button.bg-secondary-1:hover {
    background-color: #495965;
    color: #ffffff;
}

/* FAQ expansion panel headers use the brand primary colour. */
.mud-expand-panel-header { background-color: #005789; color: #ffffff; }
.mud-expand-panel-content { padding-top: 15px !important; }

/* --- Results page: UK-style number plate --- */
.vrm-plate {
    display: inline-flex;
    align-items: center;
    background-color: #ffd307;              /* UK rear-plate yellow */
    color: #111418;
    font-weight: 800;
    font-size: 1.8rem;
    line-height: 1;
    letter-spacing: 3px;
    padding: 10px 18px 10px 32px;           /* extra left padding clears the GB band */
    border-radius: 8px;
    /* Solid blue GB band down the left edge, yellow plate behind the rest. */
    background-image: linear-gradient(to right, #063298 0, #063298 20px, transparent 20px);
    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* --- Results page: quick-look status boxes --- */
.status-box {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    color: #ffffff;
}
.status-box.status-ok { background-color: #22a55b; }     /* green — clear */
.status-box.status-alert { background-color: #e5124e; }  /* red — attention */
.status-box.status-clickable { cursor: pointer; transition: filter 0.15s ease; }
.status-box.status-clickable:hover { filter: brightness(0.9); }