/*
 * Themed DataPortal components. Loaded after Bootstrap and site.css (standalone) or after Bootstrap and the host
 * site's head (wrapped tenancies), so rules mostly win on order and specificity. The few !important rules override
 * Bootstrap utilities that are themselves !important; a theme's overrides.css handles host rules that are.
 * Colours, type and radius come from the --dp-* variables in themes/{theme}/tokens.css, apart from white text on
 * the shared danger colour and a neutral card shadow.
 *
 * Page content is opt-in: a view wraps itself in <div class="dp-page"> once it has been moved onto these
 * components, so pages that haven't been reviewed yet keep their current look in every layout.
 *
 * Inside a page, a dp-content element holds content drawn from stored templates or CMS pages (e.g. the
 * document list's entries). The rules for generic Bootstrap elements (links, buttons, forms, tables, code)
 * carry :not(.dp-content *) so that content keeps the styling its templates were written for.
 */

/* Status colours are shared by every theme. :where() has zero specificity, so a theme's own :root values win. */
:where(:root) {
    --dp-status-draft-bg: #EEF1F4;
    --dp-status-draft-fg: #3D4752;
    --dp-status-published-bg: #E3F4EC;
    --dp-status-published-fg: #1E6B4A;
    --dp-status-withdrawn-bg: #FBEAEA;
    --dp-status-withdrawn-fg: #9B2C2C;
    --dp-status-warning-bg: #FFF4D6;
    --dp-status-warning-fg: #7A5300;
}

/* ---- Base ---- */

.dp-page {
    color: var(--dp-color-text);
    font-family: var(--dp-font-family);
    font-size: var(--dp-font-size-base);
    padding-bottom: 3rem;
}

    .dp-page a:not(.btn, .dropdown-item, .nav-link, .dp-content *) {
        color: var(--dp-color-link);
        text-underline-offset: 0.15em;
    }

        .dp-page a:not(.btn, .dropdown-item, .nav-link, .dp-content *):hover {
            color: var(--dp-color-link-hover);
        }

    .dp-page :is(a, button, select, input, textarea, .btn):focus-visible {
        outline: 2px solid var(--dp-color-focus);
        outline-offset: 2px;
        box-shadow: none;
    }

    .dp-page .text-muted:not(.dp-content *) {
        color: var(--dp-color-text-muted) !important; /* Bootstrap's .text-muted is itself !important */
    }

/* ---- Navigation (wrapped-tenancy header in LayoutHeader/Default.cshtml) ---- */

.assets-admin-menu .nav-link,
.assets-profile-menu a {
    color: var(--dp-color-text) !important; /* overrides the .text-dark utility on these links */
}

    .assets-admin-menu .nav-link:hover,
    .assets-profile-menu a:hover {
        color: var(--dp-color-link-hover) !important;
    }

.assets-admin-menu .navbar-brand {
    color: var(--dp-color-link);
}

.assets-admin-menu :is(a, button):focus-visible,
.assets-profile-menu a:focus-visible {
    outline: 2px solid var(--dp-color-focus);
    outline-offset: 2px;
    box-shadow: none;
}

/* ---- Page header ---- */

.dp-page .dp-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--dp-color-border);
}

    .dp-page .dp-page-header h1 {
        margin: 0;
        color: var(--dp-color-text);
    }

.dp-page .dp-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dp-page .dp-page-intro {
    max-width: 65ch;
    margin: 0.5rem 0 0;
    color: var(--dp-color-text-muted);
}

/* Secondary text inside a heading, e.g. "version 3" after a dataset name. */
.dp-page .dp-heading-note {
    font-weight: 400;
    color: var(--dp-color-text-muted);
}

.dp-page .dp-section-heading {
    margin: 0;
    font-size: 1.25rem;
    color: var(--dp-color-text);
}

