/*
   ─────────────────────────────────────────────────────────────
   جدول المذاكرة
   ─────────────────────────────────────────────────────────────
   مصمّم للموبايل والتابلت أولًا: كل حاجة عمود واحد على الموبايل، والوحدات
   شريط بيتسحب بالصباع، والتشيك بوكس هدف لمس ٤٤ بكسل. التابلت بيفرد الحصتين
   (الاثنين والخميس) جنب بعض، والديسكتوب بيزوّد عمود الأسبوع.

   ألوان الوحدات السبعة هي الألوان الصريحة الوحيدة هنا — هوية كل وحدة زي
   الجدول الورقي، مش دور في السمة — ولها درجات أفتح للوضع الداكن. البطل وكارت
   الجدول «حبر» داكن في الوضعين زي ترويسة الكورس.
*/

.plan,
.plan-card,
.sp-admin-phase,
.sp-admin-student {
    --u1: #6b5bd2;
    --u2: #d4553a;
    --u3: #2f7fd1;
    --u4: #c28410;
    --u5: #279458;
    --u6: #c0458f;
    --u7: #0e8a90;

    --tone-term1: var(--p-600);
    --tone-review: var(--warn-500);
    --tone-term2: var(--ok-600);
    --tone-final: var(--err-500);
    --tone-exam: var(--err-600);
    --tone-break: var(--n-400);

    --plan-done: var(--ok-600);
    --plan-hero-a: #0b1733;
    --plan-hero-b: #0f3b5c;
    --plan-glass: rgba(255, 255, 255, .07);
    --plan-glass-2: rgba(255, 255, 255, .12);
    --plan-glass-line: rgba(255, 255, 255, .14);
    --plan-ink-muted: rgba(255, 255, 255, .72);
    --plan-mint: #5eead4;
}

[data-theme='dark'] .plan,
[data-theme='dark'] .plan-card,
[data-theme='dark'] .sp-admin-phase,
[data-theme='dark'] .sp-admin-student {
    --u1: #a596f0;
    --u2: #f08a74;
    --u3: #6fb2f2;
    --u4: #e2b04f;
    --u5: #6cd39a;
    --u6: #e48ac1;
    --u7: #4fc1c6;

    --plan-done: var(--ok-500);
    --plan-hero-a: #070d1c;
    --plan-hero-b: #0b2a42;
}

.u-1 { --uc: var(--u1); }
.u-2 { --uc: var(--u2); }
.u-3 { --uc: var(--u3); }
.u-4 { --uc: var(--u4); }
.u-5 { --uc: var(--u5); }
.u-6 { --uc: var(--u6); }
.u-7 { --uc: var(--u7); }

.tone-term1 { --tc: var(--tone-term1); }
.tone-review { --tc: var(--tone-review); }
.tone-term2 { --tc: var(--tone-term2); }
.tone-final { --tc: var(--tone-final); }
.tone-exam { --tc: var(--tone-exam); }
.tone-break { --tc: var(--tone-break); }

.plan-code {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: .82em;
    font-weight: 600;
    letter-spacing: .02em;
    padding: .05em .45em;
    border-radius: var(--r-xs);
    background: color-mix(in srgb, var(--kc, var(--uc, var(--accent))) 14%, transparent);
    color: var(--kc, var(--uc, var(--accent)));
    vertical-align: .08em;
}

/* ══════════════════════════════════════════
   البطل: أنا فين من الخطة؟
   ══════════════════════════════════════════ */

.plan-hero {
    position: relative;
    overflow: hidden;
    color: var(--ink-fg);
    background:
        radial-gradient(38rem 22rem at 100% 0%, rgba(94, 234, 212, .18), transparent 65%),
        radial-gradient(30rem 20rem at 0% 100%, rgba(139, 92, 246, .22), transparent 70%),
        linear-gradient(160deg, var(--plan-hero-a), var(--plan-hero-b));
    padding-block: var(--s-7) var(--s-8);
}

/* شبكة خفيفة زي ورقة الكشكول — تدي الإحساس بالجدول من غير ما تزحم */
.plan-hero__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse at 70% 20%, #000 10%, transparent 75%);
}

.plan-hero__inner {
    position: relative;
    display: grid;
    gap: var(--s-6);
}

.plan-hero__back {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    margin-bottom: var(--s-3);
    color: var(--plan-ink-muted);
    font-size: var(--t-sm);
    font-weight: var(--fw-semibold);
    text-decoration: none;
}

.plan-hero__back:hover { color: var(--ink-fg); }

.plan-hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin: 0 0 var(--s-3);
    padding: 0;
    list-style: none;
}

.plan-hero__tags li {
    padding: .2rem .7rem;
    border-radius: var(--r-pill);
    background: var(--plan-glass);
    border: 1px solid var(--plan-glass-line);
    font-size: var(--t-xs);
    font-weight: var(--fw-semibold);
    color: var(--plan-ink-muted);
}

.plan-hero__tags li:first-child {
    background: color-mix(in srgb, var(--plan-mint) 18%, transparent);
    border-color: color-mix(in srgb, var(--plan-mint) 40%, transparent);
    color: var(--plan-mint);
}

.plan-hero__title {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin: 0;
    /* base.css بيدّي كل العناوين ‎--text‎ (غامق في الفاتح) — البطل حبر داكن في الوضعين */
    color: var(--ink-fg);
    font-size: clamp(1.5rem, 5.2vw, 2.4rem);
    font-weight: var(--fw-black);
    line-height: var(--lh-tight);
    text-wrap: balance;
}

.plan-hero__icon {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--r);
    background: linear-gradient(140deg, var(--plan-mint), #60a5fa);
    color: #06202b;
    box-shadow: 0 12px 28px -12px rgba(94, 234, 212, .8);
    transform: rotate(-5deg);
}

.plan-hero__icon .icon { width: 1.55rem; height: 1.55rem; }

.plan-hero__summary { margin-top: var(--s-4); max-width: 46rem; }

