/*
 * admin.css — authoring-workspace chrome (content-authoring-workspace WI-02).
 *
 * Layout/utility layer for the /admin shell (AdminLayout + AdminSidebar + WorkspaceHome).
 * Colors, radii, spacing, and shadows come EXCLUSIVELY from platform --ap-* tokens
 * (ui-fidelity.md: no hardcoded color/spacing/radius/shadow). Radzen components own their
 * own theming via the token package; this file styles only the plain-HTML shell scaffold.
 * Touch targets are >= 44px (spec §2.7 / RULE-02-RESP).
 */

/* ---- Top bar (spans both columns) ---- */
.admin-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ap-space-4);
    padding: var(--ap-space-3) var(--ap-space-6);
    background: var(--ap-bg-elevated);
    border-bottom: 1px solid var(--ap-bg-border);
}

.admin-site-name {
    font-weight: 650;
    font-size: 1rem;
    color: var(--ap-text-default);
}

.admin-topbar-right {
    display: flex;
    align-items: center;
    gap: var(--ap-space-3);
}

.admin-locale-switch {
    display: inline-flex;
    border: 1px solid var(--ap-bg-border);
    border-radius: var(--ap-radius-md);
    overflow: hidden;
}

.admin-locale-form {
    margin: 0;
    display: inline-flex;
}

.admin-locale-option {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--ap-space-3);
    background: transparent;
    border: 0;
    color: var(--ap-text-muted);
    cursor: pointer;
    font: inherit;
}

.admin-locale-option:hover {
    color: var(--ap-text-default);
}

.admin-locale-option:focus-visible {
    outline: 2px solid var(--ap-action-primary);
    outline-offset: 1px;
}

.admin-locale-option.active {
    background: var(--ap-action-primary-subtle);
    color: var(--ap-action-primary);
    font-weight: 650;
    cursor: default;
}

.admin-user-menu {
    display: inline-flex;
    align-items: center;
    gap: var(--ap-space-2);
}

.admin-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--ap-radius-full);
    background: var(--ap-action-primary-subtle);
    color: var(--ap-action-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 650;
    font-size: 0.75rem;
}

.admin-user-email {
    color: var(--ap-text-muted);
    font-size: 0.875rem;
}

.admin-signout {
    min-height: 44px;
    padding: 0 var(--ap-space-4);
    border: 1px solid var(--ap-bg-border);
    border-radius: var(--ap-radius-md);
    background: var(--ap-bg-elevated);
    color: var(--ap-text-default);
    cursor: pointer;
    font: inherit;
}

.admin-signout:hover {
    border-color: var(--ap-action-primary);
}

.admin-signout:focus-visible {
    outline: 2px solid var(--ap-action-primary);
    outline-offset: 1px;
}

/* ---- Two-column shell ---- */
.admin-layout {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    min-height: calc(100vh - 65px);
    background: var(--ap-bg-page);
    color: var(--ap-text-default);
}

.admin-sidebar {
    background: var(--ap-bg-elevated);
    border-right: 1px solid var(--ap-bg-border);
    padding: var(--ap-space-3) var(--ap-space-2);
}

.admin-nav {
    display: flex;
    flex-direction: column;
    gap: var(--ap-space-1);
}

.admin-nav-link {
    display: flex;
    align-items: center;
    gap: var(--ap-space-3);
    min-height: 44px;
    padding: 0 var(--ap-space-3);
    border-radius: var(--ap-radius-md);
    color: var(--ap-text-muted);
    text-decoration: none;
}

.admin-nav-link:hover {
    background: var(--ap-bg-page);
    color: var(--ap-text-default);
}

.admin-nav-link:focus-visible {
    outline: 2px solid var(--ap-action-primary);
    outline-offset: 1px;
}

.admin-nav-link.active {
    background: var(--ap-action-primary-subtle);
    color: var(--ap-action-primary);
    font-weight: 650;
}