/* Key facts about a record, as a row of label/value pairs that wraps on narrow screens. */
.dp-page .dp-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.5rem;
    margin: 0 0 2rem;
}

    .dp-page .dp-facts dt {
        margin-bottom: 0.25rem;
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--dp-color-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .dp-page .dp-facts dd {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.375rem;
        margin: 0;
    }

/* A boxed message inside page content, e.g. a warning in a confirmation dialog. */
.dp-page .dp-callout {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-left: 4px solid currentColor;
    border-radius: var(--dp-radius);
}

.dp-page .dp-callout--warning {
    background-color: var(--dp-status-warning-bg);
    color: var(--dp-status-warning-fg);
}

.dp-page .dp-callout--danger {
    background-color: var(--dp-status-withdrawn-bg);
    color: var(--dp-status-withdrawn-fg);
}

    /* asp-validation-summary's list, inside a callout. */
    .dp-page .dp-validation-list ul {
        margin: 0;
        padding-left: 1.25rem;
    }

.dp-page .dp-field-error {
    font-size: 0.875rem;
    color: var(--dp-status-withdrawn-fg);
}

/* A titled section of a long form, e.g. Provisioning Metadata's dataset and table. */
.dp-page .dp-metadata-section {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--dp-color-border);
}

    .dp-page .dp-metadata-section > .dp-section-heading {
        margin-bottom: 1rem;
    }

    /* The form's action row draws the last divider. */
    .dp-page .dp-metadata-section:has(+ .dp-form-actions) {
        border-bottom: 0;
        padding-bottom: 0;
    }

/* A monospaced name in a heading keeps the heading's size, not dp-mono's table size. */
.dp-page .dp-section-heading .dp-mono {
    font-size: 0.9em;
}

/* A row of choices that load a record (Provisioning Metadata's dataset and table). */
.dp-page .dp-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 2rem;
}

    .dp-page .dp-picker > div {
        flex: 1 1 16rem;
        max-width: 28rem;
    }

    /* A setting of the chosen record, level with the selects (Bootstrap's form-select height). */
    .dp-page .dp-picker > .dp-picker-switch {
        flex: 0 0 auto;
        height: calc(2.25rem + 2px);
        margin: 0;
    }

/* An editable list of named items, each with its own remove button. */
.dp-page .dp-item-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--dp-color-border);
    border-radius: var(--dp-radius);
}

    .dp-page .dp-item-list:empty {
        display: none;
    }

    .dp-page .dp-item-list > li {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.5rem 0.5rem 0.5rem 0.875rem;
    }

        .dp-page .dp-item-list > li + li {
            border-top: 1px solid var(--dp-color-border);
        }

