/* ══════════════════════════════════════════
   نتايج امتحاناتي
   ══════════════════════════════════════════
   صف لكل امتحان: الدرجة الكبيرة على الجنب (لونها حسب النجاح)، الاسم
   وتفاصيله في النص، والشريط تحتهم. «محاولاتي» بيتفتح تحت الصف بعرضه كله. */

.my-exams { min-width: 0; }

/* ─── الملخّص: المتوسط + نجحت في كام + الترتيب ─── */

.my-exams__overview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-4) var(--s-6);
    padding: var(--s-5);
    margin-bottom: var(--s-3);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
}

.my-exams__average { display: flex; flex-direction: column; gap: .15rem; }

.my-exams__label { font-size: var(--t-sm); color: var(--text-muted); font-weight: var(--fw-semibold); }

.my-exams__average-value {
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
    margin: 0;
}

.my-exams__average-value strong {
    font-size: var(--t-3xl);
    font-weight: var(--fw-black);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.my-exams__average-value span { font-weight: var(--fw-bold); }

.my-exams__average-value.is-ok      { color: var(--ok-600); }
.my-exams__average-value.is-warn    { color: var(--warn-600); }
.my-exams__average-value.is-err     { color: var(--err-600); }
.my-exams__average-value.is-pending { color: var(--text-muted); }

.my-exams__hint { font-size: var(--t-xs); color: var(--text-faint); }

.my-exams__passed {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-pill);
    background: var(--ok-50);
    color: var(--ok-700);
    font-weight: var(--fw-semibold);
    font-size: var(--t-sm);
}

.my-exams__sort {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-inline-start: auto;
}

.my-exams__note {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    margin: 0 0 var(--s-4);
    font-size: var(--t-xs);
    color: var(--text-faint);
}

/* ─── صف الامتحان ─── */

.my-exams__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }

.my-exam {
    --state: var(--n-400);
    --state-bg: var(--n-100);

    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "score body side"
        "attempts attempts attempts";
    align-items: center;
    gap: var(--s-2) var(--s-4);
    padding: var(--s-4) var(--s-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-inline-start: 4px solid var(--state);
    border-radius: var(--r);
}

.my-exam.is-ok      { --state: var(--ok-500);  --state-bg: var(--ok-50); }
.my-exam.is-err     { --state: var(--err-500); --state-bg: var(--err-50); }
.my-exam.is-pending { --state: var(--n-400);   --state-bg: var(--n-100); }

.my-exam__score {
    grid-area: score;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 3.75rem;
    color: var(--state);
    line-height: 1;
}

.my-exam__score strong {
    font-size: var(--t-2xl);
    font-weight: var(--fw-black);
    font-variant-numeric: tabular-nums;
}

.my-exam__score span { font-size: var(--t-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.my-exam__score .icon { width: 1.75rem; height: 1.75rem; }

.my-exam__body { grid-area: body; min-width: 0; }

.my-exam__title {
    margin: 0;
    font-size: var(--t-md);
    font-weight: var(--fw-bold);
    line-height: 1.5;
}

.my-exam__place {
    margin: .1rem 0 0;
    font-size: var(--t-xs);
    color: var(--text-muted);
}

.my-exam__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1) var(--s-4);
    margin: var(--s-2) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--t-xs);
    color: var(--text-muted);
}

.my-exam__meta li { display: inline-flex; align-items: center; gap: .3rem; }

.my-exam__bar {
    height: 6px;
    margin-top: var(--s-3);
    border-radius: var(--r-pill);
    background: var(--surface-inset);
    overflow: hidden;
}

.my-exam__bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--state);
    transition: width var(--dur-slow) var(--ease);
}

.my-exam__side {
    grid-area: side;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--s-1);
}

.my-exam__state {
    padding: .2rem .7rem;
    border-radius: var(--r-pill);
    background: var(--state-bg);
    color: var(--state);
    font-size: var(--t-xs);
    font-weight: var(--fw-bold);
    white-space: nowrap;
}

.my-exam.is-ok .my-exam__state  { color: var(--ok-700); }
.my-exam.is-err .my-exam__state { color: var(--err-600); }

.my-exam__percent { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; color: var(--text-2); }

/* ─── محاولاتي ─── */

.my-exam__attempts { grid-area: attempts; }

.my-exam__attempts > summary {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    padding: var(--s-1) var(--s-3);
    border-radius: var(--r-pill);
    font-size: var(--t-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.my-exam__attempts > summary::-webkit-details-marker { display: none; }
.my-exam__attempts > summary:hover { background: var(--n-100); color: var(--text); }
.my-exam__attempts > summary .icon { transition: transform var(--dur) var(--ease); }
.my-exam__attempts[open] > summary .icon { transform: rotate(180deg); }

.my-attempts {
    display: grid;
    gap: var(--s-2);
    margin: var(--s-2) 0 0;
    padding: 0;
    list-style: none;
}

.my-attempt {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto auto;
    align-items: center;
    gap: var(--s-2) var(--s-4);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r);
    background: var(--surface-inset);
    font-size: var(--t-sm);
}

.my-attempt.is-best { outline: 1.5px solid var(--p-300); }

.my-attempt__number { font-weight: var(--fw-bold); }
.my-attempt__when,
.my-attempt__took { color: var(--text-muted); font-size: var(--t-xs); }
.my-attempt__score { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }

.my-attempt__status { font-size: var(--t-xs); font-weight: var(--fw-bold); }
.my-attempt.is-ok .my-attempt__status      { color: var(--ok-600); }
.my-attempt.is-err .my-attempt__status     { color: var(--err-600); }
.my-attempt.is-pending .my-attempt__status { color: var(--text-muted); }

.my-attempt__review { white-space: nowrap; }

/* ─── الموبايل والتابلت ─── */

@media (max-width: 767px) {
    .my-exams__overview { padding: var(--s-4); }
    .my-exams__sort { margin-inline-start: 0; width: 100%; }

    .my-exam {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "score body"
            "score side"
            "attempts attempts";
        padding: var(--s-4);
    }

    .my-exam__side { flex-direction: row; align-items: center; justify-content: flex-start; }

    .my-attempt {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "number score"
            "when status"
            "took review";
    }

    .my-attempt__number { grid-area: number; }
    .my-attempt__score  { grid-area: score; justify-self: end; }
    .my-attempt__when   { grid-area: when; }
    .my-attempt__status { grid-area: status; justify-self: end; }
    .my-attempt__took   { grid-area: took; }
    .my-attempt__review { grid-area: review; justify-self: end; }
}

@media (prefers-reduced-motion: reduce) {
    .my-exam__bar span,
    .my-exam__attempts > summary .icon { transition: none; }
}

/* ─── فلتر الكورس (جاي من كارت الكورس في «كورساتي») ─── */

.my-exams__filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2) var(--s-3);
    margin-bottom: var(--s-4);
}

.my-exams__filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-width: 0;
    padding: var(--s-2) var(--s-4);
    border-radius: var(--r-pill);
    background: var(--p-50);
    color: var(--p-700);
    font-weight: var(--fw-bold);
    font-size: var(--t-sm);
}

.my-exams__filter-clear {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--t-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
}

.my-exams__filter-clear:hover { color: var(--text); }