/* ============================================================================
   admin.css — صندوقِ بازخورد و صفحهٔ تحلیل.

   فقط ادمین این صفحه را می‌بیند، ولی همان زبانِ بصریِ بقیهٔ اپ را دارد:
   کارت، ردیف، چیپ. یک «پنلِ ادمینِ زشت» همان چیزی است که بعد از دو هفته
   دیگر کسی بازش نمی‌کند.
   ============================================================================ */

#admRoot { display: grid; gap: 14px; }

/* ── نوارِ بالا ────────────────────────────────────────────────────────── */
.adm-bar { display: flex; align-items: center; gap: 10px; }
.adm-tabs { flex: none; }

/* ── فیلترها ──────────────────────────────────────────────────────────── */
.adm-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 9px;
    padding: 12px;
    border: 1px solid var(--myo-line);
    border-radius: var(--myo-r-lg);
    background: var(--myo-paper);
}
.adm-sel { display: grid; gap: 4px; min-width: 130px; }
.adm-sel.is-grow { flex: 1; min-width: 180px; }
.adm-sel > span { font-size: var(--myo-fs-xs); color: var(--myo-ink-muted); font-weight: 600; }
.adm-sel select, .adm-sel input, .adm-sel textarea { width: 100%; }

/* ── فهرست ────────────────────────────────────────────────────────────── */
.adm-list { display: grid; gap: 6px; }
.adm-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    border: 1px solid var(--myo-line);
    border-radius: var(--myo-r-md);
    background: var(--myo-paper);
    cursor: pointer;
    transition: border-color var(--myo-d-1) var(--myo-ez);
}
.adm-row:hover { border-color: var(--myo-line-2); }
/* ردیفِ خوانده‌نشده یک ریلِ رنگی می‌گیرد، نه پس‌زمینهٔ رنگی: پس‌زمینه در
   فهرستِ چهل‌ردیفی خسته‌کننده است و خوانایی را می‌برد. */
.adm-row[data-status="new"] { border-inline-start: 3px solid var(--myo-brand); }
.adm-row.is-skel { height: 48px; background: var(--myo-surface); border-style: dashed; }

.adm-kind {
    flex: none;
    min-width: 76px;
    font-size: var(--myo-fs-xs);
    font-weight: 700;
    color: var(--myo-ink-muted);
}
.adm-row[data-kind="bug"] .adm-kind { color: var(--myo-danger); }

.adm-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.adm-main b {
    font-size: var(--myo-fs-base);
    font-weight: 600;
    color: var(--myo-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.adm-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--myo-fs-xs);
    color: var(--myo-ink-muted);
}
/* جداکننده را CSS می‌کشد و نه متن: نقطهٔ وسط در فونتِ فارسی همه‌جا نیست
   و یک بار همین یک گلیف عددِ کنارش را ناخوانا کرده بود. */
.adm-sep {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: .5;
    flex: none;
}

.adm-verdict {
    flex: none;
    padding: 3px 9px;
    border-radius: var(--myo-r-pill);
    font-size: var(--myo-fs-xs);
    font-weight: 700;
    background: var(--myo-surface);
    color: var(--myo-ink-2);
}
.adm-verdict[data-v="as_is"] { background: var(--myo-ok-soft); color: var(--myo-ok); }
.adm-verdict[data-v="major_edits"] { background: var(--myo-warn-soft); color: var(--myo-warn); }
.adm-verdict[data-v="unusable"] { background: var(--myo-danger-soft); color: var(--myo-danger); }

.adm-rate {
    flex: none;
    width: 26px;
    height: 26px;
    display: inline-grid;
    place-items: center;
    border-radius: var(--myo-r-sm);
    font-size: var(--myo-fs-xs);
    font-weight: 700;
    background: var(--myo-surface);
    color: var(--myo-ink-2);
}
.adm-rate[data-n="1"], .adm-rate[data-n="2"] { background: var(--myo-danger-soft); color: var(--myo-danger); }
.adm-rate[data-n="3"] { background: var(--myo-warn-soft); color: var(--myo-warn); }
.adm-rate[data-n="4"], .adm-rate[data-n="5"] { background: var(--myo-ok-soft); color: var(--myo-ok); }

.adm-status {
    flex: none;
    font-size: var(--myo-fs-xs);
    color: var(--myo-ink-muted);
    min-width: 62px;
    text-align: center;
}
.adm-replied { flex: none; color: var(--myo-ok); }
.adm-replied svg { width: 15px; height: 15px; }

