/* =========================================================
   Kemet Class — IG Science Portal STYLES (self-contained)
   Design language: deep petrol ink + emerald, with a violet accent
   for Combined Science.
   Layout/shell classes prefixed `.portal-`.
   ========================================================= */

:root {
  /* Core palette — IG science: deep petrol ink + emerald, violet for
     Combined Science. */
  --ym-navy: #1a2340;      /* deep ink-teal — headings, sidebar */
  --ym-navy-2: #1d3a7a;
  --ym-blue: #2b59c3;      /* primary */
  --ym-cyan: #3d6ad6;      /* accent */
  --ym-sky: #eaf0fc;       /* tinted surfaces */
  --ym-white: #ffffff;
  --ym-text: #1c2440;
  --ym-muted: #55607c;      /* 5.4:1 on white (WCAG AA); was #6b7590 at 4.0:1 */
  --ym-border: #d6deef;
  --ym-bg: #f7f9fe;
  --ym-dark: #0f1529;

  /* Per-subject accents. Chemistry = emerald, Combined Science = violet. */
  --ym-chem: #2b59c3;
  --ym-chem-2: #3d6ad6;
  --ym-chem-soft: #eaf0fc;
  --ym-combined: #6d4bd8;
  --ym-combined-2: #a78bfa;
  --ym-combined-soft: #f1ecff;

  --ym-shadow: 0 18px 45px rgba(26,35,64, 0.13);
  --ym-radius: 18px;
  --ym-radius-sm: 10px;
  --ym-transition: 220ms ease;
  --sidebar-w: 260px;
  --header-h: 70px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  color: var(--ym-text);
  background: var(--ym-bg);
  line-height: 1.6;
}
html[dir="rtl"] body { font-family: "Cairo", "Tahoma", Arial, sans-serif; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; }

/* ---------- Buttons (shared with main site) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 0; border-radius: 999px; padding: 12px 20px;
  cursor: pointer; font: inherit; font-weight: 750; white-space: nowrap;
  transition: transform var(--ym-transition), box-shadow var(--ym-transition), background var(--ym-transition);
}
.btn-primary { background: linear-gradient(135deg, var(--ym-blue), var(--ym-cyan)); color: #fff; box-shadow: 0 14px 30px rgba(43,89,195,.25); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(43,89,195,.32); }
.btn-light { background: #fff; color: var(--ym-blue); border: 1px solid var(--ym-border); }
.btn-light:hover { background: var(--ym-sky); }
.btn-sm { padding: 9px 16px; font-size: 14px; }
.btn[disabled], .btn.is-disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; pointer-events: none; }
.btn-block { width: 100%; }

/* ---------- Form controls (shared) ---------- */
.input, .textarea, .select {
  width: 100%; border: 1px solid var(--ym-border); border-radius: 12px;
  padding: 13px 14px; font: inherit; color: var(--ym-text); outline: none; background: #fff;
  transition: border-color var(--ym-transition), box-shadow var(--ym-transition);
}
.input:focus, .textarea:focus, .select:focus { border-color: var(--ym-cyan); box-shadow: 0 0 0 4px rgba(61,106,214,.14); }
.textarea { min-height: 120px; resize: vertical; }
.field-label { display: block; font-weight: 700; font-size: 14px; color: var(--ym-navy); margin-bottom: 7px; }
.kicker { color: var(--ym-blue); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; margin: 0 0 8px; }
.section-title { color: var(--ym-navy); font-size: clamp(22px, 3vw, 30px); letter-spacing: -.5px; }

/* =========================================================
   APP SHELL
   ========================================================= */
.portal-shell { display: flex; min-height: 100vh; }

.portal-sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: 60;
  background: var(--ym-navy); color: #fff;
  display: flex; flex-direction: column;
  border-right: 1px solid rgba(255,255,255,.06);
  transition: transform var(--ym-transition);
}
.portal-brand { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 22px 20px; font-weight: 800; letter-spacing: .3px; }
.portal-brand > span:not(.brand-mark):not(.role-pill) { white-space: nowrap; }
.brand-mark {
  position: relative; overflow: hidden;
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  color: transparent; font-weight: 900;
  background: linear-gradient(135deg, var(--ym-blue), var(--ym-cyan));
  box-shadow: 0 10px 25px rgba(43,89,195,.25);
}
/* The Kemet Class mark (a K with a red-pen stroke) sits inside the gradient tile */
.brand-mark::after {
  content: ""; position: absolute; inset: 0;
  background: url("logo-mark.svg") center / 78% no-repeat;
}
.portal-nav { list-style: none; margin: 6px 0; padding: 0 12px; display: grid; gap: 4px; align-content: start; flex: 1; overflow-y: auto; }
.portal-nav a {
  display: flex; align-items: center; gap: 13px; padding: 12px 14px;
  border-radius: 12px; color: rgba(255,255,255,.78); font-weight: 650; font-size: 15px;
  border-left: 4px solid transparent;
  transition: background var(--ym-transition), color var(--ym-transition);
}
.portal-nav a .ico { width: 22px; text-align: center; font-size: 17px; }
.portal-nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.portal-nav a.active { background: rgba(61,106,214,.14); color: #fff; border-left-color: var(--ym-cyan); }

.portal-userbox {
  margin: 12px; padding: 14px; border-radius: 14px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10);
  display: flex; align-items: center; gap: 12px;
}
.portal-userbox .meta { min-width: 0; }
.portal-userbox .meta b { display: block; color: #fff; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.portal-userbox .meta a { color: var(--ym-cyan); font-size: 13px; font-weight: 700; }

.portal-content { margin-left: var(--sidebar-w); flex: 1; min-width: 0; display: flex; flex-direction: column; }

.portal-header {
  position: sticky; top: 0; z-index: 40; height: var(--header-h);
  background: rgba(255,255,255,.95); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ym-border);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 28px;
}
.portal-header .ph-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.portal-header h1 { font-size: 22px; color: var(--ym-navy); letter-spacing: -.4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.45; padding-block: 2px; }  /* room for Arabic letters below the line */
.portal-header .ph-right { display: flex; align-items: center; gap: 10px; }

