/* ==========================================================================
   RAKEEZ X — مكوّنات الشاشات
   ========================================================================== */

/* ---------- ترحيب ---------- */
.welcome { border-color: var(--brand); background: var(--brand-soft); display: block; text-align: center; }
.welcome__title { font-weight: 750; font-size: 17px; color: var(--brand); }
.welcome__text  { font-size: 14px; color: var(--text-2); margin-block: var(--sp-2) 0; line-height: 1.7; }

/* ---------- اختيار اللون ---------- */
.swatch { cursor: pointer; }
.swatch input { position: absolute; opacity: 0; pointer-events: none; }
.swatch span {
  display: block; width: 34px; height: 34px;
  border-radius: var(--r-full);
  border: 3px solid transparent;
  box-shadow: 0 0 0 1px var(--border);
  transition: transform .12s var(--ease), border-color .12s var(--ease);
}
.swatch input:checked + span { border-color: var(--bg-elev); box-shadow: 0 0 0 2.5px var(--text); transform: scale(1.1); }
.swatch input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 3px; }

/* ---------- صف الفصل ---------- */
.class-dot { flex: none; width: 10px; height: 40px; border-radius: var(--r-full); }

/* ---------- شريط البحث ---------- */
.searchbar {
  display: flex; align-items: center; gap: var(--sp-2);
  padding-inline-start: var(--sp-3);
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-3);
  color: var(--text-3);
}
.searchbar:focus-within { border-color: var(--brand-text); box-shadow: 0 0 0 3px var(--action-focus-ring); }
.searchbar__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.searchbar__icon svg { width: 18px; height: 18px; }
.searchbar__input {
  flex: 1; min-width: 0;
  min-height: var(--tap);
  appearance: none;
  border: none; background: transparent; outline: none; box-shadow: none;
  color: var(--text);
}
.searchbar__input::-webkit-search-cancel-button { display: none; }

/* ---------- شريط التاريخ ---------- */
.datebar {
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-1);
  margin-bottom: var(--sp-3);
}
.datebar__mid { flex: 1; text-align: center; }
.datebar__label { font-weight: 700; font-size: 15.5px; }
.datebar__note { font-size: 12px; color: var(--warn); font-weight: 600; }
.iconbtn.is-off { opacity: .3; pointer-events: none; }

/* ---------- صف الحضور ---------- */
.att-row {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.att-row.is-unmarked { border-style: dashed; border-color: var(--border-strong); }
.att-row__name {
  flex: 1; min-width: 0;
  font-weight: 600; font-size: 14.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.att-row__note {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  color: var(--text-3);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease);
}
.att-row__note:hover, .att-row__note:focus-visible {
  background: var(--bg-sunk);
  color: var(--text);
  border-color: var(--border);
}
.att-row__note.has-notes {
  color: var(--brand-text);
}
.att-row__note svg {
  width: 17px; height: 17px;
  display: block;
}

.segbtns { display: flex; gap: 3px; flex: none; }
.segbtn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--bg-sunk);
  color: var(--text-3);
  font-weight: 750; font-size: 14px;
  border: 1.5px solid transparent;
  transition: background .12s var(--ease), color .12s var(--ease), transform .08s var(--ease);
}
.segbtn:active { transform: scale(.9); }
.segbtn.is-on[data-color="present"] { background: var(--present); color: #fff; }
.segbtn.is-on[data-color="late"]    { background: var(--late);    color: #fff; }
.segbtn.is-on[data-color="excused"] { background: var(--excused); color: #fff; }
.segbtn.is-on[data-color="absent"]  { background: var(--absent);  color: #fff; }
:root[data-theme="dark"] .segbtn.is-on { color: #0a0d10; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .segbtn.is-on { color: #0a0d10; }
}

@media (max-width: 520px) {
  .att-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 44px;
    gap: 6px var(--sp-2);
    padding: var(--sp-2);
  }
  .att-row__note { width: 44px; height: 44px; }
  .segbtns { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .segbtn { width: auto; min-width: 0; height: 44px; font-size: 13px; }
}

/* ---------- مبدّل مقسّم ---------- */
.segmented {
  display: flex;
  background: var(--bg-sunk);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 3px;
  gap: 3px;
}
.segmented__btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 38px;
  padding-inline: var(--sp-3);
  border-radius: calc(var(--r-md) - 3px);
  font-size: 14px; font-weight: 650;
  color: var(--text-2);
  white-space: nowrap;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.segmented__btn svg { width: 16px; height: 16px; }
.segmented__btn.is-on { background: var(--bg-elev); color: var(--brand-text); box-shadow: var(--shadow-1); }

/* ---------- مفتاح تبديل ---------- */
.switch { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; font-size: 14px; font-weight: 600; }
.switch input { width: 20px; height: 20px; accent-color: var(--brand); }

/* ---------- شرائح ---------- */
.chips { display: flex; gap: var(--sp-2); padding-bottom: var(--sp-1); }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--sp-2) var(--sp-3);
  min-height: 38px;
  border-radius: var(--r-full);
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  font-size: 14px; font-weight: 620;
  color: var(--text-2);
  white-space: nowrap; flex: none;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.chip.is-on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.chip__meta { font-size: 12px; opacity: .75; font-variant-numeric: tabular-nums; }

/* ---------- الرصد السريع ---------- */
.ql-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--sp-2);
}
/* The behavior-only label is intentionally descriptive. Constrain this one
   segmented control rather than hiding page overflow or changing global tabs. */
.quicklog__modes { min-width: 0; }
.quicklog__modes .segmented__btn {
  min-width: 0;
  white-space: normal;
  line-height: 1.25;
  padding-inline: var(--sp-2);
}
.quicklog__filters { flex-wrap: wrap; }
.quicklog__filters .push { min-width: 0; }
@media (max-width: 380px) { .ql-grid { grid-template-columns: repeat(2, 1fr); } }

.qlcard {
  position: relative;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--bg-elev);
  overflow: hidden;
  height: 96px;
  box-sizing: border-box;
  transition: border-color .15s var(--ease), background .3s var(--ease);
}
.qlcard.is-pos { border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); }
.qlcard.is-neg { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.qlcard.is-unavail { opacity: .72; background: var(--bg-sunk); border-color: var(--border-subtle); }
.qlcard.is-unavail:hover { opacity: .9; }

.qlcard__hit {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 8px 10px;
  padding-inline-end: 36px;
  text-align: start;
  box-sizing: border-box;
}
.qlcard__hit:active { background: var(--bg-sunk); }

.qlcard__head {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
  line-height: 1.3;
}
.qlcard__roll {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-3);
  background: var(--bg-sunk);
  border-radius: 3px;
  padding: 0 4px;
  flex: none;
  line-height: 1.2;
}
.qlcard__name {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.qlcard__status {
  font-size: 10.5px;
  padding: 1px 5px;
  flex: none;
}

.qlcard__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  min-height: 24px;
}
.qlcard__score {
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  color: var(--text-2);
}
.qlcard.is-pos .qlcard__score { color: var(--ok); }
.qlcard.is-neg .qlcard__score { color: var(--danger); }
.qlcard__today {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 650;
  line-height: 1;
  min-height: 14px;
  display: inline-flex;
  align-items: center;
}

.qlcard__minus {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--text-3);
  border-radius: 0 0 0 var(--r-md);
}
.qlcard__minus:hover { background: var(--danger-soft); color: var(--danger); }
.qlcard__minus svg { width: 15px; height: 15px; }

@keyframes flashPlus  { 0% { background: var(--ok-soft); }     100% { background: var(--bg-elev); } }
@keyframes flashMinus { 0% { background: var(--danger-soft); } 100% { background: var(--bg-elev); } }
.qlcard.is-plus  { animation: flashPlus .55s var(--ease); }
.qlcard.is-minus { animation: flashMinus .55s var(--ease); }

.taglist { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.taglist .btn { min-height: 48px; font-size: 14px; }
@media (max-width: 420px) { .taglist { grid-template-columns: 1fr; } }

/* ---------- صف الدرجة ---------- */
.graderow {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.graderow__name {
  flex: 1; min-width: 0;
  font-weight: 600; font-size: 14.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.graderow__in { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.graderow__max { color: var(--text-3); font-size: 13px; }
.gradein {
  width: 74px;
  text-align: center;
  min-height: 40px;
  padding: var(--sp-2);
  font-weight: 700; font-size: 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
}
.gradein:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
.gradein::placeholder { color: var(--text-3); font-weight: 400; }

/* ---------- الجداول ---------- */
.tablewrap {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-elev);
}
.gtable { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 14px; }
.gtable th, .gtable td { padding: var(--sp-2) var(--sp-3); text-align: center; white-space: nowrap; }
.gtable thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-sunk);
  font-size: 12.5px; font-weight: 700; color: var(--text-2);
  border-bottom: 1px solid var(--border);
  vertical-align: bottom;
}
.gtable tbody tr + tr th, .gtable tbody tr + tr td { border-top: 1px solid var(--border); }
.gtable__sticky {
  position: sticky; inset-inline-start: 0; z-index: 1;
  background: var(--bg-elev);
  text-align: start !important;
  font-weight: 650;
  min-width: 150px;
}
.gtable thead .gtable__sticky { background: var(--bg-sunk); z-index: 3; }
.gtable__sticky a { color: inherit; text-decoration: none; }
.gtable__sticky a:hover { color: var(--brand); text-decoration: underline; }
.gtable__roll { color: var(--text-3); font-size: 12px; margin-inline-end: var(--sp-2); font-variant-numeric: tabular-nums; }
.gtable__item { display: block; }
.gtable__max { display: block; font-size: 11px; color: var(--text-3); font-weight: 600; }
.gtable__total { background: var(--bg-sunk); }
.gtable td.is-auto { color: var(--text-3); background: var(--bg-sunk); }
/* 16px حدٌّ أدنى لكل حقل إدخال: سفاري iOS يكبّر الصفحة تلقائيًا عند التركيز
   على أي حقل أصغر منه، فتقفز الشاشة تحت إصبع المعلّم أثناء الرصد. */
.gradein--cell { width: 66px; min-height: 34px; font-size: 16px; border-color: transparent; background: transparent; }
.gradein--cell:hover { border-color: var(--border-strong); }

.att-col { font-size: 11px !important; }
.att-cell { font-weight: 700; }
.att-cell.is-present { color: var(--present); }
.att-cell.is-absent  { color: var(--absent); background: var(--absent-soft); }
.att-cell.is-late    { color: var(--late); }
.att-cell.is-excused { color: var(--excused); }

/* ---------- بطاقة اختيار ---------- */
.radiocard {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  cursor: pointer;
  background: var(--bg-elev);
  text-align: start; width: 100%;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.radiocard:hover { border-color: var(--brand); }
.radiocard input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--brand); flex: none; }
.radiocard:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.radiocard__body { display: grid; gap: 2px; }
.radiocard__title { font-weight: 700; font-size: 14.5px; }
.radiocard__hint { font-size: 12.5px; color: var(--text-3); line-height: 1.5; }

/* ---------- القرعة ---------- */
.picker { max-width: 520px; margin-inline: auto; }
.picker__stage {
  display: grid; place-content: center; justify-items: center; gap: var(--sp-2);
  min-height: 210px;
  padding: var(--sp-6);
  border-radius: var(--r-xl);
  background: var(--brand-soft);
  border: 2px solid color-mix(in srgb, var(--brand) 35%, transparent);
  margin-bottom: var(--sp-4);
  text-align: center;
}
.picker__stage.is-spinning { opacity: .75; }
.picker__roll {
  font-size: 13px; font-weight: 800; color: var(--brand);
  background: var(--bg-elev);
  padding: 3px var(--sp-3); border-radius: var(--r-full);
}
.picker__name {
  font-size: clamp(26px, 7vw, 42px); font-weight: 800;
  color: var(--brand); line-height: 1.25; letter-spacing: -.5px;
}
.picker__stage.is-spinning .picker__name { filter: blur(1.5px); }
.picker__idle { font-size: 17px; color: var(--text-3); font-weight: 600; }

/* ---------- المجموعات ---------- */
.groups-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-3);
}
@media (max-width: 480px) {
  .groups-grid {
    grid-template-columns: 1fr;
  }
}
.group {
  transition: border-color .15s var(--ease), background-color .15s var(--ease), box-shadow .15s var(--ease);
  position: relative;
}
.group.is-dragover {
  border-color: var(--brand) !important;
  background-color: var(--brand-soft) !important;
  box-shadow: 0 0 0 2px var(--brand);
}
.group.is-drop-invalid {
  border-color: var(--warn) !important;
  background-color: var(--warn-soft) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--warn) 70%, transparent);
}
.group__head {
  display: flex; align-items: center; gap: var(--sp-2);
  font-weight: 750; font-size: 15px;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
}
.group__head .badge { margin-inline-start: auto; }
.group__member {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 14.5px;
  padding: 6px 8px;
  background: var(--bg-sunk);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: grab;
  user-select: none;
  transition: transform .12s var(--ease), opacity .12s var(--ease), border-color .12s var(--ease), background-color .12s var(--ease);
}
.group__member:hover {
  background: var(--bg-elev);
  border-color: var(--border-strong);
}
.group__member:active {
  cursor: grabbing;
}
.group__member.is-dragging {
  opacity: 0.35;
  transform: scale(0.97);
}
.group__member.is-selected {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: 0 0 0 1px var(--brand);
}
.group__member .rollno {
  width: 26px;
  height: 26px;
  font-size: 11.5px;
  flex: none;
}
.group__member-name {
  flex: 1;
  min-width: 0;
  font-weight: 650;
  color: var(--text);
  line-height: 1.4;
  overflow-wrap: break-word;
}
.group__drag-handle {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--text-3);
  flex: none;
  opacity: 0.6;
}
.group__drag-handle svg {
  width: 14px;
  height: 14px;
}
.groups-touch-hint { display: none; }
.group__target-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  margin-top: 8px;
  border: 1px dashed var(--brand);
  border-radius: var(--r-sm);
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .12s var(--ease), color .12s var(--ease);
}
.group__target-btn svg {
  width: var(--icon-inline);
  height: var(--icon-inline);
  flex: none;
}
.group__target-btn:hover {
  background: var(--brand);
  color: #fff;
}

/* ---------- لوحة التميز ---------- */
.board { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.board__row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.board__row.is-top { border-color: var(--brand); background: var(--brand-soft); }
.board__rank { flex: none; width: 32px; text-align: center; font-size: 19px; font-weight: 800; color: var(--text-3); }
.board__row.is-top .board__rank { font-size: 24px; }
.board__name { flex: 0 0 auto; min-width: 110px; max-width: 34%; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board__bar { flex: 1; height: 12px; background: var(--bg-sunk); border-radius: var(--r-full); overflow: hidden; }
.board__fill { display: block; height: 100%; background: var(--brand); border-radius: var(--r-full); transition: width .5s var(--ease); }
.board__pts { flex: none; min-width: 44px; text-align: end; font-weight: 800; font-size: 17px; color: var(--brand); }

@media (min-width: 900px) {
  .board__row { padding: var(--sp-4); }
  .board__name { font-size: 20px; min-width: 190px; }
  .board__pts { font-size: 24px; min-width: 60px; }
  .board__rank { font-size: 24px; width: 44px; }
  .board__bar { height: 16px; }
}

/* ---------- تقرير الطالب ---------- */
.itemrow { padding: var(--sp-3); }
.itemrow + .itemrow { border-top: 1px solid var(--border); }
.itemrow__head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.itemrow__name { font-weight: 620; font-size: 14.5px; display: flex; align-items: center; gap: var(--sp-2); }
.itemrow__val { margin-inline-start: auto; font-weight: 700; font-size: 14px; }
.meter { height: 8px; background: var(--bg-sunk); border-radius: var(--r-full); overflow: hidden; }
.meter__fill { height: 100%; border-radius: var(--r-full); transition: width .4s var(--ease); }

.logrow { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); }
.logrow + .logrow { border-top: 1px solid var(--border); }
.logrow__delta {
  flex: none; width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  font-weight: 800; font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.logrow__delta.is-pos { background: var(--ok-soft); color: var(--ok); }
.logrow__delta.is-neg { background: var(--danger-soft); color: var(--danger); }
.logrow__main { flex: 1; display: flex; align-items: center; gap: var(--sp-2); font-size: 14px; min-width: 0; }
.logrow__date { margin-inline-start: auto; font-size: 12.5px; color: var(--text-3); flex: none; }
.student-history-row { align-items: flex-start; }
.student-history-row .logrow__main { align-items: flex-start; flex-direction: column; gap: 4px; }
.student-history-row .logrow__date {
  width: 100%; min-width: 0; margin-inline-start: 0; display: flex; flex-wrap: wrap;
  align-items: center; gap: 4px;
}
.student-history-row .badge { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

/* ---------- الصفحة الرئيسية ---------- */
.hero { margin-bottom: var(--sp-4); }
.hero__hello { font-size: var(--fs-page); font-weight: var(--fw-heavy); line-height: var(--lh-tight); letter-spacing: -.3px; }
.hero__date { font-size: var(--fs-sm); color: var(--text-3); margin-top: var(--sp-1); }
.home-onboarding,
.today-focus {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--border));
  border-radius: var(--r-lg);
  background: var(--bg-elev);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.home-onboarding::before,
.today-focus::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--brand);
}
.home-onboarding__mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  color: var(--brand-ink);
  background: var(--brand);
  box-shadow: 0 7px 16px color-mix(in srgb, var(--brand) 24%, transparent);
}
.home-onboarding__mark svg { width: 22px; height: 22px; }
.home-onboarding__copy { min-width: 0; }
.home-onboarding__kicker,
.today-focus__signal span { color: var(--brand); font-size: 11px; font-weight: 800; }
.home-onboarding h2 { margin: 2px 0 0; font-size: 17px; letter-spacing: -.2px; }
.home-onboarding p { margin: 4px 0 0; color: var(--text-3); font-size: 12.5px; line-height: 1.55; }
.home-onboarding__action,
.today-focus__action { white-space: nowrap; }
.home-sessions__empty {
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--bg-sunk) 55%, transparent);
}
.today-focus { align-items: end; }
.today-focus__signal {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 7px;
}
.today-focus__signal i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.today-focus__title { font-size: 13px; font-weight: 750; color: var(--text-2); }
.today-focus__class { margin-top: 2px; font-size: 18px; font-weight: 800; letter-spacing: -.25px; }
.today-focus__detail { margin-top: 3px; color: var(--text-3); font-size: 12.5px; }
.today-focus.is-pending { border-color: color-mix(in srgb, var(--warn) 34%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, var(--warn-soft) 70%, var(--bg-elev)), var(--bg-elev) 70%); }
.today-focus.is-pending::before,
.today-focus.is-pending .today-focus__signal i { background: var(--warn); }
.today-focus.is-pending .today-focus__signal span { color: color-mix(in srgb, var(--warn) 80%, var(--text)); }
@media (max-width: 520px) {
  .home-onboarding,
  .today-focus { grid-template-columns: auto minmax(0, 1fr); padding: var(--sp-4) var(--sp-3); }
  .home-onboarding__action,
  .today-focus__action { grid-column: 1 / -1; width: 100%; justify-content: center; }
  .today-focus__signal { grid-column: 1 / -1; }
}

.home-sessions .list {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-elev);
}
.home-sessions .row { border: 0; border-radius: 0; box-shadow: none; }
.home-sessions .row + .row { border-block-start: 1px solid var(--border); }
.home-shortcuts__grid {
  gap: 0;
  overflow: hidden;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: var(--sp-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-elev);
  box-shadow: var(--shadow-1);
}
.home-shortcuts .tile {
  min-height: 104px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--sp-2);
  text-align: center;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  box-shadow: none;
}
.home-shortcuts .tile__icon { margin-inline: auto; }
.home-shortcuts .tile__title,
.home-shortcuts .tile__sub { width: 100%; text-align: center; }
.home-shortcuts .tile:hover { background: var(--brand-soft); box-shadow: none; }
@media (max-width: 640px) {
  .home-shortcuts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-shortcuts .tile { min-height: 100px; }
}

/* منطقة محجوزة لميزة قادمة — بلا بيانات وهمية */
.soon {
  padding: var(--sp-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--bg-sunk);
}
.soon__title { font-weight: 700; font-size: 14.5px; color: var(--text-2); }
.soon__text  { font-size: 12.5px; color: var(--text-3); margin-top: var(--sp-2); line-height: 1.6; }

/* ---------- رقم الحصة ---------- */
.period {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 14px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.row__icon {
  flex: none; width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--bg-sunk); color: var(--text-2);
}
.row__icon svg { width: 18px; height: 18px; }
.row__icon.is-off { color: var(--text-3); }

.calendar-period--ok .calendar-period__icon { background: var(--ok-soft); color: var(--ok); }
.calendar-period--info .calendar-period__icon { background: var(--info-soft); color: var(--info); }
.calendar-period--warn .calendar-period__icon { background: var(--warn-soft); color: var(--warn); }
.date-range, .date-display { unicode-bidi: isolate; white-space: nowrap; }

