/* Shell, palette and fonts follow BoweIQ.Aspect.UI.Shared/wwwroot/css/app.css so the DPP hub reads as
   part of the same product. Variable names are kept identical, so an Aspect theme could be dropped in. */

/************
*   Fonts   *
************/
@font-face {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/Fira_Sans/FiraSans-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/Fira_Sans/FiraSans-Medium.woff2') format('woff2');
}

@font-face {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/Fira_Sans/FiraSans-SemiBold.woff2') format('woff2');
}

@font-face {
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/Fira_Sans/FiraSans-Bold.woff2') format('woff2');
}

/************
*   Theme   *
************/
:root {
    --boweiq-color-primary: rgb(241, 180, 52);
    --boweiq-color-primary-border: #F29E35;
    --boweiq-color-primary-lighter: rgba(237, 175, 62, 0.45);
    --boweiq-color-secondary: #354550;
    --bs-primary: #354550;
    --boweiq-color-secondary-light: rgba(53, 69, 80, 0.2);
    --boweiq-color-secondary-grey: #a8adb1;
    --boweiq-color-darktext: #333;
    --boweiq-color-border-light: #dee2e6;
    --boweiq-color-background: #fff;
    --boweiq-color-grid-alt-row: rgb(242, 242, 242);
    --boweiq-nav-width: 80px;
    --boweiq-nav-height: 80px;
    --boweiq-header-height: 60px;
    --boweiq-generic-app-header-height: 100px;
    --boweiq-table-row-height: 50px;
    --boweiq-table-border-color: #ced4da;
    --boweiq-light-grey: #f3f3f3;
    --boweiq-primary-grey: #e0e0e0;
    --boweiq-main-selection: #354550;
    --boweiq-hover: rgba(54, 70, 81, 1);
    --boweiq-focus-color: rgba(13, 110, 253, 95%);
    --boweiq-button-success: #157347;
    --boweiq-color-error: #ad0000;
    --font-size-default: 1rem;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: "Fira Sans", sans-serif;
    color: var(--boweiq-color-darktext);
    background-color: var(--boweiq-color-background);
}

*, *::before, *::after {
    box-sizing: border-box;
}

h1, h2, h3, h4 {
    color: var(--boweiq-color-secondary);
    font-weight: 600;
    margin: 0;
}

h1:focus, h2:focus {
    outline: none;
}

a {
    color: var(--boweiq-color-secondary);
}

code, .mono {
    font-family: Consolas, "Fira Mono", monospace;
    font-size: 0.9em;
}

/************
*   Shell   *
************/
.screen {
    display: flex;
    flex-flow: row;
    align-items: stretch;
    height: 100vh;
}

.nav-big {
    flex: 0 0 var(--boweiq-nav-width);
    background-color: var(--boweiq-color-primary);
    padding-top: 10px;
}

.app-drawer {
    background-color: var(--boweiq-color-primary);
    display: flex;
    flex-direction: column;
    height: 100%;
    width: var(--boweiq-nav-width);
    overflow-y: auto;
    overflow-x: hidden;
}

    .app-drawer .app-icon {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: var(--boweiq-nav-width);
        min-height: var(--boweiq-nav-height);
        text-decoration: none;
    }

        .app-drawer .app-icon > .app-icon-image svg {
            display: block;
            width: 50px;
            height: 50px;
        }

        /* The library icons carry no fill (SVG default black); give them the rail's slate. */
        .app-drawer .app-icon > .app-icon-image svg :is(path, rect, polygon, polyline, circle) {
            fill: var(--boweiq-color-secondary);
        }

        .app-drawer .app-icon > span {
            font-size: 11px;
            color: var(--boweiq-color-secondary);
            line-height: 12px;
            text-transform: uppercase;
            font-weight: bold;
            text-align: center;
            width: calc(var(--boweiq-nav-width) - 10px);
            user-select: none;
        }

        .app-drawer .app-icon:hover {
            background-color: var(--boweiq-hover);
            cursor: pointer;
        }

            .app-drawer .app-icon:hover > span {
                color: var(--boweiq-color-primary);
            }

            .app-drawer .app-icon:hover > .app-icon-image svg :is(path, rect, polygon, polyline, circle) {
                fill: var(--boweiq-color-primary);
            }

        .app-drawer .app-icon.app-icon-active {
            background-color: var(--boweiq-main-selection);
        }

            .app-drawer .app-icon.app-icon-active > span {
                color: #fff;
            }

            .app-drawer .app-icon.app-icon-active > .app-icon-image svg :is(path, rect, polygon, polyline, circle) {
                fill: #fff;
            }

            /* The notch pointing into the content, as Aspect draws it. */
            .app-drawer .app-icon.app-icon-active::after {
                content: "";
                position: absolute;
                right: 0;
                top: 40%;
                border-top: 10px solid transparent;
                border-bottom: 10px solid transparent;
                border-right: 10px solid var(--boweiq-light-grey);
            }

