/* ============================================================
   Page patterns — تركيب الصفحات وما يحيط بها (docs/frontend-ia.md).
   المسؤولية: الشريط الجانبي لسطح المكتب، عمودا صفحة التفاصيل (.split)،
   شريط التصفية الإضافية (.filters)، «إدارة X» (.mgmt) ومنطقة الخطر،
   الإفصاح المطويّ (.disclosure)، شاشات المهام (.task-card)، قرار سير
   العمل (.decision)، الحقائق (.facts).
   لا مكوّنات عامة هنا (تلك في components.css) ولا لغة الواجهة المرجعية
   (تلك في ui.css). قاعدة الوزن: عالٍ = الإجراء الرئيسي والحالة والتنبيه؛
   متوسط = الأقسام والتنقّل المفيد؛ منخفض = الميتاداتا والإعدادات والتاريخ.
   ============================================================ */

/* ==================== App shell: desktop sidebar ==================== */

.sidebar {
  display: none;
}

.more-menu__section + .more-menu__section {
  margin-top: var(--space-5);
}

/* Section label above each group in the More sheet — grouping by space + label, not a longer list. */
.more-menu__label {
  line-height: var(--line-height-tight);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  margin: 0 var(--space-1) var(--space-3);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-dark);
}

/* الورقة تتسع لثلاث مجموعات + الخروج دون تمرير على الهواتف الطويلة. */

.more-menu:focus {
  outline: none;
}

.more-menu__row.is-current {
  color: var(--color-primary-dark);
  font-weight: var(--font-weight-semibold);
  background: var(--color-sage-soft);
}

.more-menu__row.is-current .row-icon {
  background: var(--color-primary);
  color: #fff;
}

@media (min-width: 1024px) {
  .app-shell--sidebar {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    align-items: stretch;
  }

  /* شريط سفلي وورقة "المزيد" لهما بديل ثابت على الشاشات العريضة: الشريط الجانبي. */
  .app-shell--sidebar > .bottom-nav {
    display: none;
  }

  .app-shell--sidebar .app-main {
    padding-bottom: var(--space-9);
  }

  .app-shell--sidebar .sticky-actions {
    bottom: 0;
    margin-inline: 0;
    padding-inline: 0;
  }

  .sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-4) var(--space-4);
    background: var(--color-surface);
    border-inline-end: 1px solid var(--color-hairline);
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .sidebar__brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-2) var(--space-3);
    color: var(--color-primary-deep);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-tight);
  }

  .sidebar__logo {
    width: auto;
    height: 44px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .sidebar__nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }

  .sidebar__group {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .sidebar__label {
    margin: 0 var(--space-3) var(--space-1);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-faint);
    line-height: var(--line-height-tight);
  }

  .sidebar__link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 42px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-control);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: background-color var(--transition-fast), color var(--transition-fast);
  }

  .sidebar__link:hover {
    background: var(--color-fill);
    color: var(--color-text);
  }

  .sidebar__link.is-active {
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    font-weight: var(--font-weight-semibold);
  }

  .sidebar__link:focus-visible,
  .sidebar__logout:focus-visible {
    outline-offset: -2px;
  }

  .sidebar__account {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-2) 0;
    border-top: 1px solid var(--color-divider);
  }

  .sidebar__account-link {
    display: flex;
    flex: 1;
    min-width: 0;
    align-items: center;
    gap: var(--space-3);
    border-radius: var(--radius-control);
  }

  .sidebar__account-link:hover .sidebar__user-name {
    color: var(--color-primary-dark);
  }

  .sidebar__user-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    overflow-wrap: anywhere;
  }

  .sidebar__user-role {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
  }

  .sidebar__account form {
    margin-inline-start: auto;
  }

  .sidebar__logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
  }

  .sidebar__logout:hover {
    background: var(--color-danger-soft);
    color: var(--color-danger-strong);
  }

  /* الشريط العلوي على سطح المكتب: مسار التنقل فقط (الرجوع/العنوان/المزيد لها بدائل). */
  .app-shell--sidebar .topbar {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: var(--space-8);
  }

  .app-shell--sidebar .topbar__side,
  .app-shell--sidebar .topbar__title {
    display: none;
  }

  .app-shell--sidebar .topbar--root {
    display: none;
  }

  .app-shell--sidebar .topbar__crumbs {
    display: block;
    min-width: 0;
  }

  .topbar__crumbs ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
  }

  .topbar__crumbs li + li::before {
    content: '‹';
    margin-inline-end: var(--space-2);
    color: var(--color-text-faint);
  }

  .topbar__crumbs a {
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
  }

  .topbar__crumbs a:hover {
    text-decoration: underline;
  }

  .topbar__crumbs li[aria-current] {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    max-width: 40ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* بلا شريط سفلي (بوابة ولي الأمر) لا يوجد ما يُرفع فوقه. */
.app-shell--no-bottomnav .sticky-actions {
  bottom: 0;
  padding-bottom: max(var(--space-3), var(--safe-bottom));
}

/* ==================== Detail page: main column + side summary ==================== */

.split {
  display: block;
}

/* على الهاتف: الملخص والإجراء ثم المحتوى — مسافة قسم بينهما. */
.split__aside {
  margin-bottom: var(--space-6);
}

.split__aside > :last-child {
  margin-bottom: 0;
}

@media (min-width: 1024px) {
  .split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 0 var(--space-8);
    align-items: start;
  }

  .split__main {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  /* الملخّص والإجراء الأول يسبقان المحتوى على الهاتف، ويصيران عمودًا جانبيًا هنا. */
  .split__aside {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 0;
    position: sticky;
    top: calc(var(--topbar-height) + var(--space-4));
    min-width: 0;
  }
}

/* ==================== List pages: search + filters ==================== */

/* تصفية إضافية: قرص هادئ يفتح نموذجًا — النتائج تبقى في الشاشة الأولى. */
.toolbar-row + .filters,
.chips + .filters {
  margin-top: var(--space-3);
}

.filters {
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 0 var(--space-4);
}

.filters > summary {
  min-height: 48px;
}

.filters[open] > summary {
  border-bottom: 1px solid var(--color-divider);
  margin-bottom: var(--space-4);
}

.filters__body {
  padding-bottom: var(--space-4);
}

.filters__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-inline-start: var(--space-2);
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

/* ==================== Management & danger zone ==================== */

/* «إدارة الطالب/الدورة/الحلقة»: إجراءات إدارية نادرة — مطوية ومنخفضة الوزن، لا تنافس المعلومات اليومية. */
.mgmt {
  margin-top: var(--space-7);
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 0 var(--space-4);
}

.mgmt > summary {
  min-height: 52px;
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
}

.mgmt > summary .mgmt__title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.mgmt[open] > summary {
  border-bottom: 1px solid var(--color-divider);
}

.mgmt__body {
  padding: var(--space-4) 0;
}

.mgmt__body > * + * {
  margin-top: var(--space-5);
}

.mgmt__title-sub {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
}

/* منطقة الخطر: بعيدة بصريًا عن الإجراءات المعتادة (حدّ علوي + تسمية). */
.danger-zone {
  padding-top: var(--space-4);
  border-top: 1px dashed var(--color-danger-line);
}

.danger-zone__title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-danger-strong);
}