.plan-hero__summary p {
    margin: 0;
    color: var(--plan-ink-muted);
    font-size: var(--t-ui);
    line-height: var(--lh-body);
}

/* الملخص طويل على شاشة الموبايل: ٣ سطور وزرار «اقرا أكتر» */
.plan-hero__summary.is-clamped p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.plan-hero__more {
    margin-top: var(--s-1);
    padding: 0;
    border: 0;
    background: none;
    color: var(--plan-mint);
    font: inherit;
    font-size: var(--t-sm);
    font-weight: var(--fw-bold);
    cursor: pointer;
}

/* ─── لوحة الحالة ─── */

.plan-dash {
    display: grid;
    gap: var(--s-3);
    align-content: start;
}

.plan-ring-card,
.plan-next {
    border-radius: var(--r-xl);
    background: var(--plan-glass);
    border: 1px solid var(--plan-glass-line);
    backdrop-filter: blur(6px);
    padding: var(--s-4);
}

.plan-ring-card {
    display: flex;
    align-items: center;
    gap: var(--s-4);
}

.plan-ring {
    --p: 0;
    position: relative;
    flex: none;
    width: 7.25rem;
    height: 7.25rem;
}

.plan-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

html[dir='rtl'] .plan-ring svg { transform: rotate(-90deg) scaleY(-1); }

.plan-ring circle {
    fill: none;
    stroke-width: 11;
    stroke-linecap: round;
}

.plan-ring__track { stroke: rgba(255, 255, 255, .12); }

.plan-ring__fill {
    stroke: url(#planRingGradient);
    stroke-dasharray: var(--p) 100;
    transition: stroke-dasharray .7s var(--ease);
}

.plan-ring__center {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
    line-height: 1.1;
}

.plan-ring__center strong {
    font-size: 1.65rem;
    font-weight: var(--fw-black);
    font-variant-numeric: tabular-nums;
}

.plan-ring__center span { font-size: var(--t-xs); color: var(--plan-ink-muted); }

.plan-ring-card__body { flex: 1; min-width: 0; }

.plan-ring-card__count {
    margin: 0 0 var(--s-3);
    font-size: var(--t-md);
    font-weight: var(--fw-bold);
}

.plan-stats { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.plan-stat {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-width: 5.5rem;
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r);
    background: var(--plan-glass);
    border: 1px solid var(--plan-glass-line);
    color: inherit;
    font: inherit;
    text-align: start;
    line-height: 1.25;
}

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

.plan-stat span { font-size: var(--t-2xs); color: var(--plan-ink-muted); }

button.plan-stat { cursor: pointer; transition: background var(--dur) var(--ease); }
button.plan-stat:hover { background: var(--plan-glass-2); }

.plan-stat--missed strong { color: #fca5a5; }
.plan-stat--missed.is-zero strong { color: var(--plan-mint); }
.plan-stat--missed.is-zero { pointer-events: none; }

/* ─── الحصة الجاية ─── */

.plan-next { display: flex; flex-direction: column; gap: var(--s-2); }

.plan-next.is-today {
    border-color: rgba(251, 191, 36, .6);
    box-shadow: 0 0 0 4px rgba(251, 191, 36, .14), 0 18px 40px -20px rgba(251, 191, 36, .5);
}

.plan-next__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
}

.plan-next__label {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--t-sm);
    font-weight: var(--fw-bold);
    color: var(--plan-mint);
}

.plan-pulse {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--plan-mint);
    box-shadow: 0 0 0 0 rgba(94, 234, 212, .6);
    animation: plan-pulse 1.8s ease-out infinite;
}