.dp-page .dp-item-name {
    flex-grow: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ---- Buttons ---- */
/* Bootstrap 5.1 has no --bs-btn-* variables, so each state it colours is restated here. */

.dp-page .btn:not(.dp-content *) {
    border-radius: var(--dp-radius);
    font-weight: 500;
}

.dp-page .btn-primary:not(.dp-content *) {
    background-color: var(--dp-color-action);
    border-color: var(--dp-color-action);
    color: var(--dp-color-on-action);
}

    .dp-page .btn-primary:not(.dp-content *):is(:hover, :focus, :active, .active),
    .dp-page .show > .btn-primary.dropdown-toggle:not(.dp-content *) {
        background-color: var(--dp-color-action-hover);
        border-color: var(--dp-color-action-hover);
        color: var(--dp-color-on-action);
        box-shadow: none;
    }

/* Secondary stays neutral so it never reads as the primary action. */
.dp-page .btn-outline-secondary:not(.dp-content *) {
    border-color: var(--dp-color-border-strong);
    color: var(--dp-color-text);
}

    .dp-page .btn-outline-secondary:not(.dp-content *):is(:hover, :active, .active) {
        background-color: var(--dp-color-surface-subtle);
        border-color: var(--dp-color-border-strong);
        color: var(--dp-color-text);
    }

    .dp-page .btn-outline-secondary:not(.dp-content *):focus {
        box-shadow: none;
    }

/* Danger (withdraw, delete) uses the withdrawn status colour, so it reads the same as the status it leads to. */
.dp-page .btn-outline-danger:not(.dp-content *) {
    border-color: var(--dp-status-withdrawn-fg);
    color: var(--dp-status-withdrawn-fg);
}

    .dp-page .btn-outline-danger:not(.dp-content *):is(:hover, :active, .active) {
        background-color: var(--dp-status-withdrawn-bg);
        border-color: var(--dp-status-withdrawn-fg);
        color: var(--dp-status-withdrawn-fg);
    }

.dp-page .btn-danger:not(.dp-content *),
.dp-page .btn-danger:not(.dp-content *):is(:hover, :active, .active) {
    background-color: var(--dp-status-withdrawn-fg);
    border-color: var(--dp-status-withdrawn-fg);
    color: #fff;
}

    .dp-page .btn-danger:not(.dp-content *):hover {
        filter: brightness(0.9);
    }

    .dp-page :is(.btn-outline-danger, .btn-danger):not(.dp-content *):focus {
        box-shadow: none;
    }

/* ---- Forms ---- */

.dp-page .dp-form-section {
    max-width: 40rem;
}

.dp-page .form-label:not(.dp-content *),
.dp-page .dp-fieldset > legend {
    font-weight: 600;
    color: var(--dp-color-text);
}

.dp-page .form-control:not(.dp-content *),
.dp-page .form-select:not(.dp-content *) {
    border-color: var(--dp-color-border-strong);
    border-radius: var(--dp-radius);
    color: var(--dp-color-text);
}

    .dp-page .form-control:not(.dp-content *):focus,
    .dp-page .form-select:not(.dp-content *):focus {
        border-color: var(--dp-color-focus);
        box-shadow: 0 0 0 2px var(--dp-color-focus);
    }

.dp-page .dp-input-short {
    max-width: 10rem;
}

.dp-page .form-text:not(.dp-content *) {
    color: var(--dp-color-text-muted);
}

.dp-page .form-check-input:not(.dp-content *) {
    border-color: var(--dp-color-border-strong);
}

    .dp-page .form-check-input:not(.dp-content *):checked {
        background-color: var(--dp-color-action);
        border-color: var(--dp-color-action);
    }

    .dp-page .form-check-input:not(.dp-content *):focus {
        border-color: var(--dp-color-focus);
        box-shadow: 0 0 0 2px var(--dp-color-focus);
    }

/* On/off switches (Admin/Features): a larger target, with the label as part of it. A flex row rather than
   Bootstrap's float and margin offset, so the switch stays centred on the label whatever line height the
   host site gives it. */
.dp-page .dp-switch {
    display: flex;
    align-items: center;
    padding-left: 0;
    min-height: 0;
}

.dp-page .dp-switch .form-check-input {
    float: none;
    flex-shrink: 0;
    width: 2.5em;
    height: 1.25em;
    margin: 0;
    cursor: pointer;
}

    /* Bootstrap's pale outline for an off switch falls below the 3:1 contrast a control needs. */
    .dp-page .dp-switch .form-check-input:not(:checked) {
        border-color: var(--dp-color-text-muted);
    }

.dp-page .dp-switch .form-check-label {
    margin: 0;
    padding-left: 0.5rem;
    font-weight: 500;
    cursor: pointer;
}

/* A switch whose label is visually hidden (a table column heading names it), centred in its cell. */
.dp-page .dp-switch-only {
    justify-content: center;
    margin: 0;
}

/* Groups related fields under a legend, inside a light panel. */
.dp-page .dp-fieldset {
    margin-bottom: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--dp-color-border);
    border-radius: var(--dp-radius);
    background-color: var(--dp-color-surface-subtle);
}

    /* Bootstrap floats the legend so it sits inside the panel rather than on its border. */
    .dp-page .dp-fieldset > legend {
        margin-bottom: 0.5rem;
        padding: 0;
        font-size: 1rem;
    }

        .dp-page .dp-fieldset > legend + * {
            clear: left;
        }

