/* ═══════════════════════════════════════════════════════════════════
   آینه · پنل مدیریت محتوا
   پنل برای تیم محتوا و روان‌شناس است، نه نوجوان: عریض‌تر، فشرده‌تر و بدون وینیت و نفس.
   همان توکن‌ها، همان مواد و همان قاعده‌ی «رنگ داوری نمی‌کند»: وضعیت‌ها با رنگ هویتی‌اند، نه خوب و بد.
   ═══════════════════════════════════════════════════════════════════ */

.adm-page { max-width: 64rem; margin-inline: auto; padding: calc(4.75rem + var(--safe-top)) var(--margin) 4rem; display: flex; flex-direction: column; gap: var(--space-md); }

.adm-tabs { display: flex; flex-wrap: wrap; gap: var(--space-xs); padding-block-end: var(--space-sm); border-block-end: 1px dashed var(--outline-variant); }
.adm-tab { padding: 0.375rem 1rem; border-radius: var(--radius-pill); color: var(--on-surface-variant); font-size: var(--fs-label-md); font-weight: 600; text-decoration: none !important; border: 1px solid transparent; }
.adm-tab:hover { background: var(--surface-container); }
.adm-tab--on { background: var(--tile-100); color: var(--tile-700); border-color: var(--tile-500); }

.adm-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.adm-head h1 { font-size: var(--fs-headline-lg-mobile); }
.adm-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }

.adm-card { padding: var(--space-md); border-radius: var(--radius-card); background: color-mix(in srgb, var(--paper) 62%, transparent); border: 1px solid color-mix(in srgb, var(--outline-variant) 75%, transparent); display: flex; flex-direction: column; gap: var(--space-sm); }
.adm-card h2 { font-size: var(--fs-body-lg); }

.adm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.adm-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); background: color-mix(in srgb, var(--paper) 55%, transparent); border: 1px solid color-mix(in srgb, var(--outline-variant) 70%, transparent); color: var(--on-surface); text-decoration: none !important; }
.adm-row:hover { background: var(--surface-container); }
.adm-row-main { flex: 1; min-width: 12rem; display: flex; flex-direction: column; }
.adm-row-title { font-weight: 700; }
.adm-row-meta { font-size: var(--fs-label-sm); color: var(--on-surface-variant); }

.adm-grid { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.adm-field { display: flex; flex-direction: column; gap: 0.25rem; font-size: var(--fs-label-md); color: var(--on-surface-variant); }
.adm-field .field-input, .adm-field select, .adm-field textarea { width: 100%; }
.adm-field textarea.field-input { min-height: 6rem; padding-block: var(--space-sm); line-height: 28px; font-family: inherit; resize: vertical; }
.adm-field select.field-input { min-height: 3rem; }
.adm-hint { font-size: var(--fs-label-sm); color: var(--on-surface-variant); }
.adm-hint--warn { color: var(--saffron-700); font-weight: 600; }

.adm-stat { display: flex; flex-direction: column; gap: 0.125rem; }
.adm-stat b { font-size: var(--fs-display); line-height: 1.2; }

/* وضعیت: رنگ هویتی؛ هیچ‌کدام «خوب» یا «بد» نیست */
.status { display: inline-flex; align-items: center; padding: 0 0.75rem; border-radius: var(--radius-pill); font-size: var(--fs-label-sm); font-weight: 700; line-height: 24px; white-space: nowrap; }
.status--0 { background: var(--forming); color: var(--on-surface-variant); }
.status--1 { background: var(--aubergine-100); color: var(--on-tertiary-container); }
.status--2 { background: var(--tile-100); color: var(--tile-700); }
.status--3 { background: var(--saffron-100); color: var(--saffron-700); }

.adm-q { padding: var(--space-md); border-radius: var(--radius-md); background: var(--forming); display: flex; flex-direction: column; gap: var(--space-sm); }
.adm-opt { display: grid; gap: var(--space-xs); grid-template-columns: 6rem 1fr 9rem auto; align-items: center; }
@media (max-width: 640px) { .adm-opt { grid-template-columns: 1fr 1fr; } }
.adm-check { display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--fs-label-sm); }