/* placeholder.css — NEW ADMIN-only additions on top of legacy panel.css.
   Owns the page-shell, empty-state, site-picker, and settings-tab classes
   used by placeholder pages. Once real surfaces land, these classes can
   either stay (real pages reuse the page-shell) or be replaced. */

/* ============================================================
   Page shell — common header/body wrapper for every NEW ADMIN page
   ============================================================ */
.page-shell {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
    padding: var(--sp-6) var(--sp-6) var(--sp-8);
    box-sizing: border-box;
}

.page-shell-header {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    margin-bottom: var(--sp-5);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--c-border);
}

.page-shell-title {
    margin: 0;
    font-size: var(--fs-2xl);
    font-weight: 600;
    color: var(--c-text);
    line-height: 1.2;
}

.page-shell-subtitle {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    line-height: var(--lh);
}

.page-shell-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ============================================================
   Empty state
   ============================================================ */
.admin-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--sp-10) var(--sp-6);
    gap: var(--sp-3);
    max-width: 480px;
    margin: var(--sp-8) auto 0;
    background: var(--c-surface);
    border: 1px dashed var(--c-border);
    border-radius: var(--radius-lg);
}

.admin-empty-state-icon {
    color: var(--c-text-soft);
    opacity: 0.55;
    margin-bottom: var(--sp-2);
}

.admin-empty-state-title {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--c-text);
}

.admin-empty-state-body {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    line-height: var(--lh);
}

.admin-empty-state-body code {
    background: var(--c-hover);
    border-radius: var(--radius-sm);
    padding: 1px 6px;
    font-family: var(--ff-mono);
    font-size: 0.875em;
    color: var(--c-text);
}

.admin-empty-state-actions {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    flex-wrap: wrap;
    justify-content: center;
}

.admin-empty-hint {
    padding: var(--sp-4);
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--c-text-soft);
    font-style: italic;
}

/* Topbar site picker and full-menu styles moved to ui-shell.css
   (.ui-topbar__site-picker and .ui-topbar__menu-*). */

/* ============================================================
   Settings pane wrapper
   ============================================================ */
.ui-settings-pane {
    min-height: 280px;
}

/* ============================================================
   Shared NEW ADMIN normalization
   ----------------------------------------------------------------
   Keep disclosure carets, page header alignment, and table wraps
   visually consistent across all surfaces, so pages built with the
   page-shell-* (placeholder) and page-shell__* (shells) class
   families render the same chrome.
   ============================================================ */

/* Page header alignment: ensure both naming styles align to the
   left content gutter and use the same border underline. */
.page-shell .page-shell-header,
.page-shell--full .page-shell-header,
.page-shell .page-shell__header {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Title typography stays in sync regardless of which template
   wrote the markup. */
.page-shell-title,
.page-shell__title {
    font-size: var(--fs-2xl);
    font-weight: 600;
    line-height: 1.2;
    color: var(--c-text);
}

.page-shell-subtitle,
.page-shell__subtitle {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
    line-height: var(--lh);
    margin-top: 4px;
}

/* Generic disclosure caret. Apply to any <details> by adding the
   .ui-disclosure class on the <details> element; the summary will
   render a small chevron that rotates open/closed. */
.ui-disclosure summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--c-text-muted);
    font-weight: 600;
    font-size: var(--fs-xs);
}
.ui-disclosure summary::-webkit-details-marker {
    display: none;
}
.ui-disclosure summary::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    transition: transform 0.15s ease;
}
.ui-disclosure[open] summary::after {
    transform: rotate(225deg) translateY(-1px);
}
.ui-disclosure > p,
.ui-disclosure > ul {
    margin: 8px 0 0;
    line-height: 1.55;
    font-size: var(--fs-xs);
    color: var(--c-text-muted);
}

/* Table wraps fill their container and only scroll horizontally
   when they truly overflow, never on the page level. */
.ui-table-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* All other Settings-specific styles (.admin-settings-*, .admin-site-form,
   .admin-form-*, .admin-status-pill*, .admin-enabled, .admin-disabled,
   .admin-muted, .admin-table-action, .admin-btn--secondary, .admin-btn--small,
   .admin-empty-state--compact, .admin-settings-notice, .admin-settings-error,
   .admin-settings-tabs, .admin-settings-tab) retired in favor of ui-* primitives
   in ui-components.css (see ui-card, ui-table, ui-pill, ui-form-section,
   ui-form-row, ui-checkbox, ui-button, ui-notice, ui-tabs). */

/* Collapsed sidebar behavior moved to ui-shell.css (.ui-sidebar collapsed
   media query). See @media (min-width: 769px) block in ui-shell.css. */