:root {
    --admin-accent: var(--pico-primary);
    --admin-accent-strong: var(--pico-primary-hover);
    --admin-accent-soft: color-mix(in srgb, var(--pico-primary) 12%, transparent);
    --admin-page-background: #f6f7fb;
    --admin-surface: #ffffff;
    --admin-surface-muted: #f0f2f7;
    --admin-header-background: var(--pico-primary-background);
    --admin-header-color: var(--pico-primary-inverse);
    --admin-shadow: 0 1px 2px rgb(25 28 45 / 5%), 0 10px 28px rgb(25 28 45 / 6%);
}

:root[data-theme="dark"] {
    --admin-page-background: #11131d;
    --admin-surface: #191c28;
    --admin-surface-muted: #222635;
    --admin-shadow: 0 1px 2px rgb(0 0 0 / 20%), 0 12px 30px rgb(0 0 0 / 18%);
}

@media only screen and (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --admin-page-background: #11131d;
        --admin-surface: #191c28;
        --admin-surface-muted: #222635;
        --admin-shadow: 0 1px 2px rgb(0 0 0 / 20%), 0 12px 30px rgb(0 0 0 / 18%);
    }
}

body {
    min-height: 100vh;
    background: var(--admin-page-background);
}

/* Pico sets placeholder opacity to 1, which reads as entered text rather than a hint. */
::placeholder {
    opacity: 0.6;
}

/* Global Link Styling for Admin Pages */
main a:not([role="button"]),
#content a:not([role="button"]) {
    text-decoration: none;
}

main a:not([role="button"]):hover,
#content a:not([role="button"]):hover {
    text-decoration: underline;
}

/* Dropdown items already highlight their row on hover. */
main details.dropdown > summary + ul a:hover {
    text-decoration: none;
}

/* Admin Header Styling */
.admin-header {
    background: var(--admin-header-background);
    border-bottom: 1px solid var(--pico-muted-border-color);
    color: var(--admin-header-color);
}

.admin-header nav {
    min-height: 4.25rem;
    margin-bottom: 0;
}

.admin-header-nav > ul:last-child {
    margin-left: auto;
}

.admin-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--admin-header-color);
    text-decoration: none;
}

.admin-brand:hover {
    text-decoration: none;
}

.admin-brand-mark {
    display: block;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    background: currentColor;
    -webkit-mask: url("/dodeca/images/dodeca-mark-ad8fa429d0320a8093faa81576dcedde.png") center / contain no-repeat;
    mask: url("/dodeca/images/dodeca-mark-ad8fa429d0320a8093faa81576dcedde.png") center / contain no-repeat;
}

.admin-brand > span:last-child {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

/* Pico makes <strong> bold (700), which is heavy for Poppins at this size. */
.admin-brand strong {
    font-weight: 500;
}

.admin-brand small {
    margin-top: 0.2rem;
    color: rgb(255 255 255 / 62%);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-header-nav .admin-account-trigger {
    display: inline-flex;
    align-items: center;
    width: auto;
    margin: 0;
    padding: 0.4rem 0.75rem;
    border-color: rgb(255 255 255 / 38%);
    color: var(--admin-header-color);
    white-space: nowrap;
}

.admin-header-nav .admin-account-trigger:hover {
    border-color: rgb(255 255 255 / 72%);
    background: rgb(255 255 255 / 9%);
}

.admin-account-trigger .admin-truncate {
    max-width: min(10rem, 30vw);
}

.admin-account-menu form {
    margin: calc(var(--pico-form-element-spacing-vertical) * -0.5)
        calc(var(--pico-form-element-spacing-horizontal) * -1);
}

.admin-account-menu form button {
    width: 100%;
    margin: 0;
    padding: calc(var(--pico-form-element-spacing-vertical) * 0.5)
        var(--pico-form-element-spacing-horizontal);
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--pico-dropdown-color);
    text-align: left;
}

.admin-account-menu form button:hover,
.admin-account-menu form button:focus-visible {
    background: var(--pico-dropdown-hover-background-color);
}

/* Two-level admin navigation */
.admin-navigation {
    position: relative;
    z-index: 2;
    background: var(--admin-surface);
    border-bottom: 1px solid var(--pico-muted-border-color);
    box-shadow: 0 1px 0 rgb(25 28 45 / 2%);
}

.admin-primary-nav {
    overflow-x: auto;
}

.admin-primary-nav {
    min-height: 3.5rem;
    margin-bottom: 0;
}

.admin-primary-nav ul {
    flex-wrap: nowrap;
    width: max-content;
}

.admin-primary-nav li,
.admin-secondary-nav li {
    padding: 0;
    list-style: none;
}

.admin-primary-nav a,
.admin-secondary-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--pico-muted-color);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.admin-primary-nav a {
    min-height: 3.5rem;
    padding: 0 0.9rem;
}

