/* Optional data-workspace primitives. Load only on data-dense routes. */
.ph-system-page .ph-state {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border: 1px solid var(--ph-line-strong) !important;
    border-radius: 14px !important;
    background: var(--ph-surface) !important;
    color: var(--ph-ink-secondary) !important;
    box-shadow: 0 8px 24px rgba(14, 43, 38, .05);
}
.ph-system-page .ph-state-indicator {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 12%, transparent);
}
.ph-system-page .ph-state-copy { min-width: 0; display: grid; gap: 2px; }
.ph-system-page .ph-state-copy strong { color: var(--ph-ink); font-size: calc(13px + var(--ph-type-shift)); }
.ph-system-page .ph-state-copy span { color: inherit; font-size: calc(11px + var(--ph-type-shift)); line-height: 1.4; }
.ph-system-page .ph-state-info { border-color: rgba(59, 111, 182, .2) !important; background: #f5f9ff !important; color: var(--ph-info) !important; }
.ph-system-page .ph-state-warning { border-color: rgba(183, 107, 19, .24) !important; background: #fffaf1 !important; color: var(--ph-warning) !important; }
.ph-system-page .ph-state-danger { border-color: rgba(195, 68, 68, .22) !important; background: #fff5f4 !important; color: var(--ph-danger) !important; }
.ph-system-page .ph-state-positive { border-color: rgba(21, 128, 95, .2) !important; background: #f2faf7 !important; color: var(--ph-positive) !important; }
.ph-system-page .ph-empty-state {
    min-width: 0;
    padding: 28px 18px;
    border: 1px dashed var(--ph-line-strong) !important;
    border-radius: var(--ph-radius-card) !important;
    background: var(--ph-surface-subtle) !important;
    color: var(--ph-ink-secondary) !important;
    text-align: center;
    font-size: calc(13px + var(--ph-type-shift));
    line-height: 1.5;
}
.ph-system-page .ph-empty-state strong { color: var(--ph-ink); }

.ph-system-page .ph-table-shell {
    min-width: 0;
    overflow: auto;
    border: 1px solid var(--ph-line) !important;
    border-radius: var(--ph-radius-card) !important;
    background: var(--ph-surface) !important;
}
.ph-system-page .ph-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--ph-ink);
    font-size: calc(12px + var(--ph-type-shift));
}
.ph-system-page .ph-table :where(th, td) { padding: 8px 10px; border-bottom: 1px solid var(--ph-line); text-align: left; }
.ph-system-page .ph-table th { background: var(--ph-surface-subtle); color: var(--ph-ink-secondary); font-weight: 720; }
.ph-system-page .ph-table tbody tr:last-child td { border-bottom: 0; }
.ph-system-page .ph-table-sticky-head th { position: sticky; top: 0; z-index: 1; }

.ph-system-page .ph-status {
    width: fit-content;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border: 1px solid transparent;
    border-radius: var(--ph-radius-pill);
    font-size: calc(11px + var(--ph-type-shift));
    font-weight: 760;
    line-height: 1;
    white-space: nowrap;
}
.ph-system-page .ph-status-neutral { border-color: var(--ph-line) !important; background: var(--ph-surface-subtle) !important; color: var(--ph-ink-secondary) !important; }
.ph-system-page .ph-status-info { border-color: rgba(59, 111, 182, .18) !important; background: #eef5ff !important; color: var(--ph-info) !important; }
.ph-system-page .ph-status-positive { border-color: rgba(21, 128, 95, .18) !important; background: #eef9f5 !important; color: var(--ph-positive) !important; }
.ph-system-page .ph-status-warning { border-color: rgba(183, 107, 19, .2) !important; background: #fff7e9 !important; color: var(--ph-warning) !important; }
.ph-system-page .ph-status-danger { border-color: rgba(195, 68, 68, .2) !important; background: #fff2f1 !important; color: var(--ph-danger) !important; }

.ph-system-page .ph-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ph-system-page .ph-pagination-status { color: var(--ph-ink-secondary) !important; font-size: calc(12px + var(--ph-type-shift)) !important; white-space: nowrap; }
.ph-system-page .ph-pagination-group { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ph-system-page .ph-pagination-input { width: 48px !important; flex: 0 0 48px; text-align: center; }

.ph-system-page .ph-sheet {
    border: 1px solid var(--ph-line) !important;
    background: var(--ph-surface-raised) !important;
    box-shadow: var(--ph-shadow-overlay) !important;
}
.ph-system-page .ph-sheet-backdrop { background: rgba(15, 23, 42, .3) !important; }
.ph-system-page .ph-confirm-dialog {
    width: min(420px, calc(100vw - 28px));
    max-width: none;
    padding: 0;
    overflow: hidden;
}
.ph-system-page .ph-confirm-dialog::backdrop { background: rgba(15, 23, 42, .32); backdrop-filter: blur(4px); }
.ph-system-page .ph-dialog-copy { display: grid; gap: 7px; padding: 22px 22px 16px; }
.ph-system-page .ph-dialog-copy h2 { margin: 0; font-size: calc(17px + var(--ph-type-shift)); }
.ph-system-page .ph-dialog-copy p { margin: 0; color: var(--ph-ink-secondary); font-size: calc(13px + var(--ph-type-shift)); line-height: 1.5; }
.ph-system-page .ph-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--ph-line); }

.ph-system-page .ph-toast-stack {
    position: fixed;
    top: 72px;
    right: 16px;
    z-index: 100;
    width: min(340px, calc(100vw - 24px));
    display: grid;
    gap: 8px;
    pointer-events: none;
}
.ph-system-page .ph-toast {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 9px 12px;
    color: var(--ph-ink);
    font-size: calc(12px + var(--ph-type-shift));
    font-weight: 700;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--ph-motion-fast) ease, transform var(--ph-motion-fast) var(--ph-motion-ease);
}
.ph-system-page .ph-toast::before { width: 8px; height: 8px; border-radius: 50%; background: currentColor; content: ""; }
.ph-system-page .ph-toast.is-visible { opacity: 1; transform: translateY(0); }
.ph-system-page .ph-toast-positive { color: var(--ph-positive); }
.ph-system-page .ph-toast-danger { color: var(--ph-danger); }
.ph-system-page .ph-toast-info { color: var(--ph-info); }

.ph-system-page .review-status-picker.ph-segmented { width: 100%; }
.ph-system-page .review-status-picker .ph-segment { flex: 1 1 0; min-width: 0; padding-inline: 6px !important; }
.ph-system-page .review-status-option.is-selected.is-unreviewed { background: #eff6ff !important; color: #1d4ed8 !important; }
.ph-system-page .review-status-option.is-selected.is-confirmed { background: #f0fdf4 !important; color: #15803d !important; }
.ph-system-page .review-status-option.is-selected.is-needs-changes { background: #fef2f2 !important; color: #b91c1c !important; }

@media (max-width: 640px) {
    .ph-system-page .ph-state { grid-template-columns: auto minmax(0, 1fr); gap: 9px; padding: 9px 10px; }
    .ph-system-page .ph-state > :where(.ph-button, button):last-child { grid-column: 2; justify-self: start; }
    .ph-system-page .ph-toast-stack { top: 58px; right: 10px; width: calc(100vw - 20px); }
    .ph-system-page .ph-dialog-copy { padding: 18px 18px 13px; }
}