.plan-next.is-today .plan-pulse,
.plan-next.is-today .plan-next__label { color: #fbbf24; }
.plan-next.is-today .plan-pulse { background: #fbbf24; }

.plan-next__when {
    padding: .15rem .65rem;
    border-radius: var(--r-pill);
    background: var(--plan-glass-2);
    font-size: var(--t-xs);
    font-weight: var(--fw-bold);
}

.plan-next__date { display: flex; align-items: center; gap: var(--s-3); }

.plan-next__day {
    font-size: 3.25rem;
    font-weight: var(--fw-black);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(160deg, #fff, #a5f3fc);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.plan-next__month { display: flex; flex-direction: column; line-height: 1.3; }
.plan-next__month b { font-size: var(--t-lg); font-weight: var(--fw-bold); }
.plan-next__month span { font-size: var(--t-sm); color: var(--plan-ink-muted); }

.plan-next__title {
    margin: 0;
    font-size: var(--t-md);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-snug);
}

.plan-next .plan-code { --kc: var(--plan-mint); }

.plan-next__go {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 2.5rem;
    margin-top: var(--s-1);
    padding-inline: var(--s-4);
    border-radius: var(--r-pill);
    background: var(--ink-fg);
    color: #0b1733;
    font-size: var(--t-sm);
    font-weight: var(--fw-bold);
    text-decoration: none;
    transition: transform var(--dur) var(--ease);
}

.plan-next__go:hover { transform: translateY(-1px); color: #0b1733; }

.plan-next__done { margin: 0; font-size: var(--t-md); font-weight: var(--fw-bold); }

/* ══════════════════════════════════════════
   الشريط اللاصق
   ══════════════════════════════════════════ */

.plan-bar {
    position: sticky;
    inset-block-start: var(--plan-sticky-top, 0px);
    z-index: var(--z-sticky);
    background: var(--surface-veil);
    backdrop-filter: saturate(1.4) blur(14px);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid var(--line);
}

.plan-bar.is-stuck { box-shadow: var(--sh-2); }

.plan-bar__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "progress now"
        "filter filter";
    align-items: center;
    gap: var(--s-2) var(--s-3);
    padding-block: var(--s-2);
}

.plan-bar__progress {
    grid-area: progress;
    display: flex;
    align-items: center;
    gap: var(--s-2);
    min-width: 0;
}

.plan-bar__pct {
    font-weight: var(--fw-black);
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    min-width: 2.75rem;
}

.plan-bar__track,
.plan-unit__track,
.plan-phase__track {
    position: relative;
    flex: 1;
    height: .5rem;
    border-radius: var(--r-pill);
    background: var(--surface-inset);
    overflow: hidden;
}

.plan-bar__track i,
.plan-unit__track i,
.plan-phase__track i {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    border-radius: inherit;
    transition: width .5s var(--ease);
}

.plan-bar__track i { background: linear-gradient(90deg, var(--p-500), var(--ok-500)); }

.plan-filter {
    grid-area: filter;
    display: flex;
    gap: var(--s-1);
    padding: 3px;
    border-radius: var(--r-pill);
    background: var(--surface-inset);
    border: 1px solid var(--line-soft);
    overflow-x: auto;
    scrollbar-width: none;
}

.plan-filter::-webkit-scrollbar { display: none; }

.plan-filter__btn {
    flex: 1 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-1);
    min-height: 2.5rem;
    padding-inline: var(--s-3);
    border: 0;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: var(--t-sm);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.plan-filter__btn.is-active {
    background: var(--surface);
    color: var(--accent);
    box-shadow: var(--sh-2);
}

.plan-filter__count {
    min-width: 1.35rem;
    padding-inline: .35rem;
    border-radius: var(--r-pill);
    background: var(--err-500);
    color: #fff;
    font-size: var(--t-2xs);
    font-weight: var(--fw-bold);
    line-height: 1.35rem;
    text-align: center;
}

.plan-filter__count.is-zero { display: none; }

.plan-filter__count--soft {
    background: var(--line);
    color: var(--text-2);
}

.plan-filter__btn.is-active .plan-filter__count--soft {
    background: var(--accent-soft);
    color: var(--accent);
}

.plan-bar__now {
    grid-area: now;
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    min-height: 2.5rem;
    padding-inline: var(--s-3);
    border: 1px solid var(--accent-line);
    border-radius: var(--r-pill);
    background: var(--accent-soft);
    color: var(--accent);
    font: inherit;
    font-size: var(--t-sm);
    font-weight: var(--fw-bold);
    white-space: nowrap;
    cursor: pointer;
}

/* ══════════════════════════════════════════
   جسم الصفحة
   ══════════════════════════════════════════ */

.plan-body {
    display: flex;
    flex-direction: column;
    gap: var(--s-8);
    padding-block: var(--s-6) var(--s-10);
}

.plan-section__head { margin-bottom: var(--s-4); }

.plan-section__title {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin: 0 0 var(--s-4);
    font-size: var(--t-xl);
    font-weight: var(--fw-bold);
}

.plan-section__head .plan-section__title { margin-bottom: var(--s-1); }

.plan-section__title .icon {
    width: 2.25rem;
    height: 2.25rem;
    padding: .45rem;
    border-radius: var(--r-sm);
    background: var(--accent-soft);
    color: var(--accent);
}

.plan-section__hint { margin: 0; color: var(--text-muted); font-size: var(--t-sm); }

.plan-guest {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-4);
    border-radius: var(--r-lg);
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
}

.plan-guest__icon {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--r);
    background: var(--accent);
    color: var(--text-invert);
}

.plan-guest__body { flex: 1; min-width: 12rem; display: flex; flex-direction: column; }
.plan-guest__body span { color: var(--text-muted); font-size: var(--t-sm); }

/* ─── شريط السنة ─── */

.plan-timeline {
    padding: var(--s-5) var(--s-4) var(--s-4);
    border-radius: var(--r-xl);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--sh-1);
}

.plan-timeline__bar {
    position: relative;
    height: 1rem;
    margin-top: var(--s-6);
}

.plan-timeline__segs { display: flex; gap: 3px; height: 100%; }

.plan-timeline__seg {
    flex-basis: 0;
    min-width: 6px;
    border-radius: 4px;
    background: var(--tc);
    opacity: .9;
}

.plan-timeline__seg:first-child { border-start-start-radius: var(--r-pill); border-end-start-radius: var(--r-pill); }
.plan-timeline__seg:last-child { border-start-end-radius: var(--r-pill); border-end-end-radius: var(--r-pill); }

.plan-timeline__seg.tone-break {
    background: repeating-linear-gradient(135deg, var(--n-300) 0 4px, var(--n-200) 4px 8px);
}

.plan-timeline__seg.is-current {
    opacity: 1;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tc) 30%, transparent);
}

.plan-timeline__today {
    position: absolute;
    inset-block: -.4rem;
    width: 3px;
    margin-inline-start: -1.5px;
    border-radius: 2px;
    background: var(--text);
}

.plan-timeline__today span {
    position: absolute;
    bottom: calc(100% + .35rem);
    inset-inline-start: 50%;
    transform: translateX(50%);
    padding: .1rem .55rem;
    border-radius: var(--r-pill);
    background: var(--text);
    color: var(--surface);
    font-size: var(--t-2xs);
    font-weight: var(--fw-bold);
    white-space: nowrap;
}

html[dir='ltr'] .plan-timeline__today span { transform: translateX(-50%); }

.plan-timeline__legend {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-2) var(--s-4);
    margin: var(--s-5) 0 0;
    padding: 0;
    list-style: none;
}

.plan-timeline__legend li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-sm);
    font-size: var(--t-sm);
}

.plan-timeline__legend li.is-current {
    background: color-mix(in srgb, var(--tc) 12%, transparent);
    font-weight: var(--fw-bold);
}

.plan-timeline__legend i {
    width: .75rem;
    height: .75rem;
    border-radius: 3px;
    background: var(--tc);
}

.plan-timeline__legend .tone-break i {
    background: repeating-linear-gradient(135deg, var(--n-400) 0 2px, var(--n-200) 2px 4px);
}

.plan-timeline__dates { color: var(--text-muted); font-size: var(--t-xs); white-space: nowrap; }

/* ─── أرقام سريعة ─── */

.plan-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3);
}

.plan-fact {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    padding: var(--s-4);
    border-radius: var(--r-lg);
    background: var(--surface);
    border: 1px solid var(--line);
    overflow: hidden;
}