/* ---------- التقويم الدراسي — مركز التحكم بالزمن الدراسي ---------- */
.cal-hero-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-4);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-4);
}
.cal-hero-strip__identity {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.cal-hero-strip__meta-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.cal-hero-strip__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.cal-hero-strip__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--t-1);
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.cal-hero-strip__subtitle {
  margin: 0;
  color: var(--t-3);
  font-size: 0.85rem;
  line-height: 1.45;
}
.cal-hero-strip__actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .cal-hero-strip {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-3);
  }
  .cal-hero-strip__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- Visual System Batch B: مساحة وأدوات الفصل ---------- */
.classroom-tool-page {
  min-width: 0;
}

.classroom-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  margin-bottom: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}

.class-context-nav__item {
  min-height: 44px;
  color: var(--text-2);
}

.class-context-nav__item[aria-current="page"] {
  color: var(--brand-text);
}

/* الأدوات الثمانية: بطاقات فعل متساوية، وصف واحد على سطح المكتب. */
.class-hub > .class-tools-section .quick-tools-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}

.class-hub > .class-tools-section .class-tool-card {
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  min-height: 104px;
  padding: var(--sp-3);
  text-align: center;
}

.class-hub > .class-tools-section .class-tool-card .tile__icon {
  width: 40px;
  height: 40px;
  margin-inline: auto;
}

.class-hub > .class-tools-section .class-tool-card .tile__icon svg {
  width: 22px;
  height: 22px;
}

.class-hub > .class-tools-section .class-tool-card .tile__title,
.class-hub > .class-tools-section .class-tool-card .tile__sub {
  width: 100%;
  min-width: 0;
  text-align: center;
  overflow-wrap: anywhere;
}

.class-hub > .class-tools-section .class-tool-card .tile__title {
  font-size: 14px;
  line-height: 1.3;
}

.class-hub > .class-tools-section .class-tool-card .tile__sub {
  font-size: 11.5px;
  line-height: 1.35;
}

@media (min-width: 700px) and (max-width: 1199px) {
  .class-hub > .class-tools-section .quick-tools-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-3);
  }
}

@media (min-width: 1200px) {
  .class-hub > .class-tools-section .quick-tools-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 8px;
  }

  .class-hub > .class-tools-section .class-tool-card {
    min-height: 128px;
    padding: 14px 7px;
    gap: 7px;
  }

  .class-hub > .class-tools-section .class-tool-card .tile__icon {
    width: 44px;
    height: 44px;
  }

  .class-hub > .class-tools-section .class-tool-card .tile__icon svg {
    width: 24px;
    height: 24px;
  }

  .class-hub > .class-tools-section .class-tool-card .tile__title {
    font-size: 13.5px;
  }

  .class-hub > .class-tools-section .class-tool-card .tile__sub {
    font-size: 11px;
  }
}

@media (min-width: 1400px) {
  .class-hub > .class-tools-section .quick-tools-grid {
    gap: 10px;
  }

  .class-hub > .class-tools-section .class-tool-card {
    min-height: 134px;
    padding: 16px 9px;
  }

  .class-hub > .class-tools-section .class-tool-card .tile__icon {
    width: 48px;
    height: 48px;
  }

  .class-hub > .class-tools-section .class-tool-card .tile__icon svg {
    width: 26px;
    height: 26px;
  }

  .class-hub > .class-tools-section .class-tool-card .tile__title {
    font-size: 14px;
  }

  .class-hub > .class-tools-section .class-tool-card .tile__sub {
    font-size: 11.5px;
  }
}

/* هدف وميثاق الصف: ضبط مرئي فقط فوق البنية والسلوك المعتمدين. */
.class-goal-indicator__status,
.class-goal-indicator__reward,
.goal-live__eyebrow,
.goal-live__reward strong,
.charter-rule.is-selected .charter-rule__number,
.charter-rule.is-selected .charter-rule__copy small,
.rule-preset-group--selected .rule-preset-group__title,
.rule-preset-group--selected .rule-preset-group__title span,
.rule-preset small {
  color: var(--brand-text);
}

.charter-rule.is-selected {
  box-shadow: none;
  border-inline-start: 3px solid var(--brand);
}

/* الرصد السريع */
.quicklog-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.quicklog-toolbar .quicklog-filter-bar {
  min-width: 0;
  margin: 0;
  flex-wrap: nowrap;
}

.quicklog-toolbar .classroom-meta-bar {
  grid-column: 1 / -1;
  min-height: 36px;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
}

.quicklog-search .input {
  height: 44px;
  min-height: 44px;
  padding-inline-start: 40px;
  padding-inline-end: 44px;
}

.quicklog-search__icon {
  right: auto;
  inset-inline-start: 12px;
  display: grid;
  place-items: center;
}

.quicklog-search__clear {
  left: auto;
  inset-inline-end: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--r-md);
}

.quicklog-search__clear:hover {
  color: var(--text);
  background: var(--bg-sunk);
}

.ql-grid {
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: var(--sp-2);
}

.qlcard {
  height: 108px;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}

.qlcard__hit {
  min-height: 100%;
  padding: 10px 12px;
  padding-inline-end: 48px;
}

.qlcard__minus {
  width: 44px;
  height: 44px;
}

.qlcard__plus {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  color: var(--brand-text);
  background: var(--brand-soft);
  border-radius: var(--r-full);
}

.qlcard__plus svg {
  width: 14px;
  height: 14px;
}

/* القرعة */
.picker {
  max-width: 720px;
}

.picker__summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 44px;
  margin-bottom: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  color: var(--text-2);
  background: var(--bg-sunk);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 13px;
  flex-wrap: wrap;
}

.picker__summary strong,
.picker__summary bdi {
  color: var(--text);
}

.picker__excluded {
  color: var(--warn);
}

.picker__stage {
  min-height: 280px;
  margin-bottom: var(--sp-3);
  background: linear-gradient(145deg, var(--brand-soft), var(--bg-elev));
  border: 1px solid var(--brand-border);
  box-shadow: var(--shadow-1);
}

.picker__winner-label {
  color: var(--text-3);
  font-size: 13px;
  font-weight: 750;
}

.picker__roll,
.picker__name {
  color: var(--brand-text);
}

.picker__options {
  display: flex;
  justify-content: center;
  min-height: 44px;
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-sunk);
  border-radius: var(--r-md);
}

/* المجموعات */
.groups-setup,
.session-panel,
.grade-distribution-summary {
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.groups-setup__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}

.groups-setup__grid .field {
  margin: 0;
}

.groups-setup__grid .segmented {
  width: 100%;
}

.groups-setup__presence {
  min-height: 44px;
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}

.groups-generate {
  max-width: 420px;
  margin-inline: auto;
}

.group-move-notice {
  padding: var(--sp-3);
  background: var(--brand-soft);
  border: 1px solid var(--brand-border);
  border-radius: var(--r-lg);
}

.groups-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.group {
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.group__member {
  width: 100%;
  min-height: 44px;
  color: var(--text);
  text-align: start;
  font-family: inherit;
}

.group__member:disabled {
  cursor: default;
}

.group__target-btn {
  min-height: 44px;
  color: var(--brand-text);
  border-color: var(--brand);
}

@media (max-width: 768px), (pointer: coarse) {
  .groups-touch-hint {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    color: var(--text-2);
    font-size: 12.5px;
    line-height: 1.5;
  }

  .groups-touch-hint svg {
    width: 17px;
    height: 17px;
    flex: none;
    color: var(--brand-text);
  }

  .group__member {
    touch-action: pan-y;
  }

  .group__drag-handle {
    width: 44px;
    height: 44px;
    margin-block: -6px;
    margin-inline-end: -6px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--bg-elev);
    color: var(--text-2);
    opacity: 1;
    cursor: grab;
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  .group__drag-handle svg {
    width: 18px;
    height: 18px;
  }

  .group__member.is-touch-dragging {
    position: relative;
    z-index: 3;
    opacity: 0.78;
    transform: scale(1.015);
    border-color: var(--brand);
    background: var(--bg-elev);
    box-shadow: var(--shadow-2);
    cursor: grabbing;
  }

  .groups-page.is-touch-drag-active,
  .groups-page.is-touch-drag-active * {
    user-select: none;
  }
}

/* لوحة التميز */
.board-controls {
  flex-wrap: wrap;
}

.board-controls .segmented {
  min-width: 220px;
}

.board__row {
  min-height: 64px;
  box-shadow: none;
}

.board__row.is-top {
  border-color: var(--brand-border);
  border-inline-start: 4px solid var(--brand);
}

.board__rank-mark {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--text-2);
  background: var(--bg-sunk);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: 15px;
}

.board__row.is-top .board__rank-mark {
  color: var(--brand-text);
  background: var(--bg-elev);
  border-color: var(--brand-border);
}

.board__pts {
  color: var(--brand-text);
}

/* الحصص */
.session-panel--summary {
  background: color-mix(in srgb, var(--brand-soft) 24%, var(--bg-elev));
  border-color: var(--brand-border);
}

.session-stats {
  gap: var(--sp-2);
}

.session-status-legend {
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-sunk);
  border-radius: var(--r-md);
}

.session-list,
.grade-item-list {
  gap: 0;
  overflow: hidden;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.session-row,
.grade-item-row {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.session-row + .session-row,
.grade-item-row + .grade-item-row {
  border-top: 1px solid var(--border);
}

.session-row.is-today {
  border-inline-start: 3px solid var(--brand);
  background: color-mix(in srgb, var(--brand-soft) 22%, var(--bg-elev));
}

.session-row.is-future {
  background: color-mix(in srgb, var(--info-soft) 20%, var(--bg-elev));
}

.session-row.is-past {
  color: var(--text-2);
}

/* توزيع الدرجات */
.grade-distribution-summary {
  background: var(--bg-sunk);
}

.grade-distribution-summary .stat__val {
  color: var(--brand-text);
}

@media (max-width: 768px) {
  .class-context-nav-bar {
    padding-inline: var(--sp-2);
  }

  .class-context-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    overflow: visible;
  }

  .class-context-nav__item {
    justify-content: center;
    min-width: 0;
    padding-inline: 4px;
    font-size: 12px;
  }

  .class-context-nav__item svg {
    display: none;
  }

  .presentation-controls > .btn,
  .goal-builder__start,
  .goal-live__actions .btn,
  .class-charter__head-actions .btn,
  .charter-rule__actions .iconbtn,
  .rule-icon-picker span,
  .rule-preset,
  .group__target-btn {
    min-height: 44px;
  }

  .charter-rule__actions .iconbtn {
    width: 44px;
    height: 44px;
  }

  .quicklog-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .quicklog-toolbar .quicklog-filter-bar {
    flex-wrap: wrap;
  }

  .quicklog-toolbar .classroom-meta-bar {
    grid-column: auto;
  }

  .quicklog-toolbar .segmented,
  .quicklog-toolbar .quicklog-search {
    width: 100%;
  }

  .ql-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .picker__stage {
    min-height: 220px;
    padding: var(--sp-4);
  }

  .groups-setup__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-3);
  }

  .groups-setup,
  .session-panel,
  .grade-distribution-summary {
    padding: var(--sp-3);
  }

  .board-controls .segmented,
  .board-controls .btn {
    width: 100%;
    min-width: 0;
  }

  .board__row {
    gap: var(--sp-2);
    padding: var(--sp-3);
  }

  .board__name {
    min-width: 0;
    max-width: 30%;
  }

  .session-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .session-row .row__end {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
}

@media (max-width: 360px) {
  .class-context-nav__item {
    font-size: 11px;
    letter-spacing: -.15px;
  }

  .class-hub > .class-tools-section .class-tool-card {
    padding-inline: var(--sp-2);
  }

  .qlcard__name {
    font-size: 12.5px;
  }

  .picker__summary {
    gap: var(--sp-2);
    font-size: 12px;
  }

  .board__bar {
    display: none;
  }

  .board__name {
    flex: 1;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .class-tool-card,
  .qlcard,
  .group,
  .group__member,
  .board__fill,
  .charter-rule,
  .charter-rule__actions {
    animation: none !important;
    transition: none !important;
  }
}

/* بطاقات رادار الزمن الدراسي (نبض الفصل + المحطة القادمة) */
.cal-radar-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
@media (max-width: 820px) {
  .cal-radar-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }
}

.cal-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.cal-card--pulse {
  border-color: rgba(24, 168, 120, 0.35);
  background: linear-gradient(180deg, var(--bg-elev) 0%, var(--bg) 100%);
}

.cal-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  min-width: 0;
}

.cal-card__head .badge {
  flex-shrink: 0;
  white-space: nowrap;
}

.cal-card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-3);
  white-space: nowrap;
  flex-shrink: 0;
}

.cal-card__eyebrow span {
  white-space: nowrap;
}

@media (max-width: 360px) {
  .cal-card {
    padding: var(--sp-3);
  }
  .cal-card__head {
    gap: 4px;
    margin-bottom: var(--sp-2);
  }
  .cal-card__eyebrow {
    font-size: 12px;
    gap: 4px;
  }
}

.cal-pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px var(--ok-soft);
  flex: none;
}

.cal-card__title {
  font-size: 18px;
  font-weight: 750;
  color: var(--text);
  line-height: 1.35;
  margin: 0;
}

/* مسار التقدم الزمني "أنت هنا" */
.cal-progress-box {
  margin: var(--sp-3) 0 var(--sp-2);
  padding: var(--sp-3);
  background: var(--bg-sunk);
  border-radius: var(--r-md);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.cal-progress-track {
  position: relative;
  height: 8px;
  background: var(--border-strong);
  border-radius: var(--r-full);
  margin: var(--sp-3) 0 var(--sp-2);
}

.cal-progress-fill {
  height: 100%;
  background: var(--brand);
  border-radius: var(--r-full);
  max-width: 100%;
}

.cal-progress-pin {
  position: absolute;
  top: 50%;
  transform: translate(50%, -50%);
  width: 14px;
  height: 14px;
  background: var(--brand);
  border: 2.5px solid var(--bg-elev);
  border-radius: var(--r-full);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

.cal-progress-bounds {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.cal-metrics-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
@media (max-width: 480px) {
  .cal-metrics-row {
    grid-template-columns: 1fr 1fr;
  }
}

.cal-metric {
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  text-align: start;
}

.cal-metric__label {
  font-size: 11.5px;
  color: var(--text-3);
  margin-bottom: 2px;
}

.cal-metric__val {
  font-size: 15px;
  font-weight: 750;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* بطاقة المحطة القادمة */
.cal-milestone-spotlight {
  padding: var(--sp-3) var(--sp-4);
  background: var(--brand-soft);
  border-radius: var(--r-md);
  margin: var(--sp-2) 0;
  border: 1px solid rgba(24, 168, 120, 0.25);
}

.cal-milestone-title {
  font-size: 17px;
  font-weight: 750;
  color: var(--text);
  margin-bottom: 4px;
}

.cal-milestone-meta {
  font-size: 13.5px;
  color: var(--text-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

/* شبكة الفصول الدراسية */
.cal-terms-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
@media (max-width: 720px) {
  .cal-terms-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }
}

.cal-term-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-3);
  position: relative;
}

.cal-term-card.is-active {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand);
}

.cal-term-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.cal-term-card__name {
  font-size: 17px;
  font-weight: 750;
  color: var(--text);
}

.cal-term-dates {
  padding: var(--sp-3);
  background: var(--bg-sunk);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.cal-term-date-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
}
.cal-term-date-label {
  color: var(--text-3);
  font-size: 13px;
}
.cal-term-date-val {
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.cal-term-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-2);
  flex-wrap: wrap;
}

/* جدول وفترات التقويم والأشرطة */
.cal-filters-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  overflow-x: auto;
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-3);
  scrollbar-width: none;
}
.cal-filters-row::-webkit-scrollbar {
  display: none;
}

.cal-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.cal-filter-btn:hover {
  background: var(--bg-sunk);
  color: var(--text);
}
.cal-filter-btn.is-active {
  background: var(--text);
  color: var(--bg-elev);
  border-color: var(--text);
}
.cal-filter-btn__count {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: var(--r-full);
  background: rgba(0, 0, 0, 0.08);
}
.cal-filter-btn.is-active .cal-filter-btn__count {
  background: rgba(255, 255, 255, 0.2);
}

/* بطاقة فترة في المخطط الزمني */
.cal-period-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-2);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.cal-period-row:hover {
  border-color: var(--border-strong);
}
.cal-period-row--active {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.cal-date-tile {
  flex: none;
  width: 58px;
  height: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: var(--bg-sunk);
  border: 1px solid var(--border);
  color: var(--text);
  text-align: center;
  line-height: 1.15;
}
.cal-date-tile__day {
  font-size: 17px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.cal-date-tile__month {
  font-size: 11.5px;
  color: var(--text-3);
  font-weight: 600;
}

.cal-period-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cal-period-title-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.cal-period-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.cal-period-sub {
  font-size: 13px;
  color: var(--text-3);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.cal-period-impact {
  font-size: 12px;
  color: var(--ok);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}
.cal-period-impact--remote {
  color: var(--info);
}

.cal-period-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

@media (max-width: 620px) {
  .cal-period-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-2);
    padding: var(--sp-3);
  }
  .cal-period-top {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
  }
  .cal-period-actions {
    justify-content: flex-end;
    padding-top: var(--sp-2);
    border-top: 1px solid var(--border);
    margin-top: 2px;
  }
}

/* شريط الاعتماد الوزاري في الأسفل */
.cal-accreditation-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-top: var(--sp-5);
}
.cal-accreditation-card__icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: var(--brand);
  border-radius: var(--r-md);
  flex: none;
}
.cal-accreditation-card__main {
  flex: 1;
  min-width: 0;
}
.cal-accreditation-card__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.cal-accreditation-card__desc {
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.4;
}

/* زر الحصص المتأثرة وبطاقة التأثير */
.cal-affected-btn {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  background: var(--bg-sunk);
  color: var(--text-2);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.cal-affected-btn:hover {
  background: var(--brand-soft);
  color: var(--brand);
  border-color: var(--brand);
}

.cal-milestone-affected {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px dashed rgba(24, 168, 120, 0.3);
  font-size: 13px;
}

/* بطاقات المناطق التعليمية في نافذة الإعدادات */
.cal-regions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
  margin: var(--sp-3) 0;
}
.cal-region-card {
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-elev);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: start;
}
.cal-region-card:hover {
  border-color: var(--border-strong);
  background: var(--bg-sunk);
}
.cal-region-card.is-active {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: 0 0 0 1px var(--brand);
}
.cal-region-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: 4px;
}
.cal-region-card__name {
  font-size: 14.5px;
  font-weight: 750;
  color: var(--text);
}
.cal-region-card__coverage {
  font-size: 12.5px;
  color: var(--text-3);
  line-height: 1.35;
}

/* استعراض الحصص المتأثرة */
@media (max-width: 420px) {
  .cal-settings-term { flex-wrap: wrap; }
  .cal-settings-term .row__end { width: 100%; justify-content: flex-end; }
}

.cal-affected-day {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.cal-affected-day__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-2);
}
.cal-affected-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-bottom: 1px dashed var(--border);
  font-size: 13px;
}
.cal-affected-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.cal-affected-item__period {
  flex: none;
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--r-sm);
  background: var(--bg-sunk);
  color: var(--text-2);
  border: 1px solid var(--border);
}
.cal-affected-item__main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.cal-affected-item__sec {
  font-weight: 700;
  color: var(--text);
}
.cal-affected-item__sub {
  color: var(--text-3);
  font-size: 12px;
}


/* ---------- الجدول الأسبوعي ---------- */
.week {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3);
}
.week__day {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
}
.week__day.is-today { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.week__head {
  display: flex; align-items: center; gap: var(--sp-2);
  font-weight: 700; font-size: 14.5px;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-3);
}
.week__head .badge { margin-inline-start: auto; }
.week__empty { text-align: center; color: var(--text-3); font-size: 13px; padding: var(--sp-3) 0; }

.slot {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2);
  background: var(--bg-sunk);
  border-radius: var(--r-sm);
}
.slot__main { flex: 1; min-width: 0; }
.slot__time { display: block; font-size: 12px; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; }
.slot__name { display: block; font-weight: 650; font-size: 13.5px; }
.slot__sub  { display: block; font-size: 11.5px; color: var(--text-3); }

/* ---------- أوقات الحصص ---------- */
.timerow { display: flex; align-items: center; gap: var(--sp-2); }
.timerow__range { display: flex; direction: ltr; align-items: center; gap: var(--sp-2); flex: 1; min-width: 0; }
.timerow__in { width: auto; flex: 1; min-width: 0; min-height: 38px; text-align: center; }

.timepreview {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--brand-soft);
  color: var(--brand);
  border-radius: var(--r-md);
  font-weight: 700; font-size: 15px;
}
.timepreview svg { width: 18px; height: 18px; }

.row.is-open { border-color: var(--brand); }
.row__icon.is-active { background: var(--brand-soft); color: var(--brand); }

