/* =========================================================
   Subjex — 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: #0b2f2c;      /* deep ink-teal — headings, sidebar */
  --ym-navy-2: #12433e;
  --ym-blue: #0d7268;      /* primary */
  --ym-cyan: #19b8a0;      /* accent */
  --ym-sky: #e8f8f4;       /* tinted surfaces */
  --ym-white: #ffffff;
  --ym-text: #1c2e2b;
  --ym-muted: #6b8480;
  --ym-border: #d2e9e3;
  --ym-bg: #f5faf8;
  --ym-dark: #051a18;

  /* Per-subject accents. Chemistry = emerald, Combined Science = violet. */
  --ym-chem: #0d7268;
  --ym-chem-2: #19b8a0;
  --ym-chem-soft: #e8f8f4;
  --ym-combined: #6d4bd8;
  --ym-combined-2: #a78bfa;
  --ym-combined-soft: #f1ecff;

  --ym-shadow: 0 18px 45px rgba(11, 47, 44, 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(13,114,104,.25); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(13,114,104,.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(25,184,160,.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(13,114,104,.25);
}
/* Subjex gear mark (recreated as SVG) 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(25,184,160,.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; }
.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(11,47,44,.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; }
.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(11,47,44,.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(25,184,160,.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; }
.badge-success { background: #e4f6ec; color: #1b8a4b; }
.badge-warning { background: #fdeede; color: #c9760a; }
.badge-info { background: var(--ym-sky); color: var(--ym-blue); }
.badge-neutral { background: #eaf1ef; color: var(--ym-muted); }
.badge-cyan { background: rgba(25,184,160,.16); color: #0a5c54; }
.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; }

/* =========================================================
   COURSE / PROGRAM CARDS
   ========================================================= */
.course-card { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--ym-border); border-radius: var(--ym-radius); box-shadow: 0 8px 26px rgba(11,47,44,.06); padding: 24px; transition: transform var(--ym-transition), box-shadow var(--ym-transition), border-color var(--ym-transition); }
.course-card::before { content: ""; position: absolute; inset: auto 0 0 0; height: 5px; background: linear-gradient(90deg, var(--ym-blue), var(--ym-cyan)); }
.course-card:hover { transform: translateY(-7px); border-color: rgba(25,184,160,.45); box-shadow: var(--ym-shadow); }
.course-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; }
.course-card h3 { color: var(--ym-navy); font-size: 19px; margin-bottom: 6px; }
.course-card .corner { position: absolute; top: 18px; right: 18px; z-index: 1; }

/* ---- 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); }

.course-card[data-subject]::before { background: linear-gradient(90deg, var(--sub-1), var(--sub-2)); }
[data-subject] .course-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. */
.course-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);
}
.course-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 */
.course-card.subject-tile { padding-top: 26px; }
.course-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"] .course-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 .course-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 (course 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
   ========================================================= */
.portal-modal { position: fixed; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center; padding: 20px; }
.portal-modal.open { display: flex; }
.portal-modal .backdrop { position: absolute; inset: 0; background: rgba(4,17,31,.55); }
.portal-modal .modal-card { position: relative; z-index: 1; 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; }

/* =========================================================
   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(25,184,160,.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(25,184,160,.22); box-shadow: inset 0 0 0 2px #19b8a0;
}
.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: 12px; transform: translateY(-50%); border: 0; background: none; cursor: pointer; font-size: 16px; color: var(--ym-muted); }
.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; }
.course-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); }
.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(13,114,104,.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; }

/* 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: 7px 14px; 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 (course 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(25,184,160,.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 90px 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(11,47,44,.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(25,184,160,.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(13,114,104,.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.2; overflow-wrap: anywhere; }
  .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; }