.admin-nav-group-label {
    display: block;
    padding: var(--ap-space-3) var(--ap-space-3) var(--ap-space-1);
    color: var(--ap-text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-nav-children {
    display: flex;
    flex-direction: column;
    gap: var(--ap-space-1);
    margin-left: var(--ap-space-3);
    border-left: 1px solid var(--ap-bg-border);
    padding-left: var(--ap-space-2);
}

.admin-nav-count {
    margin-left: auto;
    min-width: 22px;
    height: 22px;
    padding: 0 var(--ap-space-2);
    border-radius: var(--ap-radius-full);
    background: var(--ap-action-primary);
    color: var(--ap-bg-page);
    font-size: 0.75rem;
    font-weight: 650;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.admin-sidebar-toggle {
    display: none;
    min-height: 44px;
    width: 100%;
    border: 1px solid var(--ap-bg-border);
    border-radius: var(--ap-radius-md);
    background: var(--ap-bg-elevated);
    color: var(--ap-text-default);
    cursor: pointer;
    font: inherit;
}

/* ---- Content area ---- */
.admin-content {
    padding: var(--ap-space-6);
}

.admin-page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--ap-space-4);
    margin-bottom: var(--ap-space-6);
    flex-wrap: wrap;
}

.admin-page-title {
    margin: 0;
    font-size: 1.625rem;
    font-weight: 650;
    color: var(--ap-text-default);
}

.admin-page-subtitle {
    color: var(--ap-text-muted);
    margin-top: var(--ap-space-1);
}

.admin-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ap-space-4);
    padding: var(--ap-space-4);
    border: 1px solid var(--ap-bg-border);
    border-left: 3px solid var(--ap-semantic-info);
    border-radius: var(--ap-radius-lg);
    background: var(--ap-bg-elevated);
    margin-bottom: var(--ap-space-6);
    color: var(--ap-text-default);
}

.admin-panel {
    border: 1px solid var(--ap-bg-border);
    border-radius: var(--ap-radius-lg);
    background: var(--ap-bg-elevated);
}

.admin-panel-head {
    padding: var(--ap-space-3) var(--ap-space-4);
    border-bottom: 1px solid var(--ap-bg-border);
    font-weight: 650;
    color: var(--ap-text-default);
}

.admin-panel-body,
.admin-settings-body {
    padding: var(--ap-space-4);
}

/* ---- Site Settings form (content-authoring-workspace WI-03) ---- */
.admin-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--ap-space-4);
}

.admin-field {
    display: flex;
    flex-direction: column;
    gap: var(--ap-space-2);
    font-size: 0.75rem;
    color: var(--ap-text-muted);
}

.admin-field label,
.admin-field > span {
    color: var(--ap-text-muted);
}

.admin-field-full {
    grid-column: 1 / -1;
}

.admin-field-hint {
    color: var(--ap-text-muted);
    font-size: 0.75rem;
}

.admin-token-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ap-space-4);
}

.admin-token-control {
    display: flex;
    flex-direction: column;
    gap: var(--ap-space-2);
}

.admin-repeater-row {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr) 44px;
    gap: var(--ap-space-3);
    align-items: end;
    margin-bottom: var(--ap-space-3);
}

.admin-save-bar {
    display: flex;
    justify-content: flex-end;
    gap: var(--ap-space-3);
    margin-top: var(--ap-space-4);
}

.admin-deployment-note {
    margin-top: var(--ap-space-3);
}

.admin-empty-state {
    text-align: center;
    padding: var(--ap-space-8) var(--ap-space-6);
}

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

/* ---- Navigation builder (WI-08, NavigationBuilderSection) ---- */
.nav-builder {
    display: flex;
    flex-direction: column;
    gap: var(--ap-space-3);
}

.nav-builder-row {
    display: grid;
    grid-template-columns: 44px 150px minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) 44px;
    gap: var(--ap-space-3);
    align-items: end;
    padding: var(--ap-space-3);
    background: var(--ap-bg-elevated);
    border: 1px solid var(--ap-bg-border);
    border-radius: var(--ap-radius-md);
}