/* Pico's nav offsets assume its own 0.5rem link padding. Pull each row's first link left by its actual padding so its
   text lines up with the logo and the page content. */
.admin-primary-nav ul:first-of-type {
    margin-left: 0;
}

.admin-primary-nav li:first-child > a {
    margin-left: -0.9rem;
}

.admin-primary-nav a:hover,
.admin-secondary-nav a:hover {
    color: var(--pico-color);
}

.admin-primary-nav a[aria-current="page"] {
    color: var(--admin-accent);
}

/* Sits inside the nav rather than over the divider below it: the nav's overflow-x scrolling also clips vertically,
   which cut a 1px overhang down to 2px. */
.admin-primary-nav a[aria-current="page"]::after {
    position: absolute;
    right: 0.9rem;
    bottom: 0;
    left: 0.9rem;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--admin-accent);
    content: "";
}

.admin-secondary-nav-shell:empty {
    display: none;
}

.admin-secondary-nav {
    width: 100%;
    max-width: none;
    min-height: 2.75rem;
    margin-bottom: 0;
    overflow: visible;
    border-top: 1px solid var(--pico-muted-border-color);
    background: var(--admin-surface-muted);
}

.admin-secondary-nav > ul {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
    padding-right: var(--pico-spacing);
    padding-left: var(--pico-spacing);
    list-style: none;
}

.admin-secondary-nav > ul:first-of-type {
    margin-left: auto;
}

.admin-secondary-nav > ul:last-of-type {
    margin-right: auto;
}

.admin-secondary-nav li::before {
    content: none;
}

.admin-secondary-nav[hidden] {
    display: none;
}

.admin-secondary-nav a {
    min-height: 2.75rem;
    padding: 0 0.8rem;
    font-size: 0.875rem;
}

.admin-secondary-nav > ul > li:first-child > a {
    margin-left: -0.8rem;
}

.admin-secondary-context {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.75rem;
    max-width: min(22rem, 40vw);
    margin-right: 0.5rem;
    padding: 0 1rem 0 0.8rem;
    border-right: 1px solid var(--pico-muted-border-color);
}