.adm-pager { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 0; }
.adm-pager span { font-size: var(--myo-fs-sm); color: var(--myo-ink-muted); }

/* ── جزئیات ───────────────────────────────────────────────────────────── */
.adm-d-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start; }
.adm-d-main, .adm-d-side { display: grid; gap: 14px; min-width: 0; }

.adm-d-block {
    padding: 13px;
    border: 1px solid var(--myo-line);
    border-radius: var(--myo-r-md);
    background: var(--myo-paper);
    display: grid;
    gap: 10px;
}
.adm-d-block h3 {
    margin: 0;
    font-size: var(--myo-fs-sm);
    font-weight: 800;
    color: var(--myo-ink);
}
.adm-d-block h3 small { font-weight: 600; color: var(--myo-ink-muted); margin-inline-start: 5px; }

.adm-answer { display: grid; gap: 5px; }
.adm-answer h4 { margin: 0; font-size: var(--myo-fs-xs); font-weight: 700; color: var(--myo-ink-muted); }
.adm-answer-t { margin: 0; font-size: var(--myo-fs-sm); line-height: 1.85; white-space: pre-wrap; color: var(--myo-ink-2); }
.adm-answer + .adm-answer { border-top: 1px solid var(--myo-line); padding-top: 9px; }

.adm-axes { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-axis { display: inline-flex; align-items: center; gap: 5px; }
.adm-axis i { font-style: normal; font-size: var(--myo-fs-xs); color: var(--myo-ink-muted); }

.adm-shots { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-shots img {
    width: 110px;
    height: 84px;
    object-fit: cover;
    border-radius: var(--myo-r-sm);
    border: 1px solid var(--myo-line);
    display: block;
}

.adm-edits { margin: 0; padding-inline-start: 16px; display: grid; gap: 4px; }
.adm-edits li { font-size: var(--myo-fs-sm); color: var(--myo-ink-2); line-height: 1.7; }

.adm-ctx { margin: 0; display: grid; gap: 5px; }
.adm-ctx > div { display: flex; gap: 8px; font-size: var(--myo-fs-xs); }
.adm-ctx dt { flex: none; min-width: 84px; color: var(--myo-ink-muted); }
.adm-ctx dd { margin: 0; color: var(--myo-ink-2); word-break: break-word; }

.adm-warn { margin: 0; font-size: var(--myo-fs-xs); color: var(--myo-warn); }
.adm-raw {
    margin: 0;
    padding: 10px;
    border-radius: var(--myo-r-sm);
    background: var(--myo-surface);
    font-size: var(--myo-fs-xs);
    direction: ltr;
    text-align: start;
    overflow: auto;
}

/* ── تحلیل ────────────────────────────────────────────────────────────── */
.adm-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.adm-card { padding: 14px; display: grid; gap: 11px; }
.adm-card h3 { margin: 0; font-size: var(--myo-fs-sm); font-weight: 800; }
.adm-card h3 small { font-weight: 600; color: var(--myo-ink-muted); margin-inline-start: 5px; }

.adm-vbar { display: flex; height: 26px; border-radius: var(--myo-r-pill); overflow: hidden; }
.adm-vbar span {
    display: grid;
    place-items: center;
    font-size: var(--myo-fs-xs);
    font-weight: 700;
    color: var(--myo-on-fill);
    min-width: 0;
    overflow: hidden;
}
.adm-vbar span[data-v="as_is"] { background: var(--myo-ok-fill); }
.adm-vbar span[data-v="minor_edits"] { background: var(--myo-brand); }
.adm-vbar span[data-v="major_edits"] { background: var(--myo-warn-fill); }
.adm-vbar span[data-v="unusable"] { background: var(--myo-danger); }

.adm-vlegend { display: flex; flex-wrap: wrap; gap: 10px; font-size: var(--myo-fs-xs); color: var(--myo-ink-muted); }
.adm-vlegend span { display: inline-flex; align-items: center; gap: 5px; }
.adm-vlegend i { width: 9px; height: 9px; border-radius: 3px; }
.adm-vlegend i[data-v="as_is"] { background: var(--myo-ok-fill); }
.adm-vlegend i[data-v="minor_edits"] { background: var(--myo-brand); }
.adm-vlegend i[data-v="major_edits"] { background: var(--myo-warn-fill); }
.adm-vlegend i[data-v="unusable"] { background: var(--myo-danger); }

.adm-bars { display: grid; gap: 7px; }
.adm-bar { display: flex; align-items: center; gap: 9px; }
.adm-bar-l { flex: none; width: 118px; font-size: var(--myo-fs-xs); color: var(--myo-ink-2); }
.adm-bar-t { flex: 1; height: 8px; border-radius: var(--myo-r-pill); background: var(--myo-surface-2); overflow: hidden; }
.adm-bar-t i { display: block; height: 100%; border-radius: var(--myo-r-pill); background: var(--myo-brand); }
.adm-bar-t i[data-n="1"], .adm-bar-t i[data-n="2"] { background: var(--myo-danger); }
.adm-bar-t i[data-n="3"] { background: var(--myo-warn-fill); }
/* میله‌های «پرتکرارترین مشکل‌ها» شمارش‌اند و نه نمره: رنگِ معنایی ندارند
   و نباید به‌اندازهٔ میله‌های نمره سنگین باشند، وگرنه چشم اول سراغِ
   ستونی می‌رود که فقط می‌گوید «چند بار». */
.adm-bar-t.is-count i { background: var(--myo-brand-line-strong); }
.adm-bar b { flex: none; min-width: 30px; text-align: end; font-size: var(--myo-fs-xs); }

.adm-table { width: 100%; border-collapse: collapse; font-size: var(--myo-fs-xs); }
.adm-table th {
    text-align: start;
    padding: 5px 6px;
    color: var(--myo-ink-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--myo-line);
}
.adm-table td { padding: 6px; border-bottom: 1px solid var(--myo-line); color: var(--myo-ink-2); }
.adm-table tr:last-child td { border-bottom: 0; }
.adm-table tr.is-hot td { background: var(--myo-danger-soft); color: var(--myo-danger); font-weight: 700; }

/* ── نمرهٔ موتور در برابرِ نمرهٔ مربی ──────────────────────────────────
   نمودارِ پراکندگی با CSS خالص. محورِ افقی ۰ تا ۱۰۰ (نمرهٔ سلامت)، محورِ
   عمودی ۱ تا ۵ (نمرهٔ مربی). اگر این دو هم‌جهت باشند، نقطه‌ها یک قطر
   می‌سازند؛ اگر نه، ابری بی‌شکل — و همان جواب است. */
.adm-scatter {
    position: relative;
    height: 180px;
    border: 1px solid var(--myo-line);
    border-radius: var(--myo-r-sm);
    background:
        linear-gradient(to right, var(--myo-line) 1px, transparent 1px) 0 0 / 25% 100%,
        linear-gradient(to top, var(--myo-line) 1px, transparent 1px) 0 0 / 100% 25%;
}
.adm-scatter i {
    position: absolute;
    width: 9px;
    height: 9px;
    margin: -4px;
    border-radius: 50%;
    background: var(--myo-brand);
    opacity: .7;
}
.adm-scatter-x, .adm-scatter-y {
    position: absolute;
    font-size: 10px;
    color: var(--myo-ink-muted);
}
.adm-scatter-x { inset-block-end: 4px; inset-inline-end: 6px; }
.adm-scatter-y { inset-block-start: 4px; inset-inline-start: 6px; }

@media (max-width: 900px) {
    .adm-cards, .adm-d-grid { grid-template-columns: 1fr; }
    .adm-verdict, .adm-status { display: none; }
    .adm-bar-l { width: 88px; }
}

@media (max-width: 620px) {
    /* فیلترهای فلکس و نوار ابزار نباید عرض ذاتیِ متن‌های فارسی را به ظرف
       تحمیل کنند؛ وگرنه کل صفحه در RTL به سمت چپ از viewport بیرون می‌رود. */
    #admRoot,
    #admRoot > *,
    #admPane { width: 100%; max-width: 100%; min-width: 0; }

    .adm-bar { flex-wrap: wrap; }
    .adm-filters { align-items: stretch; }
    .adm-sel { flex: 1 1 130px; min-width: 0; }
    .adm-sel.is-grow { flex-basis: 100%; min-width: 0; }

    .adm-row { gap: 8px; padding-inline: 11px; }
    .adm-kind { min-width: 64px; }
    .adm-main b {
        display: -webkit-box;
        overflow: hidden;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    .adm-meta { flex-wrap: wrap; }
}