.screen-rows {
    display: flex;
    flex-direction: column;
    flex: 1 1 calc(100vw - var(--boweiq-nav-width));
    min-width: 0;
}

.app-header {
    flex: 0 0 10px;
    position: relative;
    background-color: var(--boweiq-color-primary);
}

/* The tab that drops from the centre of the header strip. */
#header-submenu {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    height: var(--boweiq-header-height);
    padding: 0 20px 0 10px;
    color: var(--boweiq-color-secondary);
    z-index: 50;
    background-color: var(--boweiq-color-primary);
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.5);
    min-width: 600px;
    white-space: nowrap;
}

    #header-submenu .logo {
        margin-left: 5px;
        margin-right: 10px;
        background-image: url('img/logo_bluegray_boweiq.svg');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        height: 60%;
        width: 125px;
    }

    #header-submenu .divider {
        padding: 0 10px;
    }

    #header-submenu .app-title {
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    #header-submenu .flex-grow-1 {
        flex-grow: 1;
    }

.app-content {
    flex: 1 1 calc(100vh - var(--boweiq-header-height));
    overflow: auto;
    background-color: var(--boweiq-light-grey);
}

/******************
*   App surface   *
******************/
.generic-app-container {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.generic-app-container-header {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    padding: 30px 20px 10px 20px;
    min-height: var(--boweiq-generic-app-header-height);
}

    .generic-app-container-header h2 {
        text-transform: uppercase;
        font-size: 1.5rem;
    }

    .generic-app-container-header .subtitle {
        color: var(--boweiq-color-secondary-grey);
        font-size: 0.9rem;
        margin-top: 4px;
    }

    .generic-app-container-header .toolbar {
        margin-left: auto;
        display: flex;
        gap: 10px;
        align-items: center;
    }

.generic-app-container-content {
    padding: 0 20px 20px 20px;
}

.panel {
    background: #fff;
    border: 1px solid var(--boweiq-color-border-light);
    border-radius: 4px;
    margin-bottom: 20px;
}

    .panel > .panel-header {
        padding: 12px 16px;
        border-bottom: 1px solid var(--boweiq-color-border-light);
        font-weight: 600;
        color: var(--boweiq-color-secondary);
        text-transform: uppercase;
        font-size: 0.85rem;
        letter-spacing: 0.03em;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .panel > .panel-body {
        padding: 16px;
    }

        .panel > .panel-body.flush {
            padding: 0;
        }

/* Stat tiles on the home page */
.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.tile {
    background: #fff;
    border: 1px solid var(--boweiq-color-border-light);
    border-left: 6px solid var(--boweiq-color-primary);
    border-radius: 4px;
    padding: 16px;
}

    .tile .tile-value {
        font-size: 2rem;
        font-weight: 700;
        color: var(--boweiq-color-secondary);
    }

    .tile .tile-label {
        font-size: 0.8rem;
        text-transform: uppercase;
        color: var(--boweiq-color-secondary-grey);
        font-weight: 600;
    }

/* Grid — the DevExpress grid look without DevExpress */
.iq-grid {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

    .iq-grid th {
        text-align: left;
        font-weight: 600;
        color: #000;
        background-color: rgba(0, 0, 0, .02);
        border-bottom: 2px solid var(--boweiq-table-border-color);
        padding: 0.25rem 0.75rem;
        height: 44px;
        white-space: nowrap;
    }

    .iq-grid td {
        padding: 0.25rem 0.75rem;
        height: var(--boweiq-table-row-height);
        border-bottom: 1px solid var(--boweiq-color-border-light);
        vertical-align: middle;
    }

    .iq-grid tbody tr:nth-child(even) td {
        background-color: var(--boweiq-color-grid-alt-row);
    }

    .iq-grid tbody tr.clickable:hover td {
        background-color: var(--boweiq-color-primary-lighter);
        cursor: pointer;
    }

    .iq-grid td.wrap {
        word-break: break-all;
    }

/* Field list (label / value pairs) */
.field-grid {
    display: grid;
    grid-template-columns: 220px 1fr;
}

    .field-grid > div {
        padding: 8px 12px;
        border-bottom: 1px solid var(--boweiq-color-border-light);
        word-break: break-all;
    }

    .field-grid > .label {
        font-weight: 600;
        color: var(--boweiq-color-secondary);
        background-color: rgba(0, 0, 0, .02);
        word-break: normal;
    }

/* Buttons and inputs */
.btn {
    font-family: inherit;
    font-size: var(--font-size-default);
    border-radius: 4px;
    padding: 8px 18px;
    border: 1px solid transparent;
    cursor: pointer;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
}

.btn-primary {
    background-color: var(--boweiq-color-primary);
    border-color: var(--boweiq-color-primary-border);
    color: var(--boweiq-color-secondary);
}

    .btn-primary:hover {
        background-color: var(--boweiq-color-secondary);
        color: var(--boweiq-color-primary);
    }

.btn-secondary {
    background-color: #fff;
    border-color: var(--boweiq-color-border-light);
    color: var(--boweiq-color-secondary);
}

    .btn-secondary:hover {
        border-color: var(--boweiq-color-secondary);
    }

.btn-small {
    padding: 4px 10px;
    font-size: 0.8rem;
}

.text-input {
    font-family: inherit;
    font-size: var(--font-size-default);
    padding: 8px 10px;
    border: 1px solid var(--boweiq-table-border-color);
    border-radius: 4px;
    min-width: 0;
    background: #fff;
}

    .text-input:focus {
        outline: none;
        border-color: var(--boweiq-focus-color);
        box-shadow: 0 0 0 0.125rem rgba(13, 110, 253, 25%);
    }

textarea.text-input {
    font-family: Consolas, "Fira Mono", monospace;
    font-size: 0.85rem;
    width: 100%;
}

.form-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

    .form-row > label {
        width: 140px;
        font-weight: 600;
        color: var(--boweiq-color-secondary);
    }

    .form-row .grow {
        flex: 1 1 320px;
    }

/* Tabs */
.tabs {
    display: flex;
    gap: 2px;
    border-bottom: 2px solid var(--boweiq-color-secondary);
}

    .tabs button {
        font-family: inherit;
        font-size: 0.85rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        border: none;
        padding: 10px 18px;
        background: var(--boweiq-primary-grey);
        color: var(--boweiq-color-secondary);
        cursor: pointer;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

        .tabs button.active {
            background: var(--boweiq-color-secondary);
            color: var(--boweiq-color-primary);
        }

        .tabs button:disabled {
            opacity: 0.4;
            cursor: default;
        }

/* Badges */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    background-color: var(--boweiq-primary-grey);
    color: var(--boweiq-color-secondary);
}

    .badge.primary {
        background-color: var(--boweiq-color-primary);
    }

    .badge.slate {
        background-color: var(--boweiq-color-secondary);
        color: #fff;
    }

    .badge.restricted {
        background-color: hsl(0, 60%, 90%);
        color: var(--boweiq-color-error);
    }

    .badge.ok {
        background-color: hsl(100, 60%, 88%);
        color: var(--boweiq-button-success);
    }

    .badge.bad {
        background-color: hsl(0, 60%, 90%);
        color: var(--boweiq-color-error);
    }

    /* One hue per EN 18223 subclass, in the spirit of Aspect's --type-icon-hsl palette */
    .badge.t-DataElementCollection { background-color: hsl(212, 55%, 90%); color: hsl(212, 55%, 32%); }
    .badge.t-SingleValuedDataElement { background-color: hsl(145, 40%, 88%); color: hsl(145, 50%, 24%); }
    .badge.t-MultiValuedDataElement { background-color: hsl(32, 70%, 88%); color: hsl(32, 68%, 30%); }
    .badge.t-RelatedResource { background-color: hsl(285, 38%, 90%); color: hsl(285, 38%, 36%); }
    .badge.t-MultiLanguageDataElement { background-color: hsl(10, 45%, 90%); color: hsl(10, 45%, 32%); }

/* Element tree */
.element-tree {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .element-tree .element-tree {
        border-left: 2px solid var(--boweiq-color-primary-lighter);
        margin-left: 24px;
    }

    .element-tree .node {
        display: grid;
        grid-template-columns: minmax(200px, 300px) 190px 1fr;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        padding: 4px 12px;
        border-bottom: 1px solid var(--boweiq-color-border-light);
        background: #fff;
    }

        .element-tree .node:hover {
            background-color: var(--boweiq-color-primary-lighter);
        }

        .element-tree .node .element-id {
            font-weight: 600;
            color: var(--boweiq-color-secondary);
            display: flex;
            align-items: center;
            gap: 6px;
            word-break: break-word;
        }

        .element-tree .node .toggle {
            border: none;
            background: none;
            cursor: pointer;
            width: 18px;
            flex: 0 0 18px;
            padding: 0;
            color: var(--boweiq-color-secondary);
            font-size: 0.8rem;
        }

        .element-tree .node .element-value {
            word-break: break-word;
        }

        .element-tree .node .datatype {
            color: var(--boweiq-color-secondary-grey);
            font-size: 0.8rem;
            margin-left: 6px;
        }

        .element-tree .node .dictref {
            display: block;
            color: var(--boweiq-color-secondary-grey);
            font-size: 0.75rem;
            font-weight: 400;
            word-break: break-all;
        }

/* Inline images from RelatedResource elements */
.element-image {
    margin: 4px 0;
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
}

    .element-image img {
        display: block;
        max-width: 220px;
        max-height: 160px;
        object-fit: contain;
        background: #fff;
        border: 1px solid var(--boweiq-color-border-light);
        border-radius: 4px;
        padding: 4px;
    }

    .element-image figcaption {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
    }

        .element-image figcaption .datatype {
            margin-left: 0;
        }

/* Passport detail: header (2/3) beside the gallery (1/3) */
.detail-top {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    margin-bottom: 20px;
}

    .detail-top > .panel {
        margin-bottom: 0;
    }

.gallery {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.gallery-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: #fff;
}

    .gallery-stage img {
        max-width: 100%;
        max-height: 300px;
        object-fit: contain;
    }

.gallery-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--boweiq-color-secondary-grey);
}

.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 48px;
    border: none;
    border-radius: 4px;
    background: var(--boweiq-color-secondary-light);
    color: var(--boweiq-color-secondary);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

    .gallery-nav:hover {
        background: var(--boweiq-color-secondary);
        color: var(--boweiq-color-primary);
    }

    .gallery-nav.prev {
        left: 8px;
    }

    .gallery-nav.next {
        right: 8px;
    }

.gallery-caption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-top: 1px solid var(--boweiq-color-border-light);
}

    .gallery-caption .datatype {
        color: var(--boweiq-color-secondary-grey);
        font-size: 0.8rem;
    }

.gallery-thumbs {
    display: flex;
    gap: 8px;
    padding: 8px 16px 12px 16px;
    overflow-x: auto;
}

.gallery-thumb {
    flex: 0 0 64px;
    height: 64px;
    padding: 2px;
    border: 2px solid var(--boweiq-color-border-light);
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .gallery-thumb img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    .gallery-thumb.active {
        border-color: var(--boweiq-color-primary);
    }

    .gallery-thumb:hover {
        border-color: var(--boweiq-color-secondary);
    }

.gallery-thumb-missing {
    color: var(--boweiq-color-secondary-grey);
    font-weight: 700;
}

@media (max-width: 1100px) {
    .detail-top {
        grid-template-columns: 1fr;
    }
}

/* DevExpress grid — the overrides from Aspect's app.css "Table Styles", minus its app-specific ones */
.dxbl-grid {
    border: none !important;
}

.dxbl-grid-table {
    font-family: "Fira Sans", sans-serif !important;
}

    .dxbl-grid .dxbl-grid-table.dxbl-grid-table-no-scroll {
        height: auto !important;
    }

    .dxbl-grid-table > thead > tr.dxbl-grid-header-row > th {
        border-bottom: 2px solid var(--boweiq-table-border-color) !important;
    }

.dxbl-grid-header-content {
    color: #000;
    font-weight: 600;
    font-size: var(--font-size-default);
    padding: 10px 0 5px 10px;
}

.dxbl-grid-header-row > .dxbl-grid-header, .dxbl-grid-table .dxbl-grid-header, .dxbl-grid-table .dxbl-grid-empty-cell {
    background-color: #fff !important;
    border: unset !important;
}

.dxbl-grid:not(.noGridHeaderMarkup) > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > .dxbl-grid-table > thead {
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1);
}

.dxbl-grid .dxbl-grid-table > tbody > tr,
.dxbl-grid .dxbl-grid-table > thead > tr {
    height: var(--boweiq-table-row-height);
}

    .dxbl-grid-table > tbody > tr > td {
        height: var(--boweiq-table-row-height);
        border-left: unset !important;
        padding: 10px 0 5px 10px;
        vertical-align: middle;
    }

    .dxbl-grid .dxbl-grid-table > tbody > tr > td,
    .dxbl-grid .dxbl-grid-table > thead > tr > th {
        border-top-color: var(--boweiq-table-border-color) !important;
    }

    .dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-grid-empty-row > td {
        height: auto;
    }

    .iq-dxgrid .dxbl-grid-table > tbody > tr:nth-child(even) > td {
        background-color: var(--boweiq-color-grid-alt-row);
    }

    .iq-dxgrid.clickable-rows .dxbl-grid-table > tbody > tr:not(.dxbl-grid-empty-row):hover > td {
        background-color: var(--boweiq-color-primary-lighter);
        cursor: pointer;
    }

.dxbl-grid-search-box {
    border: none !important;
    box-shadow: none !important;
}

    .dxbl-grid-search-box .dxbl-text-edit {
        border: 1px solid #e2e2e2 !important;
        border-radius: 3px !important;
        margin: 5px !important;
        font-size: 0.95rem;
        background-color: #fff;
    }

/* Bootstrap 5 is on the page for the DevExpress theme; keep its button states on the BOWE palette */
.btn-primary {
    --bs-btn-active-bg: var(--boweiq-color-secondary);
    --bs-btn-active-color: var(--boweiq-color-primary);
    --bs-btn-active-border-color: var(--boweiq-color-secondary);
    --bs-btn-focus-shadow-rgb: 241, 180, 52;
}

.btn-secondary {
    --bs-btn-active-bg: #fff;
    --bs-btn-active-color: var(--boweiq-color-secondary);
    --bs-btn-active-border-color: var(--boweiq-color-secondary);
}

/* Overview tab — the reader-facing view of a passport */
.tab-panel {
    border-top-left-radius: 0;
}

.overview {
    background: var(--boweiq-light-grey);
}

.overview-facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

    .overview-facts .fact {
        background: #fff;
        border: 1px solid var(--boweiq-color-border-light);
        border-left: 5px solid var(--boweiq-color-primary);
        border-radius: 4px;
        padding: 10px 14px;
    }

    .overview-facts .fact-label {
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--boweiq-color-secondary-grey);
    }

    .overview-facts .fact-value {
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--boweiq-color-secondary);
        word-break: break-word;
    }