.nav-builder-reorder {
    display: flex;
    flex-direction: column;
    gap: var(--ap-space-1);
    align-self: stretch;
    justify-content: center;
}

.nav-builder-no-target {
    display: flex;
    flex-direction: column;
    gap: var(--ap-space-2);
}

.admin-native-select,
.admin-native-input {
    width: 100%;
    min-height: 44px;
    padding: var(--ap-space-2) var(--ap-space-3);
    color: var(--ap-text-default);
    background: var(--ap-bg-page);
    border: 1px solid var(--ap-bg-border);
    border-radius: var(--ap-radius-sm);
    font: inherit;
}

.admin-native-select:focus-visible,
.admin-native-input:focus-visible {
    outline: 2px solid var(--ap-action-primary);
    outline-offset: 1px;
}

.admin-native-input:disabled,
.admin-native-select:disabled {
    color: var(--ap-text-disabled);
    cursor: not-allowed;
}

.admin-icon-button {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ap-text-muted);
    background: transparent;
    border: 1px solid var(--ap-bg-border);
    border-radius: var(--ap-radius-sm);
    cursor: pointer;
}

.admin-icon-button:hover:not(:disabled) {
    color: var(--ap-text-default);
    background: var(--ap-action-primary-subtle);
}

.admin-icon-button:focus-visible {
    outline: 2px solid var(--ap-action-primary);
    outline-offset: 1px;
}

.admin-icon-button:disabled {
    color: var(--ap-text-disabled);
    cursor: not-allowed;
}

.admin-icon-danger:hover:not(:disabled) {
    color: var(--ap-semantic-error);
}

.admin-add-button {
    align-self: flex-start;
    min-height: 44px;
    padding: var(--ap-space-2) var(--ap-space-4);
    color: var(--ap-action-primary);
    background: transparent;
    border: 1px dashed var(--ap-action-primary);
    border-radius: var(--ap-radius-sm);
    cursor: pointer;
}

.admin-add-button:hover:not(:disabled) {
    background: var(--ap-action-primary-subtle);
}

.admin-add-button:focus-visible {
    outline: 2px solid var(--ap-action-primary);
    outline-offset: 1px;
}

.admin-add-button:disabled {
    color: var(--ap-text-disabled);
    border-color: var(--ap-bg-border);
    cursor: not-allowed;
}

.admin-field-error {
    color: var(--ap-semantic-error);
    font-size: 0.8125rem;
    margin: calc(var(--ap-space-1) * -1) 0 var(--ap-space-2) 0;
}

@media (max-width: 1024px) {
    .nav-builder-row {
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        row-gap: var(--ap-space-2);
    }

    .nav-builder-row > label.admin-field,
    .nav-builder-row > .nav-builder-no-target {
        grid-column: 2 / 3;
    }
}

/* ---- Signed-out / not-authorized prompt ---- */
.admin-signin-prompt {
    max-width: 480px;
    margin: var(--ap-space-12) auto;
    padding: var(--ap-space-8);
    text-align: center;
    border: 1px solid var(--ap-bg-border);
    border-radius: var(--ap-radius-lg);
    background: var(--ap-bg-elevated);
    color: var(--ap-text-default);
}

.admin-signin-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 var(--ap-space-6);
    margin-top: var(--ap-space-4);
    border-radius: var(--ap-radius-md);
    background: var(--ap-action-primary);
    color: var(--ap-bg-page);
    font-weight: 650;
    text-decoration: none;
}

.admin-signin-link:hover {
    background: var(--ap-action-primary-hover);
}

/* ---- Session-expired recovery banner (AC-30) ---- */
.admin-session-expired {
    max-width: 480px;
    margin: var(--ap-space-12) auto;
    padding: var(--ap-space-8);
    text-align: center;
    border: 1px solid var(--ap-bg-border);
    border-left: 3px solid var(--ap-semantic-warning);
    border-radius: var(--ap-radius-lg);
    background: var(--ap-bg-elevated);
    color: var(--ap-text-default);
}

.admin-session-expired-message {
    margin: 0;
}