.admin-secondary-context small {
    color: var(--pico-muted-color);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-secondary-context strong {
    overflow: hidden;
    color: var(--pico-color);
    font-size: 0.875rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-secondary-nav a[aria-current="page"] {
    color: var(--pico-color);
}

/* Tenant context and tabs */
.admin-tenant-nav > ul {
    align-items: center;
}

.admin-tenant-context {
    min-width: 0;
    margin-right: 0.75rem;
    padding-right: 1.25rem;
    border-right: 1px solid var(--pico-muted-border-color);
}

.admin-secondary-nav .admin-tenant-context > a {
    min-height: 2.75rem;
    max-width: min(16rem, 30vw);
    padding: 0 0.4rem;
    overflow: hidden;
    color: var(--pico-color);
    font-size: 0.875rem;
    text-overflow: ellipsis;
}

.admin-secondary-nav > ul > .admin-tenant-context:first-child > a {
    margin-left: -0.4rem;
}

.admin-secondary-nav .admin-tenant-context > a:hover {
    color: var(--admin-accent);
}

.admin-secondary-nav .admin-tenant-context > a:focus-visible {
    outline: var(--pico-outline-width) solid var(--pico-primary-focus);
    outline-offset: calc(var(--pico-outline-width) * -1);
}

.admin-secondary-nav > ul > li a[aria-current="page"]::after {
    position: absolute;
    right: 0.8rem;
    bottom: -1px;
    left: 0.8rem;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--admin-accent);
    content: "";
}

.admin-secondary-nav .admin-tenant-context > a[aria-current="page"]::after {
    right: 0.4rem;
    left: 0.4rem;
}

.admin-secondary-nav .admin-tenant-tabs a[aria-current="page"]::after {
    right: 0.75rem;
    left: 0.75rem;
}

.admin-tenant-context span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-tenant-tabs {
    min-width: 0;
}

.admin-tenant-tabs > ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin-tenant-tabs > ul a {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}

/* Tenant actions, in the overview page header */
.admin-tenant-actions-menu > summary + ul {
    min-width: 13rem;
    padding: 0.25rem 0;
    border-color: var(--pico-muted-border-color);
    box-shadow: var(--admin-shadow);
}

.admin-tenant-actions-menu > summary + ul > .admin-tenant-action-divider {
    height: 0;
    margin: 0.35rem 0;
    padding: 0;
    border-top: 1px solid var(--pico-muted-border-color);
}

.admin-tenant-actions-menu .admin-destructive-action {
    color: var(--pico-del-color);
}

.admin-tenant-actions-menu .admin-destructive-action:hover,
.admin-tenant-actions-menu .admin-destructive-action:focus,
.admin-tenant-actions-menu .admin-destructive-action:focus-visible {
    background: color-mix(in srgb, var(--pico-del-color) 12%, transparent);
    color: var(--pico-del-color);
}

/* Sign-in page: one narrow card, centred in the window, carrying the logo (after the Drillbridge sign-in page). The
   card can grow with a message and a list of providers, so it is centred with a minimum height rather than fixed. */
.admin-login {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding-block: 2rem;
}

/* Pico's default field and gap sizes make a two-field form fill most of the window, so the card tightens them. */
.admin-login-card {
    --pico-spacing: 0.85rem;
    --pico-form-element-spacing-vertical: 0.55rem;
    width: min(100%, 21rem);
    margin: 0;
    padding: 1.75rem 1.5rem 1.5rem;
    border: 1px solid var(--pico-muted-border-color);
    background: var(--admin-surface);
    box-shadow: var(--admin-shadow);
}

.admin-login-card > :last-child,
.admin-login-card form > :last-child {
    margin-bottom: 0;
}

/* Pico gives an article header the look of a title bar; here it is only the logo and a quiet label under it. */
.admin-login-card > .admin-login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    margin: 0 0 1.5rem;
    padding: 0;
    border: 0;
    background: none;
    text-align: center;
}

/* The approved artwork carries the wordmark, in navy for light surfaces and white for dark ones
   (Miscellaneous/Branding); only one of the two is ever displayed. */
.admin-login-brand img {
    width: 11rem;
    height: auto;
}

.admin-login-logo-dark {
    display: none;
}

:root[data-theme="dark"] .admin-login-logo-light {
    display: none;
}

:root[data-theme="dark"] .admin-login-logo-dark {
    display: block;
}

@media only screen and (prefers-color-scheme: dark) {
    :root:not([data-theme]) .admin-login-logo-light {
        display: none;
    }

    :root:not([data-theme]) .admin-login-logo-dark {
        display: block;
    }
}

.admin-login-brand small {
    color: var(--pico-muted-color);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Sits between the logo and the fields it refers to. */
.admin-login-message {
    margin-bottom: 1.25rem;
    padding: 0.65rem 0.85rem;
    border-radius: var(--pico-border-radius);
    background: var(--admin-accent-soft);
    font-size: 0.9rem;
}

.admin-login-error {
    background: color-mix(in srgb, var(--pico-del-color) 12%, transparent);
    color: var(--pico-del-color);
}

.admin-login-card button[type="submit"],
.admin-login-providers [role="button"] {
    width: 100%;
}

.admin-login-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0 0.85rem;
    color: var(--pico-muted-color);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-login-divider::before,
.admin-login-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--pico-muted-border-color);
}

