does the
expanding natively and the page never becomes a hundred-name scroll. */
.t-fold + .t-fold { margin-top: .9rem; }
.t-fold__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
flex-wrap: wrap;
padding: .55rem .35rem;
cursor: pointer;
list-style: none;
border-radius: .5rem;
}
.t-fold__head::-webkit-details-marker { display: none; }
.t-fold__head:hover { background: var(--bs-tertiary-bg, rgba(0, 0, 0, .03)); }
.t-fold__head:focus-visible { outline: 2px solid var(--sidebar-accent, #157347); outline-offset: 2px; }
/* Disclosure caret: DOWN when closed (the content is below), UP when open. Physical borders, and no
RTL branch — a vertical caret must not mirror, and the logical/RTL version pointed up while closed,
which reads as "collapse me" on a section that is already collapsed. */
.t-fold__head::before {
content: "";
width: .45rem;
height: .45rem;
flex: none;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-2px) rotate(45deg);
opacity: .5;
transition: transform .15s ease;
margin-inline-end: .1rem;
}
.t-fold[open] > .t-fold__head::before { transform: translateY(2px) rotate(-135deg); }
.t-fold__title { font-weight: 600; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.t-fold__count { color: var(--bs-secondary-color, #6c757d); font-size: .85rem; margin-inline-start: auto; }
.t-fold > .t-panel { margin-top: .35rem; }
@media (prefers-reduced-motion: reduce) {
.t-fold__head::before { transition: none; }
}
/* "تواصل مع تحفيظ" — reachable but out of the daily task flow, so it sits alone at the foot behind
a divider rather than competing with the work links above it. */
.app-nav-foot {
margin-top: auto;
padding-top: .6rem;
border-top: 1px solid rgba(255, 255, 255, .1);
}
.app-nav-icon { font-size: 1.15rem; line-height: 1; width: 1.5rem; text-align: center; }
.app-nav-label { flex: 1 1 auto; }
.app-nav-badge { font-size: .7rem; }
/* mobile (default): off-canvas drawer */
.app-sidebar { transform: translateX(-100%); }
[dir="rtl"] .app-sidebar { transform: translateX(100%); }
body.sidebar-open .app-sidebar { transform: none; }
.app-sidebar-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .4);
z-index: 1040;
}
body.sidebar-open .app-sidebar-backdrop { display: block; }
.app-sidebar-toggle { font-size: 1.2rem; line-height: 1; padding: .15rem .6rem; min-height: 44px; }
/* ============================================================
Recording table — one markup at every width.
============================================================ */
/* Recording TABLE at every width: a header row, then one short row per learner (# | name | ID |
attendance | ▾). Header and rows share one grid template so the columns line up; tapping a row
opens its entry underneath, full width. The layout keys off the TABLE's width (container query),
not the viewport's — the sidebar decides how much room it really has. */
.qrec-wrap { container-type: inline-size; }
.qrec {
/* fixed widths (not auto): header and rows are separate grids, and auto would size each on its own */
--qrec-cols: 2rem minmax(7rem, 1fr) 6.8rem 11rem 1.8rem;
border: 1px solid var(--t-line); border-radius: var(--t-radius); overflow: hidden; background: #fff;
overflow: clip; /* clips like hidden but is no scroll container, so the sticky .part-tabs can stick */
}
.qrec-head {
display: grid; grid-template-columns: var(--qrec-cols); align-items: center; gap: .6rem;
padding: .45rem .75rem; background: #f3f7f6; border-bottom: 1px solid var(--t-line);
font-size: .8rem; font-weight: 700; color: var(--t-muted);
}
.qrec-row { border-bottom: 1px solid #eef2f1; background: #fff; transition: background .15s ease; }
.qrec-row:last-child { border-bottom: 0; }
.qrec-row.is-absent { background: #fdf5f5; }
.qrec-row.is-excused { background: #fdf8f3; }
.qrec-summary {
display: grid; grid-template-columns: var(--qrec-cols); align-items: center; gap: .6rem;
padding: .3rem .75rem; cursor: pointer;
}
.qrec-summary:hover { background: rgba(15, 61, 62, .03); }
.qrec-num { color: var(--t-muted); font-size: .8rem; font-variant-numeric: tabular-nums; text-align: center; }
.qc-num { text-align: center; }
.qrec-name { min-width: 0; font-weight: 600; line-height: 1.3; }
.qrec-nid { font-size: .82rem; color: var(--t-muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* collapsed-row recap: what's recorded, at a glance */
.qrec-recap { font-size: .72rem; font-weight: 400; margin-top: .1rem; line-height: 1.35; word-break: break-word; }
.qrec-recap.done { color: #157347; font-weight: 600; }
.qrec-recap.pending { color: #aab4b2; }
.qrec-recap.exc { color: var(--t-amber); font-weight: 600; }
.qrec-recap.off { color: #b3261e; font-weight: 600; }
/* absent / excused / awaiting only echo the attendance buttons beside them — don't spend a line on it */
.qrec-recap.exc, .qrec-recap.off, .qrec-recap.pending { display: none; }
/* today's plan target hint under the learner name */
.qrec-target { margin-top: .3rem; display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.qrec-target-lbl { font-size: .74rem; color: var(--t-muted); font-weight: 600; }
/* "لا خطة" indicator on a learner's recording card */
.noplan-badge { display: inline-block; margin-inline-start: .4rem; font-size: .68rem; font-weight: 700; border-radius: 999px; padding: .08rem .5rem; background: #fde2e1; color: #b3261e; }
/* dev-only "simulate day" widget in the topbar */
.dev-clock { display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem; font-weight: 700; background: #fff3cd; color: #7a5b00; border: 1px solid #f0d98c; border-radius: 999px; padding: .12rem .55rem; margin-inline-start: .5rem; white-space: nowrap; }
.dev-clock__btn { color: var(--t-brand, #0f3d3e); text-decoration: none; border: 1px solid #d9c98a; border-radius: 6px; padding: 0 .35rem; background: #fff; }
.dev-clock__btn:hover { background: #f3faf5; }
.qrec-row.open .qrec-recap { display: none; }
.qrec-entry { display: none; padding: .4rem .75rem .85rem; border-top: 1px dashed #e3ebe9; }
.qrec-row.open .qrec-entry { display: block; }
.qrec-cell { margin-top: .75rem; }
.qrec-cell::before {
content: attr(data-label);
display: block;
font-size: .85rem;
font-weight: 600;
margin-bottom: .35rem;
color: var(--t-brand);
}
.qrec-save { margin-top: .9rem; }
.qrec-save .q-save { width: 100%; }
.qrec-chev {
border: 0; background: transparent; color: #6a8a87;
font-size: 1.05rem; line-height: 1; padding: .2rem .3rem; transition: transform .2s ease;
}
.qrec-row.open .qrec-chev { transform: rotate(180deg); }
/* attendance — 3-state segmented control (Present / Excused / Absent) */
.att-seg { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--t-line); border-radius: 11px; overflow: hidden; }
.att-opt { appearance: none; border: 0; background: var(--t-surface); color: var(--t-muted); font: inherit; font-weight: 700; font-size: .82rem; padding: .5rem .55rem; min-height: 44px; cursor: pointer; border-inline-start: 1px solid var(--t-line); }
/* in the recording table the control sits in a normal-height row */
.qrec .att-seg { border-radius: 8px; }
/* min-width:0 lets the three buttons share the column instead of spilling over the name */
.qrec .att-opt { min-height: 30px; min-width: 0; padding: .2rem .15rem; font-size: .78rem; flex: 1 1 0; text-align: center; white-space: nowrap; }
.qrec-summary .att-seg { display: flex; width: 100%; min-width: 0; }
/* narrow table (phone, or a tight window): five columns don't fit, so the ID tucks under the name */
@container (max-width: 559.98px) {
.qrec { --qrec-cols: 1.5rem minmax(0, 1fr) 9.3rem 1.3rem; }
.qrec-head .qc-nid { display: none; }
.qrec-head, .qrec-summary { column-gap: .45rem; padding-inline: .5rem; }
.qrec-summary { grid-template-areas: "num name att chev" "num nid att chev"; row-gap: 0; }
.qrec-num { grid-area: num; }
.qrec-name { grid-area: name; }
.qrec-nid { grid-area: nid; font-size: .74rem; }
.qrec-summary .att-seg { grid-area: att; }
.qrec-summary .qrec-chev { grid-area: chev; }
.qrec .att-opt { font-size: .72rem; }
}
.att-opt:first-child { border-inline-start: 0; }
.att-opt.on.p { background: var(--t-green); color: #fff; }
.att-opt.on.e { background: var(--t-amber); color: #fff; }
.att-opt.on.a { background: #c0392b; color: #fff; }
[data-bs-theme="dark"] .att-opt { background: var(--t-surface); color: var(--t-muted); border-color: var(--t-line); }
/* cascade: full-width selects that wrap — no sideways scroll on a phone */
.qpick { display: flex; flex-wrap: wrap; gap: .4rem; }
.qpick .form-select { flex: 1 1 40%; min-width: 0; }
.qual-sel { width: 100%; }
/* 16px text stops iOS Safari auto-zoom on focus; bigger tap targets */
.form-select, .form-control { font-size: 16px; }
.qrec .form-select, .qrec .btn { min-height: 44px; }
/* درس (new) = green, مراجعة (revision) = orange — colour-code the two ranges */
.col-lesson { color: var(--t-green); }
.col-revision { color: var(--t-amber); }
.qpick-lesson .form-select { border-color: #b6dcc5; background-color: #f3faf5; }
.qpick-lesson .form-select:focus { border-color: #157347; box-shadow: 0 0 0 .2rem rgba(25, 135, 84, .2); }
.qpick-revision .form-select { border-color: #f3cda0; background-color: #fff7ee; }
.qpick-revision .form-select:focus { border-color: #e8590c; box-shadow: 0 0 0 .2rem rgba(253, 126, 20, .25); }
/* desktop: sidebar pinned, content offset */
@media (min-width: 768px) {
.app-sidebar,
[dir="rtl"] .app-sidebar { transform: none; }
body.has-sidebar .app-content { margin-inline-start: var(--sidebar-w); }
.app-sidebar-backdrop { display: none !important; }
/* collapsed: slide the pinned sidebar away and reclaim the space */
body.sidebar-collapsed .app-sidebar { transform: translateX(-100%); }
[dir="rtl"] body.sidebar-collapsed .app-sidebar { transform: translateX(100%); }
body.sidebar-collapsed.has-sidebar .app-content { margin-inline-start: 0; }
}
/* ============================================================
"Calm Scholarly" design layer — refined components shared by
the teacher home + التقدم pages. Harmonised with the existing
deep teal-green / gold app shell. Scoped via .t-* classes so
the rest of the app is untouched. RTL-safe (logical props).
============================================================ */
:root {
--t-font: 'Readex Pro', system-ui, 'Segoe UI', Tahoma, sans-serif;
/* Re-point Bootstrap's default blue to the brand (links / .text-primary). */
--bs-primary: #157347;
--bs-primary-rgb: 21, 115, 71;
--bs-link-color: #157347;
--bs-link-color-rgb: 21, 115, 71;
--bs-link-hover-color: #0f5a37;
--t-brand: #0f3d3e; /* deep teal-green (matches sidebar) */
--t-green: #157347; /* memorization / درس */
--t-green-soft: #e8f3ec;
--t-amber: #c05600; /* revision / مراجعة */
--t-amber-soft: #fbeede;
--t-amber-ink: #863c00; /* amber TEXT on amber-soft — ≥7:1 (plain --t-amber is only 4:1) */
--t-gold: #f5c451;
--t-red: #c0392b; /* blocked right now — the top of the count scale */
--t-blue: #1d5fb4; /* مراجعة الدرس السابق — the third part colour beside درس/مراجعة */
--t-surface: #ffffff;
--t-bg: #fbfcfb;
--t-ink: #16231f;
--t-muted: #6c7d7b;
--t-line: #e6ede9;
--t-radius: 16px;
--t-shadow: 0 1px 2px rgba(15, 61, 62, .05), 0 14px 30px -18px rgba(15, 61, 62, .28);
--t-shadow-hover: 0 2px 4px rgba(15, 61, 62, .06), 0 22px 40px -20px rgba(15, 61, 62, .38);
--t-th-bg: #eef5f2; /* table header + sticky first column */
--t-row-hover: #f7faf8;
}
body { font-family: var(--t-font); color: var(--t-ink); background: var(--t-bg); }
/* page hero ------------------------------------------------- */
.t-hero {
position: relative; overflow: hidden;
display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
padding: 1.15rem 1.35rem;
margin-bottom: 1.5rem;
background: linear-gradient(110deg, var(--t-brand) 0%, #134e4a 60%, #0c5c4a 100%);
border-radius: var(--t-radius);
color: #eafaf5;
box-shadow: var(--t-shadow);
}
/* faint Islamic-geometric watermark in the hero corner */
.t-hero::after {
content: ""; position: absolute; inset-block: -40%; inset-inline-end: -3%;
width: 220px; opacity: .12; pointer-events: none;
background:
repeating-conic-gradient(from 22.5deg, var(--t-gold) 0deg 45deg, transparent 45deg 90deg);
-webkit-mask: radial-gradient(circle at center, #000 60%, transparent 62%);
mask: radial-gradient(circle at center, #000 60%, transparent 62%);
transform: rotate(8deg);
}
.t-hero__title { margin: 0; font-weight: 700; font-size: 1.5rem; line-height: 1.2; }
.t-hero__sub { color: #bfe4da; font-size: .92rem; }
/* An action in the hero ("+ إضافة عضو"). The back links that used to share this pill are gone —
the sidebar is the way around — so nothing here carries an arrow any more. */
.t-hero__act {
display: inline-flex; align-items: center; gap: .35rem;
background: rgba(255, 255, 255, .14); color: #eafaf5; text-decoration: none;
border-radius: 999px; padding: .4rem .85rem; font-size: .9rem; font-weight: 500;
transition: background .18s ease;
}
.t-hero__act:hover { background: rgba(255, 255, 255, .26); color: #fff; }
.t-hero__spacer { flex: 1 1 auto; }
/* stat tiles ------------------------------------------------ */
.t-stats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 1.6rem; }
.t-stat {
position: relative; overflow: hidden;
background: var(--t-surface); border: 1px solid var(--t-line);
border-radius: var(--t-radius); padding: 1.15rem 1.3rem;
box-shadow: var(--t-shadow);
display: flex; align-items: center; gap: 1rem;
}
.t-stat::before { /* colored rail on the inline-start edge */
content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 5px;
background: var(--rail, var(--t-green));
}
.t-stat__icon {
flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px;
display: grid; place-items: center; font-size: 1.4rem;
background: var(--chip, var(--t-green-soft));
}
.t-stat__body { min-width: 0; flex: 1 1 auto; }
/* denominator beside a headline figure: present, but never competing with it */
.t-of { font-size: .5em; font-weight: 600; opacity: .55; margin-inline-start: .1em; }
.t-stat__num { font-size: 2.1rem; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.t-stat__label { color: var(--t-muted); font-size: .88rem; margin-top: .2rem; }
.t-stat--green { --rail: var(--t-green); --chip: var(--t-green-soft); }
.t-stat--green .t-stat__num { color: var(--t-green); }
.t-stat--amber { --rail: var(--t-amber); --chip: var(--t-amber-soft); }
.t-stat--amber .t-stat__num { color: var(--t-amber); }
.t-stat--brand { --rail: var(--t-brand); --chip: #e4efee; }
.t-stat--brand .t-stat__num { color: var(--t-brand); }
.t-stat--red { --rail: #c0392b; --chip: #f8e7e4; }
.t-stat--red .t-stat__num { color: #c0392b; }
/* inline SVG icons — hero chip, KPI tile, hub card, inline title (#15) ------ */
.t-ico { display: inline-block; vertical-align: middle; }
.t-hero__icon {
flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px;
display: grid; place-items: center; background: rgba(255, 255, 255, .16); color: #eafaf5;
}
.t-hero__icon .t-ico { width: 28px; height: 28px; }
.t-stat__icon .t-ico { width: 24px; height: 24px; color: var(--rail, var(--t-green)); }
.t-hub__icon .t-ico { width: 24px; height: 24px; color: var(--t-green); }
.t-circle__name .t-ico, .t-hub__title .t-ico {
width: 20px; height: 20px; vertical-align: -4px; color: var(--t-green); margin-inline-end: .15rem;
}
.t-hero__title .t-ico { width: 26px; height: 26px; vertical-align: -4px; margin-inline-end: .35rem; }
.app-nav-icon .t-ico { width: 20px; height: 20px; }
.bn-ico .t-ico { width: 22px; height: 22px; }
/* Tap target stays 44px; the avatar inside is a fixed square, so the button no longer draws a
rounded rectangle around a stretched circle. */
#acctMenu { min-height: 44px; min-width: 44px; padding: 0; border: 0; background: transparent; }
#acctMenu .t-ico { width: 18px; height: 18px; vertical-align: -3px; }
.dropdown-menu .t-ico { width: 16px; height: 16px; vertical-align: -3px; margin-inline-end: .5rem; }
[data-bs-theme="dark"] .t-hub__icon .t-ico,
[data-bs-theme="dark"] .t-circle__name .t-ico,
[data-bs-theme="dark"] .t-hub__title .t-ico,
[data-bs-theme="dark"] .t-stat--brand .t-stat__icon .t-ico { color: #8fd3c9; }
/* teacher home — "record today" (Approach A) --------------- */
.th-today { text-align: center; line-height: 1.2; }
.th-today__dow { display: block; font-weight: 700; font-size: 1.05rem; color: #eafaf5; }
.th-today__date { display: block; font-size: .82rem; color: #bfe4da; }
.th-switch { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.th-switch__label { font-size: .85rem; font-weight: 600; color: var(--t-muted); margin-inline-end: 2px; }
.th-pill { border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: .95rem; border: 1.5px solid var(--t-green); color: var(--t-green); background: #fff; text-decoration: none; transition: transform .15s ease, background .15s ease; }
.th-pill:hover { transform: translateY(-1px); }
.th-pill--on { background: var(--t-green); color: #fff; }
.th-card { position: relative; overflow: hidden; display: block; border-radius: 20px; padding: 1.9rem 1.5rem; text-align: center; text-decoration: none; box-shadow: 0 10px 28px rgba(15,61,62,.12); margin-bottom: 1rem; }
.th-card--go { background: linear-gradient(135deg, var(--t-green), #17585a); color: #fff; transition: transform .15s, box-shadow .15s; }
.th-card--go::after { /* faint Islamic-geometric watermark, echoing .t-hero */
content: ""; position: absolute; inset-block: -45%; inset-inline-end: -8%;
width: 210px; opacity: .16; pointer-events: none;
background: repeating-conic-gradient(from 22.5deg, var(--t-gold) 0deg 45deg, transparent 45deg 90deg);
-webkit-mask: radial-gradient(circle at center, #000 60%, transparent 62%);
mask: radial-gradient(circle at center, #000 60%, transparent 62%);
transform: rotate(8deg);
}
.th-card--go:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(15,61,62,.22); color: #fff; }
.th-card__badge { position: relative; display: inline-block; background: rgba(255,255,255,.18); color: #fff; font-weight: 700; font-size: .85rem; padding: .3rem .95rem; border-radius: 999px; margin-bottom: .95rem; }
.th-card__title { position: relative; font-weight: 800; font-size: 1.5rem; margin-bottom: .3rem; }
.th-card__learners { position: relative; font-size: .95rem; opacity: .9; margin-bottom: 1.15rem; }
.th-when { font-size: 1rem; opacity: .85; margin-bottom: 1rem; }
.th-cta { position: relative; display: inline-block; background: var(--t-gold); color: var(--t-brand); font-weight: 800; font-size: 1.5rem; border-radius: 16px; padding: .9rem 1.7rem; box-shadow: 0 6px 16px rgba(0,0,0,.15); }
.th-meta { font-size: .95rem; opacity: .9; margin-top: 1rem; color: inherit; }
.th-card--done { background: #eaf5ec; border: 1.5px solid #2e7d32; color: #1b5e20; }
.th-ok { font-size: 2.6rem; line-height: 1; }
.th-title { font-weight: 800; font-size: 1.3rem; margin: .4rem 0; }
.th-card--calm { background: #f3f5f4; border: 1px dashed #b9c2c1; color: #3a4544; }
.th-card--calm .th-title { color: var(--t-green); }
.th-btn { display: inline-block; border-radius: 12px; padding: .7rem 1.4rem; font-weight: 700; text-decoration: none; margin-top: 1rem; }
.th-btn--outline { border: 1.5px solid currentColor; color: inherit; background: transparent; }
.th-chips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.th-chip { display: inline-block; background: #e9f0ef; color: var(--t-green); border-radius: 999px; padding: .5rem 1rem; font-weight: 600; font-size: .9rem; text-decoration: none; }
.th-chip--red { background: #f8e1de; color: #b3261e; }
/* manager home — lean "attention first" landing (mh-*) ------ */
.mh-actions { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.mh-act { display: inline-block; border-radius: 999px; padding: .4rem .9rem; font-size: .88rem; font-weight: 600; text-decoration: none;
background: rgba(255,255,255,.15); color: #eafaf5; border: 1px solid rgba(255,255,255,.28); transition: background .15s ease, transform .15s ease; }
.mh-act:hover { background: rgba(255,255,255,.28); color: #fff; transform: translateY(-1px); }
.mh-act--primary { background: var(--t-gold); color: var(--t-brand); border-color: transparent; }
.mh-act--primary:hover { background: #f7cf6a; color: var(--t-brand); }
.mh-section { margin-bottom: 1.4rem; }
.mh-title { margin: 0; font-weight: 700; font-size: 1.12rem; color: var(--t-ink); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.mh-title small { font-weight: 500; font-size: .82rem; color: var(--t-muted); }
.mh-title--warn { color: var(--t-amber); margin-bottom: .8rem; }
.mh-title__dot { font-size: 1rem; }
.mh-row { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) { .mh-row { grid-template-columns: 1fr; } }
.mh-card { position: relative; overflow: hidden; display: block; text-decoration: none; color: var(--t-ink);
background: var(--t-surface); border: 1px solid var(--t-line); border-radius: var(--t-radius);
padding: 1.15rem 1.3rem 1.2rem; box-shadow: var(--t-shadow);
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.mh-card:hover { transform: translateY(-3px); box-shadow: var(--t-shadow-hover); border-color: #bcdcd2; color: var(--t-ink); }
.mh-card::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--mh-rail, transparent); }
.mh-card--attend { --mh-rail: var(--t-green); }
/* head is a left cluster (icon + title), with count + chevron pushed to the end */
.mh-card__head { display: flex; align-items: center; gap: .55rem; margin-bottom: .7rem; }
.mh-card__head .mh-title { font-size: 1.04rem; font-weight: 800; }
.mh-card__go { margin-inline-start: auto; }
.mh-muted { color: var(--t-muted); font-size: .9rem; margin: 0; }
.mh-tally { display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem; }
.mh-tally__n { text-align: center; border-radius: 12px; padding: .6rem .3rem .45rem;
background: #f5f8f7; border: 1px solid var(--t-line); }
.mh-tally__n b { display: block; font-size: 1.55rem; line-height: 1; font-weight: 800; }
.mh-tally__n span { display: block; margin-top: .2rem; font-size: .74rem; color: var(--t-muted); }
.mh-tally__n--p { background: var(--t-green-soft); border-color: #bfe0d1; }
.mh-tally__n--p b { color: var(--t-green); }
.mh-tally__n--a { background: #fbeceb; border-color: #f0cdc9; }
.mh-tally__n--a b { color: #c0392b; }
.mh-tally__n--e { background: var(--t-amber-soft); border-color: #e6c294; }
.mh-tally__n--e b { color: var(--t-amber); }
.mh-tally__n--u b { color: #8a9a95; }
.mh-badge { background: var(--t-amber-soft); color: var(--t-amber-ink); border-radius: 999px; padding: .05rem .55rem; font-size: .82rem; font-weight: 700; }
.mh-appr { list-style: none; margin: 0; padding: 0; }
.mh-appr__item { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .4rem 0; border-bottom: 1px solid var(--t-line); font-size: .92rem; }
.mh-appr__item:last-child { border-bottom: 0; }
.mh-appr__role { color: var(--t-muted); font-size: .82rem; }
.mh-appr__more { margin-top: .3rem; }
/* announcements (an-*) — home banner + manage list -------- */
.an-banner { display: flex; gap: .85rem; align-items: flex-start;
background: var(--t-green-soft); border: 1px solid #bcdcd2; border-inline-start: 4px solid var(--t-green);
border-radius: 14px; padding: .9rem 1.1rem; margin-bottom: 1.3rem; }
.an-banner__icon { color: var(--t-green); flex: 0 0 auto; margin-top: 2px; }
.an-banner__title { font-weight: 700; color: var(--t-brand); }
.an-banner__body { color: var(--t-ink); font-size: .94rem; white-space: pre-line; margin-top: .15rem; }
.an-list { display: flex; flex-direction: column; gap: .7rem; }
.an-item { display: flex; gap: 1rem; justify-content: space-between; align-items: flex-start;
background: var(--t-surface); border: 1px solid var(--t-line); border-radius: var(--t-radius);
padding: 1rem 1.15rem; box-shadow: var(--t-shadow); }
.an-item--off { opacity: .62; }
.an-item__head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.an-item__title { font-weight: 700; font-size: 1.05rem; color: var(--t-ink); }
/* in the table the notice is a preview, not the notice: two lines, then the row stays a row. */
.an-item__body { color: var(--t-muted); font-size: .92rem; margin-top: .3rem; white-space: pre-line;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.an-item__meta { color: var(--t-muted); font-size: .8rem; margin-top: .4rem; }
.an-item__actions { display: flex; gap: .4rem; flex-wrap: wrap; flex: 0 0 auto; }
.an-badge { background: #eef2f0; color: var(--t-muted); border-radius: 999px; padding: .1rem .6rem; font-size: .78rem; font-weight: 700; }
.an-badge--on { background: var(--t-green-soft); color: var(--t-green); }
.an-badge--aud { background: #eef4fb; color: #2b5c8a; }
/* home announcement feed (an-feed / an-note) — several notices may stack ------ */
.an-feed { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 1.4rem; }
.an-note {
position: relative; overflow: hidden;
display: flex; gap: .95rem; align-items: flex-start;
background:
linear-gradient(180deg, rgba(21,115,71,.05), rgba(21,115,71,0) 60%),
var(--t-surface);
border: 1px solid #cfe3da; border-radius: 16px;
padding: 1rem 1.15rem 1rem 1.25rem;
box-shadow: var(--t-shadow);
animation: an-rise .45s cubic-bezier(.2,.7,.2,1) both;
}
.an-note::before { /* accent rail: brand → green gradient */
content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 5px;
background: linear-gradient(180deg, var(--t-brand), var(--t-green));
}
.an-note:nth-child(2) { animation-delay: .06s; }
.an-note:nth-child(3) { animation-delay: .12s; }
.an-note:nth-child(n+4) { animation-delay: .18s; }
.an-note__mark {
flex: 0 0 auto; display: grid; place-items: center;
width: 42px; height: 42px; border-radius: 12px;
color: var(--t-green); background: var(--t-green-soft);
box-shadow: inset 0 0 0 1px #bfe0d1;
}
.an-note__mark .t-ico { width: 22px; height: 22px; }
.an-note__content { min-width: 0; flex: 1 1 auto; }
.an-note__title { margin: 0; font-size: 1.04rem; font-weight: 800; color: var(--t-brand); line-height: 1.3; }
.an-note__body { margin: .2rem 0 0; color: var(--t-ink); font-size: .94rem; white-space: pre-line; }
.an-note__meta { margin-top: .55rem; }
.an-note__timer {
display: inline-flex; align-items: center; gap: .35rem;
font-size: .76rem; font-weight: 700; letter-spacing: .1px;
color: var(--t-amber); background: var(--t-amber-soft, #fbe9d6);
border-radius: 999px; padding: .16rem .6rem;
}
.an-note__timer::before { /* tiny clock glyph, pure CSS (no emoji) */
content: ""; width: 11px; height: 11px; border-radius: 50%;
border: 1.6px solid currentColor;
box-shadow: inset 0 -3px 0 -2px currentColor, inset -3px 0 0 -2px currentColor;
}
@keyframes an-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .an-note { animation: none; } }
/* one notice at a time (see the rotator in site.js): the box keeps the height of whichever note
is showing, and the dots say how many are waiting behind it. */
.an-rotator { position: relative; }
.an-dots { display: flex; gap: .35rem; justify-content: center; margin-top: .5rem; }
.an-dot { width: 8px; height: 8px; padding: 0; border-radius: 50%; border: 0; cursor: pointer;
background: var(--t-line); transition: background .18s ease, transform .18s ease; }
.an-dot.is-on { background: var(--t-green); transform: scale(1.25); }
.an-dot:focus-visible { outline: 2px solid var(--t-green); outline-offset: 2px; }
/* survey vote card (sv-*) — inline poll inside the announcement feed ---------- */
.an-note--survey .an-note__mark { color: var(--t-brand); }
.sv-voted { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; margin: .5rem 0 .1rem; }
.sv-voted__badge { font-size: .78rem; font-weight: 800; color: var(--t-green); background: var(--t-green-soft);
border: 1.5px solid #bfe0d1; border-radius: 999px; padding: .1rem .6rem; }
.sv-voted__answer { font-size: .86rem; color: var(--t-muted); font-weight: 600; }
.sv-form { margin-top: .6rem; }
.sv-options { display: flex; flex-direction: column; gap: .4rem; }
.sv-opt { display: flex; align-items: center; gap: .55rem; padding: .5rem .7rem; margin: 0;
border: 1.5px solid var(--t-line); border-radius: 10px; background: var(--t-surface); cursor: pointer;
transition: border-color .12s, background .12s; }
.sv-opt:hover { border-color: #bcdcd2; background: #f6faf8; }
.sv-opt__input { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; accent-color: var(--t-green); }
.sv-opt__input:checked ~ .sv-opt__text { font-weight: 700; color: var(--t-brand); }
.sv-opt__text { font-size: .93rem; }
.sv-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
/* survey options editor on the form (an-opt-*) + locked list ------------------ */
.an-survey { border: 1.5px dashed #bcdcd2; border-radius: 12px; padding: .85rem 1rem; background: #f7fbf9; }
#an-opts { display: flex; flex-direction: column; gap: .5rem; }
.an-opt-row { display: flex; gap: .5rem; align-items: center; }
.an-opt-row .form-control { flex: 1 1 auto; }
.an-opt-row .an-opt-del { flex: 0 0 auto; line-height: 1; padding: .25rem .6rem; font-weight: 800; }
.an-opts-locked { margin: 0; padding-inline-start: 1.1rem; color: var(--t-ink); }
/* staff survey results (sr-*) ------------------------------------------------- */
.sr-panel { padding: 1.1rem 1.25rem; }
.sr-total { color: var(--t-muted); margin-bottom: 1rem; }
.sr-row { margin-bottom: 1rem; }
.sr-row__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.sr-row__text { font-weight: 700; }
.sr-row__count { font-weight: 800; color: var(--t-brand); }
.sr-bar { height: 9px; border-radius: 999px; background: #e9f0ec; overflow: hidden; margin: .35rem 0; }
.sr-bar__fill { display: block; height: 100%; background: linear-gradient(90deg, var(--t-brand), var(--t-green)); }
.sr-voters { font-size: .84rem; color: var(--t-muted); }
[data-bs-theme="dark"] .an-survey { background: #16211f; border-color: #284034; }
[data-bs-theme="dark"] .sv-opt { background: #16211f; border-color: #284034; }
[data-bs-theme="dark"] .sv-opt:hover { background: #1a2a24; border-color: #2f5744; }
[data-bs-theme="dark"] .sr-bar { background: #223129; }
/* announcement form — audience picker (an-aud) ------------------------------- */
.an-aud { display: flex; flex-wrap: wrap; gap: .5rem; }
.an-aud__opt {
display: inline-flex; align-items: center; gap: .45rem;
border: 1px solid var(--t-line); border-radius: 999px;
padding: .4rem .85rem; cursor: pointer; user-select: none;
font-weight: 600; color: var(--t-ink); transition: border-color .15s, background .15s;
}
.an-aud__opt:has(input:checked) { border-color: var(--t-green); background: var(--t-green-soft); color: var(--t-green); }
.an-aud__opt .form-check-input { margin: 0; }
/* learner-registration tabs (lt-*) — Student / Child / Transfer, CSS-only ----- */
.lt-radio { position: absolute; opacity: 0; pointer-events: none; }
.lt-bar { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.lt-tab {
display: flex; align-items: center; gap: .7rem; cursor: pointer;
flex: 1 1 200px; min-width: 180px;
background: var(--t-surface); border: 1px solid var(--t-line); border-radius: 14px;
padding: .75rem .9rem; transition: border-color .15s, box-shadow .15s, background .15s;
}
.lt-tab__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px;
color: var(--t-muted); background: #eef2f0; flex: 0 0 auto; }
.lt-tab__ico .t-ico { width: 21px; height: 21px; }
.lt-tab__title { display: block; font-weight: 800; color: var(--t-ink); }
.lt-tab__sub { display: block; font-size: .78rem; color: var(--t-muted); }
.lt-panel { display: none; animation: an-rise .35s cubic-bezier(.2,.7,.2,1) both; }
/* active tab + matching panel (sibling selectors need the radios to precede these) */
#lt-student:checked ~ .lt-bar .lt-tab[for="lt-student"],
#lt-child:checked ~ .lt-bar .lt-tab[for="lt-child"],
#lt-transfer:checked ~ .lt-bar .lt-tab[for="lt-transfer"] {
border-color: var(--t-green); background: var(--t-green-soft);
box-shadow: inset 0 0 0 1px var(--t-green);
}
#lt-student:checked ~ .lt-bar .lt-tab[for="lt-student"] .lt-tab__ico,
#lt-child:checked ~ .lt-bar .lt-tab[for="lt-child"] .lt-tab__ico,
#lt-transfer:checked ~ .lt-bar .lt-tab[for="lt-transfer"] .lt-tab__ico {
color: #fff; background: var(--t-green);
}
#lt-student:checked ~ .lt-panel--student,
#lt-child:checked ~ .lt-panel--child,
#lt-transfer:checked ~ .lt-panel--transfer { display: block; }
/* circle cards (home + التقدم index) ------------------------ */
.t-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.t-circle {
position: relative; overflow: hidden;
display: flex; flex-direction: column; gap: .55rem;
background: var(--t-surface); border: 1px solid var(--t-line);
border-radius: var(--t-radius); padding: 1.25rem 1.3rem 1.15rem;
box-shadow: var(--t-shadow); text-decoration: none; color: var(--t-ink);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.t-circle::before { /* soft arc glow in the corner */
content: ""; position: absolute; inset-block-start: -55px; inset-inline-end: -55px;
width: 130px; height: 130px; border-radius: 50%;
background: radial-gradient(circle, rgba(21, 115, 71, .14), transparent 70%);
transition: transform .25s ease;
}
.t-circle:hover { transform: translateY(-4px); box-shadow: var(--t-shadow-hover); border-color: #bcdcd2; color: var(--t-ink); }
.t-circle:hover::before { transform: scale(1.25); }
.t-circle__top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.t-circle__name { font-weight: 600; font-size: 1.18rem; line-height: 1.25; }
.t-circle__icon { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem; background: var(--t-green-soft); }
.t-chip {
display: inline-flex; align-items: center; gap: .3rem;
background: var(--t-green-soft); color: var(--t-green);
font-size: .82rem; font-weight: 600; padding: .25rem .7rem; border-radius: 999px;
}
.t-chip--amber { background: var(--t-amber-soft); color: var(--t-amber); }
.t-chip--soft { background: #eef3f1; color: #4a5d59; }
.t-circle__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.t-circle__foot { margin-top: .35rem; display: flex; align-items: center; justify-content: space-between; color: var(--t-muted); font-size: .9rem; }
.t-circle__go { color: var(--t-green); font-weight: 600; opacity: 0; transform: translateX(6px); transition: opacity .18s, transform .18s; }
[dir="rtl"] .t-circle__go { transform: translateX(-6px); }
.t-circle:hover .t-circle__go { opacity: 1; transform: translateX(0); }
/* Directional nav glyphs — emitted via CSS so they auto-flip for LTR English (#17).
RTL (primary) keeps the original Arabic-correct glyph; LTR shows its mirror. The literal
→/←/‹/› were removed from the views so these are the single source of truth. */
.t-circle__go::after { content: "→"; margin-inline-start: .35rem; }
[dir="rtl"] .t-circle__go::after { content: "←"; }
.t-chevron-fwd::before { content: "›"; }
[dir="rtl"] .t-chevron-fwd::before { content: "‹"; }
/* prev/next steppers are direction-independent (prev=‹ decrement, next=› increment) */
.surah-step[data-dir="-1"]::before { content: "‹"; }
.surah-step[data-dir="1"]::before { content: "›"; }
/* learner rows (circle detail) ------------------------------ */
.t-panel { background: var(--t-surface); border: 1px solid var(--t-line); border-radius: var(--t-radius); box-shadow: var(--t-shadow); overflow: hidden; }
.t-panel--grid { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.t-learner { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.15rem; border-block-end: 1px solid var(--t-line); transition: background .15s ease; }
.t-learner:last-child { border-block-end: 0; }
.t-learner:hover { background: #f6faf8; }
.t-learner__avatar {
flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
display: grid; place-items: center; font-weight: 600; font-size: 1.05rem;
color: var(--t-brand); background: linear-gradient(135deg, var(--t-green-soft), #d8ece2);
}
.t-learner__main { flex: 1 1 auto; min-width: 0; }
.t-learner__name { font-weight: 600; }
.t-learner__name small { font-weight: 400; color: var(--t-muted); margin-inline-start: .4rem; }
.t-learner__stats { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .3rem; }
.t-learner__action { flex: 0 0 auto; }
.t-learner__action .btn { border-radius: 999px; }
/* session-log rows (الجلسات) — clean scannable list, mirrors .t-learner */
.t-session { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.15rem; border-block-end: 1px solid var(--t-line); min-height: 44px; color: inherit; text-decoration: none; transition: background .15s ease; }
.t-session:last-child { border-block-end: 0; }
.t-session:hover { background: #f6faf8; }
.t-session__date { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; line-height: 1; background: linear-gradient(135deg, var(--t-green-soft), #d8ece2); }
.t-session__day { font-weight: 700; font-size: 1.25rem; color: var(--t-brand); }
.t-session__mon { font-size: .7rem; color: var(--t-muted); margin-top: .1rem; }
.t-session__main { flex: 1 1 auto; min-width: 0; }
.t-session__circle { font-weight: 600; color: var(--t-ink); }
.t-session__when { font-size: .82rem; color: var(--t-muted); margin-top: .15rem; }
.t-session .t-chevron-fwd { flex: 0 0 auto; color: var(--t-muted); font-size: 1.3rem; }
@media (max-width: 575px) {
.t-learner__action .btn { padding-inline: .6rem; }
}
/* section sub-heading above a grid/panel */
.t-section-title { font-weight: 600; font-size: 1.05rem; color: var(--t-ink); margin: 0 0 .9rem; }
/* hub cards (home: role shortcuts) -------------------------- */
.t-hub {
display: flex; gap: .9rem; align-items: flex-start;
background: var(--t-surface); border: 1px solid var(--t-line);
border-radius: var(--t-radius); padding: 1.15rem 1.25rem;
box-shadow: var(--t-shadow); text-decoration: none; color: var(--t-ink);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.t-hub:hover { transform: translateY(-3px); box-shadow: var(--t-shadow-hover); border-color: #bcdcd2; color: var(--t-ink); }
.t-hub__icon { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; background: var(--t-green-soft); }
.t-hub__body { min-width: 0; }
.t-hub__title { font-weight: 600; font-size: 1.05rem; margin-bottom: .2rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.t-hub__desc { color: var(--t-muted); font-size: .9rem; }
/* Small variant: the manager's home opens with three of these as a toolbar, so the card shrinks to
its title. Wrapping flex rather than .t-grid — auto-fill would leave a half-width orphan when the
third card drops to its own row. */
.t-quick { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.2rem; }
.t-quick__label { font-size: .8rem; font-weight: 600; color: var(--t-muted); margin: 0 0 .45rem; }
/* الإعلانات as one line above the action row: label, newest notice, how many more, and the single
control at the end. The notice truncates rather than wrapping — the strip must stay one line, or
it stops being a strip. */
.t-strip {
display: flex; align-items: center; gap: .6rem;
background: var(--t-surface); border: 1px solid var(--t-line);
border-radius: var(--t-radius); box-shadow: var(--t-shadow);
padding: .5rem .85rem; margin-bottom: 1.2rem;
}
.t-strip__main { display: flex; align-items: center; gap: .5rem; flex: 1 1 auto; min-width: 0; text-decoration: none; color: var(--t-ink); }
.t-strip__label { flex: 0 0 auto; font-size: .78rem; font-weight: 600; color: var(--t-muted); }
.t-strip__text { min-width: 0; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-strip__more { flex: 0 0 auto; font-size: .78rem; font-weight: 700; color: var(--t-brand); font-variant-numeric: tabular-nums; }
.t-strip__add { flex: 0 0 auto; font-size: .85rem; font-weight: 600; color: var(--t-green); text-decoration: none; white-space: nowrap; }
.t-strip__add:hover { text-decoration: underline; }
.t-quick > .t-hub { flex: 1 1 7rem; }
.t-hub--sm { padding: .65rem .8rem; align-items: center; justify-content: center; text-align: center; }
.t-hub--sm:hover { transform: translateY(-2px); }
.t-hub--sm .t-hub__title { font-size: .92rem; margin-bottom: 0; justify-content: center; }
/* A count inside a small card's title. Same font size as the label it follows, so the card's box
stays identical to the action cards above; colour does the work instead — and it is a SCALE, not
decoration. --t-brand (#0f3d3e) is a hair off --t-ink (#16231f), so a "plain" count was reading as
ordinary black text and the two states looked the same.
amber = a gap in the roster, true last week and still true tomorrow
red = someone is blocked right now (locked out, or a teacher waiting on access) */
.t-hub__n { font-weight: 700; color: var(--t-amber); font-variant-numeric: tabular-nums; }
.t-hub__n--flag { color: var(--t-red); }
/* simple data table inside a .t-panel (session history) ----- */
.t-table { width: 100%; border-collapse: collapse; }
.t-table th { text-align: start; font-weight: 600; color: var(--t-brand); background: var(--t-th-bg); padding: .7rem 1rem; font-size: .9rem; border-bottom: 1px solid var(--t-line); }
.t-table td { padding: .7rem 1rem; border-bottom: 1px solid var(--t-line); }
.t-table tr:last-child td { border-bottom: 0; }
.t-table tbody tr:hover { background: var(--t-row-hover); }
.t-table .btn { border-radius: 999px; }
/* An in-page filter hides rows by setting [hidden]. The mobile block below re-declares
`.t-table tr { display: block }`, which outranks the browser's own [hidden] rule — without
this line a filtered-out row would keep showing on phones. */
.t-table tr[hidden] { display: none; }
/* empty state */
.t-empty { background: var(--t-surface); border: 1px dashed var(--t-line); border-radius: var(--t-radius); padding: 1.6rem; text-align: center; color: var(--t-muted); }
/* ============================================================
MOBILE (<768px): every .t-table becomes labeled cards — one
card per row, each cell shows its column label (data-label).
Add data-label="..." to every | ; action-only cells use
data-label="" to drop the label.
============================================================ */
@media (max-width: 767.98px) {
/* a panel that only wraps a table sheds its frame so the row-cards stand alone — but not one that
opted out below: :has() carries its argument's specificity, so this rule would outrank .t-panel--grid
and hand the scrolling table back overflow: visible. */
.t-panel:has(> .t-table):not(.t-panel--grid) { border: 0; box-shadow: none; background: transparent; border-radius: 0; overflow: visible; }
.t-table thead { display: none; }
.t-table, .t-table tbody, .t-table tr, .t-table td { display: block; width: 100%; }
.t-table tr {
border: 1px solid var(--t-line); border-radius: 14px; margin-bottom: .65rem;
background: var(--t-surface); box-shadow: var(--t-shadow); padding: .35rem .8rem;
}
.t-table tbody tr:hover { background: var(--t-surface); }
/* A pick row borrows .rs-row--pick for the ticked highlight. Its negative inline margin was cut
for a flex row inside a card; on a row-card it would hang outside the container. */
.t-table tr.rs-row--pick { margin-inline: 0; }
.t-table td {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
border: 0; border-bottom: 1px solid #f0f4f2; padding: .6rem .1rem; text-align: end;
}
.t-table tr td:last-child { border-bottom: 0; }
.t-table td::before {
content: attr(data-label); font-weight: 600; color: var(--t-muted);
text-align: start; flex: 0 0 auto; white-space: nowrap;
}
.t-table td[data-label=""]::before { display: none; }
.t-table td[data-label=""] { justify-content: flex-end; padding-top: .35rem; }
/* Opt out: a table that is a GRID of dense values — logs, where the point is scanning a column
of timestamps — reads worse stacked. It stays a table and scrolls sideways instead. */
.t-panel--grid { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--t-line); background: var(--t-surface); border-radius: var(--t-radius); }
.t-panel--grid .t-table { display: table; width: max-content; min-width: 100%; }
.t-panel--grid .t-table thead { display: table-header-group; }
.t-panel--grid .t-table tbody { display: table-row-group; }
/* :not([hidden]) so a row a filter hid stays hidden — .t-table tr[hidden] ties this on specificity
and loses on source order. */
.t-panel--grid .t-table tr:not([hidden]) { display: table-row; border: 0; border-radius: 0; margin: 0; padding: 0; box-shadow: none; background: transparent; }
.t-panel--grid .t-table td {
display: table-cell; text-align: start; border: 0; border-bottom: 1px solid var(--t-line);
padding: .6rem .8rem; white-space: nowrap; width: auto;
}
.t-panel--grid .t-table td::before { content: none; }
/* the message is the one column allowed to wrap, so a long line does not stretch the row forever */
.t-panel--grid .t-table td.lg-msg { white-space: normal; min-width: 18rem; }
/* action buttons: stay in a row, don't wrap on mobile */
.t-table td .d-flex.flex-wrap { flex-wrap: nowrap !important; }
}
/* Hide secondary columns on narrow screens (<576px). The grid-panel block above re-declares
`.t-panel--grid .t-table td { display: table-cell }` at (0,2,1), which outranks a bare
`.t-col-opt` at (0,1,0): the header cell hid, the body cell did not, and every column after it
sat under the wrong heading. The qualified selectors below outrank it — and both th AND td must
be listed, or the table misaligns the other way. */
@media (max-width: 575.98px) {
.t-col-opt,
.t-panel--grid .t-table th.t-col-opt,
.t-panel--grid .t-table td.t-col-opt { display: none; }
}
/* sticky first column + edge fade for dense grids (all widths) */
.t-panel--grid .t-table th:first-child,
.t-panel--grid .t-table td:first-child {
position: sticky; inset-inline-start: 0; z-index: 2; background: var(--t-surface);
}
.t-panel--grid .t-table th:first-child { background: var(--t-th-bg); }
.t-panel--grid .t-table tbody tr:hover td:first-child { background: var(--t-row-hover); }
/* No edge fade. It was meant to hint "this table scrolls sideways", but CSS cannot ask whether the
panel actually overflows, so it painted a 1.5rem shadow down the inline-end of EVERY grid table —
including the great majority that fit and never scroll. The sticky first column below is the real
affordance, and it costs nothing when there is nothing to scroll. */
.t-panel--grid { position: relative; }
/* auth pages (anonymous) — centered branded card --------------- */
.t-auth { max-width: 440px; margin: 2.4rem auto; }
.t-auth--wide { max-width: 660px; }
.t-auth__brand { text-align: center; margin-bottom: 1.1rem; }
.t-auth__logo { display: block; width: 56px; height: 56px; margin: 0 auto .6rem; border-radius: 11px; }
.t-auth__brand .mark { font-weight: 700; font-size: 1.7rem; color: var(--t-brand); letter-spacing: -.01em; }
.t-auth__card { background: var(--t-surface); border: 1px solid var(--t-line); border-radius: var(--t-radius); box-shadow: var(--t-shadow); padding: 1.7rem 1.6rem; }
.t-auth__title { font-weight: 600; font-size: 1.3rem; margin-bottom: .2rem; color: var(--t-ink); }
.t-auth__sub { color: var(--t-muted); font-size: .92rem; margin-bottom: 1.2rem; }
/* Registration form: two named sections, a required-marker, and the approval notice that has to be
read before anyone starts typing. */
.rf-sec { font-size: 1rem; font-weight: 700; margin: 1.5rem 0 .8rem; color: var(--t-ink); }
.rf-sec:first-of-type { margin-top: .5rem; }
.rf-req { color: #c0392b; font-weight: 700; }
/* The "no account yet?" door at the foot of the login card — separated by a rule so it reads as a
different action, not a third line of fine print. */
.t-auth__alt {
display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap;
margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--t-line);
font-size: .88rem; color: var(--t-muted);
}
/* A password handed over once: big enough to read aloud from across a desk, monospaced so 0/O and
1/l are distinguishable, and boxed so it cannot be mistaken for body text. */
.pi-card {
background: var(--t-surface); border: 1px solid var(--t-line); border-radius: var(--t-radius);
box-shadow: var(--t-shadow); padding: 1.2rem 1.3rem; margin-bottom: 1.2rem; max-width: 34rem;
}
.pi-label { font-size: .8rem; font-weight: 600; color: var(--t-muted); margin-bottom: .5rem; }
.pi-row { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.pi-value {
flex: 1 1 12rem; min-width: 0;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 1.5rem; font-weight: 700; letter-spacing: .04em; color: var(--t-ink);
background: var(--t-green-soft); border-radius: .5rem; padding: .55rem .8rem;
user-select: all; word-break: break-all;
}
.pi-note { color: var(--t-muted); font-size: .85rem; margin: .8rem 0 0; }
.pw-wrap { position: relative; }
.pw-wrap > .form-control { padding-inline-end: 46px; }
/* Edge ships its own reveal eye on password inputs — one eye per field is enough. */
.pw-wrap > input::-ms-reveal, .pw-wrap > input::-ms-clear { display: none; }
/* 44px square (a finger-sized target) centred on the field's end edge; it overhangs the ~38px input a
few pixels top and bottom, which is invisible because the button has no background. inline-end puts
it on the left in Arabic and on the right in English. */
.pw-eye {
position: absolute; inset-block-start: 50%; inset-inline-end: 0; transform: translateY(-50%);
display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
border: 0; background: none; border-radius: .4rem; cursor: pointer; color: var(--t-muted);
}
.pw-eye:hover { color: var(--t-ink); }
.pw-eye:focus-visible { outline: 2px solid var(--t-green); outline-offset: 1px; }
.pw-eye .t-ico { width: 18px; height: 18px; }
.rf-note {
background: var(--t-green-soft); border: 1px solid var(--t-line);
border-radius: .6rem; padding: .6rem .8rem; margin-bottom: 1rem;
font-size: .85rem; color: var(--t-ink);
}
/* friendly "add a child" form (cf-*) — warm, guided, larger targets ---- */
/* Card forms sit at the width of the teacher-side cards (34rem + room for two columns), not page-wide. */
.cf-wrap { max-width: 620px; margin-inline: auto; }
/* الدور as chips: every role this staff may create in one row, one tap, no list to open. */
.rc-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.rc-chip { position: relative; }
.rc-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.rc-chip span {
display: block; border: 1px solid var(--t-line); border-radius: 999px; background: var(--t-surface);
padding: .34rem .8rem; font-size: .88rem; font-weight: 600; color: var(--t-ink); transition: .12s;
}
.rc-chip input:checked + span { background: var(--t-green); border-color: var(--t-green); color: #fff; }
.rc-chip input:focus-visible + span { box-shadow: 0 0 0 .2rem rgba(21, 115, 71, .25); }
.rc-chip:hover span { border-color: var(--t-green); }
.cf-card__ico { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--t-green); box-shadow: 0 2px 8px rgba(21, 115, 71, .15); }
.cf-card__ico .t-ico { width: 24px; height: 24px; }
/* member forms: short fields two per row; one per row in a narrow card */
.cf-body { container-type: inline-size; }
.cf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.cf-grid > .cf-field { margin-bottom: 1rem; }
.cf-grid > .cf-field--full { grid-column: 1 / -1; }
@container (max-width: 539.98px) { .cf-grid { grid-template-columns: minmax(0, 1fr); } }
.cf-member { counter-reset: cfsec; }
.cf-member .cf-section:not([hidden]) > .cf-section__label .cf-num::before { counter-increment: cfsec; content: counter(cfsec); }
.cf-member .cf-section { margin-bottom: 1.15rem; }
.cf-member .cf-field .form-control, .cf-member .cf-field .form-select { min-height: 44px; }
.cf-password { display: flex; gap: .5rem; flex-wrap: wrap; }
.cf-password .form-control { flex: 1 1 11rem; font-weight: 800; letter-spacing: .12em; }
.cf-password .btn { min-height: 44px; border-radius: 12px; font-weight: 700; }
/* t-lookup: type-to-search on the server (a school's parents) */
.t-lookup { position: relative; }
.t-lookup__list { position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 30; margin: 0; padding: .3rem; list-style: none; background: var(--t-surface); border: 1px solid var(--t-line); border-radius: 12px; box-shadow: var(--t-shadow); max-height: 18rem; overflow: auto; }
.t-lookup__opt { padding: .55rem .7rem; border-radius: 8px; cursor: pointer; }
.t-lookup__opt:hover, .t-lookup__opt.is-active { background: var(--t-green-soft); }
.t-lookup__msg { padding: .55rem .7rem; color: var(--t-muted); font-size: .88rem; }
.rs-lookup { flex: 1 1 14rem; }
/* circle form: meeting days as toggle chips, the default direction as two option cards */
.cc-days { display: flex; flex-wrap: wrap; gap: .45rem; }
.cc-day { position: relative; cursor: pointer; margin: 0; }
.cc-day input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.cc-day span { display: inline-flex; align-items: center; min-height: 40px; padding: .35rem .95rem; border-radius: 999px; border: 1.5px solid var(--t-line); background: var(--t-surface); font-weight: 600; color: var(--t-ink); transition: background .12s ease, border-color .12s ease; }
.cc-day input:checked + span { background: var(--t-green-soft); border-color: var(--t-green); color: var(--t-green); }
.cc-day input:checked + span::before { content: "✓"; margin-inline-end: .3rem; }
.cc-day input:focus-visible + span { outline: 2px solid var(--t-green); outline-offset: 2px; }
.cc-dirs { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .6rem; }
.cc-dir { position: relative; display: flex; flex-direction: column; gap: .2rem; margin: 0; padding: .7rem .85rem; border: 1.5px solid var(--t-line); border-radius: 12px; background: var(--t-surface); cursor: pointer; }
.cc-dir input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.cc-dir:has(input:checked) { border-color: var(--t-green); background: var(--t-green-soft); }
.cc-dir:has(input:disabled) { cursor: not-allowed; opacity: .75; }
.cc-dir:has(input:focus-visible) { outline: 2px solid var(--t-green); outline-offset: 2px; }
.cc-dir__title { font-weight: 700; }
.cc-dir__hint { font-size: .8rem; line-height: 1.5; color: var(--t-muted); }
/* a search list must not be clipped by the card it opens in (cf-card hides overflow for its rounded head) */
.cf-card:has(.t-lookup) { overflow: visible; }
.cf-card:has(.t-lookup) > .cf-card__head { border-start-start-radius: inherit; border-start-end-radius: inherit; }
.cf-card { background: var(--t-surface); border: 1px solid var(--t-line); border-radius: var(--t-radius); box-shadow: var(--t-shadow); overflow: hidden; }
.cf-card__head { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; background: linear-gradient(120deg, var(--t-green-soft), #eef8f1); border-bottom: 1px solid var(--t-line); }
.cf-avatar {
flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
display: grid; place-items: center; font-size: 1.5rem; line-height: 1;
background: radial-gradient(circle at 32% 26%, #fff6df, var(--t-gold));
box-shadow: 0 4px 14px rgba(245, 196, 81, .45), inset 0 0 0 3px rgba(255, 255, 255, .55);
}
.cf-card__title { font-weight: 700; font-size: 1.05rem; color: var(--t-brand); }
.cf-card__sub { color: var(--t-muted); font-size: .82rem; margin-top: .1rem; }
.cf-body { padding: 1rem 1.1rem 1.1rem; }
.cf-section { margin-bottom: 1.05rem; }
.cf-section:last-of-type { margin-bottom: .6rem; }
.cf-section__label {
display: flex; align-items: center; gap: .55rem;
font-weight: 700; font-size: .88rem; color: var(--t-green);
margin-bottom: .6rem; padding-bottom: .4rem; border-bottom: 1px dashed var(--t-line);
}
.cf-num {
flex: 0 0 auto; width: 21px; height: 21px; border-radius: 50%;
background: var(--t-green); color: #fff; display: grid; place-items: center;
font-size: .72rem; font-weight: 800;
}
.cf-field { margin-bottom: .7rem; }
.cf-field:last-child { margin-bottom: 0; }
.cf-field > label { font-weight: 600; font-size: .85rem; color: var(--t-ink); margin-bottom: .25rem; display: block; }
.cf-field .form-control, .cf-field .form-select { min-height: 44px; border-radius: 10px; border-color: #d7e4de; font-size: 16px; }
.cf-field .form-control:focus, .cf-field .form-select:focus { border-color: var(--t-green); box-shadow: 0 0 0 .2rem rgba(21, 115, 71, .16); }
.cf-hint { font-size: .82rem; color: var(--t-muted); margin-top: .4rem; display: flex; gap: .4rem; align-items: flex-start; line-height: 1.5; }
.cf-hint__ico { flex: 0 0 auto; opacity: .8; }
/* «تتصفح كمدير النظام» — the bar a SuperAdmin sees on every page of a school they are visiting.
Amber so it never reads as part of the school's own UI, and its way back never scrolls away. */
.sa-bar { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; justify-content: space-between;
background: var(--t-amber-soft); color: var(--t-amber-ink); border-bottom: 1px solid #e6c294;
padding: .5rem 1rem; font-size: .9rem; }
.sa-bar__who { display: inline-flex; align-items: center; gap: .45rem; min-width: 0; }
.sa-bar__ico .t-ico { width: 18px; height: 18px; }
.sa-bar__go { display: inline-flex; gap: .4rem; flex: 0 0 auto; }
.sa-bar__go .btn { border-radius: 10px; font-weight: 600; }
@media (max-width: 575px) { .sa-bar { font-size: .84rem; } .sa-bar__go .btn { padding-inline: .6rem; } }
[data-bs-theme="dark"] .sa-bar { border-bottom-color: #4a3618; }
[data-bs-theme="dark"] .sa-bar__go .btn-dark { background: var(--t-amber-ink); border-color: var(--t-amber-ink); color: #1a1205; }
[data-bs-theme="dark"] .sa-bar__go .btn-outline-dark { color: var(--t-amber-ink); border-color: var(--t-amber-ink); }
/* read-only facts inside a card form (الملف الشخصي): the same two-column rhythm as .cf-grid,
but the values are text — nothing here posts, so nothing here looks like a field. */
.pf-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem .9rem; }
/* dashed, like every other read-only surface here (.t-empty) — so it never reads as a field. */
.pf-fact { background: var(--t-bg); border: 1px dashed var(--t-line); border-radius: 12px; padding: .6rem .8rem; min-width: 0; }
.pf-fact__k { display: block; font-size: .78rem; color: var(--t-muted); margin-bottom: .15rem; }
.pf-fact__v { display: block; font-weight: 600; color: var(--t-ink); overflow-wrap: anywhere; }
@media (max-width: 575px) { .pf-facts { grid-template-columns: 1fr; } }
.cf-actions { display: flex; gap: .6rem; margin-top: 1rem; }
.cf-actions .btn { min-height: 44px; border-radius: 10px; font-weight: 700; padding-inline: 1.5rem; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.cf-actions .btn-success { flex: 1 1 auto; font-size: 1.05rem; box-shadow: 0 6px 16px rgba(21, 115, 71, .25); }
.cf-actions .btn-success:hover { box-shadow: 0 8px 20px rgba(21, 115, 71, .32); }
@media (max-width: 575px) { .cf-actions { flex-direction: column-reverse; } .cf-actions .btn { width: 100%; } }
/* searchable select (t-combo) — progressive enhancement of a native |