/* ---------- المنهج ---------- */
.lesson { display: flex; align-items: center; gap: var(--sp-2); font-size: 14px; }
.lesson__dot {
  flex: none; width: 7px; height: 7px; border-radius: var(--r-full);
  background: var(--brand);
}
.lesson__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- لافتة فصل مغلق ---------- */
.banner-closed {
  border-color: var(--warn) !important;
  background: var(--warn-soft) !important;
  color: var(--warn);
  font-weight: 650; font-size: 14px;
  display: flex; align-items: center; gap: var(--sp-2);
}
.banner-closed svg { width: 18px; height: 18px; flex: none; }
.is-archived { opacity: .72; }

.radiocard--btn.is-on { border-color: var(--brand); background: var(--brand-soft); }

/* صف القائمة: العنوان والسطر الفرعي عنصران كتليان ليتكدّسا ويعمل القص */
.row__title, .row__sub, .tile__title, .tile__sub { display: block; }

/* ---------- ترويسة الطباعة ---------- */
.printhead { display: none; }
.printhead__title { font-size: 20px; font-weight: 800; }
.printhead__sub { font-size: 13px; color: var(--text-2); margin-top: 2px; }

/* ---------- الطباعة ---------- */
@media print {
  :root {
    --bg: #fff; --bg-elev: #fff; --bg-sunk: #f4f4f4;
    --border: #ccc; --border-strong: #999;
    --text: #000; --text-2: #333; --text-3: #666;
  }
  body { background: #fff; font-size: 11pt; }

  .topbar, .tabbar, .sidebar, .fab, .toast, .noprint,
  .segmented, .searchbar, .datebar, #modal-root { display: none !important; }

  .layout { display: block; }
  .main { padding: 0; }
  .page { max-width: none; padding: 0; }

  .printhead {
    display: block;
    border-bottom: 2px solid #000;
    padding-bottom: 8px;
    margin-bottom: 12px;
  }

  .card, .row, .tablewrap, .stat { box-shadow: none; border-color: #bbb; break-inside: avoid; }
  .section { margin-block: 10px; }
  .gtable { font-size: 9.5pt; }
  .gtable th, .gtable td { padding: 3px 5px; }
  .gtable thead th { background: #eee !important; position: static; }
  .gtable__sticky { position: static; }
  .grid--auto { grid-template-columns: repeat(3, 1fr); }
  .group { break-inside: avoid; }
  a { color: #000; text-decoration: none; }

  @page { margin: 14mm; }
}

/* ---------- تقارير الإدارة والطباعة ---------- */
.printhead__brand { font-size: 11px; color: var(--text-3); letter-spacing: .04em; }
.printhead__title { margin: 2px 0 0; }
.printhead__meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 8px 0 0; font-size: 13px; }
.printhead__meta div { display: flex; gap: 5px; }
.printhead__meta dt { color: var(--text-3); }
.printhead__meta dd { margin: 0; font-weight: 650; }
.report-identity__known { display: grid; gap: 5px; font-size: 14px; }
.print-signatures { display: none; }
.print-only { display: none; }

@media print {
  @page { size: A4 portrait; margin: 12mm; }
  html, body { background: #fff !important; color: #000 !important; direction: rtl; }
  body { font-size: 10.5pt; }
  .topbar, .tabbar, .sidebar, .teaching-tabs, .class-context-nav-bar, .app-status-strip, .fab, .toast, .noprint, .student-avatar,
  .segmented, .searchbar, .datebar, .sheet-backdrop, #modal-root { display: none !important; }
  .student-avatar { display: none !important; }
  .layout, .main, .page { display: block !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
  .print-report { width: 100%; color: #000; background: #fff; }
  .print-only { display: block !important; }
  .printhead { display: block; border-bottom: 1.5px solid #111; padding-bottom: 7px; margin: 0 0 10px; break-inside: avoid; }
  .printhead__brand { color: #444; }
  .printhead__meta { font-size: 9.5pt; }
  .print-tablewrap, .tablewrap, .scroll-x { overflow: visible !important; max-width: none !important; border: 0 !important; }
  .gtable { width: 100% !important; border-collapse: collapse; table-layout: auto; font-size: 8.5pt; }
  .gtable thead { display: table-header-group; }
  .gtable tr { break-inside: avoid; page-break-inside: avoid; }
  .gtable th, .gtable td { border: 1px solid #888 !important; padding: 4px !important; vertical-align: middle; color: #000 !important; background: #fff !important; }
  .gtable thead th { background: #eee !important; position: static !important; }
  .gtable__sticky { position: static !important; inset: auto !important; }
  .gtable__max { color: #333 !important; }
  .gtable a { color: #000 !important; text-decoration: none !important; }
  .badge { color: #000 !important; border: 0 !important; background: transparent !important; padding: 0 !important; font-weight: inherit !important; }
  .print-signatures { display: flex; justify-content: space-between; gap: 30mm; margin-top: 18mm; break-inside: avoid; page-break-inside: avoid; }
  .print-signatures > div { min-width: 42mm; border-top: 1px solid #777; padding-top: 4px; display: grid; gap: 5px; }
  .print-signatures strong { font-weight: 650; }
  .print-report--grades .gtable { font-size: 7.5pt; }
}
/* ---------- ملخص التوقيت ---------- */
.timing-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--sp-3) var(--sp-2); line-height: 1.4; }
.timing-summary-item { display: flex; flex-direction: column; }
.timing-summary-label { font-size: 12.5px; color: var(--text-3); margin-bottom: 3px; }
.timing-summary-value { font-weight: 650; font-size: 14.5px; font-variant-numeric: tabular-nums; }


/* ---------- صف الفسحة ---------- */
.row-recess { border-color: var(--recess); background: var(--recess-soft); padding: var(--sp-2) var(--sp-3); }
.recess-badge { flex: none; width: auto; padding: 0 var(--sp-2); height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-sm); background: var(--recess); color: #fff; font-size: 13px; font-weight: 800; }
.row-recess .row__title { font-weight: 700; color: var(--text); }
.row-recess .row__sub { color: var(--text-2); font-size: 13px; }
/* ---------- مساحة عمل الفصل: كثافة هادئة ومتجاوبة ---------- */
.class-hub { display:grid; gap:var(--sp-3); }
.class-hub > .section { margin-block:0; }
.class-hub > .section .section__head { margin-bottom:var(--sp-2); }
.class-hub > .section .tile { min-height:88px; padding:var(--sp-3); gap:var(--sp-1); }
.class-hub > .section .tile__icon { width:32px; height:32px; }
.class-hub > .section .tile__icon svg { width:18px; height:18px; }
.class-hub > .section .tile__title { font-size:13.5px; }
.class-hub > .section .tile__sub { font-size:11.5px; }
@media (min-width:900px) {
  .class-hub > .section .quick-tools-grid { gap:15px; }
  .class-hub > .section .tile { min-height:109px; padding:15px; gap:7px; }
  .class-hub > .section .tile__icon { width:39px; height:39px; }
  .class-hub > .section .tile__icon svg { width:22px; height:22px; }
  .class-hub > .section .tile__title { font-size:16px; }
  .class-hub > .section .tile__sub { font-size:14px; }
}
.class-hub > .section .stat { padding:var(--sp-2) var(--sp-3); }
.class-hub > .section .stat__val { font-size:20px; }
.class-goal-indicator { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto auto; align-items:center; gap:10px; min-height:46px; padding:8px 12px; color:var(--text); text-decoration:none; background:color-mix(in srgb,var(--brand-soft) 56%,var(--bg-elev)); border:1px solid var(--brand-border); border-radius:var(--r-lg); }
.class-goal-indicator:hover { background:color-mix(in srgb,var(--brand-soft) 78%,var(--bg-elev)); }
.class-goal-indicator__status { display:inline-flex; align-items:center; gap:5px; color:var(--brand); font-size:12px; font-weight:800; white-space:nowrap; }.class-goal-indicator__status svg { inline-size:15px; block-size:15px; }
.class-goal-indicator__title { min-width:0; overflow:hidden; color:var(--text); font-size:13.5px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.class-goal-indicator__timer { color:var(--text); font-size:17px; font-weight:850; letter-spacing:.4px; }.class-goal-indicator__reward { padding:3px 7px; color:var(--brand); background:var(--bg-elev); border:1px solid var(--brand-border); border-radius:var(--r-full); font-size:11.5px; font-weight:800; white-space:nowrap; }
.class-goal-indicator__chevron { display:grid; place-items:center; color:var(--text-3); }.class-goal-indicator__chevron svg { inline-size:16px; block-size:16px; }
@media (max-width:540px) { .class-goal-indicator { grid-template-columns:auto minmax(0,1fr) auto; gap:8px; padding-inline:10px; }.class-goal-indicator__reward,.class-goal-indicator__chevron { display:none; }.class-goal-indicator__status { font-size:11.5px; }.class-goal-indicator__title { font-size:12.5px; }.class-goal-indicator__timer { font-size:15.5px; } }
.class-hub__settings { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap; padding:var(--sp-3); background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--r-md); }
.class-hub__settings-title { font-size:13px; font-weight:750; }
.class-hub__settings-desc { margin:2px 0 0; color:var(--text-3); font-size:11.5px; }
.class-hub__settings-actions { display:flex; gap:var(--sp-2); flex-wrap:wrap; }

/* ---------- تأكيد حذف الإسناد ---------- */
.delete-teaching-dialog { display:grid; gap:var(--sp-3); }
.delete-teaching-dialog__badge { display:inline-flex; align-items:center; gap:6px; justify-self:start; padding:4px 9px; border-radius:var(--r-full); background:var(--danger-soft); color:var(--danger); font-size:12px; font-weight:700; }
.delete-teaching-dialog__badge svg { inline-size:14px; block-size:14px; }
.delete-teaching-dialog__block { padding:var(--sp-3); border:1px solid var(--border); border-radius:var(--r-md); }
.delete-teaching-dialog__block p { margin:5px 0 0; color:var(--text-2); font-size:13px; line-height:1.6; }
.delete-teaching-dialog__block--danger { background:color-mix(in srgb, var(--danger-soft) 55%, var(--bg-elev)); border-color:color-mix(in srgb, var(--danger) 28%, var(--border)); }
.delete-teaching-dialog__block--safe { background:color-mix(in srgb, var(--ok-soft) 55%, var(--bg-elev)); border-color:color-mix(in srgb, var(--ok) 28%, var(--border)); }

@media (max-width:540px) {
  .class-hub > .section .grid--auto { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .class-hub__settings { align-items:stretch; }
  .class-hub__settings-actions { width:100%; }
  .class-hub__settings-actions .btn { flex:1; justify-content:center; }
  .class-hub__delete { inline-size:34px; min-inline-size:34px; padding-inline:0; flex:0 0 34px !important; }
  .class-hub__delete span { display:none; }
}
/* ---------- حذف الفصل التجريبي: صغير على الهاتف وواضح للقارئ ---------- */
.class-demo-del-btn { display:inline-flex; align-items:center; justify-content:center; gap:4px; min-inline-size:32px; block-size:32px; padding-inline:8px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--bg-sunk); color:var(--text-3); cursor:pointer; font-size:12.5px; font-weight:650; line-height:1; white-space:nowrap; }
.class-demo-del-btn:hover, .class-demo-del-btn:focus-visible { color:var(--danger); background:var(--danger-soft); border-color:color-mix(in srgb, var(--danger) 35%, var(--border)); }
.class-demo-del-btn:active { transform:scale(.95); }
.class-demo-del-btn svg { inline-size:15px; block-size:15px; flex:none; }
@media (max-width:540px) { .class-demo-del-btn { inline-size:32px; padding-inline:0; } .class-demo-del-btn__label { display:none; } }@media (max-width:540px) {
  .classes-actions { flex-wrap:wrap; }
  .classes-actions .btn { flex:1 1 130px; justify-content:center; }
}
/* ---------- ملخص اكتمال الحضور ---------- */
.att-pill { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border:1px solid var(--border); border-radius:var(--r-full); font-size:12.5px; font-weight:750; white-space:nowrap; }
.att-pill svg { inline-size:14px; block-size:14px; }
.att-pill__dot { inline-size:7px; block-size:7px; border-radius:var(--r-full); background:var(--text-3); }
.att-pill--unmarked { color:var(--text-2); background:var(--bg-elev); }
.att-pill--done { color:var(--ok); background:var(--ok-soft); border-color:color-mix(in srgb, var(--ok) 30%, var(--border)); }
@media (max-width:400px) { .att-pill { padding:4px 8px; font-size:12px; gap:4px; } .att-row { min-width:0; } }
/* IA-CLEANUP: bounded icons, stable cards, and one class-workspace shell. */
.main:has(.class-hub) .topbar,
.topbar:has(+ .page .class-hub) { display:none; }
.hub-head__timing-pill { display:inline-flex; align-items:center; gap:6px; margin-inline-start:var(--sp-2); padding:3px 8px; border:1px solid var(--border); border-radius:var(--r-full); color:var(--text-2); background:var(--bg-sunk); font-size:12px; font-weight:700; line-height:1.35; vertical-align:middle; }
.hub-head__timing-icon { display:grid; place-items:center; inline-size:15px; block-size:15px; flex:none; color:var(--brand); }.hub-head__timing-icon svg { inline-size:15px; block-size:15px; max-inline-size:none; }
.class-context-nav-bar { padding:var(--sp-3) var(--sp-4) var(--sp-2); background:var(--bg-elev); border-bottom:1px solid var(--border); min-width:0; }.class-context-nav { display:flex; gap:var(--sp-2); overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-width:none; min-width:0; }.class-context-nav::-webkit-scrollbar { display:none; }.class-context-nav__item { flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:6px 12px; border-radius:var(--r-md); color:var(--text-2); background:var(--bg-elev); border:1px solid var(--border); text-decoration:none; font-size:13px; font-weight:700; white-space:nowrap; }.class-context-nav__item svg { inline-size:15px; block-size:15px; max-inline-size:none; }.class-context-nav__item:hover { background:var(--bg-sunk); color:var(--text); border-color:var(--border-strong); }.class-context-nav__item[aria-current="page"] { background:var(--brand-soft); color:var(--brand); border-color:var(--brand-border); }
.page--class-workspace { width:100%; max-width:1200px; }.class-hub,.page--class-workspace > * { min-width:0; }
.class-cards-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-4); }.class-card { position:relative; display:flex; flex-direction:column; min-width:0; min-height:84px; background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--r-xl); transition:border-color .15s var(--ease),box-shadow .15s var(--ease),transform .15s var(--ease); }.class-card:hover { border-color:var(--brand-border); box-shadow:var(--shadow-1); transform:translateY(-1px); }.class-card.is-demo { border-style:dashed; }.class-card__main { display:flex; flex:1; flex-direction:column; justify-content:center; gap:var(--sp-3); min-width:0; padding:var(--sp-4); color:inherit; text-decoration:none; }.class-card__head,.class-card__body { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-2); min-width:0; }.class-card__identity { display:flex; align-items:flex-start; gap:9px; flex:1; min-width:0; }.class-card__dot { inline-size:9px; block-size:9px; min-inline-size:9px; margin-top:6px; border-radius:50%; }.class-card__title { font-size:16.5px; font-weight:800; line-height:1.35; overflow-wrap:anywhere; }.class-card__sub { display:block; font-size:13.5px; font-weight:600; color:var(--text-2); line-height:1.4; overflow-wrap:anywhere; }.class-card__demo-action { position:absolute; inset-block-start:10px; inset-inline-end:10px; z-index:1; }.class-demo-del-btn { display:inline-flex; align-items:center; justify-content:center; inline-size:30px; block-size:30px; min-inline-size:30px; padding:0; color:var(--danger); background:color-mix(in srgb,var(--danger-soft) 40%,var(--bg-elev)); border:1px solid color-mix(in srgb,var(--danger) 25%,var(--border)); border-radius:var(--r-sm); cursor:pointer; line-height:1; }.class-demo-del-btn:hover,.class-demo-del-btn:focus-visible { color:var(--danger); background:var(--danger-soft); border-color:var(--danger-border); }.class-demo-del-btn svg { inline-size:15px; block-size:15px; max-inline-size:none; display:block; }
.class-hub-header { display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-4); background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-1); }.class-hub-header__top { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-3); }.class-hub-header__identity-block,.class-hub-header__end { display:flex; align-items:center; gap:var(--sp-3); min-width:0; }.class-hub-header__name-group { display:inline-flex; align-items:center; gap:var(--sp-2); min-width:0; flex-wrap:wrap; }.class-hub-header__color-bar { inline-size:4px; block-size:32px; border-radius:var(--r-full); flex:none; }.class-name-switcher-btn { display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:4px 10px; color:var(--text); font-family:inherit; background:transparent; border:1px solid var(--border); border-radius:var(--r-md); cursor:pointer; text-decoration:none; box-shadow:none; transition:background .15s var(--ease),border-color .15s var(--ease),box-shadow .15s var(--ease),transform .08s var(--ease); }.class-name-switcher-btn:hover { background:var(--bg-sunk); border-color:var(--border-strong); }.class-name-switcher-btn:active { transform:scale(0.98); }.class-name-switcher-btn:focus-visible { outline:2px solid var(--brand); outline-offset:1px; }.class-name-switcher-btn__title { color:var(--text); font-size:15.5px; font-weight:800; line-height:1.25; }.class-name-switcher-btn__chevron { display:grid; place-items:center; inline-size:15px; block-size:15px; flex:none; margin-inline-start:1px; }.class-name-switcher-btn__chevron svg { inline-size:13px; block-size:13px; max-inline-size:none; color:var(--text-3); transition:color .15s var(--ease); }.class-name-switcher-btn:hover .class-name-switcher-btn__chevron svg { color:var(--text-2); }.class-hub-header__sep { color:var(--text-3); font-size:14px; font-weight:500; user-select:none; opacity:.75; }.class-hub-header__sub { color:var(--text-2); font-size:14px; font-weight:600; line-height:1.3; user-select:none; }.class-hub-header__status-badge { display:inline-flex; align-items:center; gap:4px; padding:4px 9px; border:1px solid var(--border); border-radius:var(--r-full); color:var(--text-3); background:var(--bg-sunk); font-size:12px; font-weight:700; white-space:nowrap; }.class-hub-header__status-badge svg { inline-size:14px; block-size:14px; max-inline-size:none; }.class-hub-header__status-badge.is-live { color:var(--brand); background:var(--brand-soft); border-color:var(--brand-border); }.class-hub-header__status-badge.is-done { color:var(--ok); background:var(--ok-soft); }.class-hub-lesson-bar { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); flex-wrap:wrap; padding:var(--sp-2) var(--sp-3); background:var(--bg-sunk); border:1px solid var(--border); border-radius:var(--r-md); }.class-hub-lesson-bar__meta,.class-hub-lesson-bar__status { display:inline-flex; align-items:center; gap:var(--sp-2); font-size:12px; }.class-hub-lesson-bar__status.is-done { color:var(--ok); }.class-hub-lesson-bar__status.is-pending { color:var(--warn); }
.class-switcher-list { display:grid; gap:var(--sp-2); }.class-switcher-option { display:flex; align-items:center; gap:var(--sp-3); min-height:58px; padding:var(--sp-3); color:inherit; text-decoration:none; background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--r-md); }.class-switcher-option:hover { background:var(--bg-sunk); border-color:var(--border-strong); }.class-switcher-option.is-current { background:var(--brand-soft); border-color:var(--brand-border); }.class-switcher-option__dot { inline-size:10px; block-size:10px; min-inline-size:10px; border-radius:50%; }.class-switcher-option__main { display:flex; flex:1; flex-direction:column; min-width:0; }.class-switcher-option__title { font-size:15px; font-weight:800; overflow-wrap:anywhere; }.class-switcher-option__sub { color:var(--text-3); font-size:12px; overflow-wrap:anywhere; }.class-switcher-option__current { display:inline-flex; align-items:center; gap:4px; color:var(--brand); font-size:11.5px; font-weight:700; white-space:nowrap; }.class-switcher-option__current svg { inline-size:15px; block-size:15px; max-inline-size:none; }.class-switcher-option__chevron { display:grid; place-items:center; inline-size:18px; block-size:18px; color:var(--text-3); flex:none; font-family:Arial,sans-serif; font-size:22px; font-weight:400; line-height:18px; overflow:hidden; }

/* ---------- هدف وميثاق الصف ---------- */
.class-rules-page { display:grid; gap:var(--sp-5); max-width:1040px; margin-inline:auto; }
.class-rules-surface { position:relative; overflow:hidden; background:var(--bg-elev); border:1px solid var(--brand-border); border-radius:var(--r-xl); box-shadow:var(--shadow-1); }
.class-rules-surface::before { content:""; position:absolute; z-index:2; inset-block:0; inset-inline-start:0; inline-size:4px; background:var(--brand); pointer-events:none; }
.lesson-goal { position:relative; overflow:hidden; padding:clamp(15px,2vw,22px); color:var(--text); background:linear-gradient(135deg,color-mix(in srgb,var(--brand-soft) 62%,var(--bg-elev)),var(--bg-elev) 66%); }
.lesson-goal__head,.class-charter__head { position:relative; display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-3); margin-bottom:10px; }
.lesson-goal__head h1,.class-charter__head h2 { margin:0; color:var(--text); font-size:clamp(20px,2.4vw,25px); font-weight:850; line-height:1.25; letter-spacing:-.35px; }
.class-charter__eyebrow { display:block; margin-bottom:3px; color:var(--brand); font-size:12px; font-weight:800; }
.presentation-controls { display:flex; align-items:center; justify-content:flex-end; gap:var(--sp-2); flex-wrap:wrap; }
.presentation-controls > .btn { min-height:30px; padding-block:3px; color:var(--text-3); background:transparent; border-color:transparent; box-shadow:none; }
.presentation-controls > .btn:hover { color:var(--text); background:var(--bg-sunk); border-color:var(--border); }
.presentation-controls > .presentation-controls__action { color:var(--brand-text); background:color-mix(in srgb,var(--brand-soft) 42%,var(--bg-elev)); border-color:var(--brand-border); }
.presentation-controls > .presentation-controls__action:hover { color:var(--brand-text); background:color-mix(in srgb,var(--brand-soft) 68%,var(--bg-elev)); border-color:var(--brand); }
.presentation-controls > .presentation-controls__action:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.goal-builder { position:relative; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(270px,.85fr) auto; grid-template-areas:"goal settings start"; gap:var(--sp-3); align-items:start; }
.goal-builder__goal { grid-area:goal; }.goal-builder__settings { grid-area:settings; display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2); align-items:start; }.goal-builder__start { grid-area:start; align-self:start; min-width:138px; min-height:43px; margin-top:25px; justify-content:center; }.goal-builder__reveal { display:block; margin-top:5px; padding:4px; background:color-mix(in srgb,var(--bg-elev) 72%,transparent); border:1px solid var(--border); border-radius:var(--r-md); animation:goal-reveal .12s var(--ease); }.goal-builder__reveal--compact { padding:4px; }.goal-builder__reveal .input { min-height:38px; }.goal-builder__reveal--compact .input { min-width:0; padding-inline:9px; }.goal-builder__reveal input.tabular { text-align:start; }
@keyframes goal-reveal { from { opacity:0; } to { opacity:1; } }
.goal-live { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--sp-3); align-items:center; }
.goal-live__main { min-width:0; }.goal-live__eyebrow { display:inline-flex; align-items:center; gap:7px; color:var(--brand); font-size:13px; font-weight:800; }.goal-live__eyebrow svg { inline-size:17px; block-size:17px; }
.goal-live__title { max-width:700px; margin:4px 0 5px; font-size:clamp(22px,3vw,32px); line-height:1.24; font-weight:900; letter-spacing:-.5px; overflow-wrap:anywhere; }
.goal-live__timer { display:inline-block; color:var(--text); font-size:clamp(42px,6vw,58px); font-weight:900; line-height:.95; letter-spacing:1px; }
.goal-live__reward { display:flex; align-items:center; gap:6px; margin-top:5px; color:var(--text-2); font-size:13px; font-weight:700; }.goal-live__reward strong { display:inline-grid; place-items:center; min-inline-size:38px; block-size:25px; padding-inline:7px; color:var(--brand); background:var(--bg-elev); border:1px solid var(--brand-border); border-radius:var(--r-full); font-size:16px; }
.goal-live__notice { max-width:620px; margin-top:7px; padding:6px 9px; color:var(--warn); background:color-mix(in srgb,var(--warn-soft) 55%,transparent); border-radius:var(--r-sm); font-size:12.5px; font-weight:700; }.goal-live__notice.is-success { color:var(--ok); background:color-mix(in srgb,var(--ok-soft) 65%,transparent); }
.goal-live__actions { display:flex; flex-direction:column; gap:6px; min-width:165px; }.goal-live__actions .btn { min-height:36px; justify-content:center; }
.goal-confirm { grid-column:1/-1; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--sp-3); align-items:center; padding:12px; background:var(--bg-elev); border:1px solid var(--brand-border); border-radius:var(--r-lg); }
.goal-confirm__icon { display:grid; place-items:center; inline-size:42px; block-size:42px; color:var(--brand); background:var(--brand-soft); border-radius:50%; }.goal-confirm__icon svg { inline-size:22px; block-size:22px; }.goal-confirm__copy { display:flex; flex-direction:column; line-height:1.45; }.goal-confirm__copy strong { font-size:16px; }.goal-confirm__copy span { color:var(--text-2); font-size:14px; }.goal-confirm__copy small { color:var(--text-3); font-size:12px; }.goal-confirm__actions { display:flex; gap:var(--sp-2); }
.class-charter { padding:clamp(14px,2vw,20px); background:color-mix(in srgb,var(--brand-soft) 8%,var(--bg-elev)); border-top:1px solid var(--brand-border); }
.class-charter__head-actions { display:flex; flex-wrap:wrap; gap:var(--sp-2); }.charter-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-2); padding:0; list-style:none; counter-reset:charter; }
.charter-rule { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--sp-1); align-items:center; min-height:60px; padding:6px 8px; background:color-mix(in srgb,var(--bg-sunk) 52%,var(--bg-elev)); border:1px solid var(--border); border-radius:var(--r-md); transition:background .15s var(--ease),border-color .15s var(--ease),box-shadow .15s var(--ease); }
.charter-rule.is-selected { background:color-mix(in srgb,var(--brand-soft) 62%,var(--bg-elev)); border-color:var(--brand-border); box-shadow:inset 3px 0 0 var(--brand); }
.charter-rule__choice { display:grid; grid-template-columns:30px 34px minmax(0,1fr); gap:var(--sp-2); align-items:center; min-width:0; padding:2px; color:inherit; text-align:start; background:transparent; border:0; border-radius:var(--r-sm); cursor:pointer; font-family:inherit; }
.charter-rule__choice:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.charter-rule:not(.is-selected) .charter-rule__choice { opacity:.72; }
.charter-rule__number { display:grid; place-items:center; inline-size:28px; block-size:28px; color:var(--text-3); background:var(--bg-elev); border:1px solid var(--border); border-radius:50%; font-size:12px; font-weight:800; }.charter-rule.is-selected .charter-rule__number { color:var(--brand); border-color:var(--brand-border); }.charter-rule__number svg { inline-size:15px; block-size:15px; }.charter-rule__icon { display:grid; place-items:center; color:var(--brand); }.charter-rule__icon svg { inline-size:21px; block-size:21px; }.charter-rule__copy { display:flex; flex-direction:column; min-width:0; }.charter-rule__text { min-width:0; font-size:15px; font-weight:750; line-height:1.4; overflow-wrap:anywhere; }.charter-rule__copy small { margin-top:2px; color:var(--text-3); font-size:11.5px; font-weight:650; }.charter-rule.is-selected .charter-rule__copy small { color:var(--brand); }.charter-rule__actions { display:flex; gap:3px; opacity:.25; transition:opacity .15s var(--ease); }.charter-rule:hover .charter-rule__actions,.charter-rule:focus-within .charter-rule__actions { opacity:1; }.charter-rule__delete:hover { color:var(--danger); background:var(--danger-soft); }
.charter-empty { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-5); color:var(--text-2); background:color-mix(in srgb,var(--bg-sunk) 55%,var(--bg-elev)); border:1px dashed var(--border-strong); border-radius:var(--r-lg); }.charter-empty__icon { display:grid; place-items:center; inline-size:46px; block-size:46px; flex:none; color:var(--brand); background:var(--brand-soft); border-radius:var(--r-md); }.charter-empty__icon svg { inline-size:24px; block-size:24px; }.charter-empty strong { display:block; color:var(--text); font-size:15px; }.charter-empty p { margin-top:2px; font-size:13px; }
.rule-preset-groups { display:grid; gap:14px; max-height:min(62vh,520px); padding-inline-end:2px; overflow:auto; }.rule-preset-group { display:grid; gap:7px; }.rule-preset-group[hidden] { display:none; }.rule-preset-group__title { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); padding-inline:3px; color:var(--text-2); }.rule-preset-group__title strong { font-size:13px; font-weight:800; }.rule-preset-group__title span { display:grid; place-items:center; min-inline-size:23px; block-size:23px; padding-inline:6px; color:var(--text-3); background:var(--bg-sunk); border:1px solid var(--border); border-radius:var(--r-full); font-size:11px; font-weight:800; }.rule-preset-group--selected { padding:9px; background:color-mix(in srgb,var(--brand-soft) 58%,var(--bg-elev)); border:1px solid var(--brand-border); border-radius:var(--r-lg); }.rule-preset-group--selected .rule-preset-group__title { color:var(--brand); }.rule-preset-group--selected .rule-preset-group__title span { color:var(--brand); background:var(--bg-elev); border-color:var(--brand-border); }.rule-preset-group--existing { padding-top:10px; border-top:1px solid var(--border); }.rule-preset-list { display:grid; gap:7px; }.rule-preset { display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:var(--sp-2); align-items:center; min-height:50px; padding:8px 10px; color:var(--text); text-align:start; background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--r-md); cursor:pointer; }.rule-preset:not(:disabled):hover { background:var(--brand-soft); border-color:var(--brand-border); }.rule-preset.is-selected { background:var(--bg-elev); border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand-border); }.rule-preset:disabled { color:var(--text-3); background:var(--bg-sunk); cursor:default; }.rule-preset > span { display:grid; place-items:center; color:var(--brand); }.rule-preset svg { inline-size:18px; block-size:18px; }.rule-preset strong { font-size:14px; font-weight:750; }.rule-preset small { display:inline-flex; align-items:center; gap:4px; color:var(--brand); font-size:11.5px; white-space:nowrap; }.rule-preset-empty { padding:14px; color:var(--text-3); text-align:center; background:var(--bg-sunk); border:1px dashed var(--border); border-radius:var(--r-md); font-size:13px; }
.rule-editor { display:grid; gap:var(--sp-4); }.rule-icon-picker { display:flex; flex-wrap:wrap; gap:7px; padding:0; border:0; }.rule-icon-picker legend { width:100%; margin-bottom:4px; font-size:13px; font-weight:750; }.rule-icon-picker input { position:absolute; opacity:0; pointer-events:none; }.rule-icon-picker span { display:inline-flex; align-items:center; gap:6px; min-height:38px; padding:6px 10px; color:var(--text-2); background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--r-md); cursor:pointer; font-size:12.5px; font-weight:700; }.rule-icon-picker span svg { inline-size:16px; block-size:16px; }.rule-icon-picker input:checked + span { color:var(--brand); background:var(--brand-soft); border-color:var(--brand-border); }.rule-icon-picker input:focus-visible + span { outline:2px solid var(--brand); outline-offset:2px; }
.classroom-presentation { position:fixed; z-index:500; inset:0; display:flex; flex-direction:column; color:#f8fffc; background:#071a17; overflow:auto; }.classroom-presentation__head { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--sp-4); min-height:74px; padding:14px clamp(18px,4vw,54px); border-bottom:1px solid rgb(255 255 255 / .12); }.classroom-presentation__brand { color:#75e0bd; font-size:20px; font-weight:900; }.classroom-presentation__label { justify-self:center; color:#cde6df; font-size:15px; font-weight:800; }.classroom-presentation__exit { justify-self:end; color:#f8fffc; background:rgb(255 255 255 / .08); border-color:rgb(255 255 255 / .18); }
.classroom-presentation__body { display:grid; grid-template-columns:minmax(0,1.16fr) minmax(320px,.84fr); gap:clamp(24px,5vw,72px); flex:1; align-items:center; width:min(1500px,100%); margin:auto; padding:clamp(26px,5vw,72px); }.classroom-presentation__goal > span { display:block; color:#75e0bd; font-size:clamp(18px,2vw,28px); font-weight:850; }.classroom-presentation__goal h1 { max-width:900px; margin:10px 0 22px; color:#fff; font-size:clamp(34px,5.5vw,78px); line-height:1.22; font-weight:900; letter-spacing:-1px; }.classroom-presentation__timer { color:#fff; font-size:clamp(76px,12vw,180px); font-weight:900; line-height:.92; letter-spacing:3px; text-shadow:0 0 42px rgb(24 168 120 / .2); }.classroom-presentation__reward { display:inline-flex; align-items:center; gap:10px; margin-top:26px; padding:9px 15px; color:#d8ebe5; background:rgb(255 255 255 / .07); border:1px solid rgb(255 255 255 / .12); border-radius:var(--r-full); font-size:clamp(16px,1.7vw,24px); font-weight:750; }.classroom-presentation__reward strong { color:#75e0bd; font-size:1.35em; }.classroom-presentation__expired { margin-top:var(--sp-4); color:#f9d889; font-size:16px; font-weight:750; }
.classroom-presentation__charter { align-self:stretch; display:flex; flex-direction:column; justify-content:center; padding-inline-start:clamp(20px,4vw,58px); border-inline-start:1px solid rgb(255 255 255 / .15); }.classroom-presentation__charter-title { margin-bottom:var(--sp-4); color:#75e0bd; font-size:clamp(23px,2.5vw,38px); font-weight:900; }.classroom-presentation__charter ol { display:grid; gap:clamp(10px,1.7vh,20px); padding:0; list-style:none; }.classroom-presentation__charter li { display:grid; grid-template-columns:38px 30px minmax(0,1fr); gap:12px; align-items:center; color:#f8fffc; }.classroom-presentation__charter li > span { display:grid; place-items:center; inline-size:34px; block-size:34px; color:#9fb9b2; border:1px solid rgb(255 255 255 / .17); border-radius:50%; font-size:13px; font-weight:800; }.classroom-presentation__charter li i { display:grid; place-items:center; color:#75e0bd; font-style:normal; }.classroom-presentation__charter li svg { inline-size:22px; block-size:22px; }.classroom-presentation__charter li strong { font-size:clamp(18px,1.7vw,28px); line-height:1.35; }.classroom-presentation__charter p { color:#b8d0ca; font-size:20px; }
.classroom-presentation__body.is-charter-only { grid-template-columns:minmax(0,1040px); justify-content:center; }
.classroom-presentation__body.is-charter-only .classroom-presentation__charter { width:100%; align-self:center; padding:0; border:0; }
.classroom-presentation__body.is-charter-only .classroom-presentation__charter-title { text-align:center; font-size:clamp(30px,4vw,54px); }
.classroom-presentation__body.is-charter-only .classroom-presentation__charter ol { width:min(900px,100%); margin-inline:auto; }
@media (min-width:801px) {
  .goal-live__main { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"status timer" "title timer" "reward timer"; column-gap:24px; row-gap:2px; align-items:center; }
  .goal-live__eyebrow { grid-area:status; }
  .goal-live__title { grid-area:title; }
  .goal-live__timer { grid-area:timer; align-self:center; }
  .goal-live__reward { grid-area:reward; }
  .goal-live__notice { grid-column:1/-1; }
}
@media (max-width:800px) { .goal-builder { grid-template-columns:1fr; grid-template-areas:"goal" "settings" "start"; }.goal-builder__start { margin-top:0; }.goal-live { grid-template-columns:1fr; }.goal-live__actions { display:grid; grid-template-columns:1fr 1fr; min-width:0; }.goal-confirm { grid-template-columns:auto minmax(0,1fr); }.goal-confirm__actions { grid-column:1/-1; }.classroom-presentation__body { grid-template-columns:1fr; align-items:start; }.classroom-presentation__charter { padding:var(--sp-5) 0 0; border-inline-start:0; border-top:1px solid rgb(255 255 255 / .15); }.classroom-presentation__timer { font-size:clamp(72px,20vw,130px); } }
@media (max-width:560px) { .class-rules-page { gap:var(--sp-3); }.class-rules-surface { margin-inline:-4px; border-radius:var(--r-lg); }.lesson-goal { padding:14px; }.lesson-goal__head,.class-charter__head { flex-direction:column; gap:9px; margin-bottom:10px; }.presentation-controls { width:100%; }.presentation-controls > .btn { width:100%; min-height:30px; justify-content:center; }.goal-builder { display:flex; flex-direction:column; align-items:stretch; gap:10px; }.goal-builder__settings { grid-template-columns:1fr 1fr; }.goal-builder__start { width:100%; min-height:40px; justify-content:center; }.goal-live__title { font-size:22px; }.goal-live__timer { font-size:48px; }.goal-live__actions { grid-template-columns:1fr; }.goal-confirm { grid-template-columns:1fr; }.goal-confirm__icon { display:none; }.goal-confirm__actions { display:grid; grid-template-columns:1fr 1fr; }.class-charter { padding:14px; }.class-charter__head-actions { display:grid; grid-template-columns:1fr 1fr; width:100%; }.class-charter__head-actions .btn { justify-content:center; padding-inline:8px; }.charter-list { grid-template-columns:1fr; }.charter-rule { padding-inline:7px; }.charter-rule__choice { grid-template-columns:28px 28px minmax(0,1fr); }.charter-rule__actions { opacity:1; }.charter-rule__actions .iconbtn { inline-size:34px; block-size:34px; }.charter-empty { align-items:flex-start; padding:var(--sp-4); }.classroom-presentation__head { grid-template-columns:1fr auto; min-height:62px; padding:10px 14px; }.classroom-presentation__label { display:none; }.classroom-presentation__exit { font-size:13px; }.classroom-presentation__body { padding:24px 18px 42px; gap:34px; }.classroom-presentation__body.is-charter-only .classroom-presentation__charter { padding:0; border:0; }.classroom-presentation__goal h1 { font-size:34px; }.classroom-presentation__timer { font-size:72px; }.classroom-presentation__reward { margin-top:18px; font-size:15px; }.classroom-presentation__charter li { grid-template-columns:31px 24px minmax(0,1fr); gap:8px; }.classroom-presentation__charter li > span { inline-size:29px; block-size:29px; }.classroom-presentation__charter li svg { inline-size:18px; block-size:18px; }.classroom-presentation__charter li strong { font-size:18px; } }
/* ---------- كشف الدرجات: زر توزيع الدرجات وتنقل الفئات ---------- */
.grades-page-head { display:flex; align-items:center; justify-content:flex-end; gap:var(--sp-2); margin-bottom:var(--sp-3); }
.grades-distribution-action {
  display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:6px 14px;
  background:var(--brand); color:var(--brand-ink); border:1px solid var(--brand);
  border-radius:var(--r-md); font-size:13.5px; font-weight:750; text-decoration:none;
  box-shadow:var(--shadow-1);
  transition:background .15s var(--ease), border-color .15s var(--ease), transform .08s var(--ease), box-shadow .15s var(--ease);
}
.grades-distribution-action:hover {
  background:var(--brand-hover); border-color:var(--brand-hover); color:var(--brand-ink); box-shadow:var(--shadow-2);
}
.grades-distribution-action:active { transform:scale(.97); }
.grades-distribution-action:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.grades-distribution-action svg { inline-size:15px; block-size:15px; max-inline-size:none; flex:none; }

.grades-category-nav {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 110px), 1fr));
  gap:var(--sp-2);
  width:100%;
  box-sizing:border-box;
}
.grades-category-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:40px; padding:var(--sp-2) var(--sp-3);
  border-radius:var(--r-md); background:var(--bg-elev); border:1px solid var(--border-strong);
  font-size:13.5px; font-weight:700; color:var(--text-2); white-space:nowrap;
  cursor:pointer; width:100%; box-sizing:border-box; text-align:center;
  transition:background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease), transform .08s var(--ease);
}
.grades-category-btn:hover { background:var(--bg-sunk); color:var(--text); border-color:var(--border-strong); }
.grades-category-btn:active { transform:scale(.98); }
.grades-category-btn:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.grades-category-btn.is-on,
.grades-category-btn[aria-selected="true"] {
  background:var(--brand); border-color:var(--brand); color:var(--brand-ink); box-shadow:var(--shadow-1);
}
.grades-category-btn.is-on:hover,
.grades-category-btn[aria-selected="true"]:hover {
  background:var(--brand-hover); border-color:var(--brand-hover); color:var(--brand-ink);
}
.grades-category-btn__name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; }
.grades-category-btn__meta { display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; opacity:.8; flex:none; }
.grades-category-btn.is-on .grades-category-btn__meta,
.grades-category-btn[aria-selected="true"] .grades-category-btn__meta { opacity:.95; color:inherit; }