.dp-page .dp-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--dp-color-border);
}

    /* The row stretches its buttons to the tallest one, and host themes can pad the primary button
       (SAIL's adds !important padding), so centre each label rather than leave it at the top. */
    .dp-page :is(.dp-form-actions, .dp-page-actions) > .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

/* ---- Rich text editor (Jodit, on Page/Edit) ---- */

.dp-page .jodit-container:not(.jodit_inline) {
    border-color: var(--dp-color-border-strong);
    border-radius: var(--dp-radius);
    background-color: var(--dp-color-surface);
}

    .dp-page .jodit-container:not(.jodit_inline):focus-within {
        border-color: var(--dp-color-focus);
        box-shadow: 0 0 0 2px var(--dp-color-focus);
    }

.dp-page .jodit-container .jodit-toolbar__box:not(:empty) {
    border-bottom-color: var(--dp-color-border);
    background-color: var(--dp-color-surface-subtle);
}

.dp-page .jodit-container .jodit-workplace,
.dp-page .jodit-container .jodit-wysiwyg {
    color: var(--dp-color-text);
    font-family: var(--dp-font-family);
}

/* ---- Form.io forms (rendered into a host element by formIo.js) ---- */

.dp-page .dp-form-host {
    max-width: 60rem;
    margin-bottom: 1.5rem;
}

.dp-page .dp-loading {
    padding: 2rem 0;
    color: var(--dp-color-text-muted);
}

/* Form.io's builder (Forms/FormEditor) is tall, so its save bar stays in view at the bottom of the window. */
.dp-page .dp-builder-host {
    margin-bottom: 1rem;
}

/*
 * Form.io 4's builder writes Bootstrap 4 markup (btn-block, col-xs-*, col-md-2), which Bootstrap 5 no longer
 * lays out: the field buttons sit inline and wrap into ragged blocks in a 160px column. This gives the palette
 * a fixed-width column of its own, kept in view while scrolling, with the fields as a single tidy list.
 */
@media (min-width: 768px) {
    .dp-page .dp-builder-host .formbuilder {
        display: grid;
        grid-template-columns: 15rem minmax(0, 1fr);
        gap: 1.5rem;
        margin: 0;
    }

        /* The builder pages load Bootstrap 3 (form-builder-bs3.css), whose .row clearfix adds ::before/::after; in a grid those
           become cells, pushing the palette into the form's column and the form onto a row of its own. */
        .dp-page .dp-builder-host .formbuilder::before,
        .dp-page .dp-builder-host .formbuilder::after {
            content: none;
            display: none;
        }

        .dp-page .dp-builder-host .formbuilder > .formcomponents,
        .dp-page .dp-builder-host .formbuilder > .formarea {
            width: auto;
            max-width: none;
            flex: none;
            padding: 0;
        }

        .dp-page .dp-builder-host .formbuilder > .formcomponents {
            position: sticky;
            top: 1rem;
            align-self: start;
            max-height: calc(100vh - 6rem);
            overflow-y: auto;
        }
}

.dp-page .dp-builder-host .builder-sidebar_search {
    margin-bottom: 0.75rem;
}

.dp-page .dp-builder-host .form-builder-panel {
    margin-bottom: 0.5rem;
    border: 1px solid var(--dp-color-border);
    border-radius: var(--dp-radius);
    overflow: hidden;
}

.dp-page .dp-builder-host .form-builder-group-header {
    padding: 0;
    border-bottom: 0;
    background-color: var(--dp-color-surface-subtle);
}

.dp-page .dp-builder-host .builder-group-button {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 0;
    background: none;
    color: var(--dp-color-text);
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: left;
    box-shadow: none;
}

    .dp-page .dp-builder-host .builder-group-button:hover {
        color: var(--dp-color-link-hover);
    }