.plan-fact::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--p-500), var(--plan-mint, #5eead4));
}

.plan-fact__label { font-size: var(--t-xs); color: var(--text-muted); }
.plan-fact__value { font-size: var(--t-md); font-weight: var(--fw-bold); }

/* ─── الوحدات ─── */

.plan-units {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(16.5rem, 84%);
    gap: var(--s-3);
    margin-inline: calc(var(--gutter, var(--s-4)) * -1);
    padding: var(--s-1) var(--gutter, var(--s-4)) var(--s-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter, var(--s-4));
    scrollbar-width: thin;
}

.plan-unit {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    padding: var(--s-4);
    padding-top: calc(var(--s-4) + 4px);
    border-radius: var(--r-lg);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--sh-1);
    scroll-snap-align: start;
    overflow: hidden;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.plan-unit::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    height: 4px;
    background: var(--uc);
}

.plan-unit.is-current {
    border-color: var(--uc);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--uc) 35%, transparent), var(--sh-3);
}

.plan-unit__head { display: flex; align-items: flex-start; gap: var(--s-3); }

.plan-unit__num {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--r-sm);
    background: var(--uc);
    color: #fff;
    font-size: var(--t-lg);
    font-weight: var(--fw-black);
    box-shadow: 0 8px 18px -10px var(--uc);
}

[data-theme='dark'] .plan-unit__num { color: #0b1220; }

.plan-unit__heading { flex: 1; min-width: 0; }

.plan-unit__title {
    margin: 0;
    font-size: var(--t-md);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
}

.plan-unit__term { font-size: var(--t-xs); color: var(--text-muted); }

.plan-unit__now {
    flex: none;
    padding: .1rem .55rem;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--uc) 16%, transparent);
    color: var(--uc);
    font-size: var(--t-2xs);
    font-weight: var(--fw-bold);
}

.plan-unit__check {
    display: none;
    flex: none;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--plan-done);
    color: #fff;
}

.plan-unit.is-complete .plan-unit__check { display: inline-grid; }
.plan-unit.is-complete .plan-unit__now { display: none; }

.plan-unit__lessons {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--t-sm);
    color: var(--text-2);
}

.plan-unit__lessons li { display: flex; align-items: baseline; gap: var(--s-2); }
.plan-unit__lessons .plan-code { flex: none; }

.plan-unit__note {
    margin: 0;
    font-size: var(--t-xs);
    font-weight: var(--fw-semibold);
    color: var(--uc);
}

.plan-unit__progress {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-top: auto;
    padding-top: var(--s-2);
    border-top: 1px dashed var(--line);
}

.plan-unit__track i { background: var(--uc); }

.plan-unit__count {
    font-size: var(--t-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ─── المراحل: تنقّل سريع ─── */

.plan-phase-nav {
    display: flex;
    gap: var(--s-2);
    margin: 0 calc(var(--gutter, var(--s-4)) * -1) var(--s-3);
    padding: var(--s-1) var(--gutter, var(--s-4));
    overflow-x: auto;
    scrollbar-width: none;
}

.plan-phase-nav::-webkit-scrollbar { display: none; }

.plan-phase-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 2.75rem;
    padding: var(--s-1) var(--s-3) var(--s-1) var(--s-2);
    border-radius: var(--r-pill);
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--text);
    font-size: var(--t-sm);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    white-space: nowrap;
}

.plan-phase-chip:hover { border-color: var(--tc); color: var(--text); }

.plan-phase-chip.is-current {
    background: color-mix(in srgb, var(--tc) 12%, var(--surface));
    border-color: var(--tc);
}

.plan-phase-chip__num {
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--tc);
    color: #fff;
    font-size: var(--t-xs);
    font-weight: var(--fw-black);
}

[data-theme='dark'] .plan-phase-chip__num { color: #0b1220; }

.plan-phase-chip__count {
    color: var(--text-muted);
    font-size: var(--t-xs);
    font-variant-numeric: tabular-nums;
}

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

.plan-legend li { display: inline-flex; align-items: center; gap: var(--s-2); }
.plan-legend i { width: .8rem; height: .8rem; border-radius: 3px; }
.plan-legend .is-lesson i { background: linear-gradient(135deg, var(--u2), var(--u3), var(--u5)); }
.plan-legend .is-review i { background: var(--tone-review); }
.plan-legend .is-exam i { background: var(--tone-exam); }
.plan-legend .is-off i { border: 2px dashed var(--tone-break); }

/* ══════════════════════════════════════════
   الخطة حصة بحصة
   ══════════════════════════════════════════ */

.plan-ledger {
    display: flex;
    flex-direction: column;
    gap: var(--s-7);
    scroll-margin-top: calc(var(--plan-sticky-top, 0px) + var(--plan-bar-h, 6.5rem) + var(--s-3));
}

/* «وريني مكانها»: الحصة بتنوّر لحظة عشان العين تلاقيها */
.plan-session.is-flash { animation: plan-flash 1.5s var(--ease); }

@keyframes plan-flash {
    0%, 60% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 45%, transparent), var(--sh-3); }
    100% { box-shadow: var(--sh-1); }
}

.plan-phase { scroll-margin-top: calc(var(--plan-sticky-top, 0px) + var(--plan-bar-h, 6.5rem) + var(--s-3)); }

.plan-phase__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--s-2) var(--s-3);
    margin-bottom: var(--s-4);
    padding: var(--s-4);
    border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--tc) 10%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--tc) 28%, transparent);
    border-inline-start: 5px solid var(--tc);
}

.plan-phase__num {
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--tc);
    color: #fff;
    font-weight: var(--fw-black);
}