.danger-zone .btn {
  width: auto;
}

/* إجراء إداري كصفّ (نقل/إنهاء/ربط) داخل «إدارة X». */
.mgmt-row + .mgmt-row {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
}

.mgmt-row__title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

/* ==================== Disclosure (low-emphasis information) ==================== */

.disclosure {
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 0 var(--space-4);
}

.disclosure + .disclosure {
  margin-top: var(--space-3);
}

.disclosure > summary {
  min-height: 52px;
  color: var(--color-text);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}

.disclosure > summary .meta-text {
  margin-inline-start: auto;
  margin-inline-end: var(--space-2);
}

.disclosure[open] > summary {
  border-bottom: 1px solid var(--color-divider);
}

.disclosure__body {
  padding: var(--space-4) 0;
}

/* «متقدّم» في النماذج: خيارات نادرة لا تُعرض كل مرة. */
.advanced {
  margin-top: var(--space-5);
}

.advanced > summary {
  min-height: var(--touch-target-min);
}

/* ==================== Task screens ==================== */

/* موضوع المهمة (الحلقة · التاريخ): سطر سياق صغير — العنوان في الشريط العلوي لا تحته. */
.task-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.task-context__subject {
  min-width: 0;
}

.task-context__name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  overflow-wrap: break-word;
}

.task-context__meta {
  margin-top: 2px;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.task-context__meta a {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

/* بعد الحفظ: خطوات تالية هادئة. */
.task-next {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ==================== Decision block (registration review) ==================== */

.decision {
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
}

.decision__title {
  margin: 0 0 var(--space-3);
  color: var(--color-primary-dark);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.decision__secondary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.decision__secondary > form {
  flex: 1 1 140px;
}

.decision__secondary .btn {
  width: 100%;
}

.decision__more {
  margin-top: var(--space-2);
}

/* ==================== Key facts (compact, low emphasis) ==================== */

.facts {
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-3) var(--space-4);
}

.facts .detail-list__row:first-child { padding-top: var(--space-1); }
.facts .detail-list__row:last-child { padding-bottom: var(--space-1); }

.facts a {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

/* ==================== Small helpers ==================== */

/* قيمة نصية قصيرة (تاريخ) داخل شبكة المقاييس بحجم أصغر من الأرقام. */

.link-quiet {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
}