.portal-hamburger {
  display: none; width: 42px; height: 42px; border: 1px solid var(--ym-border); background: #fff;
  border-radius: 12px; font-size: 18px; cursor: pointer; color: var(--ym-navy);
}

.icon-btn {
  position: relative; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--ym-border);
  background: #fff; cursor: pointer; font-size: 18px; display: grid; place-items: center; color: var(--ym-navy);
  transition: background var(--ym-transition);
}
.icon-btn:hover { background: var(--ym-sky); }
.icon-btn .dot { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: #e5484d; border: 2px solid #fff; }

.portal-usermenu { position: relative; }
.portal-usermenu .trigger { display: flex; align-items: center; gap: 10px; padding: 5px 8px 5px 5px; border-radius: 999px; border: 1px solid var(--ym-border); background: #fff; cursor: pointer; font: inherit; }
.portal-usermenu .trigger b { font-size: 14px; color: var(--ym-navy); }
.portal-usermenu .trigger .caret { color: var(--ym-muted); font-size: 12px; }
.dropdown {
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 190px;
  background: #fff; border: 1px solid var(--ym-border); border-radius: 14px; box-shadow: var(--ym-shadow);
  padding: 8px; display: none; z-index: 50;
}
.dropdown.open { display: block; }
.dropdown a { display: block; padding: 10px 12px; border-radius: 10px; font-weight: 600; font-size: 14px; color: var(--ym-text); }
.dropdown a:hover { background: var(--ym-sky); color: var(--ym-blue); }

.portal-main { padding: 32px; flex: 1; }
.portal-overlay { display: none; position: fixed; inset: 0; background: rgba(4,17,31,.5); z-index: 55; }
.portal-overlay.open { display: block; }

/* ---------- Avatar ---------- */
.avatar {
  flex: none; display: grid; place-items: center; border-radius: 50%;
  background: linear-gradient(135deg, var(--ym-blue), var(--ym-cyan));
  color: #fff; font-weight: 800; width: 40px; height: 40px; font-size: 15px;
}
.avatar.avatar-xs { width: 24px; height: 24px; font-size: 11px; }
.avatar.avatar-sm { width: 34px; height: 34px; font-size: 13px; }
.avatar.avatar-lg { width: 96px; height: 96px; font-size: 34px; }
.avatar.has-photo { background: #fff; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the profile card centres its text; the avatar is a box, so centre it too */
.profile-card .avatar-lg { margin-inline: auto; }
.avatar-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
/* a teacher's photo (or initial) beside their name on a subject */
.teacher-badge { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
/* the teacher's code on their dashboard banner */
.portal-banner .teacher-code { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.portal-banner .teacher-code b { letter-spacing: .06em; font-variant-numeric: tabular-nums; }

/* =========================================================
   GENERIC CARDS / GRIDS
   ========================================================= */
.card { background: #fff; border: 1px solid var(--ym-border); border-radius: var(--ym-radius); box-shadow: 0 8px 26px rgba(26,35,64,.06); }
.card-pad { padding: 24px; }
.page-head { margin-bottom: 22px; }
.page-head p { margin: 6px 0 0; color: var(--ym-muted); }
.grid { display: grid; gap: 22px; }
/* minmax(0, …): a column may shrink below its content's width, so on a
   phone a wide table scrolls inside its own box instead of widening the
   whole page sideways. */
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.row-2 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; }
.stack { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }  /* a long row wraps instead of pushing out of its card */
.muted { color: var(--ym-muted); }
.between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Stat card (light portal variant) */
.portal-stat-card { background: #fff; border: 1px solid var(--ym-border); border-radius: var(--ym-radius); box-shadow: 0 8px 26px rgba(26,35,64,.06); padding: 22px; display: flex; align-items: center; gap: 16px; }
.portal-stat-card .ico { width: 52px; height: 52px; flex: none; border-radius: 14px; display: grid; place-items: center; font-size: 22px; color: #fff; background: linear-gradient(135deg, var(--ym-navy), var(--ym-blue)); }
.portal-stat-card strong { display: block; font-size: 30px; line-height: 1; color: var(--ym-navy); }
.portal-stat-card span { color: var(--ym-muted); font-weight: 650; font-size: 14px; }
.portal-stat-card > div { min-width: 0; overflow-wrap: anywhere; }
/* two cards to a row on a phone: smaller, so the label has room */
@media (max-width: 480px) {
  .portal-stat-card { padding: 14px; gap: 10px; }
  .portal-stat-card .ico { width: 40px; height: 40px; border-radius: 12px; }
  .portal-stat-card .ico .icon { width: 20px; height: 20px; }
  .portal-stat-card strong { font-size: 22px; }
  .portal-stat-card span { font-size: 12.5px; }
}
a.portal-stat-card { text-decoration: none; transition: transform var(--ym-transition), box-shadow var(--ym-transition), border-color var(--ym-transition); }
a.portal-stat-card:hover { transform: translateY(-4px); border-color: rgba(61,106,214,.45); box-shadow: var(--ym-shadow); }

.profile-grid { display: grid; grid-template-columns: 320px 1fr; gap: 22px; }
@media (max-width: 780px) { .profile-grid { grid-template-columns: 1fr; } }

/* Welcome banner */
.portal-banner {
  border-radius: var(--ym-radius); padding: 30px 34px; color: #fff; margin-bottom: 24px;
  background: linear-gradient(135deg, var(--ym-blue), var(--ym-cyan)); box-shadow: var(--ym-shadow);
}
.portal-banner h2 { font-size: clamp(22px, 3vw, 30px); }
.portal-banner p { margin: 8px 0 0; color: rgba(255,255,255,.9); }

/* =========================================================
   PROGRESS BAR
   ========================================================= */
.progress-bar { height: 9px; border-radius: 999px; background: var(--ym-border); overflow: hidden; }
.progress-bar .fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--ym-blue), var(--ym-cyan)); transition: width .6s ease; }
.progress-meta { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--ym-muted); margin-bottom: 6px; }

/* =========================================================
   BADGES
   ========================================================= */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.feedback-note { margin-top: 6px; padding: 7px 11px; border-radius: var(--ym-radius-sm); background: var(--ym-sky); color: var(--ym-text); font-size: 13px; font-weight: 400; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.badge-success { background: #e4f6ec; color: #157040; }
.badge-warning { background: #fdeede; color: #9a5a00; }
.badge-info { background: var(--ym-sky); color: var(--ym-blue); }
.badge-neutral { background: #edf1f9; color: var(--ym-muted); }
.badge-cyan { background: rgba(61,106,214,.16); color: #1f4496; }
.badge-danger { background: #fdecec; color: #c0392b; }

/* Tag pill */
.tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; color: var(--ym-blue); background: var(--ym-sky); border: 1px solid var(--ym-border); }

/* Meeting platform badge (Zoom / Meet / Teams) — colored via --mtg */
.mtg-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; color: var(--mtg, var(--ym-blue)); background: #fff; border: 1px solid var(--ym-border); }
.mtg-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--mtg, var(--ym-blue)); }

/* =========================================================
   FILTER TABS (pill)
   ========================================================= */
.filter-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.filter-tabs button {
  border: 1px solid var(--ym-border); background: #fff; color: var(--ym-text);
  padding: 9px 16px; border-radius: 999px; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
  transition: background var(--ym-transition), color var(--ym-transition), border-color var(--ym-transition);
}
.filter-tabs button:hover { border-color: var(--ym-cyan); }
.filter-tabs button.active { background: var(--ym-blue); color: #fff; border-color: var(--ym-blue); }

/* In-page tabs (underline) */
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--ym-border); margin-bottom: 22px; flex-wrap: wrap; }
.tabs button {
  border: 0; background: none; padding: 12px 14px; font: inherit; font-weight: 700; color: var(--ym-muted);
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs button.active { color: var(--ym-blue); border-bottom-color: var(--ym-cyan); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* =========================================================
   GROUP CARDS
   ========================================================= */
.group-card { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--ym-border); border-radius: var(--ym-radius); box-shadow: 0 8px 26px rgba(26,35,64,.06); padding: 24px; transition: transform var(--ym-transition), box-shadow var(--ym-transition), border-color var(--ym-transition); }
.group-card::before { content: ""; position: absolute; inset: auto 0 0 0; height: 5px; background: linear-gradient(90deg, var(--ym-blue), var(--ym-cyan)); }
.group-card:hover { transform: translateY(-7px); border-color: rgba(61,106,214,.45); box-shadow: var(--ym-shadow); }
.group-icon { width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; color: #fff; background: linear-gradient(135deg, var(--ym-navy), var(--ym-blue)); margin-bottom: 16px; }
.group-card h3 { color: var(--ym-navy); font-size: 19px; margin-bottom: 6px; }
.group-card .corner { position: absolute; top: 18px; inset-inline-end: 18px; z-index: 1; }  /* left in Arabic */
/* the tag under it would run beneath the badge on a phone: leave the
   badge its room */
.group-card > .corner + .tag { margin-inline-end: 120px; max-width: calc(100% - 120px); white-space: normal; }

/* ---- Per-subject accent -----------------------------------------------
   A subject card / row / bar carries data-subject="chem" | "combined".
   Each value re-points the same three local vars, so the top rule, icon
   tile, progress fill, chart column, chip and button all recolour from
   one attribute instead of one rule per subject per component. */
[data-subject="chem"] { --sub-1: var(--ym-chem); --sub-2: var(--ym-chem-2); --sub-soft: var(--ym-chem-soft); }
[data-subject="combined"] { --sub-1: var(--ym-combined); --sub-2: var(--ym-combined-2); --sub-soft: var(--ym-combined-soft); }

.group-card[data-subject]::before { background: linear-gradient(90deg, var(--sub-1), var(--sub-2)); }
[data-subject] .group-icon { background: linear-gradient(135deg, var(--sub-1), var(--sub-2)); }
[data-subject] .progress-bar .fill { background: linear-gradient(90deg, var(--sub-1), var(--sub-2)); }
html[dir="rtl"] [data-subject] .progress-bar .fill { background: linear-gradient(270deg, var(--sub-1), var(--sub-2)); }
[data-subject] .hbar-fill { background: linear-gradient(90deg, var(--sub-1), var(--sub-2)); }
/* matches `.bars .bar .col` depth so the accent wins over the default column */
.bars .bar[data-subject] .col { background: linear-gradient(180deg, var(--sub-2), var(--sub-1)); }

/* Paper / syllabus-code chip shown under a subject title */
.subject-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 800; letter-spacing: .03em;
  padding: 4px 10px; border-radius: 999px;
  color: var(--ym-blue); background: var(--ym-sky); border: 1px solid var(--ym-border);
}
[data-subject] .subject-chip {
  color: var(--sub-1); background: var(--sub-soft);
  border-color: color-mix(in srgb, var(--sub-1) 22%, #fff);
}

/* The subject's accent carries through its own call-to-action button. */
.group-card[data-subject] .btn-primary {
  background: linear-gradient(135deg, var(--sub-1), var(--sub-2));
  box-shadow: 0 12px 26px color-mix(in srgb, var(--sub-1) 30%, transparent);
}
.group-card[data-subject] .btn-primary:hover {
  box-shadow: 0 16px 34px color-mix(in srgb, var(--sub-1) 38%, transparent);
}

/* Subject tile with a faint hexagonal (benzene-ring) motif in the corner */
.group-card.subject-tile { padding-top: 26px; }
.group-card.subject-tile::after {
  content: ""; position: absolute; top: 34px; right: -34px; width: 126px; height: 126px;
  pointer-events: none; opacity: .06; z-index: 0;
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23000' stroke-width='4'%3E%3Cpolygon points='50,8 85,28 85,68 50,88 15,68 15,28'/%3E%3Cpolygon points='50,24 71,36 71,60 50,72 29,60 29,36'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
html[dir="rtl"] .group-card.subject-tile::after { right: auto; left: -34px; }

/* List item / continue-learning row */
.list-row { display: flex; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--ym-border); border-radius: var(--ym-radius-sm); background: #fff; }
.list-row .group-icon { width: 46px; height: 46px; font-size: 20px; margin: 0; border-radius: 12px; }
.list-row .grow { flex: 1; min-width: 0; }

/* Upcoming widget */
.mini-item { display: flex; align-items: center; gap: 12px; padding: 13px 10px; margin: 0 -10px; border-radius: 10px; border-bottom: 1px solid var(--ym-border); text-decoration: none; color: inherit; transition: background var(--ym-transition); }
.mini-item:last-child { border-bottom: 0; }
a.mini-item:hover { background: var(--ym-sky); }
a.mini-item:hover .when, a.mini-item > .muted { color: var(--ym-muted); }
.mini-item .when { font-size: 13px; color: var(--ym-muted); }

/* =========================================================
   VERTICAL TIMELINE (activity feed)
   ========================================================= */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 22px 34px; }
.timeline li::before { content: ""; position: absolute; left: 11px; top: 22px; bottom: -4px; width: 2px; background: var(--ym-border); }
.timeline li:last-child::before { display: none; }
.timeline .dot { position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: var(--ym-sky); border: 2px solid var(--ym-cyan); }
.timeline .t-time { font-size: 12px; color: var(--ym-muted); }
.timeline a.t-link { display: block; color: inherit; text-decoration: none; transition: color var(--ym-transition); }
.timeline a.t-link:hover { color: var(--ym-blue); }

/* =========================================================
   TABLES
   ========================================================= */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; }
table.data th, table.data td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--ym-border); font-size: 14px; }
table.data th { color: var(--ym-muted); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 12px; }
table.data tbody tr:hover { background: var(--ym-sky); }
.due-soon { color: #c9760a; font-weight: 800; }
.clickable-row { cursor: pointer; }

/* =========================================================
   ACCORDION (group modules)
   ========================================================= */
.accordion-item { border: 1px solid var(--ym-border); border-radius: var(--ym-radius-sm); background: #fff; margin-bottom: 12px; overflow: hidden; }
.accordion-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; padding: 16px 18px; background: none; border: 0; font: inherit; font-weight: 750; color: var(--ym-navy); cursor: pointer; }
.accordion-head .chev { transition: transform var(--ym-transition); color: var(--ym-muted); }
.accordion-item.open .accordion-head .chev { transform: rotate(180deg); }
.accordion-body { max-height: 0; overflow: hidden; transition: max-height var(--ym-transition); }
.accordion-item.open .accordion-body { max-height: 600px; }
.lesson { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--ym-border); font-size: 14px; }
.lesson .lic { width: 26px; height: 26px; flex: none; border-radius: 8px; display: grid; place-items: center; font-size: 13px; background: var(--ym-sky); color: var(--ym-blue); }
.lesson .lic.done { background: #e4f6ec; color: #1b8a4b; }
.lesson .len { margin-left: auto; color: var(--ym-muted); font-size: 13px; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.checklist li { display: flex; gap: 10px; align-items: flex-start; }
.checklist li::before { content: "✓"; color: #1b8a4b; font-weight: 900; }

/* =========================================================
   MODAL
   ========================================================= */
/* a pop-up taller than the screen scrolls, title and Save both reachable;
   margin:auto on the card still centres one that fits */
.portal-modal { position: fixed; inset: 0; z-index: 80; display: none; align-items: flex-start; justify-content: center; padding: 20px; overflow-y: auto; overscroll-behavior: contain; }
.portal-modal.open { display: flex; }
.portal-modal .backdrop { position: fixed; inset: 0; background: rgba(4,17,31,.55); }
/* The "please accept the Terms" screen (shell/terms.js): like a pop-up,
   but it stays until the Terms are accepted or the person logs out. */
.terms-gate { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-start; justify-content: center; padding: 20px; overflow-y: auto; overscroll-behavior: contain; background: rgba(4,17,31,.55); }
.terms-gate .modal-card { margin: auto; width: min(540px, 100%); background: #fff; border-radius: var(--ym-radius); box-shadow: var(--ym-shadow); padding: 28px; }
.terms-gate h2 { font-size: 20px; margin: 0 0 8px; }
.terms-gate p { margin: 0 0 10px; }
.terms-gate .terms-links a { color: var(--ym-blue); font-weight: 700; }
.terms-gate .check-row { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; font-size: 14px; line-height: 1.5; cursor: pointer; }
.terms-gate .check-row input { margin-top: 2px; width: 20px; height: 20px; flex: none; }
.terms-gate .terms-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.portal-modal .modal-card { position: relative; z-index: 1; margin: auto; width: min(520px, 100%); background: #fff; border-radius: var(--ym-radius); box-shadow: var(--ym-shadow); padding: 28px; animation: modal-in var(--ym-transition) ease; }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.modal-card .modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.modal-card h3 { color: var(--ym-navy); font-size: 20px; }
.modal-close { border: 0; background: none; font-size: 22px; cursor: pointer; color: var(--ym-muted); line-height: 1; min-width: 40px; min-height: 40px; display: inline-grid; place-items: center; border-radius: 10px; }

/* =========================================================
   TOGGLE SWITCH
   ========================================================= */
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--ym-border); }
.toggle-row:last-child { border-bottom: 0; }
.toggle-switch { position: relative; width: 50px; height: 28px; flex: none; }
.toggle-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.toggle-switch .track { position: absolute; inset: 0; border-radius: 999px; background: var(--ym-border); transition: background var(--ym-transition); }
.toggle-switch .track::before { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(7,27,51,.25); transition: transform var(--ym-transition); }
.toggle-switch input:checked + .track { background: var(--ym-cyan); }
.toggle-switch input:checked + .track::before { transform: translateX(22px); }

/* =========================================================
   EMPTY STATE
   ========================================================= */
.empty-state { text-align: center; padding: 48px 20px; color: var(--ym-muted); }
.empty-state .es-ico { font-size: 40px; margin-bottom: 10px; }
.empty-state h3 { color: var(--ym-navy); margin-bottom: 6px; }

/* =========================================================
   ATTENDANCE — donut + calendar
   ========================================================= */
.donut-wrap { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.donut { position: relative; width: 140px; height: 140px; flex: none; }
.donut svg { transform: rotate(-90deg); }
/* The figure and its caption sit together in the middle of the ring
   (a two-row grid split the box, pushing the caption onto the ring). */
.donut .center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; line-height: 1.15; }
.donut .center strong { font-size: 26px; color: var(--ym-navy); }
.donut .center span { font-size: 12px; color: var(--ym-muted); }

.calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.calendar .cal-h { text-align: center; font-size: 12px; font-weight: 800; color: var(--ym-muted); text-transform: uppercase; padding-bottom: 4px; }
.cal-day { aspect-ratio: 1 / 1; border-radius: 10px; display: grid; place-items: center; font-size: 14px; font-weight: 700; background: var(--ym-bg); border: 1px solid var(--ym-border); color: var(--ym-text); }
.cal-day.present { background: #e4f6ec; border-color: #bfe6cd; color: #1b8a4b; }
.cal-day.absent { background: #fdecec; border-color: #f6c9c9; color: #c0392b; }
.cal-day.empty { background: transparent; border-color: transparent; }
.cal-day.today { outline: 2px solid var(--ym-cyan); outline-offset: 1px; }
.legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; font-size: 13px; color: var(--ym-muted); }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }

/* =========================================================
   GRADES — bar chart
   ========================================================= */
.bars { display: flex; align-items: flex-end; justify-content: center; gap: 26px; height: 160px; padding-top: 10px; }
.bars .bar { flex: 1 1 0; max-width: 110px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; height: 100%; }
.bars .bar .col { width: 100%; max-width: 46px; border-radius: 10px 10px 0 0; background: linear-gradient(180deg, var(--ym-cyan), var(--ym-blue)); }
.bars .bar .lbl { font-size: 12px; color: var(--ym-muted); text-align: center; }
.grade-big { font-size: 56px; font-weight: 900; color: var(--ym-navy); line-height: 1; }

/* =========================================================
   LOGIN
   ========================================================= */
.login-wrap { display: grid; grid-template-columns: 55% 45%; min-height: 100vh; }
.login-aside {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  display: flex; flex-direction: column; justify-content: center; padding: 64px;
  background: linear-gradient(135deg, var(--ym-dark), var(--ym-navy));
}
/* Molecular lattice: atom dots over a tiled hexagonal ring motif */
.login-aside::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .55;
  background-image:
    radial-gradient(rgba(61,106,214,.28) 1.3px, transparent 1.3px),
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='122' viewBox='0 0 140 122'%3E%3Cg fill='none' stroke='%2319b8a0' stroke-opacity='.28' stroke-width='1.6'%3E%3Cpolygon points='35,4 65,21 65,55 35,72 5,55 5,21'/%3E%3Cpolygon points='105,65 135,82 135,116 105,133 75,116 75,82'/%3E%3Cline x1='65' y1='38' x2='95' y2='38'/%3E%3Cline x1='105' y1='65' x2='105' y2='38'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 26px 26px, 140px 122px;
}
.login-aside .brand-mark { width: 52px; height: 52px; font-size: 22px; margin-bottom: 26px; }
.login-aside h1 { font-size: clamp(28px, 4vw, 42px); line-height: 1.1; letter-spacing: -1px; margin-bottom: 14px; }
.login-aside p { color: rgba(255,255,255,.8); max-width: 420px; }
/* A short list of what you get, on a sign-up page's dark panel. */
.aside-steps { list-style: none; margin: 26px 0 0; padding: 0; max-width: 420px; display: grid; gap: 12px; }
.aside-steps li { position: relative; padding-inline-start: 30px; color: rgba(255,255,255,.88); font-weight: 600; }
.aside-steps li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .2em;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(61,106,214,.22); box-shadow: inset 0 0 0 2px #3d6ad6;
}
.login-form-panel { display: flex; align-items: center; justify-content: center; padding: 40px 28px; background: var(--ym-bg); }
.login-form-card { width: min(400px, 100%); }
/* "Check your email" after a sign-up (check-email.html): the message alone. */
.check-email { text-align: center; }
.check-email .section-title { margin-bottom: 10px; }
.check-email .muted { margin: 0 0 8px; }
.check-email-address { margin: 2px 0 14px; font-weight: 800; color: var(--ym-text); overflow-wrap: anywhere; }
.check-email .btn { margin-top: 18px; }
.check-email-hint { margin: 14px 0 0; font-size: 13px; color: var(--ym-muted); }
.password-field { position: relative; }
/* The eye sits where the text ends — the right in English, the left in Arabic —
   and the text stops short of it. */
.password-field .input { padding-inline-end: 44px; }
.password-field .toggle-pass { position: absolute; top: 50%; inset-inline-end: 4px; transform: translateY(-50%); border: 0; background: none; cursor: pointer; font-size: 16px; color: var(--ym-muted); min-width: 40px; min-height: 40px; display: inline-grid; place-items: center; }
.login-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; }
.login-row label { display: inline-flex; align-items: center; gap: 8px; color: var(--ym-muted); }
.login-row a { color: var(--ym-blue); font-weight: 700; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--ym-muted); font-size: 13px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--ym-border); }

/* =========================================================
   ICONS + LANGUAGE TOGGLE
   ========================================================= */
.icon { display: block; flex: none; }
.portal-nav a .ico { display: inline-flex; align-items: center; justify-content: center; width: 24px; }
.portal-nav a .ico .icon { width: 20px; height: 20px; }
.portal-stat-card .ico .icon { width: 26px; height: 26px; }
.group-icon .icon { width: 55%; height: 55%; }
.es-ico .icon { width: 40px; height: 40px; margin: 0 auto; }
.timeline .dot .icon, .mini-item .dot .icon { width: 14px; height: 14px; }
.download-lock .icon { width: 15px; height: 15px; }
.list-row > .grow ~ * .icon, .attention .icon { width: 18px; height: 18px; }
.lang-toggle { width: auto; gap: 7px; padding: 0 12px; }
.lang-toggle .lang-label { font-weight: 700; font-size: 14px; }
@media (max-width: 780px) { .lang-toggle .lang-label { display: none; } .lang-toggle { padding: 0; width: 42px; } }
.lang-toggle-floating { position: fixed; top: 16px; inset-inline-end: 16px; z-index: 70; }
.lang-toggle-floating .lang-toggle { background: #fff; box-shadow: var(--ym-shadow); }
/* on a phone the floating language button sat on the sign-in card's corner */
@media (max-width: 780px) { .login-form-panel { padding-top: 76px; } }
.chooser-card .ci .icon, .check-email .ci .icon { width: 30px; height: 30px; }

/* =========================================================
   SEGMENTED CONTROL (login role toggle, etc.)
   ========================================================= */
.segmented { display: flex; gap: 4px; padding: 4px; margin-bottom: 20px; background: var(--ym-bg); border: 1px solid var(--ym-border); border-radius: 999px; }
.segmented button {
  flex: 1; border: 0; background: none; font: inherit; font-weight: 750; color: var(--ym-muted);
  padding: 10px 12px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background var(--ym-transition), color var(--ym-transition), box-shadow var(--ym-transition);
}
.segmented button.active { background: linear-gradient(135deg, var(--ym-blue), var(--ym-cyan)); color: #fff; box-shadow: 0 8px 18px rgba(43,89,195,.25); }

/* =========================================================
   TEACHER PORTAL ADDITIONS
   ========================================================= */
.role-pill { display: inline-block; margin-left: 0; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--ym-dark); background: var(--ym-cyan); vertical-align: middle; }

/* Toolbar (search + filters row) */
.toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 22px; }
.toolbar .input, .toolbar .select { width: auto; max-width: 100%; }
.toolbar .grow { flex: 1; min-width: 180px; }
/* on a phone each picker takes the full width, rather than two of
   different widths side by side (the register's group and session) */
@media (max-width: 640px) { .toolbar .select { flex: 1 1 100%; width: 100%; } }

/* Three-state attendance control */
.att-seg { display: inline-flex; border: 1px solid var(--ym-border); border-radius: 999px; overflow: hidden; }
.att-seg button { border: 0; background: #fff; font: inherit; font-weight: 750; font-size: 13px; padding: 10px 16px; min-height: 40px; cursor: pointer; color: var(--ym-muted); transition: background var(--ym-transition), color var(--ym-transition); }
.att-seg button + button { border-left: 1px solid var(--ym-border); }
.att-seg button.on.present { background: #e4f6ec; color: #1b8a4b; }
.att-seg button.on.absent { background: #fdecec; color: #c0392b; }
.att-seg button.on.late { background: #fdeede; color: #c9760a; }
/* the register on a phone: the name keeps its line, the three choices
   take the full width below it */
@media (max-width: 520px) {
  .att-row { flex-wrap: wrap; }
  .att-row .att-seg { width: 100%; }
  .att-row .att-seg button { flex: 1; }
}

/* Horizontal bars (reports) */
.hbar-row { display: grid; grid-template-columns: 170px 1fr 52px; gap: 12px; align-items: center; margin-bottom: 12px; font-size: 14px; }
.hbar-row .hbar-label { color: var(--ym-text); font-weight: 650; }
.hbar-track { height: 12px; border-radius: 999px; background: var(--ym-border); overflow: hidden; }
.hbar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--ym-blue), var(--ym-cyan)); }
.hbar-row .hbar-val { text-align: right; font-weight: 800; color: var(--ym-navy); }
@media (max-width: 780px) { .hbar-row { grid-template-columns: 110px 1fr 44px; } }

/* Callout cards (top performers / at-risk) */
.callout { border: 1px solid var(--ym-border); border-radius: var(--ym-radius-sm); padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.callout.risk { border-color: #f6c9c9; background: #fdf4f4; }
.callout.top { border-color: #bfe6cd; background: #f3fbf6; }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px); background: var(--ym-navy); color: #fff; padding: 13px 22px; border-radius: 999px; box-shadow: var(--ym-shadow); font-weight: 700; z-index: 90; opacity: 0; transition: opacity var(--ym-transition), transform var(--ym-transition); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Icon picker (group builder) */
.icon-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.icon-picker label { width: 48px; height: 48px; border: 1px solid var(--ym-border); border-radius: 12px; display: grid; place-items: center; font-size: 22px; cursor: pointer; background: #fff; transition: border-color var(--ym-transition), box-shadow var(--ym-transition); }
.icon-picker input { position: absolute; opacity: 0; }
.icon-picker input:checked + label, .icon-picker label:hover { border-color: var(--ym-cyan); box-shadow: 0 0 0 3px rgba(61,106,214,.16); }

/* Builder dynamic rows */
.row-remove { border: 1px solid var(--ym-border); background: #fff; border-radius: 10px; width: 42px; height: 44px; cursor: pointer; font-size: 16px; color: #c0392b; }
.accordion-item.is-builder .accordion-body { transition: none; }
.accordion-item.is-builder.open .accordion-body { max-height: 2000px; }
.lesson-row { display: grid; grid-template-columns: 1fr 130px 110px auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.lesson-row.asg-row { grid-template-columns: 1fr 140px 130px 170px auto; }
.lesson-row.lesson-simple { grid-template-columns: 1fr auto; }
@media (max-width: 780px) { .lesson-row, .lesson-row.asg-row { grid-template-columns: 1fr; } }

/* =========================================================
   LOGIN ROLE CHOOSER (login.html)
   ========================================================= */
.chooser-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.chooser-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .chooser-grid-3 { grid-template-columns: 1fr; } }
.chooser-card { display: block; text-align: center; padding: 34px 24px; border: 1px solid var(--ym-border); border-radius: var(--ym-radius); background: #fff; box-shadow: 0 8px 26px rgba(26,35,64,.06); transition: transform var(--ym-transition), box-shadow var(--ym-transition), border-color var(--ym-transition); }
.chooser-card:hover { transform: translateY(-6px); border-color: rgba(61,106,214,.45); box-shadow: var(--ym-shadow); }
.chooser-card .ci, .check-email .ci { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 18px; display: grid; place-items: center; font-size: 30px; color: #fff; background: linear-gradient(135deg, var(--ym-blue), var(--ym-cyan)); }
.chooser-card h3 { color: var(--ym-navy); margin-bottom: 6px; }
.chooser-card p { color: var(--ym-muted); font-size: 14px; margin: 0; }
@media (max-width: 640px) { .chooser-grid { grid-template-columns: 1fr; } }

/* =========================================================
   CONTENT PROTECTION (materials only)
   ========================================================= */
/* overflow:hidden is load-bearing: the watermark is rotated and scaled 1.4x,
   which grows its own clipping box past the card. Without this it tiled
   across the whole page instead of staying on the protected material. */
.protected-content { position: relative; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.protected-content img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
.protected-content.blurred { filter: blur(9px); transition: filter .1s ease; }
.protected-watermark { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 22px 46px; transform: rotate(-28deg) scale(1.4); opacity: .08; }
.protected-watermark span { font-weight: 800; font-size: 13px; color: var(--ym-navy); white-space: nowrap; }
.download-lock { display: inline-flex; align-items: center; gap: 6px; color: var(--ym-muted); font-weight: 700; font-size: 13px; background: var(--ym-bg); border: 1px dashed var(--ym-border); border-radius: 999px; padding: 8px 14px; }
.print-block { display: none; }
@media print {
  .protected-content { display: none !important; }
  .print-block { display: block !important; padding: 24px; font-weight: 800; color: #000; }
}

/* =========================================================
   PARENT PORTAL
   ========================================================= */

/* Child switcher — only rendered when a parent has more than one child. */
.child-switch { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.child-switch button {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px 9px 9px; border-radius: 999px;
  border: 1px solid var(--ym-border); background: #fff;
  font: inherit; font-size: 14px; cursor: pointer; color: var(--ym-muted);
  transition: border-color var(--ym-transition), color var(--ym-transition), box-shadow var(--ym-transition);
}
.child-switch button span { font-weight: 750; color: var(--ym-navy); }
.child-switch button small { color: var(--ym-muted); font-size: 12px; }
.child-switch button:hover { border-color: var(--ym-cyan); }
.child-switch button.active { border-color: var(--ym-blue); box-shadow: 0 0 0 3px rgba(43,89,195,.12); }
html[dir="rtl"] .child-switch button { padding: 9px 9px 9px 16px; }

/* Attendance key under the calendar. */
.cal-key { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font-size: 12px; font-weight: 700; color: var(--ym-muted); }
.cal-key span { display: inline-flex; align-items: center; gap: 7px; }
.cal-key .k { width: 12px; height: 12px; border-radius: 4px; border: 1px solid var(--ym-border); }
.cal-key .k.present { background: #e4f6ec; border-color: #bfe6cd; }
.cal-key .k.late { background: #fdeede; border-color: #f3d6ac; }
.cal-key .k.absent { background: #fdecec; border-color: #f6c9c9; }
.cal-day.late { background: #fdeede; border-color: #f3d6ac; color: #c9760a; }

/* ---- Progress report sheet ----
   Laid out to survive printing: fixed masthead, no shadows, no colour
   fills that eat a parent's toner. */
.report-sheet { border-top: 4px solid var(--ym-blue); }
.rp-head { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid var(--ym-border); }
.rp-brand { display: flex; align-items: center; gap: 10px; font-weight: 900; letter-spacing: .1em; font-size: 12px; color: var(--ym-navy); }
.rp-title { font-size: 26px; color: var(--ym-navy); margin-top: 14px; letter-spacing: -.4px; }
.rp-term { margin: 4px 0 0; color: var(--ym-muted); font-size: 14px; }
.rp-who { text-align: right; display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--ym-muted); }
.rp-who b { font-size: 18px; color: var(--ym-navy); }
html[dir="rtl"] .rp-who { text-align: left; }

.rp-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 22px 0 6px; border: 1px solid var(--ym-border); border-radius: var(--ym-radius-sm); overflow: hidden; }
.rp-fig { padding: 16px 18px; border-right: 1px solid var(--ym-border); }
.rp-fig:last-child { border-right: 0; }
.rp-fig dt { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ym-muted); font-weight: 800; }
.rp-fig dd { margin: 6px 0 0; font-size: 30px; font-weight: 900; color: var(--ym-navy); line-height: 1; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .rp-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-fig:nth-child(2n) { border-right: 0; }
  .rp-fig:nth-child(n+3) { border-top: 1px solid var(--ym-border); }
}

.rp-h { font-size: 15px; color: var(--ym-navy); margin: 26px 0 12px; letter-spacing: .02em; }
.rp-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
@media (max-width: 720px) { .rp-cols { grid-template-columns: 1fr; } }
.rp-row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--ym-border); font-size: 14px; color: var(--ym-muted); }
.rp-row b { color: var(--ym-navy); font-variant-numeric: tabular-nums; }
.rp-foot { margin: 26px 0 0; padding-top: 16px; border-top: 1px solid var(--ym-border); font-size: 12px; color: var(--ym-muted); }

@media print {
  .portal-sidebar, .portal-header, .portal-overlay, .no-print, .child-switch { display: none !important; }
  .portal-content { margin: 0 !important; }
  .portal-main { padding: 0 !important; }
  .report-sheet { box-shadow: none; border: 0; padding: 0; }
  body { background: #fff; }
}

/* =========================================================
   RTL
   ========================================================= */
html[dir="rtl"] .role-pill { margin-left: 0; margin-right: 8px; }
html[dir="rtl"] .hbar-row .hbar-val { text-align: left; }
html[dir="rtl"] .portal-sidebar { inset: 0 0 0 auto; border-right: 0; border-left: 1px solid rgba(255,255,255,.06); }
html[dir="rtl"] .portal-nav a { border-left: 0; border-right: 4px solid transparent; }
html[dir="rtl"] .portal-nav a.active { border-right-color: var(--ym-cyan); }
html[dir="rtl"] .portal-content { margin-left: 0; margin-right: var(--sidebar-w); }
html[dir="rtl"] table.data th, html[dir="rtl"] table.data td { text-align: right; }
html[dir="rtl"] .dropdown { right: auto; left: 0; }
html[dir="rtl"] .progress-bar .fill { background: linear-gradient(270deg, var(--ym-blue), var(--ym-cyan)); }
html[dir="rtl"] .timeline li { padding: 0 34px 22px 0; }
html[dir="rtl"] .timeline li::before { left: auto; right: 11px; }
html[dir="rtl"] .timeline .dot { left: auto; right: 0; }
html[dir="rtl"] .donut svg { transform: rotate(-90deg) scaleX(-1); }
html[dir="rtl"] .lesson .len { margin-left: 0; margin-right: auto; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
  .portal-sidebar { transform: translateX(-100%); }
  .portal-sidebar.open { transform: none; box-shadow: var(--ym-shadow); }
  html[dir="rtl"] .portal-sidebar { transform: translateX(100%); }
  html[dir="rtl"] .portal-sidebar.open { transform: none; }
  .portal-content { margin-left: 0; }
  html[dir="rtl"] .portal-content { margin-right: 0; }
  .portal-hamburger { display: grid; place-items: center; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .row-2 { grid-template-columns: minmax(0, 1fr); }
  .login-wrap { grid-template-columns: 1fr; }
  .login-aside { padding: 48px; min-height: auto; order: 2; }
}
@media (max-width: 780px) {
  .portal-main { padding: 20px; }
  .portal-header { padding: 0 16px; }
  .portal-header h1 { font-size: 18px; }
  /* a long title ("Co-admins" in Arabic) wraps rather than being cut off */
  .portal-header h1 { white-space: normal; line-height: 1.3; overflow-wrap: anywhere; }
  html[dir="rtl"] .portal-header h1 { line-height: 1.5; }   /* Arabic letters reach further below the line */
  .portal-usermenu .trigger b, .portal-usermenu .trigger .caret { display: none; }
  .login-aside { padding: 32px 24px; }
}
/* After the tablet rules above, so it wins on a phone. */
/* Phones: cards one under another. A short row of figures keeps its three
   columns (.grid-keep). */
@media (max-width: 640px) {
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .grid-3.grid-keep { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Printing any portal page: the page, not the app around it. */
@media print {
  .portal-sidebar, .portal-header, .no-print, .tabs, .btn { display: none !important; }
  .portal-content { margin-left: 0 !important; }
}

/* Form error. Was being set by class on two screens with nothing behind
   it, so the message showed as ordinary grey text. */
.error-text {
  margin: 6px 0 0;
  color: #c0392b;
  font-size: 13px;
  font-weight: 700;
}
.error-text:empty { display: none; }

/* ---- Phones: a data table becomes a stack of cards ----
   lib/ui-helpers.js labels every cell with its column's heading
   (data-label) and marks the table .stacks; below 640px each row is a
   card and each cell a "Heading: value" line, so nothing sits off the
   side of the screen — the hand-in, grade and accept buttons included. */
@media (max-width: 640px) {
  table.data.stacks thead { display: none; }
  table.data.stacks, table.data.stacks tbody, table.data.stacks tr { display: block; width: 100%; }
  table.data.stacks tr { border: 1px solid var(--ym-border); border-radius: var(--ym-radius-sm); padding: 4px 14px; margin-bottom: 10px; background: #fff; }
  table.data.stacks tbody tr:hover { background: #fff; }
  table.data.stacks td { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; border-bottom: 1px solid var(--ym-border); padding: 10px 0; text-align: end; }
  table.data.stacks td:last-child { border-bottom: 0; }
  table.data.stacks td::before { content: attr(data-label); color: var(--ym-muted); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; text-align: start; }
  table.data.stacks td:not([data-label])::before, table.data.stacks td[data-label=""]::before { content: none; }
  table.data.stacks td[colspan] { display: block; text-align: start; }
  table.data.stacks .btn { min-height: 40px; }
  .table-wrap { overflow-x: visible; }
}

/* "Install the app" (public/pwa.js) shows only when the phone can install */
[data-install-app][hidden] { display: none !important; }
/* where the installed app opens (portal/app.html) */
.app-splash { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 12px; background: var(--ym-bg); }
.app-splash img { border-radius: 22px; }
.app-splash p { margin: 0; font-weight: 800; font-size: 20px; color: var(--ym-navy); }