[data-theme='dark'] .plan-phase__num { color: #0b1220; }

.plan-phase__title { margin: 0; font-size: var(--t-lg); font-weight: var(--fw-bold); }
.plan-phase__sub { margin: 0; font-size: var(--t-xs); color: var(--text-muted); }

.plan-phase__progress {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.plan-phase__count {
    font-size: var(--t-xs);
    font-weight: var(--fw-bold);
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
    min-width: 2.75rem;
}

.plan-phase__track { background: color-mix(in srgb, var(--tc) 14%, var(--surface)); }
.plan-phase__track i { background: var(--tc); }

.plan-phase.is-complete .plan-phase__num { background: var(--plan-done); }

/* ─── الأسابيع: خط زمني رأسي بنقطة لكل أسبوع ─── */

.plan-weeks { position: relative; display: flex; flex-direction: column; gap: var(--s-4); }

.plan-week {
    position: relative;
    display: grid;
    gap: var(--s-2);
    padding-inline-start: 1.5rem;
    scroll-margin-top: calc(var(--plan-sticky-top, 0px) + var(--plan-bar-h, 6.5rem) + var(--s-4));
}

.plan-week::before {
    content: "";
    position: absolute;
    inset-inline-start: .45rem;
    inset-block: .8rem calc(var(--s-4) * -1);
    width: 2px;
    background: repeating-linear-gradient(to bottom, var(--line-strong) 0 4px, transparent 4px 8px);
}

.plan-week:last-child::before { inset-block-end: 0; }

.plan-week::after {
    content: "";
    position: absolute;
    inset-inline-start: .1rem;
    inset-block-start: .3rem;
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--line-strong);
}

.plan-week.is-current::after {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

.plan-week__label {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--t-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
}

.plan-week__now {
    padding: .05rem .5rem;
    border-radius: var(--r-pill);
    background: var(--accent);
    color: var(--text-invert);
    font-size: var(--t-2xs);
    font-weight: var(--fw-bold);
}

.plan-week__sessions { display: grid; gap: var(--s-2); }

/* ─── كارت الحصة ─── */

.plan-session {
    --kc: var(--accent);
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--s-3);
    padding: var(--s-3);
    border-radius: var(--r);
    background: var(--surface);
    border: 1px solid var(--line);
    border-inline-start: 4px solid var(--kc);
    box-shadow: var(--sh-1);
    scroll-margin-top: calc(var(--plan-sticky-top, 0px) + var(--plan-bar-h, 6.5rem) + var(--s-4));
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.plan-session.is-lesson { --kc: var(--uc, var(--accent)); }
.plan-session.is-review { --kc: var(--tone-review); }
.plan-session.is-exam { --kc: var(--tone-exam); }
.plan-session.is-buffer { --kc: var(--tone-break); border-style: dashed; border-inline-start-style: solid; }

.plan-session.is-off {
    --kc: var(--tone-break);
    grid-template-columns: auto minmax(0, 1fr);
    background: var(--surface-inset);
    border-style: dashed;
    box-shadow: none;
    opacity: .85;
}

.plan-session__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 3.4rem;
    padding: var(--s-2) var(--s-1);
    border-radius: var(--r-sm);
    background: color-mix(in srgb, var(--kc) 10%, var(--surface-inset));
    line-height: 1.15;
    text-align: center;
}

.plan-session__date b {
    font-size: var(--t-xl);
    font-weight: var(--fw-black);
    color: var(--kc);
    font-variant-numeric: tabular-nums;
}

.plan-session__date span { font-size: var(--t-2xs); font-weight: var(--fw-bold); }
.plan-session__date small { font-size: var(--t-2xs); color: var(--text-muted); }

.plan-session__body { min-width: 0; }

.plan-session__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-1) var(--s-2);
    margin-bottom: .2rem;
}

.plan-session__num {
    font-size: var(--t-2xs);
    font-weight: var(--fw-bold);
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

.plan-pill {
    padding: 0 .55rem;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--kc) 14%, transparent);
    color: var(--kc);
    font-size: var(--t-2xs);
    font-weight: var(--fw-bold);
    line-height: 1.5rem;
}

.plan-flag {
    padding: 0 .55rem;
    border-radius: var(--r-pill);
    font-size: var(--t-2xs);
    font-weight: var(--fw-bold);
    line-height: 1.5rem;
}

.plan-flag--today { background: var(--warn-500); color: #1f1300; animation: plan-glow 2s ease-in-out infinite; }
.plan-flag--missed { display: none; background: var(--err-50); color: var(--err-600); border: 1px solid var(--err-100); }
.plan-session.is-missed .plan-flag--missed { display: inline-block; }

.plan-session__title {
    margin: 0;
    font-size: var(--t-ui);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
}

.plan-session__part {
    display: inline-block;
    margin-inline-start: var(--s-1);
    padding: 0 .4rem;
    border-radius: var(--r-xs);
    background: var(--surface-inset);
    color: var(--text-muted);
    font-size: var(--t-2xs);
    font-weight: var(--fw-semibold);
    vertical-align: .1em;
}

.plan-session__topics {
    margin: .3rem 0 0;
    font-size: var(--t-sm);
    color: var(--text-muted);
    line-height: var(--lh-snug);
}

.plan-session__spiral {
    display: flex;
    align-items: flex-start;
    gap: var(--s-1);
    margin: var(--s-2) 0 0;
    padding-top: var(--s-2);
    border-top: 1px dashed var(--line);
    font-size: var(--t-xs);
    font-weight: var(--fw-semibold);
    color: var(--warn-700);
}

.plan-session__spiral .icon { flex: none; margin-top: .2rem; }

/* الحالات */

.plan-session.is-next {
    border-color: var(--accent-line);
    box-shadow: 0 0 0 3px var(--accent-soft), var(--sh-2);
}

.plan-session.is-today {
    border-color: var(--warn-500);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn-500) 25%, transparent), var(--sh-3);
}

.plan-session.is-missed .plan-session__date { background: var(--err-50); }
.plan-session.is-missed .plan-session__date b { color: var(--err-600); }

.plan-session.is-done {
    background: color-mix(in srgb, var(--plan-done) 7%, var(--surface));
    border-color: color-mix(in srgb, var(--plan-done) 30%, transparent);
    border-inline-start-color: var(--plan-done);
    box-shadow: none;
}