.dp-page .dp-builder-host .formcomponent.btn {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
    margin: 0 0 0.25rem;
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--dp-color-border);
    border-radius: var(--dp-radius);
    background-color: var(--dp-color-surface);
    color: var(--dp-color-text);
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    cursor: grab;
}

    .dp-page .dp-builder-host .formcomponent.btn:hover {
        border-color: var(--dp-color-action);
        background-color: var(--dp-color-surface-subtle);
        color: var(--dp-color-text);
    }

    .dp-page .dp-builder-host .formcomponent.btn > i {
        width: 1.25rem;
        color: var(--dp-color-text-muted);
        text-align: center;
    }

.dp-page .dp-form-actions-sticky {
    position: sticky;
    bottom: 0;
    z-index: 2;
    align-items: center;
    padding-bottom: 1rem;
    background-color: var(--dp-color-surface);
}

.dp-page .dp-save-status {
    color: var(--dp-color-text-muted);
}

/* ---- Reference material: collapsible sections and code ---- */

.dp-page .dp-reference {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--dp-color-border);
}

    .dp-page .dp-reference > h2 {
        font-size: 1.25rem;
        margin-bottom: 0.25rem;
    }

    .dp-page .dp-reference > .dp-page-intro {
        margin-bottom: 1rem;
    }

.dp-page .dp-disclosure {
    border: 1px solid var(--dp-color-border);
    border-radius: var(--dp-radius);
    background-color: var(--dp-color-surface);
}

    .dp-page .dp-disclosure + .dp-disclosure {
        margin-top: 0.5rem;
    }

    .dp-page .dp-disclosure > summary {
        padding: 0.625rem 1rem;
        font-weight: 600;
        cursor: pointer;
    }

        .dp-page .dp-disclosure > summary:hover {
            color: var(--dp-color-link-hover);
        }

    .dp-page .dp-disclosure[open] > summary {
        border-bottom: 1px solid var(--dp-color-border);
    }

.dp-page .dp-disclosure-body {
    padding: 0.75rem 1rem 1rem;
}

/* A record per disclosure (e.g. OMD Details' tables): name, status, then a count pushed to the right. */
.dp-page .dp-table-disclosure > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    font-weight: 500;
}

    /* A flex summary loses its marker, so the open/closed chevron is drawn here. */
    .dp-page .dp-table-disclosure > summary::-webkit-details-marker {
        display: none;
    }

    .dp-page .dp-table-disclosure > summary::before {
        content: "";
        width: 0.5rem;
        height: 0.5rem;
        margin-right: 0.25rem;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(-45deg);
        transition: transform 150ms ease-out;
    }

    .dp-page .dp-table-disclosure[open] > summary::before {
        transform: rotate(45deg);
    }

.dp-page .dp-disclosure-meta {
    margin-left: auto;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--dp-color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .dp-page .dp-table-disclosure > summary::before {
        transition: none;
    }
}

.dp-page .dp-code,
.dp-page code:not(.dp-content *) {
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 0.8125rem;
    color: var(--dp-color-text);
}

.dp-page .dp-code {
    margin: 0;
    padding: 1rem;
    overflow-x: auto;
    /* Keep indentation exact: no wrapping, and host themes' pre rules don't reflow the lines. */
    white-space: pre;
    word-break: normal;
    overflow-wrap: normal;
    tab-size: 2;
    line-height: 1.5;
    text-align: left;
    text-indent: 0;
    background-color: var(--dp-color-surface-subtle);
    border: 0;
    border-radius: 0 0 var(--dp-radius) var(--dp-radius);
}

    /* Host themes style code as inline code (padding, background, border); inside a block that
       padding pushes only the first line in, so the lines stop lining up. */
    .dp-page .dp-code > code {
        display: block;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        font-size: inherit;
        line-height: inherit;
        color: inherit;
        white-space: inherit;
    }