/* ---- Media Library (content-authoring-workspace WI-04) ---- */
/* Filter/search row in the page head; reuses .admin-field for label+control stacking. */
.admin-media-filters {
    display: flex;
    gap: var(--ap-space-3);
    align-items: flex-end;
    flex-wrap: wrap;
}

.admin-media-filters .admin-field {
    min-width: 160px;
}

/* Responsive thumbnail grid — 4 cols desktop, 3 then 2 on narrower viewports
   (RULE-02-RESP: no horizontal overflow; min-width 0 cells). */
.admin-media-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ap-space-4);
}

.admin-media-card {
    border: 1px solid var(--ap-bg-border);
    border-radius: var(--ap-radius-lg);
    background: var(--ap-bg-elevated);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.admin-media-thumb {
    aspect-ratio: 4 / 3;
    background: var(--ap-bg-page);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ap-text-muted);
    font-size: 0.75rem;
}

.admin-media-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-media-meta {
    padding: var(--ap-space-2) var(--ap-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--ap-space-1);
}

.admin-media-name {
    font-weight: 600;
    color: var(--ap-text-default);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-media-sub {
    color: var(--ap-text-muted);
    font-size: 0.75rem;
    display: flex;
    justify-content: space-between;
    gap: var(--ap-space-2);
    align-items: center;
}

.admin-media-actions {
    padding: 0 var(--ap-space-3) var(--ap-space-3);
    display: flex;
    gap: var(--ap-space-2);
}

.admin-media-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    border-radius: var(--ap-radius-full);
    padding: 0 var(--ap-space-2);
    font-size: 0.75rem;
    font-weight: 650;
}

.admin-media-badge.used {
    background: var(--ap-action-primary-subtle);
    color: var(--ap-semantic-success);
}

.admin-media-badge.unused {
    background: var(--ap-bg-page);
    color: var(--ap-text-muted);
}

/* Modal overlay for the upload dialog + media picker (plain-HTML shell; Radzen owns the
   inner controls). Centered panel over a dimmed backdrop. */
.admin-overlay {
    position: fixed;
    inset: 0;
    background: var(--ap-overlay-bg);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--ap-space-6);
    z-index: 1000;
    overflow: auto;
}

.admin-overlay-panel {
    width: 100%;
    max-width: 520px;
    margin: var(--ap-space-12) auto;
}

.admin-overlay-panel-wide {
    max-width: 820px;
}

/* Upload dialog dropzone (visual affordance above the InputFile). */
.admin-media-dropzone {
    border: 1px dashed var(--ap-bg-border);
    border-radius: var(--ap-radius-lg);
    padding: var(--ap-space-6);
    text-align: center;
    color: var(--ap-text-muted);
    margin-bottom: var(--ap-space-4);
}

.admin-media-dialog-field {
    display: flex;
    flex-direction: column;
    gap: var(--ap-space-2);
    margin-bottom: var(--ap-space-4);
}