@media (max-width:540px) {
  .grades-category-nav { grid-template-columns:repeat(auto-fit, minmax(min(100%, 78px), 1fr)); gap:6px; }
}
@media (max-width:400px) {
  .grades-category-btn { min-height:38px; padding:6px 6px; gap:4px; font-size:12.5px; }
  .grades-category-btn__meta { font-size:11px; }
}
@media (max-width:540px) { .class-context-nav-bar { padding-inline:var(--sp-3); }.class-context-nav { gap:4px; }.class-context-nav__item { padding-inline:8px; }.class-cards-grid { gap:var(--sp-3); }.class-card__main { padding:var(--sp-3); gap:var(--sp-2); }.class-card__title { font-size:15px; }.class-card__sub { font-size:12.5px; }.class-demo-del-btn { inline-size:32px; block-size:32px; min-inline-size:32px; }.class-hub-header { padding:var(--sp-3); }.class-hub-header__top { align-items:flex-start; }.class-hub-header__end { width:100%; justify-content:space-between; }.class-hub-lesson-bar > .btn { margin-inline-start:auto; } }
@media (max-width:360px) { .class-context-nav__item svg { display:none; }.class-context-nav__item { padding-inline:9px; } }
@media (max-width:350px) { .class-cards-grid { grid-template-columns:1fr; gap:var(--sp-2); } }
/* ---------- حذف فصل مركزياً ---------- */
.class-action-delete-btn {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger-soft) 40%, var(--bg-elev));
  border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--border));
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease), transform .08s var(--ease);
}
.class-action-delete-btn:hover,
.class-action-delete-btn:focus-visible {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger) 50%, var(--border));
  box-shadow: 0 1px 3px color-mix(in srgb, var(--danger) 15%, transparent);
}
.class-action-delete-btn:active {
  transform: scale(0.98);
}
.class-action-delete-btn svg {
  inline-size: 15px;
  block-size: 15px;
  max-inline-size: none;
  color: var(--danger);
}
.class-delete-select-list { display:grid; gap:var(--sp-2); max-height:52vh; overflow-y:auto; padding-inline-end:2px; }
.class-delete-row { display:flex; align-items:center; gap:var(--sp-3); min-height:52px; padding:var(--sp-3); background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--r-md); cursor:pointer; transition:background .15s var(--ease), border-color .15s var(--ease); }
.class-delete-row:hover { background:var(--bg-sunk); border-color:var(--border-strong); }
.class-delete-row.is-selected { background:color-mix(in srgb, var(--danger-soft) 40%, var(--bg-elev)); border-color:color-mix(in srgb, var(--danger) 45%, var(--border)); }
.class-delete-row__radio { inline-size:18px; block-size:18px; accent-color:var(--danger); cursor:pointer; flex:none; }
.class-delete-row__dot { inline-size:10px; block-size:10px; min-inline-size:10px; border-radius:50%; flex:none; }
.class-delete-row__info { display:flex; flex-direction:column; min-width:0; flex:1; }
.class-delete-row__title { font-size:15px; font-weight:800; color:var(--text); overflow-wrap:anywhere; }
.class-delete-row__sub { font-size:12.5px; font-weight:600; color:var(--text-3); overflow-wrap:anywhere; }
.class-delete-confirm-box { display:grid; gap:var(--sp-3); }
.class-delete-confirm-box__badge { display:inline-flex; align-items:center; gap:6px; justify-self:start; padding:4px 10px; border-radius:var(--r-full); background:var(--danger-soft); color:var(--danger); font-size:12px; font-weight:750; }
.class-delete-confirm-box__badge svg { inline-size:14px; block-size:14px; max-inline-size:none; }
.class-delete-confirm-box__card { padding:var(--sp-3) var(--sp-4); background:var(--bg-sunk); border:1px solid var(--border); border-radius:var(--r-md); }
.class-delete-confirm-box__consequence { margin:0; font-size:13.5px; line-height:1.5; color:var(--text); }
.class-delete-confirm-box__note { margin:0; font-size:12px; line-height:1.45; color:var(--text-3); }

