/* =============================================================================
   Portal theme — lightweight brand token layer (Phase 1 quick win).
   Loaded after style.css so a few high-signal rules win. Intentionally light:
   brand variables + heading font + primary CTA + sidebar accent only. It does
   NOT rewrite the existing stylesheet, and visual rules are scoped to .bodyCpanel
   so the public site is unaffected. Plain CSS — no build step required.
   Brand palette from the client UI proposal.
   ========================================================================== */

:root {
    /* Canonical brand palette (client UI proposal). */
    --brand-navy:  #041735;
    --brand-green: #1BC175;
    --brand-blue:  #0485D4;
    --brand-white: #FFFFFF;

    /* Hover / pressed variants. */
    --brand-green-dark: #15a364;
    --brand-blue-dark:  #036fb0;
    --brand-navy-soft:  #06224d;   /* lighter navy used in hero gradients */

    /* Supporting surface + text tokens. Values mirror the hardcoded ones already
       used across this file so adopting the tokens is visually a no-op. */
    --surface:        #ffffff;     /* card / panel background */
    --surface-muted:  #f4f6f9;     /* table tint, inset blocks, alt sections */
    --border-soft:    #e6eaf0;     /* hairline borders on cards / rows */
    --text-main:      #1a2233;     /* primary body text */
    --text-muted:     #6b7787;     /* secondary text / notes */

    /* Shape + elevation. */
    --radius-card:    16px;        /* matches .homeCard */
    --radius-control: 10px;        /* matches .inputStyle / form controls */
    --shadow-card:    0 4px 18px rgba(4, 23, 53, .05);
}

/* Cairo for dashboard headings (font is loaded via head.blade.php). Fall back to
   the existing Tajawal stack so nothing regresses if Cairo fails to load. */
.bodyCpanel h1,
.bodyCpanel h2.title,
.bodyCpanel .titleUser,
.bodyCpanel .pageTitle {
    font-family: 'Cairo', 'Tajawal-Bold', 'Tajawal', sans-serif;
}

/* Primary call-to-action buttons → brand green. */
.bodyCpanel .btnForm,
.bodyCpanel .btnBouquet:last-child {
    background-color: var(--brand-green);
    border-color: var(--brand-green);
}
.bodyCpanel .btnForm:hover,
.bodyCpanel .btnBouquet:last-child:hover {
    background-color: var(--brand-green-dark);
    border-color: var(--brand-green-dark);
}

/* Sidebar active item → brand green accent (replaces the old blue rule). */
.bodyCpanel .menuCpanel .linksCpanel li a.active {
    border-right: 3px solid var(--brand-green);
}

/* ---- Welcome board + quick shortcuts (home tab quick win) ---- */
.portalWelcome {
    background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-soft) 100%);
    color: #fff;
    border-radius: 16px;
    padding: 24px 26px;
    margin-bottom: 22px;
    position: relative;
    overflow: hidden;
}
.portalWelcome::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(circle at 88% 20%, rgba(27,193,117,.22) 0, transparent 45%);
    pointer-events: none;
}
.portalWelcome__title { font-family: 'Cairo','Tajawal-Bold',sans-serif; font-size: 22px; font-weight: 700; margin: 0 0 6px; position: relative; }
.portalWelcome__sub { font-size: 14px; color: rgba(255,255,255,.78); margin: 0; position: relative; }