.admin-media-dialog-field > label {
    color: var(--ap-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
}

@media (max-width: 980px) {
    .admin-media-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---- Responsive: collapse the sidebar on narrow viewports ---- */
@media (max-width: 639px) {
    .admin-layout {
        grid-template-columns: 1fr;
    }

    .admin-media-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-media-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-sidebar {
        border-right: 0;
        border-bottom: 1px solid var(--ap-bg-border);
    }

    .admin-nav {
        display: none;
    }

    .admin-nav.open {
        display: flex;
    }

    .admin-sidebar-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .admin-page-head {
        flex-direction: column;
    }

    .admin-form-grid,
    .admin-token-grid,
    .admin-repeater-row {
        grid-template-columns: 1fr;
    }

    /* RULE-02-RESP: editor preview + SEO rail stack UNDER the editor; no horizontal overflow. */
    .admin-editor-grid {
        grid-template-columns: 1fr;
    }

    .admin-action-bar {
        flex-direction: column;
        align-items: stretch;
    }
}

/* =========================================================================
 * Pages CRUD + editor (content-authoring-workspace WI-05).
 * Plain-HTML scaffold around Radzen controls; colors/spacing/radii from --ap-* only.
 * ========================================================================= */

.admin-page-head-actions {
    display: flex;
    align-items: flex-end;
    gap: var(--ap-space-3);
    flex-wrap: wrap;
}

/* ---- List table ---- */
/* RULE-02-RESP / AC-27: wrap every list table so a wide table scrolls WITHIN its panel
   instead of forcing horizontal scroll on the whole page at the 1024px desktop floor. */
.admin-table-scroll {
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th,
.admin-table td {
    padding: var(--ap-space-3);
    border-bottom: 1px solid var(--ap-bg-border);
    text-align: left;
    vertical-align: middle;
}

.admin-table th {
    color: var(--ap-text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.admin-table tr:last-child td {
    border-bottom: 0;
}

.admin-table-title {
    display: block;
    font-weight: 600;
    color: var(--ap-text-default);
}

.admin-table-sub {
    display: block;
    color: var(--ap-text-muted);
    font-size: 0.75rem;
}

.admin-table-muted {
    color: var(--ap-text-muted);
}

.admin-table-actions {
    display: flex;
    gap: var(--ap-space-2);
    flex-wrap: wrap;
}

/* ---- Workflow status badge ---- */
.admin-status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border-radius: var(--ap-radius-full);
    padding: 0 var(--ap-space-3);
    font-size: 0.75rem;
    font-weight: 650;
    background: var(--ap-bg-page);
    color: var(--ap-text-muted);
}

.admin-status-badge.draft {
    background: var(--ap-bg-page);
    color: var(--ap-text-muted);
}

.admin-status-badge.scheduled {
    background: var(--ap-action-primary-subtle);
    color: var(--ap-semantic-info);
}

.admin-status-badge.published {
    background: var(--ap-action-primary-subtle);
    color: var(--ap-semantic-success);
}

.admin-status-badge.failed {
    background: var(--ap-action-primary-subtle);
    color: var(--ap-semantic-error);
}

/* ---- Editor ---- */
.admin-editor-crumb {
    color: var(--ap-text-muted);
    font-size: 0.75rem;
    margin-bottom: var(--ap-space-2);
}

.admin-editor-crumb a {
    color: var(--ap-text-muted);
}

.admin-editor-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--ap-space-4);
    align-items: start;
}

.admin-editor-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ap-space-3);
}

.admin-editor-preview-wrap {
    margin-top: var(--ap-space-3);
}

/* ---- LocaleToggle (segmented control) ---- */
.admin-locale-toggle {
    display: inline-flex;
    border: 1px solid var(--ap-bg-border);
    border-radius: var(--ap-radius-md);
    overflow: hidden;
}

.admin-locale-toggle [role="radio"] {
    min-height: 40px;
    background: transparent;
    border: 0;
    color: var(--ap-text-muted);
    padding: 0 var(--ap-space-4);
    cursor: pointer;
    font: inherit;
}

.admin-locale-toggle [role="radio"].active {
    background: var(--ap-action-primary-subtle);
    color: var(--ap-action-primary);
    font-weight: 650;
}

.admin-locale-toggle [role="radio"]:focus-visible {
    outline: 2px solid var(--ap-action-primary);
    outline-offset: -2px;
}

/* ---- MarkdownEditor ---- */
.admin-editor-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ap-space-3);
    margin-bottom: var(--ap-space-2);
    flex-wrap: wrap;
}

.admin-editor-count {
    color: var(--ap-text-muted);
    font-size: 0.75rem;
}