.admin-login-providers {
    display: grid;
    gap: 0.5rem;
    padding: 0;
}

.admin-login-providers li {
    margin: 0;
    list-style: none;
}

/* Admin message area - avoid an empty Pico <main> creating a gap under the header */
#message-area,
.admin-message-area {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

#message-area article,
.admin-message-area article {
    margin-top: 1rem;
}

/* Main Content Area */
.admin-content {
    min-height: calc(100vh - 10rem);
    padding-top: 2rem;
    padding-bottom: 4rem;
    min-width: 0;
}

.admin-page > main {
    padding-top: 1.5rem;
    padding-bottom: 4rem;
}

.admin-loading {
    color: var(--pico-muted-color);
}

.admin-content > section > nav:first-child,
.admin-content > section > header:first-child {
    margin-bottom: 1.5rem;
}

.admin-content h2,
.admin-page main h2 {
    letter-spacing: -0.025em;
}

.admin-page-intro {
    width: 100%;
    max-width: none;
    margin: 0 0 1.5rem;
    color: var(--pico-muted-color);
    font-size: 0.95rem;
    line-height: 1.6;
}

.admin-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--pico-spacing) * 0.5) var(--pico-spacing);
    flex-wrap: wrap;
}

.admin-content > section > .admin-page-header {
    margin-bottom: calc(var(--pico-spacing) * 0.5);
}

.admin-page-header h1 {
    margin: 0;
    font-size: 1.375rem;
    line-height: 1.25;
}

.admin-page-header nav {
    max-width: 100%;
    margin-left: auto;
}

.admin-page-header nav ul {
    justify-content: flex-end;
    flex-wrap: wrap;
}

.admin-content article,
.admin-page main article {
    border: 1px solid var(--pico-muted-border-color);
    box-shadow: var(--admin-shadow);
}

.admin-content table,
.admin-page main table {
    border: 1px solid var(--pico-muted-border-color);
    background: var(--admin-surface);
}