/* ---------- نظام المؤثرات التفاعلية ---------- */
.effect-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
}

.effect-confetti {
  position: fixed;
  pointer-events: none;
  border-radius: 2px;
  background: var(--bg, var(--brand));
  animation: burstConfetti 1.1s cubic-bezier(0.12, 0.8, 0.3, 1) forwards;
  z-index: 10000;
  transform-origin: center;
}

@keyframes burstConfetti {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
  }
  15% {
    opacity: 1;
    transform: translate(calc(-50% + var(--dx) * 0.35), calc(-50% + var(--dy) * 0.35)) scale(1.1) rotate(calc(var(--rot) * 0.35));
  }
  75% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 32px)) scale(0.6) rotate(var(--rot));
  }
}

.picker__stage.is-winner {
  animation: stageWinnerPulse 1.3s var(--ease) forwards;
  border-color: var(--brand);
}

@keyframes stageWinnerPulse {
  0% {
    transform: scale(0.98);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 40%, transparent);
  }
  30% {
    transform: scale(1.02);
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--brand) 0%, transparent);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .effect-confetti,
  .picker__stage.is-winner {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- الصور الرمزية للطلاب (RB-01) ---------- */
.student-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: var(--r-full);
  overflow: hidden;
  flex: none;
  vertical-align: middle;
  background: var(--bg-sunk);
  box-shadow: 0 0 0 1px var(--border);
  user-select: none;
}
.student-avatar--xxs { width: 18px; height: 18px; min-width: 18px; }
.student-avatar--xs  { width: 24px; height: 24px; min-width: 24px; }
.student-avatar--sm  { width: 36px; height: 36px; min-width: 36px; }
.student-avatar--md  { width: 44px; height: 44px; min-width: 44px; }
.student-avatar--lg  { width: 56px; height: 56px; min-width: 56px; }
.student-avatar--xl  { width: 84px; height: 84px; min-width: 84px; }

.student-avatar__svg {
  width: 100%;
  height: 100%;
  display: block;
}
.student-avatar__fallback {
  display: none;
}

:root[data-theme="dark"] .student-avatar {
  box-shadow: 0 0 0 1px var(--border-strong);
}

/* بطاقة هوية الطالب في شاشة ملف الطالب */
.student-profile-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.student-profile-header__info { flex: 1; min-width: 0; }
.student-profile-header__name { font-size: 17.5px; font-weight: 800; color: var(--text); line-height: 1.3; }
.student-profile-header__meta { font-size: 13px; color: var(--text-3); margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.student-profile-header__roll { font-weight: 700; color: var(--text-2); background: var(--bg-sunk); padding: 1px 6px; border-radius: var(--r-sm); font-size: 12px; }

/* بطاقة القرعة */
.picker__avatar {
  margin-bottom: var(--sp-2);
  display: flex;
  justify-content: center;
}
.picker-hist-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 6px;
}

/* ---------- مؤثرات الرصد السريع العائمة ---------- */
.score-float-badge {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  padding: 4px 10px;
  border-radius: var(--r-full);
  z-index: 9999;
  animation: floatScore 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.score-float-badge.is-pos {
  background: var(--ok);
  color: #fff;
}
.score-float-badge.is-neg {
  background: var(--danger);
  color: #fff;
}

@keyframes floatScore {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.6);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -15px) scale(1.15);
  }
  50% {
    transform: translate(-50%, -35px) scale(1);
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -60px) scale(0.85);
  }
}

/* ---------- إنتاجية الدرجات والرصد الجماعي ---------- */
.grades-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.grades-toolbar .field__label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}
.grades-toolbar .field__label svg,
.grades-toolbar svg:not(.btn svg):not(.iconbtn svg) {
  width: var(--icon-compact);
  height: var(--icon-compact);
  display: inline-block;
  vertical-align: middle;
  flex: none;
}
.grades-toolbar .select {
  min-width: 140px;
  height: 36px;
  font-size: 13.5px;
}
.bulk-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--brand-soft);
  border: 1px solid var(--brand);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
}
.bulk-bar__count {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--brand);
}
.bulk-bar__input {
  width: 75px;
  height: 36px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  border-radius: var(--r-sm);
}

/* ---------- شريط بحث وفلاتر الرصد السريع ---------- */
.quicklog-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
}
.quicklog-search {
  flex: 1;
  min-width: 160px;
  position: relative;
}
.quicklog-search .input {
  padding-inline-start: 32px;
  height: 38px;
  font-size: 14px;
}
.quicklog-search__icon {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  color: var(--text-3);
  pointer-events: none;
}
.quicklog-search__clear {
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-3);
  padding: 4px;
  cursor: pointer;
}

/* ---------- معاينة A4 وتقسيم الصفحات ---------- */
.a4-preview-container {
  background: var(--bg-sunk);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  margin-top: var(--sp-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  overflow-x: auto;
}
.a4-preview-banner {
  width: 100%;
  max-width: 210mm;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 8px 12px;
  background: var(--brand-soft);
  border: 1px solid var(--brand);
  border-radius: var(--r-md);
  font-size: 13.5px;
  font-weight: 650;
  color: var(--brand);
}
.a4-sheet {
  background: #ffffff;
  color: #111111;
  width: 100%;
  max-width: 210mm;
  min-height: 297mm;
  padding: 14mm;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.09), 0 1px 4px rgba(0, 0, 0, 0.05);
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  box-sizing: border-box;
  margin-inline: auto;
  position: relative;
}
.a4-sheet .printhead {
  display: block;
}
.a4-sheet .print-signatures {
  display: flex;
}
.a4-sheet .gtable th,
.a4-sheet .gtable td {
  border: 1px solid #bbb;
  padding: 5px;
  font-size: 12px;
}
.a4-sheet .gtable thead th {
  background: #f5f5f5 !important;
}
.print-page-break {
  break-after: page;
  page-break-after: always;
}
.report-chunk {
  margin-bottom: var(--sp-4);
}
.report-chunk__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-2);
  padding: 4px 10px;
  background: var(--bg-sunk);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 12.5px;
  font-weight: 650;
}
@media (max-width: 768px) {
  .a4-sheet {
    padding: 10px;
    min-height: auto;
  }
}

/* ---------- مشاركة الملخص ---------- */
.share-preview-box {
  background: var(--bg-sunk);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  max-height: 240px;
  overflow-y: auto;
  user-select: all;
  direction: rtl;
}

/* ---------- إرشادات تثبيت التطبيق على الأجهزة المختلفة ---------- */
.pwa-installed-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--ok-soft);
  border: 1px solid var(--ok);
  border-radius: var(--r-md);
  color: var(--ok);
}
.pwa-installed-card__icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--ok);
  color: #fff;
  border-radius: var(--r-full);
  flex: none;
}
.pwa-installed-card__icon svg {
  width: var(--icon-compact);
  height: var(--icon-compact);
}
.pwa-guide-step,
.ios-guide-step {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.pwa-guide-step__num,
.pwa-guide-num,
.ios-guide-step__num {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 800;
  font-size: 13.5px;
  border-radius: var(--r-full);
  flex: none;
}
.pwa-guide-step__text,
.pwa-guide-text,
.ios-guide-step__text {
  flex: 1;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}
.pwa-guide-step__text svg,
.pwa-guide-text svg,
.pwa-guide-step svg:not(.pwa-installed-card__icon svg),
.ios-guide-step svg {
  display: inline-block;
  width: var(--icon-inline);
  height: var(--icon-inline);
  vertical-align: -2.5px;
  margin-inline: 2px;
  color: var(--brand);
}

/* ---------- مركز تحكم المعلّم ومؤشر المزامنة (Teacher Mini Hub & Sync Indicator) ---------- */
.teacher-mini-hub-trigger {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px 10px;
  background: var(--bg-sunk);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  text-align: right;
  cursor: pointer;
  width: 100%;
  transition: background .15s var(--ease), border-color .15s var(--ease);
  user-select: none;
}
.teacher-mini-hub-trigger:hover {
  background: var(--bg-elev);
  border-color: var(--border-strong);
}
.teacher-mini-hub-trigger--mobile {
  margin-bottom: var(--sp-3);
  padding: 10px 12px;
}
.teacher-mini-hub-trigger__avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  background: var(--brand-soft);
  color: var(--brand-text);
  font-weight: 750;
  font-size: 13px;
  display: grid;
  place-items: center;
  flex: none;
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
}
.teacher-mini-hub-trigger__info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.teacher-mini-hub-trigger__name {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.teacher-mini-hub-trigger__sub {
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.2;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.teacher-mini-hub-trigger__sync {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.teacher-mini-hub-trigger__chev {
  color: var(--text-3);
  display: grid;
  place-items: center;
  flex: none;
}
.teacher-mini-hub-trigger__chev svg {
  width: var(--icon-compact);
  height: var(--icon-compact);
}

/* مؤشر المزامنة التكيفي */
.sync-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  display: inline-block;
  flex: none;
}
.sync-dot--synced {
  background: var(--ok);
  box-shadow: 0 0 0 2px var(--ok-soft);
}
.sync-dot--syncing {
  background: var(--brand);
  animation: sync-pulse 1.2s infinite ease-in-out;
}
.sync-dot--pending {
  background: var(--warn);
  box-shadow: 0 0 0 2px var(--warn-soft);
}
.sync-dot--offline {
  background: var(--text-3);
}
.sync-dot--error {
  background: var(--danger);
  box-shadow: 0 0 0 2px var(--danger-soft);
}
.sync-dot--idle {
  background: var(--text-3);
}

@keyframes sync-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); }
}

/* زر مركز المعلّم في الشريط العلوي للجوال */
.topbar__teacher-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--bg-sunk);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
  min-width: var(--tap);
  min-height: var(--tap);
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.topbar__teacher-btn:hover {
  background: var(--bg-elev);
  border-color: var(--border-strong);
}
@media (min-width: 900px) {
  .topbar__teacher-btn {
    display: none !important;
  }
}
.topbar__teacher-avatar {
  width: 22px;
  height: 22px;
  border-radius: var(--r-full);
  background: var(--brand-soft);
  color: var(--brand-text);
  font-size: 11px;
  font-weight: 750;
  display: grid;
  place-items: center;
}
.topbar__teacher-sync {
  margin-inline-start: 2px;
}

/* منتقي ألوان الشعب/الفصول */
.color-preview-dot {
  width: 28px;
  height: 28px;
  border-radius: var(--r-full);
  display: inline-block;
  box-shadow: 0 0 0 2px var(--border);
  flex: none;
}
.color-picker-popover {
  background: var(--bg-sunk);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  animation: fadeIn .15s ease-out;
}
.color-picker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
}
@media (min-width: 480px) {
  .color-picker-grid {
    grid-template-columns: repeat(8, 1fr);
  }
}
.color-picker-cell {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  background: transparent;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform .12s ease, border-color .12s ease;
  margin: auto;
}
.color-picker-cell span {
  width: 24px;
  height: 24px;
  border-radius: var(--r-full);
  display: block;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.color-picker-cell:hover {
  transform: scale(1.15);
}
.color-picker-cell.is-selected {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand-soft);
}

/* لوحة مركز تحكم المعلّم المنبثقة */
.mini-hub-sheet {
  display: flex;
  flex-direction: column;
}
.mini-hub-surface {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--brand-soft) 14%, var(--bg-elev)) 0%,
    var(--bg-elev) 42%
  );
  box-shadow: var(--shadow-1);
}
.mini-hub-surface::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--brand);
}
.mini-hub-section {
  border-top: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
}
.mini-hub-identity {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-4);
  background: transparent;
}
.mini-hub-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
}
.mini-hub-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  background: var(--brand);
  color: var(--brand-ink);
  font-weight: 800;
  font-size: 16px;
  display: grid;
  place-items: center;
  flex: none;
  border: 3px solid color-mix(in srgb, var(--bg-elev) 80%, transparent);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--brand) 26%, transparent);
}
.mini-hub-name {
  font-size: 16px;
  font-weight: 750;
  color: var(--text);
}
.mini-hub-school {
  margin-top: 2px;
}
.mini-hub-installed {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 32px;
  padding: 6px var(--sp-3);
  background: var(--ok-soft);
  border: 1px solid color-mix(in srgb, var(--ok) 35%, var(--border));
  border-radius: var(--r-sm);
  color: var(--ok);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

.mini-hub-installed__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--icon-compact);
  height: var(--icon-compact);
}

.mini-hub-installed__icon svg {
  width: var(--icon-compact);
  height: var(--icon-compact);
}

.mini-hub-installed__text {
  color: var(--text-2);
}

/* بطاقة الحساب في مركز تحكم المعلم */
.mini-hub-account {
  padding: var(--sp-3) var(--sp-4);
}
.mini-hub-account__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.mini-hub-account__info {
  min-width: 0;
  flex: 1;
}
.mini-hub-account__title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}
.mini-hub-account__status {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
  line-height: 1.3;
}
.mini-hub-account__action {
  flex: none;
  display: flex;
  align-items: center;
}
.mini-hub-account__action .btn {
  width: auto;
  white-space: nowrap;
}
.mini-hub-section__head,
.mini-hub-pwa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.mini-hub-sync__state {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  flex-wrap: wrap;
}
.mini-hub-sync__state .badge { white-space: nowrap; }
.mini-hub-sync {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  background: transparent;
}
.mini-hub-section__head,
.mini-hub-sync__meta { grid-column: 1; }
.mini-hub-sync__meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: var(--sp-2);
  line-height: 1.45;
}
.mini-hub-sync__action {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--brand-text);
  border-color: color-mix(in srgb, var(--brand) 26%, var(--border));
  background: transparent;
}
.mini-hub-pwa { padding: var(--sp-3) var(--sp-4); }
.mini-hub-pwa__copy { min-width: 0; }
.mini-hub-pwa .mini-hub-installed { margin-top: 4px; min-height: auto; padding: 0; border: 0; background: transparent; }
.mini-hub-settings-link {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: var(--sp-3);
  border-top: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  padding-inline: var(--sp-4);
  padding-block: var(--sp-3);
  color: var(--text);
  text-decoration: none;
  background: transparent;
}
.mini-hub-settings-link:hover { background: color-mix(in srgb, var(--brand-soft) 32%, transparent); }
.mini-hub-settings-link__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  color: var(--brand-ink);
  background: var(--brand);
}
.mini-hub-settings-link__icon svg,
.mini-hub-settings-link__chev svg { width: var(--icon-compact); height: var(--icon-compact); }
.mini-hub-settings-link__copy { min-width: 0; flex: 1; }
.mini-hub-settings-link__copy b,
.mini-hub-settings-link__copy small { display: block; }
.mini-hub-settings-link__copy b { font-size: var(--fs-sm); }
.mini-hub-settings-link__copy small { margin-top: 2px; color: var(--text-3); font-size: var(--fs-xs); }
.mini-hub-settings-link__chev { display: grid; color: var(--text-3); }
@media (max-width: 359px) {
  .mini-hub-sync { grid-template-columns: minmax(0, 1fr); }
  .mini-hub-sync__action { grid-column: 1; grid-row: auto; justify-self: start; margin-top: var(--sp-3); }
}

.btn--xs {
  min-height: 30px;
  padding-inline: var(--sp-3);
  padding-block: 4px;
  font-size: 12.5px;
  border-radius: var(--r-sm);
  font-weight: 600;
}

/* ---------- إشعار تثبيت التطبيق السياقي في الرئيسية ---------- */
.home-pwa-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 10px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  position: relative;
  transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
}

.home-pwa-prompt__main {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  flex: 1;
}

.home-pwa-prompt__icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: var(--brand-text);
  border-radius: var(--r-sm);
  flex: none;
}

.home-pwa-prompt__icon svg {
  width: 17px;
  height: 17px;
}

.home-pwa-prompt__content {
  min-width: 0;
  flex: 1;
}

.home-pwa-prompt__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.home-pwa-prompt__desc {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.35;
  margin-top: 1px;
}

.home-pwa-prompt__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
}

.home-pwa-prompt__install {
  font-size: 12.5px;
  min-height: 32px;
  padding-inline: 12px;
  padding-block: 4px;
  white-space: nowrap;
}

.home-pwa-prompt__dismiss {
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--text-3);
  border-radius: var(--r-sm);
  border: none;
  background: transparent;
  cursor: pointer;
  transition: color 0.15s var(--ease), background-color 0.15s var(--ease);
  flex: none;
}

.home-pwa-prompt__dismiss:hover {
  color: var(--text);
  background: var(--bg-sunk);
}

.home-pwa-prompt__dismiss:active {
  transform: scale(0.95);
}

.home-pwa-prompt__dismiss:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

.home-pwa-prompt__dismiss svg {
  width: 15px;
  height: 15px;
}