.plan-session.is-done .plan-session__title > span:not(.plan-session__part) {
    color: var(--text-muted);
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, var(--plan-done) 70%, transparent);
    text-decoration-thickness: 2px;
}

.plan-session.is-done .plan-session__topics,
.plan-session.is-done .plan-session__spiral { opacity: .7; }

/* ─── التشيك بوكس: هدف لمس ٤٤ بكسل ─── */

.plan-check {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: -.25rem;
    border-radius: var(--r);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.plan-check__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}

.plan-check__box {
    display: inline-grid;
    place-items: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: .6rem;
    border: 2px solid var(--line-strong);
    background: var(--surface);
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.plan-check__box svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: none;
    stroke: #fff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 22;
    stroke-dashoffset: 22;
    transition: stroke-dashoffset .25s var(--ease) .05s;
}

.plan-check:hover .plan-check__box { border-color: var(--plan-done); }

.plan-check__input:focus-visible + .plan-check__box { box-shadow: var(--sh-ring); }

.plan-check__input:checked + .plan-check__box {
    background: linear-gradient(140deg, var(--ok-500), var(--ok-600));
    border-color: transparent;
    animation: plan-pop .32s var(--ease);
}

[data-theme='dark'] .plan-check__input:checked + .plan-check__box { background: linear-gradient(140deg, #22c55e, #16a34a); }

.plan-check__input:checked + .plan-check__box svg { stroke-dashoffset: 0; }

.plan-check.is-saving .plan-check__box { opacity: .6; }

.plan-check--guest .plan-check__box { border-style: dashed; }

/* ─── فترات بلا حصص ─── */

.plan-band {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-4);
    border-radius: var(--r);
    border: 1px dashed var(--line-strong);
    background: var(--surface-inset);
}

.plan-band.is-exam-period {
    border: 1px solid color-mix(in srgb, var(--tone-exam) 35%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--tone-exam) 12%, var(--surface)), var(--surface));
}

.plan-band.is-vacation {
    background: repeating-linear-gradient(135deg, var(--surface-inset) 0 10px, var(--surface) 10px 20px);
}

.plan-band__icon {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text-muted);
    border: 1px solid var(--line);
}

.plan-band.is-exam-period .plan-band__icon { background: var(--tone-exam); color: #fff; border: 0; }

.plan-band__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.plan-band__body span { font-size: var(--t-xs); color: var(--text-muted); }

.plan-band__dates {
    flex: none;
    font-size: var(--t-xs);
    font-weight: var(--fw-bold);
    color: var(--text-2);
    white-space: nowrap;
}

.plan-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-8) var(--s-4);
    border-radius: var(--r-lg);
    border: 1px dashed var(--line-strong);
    color: var(--text-muted);
    text-align: center;
}

.plan-empty span { font-size: 2rem; }
.plan-empty p { margin: 0; font-weight: var(--fw-semibold); }

/* ─── الملاحظات والمصدر ─── */

.plan-notes { display: grid; gap: var(--s-4); }

.plan-note {
    padding: var(--s-5);
    border-radius: var(--r-xl);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--sh-1);
}

.plan-note__title {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin: 0 0 var(--s-4);
    font-size: var(--t-lg);
    font-weight: var(--fw-bold);
}

.plan-note__icon {
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--r-sm);
    background: var(--accent-soft);
    color: var(--accent);
}

.plan-note__list {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    margin: 0 0 var(--s-3);
    padding: 0;
    list-style: none;
    counter-reset: plan-step;
}

.plan-note__list li {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-inline-start: 2.25rem;
    font-size: var(--t-sm);
    line-height: var(--lh-snug);
}

.plan-note__list li::before {
    content: "";
    position: absolute;
    inset-inline-start: .5rem;
    inset-block-start: .45rem;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--accent);
}

.plan-note__list.is-ordered li { counter-increment: plan-step; }

.plan-note__list.is-ordered li::before {
    content: counter(plan-step);
    inset-inline-start: 0;
    inset-block-start: 0;
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: var(--t-xs);
    font-weight: var(--fw-black);
}

.plan-note__list strong { font-weight: var(--fw-bold); }
.plan-note__list span { color: var(--text-2); }

.plan-note__text {
    margin: var(--s-3) 0 0;
    padding: var(--s-3);
    border-radius: var(--r);
    background: var(--surface-inset);
    font-size: var(--t-sm);
    color: var(--text-2);
    line-height: var(--lh-body);
}

.plan-source {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    padding-top: var(--s-4);
    border-top: 1px solid var(--line);
    font-size: var(--t-xs);
    color: var(--text-muted);
}

.plan-source .icon { flex: none; margin-top: .2rem; }
.plan-source a { margin-inline-start: var(--s-1); font-weight: var(--fw-semibold); }

/* ─── التوست والاحتفال ─── */

.plan-toast {
    position: fixed;
    inset-inline: var(--s-4);
    inset-block-end: calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
    z-index: var(--z-toast);
    width: fit-content;
    max-width: min(26rem, calc(100vw - 2rem));
    margin-inline: auto;
    padding: var(--s-3) var(--s-5);
    border-radius: var(--r-pill);
    background: var(--n-900);
    color: var(--n-0);
    box-shadow: var(--sh-4);
    font-size: var(--t-sm);
    font-weight: var(--fw-bold);
    text-align: center;
    animation: plan-toast-in .3s var(--ease);
}