/* ---- Template preview (Templates/Edit) ---- */

.dp-page .dp-preview-controls {
    display: grid;
    gap: 1rem;
    max-width: 60rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--dp-color-border);
    border-radius: var(--dp-radius);
    background-color: var(--dp-color-surface-subtle);
}

.dp-page .dp-preview-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem 1rem;
}

    .dp-page .dp-preview-row > div:not(.dp-preview-buttons, .dp-preview-wide) {
        flex: 0 1 14rem;
    }

    .dp-page .dp-preview-row > .dp-preview-wide {
        flex: 1 1 24rem;
    }

/* Buttons line up with the inputs, below their labels. */
.dp-page .dp-preview-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 2rem;
}

.dp-page .dp-preview-status {
    min-height: 1.5rem;
    margin: 0.75rem 0 0.5rem;
    color: var(--dp-color-text-muted);
}

.dp-page .dp-preview-output {
    min-height: 6rem;
    padding: 1rem;
    border: 1px dashed var(--dp-color-border-strong);
    border-radius: var(--dp-radius);
    background-color: var(--dp-color-surface);
}

/* ---- Tags and secondary text in table cells ---- */

.dp-page .dp-tag-list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.dp-page .dp-tag {
    display: inline-block;
    padding: 0 0.5rem;
    border: 1px solid var(--dp-color-border-strong);
    border-radius: var(--dp-radius);
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--dp-color-text);
    white-space: nowrap;
}

.dp-page .dp-cell-note {
    max-width: 50ch;
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    color: var(--dp-color-text-muted);
}

/* ---- Tables ---- */

.dp-page .table:not(.dp-content *) {
    color: var(--dp-color-text);
    font-variant-numeric: tabular-nums;
}

    .dp-page .table:not(.dp-content *) > :not(caption) > * > * {
        padding: 0.625rem 0.75rem;
        vertical-align: middle;
        border-bottom-color: var(--dp-color-border);
    }

    /* Replaces Bootstrap's 2px currentColor line between thead and tbody with the header's own border. */
    .dp-page .table:not(.dp-content *) > :not(:first-child) {
        border-top: 0;
    }

    .dp-page .table:not(.dp-content *) > thead > tr > th {
        font-weight: 600;
        border-bottom: 2px solid var(--dp-color-border-strong);
    }

/* Data tables: dense, unstriped rows divided by hairlines, grouped under a row per dataset. */

.dp-page .dp-table-wrap {
    margin-bottom: 1rem;
}

@media (max-width: 767.98px) {
    .dp-page .dp-table-wrap {
        overflow-x: auto;
    }
}