@media (max-width: 640px) {
  .home-pwa-prompt {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-2);
    padding: 12px 14px;
  }

  .home-pwa-prompt__main {
    align-items: flex-start;
    padding-inline-end: 28px;
  }

  .home-pwa-prompt__dismiss {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
  }

  .home-pwa-prompt__actions {
    margin-top: 2px;
  }

  .home-pwa-prompt__install {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- SCHEDULE-UX-01: isolated schedule/timing presentation ---------- */
.compact-timing-pill { display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:3px 10px; border:1px solid var(--border); border-radius:var(--r-full); background:var(--bg-elev); color:var(--text-2); font-size:12.5px; font-weight:700; text-decoration:none; white-space:nowrap; }
.compact-timing-pill:hover { color:var(--brand-text); border-color:var(--brand); }
.compact-timing-pill__icon { display:grid; place-items:center; color:var(--brand-text); }
.compact-timing-pill__icon svg { width:14px; height:14px; }
.schedule-head,.schedule-summary-bar,.schedule-head__title-group,.schedule-head__actions,.schedule-summary-bar__stats,.schedule-summary-bar__item,.schedule-class-card__head,.schedule-class-card__foot,.timing-profile-card__head,.timing-profile-card__title-wrap,.timing-profile-card__range,.timing-profile-card__actions-row,.slot__top-row,.slot__grade-sec,.slot__actions { display:flex; align-items:center; gap:var(--sp-2); }
.schedule-head,.schedule-summary-bar { justify-content:space-between; flex-wrap:wrap; margin-bottom:var(--sp-3); }
.schedule-head__title { color:var(--text-1); font-size:var(--fs-page); font-weight:var(--fw-heavy); line-height:var(--lh-tight); }
.schedule-summary-bar { padding:8px 14px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg-elev); color:var(--text-2); }
.schedule-summary-bar__item { white-space:nowrap; }
.schedule-summary-bar__item strong { color:var(--text-1); }
.schedule-day-tabs { display:none; }
.schedule-classes-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:var(--sp-3); }
.schedule-class-card { display:flex; flex-direction:column; gap:6px; padding:14px 16px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg-elev); color:inherit; text-decoration:none; }
.schedule-class-card__foot { justify-content:space-between; padding-top:8px; border-top:1px solid var(--border); }
.schedule-class-card__title { color:var(--text-1); font-weight:750; }
.schedule-class-card__sub { color:var(--text-3); font-size:13px; }
.schedule-class-card .sec-dot,.slot__grade-sec .sec-dot { width:8px; height:8px; flex:none; border-radius:50%; background:var(--sec-color,var(--brand)); }
.slot { display:flex; align-items:stretch; gap:8px; min-width:0; padding:8px 10px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--bg-sunk); position:relative; transition:all .15s ease; }
.slot__side-col { display:flex; align-items:center; justify-content:center; min-width:24px; padding:4px 3px; border:1px solid var(--border); border-radius:4px; background:var(--bg-elev); flex:none; }
.slot__period-num { color:var(--brand-text); font-weight:800; }
.slot__main-col { display:flex; flex:1; flex-direction:column; gap:3px; min-width:0; }
.slot__top-row { justify-content:space-between; gap:4px; min-width:0; }
.slot__grade-sec { flex:1 1 auto; gap:5px; min-width:0; color:var(--text-1); font-size:13px; font-weight:750; white-space:nowrap; }
.slot__grade-sec strong { min-width:0; overflow:hidden; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.slot__grade-sec .sec-dot { width:7px; height:7px; }
.slot__actions { display:inline-flex; gap:2px; flex:0 0 auto; margin-inline-start:auto; }
.slot__actions .iconbtn { width:20px; height:20px; padding:0; color:var(--text-3); border-radius:4px; }
.slot__actions .iconbtn svg { width:11px; height:11px; }
.slot__actions .iconbtn:hover { color:var(--text-1); background:var(--bg-sunk); }
.slot__subject { display:block; overflow:hidden; min-width:0; color:var(--text-2); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.slot__time-row { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); }
.slot__time { color:var(--text-3); font-size:11px; white-space:nowrap; }
.slot.is-current-slot { border-color:color-mix(in srgb, var(--brand) 48%, var(--border)); border-inline-start-width:3px; border-inline-start-color:var(--brand); background:var(--brand-soft); }
.slot.is-current-slot .slot__side-col { border-color:color-mix(in srgb, var(--brand) 38%, var(--border)); background:var(--bg-elev); }
.slot__live { display:inline-flex; align-items:center; flex:none; padding:2px 7px; border-radius:var(--r-full); background:var(--brand); color:var(--brand-ink); font-size:10.5px; font-weight:800; white-space:nowrap; }

.timing-profiles-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-4); }
.timing-profile-card { display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-4); border:1px solid var(--border); border-radius:var(--r-lg); background:var(--bg-elev); }
.timing-profile-card.is-active-profile { border-color:var(--brand); }
.timing-profile-card__title-col { display:flex; flex-direction:column; min-width:0; }
.timing-profile-card__name { overflow:hidden; color:var(--text-1); font-size:15px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.timing-profile-card__sub-status,.timing-profile-card__range { color:var(--text-3); font-size:12px; }
.timing-profile-card__icon { display:grid; place-items:center; width:36px; height:36px; flex:none; border-radius:var(--r-md); background:var(--bg-sunk); color:var(--brand); }
.timing-profile-card__icon svg { width:19px; height:19px; }
.timing-profile-card__specs { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; padding:10px; border-radius:var(--r-md); background:var(--bg-sunk); text-align:center; }
.timing-profile-card__spec-item { display:flex; flex-direction:column; gap:2px; color:var(--text-3); font-size:11px; }
.timing-profile-card__spec-item strong { color:var(--text-1); font-size:13px; }
.timing-profile-card__actions { display:flex; flex-direction:column; gap:8px; padding-top:var(--sp-3); margin-top:auto; border-top:1px solid var(--border); }
.timing-profile-card__actions-row .btn { flex:1; }

.models-bar { display: flex; align-items: center; gap: 8px; padding: 4px 6px; background: var(--bg-sunk); border: 1px solid var(--border); border-radius: var(--r-md); min-width: 0; overflow: visible; }
.models-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  padding: 2px 0;
}
.models-tab { flex:none; padding:6px 12px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--bg-elev); color:var(--text-2); white-space:nowrap; }
.models-tab.is-active { border-color:var(--brand); background:var(--brand); color:#fff; }
.models-bar__actions { display:flex; align-items:center; gap:6px; flex:0 0 auto; margin-inline-start:auto; }
.models-bar__action-btn { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--bg-elev); color:var(--text-2); }
.models-bar__action-btn svg { width:15px; height:15px; }
.grades-stage-group { margin-bottom:var(--sp-3); }
.grades-stage-title { margin-bottom:6px; color:var(--text-2); font-size:12px; font-weight:700; }
.grades-chips-grid { display:flex; flex-wrap:wrap; gap:6px; }
.grade-chip-label { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--bg-elev); font-size:12px; }
.generator-action-banner { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); padding:10px 14px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg-elev); }
.generator-action-banner__info { display:flex; flex-direction:column; gap:2px; min-width:0; }
.generator-action-banner__title { font-weight:750; }
.generator-action-banner__desc { color:var(--text-3); font-size:11.5px; }
.timerow { display:flex; align-items:center; gap:var(--sp-2); padding:6px 10px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg-sunk); }
.timerow .period { display:grid; place-items:center; width:32px; height:32px; flex:none; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--bg-elev); color:var(--brand); font-weight:800; }
.timerow__range { display:flex; align-items:center; gap:var(--sp-2); flex:1; min-width:0; direction:rtl; }
.timerow__in { width:100%; min-width:0; min-height:38px; direction:ltr; text-align:center; font-variant-numeric:tabular-nums; }
.timerow--recess { justify-content:space-between; gap:8px; min-width:0; border-style:dashed; border-color:var(--recess); background:var(--recess-soft); }
.recess-pill { display:inline-flex; align-items:center; gap:5px; flex:none; padding:2px 7px; border-radius:var(--r-sm); background:var(--recess-soft); color:var(--recess); font-weight:700; white-space:nowrap; }
.recess-dot { width:6px; height:6px; border-radius:50%; background:var(--recess); }
.recess-info { display:inline-flex; align-items:center; justify-content: center; gap:8px; flex:1 1 auto; min-width:0; text-align:center; white-space:nowrap; }
.recess-actions { display:inline-flex; gap:4px; flex:none; }
.recess-edit-btn,.recess-del-btn { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--bg-elev); }
.recess-del-btn {
  color: var(--danger) !important;
  border-color: var(--danger) !important;
}
.input--center { text-align: center !important; }

@media (max-width:1100px) { .slot { padding:6px 7px; gap:6px; } .slot__side-col { min-width:22px; padding:3px 2px; } .slot__period-num { font-size:13.5px; } .slot__grade-sec { gap:4px; font-size:12px; } .slot__actions .iconbtn { width:18px; height:18px; } }
@media (max-width:768px) { .timing-profiles-grid { grid-template-columns:1fr; gap:var(--sp-3); } .schedule-day-tabs { position:sticky; top:6px; z-index:8; display:flex; gap:6px; overflow-x:auto; padding:7px 2px 9px; margin-bottom:var(--sp-3); background:var(--bg); box-shadow:0 8px 12px color-mix(in srgb, var(--bg) 88%, transparent); scrollbar-width:none; } .schedule-day-tabs::-webkit-scrollbar { display:none; } .schedule-day-tab { display:inline-flex; align-items:center; justify-content:center; min-height:44px; gap:4px; flex:none; padding:6px 13px; border:1px solid var(--border); border-radius:var(--r-full); background:var(--bg-elev); color:var(--text-2); cursor:pointer; font-size:13px; font-weight:750; white-space:nowrap; transition:background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease); } .schedule-day-tab:hover { background:var(--bg-sunk); color:var(--text-1); } .schedule-day-tab.is-active { background:var(--brand); border-color:var(--brand); color:var(--brand-ink); box-shadow:0 5px 12px color-mix(in srgb, var(--brand) 20%, transparent); } .schedule-day-tab .tab-dot { display:inline-block; width:6px; height:6px; margin-inline-start:2px; border-radius:50%; background:var(--brand); } .schedule-day-tab.is-active .tab-dot { background:var(--brand-ink); } .week.has-day-filter { grid-template-columns:minmax(0,1fr); } .week.has-day-filter .week__day:not(.is-selected-day) { display:none; } .week.has-day-filter .week__day { padding:var(--sp-3); border-radius:var(--r-lg); } .week.has-day-filter .week__head { font-size:15px; } .week__empty { padding:var(--sp-4) var(--sp-2); } .slot { padding:10px; border-radius:var(--r-md); } .slot__side-col { min-width:30px; padding:6px 4px; } .slot__period-num { font-size:14px; } .slot__grade-sec { font-size:14px; } .slot__subject { font-size:12.5px; } .slot__time { font-size:11.5px; } .slot__actions { gap:4px; } .slot__actions .iconbtn { width:44px; height:44px; } .slot__actions .iconbtn svg { width:16px; height:16px; } }
@media (max-width:540px) { .generator-action-banner { flex-direction:column; align-items:stretch; } .generator-action-banner__btn { width:100%; justify-content:center; } .schedule-summary-bar__stats { width:100%; justify-content:space-between; flex-wrap:wrap; } .schedule-summary-bar__sep { display:none; } }
@media (max-width:390px) { .timing-profile-card { padding:var(--sp-3); } .recess-info { gap:4px; font-size:11px; } .recess-pill { padding-inline:5px; } }

/* ---------- Visual System Batch A: أهداف اللمس في الواجهات اليومية ---------- */
@media (max-width: 768px) {
  .btn--sm,
  .btn--xs,
  .segmented__btn,
  .chip,
  .compact-timing-pill,
  .home-pwa-prompt__install,
  .home-pwa-prompt__dismiss,
  .models-tab,
  .models-bar__action-btn,
  .timerow__in,
  .recess-edit-btn,
  .recess-del-btn {
    min-height: 44px;
  }

  .home-pwa-prompt__dismiss,
  .models-bar__action-btn,
  .recess-edit-btn,
  .recess-del-btn {
    width: 44px;
    height: 44px;
  }
}

/* Batch B cascade seal: scoped overrides after all legacy classroom rules. */
.class-context-nav .class-context-nav__item {
  min-height: 44px;
}

.class-context-nav .class-context-nav__item[aria-current="page"] {
  color: var(--brand-text);
}

.class-hub > .section.class-tools-section .quick-tools-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}

.class-hub > .section.class-tools-section .class-tool-card {
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  min-height: 104px;
  padding: var(--sp-3);
  text-align: center;
}

.class-hub > .section.class-tools-section .class-tool-card .tile__icon {
  width: 40px;
  height: 40px;
  margin-inline: auto;
}

.class-hub > .section.class-tools-section .class-tool-card .tile__icon svg {
  width: 22px;
  height: 22px;
}

.class-hub > .section.class-tools-section .class-tool-card .tile__title,
.class-hub > .section.class-tools-section .class-tool-card .tile__sub {
  width: 100%;
  min-width: 0;
  text-align: center;
  overflow-wrap: anywhere;
}

.class-hub > .section.class-tools-section .class-tool-card .tile__title {
  font-size: 14px;
  line-height: 1.3;
}

.class-hub > .section.class-tools-section .class-tool-card .tile__sub {
  font-size: 11.5px;
  line-height: 1.35;
}

.class-rules-page .class-goal-indicator__status,
.class-rules-page .class-goal-indicator__reward,
.class-rules-page .goal-live__eyebrow,
.class-rules-page .goal-live__reward strong,
.class-rules-page .charter-rule.is-selected .charter-rule__number,
.class-rules-page .charter-rule.is-selected .charter-rule__copy small,
.rule-preset-group--selected .rule-preset-group__title,
.rule-preset-group--selected .rule-preset-group__title span,
.rule-preset small {
  color: var(--brand-text);
}

.class-rules-page .charter-rule.is-selected {
  box-shadow: none;
  border-inline-start: 3px solid var(--brand);
}

.quicklog-toolbar .quicklog-filter-bar {
  margin: 0;
}

.quicklog-toolbar .quicklog-search .input {
  height: 44px;
  min-height: 44px;
  padding-inline-start: 40px;
  padding-inline-end: 44px;
}

.quicklog-toolbar .quicklog-search__icon {
  right: auto;
  inset-inline-start: 12px;
}

.quicklog-toolbar .quicklog-search__clear {
  left: auto;
  inset-inline-end: 0;
  width: 44px;
  height: 44px;
  padding: 0;
}

@media (min-width: 700px) and (max-width: 1199px) {
  .class-hub > .section.class-tools-section .quick-tools-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-3);
  }
}

@media (min-width: 1200px) {
  .class-hub > .section.class-tools-section .quick-tools-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 8px;
  }

  .class-hub > .section.class-tools-section .class-tool-card {
    min-height: 128px;
    padding: 14px 7px;
    gap: 7px;
  }

  .class-hub > .section.class-tools-section .class-tool-card .tile__icon {
    width: 44px;
    height: 44px;
  }

  .class-hub > .section.class-tools-section .class-tool-card .tile__icon svg {
    width: 24px;
    height: 24px;
  }

  .class-hub > .section.class-tools-section .class-tool-card .tile__title {
    font-size: 13.5px;
  }

  .class-hub > .section.class-tools-section .class-tool-card .tile__sub {
    font-size: 11px;
  }
}

@media (min-width: 1400px) {
  .class-hub > .section.class-tools-section .quick-tools-grid {
    gap: 10px;
  }

  .class-hub > .section.class-tools-section .class-tool-card {
    min-height: 134px;
    padding: 16px 9px;
  }

  .class-hub > .section.class-tools-section .class-tool-card .tile__icon {
    width: 48px;
    height: 48px;
  }

  .class-hub > .section.class-tools-section .class-tool-card .tile__icon svg {
    width: 26px;
    height: 26px;
  }

  .class-hub > .section.class-tools-section .class-tool-card .tile__title {
    font-size: 14px;
  }

  .class-hub > .section.class-tools-section .class-tool-card .tile__sub {
    font-size: 11.5px;
  }
}

@media (max-width: 768px) {
  .class-context-nav-bar .class-context-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    overflow: visible;
  }

  .class-context-nav .class-context-nav__item {
    justify-content: center;
    min-width: 0;
    padding-inline: 4px;
    font-size: 12px;
  }

  .class-context-nav .class-context-nav__item svg {
    display: none;
  }

  .class-rules-page .presentation-controls > .btn,
  .class-rules-page .goal-builder__start,
  .class-rules-page .goal-live__actions .btn,
  .class-rules-page .class-charter__head-actions .btn,
  .class-rules-page .charter-rule__actions .iconbtn,
  .rule-icon-picker span,
  .rule-preset {
    min-height: 44px;
  }

  .class-rules-page .charter-rule__actions .iconbtn {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 360px) {
  .class-context-nav .class-context-nav__item {
    font-size: 11px;
    letter-spacing: -.15px;
  }
}

/* ---------- Visual System Batch C1: الإدارة الأساسية ---------- */
.management-page {
  width: 100%;
  min-width: 0;
}

.management-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  margin-bottom: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}

.management-overview {
  gap: 0;
  overflow: hidden;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

/*
 * RAKEEZ Accent Surface
 * للحالة النشطة أو السياق الأعلى أولوية فقط؛ لا يُستخدم للبطاقات العادية
 * أو القوائم المتكررة أو الزخرفة غير الوظيفية.
 */
.rakeez-accent-surface {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--brand-soft) 52%, var(--bg-elev)) 0%,
      var(--bg-elev) 72%
    );
  border-color: var(--brand-border);
  border-inline-start: 3px solid var(--brand);
  box-shadow: var(--shadow-1);
}

[data-theme="dark"] .rakeez-accent-surface {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--brand-soft) 24%, var(--bg-elev)) 0%,
      var(--bg-elev) 76%
    );
}

.management-overview > .stat {
  min-width: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.management-overview > .stat + .stat {
  border-inline-start: 1px solid var(--border);
}

.management-empty__setup {
  width: min(100%, 560px);
  margin-inline: auto;
  padding: var(--sp-4);
  background: color-mix(in srgb, var(--brand-soft) 20%, var(--bg-elev));
  border: 1px dashed var(--brand-border);
  border-radius: var(--r-lg);
}

/* الفصول */
.classes-overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  box-shadow: none;
}

.classes-overview__metric {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-width: 0;
  min-height: 56px;
  padding: var(--sp-2) var(--sp-4);
}

.classes-overview__metric + .classes-overview__metric {
  border-inline-start: 1px solid var(--border);
}

.classes-overview__label {
  color: var(--text-3);
  font-size: 13px;
  font-weight: 650;
}

.classes-overview__value {
  color: var(--text);
  font-size: 19px;
  line-height: 1;
}

.class-cards-grid {
  gap: var(--sp-3);
}

.class-card {
  min-height: 116px;
  border-radius: var(--r-lg);
  box-shadow: none;
}

.class-card__main {
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
}

.class-card__identity {
  align-items: center;
}

.class-card__dot {
  width: 10px;
  height: 10px;
  margin-top: 0;
  box-shadow: 0 0 0 4px var(--bg-sunk);
}

.class-card__title {
  font-size: 16px;
}

.class-card__body {
  align-items: center;
  justify-content: flex-start;
  gap: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
}

.class-card__sub {
  flex: 1;
  min-width: 0;
}

.class-card__count {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: none;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.classes-actions {
  justify-content: flex-end;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}

@media (min-width: 1200px) {
  .classes-page .class-cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* كشف الطلاب */
.roster-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
}

.roster-search {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.roster-search .searchbar__input {
  min-height: 44px;
}

.roster-search .iconbtn {
  width: 44px;
  height: 44px;
  flex: none;
}

.roster-summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--sp-2);
  white-space: nowrap;
}

