/* رِواق v7.2.2 — تحسين واجهة الجوال وتمييز البطاقات */

/* فصل البطاقات المتكررة دون تغيير هوية المنصة */
#coursesPage .student-course-list,
#projectsPage .project-list,
#tasksPage #taskResults > .cards{gap:22px!important}

#coursesPage .student-course-card,
#projectsPage .project-card,
#tasksPage .task-card-v60{
  isolation:isolate;
  border-width:2px!important;
  box-shadow:0 12px 28px color-mix(in srgb,var(--text) 9%,transparent)!important;
}
#coursesPage .student-course-card{margin-bottom:2px}
#projectsPage .project-card{margin-bottom:2px;border-color:color-mix(in srgb,var(--primary) 34%,var(--line))!important}
#projectsPage .project-card + .project-card,
#coursesPage .student-course-card + .student-course-card{margin-top:2px}

/* صفحة المهام: اللون يعبّر عن مصدر المهمة فقط */
#tasksPage .task-card-v60{
  --task-accent:#677582;
  --task-soft:color-mix(in srgb,var(--task-accent) 8%,var(--panel));
  --task-line:color-mix(in srgb,var(--task-accent) 45%,var(--line));
  position:relative;
  overflow:hidden!important;
  border-color:var(--task-line)!important;
  background:linear-gradient(145deg,var(--task-soft),var(--panel) 42%)!important;
  padding-inline-start:20px!important;
}
#tasksPage .task-card-v60::before{
  content:"";position:absolute;inset-block:0;inset-inline-start:0;width:7px;
  background:var(--task-accent);z-index:0
}
#tasksPage .task-card-v60>*{position:relative;z-index:1}
#tasksPage .task-kind-project{--task-accent:#336fe6}
#tasksPage .task-kind-course{--task-accent:#0b8f87}
#tasksPage .task-kind-general{--task-accent:#c77715}
#tasksPage .task-card-top{align-items:flex-start;gap:12px}
#tasksPage .task-card-labels{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
#tasksPage .task-kind-chip{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:var(--task-accent);color:#fff;font-size:calc(.76rem * var(--font-scale));font-weight:900;line-height:1}
#tasksPage .task-dual-date{max-width:48%;text-align:end;line-height:1.55;font-weight:750;color:var(--muted)}

/* تحسين الاستخدام على الجوال مع المحافظة على التصميم الحالي */
@media(max-width:760px){
  .main{padding-inline:10px!important}
  .topbar{padding:10px!important;gap:8px!important}
  .topbar-identity{min-width:0;flex:1}
  .topbar-identity strong{font-size:calc(.9rem * var(--font-scale))!important;white-space:normal!important}
  .topbar-identity small{font-size:calc(.72rem * var(--font-scale))!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .top-actions{gap:6px!important}
  .workspace-search-trigger b,.workspace-search-trigger kbd,.workspace-appearance-trigger b{display:none!important}
  .workspace-search-trigger,.workspace-appearance-trigger,.notification-btn,.menu-btn{width:44px!important;min-width:44px!important;height:44px!important;padding:0!important;justify-content:center}
  .mode-switcher{width:100%;order:3;grid-column:1/-1}
  .page{padding-inline:0!important}
  .page-head{gap:12px!important;margin-bottom:14px!important}
  .page-head h2{font-size:calc(1.7rem * var(--font-scale))!important}
  #coursesPage .student-course-list,
  #projectsPage .project-list,
  #tasksPage #taskResults > .cards{gap:18px!important}
  #coursesPage .student-course-card,
  #projectsPage .project-card,
  #tasksPage .task-card-v60{border-radius:20px!important;padding:16px!important}
  #tasksPage .task-card-v60{padding-inline-start:21px!important}
  #tasksPage .task-card-top{display:grid!important;grid-template-columns:1fr!important}
  #tasksPage .task-dual-date{max-width:none;text-align:start;width:100%;padding-top:8px;border-top:1px solid var(--task-line)}
  #tasksPage .task-fact{background:color-mix(in srgb,var(--panel) 78%,transparent)!important;border:1px solid var(--task-line)!important}
}
@media(max-width:480px){
  .login-v24__feature-grid{grid-template-columns:1fr 1fr!important;gap:10px!important}
  .login-feature-card{padding:14px 10px!important;min-height:112px!important}
  .login-feature-card strong{font-size:calc(.9rem * var(--font-scale))!important;text-align:center}
  #coursesPage .student-course-card,
  #projectsPage .project-card,
  #tasksPage .task-card-v60{box-shadow:0 9px 22px color-mix(in srgb,var(--text) 10%,transparent)!important}
}

/* رِواق v7.2.8 — توحيد أزرار حالة المهمة مع لون مصدر البطاقة */
#tasksPage .task-card-v60 .task-state-segment{
  border-color:color-mix(in srgb,var(--task-accent) 36%,var(--line))!important;
  background:color-mix(in srgb,var(--task-accent) 7%,var(--panel2))!important;
}
#tasksPage .task-card-v60 .task-state-segment button{
  color:color-mix(in srgb,var(--task-accent) 72%,var(--text))!important;
}
#tasksPage .task-card-v60 .task-state-segment button:hover{
  background:color-mix(in srgb,var(--task-accent) 14%,var(--panel))!important;
  color:var(--task-accent)!important;
}
#tasksPage .task-card-v60 .task-state-segment button.active,
#tasksPage .task-card-v60 .task-state-segment button[data-state="done"].active{
  background:linear-gradient(135deg,var(--task-accent),color-mix(in srgb,var(--task-accent) 78%,#102f34))!important;
  border-color:var(--task-accent)!important;
  color:#fff!important;
  box-shadow:0 7px 18px color-mix(in srgb,var(--task-accent) 27%,transparent)!important;
}
#tasksPage .task-card-v60 .task-actions-v60 > .btn:not(.danger),
#tasksPage .task-card-v60 .admin-task-actions > .btn:not(.danger){
  border-color:color-mix(in srgb,var(--task-accent) 42%,var(--line))!important;
  color:color-mix(in srgb,var(--task-accent) 76%,var(--text))!important;
}
#tasksPage .task-card-v60 .task-actions-v60 > .btn.primary,
#tasksPage .task-card-v60 .admin-task-actions > .btn.primary{
  background:var(--task-accent)!important;
  color:#fff!important;
  box-shadow:0 7px 18px color-mix(in srgb,var(--task-accent) 24%,transparent)!important;
}