.admin-content thead th,
.admin-page main thead th {
    background: var(--admin-surface-muted);
    color: var(--pico-muted-color);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.admin-content tbody tr:hover,
.admin-page main tbody tr:hover {
    background: var(--admin-accent-soft);
}

.admin-content small,
.admin-page main small,
.admin-muted {
    color: var(--pico-muted-color);
}

@media (max-width: 768px) {
    .admin-header nav {
        min-height: 3.75rem;
    }

    .admin-brand small {
        display: none;
    }

    .admin-primary-nav {
        padding-right: 0;
        padding-left: 0;
    }

    .admin-primary-nav ul {
        padding-right: var(--pico-spacing);
        padding-left: var(--pico-spacing);
    }

    .admin-content {
        padding-top: 1.25rem;
    }
}

@media (max-width: 576px) {
    /* The tenant name gets the first row to itself, so it needs no divider. Sized to its content, the li came out 0.4rem
       narrower than its link (the link's alignment margin), and the 100% cap clipped even short names. */
    .admin-tenant-context {
        flex-basis: 100%;
        margin-right: 0;
        border-right: 0;
    }

    .admin-secondary-nav .admin-tenant-context > a {
        max-width: 100%;
    }

    /* Pico pulls nav links 0.5rem into the rows above and below. With two rows that overlapped them, which put the
       tenant name's underline over the tabs. */
    .admin-tenant-nav a {
        margin-block: 0;
    }

    .admin-tenant-tabs {
        flex-basis: 100%;
        border-top: 1px solid var(--pico-muted-border-color);
    }

    /* The tabs scroll sideways, so they run to the screen edges, with the first one lined up with the page content. */
    .admin-secondary-nav .admin-tenant-tabs > ul {
        margin-inline: calc(var(--pico-spacing) * -1);
        padding-inline: var(--pico-spacing);
        overflow-x: auto;
    }

    .admin-tenant-tabs li:first-child > a {
        margin-left: -0.75rem;
    }

    /* The scrolling row clips anything below it, so the underline sits inside the link. */
    .admin-secondary-nav .admin-tenant-tabs a[aria-current="page"]::after {
        bottom: 0;
    }
}

@media (min-width: 576px) {
    .admin-secondary-nav > ul {
        max-width: 510px;
        padding-right: 0;
        padding-left: 0;
    }
}

@media (min-width: 768px) {
    .admin-secondary-nav > ul {
        max-width: 700px;
    }
}

@media (min-width: 1024px) {
    .admin-secondary-nav > ul {
        max-width: 950px;
    }
}

@media (min-width: 1280px) {
    .admin-secondary-nav > ul {
        max-width: 1200px;
    }
}

@media (min-width: 1536px) {
    .admin-secondary-nav > ul {
        max-width: 1450px;
    }
}

/* Table Styling */
table {
    width: 100%;
}

td, th {
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

td:first-child, th:first-child {
    max-width: 300px;
}

/* Small detail tables wrap every value instead of cutting it; the fixed layout breaks long checksums */
.admin-table-wrap > table {
    table-layout: fixed;
}

.admin-table-wrap td {
    max-width: none;
    white-space: normal;
    overflow-wrap: break-word;
}

/* A result loaded under a panel's action button gets the same breathing room as other admin content */
.admin-panel-result:not(:empty) {
    margin-top: var(--pico-spacing);
}

/* Opened cell details show their whole text, wrapped, instead of one clipped line */
.admin-cell-details {
    margin: 0;
}

.admin-cell-details[open] {
    white-space: normal;
    overflow-wrap: anywhere;
}

.admin-cell-details > summary {
    display: flex;
    align-items: center;
}

.admin-cell-details > summary::after {
    float: none;
    flex-shrink: 0;
}

/* Reusable admin content patterns */
.admin-empty-state {
    text-align: center;
}

/* A dashed outline reads as an empty slot rather than a card of content. */
.admin-content article.admin-empty-state,
.admin-page main article.admin-empty-state {
    padding-block: 2.25rem;
    border: 1px dashed color-mix(in srgb, var(--pico-muted-color) 40%, transparent);
    background: transparent;
    box-shadow: none;
}

/* Templates use h2 or h3 here depending on what surrounds them, so size by role rather than by level, well below the
   page's own headings. */
.admin-empty-state > :is(h2, h3) {
    margin-bottom: 0.35rem;
    font-size: 1.05rem;
    font-weight: 600;
}

.admin-empty-state > p {
    color: var(--pico-muted-color);
    font-size: 0.875rem;
}

.admin-empty-state > :last-child {
    margin-bottom: 0;
}

.admin-table-scroll {
    max-width: 100%;
    overflow-x: auto;
}

.admin-table-scroll > table {
    min-width: 36rem;
    margin-bottom: 0;
}

.admin-table-scroll > table td {
    vertical-align: middle;
}

.admin-table-wide > table {
    min-width: 56rem;
}

.admin-value-stack {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.2rem;
}

.admin-value-stack > *,
.admin-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-truncate {
    display: block;
    max-width: 10rem;
}

.admin-inline-form {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    white-space: nowrap;
}

.admin-inline-form label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    font-size: 0.875rem;
}

.admin-inline-form input,
.admin-inline-form button {
    width: auto;
    margin: 0;
}

.admin-form-medium {
    max-width: 56rem;
}

/* Compact upload forms */
.admin-upload-form {
    max-width: 40rem;
    margin-right: auto;
    margin-left: auto;
    padding: var(--pico-spacing);
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    background: var(--admin-surface);
}

.admin-upload-form > h3 {
    margin-top: 0;
    margin-bottom: 0.25rem;
}

.admin-upload-form > .admin-actions {
    justify-content: flex-end;
}

/* Reusable file upload field */
.admin-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.admin-file-upload {
    margin-bottom: 0.75rem;
}

.admin-file-upload-label {
    margin-bottom: 0.375rem;
}

.admin-file-upload-surface {
    display: grid;
    min-height: 7rem;
    margin-bottom: 0.375rem;
    padding: var(--pico-spacing);
    place-items: center;
    border: 1px dashed var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    background: var(--admin-surface-muted);
    cursor: pointer;
    text-align: center;
}

.admin-file-upload-surface > span {
    display: grid;
    max-width: 100%;
    gap: 0.125rem;
}

.admin-file-upload-surface strong {
    overflow-wrap: anywhere;
}

.admin-file-upload-surface:hover,
.admin-file-upload-surface.is-dragover {
    border-color: var(--pico-primary-border);
    background: var(--admin-accent-soft);
}

.admin-file-upload-input:focus-visible + .admin-file-upload-surface {
    outline: var(--pico-outline-width) solid var(--pico-primary-focus);
    outline-offset: var(--pico-outline-width);
}

.admin-file-upload-input:disabled + .admin-file-upload-surface {
    opacity: var(--pico-form-element-disabled-opacity);
    cursor: not-allowed;
}

.admin-file-upload-surface.is-invalid {
    border-color: var(--pico-del-color);
}

.admin-file-upload-feedback:not(:empty) {
    display: block;
    color: var(--pico-del-color);
}

/* Reusable disclosures */
.admin-disclosure {
    margin-bottom: var(--pico-spacing);
    padding: 0;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    background: var(--admin-surface);
}

.admin-disclosure > summary {
    padding: 0.75rem 1rem;
    color: var(--pico-color);
    font-weight: 600;
}

.admin-disclosure > summary small {
    margin-left: 0.5rem;
    font-weight: 400;
}

.admin-disclosure[open] > summary {
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--pico-muted-border-color);
}