.plan-toast.is-error { background: var(--err-600); color: #fff; }
[data-theme='dark'] .plan-toast.is-error { background: #b91c1c; }

.plan-confetti {
    position: fixed;
    inset: 0;
    z-index: 2000;
    pointer-events: none;
    overflow: hidden;
}

.plan-confetti i {
    position: absolute;
    top: -1rem;
    width: .55rem;
    height: .85rem;
    border-radius: 2px;
    animation: plan-fall var(--d, 1.6s) cubic-bezier(.25, .6, .4, 1) forwards;
}

/* ══════════════════════════════════════════
   كارت الجدول (كورساتي، الأوائل، صفحة المادة)
   ══════════════════════════════════════════ */

.plan-card-list { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); }
.plan-card-list--course { margin-bottom: var(--s-7); }

.plan-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--s-3) var(--s-4);
    padding: var(--s-4);
    border-radius: var(--r-xl);
    overflow: hidden;
    color: var(--ink-fg);
    text-decoration: none;
    background:
        radial-gradient(22rem 12rem at 100% 0%, rgba(94, 234, 212, .2), transparent 70%),
        radial-gradient(18rem 12rem at 0% 100%, rgba(139, 92, 246, .22), transparent 70%),
        linear-gradient(150deg, var(--plan-hero-a), var(--plan-hero-b));
    box-shadow: 0 18px 40px -24px rgba(15, 59, 92, .9);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.plan-card:hover {
    color: var(--ink-fg);
    transform: translateY(-2px);
    box-shadow: 0 24px 48px -24px rgba(15, 59, 92, .95);
}

.plan-card__ring {
    --p: 0;
    position: relative;
    display: grid;
    place-items: center;
    width: 3.75rem;
    height: 3.75rem;
    color: var(--plan-mint);
}

.plan-card__ring svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

html[dir='rtl'] .plan-card__ring svg { transform: rotate(-90deg) scaleY(-1); }

.plan-card__ring circle { fill: none; stroke-width: 5; stroke-linecap: round; }
.plan-card__track { stroke: rgba(255, 255, 255, .14); }
.plan-card__fill { stroke: var(--plan-mint); stroke-dasharray: var(--p) 100; }
.plan-card__ring .icon { width: 1.4rem; height: 1.4rem; }

.plan-card__body { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }

.plan-card__kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--t-xs);
    font-weight: var(--fw-bold);
    color: var(--plan-mint);
}

.plan-card__missed {
    padding: 0 .5rem;
    border-radius: var(--r-pill);
    background: rgba(248, 113, 113, .2);
    color: #fecaca;
    line-height: 1.4rem;
}

.plan-card__title { font-size: var(--t-lg); font-weight: var(--fw-black); line-height: var(--lh-tight); }

.plan-card__next {
    font-size: var(--t-sm);
    color: rgba(255, 255, 255, .9);
    line-height: var(--lh-snug);
}

.plan-card__next b { color: var(--plan-mint); font-weight: var(--fw-bold); margin-inline-end: .25rem; }

.plan-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1) var(--s-3);
    font-size: var(--t-xs);
    color: var(--plan-ink-muted);
}

.plan-card__go {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 2.75rem;
    padding-inline: var(--s-5);
    border-radius: var(--r-pill);
    background: var(--ink-fg);
    color: #0b1733;
    font-size: var(--t-sm);
    font-weight: var(--fw-bold);
}

/* ══════════════════════════════════════════
   لوحة الإدارة: جداول المذاكرة
   ══════════════════════════════════════════
   فوق كلاسات builder و panel الموجودة — هنا بس اللي خاص بالجدول:
   خط لون المرحلة، كارت الحصة بتاريخه، وفورم التعديل اللي بيتفتح في مكانه. */

.sp-admin-plans { display: grid; gap: var(--s-3); }

.sp-admin-plan {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-4) var(--s-5);
    border-radius: var(--r-lg);
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--sh-1);
}

.sp-admin-plan__icon {
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--r);
    background: var(--accent-soft);
    color: var(--accent);
}

.sp-admin-plan__body { flex: 1; min-width: 14rem; }
.sp-admin-plan__title { margin: 0 0 var(--s-1); font-size: var(--t-md); font-weight: var(--fw-bold); }
.sp-admin-plan__title a { color: var(--text); }
.sp-admin-plan__title a:hover { color: var(--accent); text-decoration: none; }
.sp-admin-plan__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.sp-admin-phase { border-inline-start: 4px solid var(--tc, var(--line)); scroll-margin-top: var(--s-6); }
.sp-admin-phase__index { background: var(--tc) !important; color: #fff !important; }
[data-theme='dark'] .sp-admin-phase__index { color: #0b1220 !important; }

.sp-admin-edit { border-top: 1px dashed var(--line); }

.sp-admin-edit > summary {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-5);
    color: var(--accent);
    font-size: var(--t-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    list-style: none;
}

.sp-admin-edit > summary::-webkit-details-marker { display: none; }
.sp-admin-edit[open] > summary { color: var(--text-muted); }
.sp-admin-edit > form { padding: var(--s-2) var(--s-5) var(--s-5); }

.sp-admin-edit--flat { border-top: 0; }
.sp-admin-edit--flat > summary,
.sp-admin-edit--flat > form { padding-inline: 0; }

.sp-admin-sessions { list-style: none; margin: 0; padding: 0; }

.sp-admin-session {
    --kc: var(--accent);
    border-top: 1px solid var(--line-soft);
    border-inline-start: 4px solid var(--kc);
    scroll-margin-top: var(--s-6);
}

.sp-admin-session.is-lesson { --kc: var(--uc, var(--accent)); }
.sp-admin-session.is-review { --kc: var(--tone-review); }
.sp-admin-session.is-exam { --kc: var(--tone-exam); }
.sp-admin-session.is-buffer,
.sp-admin-session.is-off { --kc: var(--tone-break); }
.sp-admin-session.is-exam-period { --kc: var(--tone-exam); background: var(--err-50); }
.sp-admin-session.is-vacation,
.sp-admin-session.is-off { background: var(--surface-sunken); }

.sp-admin-session.is-flash { animation: plan-flash 1.6s var(--ease); }

.sp-admin-session__row {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
}

.sp-admin-session__date {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 3.4rem;
    padding: var(--s-1);
    border-radius: var(--r-sm);
    background: color-mix(in srgb, var(--kc) 10%, var(--surface-inset));
    line-height: 1.2;
    text-align: center;
}

.sp-admin-session__date b { font-size: var(--t-lg); font-weight: var(--fw-black); color: var(--kc); }
.sp-admin-session__date span { font-size: var(--t-2xs); font-weight: var(--fw-bold); }
.sp-admin-session__date small { font-size: var(--t-2xs); color: var(--text-muted); }

.sp-admin-session__main { flex: 1; min-width: 0; }

.sp-admin-session__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-1) var(--s-3);
    font-size: var(--t-xs);
    color: var(--text-muted);
}