/* v7.3.19 — visual coherence: source color is an identifier only; controls follow the selected theme */
#tasksPage .task-card-v60{
  border:1px solid color-mix(in srgb,var(--primary) 26%,var(--line))!important;
  background:var(--panel)!important;
  box-shadow:0 8px 22px color-mix(in srgb,var(--text) 7%,transparent)!important;
}
#tasksPage .task-card-v60::before{width:5px!important;background:var(--task-accent)!important}
#tasksPage .task-card-v60 .task-kind-chip{background:var(--task-accent)!important;color:#fff!important}
#tasksPage .task-card-v60 .task-fact{
  background:color-mix(in srgb,var(--primary-soft) 45%,var(--panel))!important;
  border:1px solid color-mix(in srgb,var(--primary) 18%,var(--line))!important;
}
#tasksPage .task-card-v60 .progress{background:color-mix(in srgb,var(--primary) 10%,var(--panel2))!important}
#tasksPage .task-card-v60 .progress i{background:linear-gradient(90deg,var(--primary),var(--primary-strong))!important}
#tasksPage .task-card-v60 .task-state-segment{
  border-color:color-mix(in srgb,var(--primary) 25%,var(--line))!important;
  background:color-mix(in srgb,var(--primary-soft) 58%,var(--panel2))!important;
}
#tasksPage .task-card-v60 .task-state-segment button{
  color:var(--text)!important;background:var(--panel)!important;border-color:color-mix(in srgb,var(--primary) 20%,var(--line))!important;
}
#tasksPage .task-card-v60 .task-state-segment button:hover{background:var(--primary-soft)!important;color:var(--primary-strong)!important}
#tasksPage .task-card-v60 .task-state-segment button.active,
#tasksPage .task-card-v60 .task-state-segment button[data-state="done"].active{
  background:linear-gradient(135deg,var(--primary),var(--primary-strong))!important;
  border-color:var(--primary)!important;color:#fff!important;
  box-shadow:0 6px 14px color-mix(in srgb,var(--primary) 22%,transparent)!important;
}
#tasksPage .task-card-v60.is-completed{
  border-color:color-mix(in srgb,var(--primary) 30%,var(--line))!important;
  background:var(--panel)!important;
}
#tasksPage .task-card-v60.is-completed::before{background:var(--task-accent)!important}
#tasksPage .task-card-v60.is-completed h3{color:var(--text)!important}
#tasksPage .task-completed-mark,
#tasksPage .workflow-completed{background:var(--primary-soft)!important;color:var(--primary-strong)!important;border-color:color-mix(in srgb,var(--primary) 30%,var(--line))!important}
#tasksPage .task-dual-date{color:var(--muted)!important;font-size:calc(.88rem * var(--font-scale))!important;font-weight:650!important;line-height:1.45!important}