.admin-markdown-area {
    width: 100%;
    min-height: 280px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---- MarkdownPreview ---- */
.admin-markdown-preview {
    border: 1px dashed var(--ap-bg-border);
    border-radius: var(--ap-radius-md);
    padding: var(--ap-space-4);
    background: var(--ap-bg-page);
    color: var(--ap-text-default);
}

.admin-markdown-preview img {
    max-width: 100%;
    border-radius: var(--ap-radius-md);
    border: 1px solid var(--ap-bg-border);
}

/* ---- SeoPanel ---- */
.admin-seo-panel {
    align-self: start;
}

.admin-seo-og-thumb {
    max-width: 100%;
    max-height: 96px;
    border-radius: var(--ap-radius-md);
    border: 1px solid var(--ap-bg-border);
    display: block;
    margin: var(--ap-space-2) 0;
}

.admin-field-hint.warn,
.admin-field-warn {
    color: var(--ap-semantic-warning);
}

.admin-field-error {
    color: var(--ap-semantic-error);
    font-size: 0.75rem;
}

.admin-field.invalid :is(input, textarea) {
    border-color: var(--ap-semantic-error);
}

/* ---- Inline banners ---- */
.admin-inline-banner {
    padding: var(--ap-space-3) var(--ap-space-4);
    border-radius: var(--ap-radius-md);
    margin-top: var(--ap-space-4);
}

.admin-inline-banner.warn {
    border: 1px solid var(--ap-semantic-warning);
    color: var(--ap-semantic-warning);
    background: var(--ap-bg-page);
}

/* ---- Sticky action bar ---- */
.admin-action-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ap-space-3);
    margin-top: var(--ap-space-4);
    padding: var(--ap-space-3) var(--ap-space-4);
    border: 1px solid var(--ap-bg-border);
    border-radius: var(--ap-radius-lg);
    background: var(--ap-bg-elevated);
    flex-wrap: wrap;
}

.admin-action-bar-left,
.admin-action-bar-right {
    display: flex;
    gap: var(--ap-space-3);
    align-items: center;
    flex-wrap: wrap;
}

/* =========================================================================
 * Projects (Portfolio) editor — project-specific fields (content-authoring-workspace WI-06).
 * Reuses the WI-05 editor grid / panels / SeoPanel verbatim; only the right-rail "Project details"
 * panel (cover image, tech chips, links, ordering) adds net-new scaffold. Colors/spacing/radii from
 * --ap-* only. The right rail stacks under the editor at the RULE-02-RESP breakpoint via .admin-editor-grid.
 * ========================================================================= */

.admin-project-details,
.admin-blog-details {
    margin-bottom: var(--ap-space-4);
}

.admin-field-group {
    margin-bottom: var(--ap-space-4);
}

.admin-field-group > .admin-field-group-label {
    display: block;
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--ap-text-muted);
    margin-bottom: var(--ap-space-2);
}

.admin-cover-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--ap-radius-md);
    border: 1px solid var(--ap-bg-border);
    display: block;
    margin-bottom: var(--ap-space-2);
}

.admin-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ap-space-2);
    margin-bottom: var(--ap-space-2);
}

.admin-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--ap-space-2);
    min-height: 32px;
    padding: 0 var(--ap-space-3);
    border-radius: 999px;
    background: var(--ap-action-primary-subtle);
    color: var(--ap-action-primary);
    font-size: 0.75rem;
}

.admin-row-inline {
    display: flex;
    gap: var(--ap-space-2);
    align-items: flex-end;
    flex-wrap: wrap;
}

.admin-row-inline .admin-field {
    flex: 1 1 140px;
    margin-bottom: 0;
}

.admin-link-row {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr) auto;
    gap: var(--ap-space-2);
    align-items: center;
    margin-bottom: var(--ap-space-2);
}

@media (max-width: 1024px) {
    /* RULE-02-RESP: link rows collapse to a single column so the editor never overflows at 1024px. */
    .admin-link-row {
        grid-template-columns: 1fr;
    }
}

/* =========================================================================
 * Publish dialog + status timeline + publish-jobs (content-authoring-workspace WI-09).
 * PublishDialog (GAP-CMP-03) + PublishJobStatusPanel (GAP-CMP-04) + ScheduleControl + the
 * /admin/publish-jobs page. Colors/spacing/radii from --ap-* only (RULE-01-GRID / token contract).
 * ========================================================================= */

.admin-inline-banner.error {
    border: 1px solid var(--ap-semantic-error);
    color: var(--ap-semantic-error);
    background: var(--ap-bg-page);
}