.dp-page .dp-data-table {
    font-size: 0.875rem;
}

    .dp-page .dp-data-table > :not(caption) > * > * {
        padding: 0.5rem 0.75rem;
        background-color: var(--dp-color-surface);
    }

    .dp-page .dp-data-table > thead > tr > th {
        position: sticky;
        top: 0;
        z-index: 1;
        /* A collapsed border stays behind when the cell sticks, so the divider is drawn as a shadow. */
        border-bottom: 0;
        box-shadow: inset 0 -2px 0 var(--dp-color-border-strong);
        font-size: 0.8125rem;
        color: var(--dp-color-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        white-space: nowrap;
    }

    /* omd-records.js adds dp-rows-clickable only once it handles row clicks. */
    .dp-page .dp-data-table.dp-rows-clickable > tbody > tr[data-dataset-id] {
        cursor: pointer;
    }

        .dp-page .dp-data-table.dp-rows-clickable > tbody > tr[data-dataset-id]:hover > * {
            background-color: var(--dp-color-surface-subtle);
        }

    .dp-page .dp-data-table > tbody > tr > th {
        font-weight: 400;
    }

    /* Versions sit indented under their dataset heading, level with its name after the chevron. */
    .dp-page .dp-grouped-table > tbody > tr:not(.dp-group-row) > th,
    .dp-page .dp-grouped-table > tbody > tr.dp-versions-message > td {
        padding-left: 2.25rem;
    }

    .dp-page .dp-grouped-table > tbody > tr.dp-versions-message > td {
        color: var(--dp-color-text-muted);
    }

    .dp-page .dp-data-table .dp-group-row > td {
        padding-top: 0.75rem;
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--dp-color-text);
        border-bottom: 1px solid var(--dp-color-border-strong);
    }

    /* The toggle omd-records.js puts in each group heading; it fills the row so the whole row is the target. */
    .dp-page .dp-group-toggle {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.25rem 0.75rem;
        width: 100%;
        min-height: 2rem;
        padding: 0;
        border: 0;
        background: none;
        color: inherit;
        font: inherit;
        text-align: left;
        cursor: pointer;
    }

        .dp-page .dp-group-toggle:hover .dp-group-name {
            color: var(--dp-color-link-hover);
            text-decoration: underline;
            text-underline-offset: 0.15em;
        }

    .dp-page .dp-group-chevron {
        width: 0.5rem;
        height: 0.5rem;
        margin: 0 0.25rem;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(-45deg);
        transition: transform 150ms ease-out;
    }

    .dp-page .dp-group-toggle[aria-expanded="true"] .dp-group-chevron {
        transform: rotate(45deg);
    }

    /* Once open with its versions loaded, each version's own badge shows what is awaiting publish. */
    .dp-page .dp-versions-loaded .dp-group-toggle[aria-expanded="true"] .dp-group-meta .dp-status--warning {
        display: none;
    }

    .dp-page .dp-group-meta {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.8125rem;
        font-weight: 400;
        color: var(--dp-color-text-muted);
    }

@media (prefers-reduced-motion: reduce) {
    .dp-page .dp-group-chevron {
        transition: none;
    }
}

.dp-page .dp-table-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

    .dp-page .dp-table-toolbar[hidden] {
        display: none;
    }

.dp-page .dp-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.dp-page .dp-mono {
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-size: 0.8125rem;
}

.dp-page a.dp-row-action {
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

    .dp-page a.dp-row-action:hover {
        text-decoration: underline;
    }

/* More than one action in a row's last cell. */
.dp-page .dp-row-actions {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.25rem 1.25rem;
}

/* ---- Filter chips (links: aria-current marks the selected one) ---- */

.dp-page .dp-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.dp-page a.dp-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.25rem;
    padding: 0.25rem 0.875rem;
    border: 1px solid var(--dp-color-border-strong);
    border-radius: 999px;
    background-color: var(--dp-color-surface);
    color: var(--dp-color-text);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}

    .dp-page a.dp-chip:hover {
        border-color: var(--dp-color-action);
        color: var(--dp-color-text);
    }

    .dp-page a.dp-chip[aria-current="page"] {
        background-color: var(--dp-color-action);
        border-color: var(--dp-color-action);
        color: var(--dp-color-on-action);
    }

.dp-page .dp-chip-count {
    min-width: 1.5rem;
    padding: 0 0.375rem;
    border-radius: 999px;
    background-color: var(--dp-color-surface-subtle);
    color: var(--dp-color-text);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.dp-page a.dp-chip[aria-current="page"] .dp-chip-count {
    background-color: var(--dp-color-on-action);
    color: var(--dp-color-action);
}

/* ---- Status badges: text always carries the meaning, colour only reinforces it ---- */

.dp-page .dp-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
    background-color: var(--dp-status-draft-bg);
    color: var(--dp-status-draft-fg);
}

    .dp-page .dp-status::before {
        content: "";
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 50%;
        background-color: currentColor;
    }

.dp-page .dp-status--published {
    background-color: var(--dp-status-published-bg);
    color: var(--dp-status-published-fg);
}