.roster-list {
  gap: 0;
  overflow: hidden;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.roster-row {
  min-height: 64px;
  padding-block: 8px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.roster-row + .roster-row {
  border-top: 1px solid var(--border);
}

.roster-row .rollno {
  width: 32px;
  height: 32px;
  color: var(--brand-text);
  background: var(--brand-soft);
  border: 1px solid var(--brand-border);
}

.roster-row .row__main {
  padding-block: 4px;
}

.former-students-section {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}

/* ملف الطالب */
.student-profile-header {
  padding: var(--sp-3) var(--sp-4);
  border-color: var(--brand-border);
  border-inline-start: 4px solid var(--brand);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}

.student-profile-header__name {
  font-size: 19px;
}

.student-profile-header__roll {
  min-height: 26px;
  padding: 3px 8px;
  color: var(--brand-text);
  background: var(--brand-soft);
  border: 1px solid var(--brand-border);
  border-radius: var(--r-full);
}

.student-profile-summary {
  margin-bottom: var(--sp-4);
}

.student-profile-section {
  scroll-margin-top: var(--sp-4);
}

.student-profile-section > .card,
.student-profile-section > .stack > .card {
  overflow: hidden;
  border-radius: var(--r-lg);
  box-shadow: none;
}

.student-profile-current-grades > .card {
  border-inline-start: 3px solid var(--brand);
}

.student-profile-disclosure {
  overflow: hidden;
  margin-block: var(--sp-3) 0;
  padding: 0;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.student-profile-disclosure__summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 54px;
  padding: var(--sp-3) calc(var(--sp-4) + 18px) var(--sp-3) var(--sp-4);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.student-profile-disclosure__summary::-webkit-details-marker {
  display: none;
}

.student-profile-disclosure__summary::before {
  content: '';
  position: absolute;
  inset-inline-start: var(--sp-4);
  width: 8px;
  height: 8px;
  border-inline-end: 2px solid var(--text-3);
  border-block-end: 2px solid var(--text-3);
  transform: rotate(45deg);
  transition: transform .16s var(--ease);
}

.student-profile-disclosure[open] > .student-profile-disclosure__summary::before {
  transform: rotate(225deg);
}

.student-profile-disclosure__summary:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: -3px;
  border-radius: var(--r-lg);
}

.student-profile-disclosure__meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  min-height: 28px;
  padding-inline: 9px;
  color: var(--text-3);
  background: var(--bg-sunk);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 700;
}

.student-profile-disclosure__body {
  padding: 0 var(--sp-4) var(--sp-4);
  border-top: 1px solid var(--border);
}

.student-profile-disclosure__body > .card:first-child,
.student-profile-disclosure__body > .grid:first-child,
.student-profile-disclosure__body > .stack:first-child {
  margin-top: var(--sp-3);
}

.student-profile-disclosure__actions {
  display: flex;
  justify-content: flex-end;
  padding-block: var(--sp-3);
}

.student-previous-history .student-profile-disclosure__body > .stack > .card {
  background: color-mix(in srgb, var(--bg-elev) 72%, var(--bg-sunk));
  border-style: dashed;
}

.student-previous-history > .student-profile-disclosure__summary {
  background: color-mix(in srgb, var(--bg-sunk) 72%, var(--bg-elev));
}

.student-profile-enrollment {
  color: var(--text-2);
}

.student-history-row {
  min-height: 54px;
}

.student-profile-page > .section:not(.student-previous-history) {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}

.student-profile-page > .student-profile-disclosure {
  padding-top: 0;
}

.student-profile-actions__row .btn {
  min-height: 44px;
}

/* التقويم */
.calendar-management-page {
  max-width: 1200px;
  margin-inline: auto;
}

.calendar-management-page .cal-hero-strip {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  box-shadow: none;
}

.calendar-management-page .cal-hero-strip__title {
  margin-block: 5px 2px;
  font-size: clamp(19px, 2.2vw, 25px);
  line-height: 1.35;
}

.calendar-management-page .cal-hero-strip__actions .btn {
  width: auto;
  min-width: 210px;
}

.calendar-management-page .cal-radar-grid {
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.calendar-management-page .cal-card {
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  box-shadow: none;
}

.calendar-management-page .cal-card--pulse {
  border-color: var(--brand-border);
  border-inline-start: 4px solid var(--brand);
}

.calendar-management-page .cal-card__title {
  margin-block: var(--sp-2) var(--sp-3);
  font-size: clamp(18px, 2vw, 23px);
}

.calendar-management-page .cal-progress-box {
  padding: var(--sp-3);
}

.calendar-management-page .cal-metrics-row {
  gap: 0;
  overflow: hidden;
  padding: 0;
  background: var(--bg-sunk);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.calendar-management-page .cal-metric {
  min-width: 0;
  padding: var(--sp-2);
  background: transparent;
  border: 0;
  border-radius: 0;
  text-align: center;
}

.calendar-management-page .cal-metric + .cal-metric {
  border-inline-start: 1px solid var(--border);
}

.calendar-management-page .cal-term-card {
  padding: var(--sp-3);
  border-radius: var(--r-lg);
  box-shadow: none;
}

.calendar-management-page .cal-filters-row {
  min-height: 48px;
  margin-bottom: var(--sp-3);
  padding: 3px;
  background: var(--bg-sunk);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.calendar-management-page .cal-filter-btn {
  min-height: 40px;
  border-radius: var(--r-md);
}

.calendar-management-page .cal-timeline-list {
  gap: 0;
  overflow: hidden;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.calendar-management-page .cal-period-row {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.calendar-management-page .cal-period-row + .cal-period-row {
  border-top: 1px solid var(--border);
}

.calendar-management-page .cal-period-row--active {
  border-inline-start: 4px solid var(--brand);
}

.calendar-management-page .cal-accreditation-card {
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-sunk);
  border-radius: var(--r-lg);
  box-shadow: none;
}

/* ملفات التوقيت */
.timing-profiles-page {
  max-width: 1200px;
  margin-inline: auto;
}

.timing-profiles-page .seasonal-activation-bar {
  padding: var(--sp-3) var(--sp-4);
  background: color-mix(in srgb, var(--brand-soft) 28%, var(--bg-elev));
  border-color: var(--brand-border);
  border-radius: var(--r-lg);
  box-shadow: none;
}

.timing-profiles-page .timing-profiles-grid {
  gap: var(--sp-3);
}

.timing-profiles-page .timing-profile-card {
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-radius: var(--r-lg);
  box-shadow: none;
}

.timing-profiles-page .timing-profile-card.is-effective-profile {
  border: 2px solid var(--brand);
  box-shadow: var(--shadow-1);
}

.timing-profiles-page .timing-profile-card.is-base-profile:not(.is-effective-profile) {
  border-inline-start: 4px solid var(--info);
}

.timing-profiles-page .timing-profile-card__sub-status {
  line-height: 1.4;
}

.timing-profiles-page .timing-profile-card.is-effective-profile .timing-profile-card__sub-status {
  color: var(--brand-text);
  font-weight: 750;
}

.timing-profiles-page .timing-profile-card__range {
  min-height: 36px;
  padding-block: var(--sp-1);
}

.timing-profiles-page .timing-profile-card__specs {
  padding: var(--sp-2);
  border: 1px solid var(--border);
}

.timing-profiles-page .timing-profile-card__actions {
  gap: var(--sp-2);
  padding-top: var(--sp-2);
}

.timing-profiles-page .timing-profile-card__set-base {
  width: 100%;
  min-width: 0;
  white-space: normal;
}

@media (min-width: 1200px) {
  .timing-profiles-page .timing-profiles-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* الإعدادات */
.settings-page {
  max-width: 1120px;
  margin-inline: auto;
}

.settings-section {
  min-width: 0;
}

.settings-section > .card {
  border-radius: var(--r-lg);
  box-shadow: none;
}

.settings-preference-surface {
  overflow: hidden;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.settings-preference-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(270px, .9fr);
  align-items: center;
  gap: var(--sp-4);
  min-height: 72px;
  padding: var(--sp-3) var(--sp-4);
}

.settings-preference-row + .settings-preference-row {
  border-top: 1px solid var(--border);
}

.settings-preference-row__copy {
  min-width: 0;
}

.settings-preference-row__control {
  width: 100%;
  min-width: 0;
}

.settings-destination {
  min-height: 72px;
  border-radius: var(--r-lg);
  box-shadow: none;
}

.settings-section--pwa > .card,
.settings-section--about > .card {
  background: color-mix(in srgb, var(--bg-sunk) 35%, var(--bg-elev));
}

@media (min-width: 1000px) {
  .settings-page {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
    align-items: start;
  }

  .settings-page > .settings-section {
    margin: 0;
  }

  .settings-section--identity,
  .settings-section--experience,
  .settings-section--pwa,
  .settings-section--about {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .management-overview > .stat {
    padding: var(--sp-3);
  }

  .class-cards-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .class-card,
  .class-card__main,
  .settings-destination,
  .roster-row {
    min-height: 64px;
  }

  .classes-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .classes-actions .btn {
    width: 100%;
    min-height: 44px;
  }

  .classes-actions .btn,
  .roster-row .iconbtn,
  .student-profile-page .iconbtn,
  .calendar-management-page .cal-filter-btn,
  .calendar-management-page .cal-affected-btn,
  .calendar-management-page .cal-period-actions .btn,
  .calendar-management-page .cal-period-actions .iconbtn,
  .timing-profiles-page .timing-profile-card .btn,
  .timing-profiles-page .timing-profile-card .iconbtn,
  .settings-page .segmented__btn,
  .settings-destination {
    min-height: 44px;
  }

  .roster-row .iconbtn,
  .student-profile-page .iconbtn,
  .calendar-management-page .cal-period-actions .iconbtn,
  .timing-profiles-page .timing-profile-card .iconbtn {
    width: 44px;
    height: 44px;
  }

  .roster-toolbar {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-2);
  }

  .roster-summary {
    justify-content: flex-end;
    min-height: 28px;
    padding-inline: 0;
  }

  .student-profile-header {
    align-items: flex-start;
    padding: var(--sp-3);
  }

  .student-profile-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .student-profile-summary .stat__val {
    font-size: 18px;
  }

  .student-profile-summary .stat__label {
    font-size: 11px;
  }

  .student-profile-disclosure__summary {
    min-height: 52px;
    padding: var(--sp-3) calc(var(--sp-3) + 17px) var(--sp-3) var(--sp-3);
  }

  .student-profile-disclosure__summary::before {
    inset-inline-start: var(--sp-3);
  }

  .student-profile-disclosure__body {
    padding-inline: var(--sp-3);
    padding-bottom: var(--sp-3);
  }

  .student-profile-actions__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-2);
  }

  .student-profile-actions__row .btn {
    width: 100%;
    min-height: 44px;
  }

  .calendar-management-page .cal-hero-strip {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--sp-3);
  }

  .calendar-management-page .cal-hero-strip__actions .btn {
    width: 100%;
    min-width: 0;
  }

  .calendar-management-page .cal-card {
    padding: var(--sp-3);
  }

  .calendar-management-page .cal-progress-bounds {
    font-size: 10.5px;
  }

  .calendar-management-page .cal-metric {
    padding-inline: 4px;
  }

  .calendar-management-page .cal-metric__label {
    font-size: 10.5px;
  }

  .calendar-management-page .cal-metric__val {
    font-size: 13px;
  }

  .calendar-management-page .cal-filter-btn {
    min-width: max-content;
  }

  .calendar-management-page .cal-period-row {
    padding: var(--sp-3);
  }

  .timing-profiles-page .timing-profile-card__actions-row {
    align-items: stretch;
  }

  .settings-preference-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-2);
    padding: var(--sp-3);
  }
}

@media (max-width: 520px) {
  .settings-section--pwa .segmented {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 390px) {
  .classes-overview__metric {
    gap: 6px;
    min-height: 52px;
    padding-inline: var(--sp-2);
  }

  .classes-overview__label {
    font-size: 12px;
  }

  .classes-overview__value {
    font-size: 17px;
  }

  .student-profile-summary .stat {
    padding-inline: 5px;
  }

  .student-profile-header .student-avatar--lg {
    width: 48px;
    height: 48px;
    min-width: 48px;
  }

  .student-profile-header__name {
    font-size: 17px;
  }

  .calendar-management-page .cal-progress-box {
    padding-inline: var(--sp-2);
  }

  .timing-profiles-page .timing-profile-card__head,
  .timing-profiles-page .timing-profile-card__actions-row {
    flex-wrap: wrap;
  }

  .timing-profiles-page .timing-profile-card__actions-row .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .class-card,
  .roster-row,
  .cal-period-row,
  .cal-progress-fill,
  .cal-progress-pin,
  .timing-profile-card,
  .settings-destination {
    animation: none !important;
    transition: none !important;
  }
}

@media print {
  .student-profile-disclosure > .student-profile-disclosure__summary {
    display: none;
  }

  .student-profile-disclosure > .student-profile-disclosure__body {
    display: block !important;
    padding: 0;
    border: 0;
  }
}

/* ---------- Visual System Batch C2A: reports, print, and schedule export ---------- */
.reports-index-page {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, .85fr);
  gap: var(--sp-4);
  max-width: 1200px;
  margin-inline: auto;
  align-items: start;
}

.report-hub {
  overflow: hidden;
}

.report-hub__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-block-end: 1px solid var(--border);
}

.report-hub__title,
.report-workspace__head h2,
.report-metrics__head h3 {
  margin: 0;
  color: var(--text-1);
  font-size: var(--fs-section);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.report-hub__desc,
.report-workspace__head p {
  margin: 4px 0 0;
  color: var(--text-3);
  font-size: var(--fs-sm);
}

.report-grade-groups {
  display: grid;
}

.report-grade-group + .report-grade-group {
  border-block-start: 1px solid var(--border);
}

.report-grade-group__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: var(--sp-2);
  min-height: 50px;
  padding: 9px var(--sp-4);
  color: var(--text-1);
  cursor: pointer;
  list-style: none;
  transition: background var(--motion-fast) var(--ease);
}

.report-grade-group__summary::-webkit-details-marker {
  display: none;
}

.report-grade-group__summary:hover {
  background: color-mix(in srgb, var(--bg-sunk) 68%, transparent);
}

.report-grade-group__summary:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: -3px;
}

.report-grade-group__title {
  min-width: 0;
  font-weight: var(--fw-bold);
}

.report-grade-group__count {
  min-width: 62px;
  padding: 3px 8px;
  color: var(--text-2);
  background: var(--bg-sunk);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-align: center;
  white-space: nowrap;
}

.report-grade-group__chev {
  display: grid;
  place-items: center;
  color: var(--text-3);
  transition: transform var(--motion-fast) var(--ease);
}

.report-grade-group__chev svg {
  width: 16px;
  height: 16px;
}

.report-grade-group[open] > .report-grade-group__summary {
  background: color-mix(in srgb, var(--brand-soft) 36%, transparent);
}

.report-grade-group[open] > .report-grade-group__summary .report-grade-group__chev {
  transform: rotate(90deg);
}

.report-grade-group .report-hub__list {
  border-block-start: 1px solid var(--border);
}

.report-class-row,
.report-destination {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 64px;
  padding: var(--sp-3) var(--sp-4);
  color: inherit;
  text-decoration: none;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}

.report-class-row + .report-class-row,
.report-destination {
  border-block-start: 1px solid var(--border);
}

.report-class-row:hover,
.report-destination:hover {
  background: color-mix(in srgb, var(--bg-sunk) 68%, transparent);
}

.report-class-row:focus-visible,
.report-destination:focus-visible,
.schedule-export-preview__tablewrap:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: -3px;
}

.report-class-row__icon,
.report-destination__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  color: var(--info);
  background: var(--info-soft);
  border-radius: var(--r-md);
}

.report-class-row__icon svg,
.report-destination__icon svg {
  width: 18px;
  height: 18px;
}

.report-destination {
  min-height: 82px;
}

.report-destination .row__sub {
  max-width: 48ch;
  white-space: normal;
}

.report-workspace,
.execution-report-page {
  width: 100%;
  min-width: 0;
  max-width: 1200px;
  margin-inline: auto;
}

.report-workspace__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 0 0 var(--sp-4);
  margin-bottom: var(--sp-3);
  border-block-end: 1px solid var(--border);
}

.report-workspace__eyebrow {
  display: block;
  margin-bottom: 3px;
  color: var(--brand-text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.report-tabs {
  margin-bottom: var(--sp-3);
}

.report-toolbar {
  align-items: end;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  padding: var(--sp-3);
  box-shadow: none;
}

.report-toolbar__field {
  flex: 1 1 260px;
  min-width: 190px;
  margin: 0;
}

.report-toolbar__mode,
.report-preview-toggle {
  flex: none;
  align-self: end;
}

.report-document > .tablewrap,
.report-results > .tablewrap {
  max-width: 100%;
  overflow-x: auto;
  border-color: var(--border-strong);
}

.report-actions {
  justify-content: flex-start;
  padding-top: var(--sp-4);
  border-block-start: 1px solid var(--border);
}

.report-filters {
  margin-bottom: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
}

.report-filters .field {
  margin-bottom: 0;
}

.report-filter-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(150px, .7fr) minmax(150px, .7fr);
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

.report-metrics {
  margin-bottom: var(--sp-4);
  overflow: hidden;
}

.report-metrics__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-block-end: 1px solid var(--border);
}

.report-metrics__head h3 {
  font-size: 15px;
}

.report-metrics__head span {
  color: var(--text-3);
  font-size: var(--fs-xs);
}

.report-metrics__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.report-metrics .stat {
  min-width: 0;
  padding: var(--sp-3);
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: center;
}

.report-metrics .stat + .stat {
  border-inline-start: 1px solid var(--border);
}

.report-metrics .stat__val {
  font-size: 21px;
}

.report-results {
  margin-top: var(--sp-4);
}

.attendance-date-range {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  max-width: 620px;
  margin: 0 0 var(--sp-3);
}

.attendance-date-range__field {
  min-width: 0;
  margin: 0;
}

.attendance-date-range__field .field__label {
  min-height: 20px;
  margin-bottom: 5px;
  font-size: var(--fs-xs);
}

.attendance-date-range__field .date-field {
  width: 100%;
  min-width: 0;
  min-height: 44px;
}

.print-report__footer {
  display: none;
}

.printhead {
  position: relative;
  padding: 0 88px 12px;
  border-block-end: 1px solid #a9c9be;
  color: #183239;
  text-align: center;
}

.printhead__brand {
  position: absolute;
  inset-block-start: 1px;
  inset-inline-end: 0;
  display: grid;
  gap: 1px;
  color: #0f7655;
  text-align: start;
  letter-spacing: 0;
}

.printhead__brand strong,
.printhead__brand span {
  display: block;
}

.printhead__brand span {
  color: #607378;
  font-size: 9px;
  font-weight: 500;
}

.printhead__title {
  margin: 0 0 9px;
  color: #183239;
  font-size: 20px;
  line-height: 1.35;
}

.printhead__details {
  display: grid;
  gap: 1px;
}

.printhead__meta {
  display: flex;
  justify-content: center;
  gap: 3px 16px;
  margin: 3px 0 0;
  color: #52666b;
  font-size: 11px;
}

.printhead__meta div {
  display: flex;
  gap: 4px;
}

.printhead__meta dt {
  color: #718287;
}

.printhead__meta dd {
  margin: 0;
  color: #263f45;
  font-weight: 650;
}

.printhead__meta--context {
  margin-block-start: 5px;
}

.printhead__date {
  margin-top: 6px;
  color: #66797d;
  font-size: 10px;
}

.printhead__date strong {
  color: #344e54;
  font-weight: 650;
}

.a4-sheet .printhead + .tablewrap,
.a4-sheet .printhead + .list,
.a4-sheet .printhead + .empty {
  margin-block-start: 14px;
}

.a4-sheet--landscape {
  max-width: 297mm;
  min-height: 210mm;
}

.a4-sheet .print-report__footer {
  display: flex;
}

.a4-sheet .support-report-screen {
  display: none !important;
}

.a4-sheet .support-report-print {
  display: block !important;
  overflow: visible;
  border: 0;
}

.schedule-export-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  margin-bottom: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.schedule-export-option {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  min-height: 58px;
  padding: 10px var(--sp-3);
  cursor: pointer;
}

.schedule-export-option + .schedule-export-option {
  border-inline-start: 1px solid var(--border);
}

.schedule-export-option:has(input:focus-visible) {
  outline: 3px solid var(--brand);
  outline-offset: -3px;
}

.schedule-export-option input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--brand);
}

.schedule-export-option span,
.schedule-export-option strong,
.schedule-export-option small {
  display: block;
  min-width: 0;
}

.schedule-export-option strong {
  font-size: 13px;
}

.schedule-export-option small {
  overflow: hidden;
  margin-top: 1px;
  color: var(--text-3);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sheet:has(#schedule-export-form) {
  max-width: 920px;
}

.schedule-export-preview {
  overflow: hidden;
  color: #18333a;
  background: #fff;
  border: 1px solid #cbd8da;
  border-radius: var(--r-md);
}

.schedule-export-preview__head {
  padding: var(--sp-3) var(--sp-4);
  border-block-end: 1px solid #cbd8da;
}

.schedule-export-preview__brand {
  color: #0f7655;
  font-size: 11px;
  font-weight: 750;
}

.schedule-export-preview__head h3 {
  margin: 1px 0 2px;
  font-size: 17px;
}

.schedule-export-preview__head p {
  margin: 0;
  color: #52696f;
  font-size: 11px;
}

.schedule-export-preview__tablewrap {
  max-width: 100%;
  overflow-x: auto;
}

.schedule-export-preview__table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 11px;
}

.schedule-export-preview__table th,
.schedule-export-preview__table td {
  height: 48px;
  padding: 5px;
  border-inline-start: 1px solid #d9e2e4;
  border-block-start: 1px solid #d9e2e4;
  text-align: center;
  vertical-align: middle;
}

.schedule-export-preview__table thead th,
.schedule-export-preview__table tbody th {
  background: #eff5f4;
  font-weight: 750;
}

.schedule-export-preview__table thead th:first-child,
.schedule-export-preview__table tbody th {
  width: 90px;
}

.schedule-export-preview__table td strong,
.schedule-export-preview__table td span {
  display: block;
}

.schedule-export-preview__table td span {
  color: #5f7479;
  font-size: 9px;
}

.schedule-export-preview__table bdi {
  white-space: nowrap;
}

.schedule-export-preview__table td.is-empty {
  background: #fbfcfc;
}

.schedule-export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

@media (max-width: 860px) {
  .reports-index-page {
    grid-template-columns: minmax(0, 1fr);
  }

  .report-metrics__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .report-metrics .stat:nth-child(4) {
    border-inline-start: 0;
    border-block-start: 1px solid var(--border);
  }

  .report-metrics .stat:nth-child(n + 4) {
    border-block-start: 1px solid var(--border);
  }
}