.admin-disclosure > form {
    padding: 0 1rem 1rem;
}

.admin-disclosure > form + form {
    padding-top: 1rem;
    border-top: 1px solid var(--pico-muted-border-color);
}

/* Reusable action groups */
.admin-actions,
.admin-action-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.admin-actions {
    flex-wrap: wrap;
}

.admin-action-group {
    flex-wrap: nowrap;
    white-space: nowrap;
}

.admin-actions > button,
.admin-actions > a[role="button"],
.admin-action-group button,
.admin-action-group a[role="button"] {
    flex: 0 0 auto;
    width: auto;
    margin-bottom: 0;
    white-space: nowrap;
}

.admin-action-group button,
.admin-action-group a[role="button"] {
    padding: 0.375rem 0.625rem;
    font-size: 0.875rem;
}

.admin-action-group form,
.admin-action-group form button {
    margin: 0;
}

.admin-action-cell {
    width: 1%;
    max-width: none;
    overflow: visible;
}

/* Reusable values, badges, and statuses */
.admin-badge {
    display: inline-block;
    align-self: flex-start;
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 999px;
    font-size: 0.875rem;
    line-height: 1.25;
}

.admin-badge-success {
    border-color: var(--pico-ins-color);
    color: var(--pico-ins-color);
}

.admin-status-success {
    color: var(--pico-ins-color);
}

.admin-status-danger {
    color: var(--pico-del-color);
}

.admin-status-warning {
    color: var(--pico-muted-color);
    font-style: italic;
}

.admin-status-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.375rem;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

/* Reusable forms and choices */
.admin-choice-grid,
.admin-card-grid,
.admin-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pico-grid-column-gap);
}

.admin-choice-grid {
    gap: 0 var(--pico-grid-column-gap);
}

.admin-choice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem;
}

.admin-choice-grid > .admin-choice,
.admin-card-grid > .admin-choice {
    width: 100%;
}

.admin-choice input {
    margin-top: 0.2rem;
}

