/* Admin area under /admin/. Builds on account.css (form-page, form-hero,
   account-section, form-field). Each notice row previews its line in the
   navy of the notice bar. */

.admin-page {
    --admin-muted: #5b6684;
}

/* Breadcrumb links reach 44 px without moving the line */
.admin-page .form-crumbs a {
    display: inline-block;
    padding-block: 0.9rem;
    margin-block: -0.9rem;
}

/* Section tabs under the hero */

.admin-nav {
    border-bottom: 1px solid var(--rule);
    background: var(--white);
}

.admin-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.75rem;
    margin: 0 auto;
    list-style: none;
}

.admin-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    color: var(--ink-soft);
    font-weight: 700;
    font-stretch: var(--semi);
    text-decoration: none;
    transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}

.admin-nav a:hover {
    color: var(--blue);
}

.admin-nav a[aria-current="page"] {
    border-bottom-color: var(--cyan);
    color: var(--navy);
}

.admin-page .form-body .wrap > .form-note {
    max-width: 44rem;
    margin-bottom: 1.5rem;
}

.admin-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
}

.admin-after {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-top: 1.5rem;
}

.admin-after .form-hint {
    margin: 0;
}

.admin-empty,
.admin-count {
    color: var(--ink-soft);
}

.admin-count {
    margin-bottom: 1rem;
}

.admin-actions {
    margin-top: 1rem;
}

/* Text actions in rows: link and button look alike, 44 px tall */

.admin-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 0.25rem;
    border: 0;
    background: none;
    color: var(--blue);
    font: inherit;
    font-weight: 700;
    font-stretch: var(--semi);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    cursor: pointer;
}

.admin-link:hover {
    color: var(--navy);
    text-decoration-thickness: 2px;
}

.admin-danger {
    border-color: var(--form-error);
    color: var(--form-error);
}

.admin-danger::before {
    background: var(--form-error);
}

.admin-danger:hover {
    border-color: var(--form-error);
}

/* Tables: same pattern as the orders on the account page */

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: lining-nums tabular-nums;
}

.admin-table th {
    padding: 0 1rem 0.6rem 0;
    color: var(--ink-soft);
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.admin-table td {
    padding: 0.9rem 1rem 0.9rem 0;
    border-top: 1px solid var(--rule);
    vertical-align: top;
}

.admin-table .num {
    text-align: right;
    white-space: nowrap;
}

.admin-table ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin-email {
    overflow-wrap: anywhere;
}

/* Notice rows */

.admin-notices td {
    vertical-align: middle;
}

.admin-position {
    width: 5.5rem;
    min-height: 44px;
    padding: 0.4rem 0.6rem;
    border: 2px solid var(--rule);
    border-radius: var(--radius);
    background: var(--white);
    color: var(--ink);
    font: inherit;
    font-variant-numeric: tabular-nums;
}

.admin-position:hover {
    border-color: #aab5cc;
}

.admin-position:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 4px rgba(18, 195, 206, 0.22);
}

/* The line as the notice bar shows it */
.admin-notice-text {
    display: inline-block;
    max-width: 100%;
    margin: 0;
    padding: 0.55rem 0.9rem;
    border-radius: var(--radius);
    background: var(--navy);
    color: var(--white);
    font-size: var(--step--1);
    line-height: 1.4;
}

.admin-notice-url {
    margin: 0.35rem 0 0;
    color: var(--admin-muted);
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.admin-notices tr.is-hidden .admin-notice-text,
.admin-notices tr.is-expired .admin-notice-text {
    background: var(--paper);
    color: var(--ink-soft);
}

.admin-row-actions {
    white-space: nowrap;
}

.admin-row-actions form {
    display: inline;
}

/* Status: a dot and a word */

.admin-state {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-stretch: var(--semi);
    color: var(--ink-soft);
    white-space: nowrap;
}

.admin-state::before {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.admin-state--live,
.admin-state--confirmed,
.admin-state--paid {
    color: var(--form-ok);
}

.admin-state--live::before {
    background: var(--cyan);
    box-shadow: 0 0 0 0 rgba(18, 195, 206, 0.6);
}

@media (prefers-reduced-motion: no-preference) {
    .admin-state--live::before {
        animation: admin-live 2.2s var(--ease-out) infinite;
    }
}

@keyframes admin-live {
    to { box-shadow: 0 0 0 0.5rem rgba(18, 195, 206, 0); }
}

.admin-state--hidden,
.admin-state--expired,
.admin-state--unsubscribed {
    color: var(--admin-muted);
}

.admin-state--hidden::before,
.admin-state--expired::before,
.admin-state--unsubscribed::before {
    background: transparent;
    border: 2px solid currentColor;
}

.admin-state--failed {
    color: var(--form-error);
}

/* Checkbox field */

.admin-check {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 44px;
}

.admin-check input {
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    accent-color: var(--blue);
    cursor: pointer;
}

.admin-check label {
    margin: 0;
    cursor: pointer;
}

/* Contact messages */

.admin-messages {
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin-message {
    display: grid;
    gap: 1rem;
    padding-block: 1.75rem;
    border-top: 1px solid var(--rule);
}

.admin-messages li:first-child .admin-message {
    border-top: 0;
    padding-top: 0;
}

.admin-message h2 {
    color: var(--navy);
    font-size: var(--step-1);
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.admin-meta {
    margin-top: 0.4rem;
    color: var(--ink-soft);
    font-size: 1.05rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.admin-meta a {
    display: inline-block;
    padding-block: 0.9rem;
    margin-block: -0.9rem;
}

.admin-message-body {
    max-width: 44rem;
    overflow-wrap: anywhere;
}

@media (min-width: 60rem) {
    .admin-message {
        grid-template-columns: 20rem minmax(0, 1fr);
        column-gap: clamp(2rem, 6vw, 6rem);
    }
}

/* Phones: rows stack, labels come from data-label */

@media (max-width: 47.99rem) {
    .admin-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .admin-table tr {
        display: grid;
        gap: 0.35rem;
        padding-block: 1rem;
        border-top: 1px solid var(--rule);
    }

    .admin-table td {
        padding: 0;
        border: 0;
    }

    .admin-table td[data-label]::before {
        content: attr(data-label) ": ";
        color: var(--ink-soft);
    }

    .admin-table .num {
        text-align: left;
    }

    .admin-notices td[data-label="Notice"]::before {
        content: none;
    }

    .admin-row-actions {
        display: flex;
        gap: 1rem;
    }
}