.portalShortcuts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 26px;
}
.portalShortcut {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    background: #fff; border: 1px solid #e6eaf0; border-radius: 14px;
    padding: 20px 14px; text-align: center; text-decoration: none;
    color: var(--brand-navy); font-weight: 700; font-size: 14px;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.portalShortcut:hover {
    box-shadow: 0 8px 24px rgba(4,23,53,.10);
    transform: translateY(-2px);
    border-color: #d6dde7;
    color: var(--brand-navy);
    text-decoration: none;
}
.portalShortcut i { font-size: 26px; color: var(--brand-green); }
.portalShortcut:nth-child(2n) i { color: var(--brand-blue); }

@media (max-width: 767px) {
    .portalShortcuts { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================================
   SPRINT 2A — high-impact visual alignment (dashboard-scoped, no DB/route/JS).
   All rules below are scoped to .bodyCpanel (or .bodyCpanel .new-footer) so the
   public site is untouched until a public-site reskin is confirmed.
   ========================================================================== */

/* ---- Cairo rollout across the dashboard ----------------------------------
   Base font on the dashboard body cascades to sidebar, cards, forms, tables.
   Icon fonts are unaffected: FontAwesome sets `font:…FontAwesome` directly on
   .fa, and Flaticon glyphs live on ::before/::after with font-family:Flaticon. */
.bodyCpanel,
.bodyCpanel input,
.bodyCpanel select,
.bodyCpanel textarea,
.bodyCpanel button,
.bodyCpanel table,
.bodyCpanel .linksCpanel li a,
.bodyCpanel .headProfile .titleUser,
.bodyCpanel h2.title,
.bodyCpanel h3 {
    font-family: 'Cairo', 'Tajawal', 'Tajawal-Bold', sans-serif;
}

/* ---- 1) Footer → brand navy (dashboard only) ------------------------------ */
.bodyCpanel .new-footer {
    background-color: var(--brand-navy);
    border-top: 3px solid var(--brand-green);
}
.bodyCpanel .new-footer h3 { color: var(--brand-green); }
.bodyCpanel .new-footer a { color: rgba(255, 255, 255, .82); }
.bodyCpanel .new-footer a:hover { color: #fff; }

/* ---- 2) Top bar → navy branded ------------------------------------------- */
.bodyCpanel .headProfile {
    background-color: var(--brand-navy);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.bodyCpanel .headProfile .detailsUser .titleUser { color: #fff; }
.bodyCpanel .headProfile .detailsUser .desc { color: rgba(255, 255, 255, .65); }
.bodyCpanel .headProfile .detailsUser .uploadImage img { border: 2px solid rgba(255, 255, 255, .25); }
.bodyCpanel .headProfile .detailsUser .uploadImage .fileImage i {
    background-color: var(--brand-green);
    color: #fff;
    border-color: var(--brand-navy);
}
/* icon buttons (settings / bell / wishlist): translucent white instead of light blue */
.bodyCpanel .headProfile .settings .parentLi .iconStyle {
    background-color: rgba(255, 255, 255, .10);
    color: #fff;
}
.bodyCpanel .headProfile .settings .parentLi .iconStyle:hover {
    background-color: rgba(255, 255, 255, .20);
}
/* notification count badge stays red — strong contrast on navy (unchanged) */
/* dropdown flyout remains a white popover with dark text (unchanged) */

/* ---- 3) Sidebar → align hardcoded #080B29 to brand navy ------------------- */
.bodyCpanel .menuCpanel { background-color: var(--brand-navy); }

/* ============================================================================
   Student Home redesign (Sprint 2A Priority 2) — existing data only.
   ========================================================================== */

/* Section A — welcome hero */
.homeHero {
    background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-soft) 60%, #073061 100%);
    color: #fff;
    border-radius: 18px;
    padding: 30px 32px;
    margin-bottom: 22px;
    position: relative;
    overflow: hidden;
}
.homeHero::after {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 90% 12%, rgba(27,193,117,.28) 0, transparent 42%),
        radial-gradient(circle at 8% 95%, rgba(4,133,212,.20) 0, transparent 40%);
    pointer-events: none;
}
.homeHero__greet { position: relative; font-size: 14px; color: rgba(255,255,255,.72); margin: 0 0 4px; }
.homeHero__greet strong { color: var(--brand-green); font-weight: 700; }
.homeHero__title { position: relative; font-size: 24px; font-weight: 700; margin: 0 0 6px; line-height: 1.5; }
.homeHero__sub { position: relative; font-size: 14px; color: rgba(255,255,255,.78); margin: 0 0 18px; }
.homeHero__actions { position: relative; margin: 0 0 18px; }
.homeHero__cta {
    display: inline-block; background: var(--brand-green); color: #fff !important;
    font-weight: 700; font-size: 14px; padding: 11px 26px; border-radius: 12px;
    text-decoration: none; transition: background .15s ease, transform .1s ease;
}
.homeHero__cta:hover { background: var(--brand-green-dark); text-decoration: none; color: #fff !important; }
.homeHero__cta:active { transform: translateY(1px); }
.homeHero__chips { position: relative; display: flex; flex-wrap: wrap; gap: 12px; }
.homeChip {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px; padding: 10px 16px;
}
.homeChip__num { font-size: 22px; font-weight: 700; line-height: 1; }
.homeChip__num--green { color: var(--brand-green); }
.homeChip__num--blue { color: #4aa8e8; }
.homeChip__label { font-size: 12px; color: rgba(255,255,255,.7); }

/* Shared modern card */
.homeCard {
    background: #fff;
    border: 1px solid #e6eaf0;
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: 0 4px 18px rgba(4,23,53,.05);
    margin-bottom: 22px;
}
.homeCard__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.homeCard__title { font-family: 'Cairo','Tajawal-Bold',sans-serif; font-size: 17px; font-weight: 700; color: var(--brand-navy); margin: 0; }
.homeCard__title i { color: var(--brand-green); margin-left: 8px; }
.homeCard__link { font-size: 13px; font-weight: 600; color: var(--brand-blue); text-decoration: none; }
.homeCard__link:hover { color: var(--brand-blue-dark); text-decoration: none; }

/* Two-column grid for progress + activity */
.homeGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.homeGrid > .homeCard { margin-bottom: 0; }

/* Section C — progress (wraps the reused .rateBody markup) */
.homeCard .rateBody .progressTitle { display: block; font-size: 14px; color: #344256; margin: 14px 0 6px; font-weight: 600; }
.homeCard .rateBody .progress { background: #eef2f8; border-radius: 8px; height: 14px; overflow: hidden; margin-bottom: 4px; box-shadow: none; }
.homeCard .rateBody .progress .line { height: 14px; border-radius: 8px; float: right; position: relative; background: var(--brand-green); min-width: 26px; transition: width .4s ease; }
.homeCard .rateBody .progress:nth-of-type(2n) .line { background: var(--brand-blue); }
.homeCard .rateBody .progress .numb { position: static; float: left; font-size: 11px; color: #fff; padding: 0 8px; line-height: 14px; }
.homeProgress__empty, .homeActivity__empty {
    text-align: center; color: #8893a3; font-size: 14px; padding: 26px 10px;
}
.homeProgress__empty i, .homeActivity__empty i { display: block; font-size: 30px; color: #cfd6e0; margin-bottom: 10px; }

/* Section D — recent activity / notifications */
.homeActivity { list-style: none; margin: 0; padding: 0; }
.homeActivity__item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f0f4f8; }
.homeActivity__item:last-child { border-bottom: 0; }
.homeActivity__ic {
    flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px;
    background: #e8fbf3; color: var(--brand-green);
    display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.homeActivity__body { min-width: 0; }
.homeActivity__title { font-size: 14px; font-weight: 600; color: var(--brand-navy); margin: 0 0 2px; }
.homeActivity__msg { font-size: 13px; color: #6b7787; margin: 0; line-height: 1.6; }

/* Section E — info cards (referral / share / promo) reorganized */
.homeInfoGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.homeInfoGrid .homeCard { margin-bottom: 0; }
.homeReferral__link {
    display: flex; align-items: center; gap: 10px; justify-content: space-between;
    background: #f4f6f9; border: 1px solid #e6eaf0; border-radius: 10px; padding: 10px 14px;
}
.homeReferral__url { font-size: 13px; color: #344256; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.homeReferral__copy { flex: 0 0 auto; background: var(--brand-green); color: #fff; border: 0; border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.homeReferral__copy:hover { background: var(--brand-green-dark); }

@media (max-width: 991px) {
    .homeGrid, .homeInfoGrid { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
    .homeHero { padding: 22px 20px; }
    .homeHero__title { font-size: 20px; }
    .homeChip { padding: 8px 12px; }
}

/* ============================================================================
   PHASE 0 + PHASE 1 — shared foundation pass (Student + Teacher dashboard).
   Dashboard-scoped (.bodyCpanel) only. Two kinds of rules below:
     (a) Reusable opt-in components (.eg-card / .eg-btn / .eg-table / .eg-empty)
         — defined here, applied to markup later page-by-page (Phase 2). Adding
         the class to a page is the only thing that activates them.
     (b) Safe global polish — additive form focus/label/validation styling that
         cannot change layout. No markup, DB, route, or JS changes.
   ========================================================================== */

/* ---- Cairo: supplementary explicit targets ---------------------------------
   The body-level Cairo rule already cascades to most content. These selectors
   cover framework widgets (Bootstrap, jQuery-UI) that set their own font-family
   and would otherwise keep their default stack. Font-family only — icon fonts
   (FontAwesome `.fa`, Flaticon `::before`) declare their own family at higher
   specificity and are untouched. */
.bodyCpanel .btn,
.bodyCpanel .label,
.bodyCpanel .titleForm,
.bodyCpanel .modal,
.bodyCpanel .modal-title,
.bodyCpanel .dropdown-menu,
.bodyCpanel .ui-selectmenu-button,
.bodyCpanel .ui-selectmenu-menu,
.bodyCpanel .eg-card,
.bodyCpanel .eg-btn,
.bodyCpanel .eg-table {
    font-family: 'Cairo', 'Tajawal', 'Tajawal-Bold', sans-serif;
}

/* ---- (a) Reusable card -----------------------------------------------------
   Canonical card per the reference: white surface, hairline border, soft
   shadow, generous radius. Mirrors the proven .homeCard so the two read alike. */
.bodyCpanel .eg-card {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 22px 24px;
    margin-bottom: 22px;
}
.bodyCpanel .eg-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-soft);
}
.bodyCpanel .eg-card__title {
    font-family: 'Cairo', 'Tajawal-Bold', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--brand-navy);
    margin: 0;
}
.bodyCpanel .eg-card__title i { color: var(--brand-green); margin-left: 8px; }
.bodyCpanel .eg-card__body { color: var(--text-main); }

/* ---- (a) Reusable buttons --------------------------------------------------
   Primary = green, Secondary = blue, Outline = navy outline (neutral). */
.bodyCpanel .eg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1.5px solid transparent;
    border-radius: var(--radius-control);
    padding: 10px 24px;
    font-family: 'Cairo', 'Tajawal', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .1s ease;
}
.bodyCpanel .eg-btn:active { transform: translateY(1px); }
.bodyCpanel .eg-btn:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }

.bodyCpanel .eg-btn--primary {
    background: var(--brand-green);
    border-color: var(--brand-green);
    color: #fff;
}
.bodyCpanel .eg-btn--primary:hover {
    background: var(--brand-green-dark);
    border-color: var(--brand-green-dark);
    color: #fff;
    text-decoration: none;
}
.bodyCpanel .eg-btn--secondary {
    background: var(--brand-blue);
    border-color: var(--brand-blue);
    color: #fff;
}
.bodyCpanel .eg-btn--secondary:hover {
    background: var(--brand-blue-dark);
    border-color: var(--brand-blue-dark);
    color: #fff;
    text-decoration: none;
}
.bodyCpanel .eg-btn--outline {
    background: transparent;
    border-color: var(--brand-navy);
    color: var(--brand-navy);
}
.bodyCpanel .eg-btn--outline:hover {
    background: var(--brand-navy);
    color: #fff;
    text-decoration: none;
}

/* ---- (b) Form polish — safe, additive, global within .bodyCpanel -----------
   Labels in these forms are <h2 class="titleForm">, not <label> (the <label>
   elements carry the select-arrow icon), so label styling targets .titleForm
   only. Focus rings are net-new — the legacy inputs had none. */
.bodyCpanel .titleForm {
    font-size: 14px;
    font-weight: 700;
    color: var(--brand-navy);
}
.bodyCpanel .inputStyle:focus,
.bodyCpanel textarea:focus,
.bodyCpanel .selectStyle .selectmenu:focus {
    outline: none;
    border: 1px solid var(--brand-green);
    box-shadow: 0 0 0 3px rgba(27, 193, 117, .15);
}
/* jQuery-UI selectmenu button (renders in place of <select>) */
.bodyCpanel .ui-selectmenu-button.ui-button:focus,
.bodyCpanel .ui-selectmenu-button.ui-state-focus {
    border-color: var(--brand-green);
    box-shadow: 0 0 0 3px rgba(27, 193, 117, .15);
}
/* Validation (Bootstrap-style classes already emitted on some pages) */
.bodyCpanel .is-invalid,
.bodyCpanel input.is-invalid,
.bodyCpanel .inputStyle.is-invalid {
    border: 1px solid #e3342f !important;
    box-shadow: 0 0 0 3px rgba(227, 52, 47, .12);
}
.bodyCpanel .invalid-feedback {
    color: #e3342f;
    font-size: 13px;
    margin-top: 6px;
    display: block;
}

/* ---- (a) Reusable data table ----------------------------------------------
   Opt-in: add class="eg-table" to a <table> for the canonical navy-header look.
   Existing tables keep their current styling until adopted page-by-page. */
.bodyCpanel .eg-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    overflow: hidden;
}
.bodyCpanel .eg-table thead th {
    background: var(--brand-navy);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-align: right;
    padding: 12px 16px;
    white-space: nowrap;
}
.bodyCpanel .eg-table tbody td {
    padding: 12px 16px;
    font-size: 14px;
    color: var(--text-main);
    border-top: 1px solid var(--border-soft);
    vertical-align: middle;
}
.bodyCpanel .eg-table tbody tr:nth-child(2n) { background: var(--surface-muted); }
.bodyCpanel .eg-table tbody tr:hover { background: #eef4fb; }

/* Inline row-action buttons inside tables (opt-in) */
.bodyCpanel .eg-table__actions { display: inline-flex; gap: 8px; }
.bodyCpanel .eg-action {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-muted);
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.bodyCpanel .eg-action:hover { border-color: var(--brand-blue); color: var(--brand-blue); }
.bodyCpanel .eg-action--danger:hover { border-color: #e3342f; color: #e3342f; }

/* ---- (a) Reusable empty state ---------------------------------------------- */
.bodyCpanel .eg-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    padding: 36px 16px;
}
.bodyCpanel .eg-empty i { display: block; font-size: 34px; color: #cfd6e0; margin-bottom: 12px; }
.bodyCpanel .eg-empty__title { font-weight: 700; color: var(--brand-navy); margin: 0 0 4px; }

/* ---- Phase 2D — align the legacy .profileStyle cards to the unified card shape.
   Same surface as .eg-card (radius / soft shadow / hairline border) without
   touching the page markup; loads after style.css so these three props win. */
.bodyCpanel .profile .profileStyle {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

/* ============================================================================
   PHASE 3 (gap-report execution) — global retrofit of legacy dashboard classes
   to the canonical look, scoped to .bodyCpanel. No markup changes: one rule
   aligns many pages at once. Tables get navy headers; legacy card families get
   the eg-card surface (additive shape props); legacy CTAs go brand-green.
   ========================================================================== */

/* Legacy data tables (.tableQues) + bootstrap .table → canonical navy header. */
.bodyCpanel .tableQues thead th,
.bodyCpanel .tableQues .head,
.bodyCpanel .tableQues .head th,
.bodyCpanel .tableQues .head td,
.bodyCpanel .table thead th {
    background-color: var(--brand-navy);
    color: #fff;
    font-weight: 600;
    border-color: rgba(255, 255, 255, .12);
}
.bodyCpanel .tableQues .head a,
.bodyCpanel .table thead th a { color: #fff; }

/* Legacy card families → unified eg-card surface (additive: shape only, so
   existing backgrounds/padding/layout are preserved). */
.bodyCpanel .testStyle,
.bodyCpanel .askDiv,
.bodyCpanel .boxStyle,
.bodyCpanel .secondaryPlan,
.bodyCpanel .courseStyle {
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-soft);
}

/* Packages subscribe CTA (.btnPlan, legacy #3A8FFE) → brand green primary. */
.bodyCpanel .btnPlan {
    background-color: var(--brand-green);
    border-color: var(--brand-green);
    color: #fff;
}
.bodyCpanel .btnPlan:hover {
    background-color: var(--brand-green-dark);
    border-color: var(--brand-green-dark);
    color: #fff;
}

/* WAVE0 ======================================================================
   WAVE 0 — high-visibility portal consistency fixes (2026-06-09).
   Visual-only, dashboard-scoped (.bodyCpanel). Every selector adds .bodyCpanel
   (+1 class) over the legacy originals in style.css, so it wins on specificity
   regardless of load order. Companion blade edits: community list/category-list
   empty-state swap, and courses/landing icon + CTA markup.
   ========================================================================== */

/* (1) Footer "الباقات" links carry .btnPlan; the Phase 3 .btnPlan rule paints
   them solid green, turning footer links into green blocks on every portal page.
   Reset them (incl. :hover) to plain footer links. */
.bodyCpanel .new-footer .btnPlan,
.bodyCpanel .new-footer .btnPlan:hover {
    display: inline;
    background-color: transparent;
    border: 0;
    padding: 0;
    border-radius: 0;
    font-weight: inherit;
    color: rgba(255, 255, 255, .82);
}
.bodyCpanel .new-footer .btnPlan:hover { color: #fff; }

/* (2) Blue accent leakage → brand green for icon badges + the points stat.
   Plain text links stay brand-blue (on-system); only mis-branded accents change. */
.bodyCpanel .profile .profileStyle .title i {
    background-color: #e8fbf3;      /* mirrors .homeActivity__ic green tint */
    color: var(--brand-green);
}
.bodyCpanel .rewards .points .pointsText {
    color: var(--brand-green);
}

/* (3) Highlighted package card kept legacy blue (#3A8FFE). Re-brand to a navy
   body + green "most-popular" ribbon + green CTA. The body text is already #fff,
   so navy keeps the contrast. */
.bodyCpanel .primaryPlanWraper .secondaryPlan:nth-of-type(2) .prePlan {
    background-color: var(--brand-green);
}
.bodyCpanel .primaryPlanWraper .secondaryPlan:nth-of-type(2) .planHead,
.bodyCpanel .primaryPlanWraper .secondaryPlan:nth-of-type(2):hover .planHead {
    color: var(--brand-navy);
}
.bodyCpanel .primaryPlanWraper .secondaryPlan:nth-of-type(2) .planBody {
    background-color: var(--brand-navy);
}
.bodyCpanel .primaryPlanWraper .secondaryPlan:nth-of-type(2) .btnPlan {
    background-color: var(--brand-green);
    color: #fff;
}

/* (5) Student Courses hub (/cp/courses) — the bare .item tiles become
   icon + CTA cards that read like the home shortcuts. Blade adds the icon/CTA
   spans; ancestor .AdvCourse keeps this off other .item uses. */
.bodyCpanel .AdvCourse { padding-top: 24px; }
.bodyCpanel .AdvCourse .item {
    min-height: 232px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.bodyCpanel .AdvCourse .item:hover {
    box-shadow: 0 10px 28px rgba(4, 23, 53, .12);
    transform: translateY(-3px);
    border-color: #d6dde7;
}
.bodyCpanel .AdvCourse .item .details { padding: 30px 22px 26px; }
.bodyCpanel .AdvCourse .item .details .courseHubIcon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 60px; height: 60px; margin-bottom: 14px;
    border-radius: 16px;
    background: #e8fbf3; color: var(--brand-green);
    font-size: 28px;
}
.bodyCpanel .AdvCourse .col-md-4:nth-child(2) .courseHubIcon {
    background: #e7f3fc; color: var(--brand-blue);
}
.bodyCpanel .AdvCourse .item .details .title {
    font-size: 20px; color: var(--brand-navy); display: block; margin-bottom: 8px;
}
.bodyCpanel .AdvCourse .item .details p {
    font-size: 14px; color: var(--text-muted); margin-bottom: 18px; line-height: 1.7;
}
.bodyCpanel .courseHubCta {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--brand-green); font-weight: 700; font-size: 14px;
}
.bodyCpanel .AdvCourse .item:hover .courseHubCta { gap: 10px; }

/* PHASE 1 — frontend consistency quick wins (2026-06-14). Visual-only, .bodyCpanel.
   ========================================================================== */

/* (a) Course-card CTA (.btnItem on live / private course lists, legacy #3A8FFE)
   → brand green, the portal's only non-green primary CTA. The base rule
   (.AdvCourse .item .details .btnItem, style.css:4156) is 4 classes, so the
   override MUST repeat that chain (5 classes) to win — a bare .bodyCpanel .btnItem
   would lose on specificity and stay blue. */
.bodyCpanel .AdvCourse .item .details .btnItem {
    background-color: var(--brand-green);
}
.bodyCpanel .AdvCourse .item .details .btnItem:hover {
    background-color: var(--brand-green-dark);
}

/* (b) Wide legacy .tableQues tables (teacher questions, ask-teacher list,
   community list/category) clip horizontally on phones with no scroll. Turn the
   existing .tableDiv wrapper into a horizontal-scroll container instead of
   redesigning the tables. Higher specificity (0,3,0) than the base
   .pilotDetails .tableDiv{overflow:hidden} (0,2,0) so it reliably wins; only
   overflow-x is changed, so the rounded corners / vertical clipping are kept. */
.bodyCpanel .pilotDetails .tableDiv {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.bodyCpanel .pilotDetails .tableQues {
    min-width: 640px;
}

/* PHASE 3 — remaining legacy portal polish (2026-06-15). Visual-only, .bodyCpanel.
   ========================================================================== */

/* (a) Bank category / subject / skill navigation tiles — the .askDiv cards that
   carry a logo (.imgDiv) + share icon (used by /student/bank, bank subjects,
   skills, challenges, exam-free). They already have the eg-card shape; add a
   hover lift + a branded share affordance so they read as interactive nav cards.
   The :has(.imgDiv) gate keeps this OFF plain .askDiv intro/form cards (which
   have no logo). :has() degrades gracefully — no lift on old browsers, no break. */
.bodyCpanel .askTeacher .askDiv:has(.imgDiv) {
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.bodyCpanel .askTeacher .askDiv:has(.imgDiv):hover {
    box-shadow: 0 10px 28px rgba(4, 23, 53, .12);
    transform: translateY(-3px);
    border-color: #d6dde7;
}
.bodyCpanel .askDiv .details .flaticon-share.icon {
    color: var(--brand-blue);
    transition: color .15s ease;
}
.bodyCpanel .askDiv .details .flaticon-share.icon:hover {
    color: var(--brand-blue-dark);
}

/* (b) Status badges: Bootstrap .label squares (teacher questions/courses status)
   → soft brand pills, so answered/pending and published/draft read like the
   portal's other pill chrome instead of legacy Bootstrap labels. */
.bodyCpanel .label.label-success,
.bodyCpanel .label.label-warning,
.bodyCpanel .label.label-danger,
.bodyCpanel .label.label-info {
    display: inline-block;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
}
.bodyCpanel .label.label-success { background: #e8fbf3; color: var(--brand-green-dark); }
.bodyCpanel .label.label-warning { background: #fff7e6; color: #b7791f; }
.bodyCpanel .label.label-danger  { background: #fdecea; color: #c0392b; }
.bodyCpanel .label.label-info    { background: #e7f3fc; color: var(--brand-blue-dark); }

/* (c) Bootstrap alerts on the dashboard (teacher profile-edit status, flash
   messages) → soft rounded brand tints instead of the legacy Bootstrap blocks. */
.bodyCpanel .alert {
    border-radius: 12px;
    border: 1px solid transparent;
    padding: 12px 16px;
}
.bodyCpanel .alert-success { background: #e8fbf3; border-color: #bff0d8; color: var(--brand-green-dark); }
.bodyCpanel .alert-info    { background: #e7f3fc; border-color: #cbe6fa; color: var(--brand-blue-dark); }
.bodyCpanel .alert-warning { background: #fff7e6; border-color: #ffe7b3; color: #b7791f; }
.bodyCpanel .alert-danger  { background: #fdecea; border-color: #f7c6c0; color: #c0392b; }

/* ============================================================================
   QUESTION BANK — skill question list (/student/bank/{c}/subjects/{s}/{skill}).
   Professional card layout on a centred reading column, replacing the legacy
   .tableQues table so editor-authored question HTML (text, equation images,
   math sub/sup, video explanations) renders readably at every width.
   Dashboard-scoped (.bodyCpanel); brand tokens only; RTL-native.
   ========================================================================== */
.bodyCpanel .eg-bank {
    max-width: 1080px;
    margin-inline: auto;
    padding: 4px;
}

/* ---- Back link + header band ---- */
.bodyCpanel .eg-bank__back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 14px;
    transition: color .15s ease;
}
.bodyCpanel .eg-bank__back:hover { color: var(--brand-blue); text-decoration: none; }
.bodyCpanel .eg-bank__back:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; border-radius: 4px; }

.bodyCpanel .eg-bank__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, var(--brand-navy), var(--brand-navy-soft));
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 24px 28px;
    margin-bottom: 24px;
}
.bodyCpanel .eg-bank__head-main { display: flex; align-items: center; gap: 16px; min-width: 0; }
.bodyCpanel .eg-bank__icon {
    flex: 0 0 auto;
    width: 52px; height: 52px;
    border-radius: 14px;
    background: rgba(27, 193, 117, .16);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
}
.bodyCpanel .eg-bank__icon i { color: var(--brand-green); }
.bodyCpanel .eg-bank__title {
    font-family: 'Cairo', 'Tajawal-Bold', sans-serif;
    font-size: 24px; font-weight: 700; color: #fff; margin: 0 0 4px;
    overflow-wrap: anywhere;
}
.bodyCpanel .eg-bank__sub { color: rgba(255, 255, 255, .72); font-size: 14px; margin: 0; }
.bodyCpanel .eg-bank__count {
    flex: 0 0 auto;
    background: var(--brand-green);
    color: #fff;
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 14px; font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(27, 193, 117, .30);
}

/* ---- Question card ---- */
.bodyCpanel .eg-qcard {
    display: flex;
    gap: 18px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 24px 26px;
    margin-bottom: 18px;
    transition: box-shadow .18s ease, border-color .18s ease, transform .12s ease;
}
.bodyCpanel .eg-qcard:hover {
    box-shadow: 0 10px 30px rgba(4, 23, 53, .10);
    border-color: #d2dbe9;
    transform: translateY(-2px);
}
.bodyCpanel .eg-qcard__num {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-navy));
    color: #fff; font-weight: 700; font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px rgba(4, 23, 53, .18);
}
.bodyCpanel .eg-qcard__main { flex: 1 1 auto; min-width: 0; }

/* Sanitized question body — keep images/tables/video inside the card at any width. */
.bodyCpanel .eg-qcard__q {
    color: var(--text-main);
    font-size: 17px;
    line-height: 2;
    font-weight: 600;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.bodyCpanel .eg-qcard__q p:last-child,
.bodyCpanel .eg-qcard__value p:last-child { margin-bottom: 0; }
.bodyCpanel .eg-qcard__q img,
.bodyCpanel .eg-qcard__value img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}
.bodyCpanel .eg-qcard__value iframe {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 10px;
}
.bodyCpanel .eg-qcard__q table,
.bodyCpanel .eg-qcard__value table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
}
.bodyCpanel .eg-qcard__q td,
.bodyCpanel .eg-qcard__q th,
.bodyCpanel .eg-qcard__value td,
.bodyCpanel .eg-qcard__value th { border: 1px solid var(--border-soft); padding: 6px 10px; }

/* ---- Actions row ---- */
.bodyCpanel .eg-qcard__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}
/* Reveal = solid blue CTA; turns navy when open. */
.bodyCpanel .eg-qcard__toggle {
    padding: 10px 22px;
    font-size: 14px;
    background: var(--brand-blue);
    border-color: var(--brand-blue);
    color: #fff;
}
.bodyCpanel .eg-qcard__toggle:hover {
    background: var(--brand-blue-dark);
    border-color: var(--brand-blue-dark);
    color: #fff;
}
.bodyCpanel .eg-qcard__toggle.is-open {
    background: var(--brand-navy);
    border-color: var(--brand-navy);
    color: #fff;
}
/* Save = neutral pill; green when saved. */
.bodyCpanel .eg-qcard__save {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: transparent;
    border: 1.5px solid var(--border-soft);
    border-radius: var(--radius-control);
    color: var(--text-muted);
    padding: 10px 18px;
    font-family: 'Cairo', 'Tajawal', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.bodyCpanel .eg-qcard__save:hover { border-color: var(--brand-green); color: var(--brand-green-dark); }
.bodyCpanel .eg-qcard__save:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
.bodyCpanel .eg-qcard__save.is-saved {
    background: #e8fbf3;
    border-color: var(--brand-green);
    color: var(--brand-green-dark);
}

/* ---- Revealed answer + explanation ---- */
.bodyCpanel .eg-qcard__answer {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px dashed var(--border-soft);
}
.bodyCpanel .eg-qcard__answer[hidden] { display: none; }
.bodyCpanel .eg-qcard__answer-row { margin-bottom: 16px; }
.bodyCpanel .eg-qcard__answer-row:last-child { margin-bottom: 0; }
.bodyCpanel .eg-qcard__label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    color: var(--brand-navy);
    margin-bottom: 8px;
}
.bodyCpanel .eg-qcard__label i { color: var(--brand-green); }
.bodyCpanel .eg-qcard__value {
    color: var(--text-main);
    font-size: 15px;
    line-height: 1.9;
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* Correct answer → green highlighted block. */
.bodyCpanel .eg-qcard__answer-row--correct .eg-qcard__value {
    background: #e8fbf3;
    border: 1px solid #bff0d8;
    border-inline-start: 4px solid var(--brand-green);
    border-radius: 10px;
    padding: 12px 16px;
    color: var(--brand-green-dark);
    font-weight: 600;
}
/* Explanation → muted block. */
.bodyCpanel .eg-qcard__expl {
    background: var(--surface-muted);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 14px 16px;
}
.bodyCpanel .eg-qcard__muted { color: var(--text-muted); font-style: italic; }

/* ---- Pagination (brand) ---- */
.bodyCpanel .eg-bank .pagiDiv { margin-top: 26px; }
.bodyCpanel .eg-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
}
.bodyCpanel .eg-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 13px;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text-main);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.bodyCpanel .eg-pagination__link:hover { border-color: var(--brand-blue); color: var(--brand-blue); text-decoration: none; }
.bodyCpanel .eg-pagination__link:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
.bodyCpanel .eg-pagination__link.is-active {
    background: var(--brand-navy);
    border-color: var(--brand-navy);
    color: #fff;
}
.bodyCpanel .eg-pagination__link.is-disabled { color: #c2cad6; background: var(--surface-muted); cursor: default; }
.bodyCpanel .eg-pagination__dots { display: inline-flex; align-items: center; padding: 0 4px; color: var(--text-muted); }

/* ---- Mobile ---- */
@media (max-width: 575px) {
    .bodyCpanel .eg-bank__head { padding: 18px; }
    .bodyCpanel .eg-bank__icon { width: 44px; height: 44px; font-size: 18px; }
    .bodyCpanel .eg-bank__title { font-size: 19px; }
    .bodyCpanel .eg-bank__count { font-size: 13px; padding: 6px 14px; }
    .bodyCpanel .eg-qcard { padding: 16px; gap: 12px; }
    .bodyCpanel .eg-qcard__num { width: 34px; height: 34px; font-size: 14px; border-radius: 10px; }
    .bodyCpanel .eg-qcard__q { font-size: 15px; line-height: 1.9; }
    .bodyCpanel .eg-qcard__actions .eg-btn,
    .bodyCpanel .eg-qcard__actions .eg-qcard__save { flex: 1 1 auto; justify-content: center; }
    .bodyCpanel .eg-pagination__link { min-width: 36px; height: 36px; }
}

/* ============================================================================
   STUDENT LEARNING JOURNEY — UI consistency sprint.
   Unifies the start/bank landing tiles, exam lists, runtime (study/exam),
   results and wishlist onto the same .eg-bank reading column + .eg-bank__head
   band + brand cards/buttons/empty/pagination established by the question bank.
   Dashboard-scoped (.bodyCpanel); brand tokens only; RTL-native; additive —
   it never renames the JS hook classes (.skl/.answer/.active/.getNext/etc.).
   ========================================================================== */

/* ---- Breadcrumb (shared partial upgrades every page at once) ---- */
.bodyCpanel .eg-breadcrumb {
    max-width: 1080px;
    margin: 16px auto 14px;   /* top gap so it sits clearly BELOW the portal top bar, not glued to it */
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}
.bodyCpanel .eg-breadcrumb li { display: inline-flex; align-items: center; gap: 6px; }
.bodyCpanel .eg-breadcrumb li:not(:last-child)::after {
    content: "\f104"; /* fa-angle-left (RTL forward) */
    font-family: FontAwesome;
    color: #c2cad6;
    font-size: 12px;
    margin-inline-start: 6px;
}
.bodyCpanel .eg-breadcrumb a { color: #475569; text-decoration: none; font-weight: 600; transition: color .15s ease; }
.bodyCpanel .eg-breadcrumb a:hover { color: var(--brand-blue); text-decoration: none; }
.bodyCpanel .eg-breadcrumb .is-current { color: var(--brand-navy); font-weight: 800; }
/* Reset legacy .breadCpanel chrome on the shared partial (it keeps both classes
   so other legacy selectors still resolve): drop the white box + the old "/"
   separator so only the new flat arrow separator shows. */
.bodyCpanel .eg-breadcrumb { background: transparent; box-shadow: none; }
.bodyCpanel .eg-breadcrumb li::before { content: none; }

/* ---- Unified breadcrumb base — NOT scoped to .bodyCpanel ----
   The one semantic component (<nav><ol class="breadCpanel eg-breadcrumb">) renders
   on public + auth surfaces too. These rules give those surfaces the same flat,
   RTL arrow style and neutralise the legacy .breadCpanel white box + "/" separator
   (style.css) that would otherwise leak in outside the portal. Hex values mirror
   the portal tokens so it stays brand-consistent where the CSS vars aren't in scope. */
.eg-breadcrumb-nav { width: 100%; }
ol.eg-breadcrumb,
ul.eg-breadcrumb {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 14px;
    padding: 0;
    background: transparent;
    box-shadow: none;
    font-size: 14px;
}
.eg-breadcrumb li { display: inline-flex; align-items: center; gap: 6px; }
.eg-breadcrumb li::before { content: none !important; }            /* kill legacy "/" */
.eg-breadcrumb li:not(:last-child)::after {
    content: "\f104";                                              /* fa-angle-left = RTL forward */
    font-family: FontAwesome;
    color: #c2cad6;
    font-size: 12px;
    margin-inline-start: 6px;
}
.eg-breadcrumb a { color: #475569; text-decoration: none; font-weight: 600; transition: color .15s ease; }
.eg-breadcrumb a:hover { color: #0485d4; text-decoration: none; }
.eg-breadcrumb .is-current { color: #102a43; font-weight: 800; }

/* Hero variant — the SAME component on the dark public page-header banner
   (.Breadcrumb). White-on-dark, RTL chevron separator. Declared AFTER the flat
   base so it wins on the equal-specificity tie. The legacy `.Breadcrumb ul li`
   white styling targeted <ul>; the component now emits <ol class="eg-breadcrumb">,
   so these rules carry the banner styling forward. */
.eg-breadcrumb--hero { font-size: 15px; }
.eg-breadcrumb--hero a { color: #fff; font-weight: 600; }
.eg-breadcrumb--hero a:hover { color: #cfe6ff; }
.eg-breadcrumb--hero .is-current { color: #fff; opacity: .9; font-weight: 700; }
.eg-breadcrumb--hero li:not(:last-child)::after { color: rgba(255, 255, 255, .7); }

/* Foundation list/player: the breadcrumb lives INSIDE the centred content column (so
   it aligns with the cards/player). Trim the legacy minHeight600 top padding + the
   breadcrumb's own top margin so it sits ~18px below the top bar (matching
   /student/start) instead of in a large empty band. */
.bodyCpanel .eg-vids, .bodyCpanel .eg-lesson { padding-top: 18px; }
.bodyCpanel .eg-vids > .eg-breadcrumb-nav .eg-breadcrumb,
.bodyCpanel .eg-lesson > .eg-breadcrumb-nav .eg-breadcrumb { margin-top: 0; }

/* ---- Landing tile pages (categories / subjects / skills) ----
   Keep the legacy .askDiv tile markup (PHASE 3 hover-lift keys off it); only
   centre the column, standardise the tile image, and drop inline sizing. */
.bodyCpanel .eg-bank > .askTeacher.support { margin: 0; padding: 0; min-height: 0; }
.bodyCpanel .askTeacher .iconImg { width: 130px; height: 130px; object-fit: cover; }
@media (max-width: 575px) {
    .bodyCpanel .askTeacher .iconImg { width: 96px; height: 96px; }
}

/* ---- Exam list card (trial exams + my exams) ---- */
.bodyCpanel .eg-examcard {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-inline-start: 4px solid var(--border-soft);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 20px 24px;
    margin-bottom: 16px;
    transition: box-shadow .18s ease, border-color .18s ease, transform .12s ease;
}
.bodyCpanel .eg-examcard:hover {
    box-shadow: 0 10px 30px rgba(4, 23, 53, .10);
    border-color: #d2dbe9;
    transform: translateY(-2px);
}
.bodyCpanel .eg-examcard.is-attempted { border-inline-start-color: var(--brand-green); }
.bodyCpanel .eg-examcard__main { flex: 1 1 320px; min-width: 0; }
.bodyCpanel .eg-examcard__title {
    display: inline-block;
    font-family: 'Cairo', 'Tajawal-Bold', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--brand-navy);
    text-decoration: none;
    margin-bottom: 10px;
    overflow-wrap: anywhere;
}
.bodyCpanel .eg-examcard__title:hover { color: var(--brand-blue); text-decoration: none; }
.bodyCpanel .eg-examcard__meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.bodyCpanel .eg-examcard__meta li { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 13px; }
.bodyCpanel .eg-examcard__meta li i { color: var(--brand-blue); }
.bodyCpanel .eg-examcard__actions { flex: 0 0 auto; display: flex; gap: 8px; }
/* W19.3 — visual-order fix (RTL flex): with __main growing, the trailing flex
   item closest to __main sits INNER and the last one sits OUTER. شرح (explain)
   must hold the OUTER slot so it lines up with one-button cards (which only have
   شرح); إعادة (actions) renders INNER, beside it. DOM order alone could not do
   this (W19.1's DOM swap left شرح inner); `order` is the correct, direction-safe
   lever. main = default 0 (innermost), actions = 1, explain = 2 (outermost). */
.bodyCpanel .eg-examcard__actions { order: 1; }
.bodyCpanel .eg-examcard__explain { order: 2; }
/* الشرح: per-exam explanation link, sits in the card's empty mid/end space. */
.bodyCpanel .eg-examcard__explain {
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 76px;
    padding: 10px 14px;
    text-decoration: none;
    color: var(--brand-blue);
    background: var(--surface-muted);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    transition: color .18s ease, background .18s ease, border-color .18s ease, transform .12s ease;
}
.bodyCpanel .eg-examcard__explain i { font-size: 22px; line-height: 1; }
.bodyCpanel .eg-examcard__explain span { font-size: 12px; font-weight: 700; font-family: 'Cairo', 'Tajawal-Bold', sans-serif; }
.bodyCpanel .eg-examcard__explain:hover,
.bodyCpanel .eg-examcard__explain:focus-visible {
    color: #fff;
    background: var(--brand-blue);
    border-color: var(--brand-blue);
    text-decoration: none;
    transform: translateY(-1px);
}
.bodyCpanel .eg-empty .eg-btn { margin-top: 14px; }

/* ---- Runtime quiz (study + exam + single-question review) ----
   .eg-quiz wraps the legacy .quesPage. All inner selectors target the
   JS-injected legacy markup (.answers/.answer/.titleQues/#stopTimer/...) by
   their existing class names — nothing is renamed, so the runtime JS is intact.
   .eg-quiz--review pre-highlights the correct answer (green); plain .eg-quiz is
   the "taking" mode where .active = the student's current selection (blue). */
.bodyCpanel .quesPage.eg-quiz { max-width: 1080px; margin-inline: auto; padding: 4px; }

.bodyCpanel .eg-quiz .headQues {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 18px;
}
.bodyCpanel .eg-quiz .numbOfQ {
    display: inline-flex; align-items: center;
    background: var(--surface-muted); color: var(--brand-navy);
    border: 1px solid var(--border-soft); border-radius: 999px;
    padding: 6px 16px; font-size: 13px; font-weight: 700;
}
.bodyCpanel .eg-quiz .btnsHead { display: inline-flex; align-items: center; gap: 10px; }
.bodyCpanel .eg-quiz #RenderQuestion .titleHead { display: none; }

/* Question text + media */
.bodyCpanel .eg-quiz .titleQues {
    font-family: 'Cairo', 'Tajawal-Bold', sans-serif;
    font-size: 18px; font-weight: 700; color: var(--brand-navy);
    line-height: 2; margin: 0 0 6px; display: block; overflow-wrap: anywhere;
}
.bodyCpanel .eg-quiz .titleQues > i.flaticon-copy { display: none; }
.bodyCpanel .eg-quiz .titleQues img { max-width: 100%; height: auto; border-radius: 8px; }
.bodyCpanel .eg-quiz .titleQues table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.bodyCpanel .eg-quiz .titleQues td, .bodyCpanel .eg-quiz .titleQues th { border: 1px solid var(--border-soft); padding: 6px 10px; }
.bodyCpanel .eg-quiz .video-indicator { color: var(--brand-blue); margin-inline-start: 8px; }

.bodyCpanel .eg-quiz .QuestionAttachments {
    background: var(--surface-muted); border: 1px solid var(--border-soft);
    border-radius: 12px; padding: 14px 16px; margin-bottom: 16px;
}
.bodyCpanel .eg-quiz .QuestionAttachments .alert { margin-bottom: 8px; }

/* Answer options */
.bodyCpanel .eg-quiz .answers { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.bodyCpanel .eg-quiz .answer {
    display: flex; align-items: flex-start; gap: 12px;
    background: var(--surface); border: 1.5px solid var(--border-soft); border-radius: 14px;
    padding: 14px 18px; cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.bodyCpanel .eg-quiz .answer:hover { border-color: var(--brand-blue); background: #f4f9fe; }
.bodyCpanel .eg-quiz .answer:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
.bodyCpanel .eg-quiz .answer .title {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
    background: var(--surface-muted); color: var(--text-muted); font-weight: 700;
    display: flex; align-items: center; justify-content: center; font-size: 14px;
}
/* .content background is forced transparent so the legacy style.css teal fill
   (.answer.active .content) can't show through the brand highlight. */
.bodyCpanel .eg-quiz .answer .content,
.bodyCpanel .eg-quiz .answer.active .content { flex: 1 1 auto; background: transparent; color: var(--text-main); font-size: 15px; line-height: 1.8; padding-top: 3px; overflow-wrap: anywhere; }
.bodyCpanel .eg-quiz .answer .content img { max-width: 100%; height: auto; }
/* taking mode: current selection = blue */
.bodyCpanel .eg-quiz .answer.active { border-color: var(--brand-blue); background: #eaf4fd; }
.bodyCpanel .eg-quiz .answer.active .title { background: var(--brand-blue); color: #fff; }
.bodyCpanel .eg-quiz .answer.active .content { color: var(--brand-blue-dark); font-weight: 600; }
/* review mode: correct answer highlighted green, options not interactive */
.bodyCpanel .eg-quiz--review .answer { cursor: default; }
.bodyCpanel .eg-quiz--review .answer:hover { border-color: var(--border-soft); background: var(--surface); }
.bodyCpanel .eg-quiz--review .answer.active { border-color: var(--brand-green); background: #e8fbf3; }
.bodyCpanel .eg-quiz--review .answer.active .title { background: var(--brand-green); color: #fff; }
.bodyCpanel .eg-quiz--review .answer.active .content { color: var(--brand-green-dark); font-weight: 600; }
/* study "show the correct answer" highlight */
.bodyCpanel .eg-quiz .answer.blink_me { border-color: var(--brand-green); background: #e8fbf3; }
.bodyCpanel .eg-quiz .answer.blink_me .title { background: var(--brand-green); color: #fff; }

/* Nav row + legacy stop/wishlist control */
.bodyCpanel .eg-quiz .btnsForm { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.bodyCpanel .eg-quiz .getFinish { margin-left: 0; }
.bodyCpanel .eg-quiz #stopTimer {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1.5px solid var(--border-soft); border-radius: var(--radius-control);
    padding: 8px 14px; color: var(--text-muted); font-weight: 600; font-size: 13px; text-decoration: none;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.bodyCpanel .eg-quiz #stopTimer:hover { border-color: var(--brand-green); color: var(--brand-green-dark); text-decoration: none; }
.bodyCpanel .eg-quiz #stopTimer.active,
.bodyCpanel .eg-quiz #stopTimer.btn-success { background: #e8fbf3; border-color: var(--brand-green); color: var(--brand-green-dark); }
.bodyCpanel .eg-quiz #stopTimer.btn-warning { background: #fff7e6; border-color: #ffd98a; color: #b7791f; }

/* Timer pill in the exam head band */
.bodyCpanel .eg-quiz__timer { display: inline-flex; align-items: center; gap: 8px; }

/* Runtime feedback / success modals (study + exam) */
.bodyCpanel .modalQues .modal-dialog { max-width: 600px; }
.bodyCpanel .modalQues .modal-content {
    background: var(--surface); border: 0; border-radius: var(--radius-card);
    box-shadow: 0 24px 60px rgba(4, 23, 53, .28); overflow: hidden;
}
.bodyCpanel .modalQues .modal-body { padding: 30px 26px; text-align: center; }
.bodyCpanel .modalQues .modal-body > img,
.bodyCpanel .modalQues .details > img { max-width: 120px; height: auto; margin: 0 auto 14px; }
.bodyCpanel .modalQues .message { font-size: 20px; font-weight: 700; margin: 0 0 18px; }
.bodyCpanel .modalQues .message.green { color: var(--brand-green-dark); }
.bodyCpanel .modalQues .message.orange { color: #c0392b; }
.bodyCpanel .modalQues .desc { font-size: 18px; font-weight: 700; color: var(--brand-navy); margin: 10px 0 18px; }
.bodyCpanel .modalQues .btnStyle2 {
    display: inline-block; margin: 5px; padding: 10px 22px;
    border-radius: var(--radius-control); font-weight: 700; font-size: 14px;
    background: var(--surface-muted); color: var(--brand-navy); border: 1.5px solid var(--border-soft);
    text-decoration: none; transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.bodyCpanel .modalQues .btnStyle2:hover { border-color: var(--brand-blue); color: var(--brand-blue); text-decoration: none; }
.bodyCpanel .modalQues a.getNext.btnStyle2 { background: var(--brand-green); border-color: var(--brand-green); color: #fff; }
.bodyCpanel .modalQues a.getNext.btnStyle2:hover { background: var(--brand-green-dark); border-color: var(--brand-green-dark); color: #fff; }
.bodyCpanel .modalQues .openText { text-align: right; margin-top: 14px; }
.bodyCpanel .modalQues .openText img { max-width: 100%; height: auto; }
.bodyCpanel .modalQues .openText iframe { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; }

@media (max-width: 575px) {
    .bodyCpanel .eg-quiz .headQues { gap: 8px; }
    .bodyCpanel .eg-quiz .titleQues { font-size: 16px; }
    /* W2.3 — shrink answer options so they fit on narrow phones (RTL-safe, mobile-only) */
    .bodyCpanel .eg-quiz .answer { padding: 11px 14px; }
    .bodyCpanel .eg-quiz .answer .content,
    .bodyCpanel .eg-quiz .answer.active .content { font-size: 14px; line-height: 1.7; }
    .bodyCpanel .eg-quiz .answer .title { font-size: 13px; }
    .bodyCpanel .eg-quiz .btnsForm .eg-btn { flex: 1 1 auto; justify-content: center; }
    .bodyCpanel .modalQues .btnStyle2 { display: block; margin: 8px 0; }
}

/* ---- Exam results (result / result_share / my-exam) ---- */
.bodyCpanel .eg-result__head { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; padding: 22px 26px; margin-bottom: 22px; }
.bodyCpanel .eg-result__score { flex: 0 0 auto; }
.bodyCpanel .eg-result__score .circle { margin: 0; }
.bodyCpanel .eg-result__meta { flex: 1 1 220px; min-width: 0; }
.bodyCpanel .eg-result__title { font-family: 'Cairo', 'Tajawal-Bold', sans-serif; font-size: 22px; font-weight: 700; color: var(--brand-navy); margin: 0 0 6px; }
.bodyCpanel .eg-result__head .attempt-label { color: var(--text-muted); margin: 0 0 14px; font-size: 14px; }
.bodyCpanel .eg-result__head .eg-btn { margin: 0; }
.bodyCpanel .eg-tablewrap { overflow-x: auto; }
.bodyCpanel .eg-table tbody tr.is-current td { background: #e8fbf3; font-weight: 700; color: var(--brand-green-dark); }
.bodyCpanel .eg-section-title {
    font-family: 'Cairo', 'Tajawal-Bold', sans-serif; font-size: 18px; font-weight: 700;
    color: var(--brand-navy); margin: 26px 0 16px; display: flex; align-items: center; gap: 8px;
}
.bodyCpanel .eg-section-title i { color: var(--brand-green); }
/* result answer cards: answer block is always shown (no toggle) */
.bodyCpanel .eg-qcard--result .eg-qcard__answer { margin-top: 14px; }
.bodyCpanel .eg-qcard--result .label { vertical-align: middle; margin-inline-end: 6px; }
@media (max-width: 575px) {
    .bodyCpanel .eg-result__head { gap: 16px; padding: 18px; }
}

/* ---- Wishlist / saved questions ---- */
.bodyCpanel .eg-saved { margin-top: 4px; }
.bodyCpanel .eg-saved__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 14px; }
.bodyCpanel .eg-saved__toolbar h2 { font-size: 16px; font-weight: 700; color: var(--brand-navy); margin: 0; }
.bodyCpanel .eg-saved__row {
    display: flex; align-items: center; gap: 14px;
    background: var(--surface); border: 1px solid var(--border-soft); border-radius: 12px;
    padding: 14px 18px; margin-bottom: 10px; cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.bodyCpanel .eg-saved__row:hover { border-color: var(--brand-blue); }
.bodyCpanel .eg-saved__row.active { border-color: var(--brand-green); background: #e8fbf3; }
.bodyCpanel .eg-saved__check {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--border-soft);
    display: flex; align-items: center; justify-content: center; color: transparent; font-size: 12px;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.bodyCpanel .eg-saved__row.active .eg-saved__check { background: var(--brand-green); border-color: var(--brand-green); color: #fff; }
.bodyCpanel .eg-saved__link { flex: 1 1 auto; min-width: 0; color: var(--text-main); text-decoration: none; font-weight: 600; font-size: 15px; }
.bodyCpanel .eg-saved__link:hover { color: var(--brand-blue); text-decoration: none; }
.bodyCpanel .eg-filter { margin-bottom: 20px; }
.bodyCpanel .eg-filter .row { align-items: end; }
.bodyCpanel .eg-filter .title { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
@media (max-width: 575px) {
    .bodyCpanel .eg-examcard { padding: 16px; }
    .bodyCpanel .eg-examcard__actions { width: 100%; }
    .bodyCpanel .eg-examcard__actions .eg-btn { flex: 1 1 auto; justify-content: center; }
    .bodyCpanel .eg-examcard__explain { width: 100%; flex-direction: row; gap: 10px; min-width: 0; padding: 10px 14px; }
    .bodyCpanel .eg-examcard__explain i { font-size: 18px; }
}

/* ----------------------------------------------------------------------------
   W19.2 — Compact public page header (opt-in modifier).
   Selected public inner pages (Teachers, Ask-Teacher landing, Teacher profile)
   add `.Breadcrumb--compact` to strip the full-height hero photo band defined by
   the base `.Breadcrumb` (style.css) and replace it with a short light header.
   Page-scoped: plain `.Breadcrumb` pages (register / solution(s) / page) are
   untouched. Two-class specificity (0,2,0)+ beats the base/responsive `.Breadcrumb`
   rules at every breakpoint, so load order is irrelevant.
---------------------------------------------------------------------------- */
.Breadcrumb.Breadcrumb--compact {
    background-image: none;
    background: #f4f7fb;
    border-bottom: 1px solid #e6edf6;
    padding: 26px 0 22px;
    min-height: 0;
    text-align: right;
}
.Breadcrumb.Breadcrumb--compact > img { display: none; }
.Breadcrumb.Breadcrumb--compact h2 {
    font-size: 28px;
    line-height: 1.25;
    color: #102a43;
    margin-bottom: 8px;
}
/* Re-skin the hero breadcrumb trail dark-on-light inside the compact header. */
.Breadcrumb--compact .eg-breadcrumb--hero a { color: #335379; font-weight: 600; }
.Breadcrumb--compact .eg-breadcrumb--hero a:hover { color: #1d3a5f; }
.Breadcrumb--compact .eg-breadcrumb--hero .is-current { color: #5b7186; opacity: 1; font-weight: 700; }
.Breadcrumb--compact .eg-breadcrumb--hero li:not(:last-child)::after { color: rgba(16, 42, 67, .45); }

@media (max-width: 575px) {
    .Breadcrumb.Breadcrumb--compact { padding: 20px 0 16px; }
    .Breadcrumb.Breadcrumb--compact h2 { font-size: 22px; }
}

/* ----------------------------------------------------------------------------
   W19.2 — Portal button reconciliation (.eg-btn + legacy .btnForm) + wishlist polish.
   Several portal buttons carry BOTH the modern `.eg-btn` and the legacy `.btnForm`
   class: wishlist filter/bulk-delete, question-bank & exam navigation, bank-subjects
   start, and the result modal. Legacy `.btnForm` — base (width:200px; height:65px;
   font-size:20px; box-shadow) and contextual `.question .btnsForm .btnForm` /
   `.modalQues .btnForm` (display:block; float:left; line-height:65px; height:65px) —
   overrides `.eg-btn`'s flex centering, leaving text off-centre and buttons oversized.
   When BOTH classes are present, hand sizing + centering back to the flex `.eg-btn`
   system. Scoped to `.eg-btn.btnForm`, so plain legacy `.btnForm` buttons (contact /
   login / password reset, none of which are `.eg-btn`) are untouched. portal-theme.css
   loads after style.css + responisve.css, so these win on the equal-specificity ties.
---------------------------------------------------------------------------- */
.bodyCpanel .eg-btn.btnForm,
.bodyCpanel .question .btnsForm .eg-btn.btnForm,
.bodyCpanel .modalQues .eg-btn.btnForm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    min-height: 46px;
    line-height: 1.4;
    font-size: 14px;
    float: none;
    box-shadow: none;
}

/* Question-bank / exam navigation: replace the legacy float layout with a clean
   flex row so السؤال السابق / التالى / الإنهاء align with consistent spacing. */
.bodyCpanel .question .btnsForm {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
.bodyCpanel .question .btnsForm .eg-btn.btnForm:first-of-type { margin-left: 0; }

/* Result modal action button stays centred under the success message. */
.bodyCpanel .modalQues .modal-body { text-align: center; }

/* ---- Wishlist filter card + bulk-action toolbar polish ---- */
.bodyCpanel .eg-filter .row { align-items: end; row-gap: 14px; }
/* filter submit fills its column so it lines up with the selects above it */
.bodyCpanel .eg-filter .col-md-2 .eg-btn.btnForm { width: 100%; }
/* bottom bulk-action bar: group the select + تنفيذ together (not spread apart) */
.bodyCpanel .wishlistAction { justify-content: flex-start; gap: 10px; margin-top: 8px; }
.bodyCpanel .wishlistAction .selectStyle { min-width: 170px; }

@media (max-width: 767px) {
    .bodyCpanel .question .btnsForm .eg-btn.btnForm { flex: 1 1 auto; }
    .bodyCpanel .wishlistAction { width: 100%; }
    .bodyCpanel .wishlistAction .eg-btn.btnForm { flex: 0 0 auto; }
}

/* ----------------------------------------------------------------------------
   W19.3 — Corrective render pass (browser-verified via static harness w/ real CSS).
   W19.1's DOM swap did NOT change the visual order because `.eg-examcard` is an RTL
   flex row with a growing `__main`: the trailing item nearest `__main` sits INNER and
   the last sits OUTER, so DOM order alone could not move شرح to the outer slot. The
   `order:` rule added beside `.eg-examcard__actions/__explain` above is the real fix.
   Here: (2) make the wishlist filter own its layout (not Bootstrap float cols) so the
   apply button is auto-sized & centred instead of a huge bar; (3) flex-centre the
   exam/study result-modal status block + action buttons. `.eg-filter` is wishlist-only
   and `.modalQues` is the result modal only, so both are page-scoped.
---------------------------------------------------------------------------- */

/* (2) Wishlist filter — self-contained flex row (overrides Bootstrap col floats). */
.bodyCpanel .eg-filter .row {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin: 0;
}
.bodyCpanel .eg-filter .row > [class*="col-"] {
    flex: 1 1 220px; max-width: none; width: auto; padding: 0; margin: 0;
}
.bodyCpanel .eg-filter .row > .col-md-2 { flex: 0 0 auto; }
.bodyCpanel .eg-filter .selectStyle { width: 100%; }
.bodyCpanel .eg-filter .selectStyle .selectmenu,
.bodyCpanel .eg-filter .ui-selectmenu-button.ui-button { width: 100% !important; box-sizing: border-box; }
.bodyCpanel .eg-filter .col-md-2 .eg-btn.btnForm { width: 100%; min-width: 130px; min-height: 48px; }
@media (max-width: 767px) {
    .bodyCpanel .eg-filter .row > [class*="col-"] { flex: 1 1 100%; }
}

/* (3) Result modal (study/exam) — orange/green status block flex-centred with proper
   contrast (was orange bg + dark-red text + a leaked 85px line-height block), and the
   action buttons centred with a consistent min-height (was a leaked 60px line-height). */
.bodyCpanel .modalQues .message {
    display: flex; align-items: center; justify-content: center;
    text-align: center; line-height: 1.2;
    min-height: 56px; height: auto; padding: 12px 18px;
    border-radius: 12px; border-bottom: 0; color: #fff;
}
.bodyCpanel .modalQues .message.green  { background: var(--brand-green); color: #fff; }
.bodyCpanel .modalQues .message.orange { background: #ef6c00; color: #fff; }
.bodyCpanel .modalQues .btnStyle2 {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px; min-height: 46px; height: auto; line-height: 1.2;
    text-align: center; vertical-align: middle;
}

/* (4) Wishlist rows — ROOT CAUSE of the cramped/overlapping rows: the legacy
   `.questionS .quesS .iconSelect` (specificity 0,3,0) pins the select indicator with
   `position:absolute; left:40px; 30px circle`, which beat the modern flex
   `.eg-saved__check` and floated the circle onto the LEFT, overlapping the chips.
   Neutralize the legacy absolute positioning so the check is a normal flex child at
   the row start (beside the question); title fills; chips + remove (×) flow to the end. */
.bodyCpanel .questionS .quesS .eg-saved__check {
    position: static; left: auto; top: auto;
    width: 22px; height: 22px; line-height: 1; background: transparent;
}
.bodyCpanel .questionS .quesS.active .eg-saved__check { background: var(--brand-green); color: #fff; }
.bodyCpanel .eg-saved__row { gap: 12px; padding: 14px 18px; }
.bodyCpanel .eg-saved__link { flex: 1 1 auto; }
.bodyCpanel .eg-saved__meta { margin-inline-start: auto; }

/* ============================================================================
   W20.1 — Student rating page (التقييم) modernization.
   The /student/rate page now reuses the .eg-bank reading column + .eg-bank__head
   band and renders StudentRepository::getRate() accuracy data as summary stat
   cards + per-subject cards (gauge + skill progress). All scoped to .bodyCpanel,
   brand tokens only, RTL-native, additive. No JS dependency (CSS conic gauge).
   ========================================================================== */

/* Summary stat cards (متوسط الأداء / أفضل أداء / إجمالي الإجابات / المواد). */
.bodyCpanel .rateStats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 26px;
}
.bodyCpanel .rateStat {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-top: 3px solid var(--brand-navy);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 20px 16px;
    text-align: center;
}
.bodyCpanel .rateStat--green { border-top-color: var(--brand-green); }
.bodyCpanel .rateStat--blue  { border-top-color: var(--brand-blue); }
.bodyCpanel .rateStat__num {
    display: block;
    font-family: 'Cairo', 'Tajawal-Bold', sans-serif;
    font-size: 30px; font-weight: 700; line-height: 1.1;
    color: var(--brand-navy);
}
.bodyCpanel .rateStat--green .rateStat__num { color: var(--brand-green); }
.bodyCpanel .rateStat--blue  .rateStat__num { color: var(--brand-blue); }
.bodyCpanel .rateStat__label { display: block; font-size: 14px; font-weight: 700; color: var(--text-main); margin-top: 8px; }
.bodyCpanel .rateStat__hint  { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* Per-subject card grid. */
.bodyCpanel .rateSubjects {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    align-items: start;
}
.bodyCpanel .rateSubjects > .rateSubject { margin-bottom: 0; }
.bodyCpanel .rateSubject__head { display: flex; align-items: center; gap: 16px; }
.bodyCpanel .rateSubject__meta { flex: 1 1 auto; min-width: 0; }
.bodyCpanel .rateSubject__name {
    font-family: 'Cairo', 'Tajawal-Bold', sans-serif;
    font-size: 17px; font-weight: 700; color: var(--brand-navy);
    margin: 0 0 8px; overflow-wrap: anywhere;
}
.bodyCpanel .rateSubject__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bodyCpanel .ratePill {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 11px;
}
.bodyCpanel .ratePill--ok { background: #e7f7ef; color: var(--brand-green-dark); }
.bodyCpanel .ratePill--no { background: #fdeeee; color: #cc4b37; }

/* CSS-only circular gauge (no JS): conic ring + white core + centered number. */
.bodyCpanel .rateGauge {
    --val: 0;
    flex: 0 0 auto;
    width: 78px; height: 78px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: conic-gradient(var(--gauge-color, var(--brand-green)) calc(var(--val) * 1%), #eef2f8 0);
}
.bodyCpanel .rateGauge.is-low { --gauge-color: #e0922a; }   /* amber under 50% */
.bodyCpanel .rateGauge::before {
    content: ""; grid-area: 1 / 1;
    width: 60px; height: 60px; border-radius: 50%; background: var(--surface);
}
.bodyCpanel .rateGauge__num {
    grid-area: 1 / 1;
    font-family: 'Cairo', 'Tajawal-Bold', sans-serif;
    font-size: 17px; font-weight: 700; color: var(--brand-navy);
}
.bodyCpanel .rateGauge__num small { font-size: 10px; font-weight: 700; }

/* Subject body + skill progress. */
.bodyCpanel .rateSubject__body { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.bodyCpanel .rateSubject__sub  { font-size: 13px; font-weight: 700; color: var(--text-muted); margin: 0 0 4px; }
.bodyCpanel .rateView .rateBody .progressTitle { display: block; font-size: 13px; color: #344256; margin: 12px 0 6px; font-weight: 600; }
.bodyCpanel .rateView .rateBody .progress {
    background: #eef2f8; border-radius: 8px; height: 14px; overflow: hidden;
    margin-bottom: 4px; box-shadow: none;
}
.bodyCpanel .rateView .rateBody .progress .line {
    height: 14px; border-radius: 8px; float: right; position: relative;
    background: var(--brand-green); min-width: 32px; transition: width .4s ease;
}
.bodyCpanel .rateView .rateBody .progress .line.is-low { background: #e0922a; }
.bodyCpanel .rateView .rateBody .progress .numb {
    position: static; float: left; font-size: 11px; color: #fff;
    padding: 0 8px; line-height: 14px;
}

@media (max-width: 991px) {
    .bodyCpanel .rateStats { grid-template-columns: repeat(2, 1fr); }
    .bodyCpanel .rateSubjects { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
    .bodyCpanel .rateStats { gap: 12px; }
    .bodyCpanel .rateStat { padding: 16px 12px; }
    .bodyCpanel .rateStat__num { font-size: 25px; }
    .bodyCpanel .rateGauge { width: 66px; height: 66px; }
    .bodyCpanel .rateGauge::before { width: 50px; height: 50px; }
    .bodyCpanel .rateGauge__num { font-size: 15px; }
}

/* ============================================================================
   W21.0 — Teacher dashboard visual alignment with the student dashboard.
   The teacher list/detail/form pages now reuse the SAME shared system as the
   student portal: the .eg-bank reading column + .eg-bank__head navy band,
   .eg-card, .eg-table (navy header), .eg-btn, .eg-action, .eg-empty,
   .eg-section-title, and the .rateStat summary cards. The rules below are
   teacher-only helpers that the shared classes do not already cover (table
   cell links, the add-student form, the answer thread, the profile-edit form,
   and the student-detail summary spacing). All scoped to .bodyCpanel, brand
   tokens only, RTL-native, additive — no markup outside the teacher views and
   no student-page selectors are touched.
   ========================================================================== */

/* ---- Table cell helpers (courses / questions / students lists) ---- */
.bodyCpanel .teacherCellLink {
    color: var(--brand-blue);
    font-weight: 600;
    text-decoration: none;
    overflow-wrap: anywhere;
}
.bodyCpanel .teacherCellLink:hover { color: var(--brand-blue-dark); text-decoration: none; }
.bodyCpanel .teacherCellSub {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-blue);
    text-decoration: none;
}
.bodyCpanel .teacherCellSub:hover { color: var(--brand-blue-dark); text-decoration: none; }
.bodyCpanel .teacherMuted { color: var(--text-muted); }

/* ---- Add-student form (طلابي) ---- */
.bodyCpanel .teacherAddForm {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0;
}
.bodyCpanel .teacherAddForm .inputStyle { flex: 1 1 240px; margin: 0; }
.bodyCpanel .teacherAddForm .eg-btn { flex: 0 0 auto; }

/* ---- Question + answer thread (أسئلة الطلاب → عرض السؤال) ---- */
.bodyCpanel .teacherQA__q {
    font-size: 16px;
    line-height: 2;
    color: var(--text-main);
    overflow-wrap: anywhere;
}
.bodyCpanel .teacherQA .sendAsk { margin: 0; }
.bodyCpanel .teacherQA .sendAsk textarea.inputStyle {
    width: 100%;
    min-height: 120px;
    margin-bottom: 14px;
}
.bodyCpanel .teacherAnswers { display: flex; flex-direction: column; gap: 14px; }
.bodyCpanel .teacherAnswer {
    display: flex;
    gap: 14px;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 16px 18px;
}
.bodyCpanel .teacherAnswer__avatar img,
.bodyCpanel .teacherAnswer__ph {
    width: 46px; height: 46px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 46px;
}
.bodyCpanel .teacherAnswer__ph {
    display: flex; align-items: center; justify-content: center;
    background: #eef2f8; color: #9db2d6;
}
.bodyCpanel .teacherAnswer__body { flex: 1 1 auto; min-width: 0; }
.bodyCpanel .teacherAnswer__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.bodyCpanel .teacherAnswer__name { font-weight: 700; color: var(--brand-navy); }
.bodyCpanel .teacherAnswer__text { margin: 0; color: var(--text-main); line-height: 1.9; overflow-wrap: anywhere; }

/* ---- Profile-edit form (تعديل الملف) — W21.1 redesigned card/section layout ----
   Each list (كتب / أعمال / ملفات PDF / فيديوهات) is a sub-card; books are bordered
   row cards with a 2-col input grid; URL lists are compact flex rows; add = centered
   dashed button; remove = small square danger icon-button. Inputs share one height.
   JS hooks (.teacher-books-list/.book-row/.add-book-row/.remove-book-row/
   .teacher-url-list/.url-row/.add-url-row/.remove-url-row) are unchanged — styling only. */
.bodyCpanel .teacherEdit__form { margin: 0; }
.bodyCpanel .teacherEdit__field { margin-bottom: 22px; }
.bodyCpanel .teacherEdit__label {
    display: block;
    font-family: 'Cairo', 'Tajawal-Bold', sans-serif;
    font-size: 15px; font-weight: 700;
    color: var(--brand-navy);
    margin: 0 0 8px;
}
.bodyCpanel .teacherEdit .inputStyle {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    margin: 0;
    text-align: right;
    border-radius: var(--radius-control);
}
.bodyCpanel .teacherEdit textarea.inputStyle {
    height: auto;
    min-height: 120px;
    padding: 12px 14px;
    line-height: 1.8;
}

/* Section sub-cards */
.bodyCpanel .teacherEdit__section {
    background: var(--surface-muted);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-card);
    padding: 18px 18px 16px;
    margin-bottom: 18px;
}
.bodyCpanel .teacherEdit__sectionTitle {
    font-family: 'Cairo', 'Tajawal-Bold', sans-serif;
    font-size: 15px; font-weight: 700;
    color: var(--brand-navy);
    margin: 0 0 14px;
    display: flex; align-items: center; gap: 8px;
}
.bodyCpanel .teacherEdit__sectionTitle i { color: var(--brand-green); }

/* Compact URL rows: input + small remove icon-button */
.bodyCpanel .teacherEdit .url-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.bodyCpanel .teacherEdit .url-row .inputStyle { flex: 1 1 auto; }

/* Book rows: bordered white card → header bar (label + remove) + 2-col input grid */
.bodyCpanel .teacherEdit .book-row {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-control);
    padding: 14px 16px 16px;
    margin-bottom: 12px;
}
.bodyCpanel .teacherEdit .book-row__top {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.bodyCpanel .teacherEdit .book-row__label {
    font-size: 13px; font-weight: 700; color: var(--text-muted);
    display: inline-flex; align-items: center; gap: 6px;
}
.bodyCpanel .teacherEdit .book-row__label i { color: var(--brand-green); }
.bodyCpanel .teacherEdit .book-row__grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}

/* Small square danger icon-button (remove) */
.bodyCpanel .teacherEdit__rm {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: var(--radius-control);
    background: #fff;
    color: #c0392b;
    border: 1px solid var(--border-soft);
    cursor: pointer;
    line-height: 1;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.bodyCpanel .teacherEdit__rm:hover { background: #fdecea; border-color: #f3c4bd; color: #a93226; }

/* Centered dashed "add" button */
.bodyCpanel .teacherEdit__add {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    line-height: 1.2;
    width: 100%;
    margin-top: 6px;
    padding: 11px 16px;
    font-family: 'Cairo', 'Tajawal', sans-serif;
    font-size: 13px; font-weight: 700;
    color: var(--brand-navy);
    background: transparent;
    border: 1.5px dashed #c4cedd;
    border-radius: var(--radius-control);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.bodyCpanel .teacherEdit__add:hover { background: #fff; border-color: var(--brand-green); color: var(--brand-green-dark); }
.bodyCpanel .teacherEdit__add i { font-size: 12px; }

/* Save footer */
.bodyCpanel .teacherEdit__submit {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border-soft);
    display: flex;
    justify-content: flex-start;
}

@media (max-width: 575px) {
    .bodyCpanel .teacherEdit .book-row__grid { grid-template-columns: 1fr; }
}

/* ---- Student-detail summary spacing (the .rateStat cards sit in Bootstrap cols) ---- */
.bodyCpanel .stuPage .stuCards .col-md-4 { margin-bottom: 16px; }
.bodyCpanel .stuPage .stuCards .rateStat { height: 100%; }

@media (max-width: 575px) {
    .bodyCpanel .teacherAddForm .eg-btn { width: 100%; }
}

/* ============================================================================
   W21.3 — Sidebar bottom blank-space / clipped-items fix (student + teacher).
   Root cause (style.css): .menuCpanel had padding-bottom:92px — a dark navy
   blank zone with NO footer element below the <nav> to fill it — and
   .menuCpanel .linksCpanel was a FIXED-height box (height:calc(100vh - 157px)
   base / calc(100vh - 65px) ≤1200px) with overflow:hidden, so on short viewports
   or the long student menu the bottom items were cut off and unreachable. The
   blank zone visually covered the clipped last item.
   Fix: drop the bottom blank zone and let the link LIST scroll internally — the
   toggle stays put in the 65px top zone, the rail width / collapse-expand
   behaviour is untouched. Scoped to .bodyCpanel (loads after style.css +
   responisve.css → wins on specificity + source order at every breakpoint).
   Nav items / labels / routes are unchanged.
   ========================================================================== */
.bodyCpanel .menuCpanel { padding-bottom: 0; }
.bodyCpanel .menuCpanel .linksCpanel {
    height: auto;
    max-height: calc(100vh - 78px);   /* 65px top toggle zone + ~13px bottom breathing */
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 14px;             /* last item sits clear of the scroll edge */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .22) transparent;
}
/* Thin, unobtrusive scrollbar on the navy rail (shows only when the menu overflows). */
.bodyCpanel .menuCpanel .linksCpanel::-webkit-scrollbar { width: 6px; }
.bodyCpanel .menuCpanel .linksCpanel::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 6px; }
.bodyCpanel .menuCpanel .linksCpanel::-webkit-scrollbar-track { background: transparent; }