.admin-field-label {
    color: var(--ap-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: var(--ap-space-2);
    display: block;
}

/* Target segmented control (Staging / Production). */
.admin-segmented {
    display: inline-flex;
    border: 1px solid var(--ap-bg-border);
    border-radius: var(--ap-radius-md);
    overflow: hidden;
}

.admin-segmented button {
    min-height: 44px;
    background: transparent;
    border: 0;
    color: var(--ap-text-muted);
    padding: 0 var(--ap-space-4);
    cursor: pointer;
    font: inherit;
}

.admin-segmented button.active {
    background: var(--ap-action-primary-subtle);
    color: var(--ap-action-primary);
    font-weight: 650;
}

.admin-segmented button:focus-visible {
    outline: 2px solid var(--ap-action-primary);
    outline-offset: -2px;
}

.admin-segmented button[disabled] {
    color: var(--ap-text-disabled);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Mode radios + schedule control. */
.admin-radio-row {
    display: flex;
    gap: var(--ap-space-4);
    flex-wrap: wrap;
    align-items: center;
}

.admin-radio-row label {
    display: inline-flex;
    align-items: center;
    gap: var(--ap-space-2);
    min-height: 44px;
}

.admin-schedule-control {
    margin-top: var(--ap-space-3);
}

.admin-schedule-row {
    display: flex;
    gap: var(--ap-space-3);
    flex-wrap: wrap;
}

.admin-schedule-row input {
    min-height: 44px;
    border: 1px solid var(--ap-bg-border);
    border-radius: var(--ap-radius-md);
    background: var(--ap-bg-elevated);
    color: var(--ap-text-default);
    padding: 0 var(--ap-space-3);
    font: inherit;
}

.admin-schedule-invalid {
    color: var(--ap-semantic-error);
}

/* PublishJobStatusPanel — vertical step timeline. */
.admin-publish-status {
    align-self: start;
}

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

.admin-publish-step {
    position: relative;
    padding: 0 0 var(--ap-space-4) var(--ap-space-7);
    display: grid;
    grid-template-columns: 1fr;
}

.admin-publish-step::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 4px;
    bottom: -4px;
    width: 2px;
    background: var(--ap-bg-border);
}

.admin-publish-step:last-child::before {
    display: none;
}

.admin-publish-dot {
    position: absolute;
    left: 0;
    top: 2px;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 2px solid var(--ap-bg-border);
    background: var(--ap-bg-elevated);
}

.admin-publish-step.step-done .admin-publish-dot {
    border-color: var(--ap-semantic-success);
    background: var(--ap-semantic-success);
}

.admin-publish-step.step-active .admin-publish-dot {
    border-color: var(--ap-semantic-warning);
    background: var(--ap-semantic-warning);
}

.admin-publish-step.step-failed .admin-publish-dot {
    border-color: var(--ap-semantic-error);
    background: var(--ap-semantic-error);
}

.admin-publish-step-name {
    font-weight: 650;
}

.admin-publish-step.step-todo .admin-publish-step-name {
    color: var(--ap-text-muted);
}

.admin-publish-step.step-failed .admin-publish-step-name {
    color: var(--ap-semantic-error);
}

.admin-publish-step-meta {
    color: var(--ap-text-muted);
    font-size: 0.75rem;
}

/* publish-jobs page — table + selected detail timeline side by side. */
.admin-publish-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--ap-space-5);
    align-items: start;
}

.admin-publish-row {
    cursor: pointer;
}

.admin-publish-row:hover td {
    background: var(--ap-bg-page);
}

.admin-publish-row.selected td {
    background: var(--ap-action-primary-subtle);
}

.admin-publish-row:focus-visible {
    outline: 2px solid var(--ap-action-primary);
    outline-offset: -2px;
}

@media (max-width: 1024px) {
    /* RULE-02-RESP: the detail timeline stacks under the table; no horizontal overflow at 1024px. */
    .admin-publish-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 639px) {
    .admin-schedule-row {
        flex-direction: column;
    }
}