.dp-page .dp-status--withdrawn {
    background-color: var(--dp-status-withdrawn-bg);
    color: var(--dp-status-withdrawn-fg);
}

.dp-page .dp-status--warning {
    background-color: var(--dp-status-warning-bg);
    color: var(--dp-status-warning-fg);
}

    .dp-page .dp-status--warning::before {
        border-radius: 0;
        clip-path: polygon(50% 0, 100% 100%, 0 100%);
    }

/* ---- Document list frame (Doc/List) ---- */

.dp-page .dp-filter-panel {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border: 1px solid var(--dp-color-border);
    border-radius: var(--dp-radius);
    background-color: var(--dp-color-surface-subtle);
}

    /* Without filter definitions the panel would be an empty box. */
    .dp-page .dp-filter-panel:has(> #Filters:empty) {
        display: none;
    }

.dp-page .dp-results {
    padding-bottom: 1.5rem;
}

/* Bootstrap pagination, written by index.js. */
.dp-page .dp-pagination .pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
    margin: 1.5rem 0 0;
}

.dp-page .dp-pagination .page-link {
    min-width: 2.25rem;
    border-color: var(--dp-color-border-strong);
    border-radius: var(--dp-radius);
    background-color: var(--dp-color-surface);
    color: var(--dp-color-link);
    text-align: center;
    text-decoration: none;
}

    .dp-page .dp-pagination .page-link:hover {
        background-color: var(--dp-color-surface-subtle);
        color: var(--dp-color-link-hover);
    }

    .dp-page .dp-pagination .page-link:focus {
        box-shadow: none;
    }

.dp-page .dp-pagination .page-item.active .page-link {
    border-color: var(--dp-color-action);
    background-color: var(--dp-color-action);
    color: var(--dp-color-on-action);
}

.dp-page .dp-pagination .page-item.disabled .page-link {
    border-color: var(--dp-color-border);
    background-color: var(--dp-color-surface);
    color: var(--dp-color-text-muted);
}

/* ---- Navigation cards (Admin landing page) ---- */

.dp-page .dp-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The whole card is the link; its title is the link text, the description follows it. */
.dp-page a.dp-nav-card {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    height: 100%;
    padding: 1.25rem;
    border: 1px solid var(--dp-color-border);
    border-radius: var(--dp-radius);
    background-color: var(--dp-color-surface);
    color: var(--dp-color-text);
    text-decoration: none;
    transition: border-color 150ms ease-out, box-shadow 150ms ease-out, transform 150ms ease-out;
}

    .dp-page a.dp-nav-card:hover {
        border-color: var(--dp-color-action);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
        color: var(--dp-color-text);
        transform: translateY(-2px);
    }

        .dp-page a.dp-nav-card:hover .dp-nav-card-title {
            color: var(--dp-color-link-hover);
            text-decoration: underline;
            text-underline-offset: 0.15em;
        }

.dp-page .dp-nav-card-icon {
    align-self: flex-start;
    margin-bottom: 0.5rem;
    font-size: 1.75rem;
    color: var(--dp-color-action);
}

.dp-page .dp-nav-card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--dp-color-link);
}

.dp-page .dp-nav-card-text {
    font-size: 0.9375rem;
    color: var(--dp-color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .dp-page a.dp-nav-card {
        transition: none;
    }

        .dp-page a.dp-nav-card:hover {
            transform: none;
        }
}

/* ---- Empty state ---- */

.dp-page .dp-empty-state {
    padding: 2rem 1.5rem;
    margin-bottom: 2rem;
    border: 1px dashed var(--dp-color-border-strong);
    border-radius: var(--dp-radius);
    background-color: var(--dp-color-surface-subtle);
    text-align: center;
}

    .dp-page .dp-empty-state h2 {
        font-size: 1.125rem;
        margin-bottom: 0.25rem;
        color: var(--dp-color-text);
    }

    .dp-page .dp-empty-state p {
        margin: 0;
        color: var(--dp-color-text-muted);
    }