.overview-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
    align-items: start;
}

    .overview-cards > .panel {
        margin-bottom: 0;
    }

.overview-fields {
    display: grid;
    grid-template-columns: minmax(120px, 45%) 1fr;
    gap: 6px 12px;
    margin: 0;
}

    .overview-fields dt {
        font-weight: 400;
        color: var(--boweiq-color-secondary-grey);
    }

    .overview-fields dd {
        margin: 0;
        font-weight: 600;
        color: var(--boweiq-color-secondary);
        word-break: break-word;
    }

        .overview-fields dd.restricted-value {
            color: var(--boweiq-color-error);
            font-weight: 400;
        }

.overview-subsection {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--boweiq-color-border-light);
}

.overview-subtitle {
    font-weight: 600;
    color: var(--boweiq-color-secondary);
    margin-bottom: 6px;
}

.overview-bars {
    display: grid;
    grid-template-columns: minmax(90px, auto) 1fr auto;
    gap: 8px 10px;
    align-items: center;
}

    .overview-bars .bar-label {
        color: var(--boweiq-color-secondary);
    }

    .overview-bars .bar-track {
        height: 12px;
        background: var(--boweiq-primary-grey);
        border-radius: 6px;
        overflow: hidden;
    }

    .overview-bars .bar-fill {
        height: 100%;
        background: var(--boweiq-color-primary);
        border-radius: 6px;
    }

    .overview-bars .bar-value {
        font-weight: 600;
        color: var(--boweiq-color-secondary);
        text-align: right;
        min-width: 48px;
    }