.admin-choice span {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.admin-card-grid {
    gap: 0.5rem;
}

.admin-card-grid > .admin-choice {
    margin: 0;
    padding: 0.75rem;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
}

.admin-validation-errors {
    padding: 1rem;
    border-color: var(--pico-del-color);
}

.admin-validation-errors ul {
    margin-bottom: 0;
}

/* Reusable progress and detail layouts */
.admin-progress {
    margin-bottom: var(--pico-spacing);
    padding: var(--pico-spacing);
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
}

.admin-progress progress {
    margin-bottom: 0.5rem;
}

.admin-progress > strong,
.admin-progress > small {
    display: block;
}

.admin-detail-grid {
    align-items: start;
}

.admin-grid-wide {
    grid-column: 1 / -1;
}

.admin-item-list {
    margin-bottom: 0;
}

.admin-item-list li {
    margin-bottom: 0.5rem;
}

.admin-item-list li > * {
    display: block;
}

.metadata-grid.admin-metadata-wide {
    grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr);
}

@media (max-width: 768px) {
    .admin-choice-grid,
    .admin-card-grid,
    .admin-detail-grid {
        grid-template-columns: 1fr;
    }

    .admin-grid-wide {
        grid-column: auto;
    }

    .metadata-grid.admin-metadata-wide {
        grid-template-columns: auto minmax(0, 1fr);
    }
}

@media (max-width: 576px) {
    .admin-disclosure > summary small {
        display: block;
        margin-top: 0.125rem;
        margin-left: 0;
    }
}

/* Metadata Grid (for detail pages) */
.metadata-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5rem 1.5rem;
    align-items: baseline;
}

.metadata-grid dt {
    font-weight: 600;
    color: var(--pico-muted-color);
    text-align: right;
}

.metadata-grid dd {
    margin: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    min-width: 0;
}

/* Artifact details */
.artifact-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--pico-spacing);
    margin-bottom: calc(var(--pico-spacing) * 1.5);
}

.artifact-hero > div:first-child {
    min-width: 0;
}

.artifact-hero h1 {
    margin-bottom: 0.35rem;
    overflow-wrap: anywhere;
}

.artifact-hero p {
    margin: 0;
    color: var(--pico-muted-color);
}

.artifact-eyebrow {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.artifact-details h2 {
    margin-bottom: var(--pico-spacing);
    font-size: 1rem;
    letter-spacing: 0.02em;
}

.artifact-history {
    padding-top: var(--pico-spacing);
    border-top: 1px solid var(--pico-muted-border-color);
}

.artifact-history .admin-value-stack > * {
    overflow: visible;
    overflow-wrap: anywhere;
    white-space: normal;
}

.artifact-checksum code {
    overflow-wrap: anywhere;
    white-space: normal;
}

@media (max-width: 768px) {
    .artifact-hero {
        flex-direction: column;
    }

    .artifact-hero .admin-actions,
    .artifact-hero .admin-actions > a[role="button"] {
        width: 100%;
    }
}

/* Form Help Text - muted styling for small elements in fieldsets */
fieldset > small {
    color: var(--pico-muted-color);
    display: block;
    margin-bottom: 0.5rem;
}

/* Danger Zone Styling */
.danger-zone {
    border: 1px solid #dc2626;
    border-radius: var(--pico-border-radius);
    padding: 1rem;
    margin-top: 2rem;
}

.danger-zone header {
    color: #dc2626;
    font-weight: 600;
    margin-bottom: 0.5rem;
    border: none;
}

.danger-zone p {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
}

.danger-zone button {
    --pico-color: #dc2626;
    --pico-border-color: #dc2626;
    margin: 0;
}

.danger-zone button:hover {
    --pico-background-color: #dc2626;
    --pico-color: white;
}

/* Code Content Display */
figure pre {
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    background-color: var(--pico-code-background-color);
    padding: 1rem;
    border-radius: var(--pico-border-radius);
    overflow-x: auto;
    max-height: 600px;
    overflow-y: auto;
}