.sp-admin-session__meta .icon { width: .9em; height: .9em; }
.sp-admin-session__num { font-weight: var(--fw-bold); color: var(--text-faint); }

.sp-admin-kind {
    padding: 0 .5rem;
    border-radius: var(--r-pill);
    background: color-mix(in srgb, var(--kc) 14%, transparent);
    color: var(--kc);
    font-weight: var(--fw-bold);
    line-height: 1.4rem;
}

.sp-admin-session__title { margin: .15rem 0 0; font-weight: var(--fw-semibold); }
.sp-admin-session__topics { margin: .15rem 0 0; font-size: var(--t-sm); color: var(--text-muted); }
.sp-admin-session__actions { flex: none; display: flex; gap: var(--s-1); }

.sp-admin-session .sp-admin-edit > summary { padding-inline: var(--s-4); }
.sp-admin-session .sp-admin-edit > form { padding-inline: var(--s-4); }

.sp-admin-json { font-family: var(--font-mono); font-size: var(--t-xs); line-height: 1.6; }

.sp-admin-sort { margin: var(--s-4) 0; }

.sp-admin-meter { display: flex; align-items: center; gap: var(--s-2); min-width: 8rem; }

.sp-admin-meter__track {
    position: relative;
    flex: 1;
    height: .45rem;
    border-radius: var(--r-pill);
    background: var(--surface-inset);
    overflow: hidden;
}

.sp-admin-meter__track i {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--p-500), var(--ok-500));
}

.sp-admin-meter__value { font-size: var(--t-xs); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }

.sp-admin-stat-text { font-size: var(--t-lg) !important; }

.sp-admin-student tr.is-missed td { background: var(--err-50); }
.sp-admin-student tr.is-done td:first-child { color: var(--ok-600); }

/* ══════════════════════════════════════════
   الحركة
   ══════════════════════════════════════════ */

@keyframes plan-pulse {
    0% { box-shadow: 0 0 0 0 rgba(94, 234, 212, .55); }
    80%, 100% { box-shadow: 0 0 0 .6rem rgba(94, 234, 212, 0); }
}

@keyframes plan-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .45); }
    50% { box-shadow: 0 0 0 .3rem rgba(245, 158, 11, 0); }
}

@keyframes plan-pop {
    0% { transform: scale(.8); }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

@keyframes plan-toast-in {
    from { opacity: 0; transform: translateY(1rem); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes plan-fall {
    to { transform: translate3d(var(--x, 0), 105vh, 0) rotate(var(--r, 540deg)); opacity: .9; }
}

/* ══════════════════════════════════════════
   المقاسات
   ══════════════════════════════════════════ */

/* وضع التطبيق (الموبايل والتابلت): التوست فوق شريط التبويبات */
@media (max-width: 991.98px), (pointer: coarse) and (max-width: 1366px) {
    .plan-toast { inset-block-end: calc(var(--tabbar-h) + var(--s-3) + env(safe-area-inset-bottom, 0px)); }
    .plan-hero { padding-block: var(--s-6) var(--s-7); }
}

@media (min-width: 600px) {
    .plan-dash { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .plan-timeline__legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .plan-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }

    .plan-card {
        grid-template-columns: auto minmax(0, 1fr) auto;
        padding: var(--s-5);
    }

    .plan-card__go { grid-column: auto; }
    .plan-card--compact { grid-template-columns: auto minmax(0, 1fr); }
    .plan-card--compact .plan-card__go { grid-column: 1 / -1; }
}

/* التابلت: الحصتين جنب بعض (الاثنين يمين والخميس شمال) والوحدات شبكة */
@media (min-width: 720px) {
    .plan-week__sessions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .plan-week__sessions > [data-dow='4'] { grid-column: 2; }
    .plan-week__sessions > [data-dow='1'] { grid-column: 1; }

    .plan-units {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
        margin-inline: 0;
        padding: 0;
        overflow: visible;
    }

    .plan-phase__head { grid-template-columns: auto minmax(0, 1fr) minmax(10rem, 14rem); }
    .plan-phase__progress { grid-column: auto; }
    .plan-phase-nav { flex-wrap: wrap; margin-inline: 0; padding-inline: 0; overflow: visible; }
}

@media (min-width: 900px) {
    .plan-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .plan-bar__inner {
        grid-template-columns: minmax(10rem, 1fr) auto auto;
        grid-template-areas: "progress filter now";
    }

    .plan-filter { overflow: visible; }
}

@media (min-width: 1024px) {
    .plan-hero { padding-block: var(--s-9) var(--s-9); }
    .plan-hero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: var(--s-8); }
    .plan-dash { grid-template-columns: minmax(0, 1fr); }
    .plan-timeline__legend { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .plan-timeline__legend li { grid-template-columns: auto minmax(0, 1fr); }
    .plan-timeline__dates { grid-column: 2; }

    /* الديسكتوب: عمود للأسبوع جنب الحصتين */
    .plan-week {
        grid-template-columns: 9rem minmax(0, 1fr);
        align-items: start;
    }

    .plan-week__label { flex-direction: column; align-items: flex-start; padding-top: .15rem; }
    .plan-week--band { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .plan-pulse,
    .plan-flag--today,
    .plan-check__input:checked + .plan-check__box,
    .plan-toast { animation: none; }

    .plan-ring__fill,
    .plan-bar__track i,
    .plan-unit__track i,
    .plan-phase__track i,
    .plan-check__box svg { transition: none; }

    .plan-confetti { display: none; }
}

@media print {
    .plan-bar, .plan-toast, .plan-guest, .plan-next__go, .plan-phase-nav { display: none !important; }
    .plan-hero { color: #000; background: none; }
    .plan-session { break-inside: avoid; box-shadow: none; }
}