.overview-note {
    margin-top: 8px;
    font-size: 0.85rem;
}

.overview-items {
    margin: 0;
    padding-left: 18px;
}

    .overview-items li {
        margin: 3px 0;
    }

.overview-documents {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.doc-button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--boweiq-color-border-light);
    border-radius: 4px;
    text-decoration: none;
    color: var(--boweiq-color-secondary);
    font-weight: 600;
}

    .doc-button:hover {
        border-color: var(--boweiq-color-primary);
        background: var(--boweiq-color-primary-lighter);
    }

.restricted-card {
    border-left: 5px solid var(--boweiq-color-error);
}

    .restricted-card p {
        margin-top: 0;
        color: var(--boweiq-color-darktext);
    }

    .restricted-card .lock {
        width: 16px;
        height: 16px;
        fill: var(--boweiq-color-error);
    }

/* Developer data sub-switch */
.segmented {
    display: inline-flex;
    border: 1px solid var(--boweiq-color-secondary);
    border-radius: 4px;
    overflow: hidden;
}

    .segmented button {
        font-family: inherit;
        font-size: 0.8rem;
        font-weight: 600;
        border: none;
        border-right: 1px solid var(--boweiq-color-secondary);
        padding: 6px 14px;
        background: #fff;
        color: var(--boweiq-color-secondary);
        cursor: pointer;
    }

        .segmented button:last-child {
            border-right: none;
        }

        .segmented button.active {
            background: var(--boweiq-color-secondary);
            color: var(--boweiq-color-primary);
        }

        .segmented button:disabled {
            opacity: 0.4;
            cursor: default;
        }