@media (max-width: 620px) {
  .report-hub__head,
  .report-grade-group__summary,
  .report-class-row,
  .report-destination {
    padding-inline: var(--sp-3);
  }

  .report-class-row__icon {
    display: none;
  }

  .report-class-row .badge--danger {
    max-width: 108px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .report-workspace__head {
    gap: var(--sp-2);
  }

  .report-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report-tabs .segmented__btn {
    min-width: 0;
    padding-inline: var(--sp-2);
    white-space: normal;
  }

  .report-toolbar {
    align-items: stretch;
  }

  .report-toolbar__field,
  .report-toolbar__mode,
  .report-preview-toggle {
    width: 100%;
    flex-basis: 100%;
  }

  .report-toolbar__mode {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report-filter-grid .field:first-child {
    grid-column: 1 / -1;
  }

  .report-actions .btn,
  .schedule-export-actions .btn {
    flex: 1 1 140px;
  }

  .schedule-export-options {
    grid-template-columns: minmax(0, 1fr);
  }

  .schedule-export-option + .schedule-export-option {
    border-inline-start: 0;
    border-block-start: 1px solid var(--border);
  }
}

@media (max-width: 390px) {
  .report-class-row .badge--danger {
    display: none;
  }

  .report-metrics .stat {
    padding-inline: 5px;
  }

  .report-metrics .stat__val {
    font-size: 18px;
  }

  .report-metrics .stat__label {
    font-size: 11px;
  }
}

@media (max-width: 360px) {
  .attendance-date-range {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .report-class-row,
  .report-destination,
  .report-grade-group__summary,
  .report-grade-group__chev {
    transition: none !important;
  }
}

/* ---------- Visual System Batch C2B: البيانات والأرشيف ---------- */
.backup-data-page,
.archive-page,
.archive-detail-page {
  display: grid;
  gap: var(--sp-4);
  min-width: 0;
}

.backup-data-page > .btn--quiet,
.archive-page > .btn--quiet,
.archive-detail-page > .btn--quiet {
  width: fit-content;
  margin: 0;
}

.data-safety-intro,
.archive-intro,
.archive-context {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}

.data-safety-intro__icon,
.archive-intro__icon,
.archive-context__icon,
.data-safety-section__icon,
.recovery-path__icon,
.archive-year__mark,
.archive-record-row__icon,
.archive-unresolved__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  color: var(--text-2);
  background: var(--bg-sunk);
  border-radius: var(--r-md);
}

.data-safety-intro__icon,
.archive-intro__icon,
.archive-context__icon {
  color: var(--brand-text);
  background: var(--brand-soft);
}

.data-safety-intro__icon svg,
.archive-intro__icon svg,
.archive-context__icon svg,
.data-safety-section__icon svg,
.recovery-path__icon svg,
.archive-year__mark svg,
.archive-record-row__icon svg,
.archive-unresolved__icon svg { width: 20px; height: 20px; }

.data-safety-intro h2,
.archive-intro h2,
.archive-context h2,
.data-safety-section h2,
.archive-destinations h2,
.archive-unresolved h2 {
  margin: 0;
  color: var(--text-1);
  font-size: var(--fs-section);
  line-height: var(--lh-tight);
}

.data-safety-intro p,
.archive-intro p,
.archive-context p,
.data-safety-section p,
.archive-destinations p,
.archive-unresolved p,
.data-danger-zone p {
  margin: 4px 0 0;
  color: var(--text-3);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.data-safety-surface { overflow: hidden; }
.data-safety-section { min-width: 0; }
.data-safety-section__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
}
.data-safety-section__heading { margin-bottom: var(--sp-3); }
.data-safety-section__copy { min-width: 0; }
.data-safety-section__icon.is-brand { color: var(--brand-text); background: var(--brand-soft); }

.backup-action-status,
.recovery-review-note {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  color: var(--text-2);
  background: color-mix(in srgb, var(--bg-sunk) 72%, transparent);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
}
.backup-action-status > span:last-child,
.recovery-review-note > span { display: grid; gap: 1px; min-width: 0; }
.backup-action-status small,
.recovery-review-note small { color: var(--text-3); }
.backup-action-status__mark { display: grid; place-items: center; width: 30px; height: 30px; color: var(--text-3); }
.backup-action-status__mark svg { width: 17px; height: 17px; }
.backup-action-status__mark.is-complete { color: var(--ok); background: var(--ok-soft); border-radius: var(--r-full); }

.recovery-paths {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.recovery-path {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  padding: var(--sp-3);
  background: var(--bg-elev);
}
.recovery-path + .recovery-path { border-block-start: 1px solid var(--border); }
.recovery-path__copy { min-width: 0; }
.recovery-path h3 { margin: 0; font-size: 15px; }
.recovery-path p { margin: 3px 0 0; color: var(--text-3); font-size: var(--fs-sm); line-height: 1.5; }
.recovery-path__icon.is-info,
.archive-record-row__icon.is-info { color: var(--info); background: var(--info-soft); }
.recovery-path--future { background: color-mix(in srgb, var(--info-soft) 22%, var(--bg-elev)); }

.data-inventory { padding: 0; }
.data-inventory > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 62px;
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  list-style: none;
}
.data-inventory > summary::-webkit-details-marker,
.archive-year__summary::-webkit-details-marker { display: none; }
.data-inventory > summary:hover,
.archive-year__summary:hover { background: color-mix(in srgb, var(--bg-sunk) 68%, transparent); }
.data-inventory > summary:focus-visible,
.archive-year__summary:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }
.data-inventory__summary { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.data-inventory__summary > span:last-child { display: grid; gap: 2px; }
.data-inventory__summary small { color: var(--text-3); font-size: var(--fs-xs); }
.data-inventory__meta { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-3); font-size: var(--fs-sm); white-space: nowrap; }
.data-inventory__meta svg { width: 16px; height: 16px; transition: transform var(--motion-fast) var(--ease); }
.data-inventory[open] .data-inventory__meta svg { transform: rotate(90deg); }
.data-inventory__body { padding: 0 var(--sp-4) var(--sp-4); border-block-start: 1px solid var(--border); }
.data-inventory__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; overflow: hidden; margin: var(--sp-3) 0 0; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-md); }
.data-inventory__grid > div { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-width: 0; padding: var(--sp-2); background: var(--bg-elev); }
.data-inventory__grid dt { overflow: hidden; color: var(--text-3); font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }
.data-inventory__grid dd { margin: 0; color: var(--text-1); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.data-inventory__storage { display: flex; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-3); color: var(--text-3); font-size: var(--fs-sm); }

.data-danger-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: color-mix(in srgb, var(--danger-soft) 36%, var(--bg-elev));
  border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--border));
  border-radius: var(--r-lg);
}
.data-danger-zone h2 { margin: 0; color: var(--danger); font-size: 15px; }
.recovery-review-note { margin-top: 0; color: var(--info); background: var(--info-soft); }
.recovery-review-note > svg { width: 20px; height: 20px; flex: none; }
.recovery-replace-option { border-color: color-mix(in srgb, var(--danger) 28%, var(--border-strong)); }

.archive-summary {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 46px;
  padding: var(--sp-2) var(--sp-4);
  color: var(--text-2);
  background: var(--bg-sunk);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}
.archive-summary > i { width: 1px; height: 18px; background: var(--border-strong); }
.archive-summary .badge { margin-inline-start: auto; }
.archive-years { display: grid; gap: var(--sp-3); }
.archive-year { overflow: hidden; }
.archive-year__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 68px;
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  list-style: none;
}
.archive-year__identity,
.archive-year__status { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.archive-year__identity > span:last-child { display: grid; gap: 2px; min-width: 0; }
.archive-year__identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.archive-year__identity small { color: var(--text-3); font-size: var(--fs-xs); }
.archive-year__chev { display: grid; place-items: center; color: var(--text-3); transition: transform var(--motion-fast) var(--ease); }
.archive-year__chev svg { width: 17px; height: 17px; }
.archive-year[open] .archive-year__chev { transform: rotate(90deg); }
.archive-year[open] > .archive-year__summary { background: color-mix(in srgb, var(--brand-soft) 30%, transparent); }
.archive-term-list { border-block-start: 1px solid var(--border); }
.archive-term-row,
.archive-record-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  min-height: 64px;
  padding: var(--sp-3) var(--sp-4);
  color: inherit;
  text-decoration: none;
}
.archive-term-row + .archive-term-row,
.archive-record-row + .archive-record-row { border-block-start: 1px solid var(--border); }
.archive-term-row:hover,
.archive-record-row:not(.is-disabled):hover { background: var(--bg-sunk); }
.archive-term-row__main,
.archive-record-row__main { display: grid; flex: 1; gap: 2px; min-width: 0; }
.archive-term-row__title,
.archive-record-row__main strong { overflow: hidden; font-weight: var(--fw-bold); text-overflow: ellipsis; white-space: nowrap; }
.archive-term-row__sub,
.archive-record-row__main small { overflow: hidden; color: var(--text-3); font-size: var(--fs-sm); text-overflow: ellipsis; white-space: nowrap; }
.archive-term-row__end,
.archive-record-row__end { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.archive-term-row__end > svg,
.archive-record-row__end > svg { width: 17px; height: 17px; color: var(--text-3); }

.archive-readonly-seal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding-inline: var(--sp-3);
  color: var(--info);
  background: var(--info-soft);
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}
.archive-readonly-seal svg { width: 16px; height: 16px; }
.archive-unresolved {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: color-mix(in srgb, var(--warn-soft) 42%, var(--bg-elev));
  border-color: color-mix(in srgb, var(--warn) 30%, var(--border));
}
.archive-unresolved__icon { color: var(--warn); background: var(--warn-soft); }
.archive-destinations { overflow: hidden; }
.archive-destinations__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4);
}
.archive-record-list { border-block-start: 1px solid var(--border); }
.archive-record-row.is-disabled { color: var(--text-2); background: color-mix(in srgb, var(--bg-sunk) 54%, transparent); }
.archive-record-empty { padding: var(--sp-5) var(--sp-4); color: var(--text-3); border-block-start: 1px solid var(--border); text-align: center; }
.archive-empty__actions { justify-content: center; margin-top: var(--sp-4); }

@media (max-width: 700px) {
  .data-safety-intro,
  .archive-intro,
  .archive-context { grid-template-columns: auto minmax(0, 1fr); }
  .data-safety-intro > .btn,
  .archive-intro > .btn,
  .archive-readonly-seal { grid-column: 1 / -1; width: 100%; justify-content: center; }
  .data-safety-section__head,
  .recovery-path { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .data-safety-section__action,
  .recovery-path__action { grid-column: 1 / -1; width: 100%; }
  .data-inventory__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .data-danger-zone { align-items: stretch; flex-direction: column; }
  .data-danger-zone .btn { width: 100%; white-space: normal; }
}

@media (max-width: 420px) {
  .backup-data-page,
  .archive-page,
  .archive-detail-page { gap: var(--sp-3); }
  .data-safety-intro,
  .archive-intro,
  .archive-context,
  .surface__section,
  .data-danger-zone,
  .archive-destinations__head,
  .archive-term-row,
  .archive-record-row { padding: var(--sp-3); }
  .archive-summary { flex-wrap: wrap; padding-inline: var(--sp-3); }
  .archive-summary .badge { margin-inline-start: 0; }
  .archive-year__summary { padding-inline: var(--sp-3); }
  .archive-year__status .badge { display: none; }
  .archive-term-row__end .badge { max-width: 102px; overflow: hidden; text-overflow: ellipsis; }
  .archive-record-row__end .badge { display: none; }
  .archive-term-row__sub,
  .archive-record-row__main small { white-space: normal; }
  .data-inventory > summary { padding-inline: var(--sp-3); }
  .data-inventory__summary .data-safety-section__icon { display: none; }
  .data-inventory__meta { font-size: var(--fs-xs); }
}

@media (prefers-reduced-motion: reduce) {
  .data-inventory__meta svg,
  .archive-year__chev { transition: none !important; }
}

@media print {
  .printhead {
    display: block;
    margin: 0 0 7mm;
    padding: 0 25mm 3.5mm;
    border-bottom: .65pt solid #8eafa4;
    color: #172f35;
    break-inside: avoid;
  }

  .printhead__brand {
    display: grid;
    gap: 0;
  }

  .printhead__brand strong {
    color: #0f7655;
    font-size: 11pt;
  }

  .printhead__brand span {
    color: #5d6f73;
    font-size: 7.5pt;
  }

  .printhead__title {
    margin: 0 0 2mm;
    color: #172f35;
    font-size: 16pt;
  }

  .printhead__meta {
    justify-content: center;
    gap: 1mm 5mm;
    margin: .8mm 0 0;
    color: #43595e;
    font-size: 8pt;
  }

  .printhead__meta dt {
    color: #63777b;
  }

  .printhead__meta dd {
    color: #233a40;
  }

  .printhead__date {
    margin-top: 1.5mm;
    color: #5d7074;
    font-size: 7.5pt;
  }

  .printhead__date strong {
    color: #2c444a;
  }

  .printhead + .tablewrap,
  .printhead + .list,
  .printhead + .empty {
    margin-block-start: 5mm;
  }

  .print-report .gtable th,
  .print-report .gtable td {
    border-color: #a9b8b4 !important;
    color: #172f35 !important;
    background: #fff !important;
  }

  .print-report .gtable thead th {
    background: #eaf4f0 !important;
  }

  .print-report .gtable tbody tr:nth-child(even) td,
  .print-report .gtable tbody tr:nth-child(even) th {
    background: #f8faf9 !important;
  }

  .print-report__footer {
    display: flex;
    justify-content: space-between;
    gap: 10mm;
    margin-top: 9mm;
    padding-top: 3mm;
    border-top: .5pt solid #a9b8b4;
    color: #52666b;
    font-size: 7.5pt;
    break-inside: avoid;
  }

  .print-report--wide .gtable {
    font-size: 7pt;
  }

  .print-report--wide .gtable th,
  .print-report--wide .gtable td {
    padding: 3px !important;
  }
}

/* BRAND-MOBILE-UX-REFINEMENT-01: presentation only, scoped to daily mobile surfaces. */
@media screen {
  .calendar-management-page .cal-progress-bounds { color: var(--text-2); }
  .calendar-management-page .cal-progress-bounds .cal-progress-now { color: var(--brand-text); }
  .timing-mobile-actions { display: none; }
}
@media screen and (max-width: 899px) {
  .topbar--home { padding-block: 8px; padding-block-start: calc(8px + env(safe-area-inset-top)); }
  .topbar--home .brand-lockup__icon--app { inline-size: 48px; block-size: 48px; }
  .topbar--home .brand-lockup { gap: 7px; }
  .topbar--home .brand-lockup__name strong { font-size: 19px; }
  .topbar--home .brand-lockup__name > span { font-size: 17px; }
  .topbar--home .brand-lockup__signature { font-size: 7px; letter-spacing: 1px; }
  .topbar--home .topbar__sub { font-size: 10.5px; margin-top: 2px; }
  .topbar--home .topbar__teacher-btn { position: relative; gap: 5px; padding: 6px 8px; background: var(--brand-soft); border-color: var(--brand-border); color: var(--brand-text); }
  .topbar__teacher-label { max-inline-size: 36px; font-size: 11px; line-height: 1.3; text-align: start; }
  .topbar--home .topbar__teacher-sync { position: absolute; inset-block-start: 4px; inset-inline-end: 4px; }
}
@media screen and (max-width: 768px) {
  .page--home, .page--schedule { padding-block-start: 12px; }
  .page--home .hero { margin-bottom: 12px; }
  .page--home .hero__hello { font-size: 22px; }
  .page--home .hero__date { font-size: 12px; margin-top: 2px; }
  .page--home .compact-timing-pill { min-height: 32px; gap: 4px; padding: 2px 7px; font-size: 11.5px; font-weight: 650; }
  .page--home .compact-timing-pill__icon svg { inline-size: 12px; block-size: 12px; }
  .page--home .home-shortcuts { margin-block: 16px; }
  .page--home .home-shortcuts .tile { min-height: 88px; gap: 4px; padding: 8px; }
  .page--home .home-shortcuts .tile__sub { font-size: 12px; line-height: 1.45; }
  .page--home .home-pwa-prompt { padding: 10px 12px; box-shadow: none; gap: 6px; }
  .page--home .home-pwa-prompt__main { align-items: center; padding-inline-end: 34px; gap: 8px; }
  .page--home .home-pwa-prompt__title { font-size: 12.5px; }
  .page--home .home-pwa-prompt__desc { font-size: 12px; line-height: 1.5; }
  .page--home .home-pwa-prompt__install { background: var(--brand-soft); border-color: var(--brand-border); color: var(--brand-text); box-shadow: none; }
  .page--home .home-pwa-prompt__install:hover { background: color-mix(in srgb, var(--brand) 16%, var(--bg-elev)); }

  .page--schedule .schedule-head { gap: 8px; }
  .page--schedule .schedule-head__title-group { width: 100%; flex-wrap: wrap; }
  .page--schedule .schedule-head__actions { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px; width: 100%; }
  .page--schedule .schedule-head__actions .btn { min-width: 0; min-height: 44px; padding: 6px 8px; font-size: 12px; justify-content: center; }
  .page--schedule .schedule-summary-bar { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px; padding: 8px 10px; box-shadow: none; flex-wrap: nowrap; }
  .page--schedule .schedule-summary-bar__stats { display: block; width: auto; min-width: 0; }
  .page--schedule .schedule-summary-bar__item { gap: 5px; align-items: center; white-space: nowrap; font-size: clamp(10.5px,3vw,12px); line-height: 1.4; }
  .page--schedule .schedule-summary-bar__item svg { inline-size: 15px; block-size: 15px; flex: none; margin-top: 0; }
  .page--schedule .schedule-summary-bar__classes { display: none; }
  .page--schedule .schedule-summary-bar__sep { display: none; }
  .page--schedule .schedule-summary-bar .compact-timing-pill { min-height: 32px; gap: 4px; border-color: transparent; background: transparent; padding: 2px 0; font-size: clamp(10.5px,2.9vw,12px); font-weight: 650; }
  .page--schedule .schedule-summary-bar .compact-timing-pill__icon svg { inline-size: 12px; block-size: 12px; }
  .page--schedule .schedule-day-tabs { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 3px; padding: 4px 0 8px; overflow: visible; box-shadow: none; }
  .page--schedule .schedule-day-tab { min-width: 0; min-height: 44px; padding: 4px 0; gap: 0; font-size: clamp(10.5px,2.9vw,12px); border-radius: var(--r-md); }
  .page--schedule .schedule-day-tab .tabular, .page--schedule .schedule-day-tab .tab-dot { display: none; }
  .page--schedule .schedule-day-tab.is-active { box-shadow: none; }
  .page--schedule .slot { padding: 9px; gap: 8px; box-shadow: none; }
  .page--schedule .week.has-day-filter .week__day { padding: 10px; }

  .calendar-management-page .cal-hero-strip { gap: 10px; padding: 12px; }
  .calendar-management-page .cal-hero-strip__identity { gap: 3px; }
  .calendar-management-page .cal-hero-strip__meta-line { gap: 5px 8px; }
  .calendar-management-page .cal-year-label { font-size: 11px; white-space: nowrap; }
  .calendar-management-page .cal-hero-strip__title { font-size: 17px; margin-block: 4px 2px; line-height: 1.45; }
  .calendar-management-page .cal-hero-strip__subtitle { font-size: 12px; }
  .calendar-management-page .cal-hero-strip__actions .btn { min-height: 44px; background: var(--bg-sunk); border-color: var(--border); color: var(--info); font-size: 13px; box-shadow: none; }
  .calendar-management-page .cal-hero-strip__actions .btn:hover { background: var(--info-soft); }
  .calendar-management-page .cal-card__head { gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
  .calendar-management-page .cal-card__title { font-size: 18px; margin-block: 4px 8px; }
  .calendar-management-page .cal-progress-box { padding: 4px 2px; margin-block: 4px 8px; background: transparent; border: 0; }
  .calendar-management-page .cal-progress-track { height: 6px; margin-block: 8px; }
  .calendar-management-page .cal-progress-bounds { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; font-size: 11px; }
  .calendar-management-page .cal-progress-bounds > span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; text-align: center; }
  .calendar-management-page .cal-progress-bounds > span:last-child { text-align: end; }
  .calendar-management-page .cal-metrics-row { grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 2px; }
  .calendar-management-page .cal-metric, .calendar-management-page .cal-metric:last-child { grid-column: auto; padding: 8px 3px; }
  .calendar-management-page .cal-metric__label { font-size: 10.5px; line-height: 1.4; }
  .calendar-management-page .cal-metric__val { font-size: 14px; line-height: 1.5; }
}

@media screen and (max-width: 899px) {
  .timing-new-profile-action--header { display: none; }
  .timing-mobile-actions { display: flex; justify-content: flex-start; margin-block-end: var(--sp-3); }
  .timing-mobile-actions .btn { min-height: 44px; }
}