/* Category layouts — highlights above the generic overview */
.category-highlights {
    margin-bottom: 16px;
}

.light-source {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
}

.energy-scale {
    flex: 0 0 220px;
}

.energy-scale-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--boweiq-color-secondary-grey);
    margin-bottom: 6px;
}

.energy-row {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 24px;
    margin-bottom: 3px;
}

.energy-bar {
    height: 100%;
    color: #fff;
    font-weight: 700;
    padding-left: 8px;
    display: flex;
    align-items: center;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
}

.energy-marker {
    height: 30px;
    min-width: 44px;
    color: #fff;
    font-weight: 700;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 8px;
    margin-left: auto;
    clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
}

/* The EU label's A–G colours */
.e-A { background: #00a651; }
.e-B { background: #50b848; }
.e-C { background: #bfd730; color: #333; }
.e-D { background: #fff200; color: #333; }
.e-E { background: #fdb913; color: #333; }
.e-F { background: #f37021; }
.e-G { background: #ed1c24; }

.light-tiles {
    flex: 1 1 360px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.light-tile {
    border: 1px solid var(--boweiq-color-border-light);
    border-left: 5px solid var(--boweiq-color-primary);
    border-radius: 4px;
    padding: 10px 14px;
    background: #fff;
}

    .light-tile .fact-label {
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--boweiq-color-secondary-grey);
    }

    .light-tile .fact-value {
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--boweiq-color-secondary);
    }

        .light-tile .fact-value .unit {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--boweiq-color-secondary-grey);
        }

    .light-tile .tile-note {
        font-size: 0.75rem;
        color: var(--boweiq-color-secondary-grey);
    }

.eprel {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--boweiq-color-border-light);
}

.badge.category-pill {
    background: var(--boweiq-color-secondary-light);
    color: var(--boweiq-color-secondary);
    font-size: 0.8rem;
    padding: 3px 10px;
}

/* Battery layout */
.battery {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: stretch;
}

.battery-identity {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

    .battery-identity .battery-type {
        font-size: 0.95rem;
        padding: 5px 14px;
    }

.battery-chemistry {
    font-weight: 600;
    color: var(--boweiq-color-secondary);
}

.battery-carbon {
    flex: 0 1 340px;
    border: 1px solid var(--boweiq-color-border-light);
    border-left: 5px solid var(--boweiq-button-success);
    border-radius: 4px;
    padding: 12px 16px;
    background: #fff;
}

    .battery-carbon .fact-label {
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--boweiq-color-secondary-grey);
    }

    .battery-carbon .carbon-value {
        font-size: 1.8rem;
        font-weight: 700;
        color: var(--boweiq-color-secondary);
    }

        .battery-carbon .carbon-value .unit {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--boweiq-color-secondary-grey);
        }

    .battery-carbon .tile-note {
        font-size: 0.8rem;
        color: var(--boweiq-color-secondary-grey);
    }

.carbon-scopes {
    margin-top: 10px;
    grid-template-columns: minmax(150px, auto) 1fr auto;
    font-size: 0.85rem;
}

.bar-fill.carbon {
    background: var(--boweiq-button-success);
}

.battery-recycled {
    flex: 1 1 280px;
    border: 1px solid var(--boweiq-color-border-light);
    border-radius: 4px;
    padding: 12px 16px;
    background: #fff;
}

    .battery-recycled .fact-label {
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--boweiq-color-secondary-grey);
        margin-bottom: 8px;
    }

/* Authenticity card (provider seals) */
.authenticity-card {
    border-left: 5px solid var(--boweiq-color-secondary);
}

    .authenticity-card p {
        margin-top: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }

    .authenticity-card .seal {
        width: 16px;
        height: 16px;
        fill: var(--boweiq-color-secondary);
    }

/* Demo and lifecycle banners */
.demo-banner {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding: 10px 16px;
    margin-bottom: 16px;
    border-radius: 4px;
    color: var(--boweiq-color-secondary);
    border: 1px dashed var(--boweiq-color-secondary);
    background: repeating-linear-gradient(-45deg, rgba(53, 69, 80, 0.06) 0 12px, rgba(53, 69, 80, 0) 12px 24px), #fff;
}

.demo-tag {
    font-weight: 700;
    letter-spacing: 0.08em;
    background: var(--boweiq-color-secondary);
    color: var(--boweiq-color-primary);
    padding: 3px 10px;
    border-radius: 3px;
}

.badge.demo {
    background: var(--boweiq-color-secondary);
    color: var(--boweiq-color-primary);
    letter-spacing: 0.04em;
}

.lifecycle-banner {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: 4px;
    border-left: 6px solid var(--boweiq-color-secondary-grey);
    background: #fff;
}

    .lifecycle-banner.recalled {
        border-left-color: var(--boweiq-color-error);
        background: hsl(0, 60%, 96%);
    }

        .lifecycle-banner.recalled strong {
            color: var(--boweiq-color-error);
        }

    .lifecycle-banner .muted {
        margin-left: auto;
        font-size: 0.85rem;
    }

/* Home quick filter */
.quick-filter {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-bottom: 1px solid var(--boweiq-color-border-light);
}

    .quick-filter > .text-input {
        max-width: 420px;
    }

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chip {
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid var(--boweiq-color-border-light);
    background: #fff;
    color: var(--boweiq-color-secondary);
    border-radius: 14px;
    padding: 4px 12px;
    cursor: pointer;
}

    .chip span {
        margin-left: 4px;
        color: var(--boweiq-color-secondary-grey);
        font-weight: 400;
    }

    .chip:hover {
        border-color: var(--boweiq-color-secondary);
    }

    .chip.active {
        background: var(--boweiq-color-secondary);
        border-color: var(--boweiq-color-secondary);
        color: var(--boweiq-color-primary);
    }

        .chip.active span {
            color: #fff;
        }

    .chip.recalled:not(.active) {
        border-color: hsl(0, 60%, 80%);
        color: var(--boweiq-color-error);
    }

    .chip.recalled.active {
        background: var(--boweiq-color-error);
        border-color: var(--boweiq-color-error);
        color: #fff;
    }

    .chip.clear {
        border-style: dashed;
        color: var(--boweiq-color-secondary-grey);
    }

/* Resolver results on Lookup */
.resolver-outcome {
    border-top: 1px solid var(--boweiq-color-border-light);
    border-left: 5px solid var(--boweiq-button-success);
}

    .resolver-outcome.bad {
        border-left-color: var(--boweiq-color-error);
    }

    .resolver-outcome ul {
        margin-top: 8px;
        color: var(--boweiq-color-secondary);
        font-size: 0.9rem;
    }

/* Raw JSON */
pre.json {
    margin: 0;
    padding: 16px;
    background: #fbfbfb;
    max-height: 70vh;
    overflow: auto;
    font-family: Consolas, "Fira Mono", monospace;
    font-size: 0.85rem;
    line-height: 1.4;
    white-space: pre;
}

.status-line {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid var(--boweiq-color-border-light);
    font-weight: 600;
    flex-wrap: wrap;
}

.muted {
    color: var(--boweiq-color-secondary-grey);
}

.empty-state {
    padding: 40px;
    text-align: center;
    color: var(--boweiq-color-secondary-grey);
}

/*************************
*   Framework plumbing   *
*************************/
#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;
    }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

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

@media (max-width: 800px) {
    #header-submenu {
        min-width: 0;
    }

        #header-submenu .clock, #header-submenu .divider {
            display: none;
        }

    .field-grid {
        grid-template-columns: 1fr;
    }

    .element-tree .node {
        grid-template-columns: 1fr;
    }
}