/* Riwaq 7.8.98 — compact appearance cards, stable task interiors and responsive official tabs. */

/* Appearance choices: keep all nine palettes legible without oversized swatches. */
.appearance-studio__themes .appearance-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.appearance-studio__themes .appearance-choice,
.appearance-grid .appearance-choice {
  grid-template-columns: 42px minmax(0, 1fr) 20px !important;
  min-height: 76px !important;
  gap: 8px !important;
  padding: 9px 10px !important;
  border-radius: 14px;
}
.appearance-studio__themes .appearance-preview,
.appearance-grid .appearance-preview {
  width: 42px !important;
  height: 36px !important;
  min-width: 42px !important;
  padding: 6px !important;
  gap: 3px !important;
  border-radius: 10px !important;
}
.appearance-studio__themes .appearance-preview i,
.appearance-grid .appearance-preview i { height: 4px !important; border-radius: 999px !important; }
.appearance-studio__themes .appearance-choice strong { font-size: calc(13px * var(--font-scale)); }
.appearance-studio__themes .appearance-choice small {
  font-size: calc(11px * var(--font-scale));
  line-height: 1.45;
}
.appearance-studio__themes .appearance-tone {
  padding: 2px 7px;
  font-size: calc(9px * var(--font-scale));
}
.appearance-studio__themes .appearance-choice > b { width: 21px; height: 21px; }

/* Task cards: a closed short rail and one predictable action surface in every card. */
body:not(.printing) #tasksPage #taskResults .task-stack-v807 > .task-v89 {
  grid-template-columns: 104px minmax(0, 1fr) !important;
  grid-template-rows: 1fr !important;
  align-items: stretch !important;
}
body:not(.printing) #tasksPage #taskResults .task-stack-v807 .task-v89-rail {
  align-self: start !important;
  min-height: 132px !important;
  height: auto !important;
  margin: 14px !important;
  padding: 13px 8px !important;
  justify-content: center !important;
  border-radius: 14px !important;
}
body:not(.printing) #tasksPage #taskResults .task-stack-v807 .task-v89-body {
  min-height: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
  gap: 8px !important;
  padding: 20px 22px !important;
}
body:not(.printing) #tasksPage #taskResults .task-stack-v807 .task-v89-body > :is(.task-v83-title,.task-v83-meta,.task-v83-desc,.task-shared-team,.shared-task-partners) {
  width: 100% !important;
  max-width: none !important;
}
body:not(.printing) #tasksPage #taskResults .task-stack-v807 .task-actions-v60,
body:not(.printing) #tasksPage #taskResults .task-stack-v807 .admin-task-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 64px !important;
  margin: 12px 0 0 !important;
  padding: 10px !important;
  gap: 8px !important;
  box-sizing: border-box !important;
}
body:not(.printing) #tasksPage #taskResults .task-stack-v807 .task-state-segment {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(112px, 1fr)) !important;
  flex: 1 1 420px !important;
  width: auto !important;
  min-width: min(100%, 380px) !important;
}
body:not(.printing) #tasksPage #taskResults .task-stack-v807 .task-state-segment > button,
body:not(.printing) #tasksPage #taskResults .task-stack-v807 .task-actions-v60 > .btn,
body:not(.printing) #tasksPage #taskResults .task-stack-v807 .admin-task-actions > .btn {
  min-height: 42px !important;
  padding: 8px 15px !important;
  border-radius: 10px !important;
  font-size: .88rem !important;
}
body:not(.printing) #tasksPage #taskResults .task-stack-v807 .task-actions-v60 > .workflow-primary:only-child {
  flex: 0 1 auto !important;
  width: auto !important;
  min-width: 190px !important;
}

/* Official-form categories wrap compactly; no horizontal scrollbar on any screen. */
.official-form-filters {
  display: grid !important;
  grid-auto-flow: row !important;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)) !important;
  gap: 5px !important;
  overflow: visible !important;
}
.official-filter-tab {
  min-width: 0 !important;
  min-height: 36px !important;
  padding: 5px 7px !important;
  border-radius: 9px !important;
  font-size: calc(10.5px * var(--font-scale));
  white-space: normal;
  line-height: 1.2;
}
.official-filter-tab.active { padding-inline-start: 24px !important; }
.official-filter-tab.active::after { top: 4px !important; width: 14px !important; height: 14px !important; }
.official-filter-tab > b { min-width: 20px !important; height: 19px !important; font-size: 9px !important; }

/* Calendar setup uses the available modal width and gives long Arabic copy room. */
.modal:has(.calendar-setup-dialog) { width: min(1120px, calc(100vw - 28px)) !important; }
.modal:has(.calendar-setup-dialog) .modal-body { padding-inline: clamp(14px, 3vw, 34px); }
.calendar-setup-dialog { gap: 16px !important; }
.calendar-setup-block { padding: 18px 20px !important; }
.calendar-setup-block .reminder-chips {
  grid-template-columns: repeat(4, minmax(145px, 1fr)) !important;
}
.calendar-setup-block .reminder-chip { min-height: 48px; }
.calendar-setup-block .reminder-choice-times {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.calendar-setup-block .reminder-choice-time,
.calendar-setup-block .reminder-time-row { min-width: 0; }

@media (max-width: 900px) {
  .appearance-studio__themes .appearance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body:not(.printing) #tasksPage #taskResults .task-stack-v807 > .task-v89 { grid-template-columns: 92px minmax(0, 1fr) !important; }
  .calendar-setup-block .reminder-chips { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
  .appearance-studio__themes .appearance-grid { grid-template-columns: 1fr; }
  .appearance-studio__themes .appearance-choice { grid-template-columns: 38px minmax(0, 1fr) 19px !important; min-height: 70px !important; }
  .appearance-studio__themes .appearance-preview { width: 38px !important; height: 32px !important; min-width:38px !important; }
  body:not(.printing) #tasksPage #taskResults .task-stack-v807 > .task-v89 {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
  }
  body:not(.printing) #tasksPage #taskResults .task-stack-v807 .task-v89-rail {
    width: calc(100% - 28px) !important;
    min-height: 0 !important;
    margin: 14px 14px 0 !important;
    display: grid !important;
    grid-template-columns: auto auto 1fr !important;
    justify-content: start !important;
    align-items: center !important;
    text-align: start !important;
  }
  body:not(.printing) #tasksPage #taskResults .task-stack-v807 .task-state-segment {
    grid-template-columns: 1fr !important;
    min-width: 100% !important;
  }
  .calendar-setup-block { padding: 14px !important; }
  .calendar-setup-block .reminder-chips { grid-template-columns: 1fr !important; }
}

/* v7.8.98 — اسم محرر الخطة في ملخص المقرر: نص لا شارة رقمية. */
.summary-metrics .summary-editor {
  color: var(--primary-strong);
  font-weight: 800;
  max-width: 34ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reference-simple-row .reference-title-ar {
  display: block;
  margin-top: 2px;
  color: var(--primary-strong);
  font-size: calc(.86rem * var(--font-scale));
  font-weight: 700;
}
.reference-title-ar-field .reference-translate-note {
  color: var(--muted);
  font-size: calc(.78rem * var(--font-scale));
}

/* v7.8.98 — الشركاء أحرفٌ أولى على سطر الميتا، لا كتلة تُكبّر البطاقة. */
.task-peer-stack { display: inline-flex; align-items: center; gap: 0; margin-inline-start: 6px; padding: 0; border: 0; background: transparent; cursor: pointer; vertical-align: middle; }
.task-peer-avatar { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; margin-inline-start: -6px; border: 2px solid var(--surface); background: var(--primary-soft); color: var(--primary-strong); font-size: calc(.72rem * var(--font-scale)); font-weight: 900; line-height: 1; }
.task-peer-avatar:first-child { margin-inline-start: 0; }
.task-peer-avatar.is-more { background: var(--surface-soft); color: var(--muted); font-size: calc(.66rem * var(--font-scale)); }
.task-peer-stack:hover .task-peer-avatar { border-color: var(--primary); }
/* v7.8.98 — البطاقة التي جاء إليها الطالب من الرئيسية تُضاء ثانيتين. */
#tasksPage .task-card-v60.is-focused { outline: 3px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: 3px; animation: riwaq-task-focus 2.6s ease-out; }
@keyframes riwaq-task-focus { 0% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--primary) 22%, transparent); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* v7.8.98 — زر الحفظ لا يختفي على الجوال: النموذج بارتفاع الشاشة والتذييل ثابت في أسفله،
   ولوحة المفاتيح حين تفتح تُصغّر الشاشة لا تدفع الزر خارجها. */
@media (max-width: 760px) {
  .modal form { height: 100dvh !important; min-height: 0 !important; grid-template-rows: auto minmax(0, 1fr) auto !important; }
  .modal .modal-body { min-height: 0; overflow: auto !important; }
  .modal form > footer { position: sticky; bottom: 0; z-index: 2; background: var(--panel); box-shadow: 0 -8px 20px rgba(0,0,0,.06); padding-bottom: max(13px, env(safe-area-inset-bottom)) !important; }
}

/* v7.8.98 — منسق المقرر بجانب الأستاذ في بطاقة المقرر، ووقت التسليم الثابت في الخطة. */
.card-v78-professor .card-v78-coordinator { display: inline-flex; align-items: baseline; gap: 5px; margin-inline-start: 10px; padding-inline-start: 10px; border-inline-start: 1px solid var(--line); color: var(--primary-strong); font-weight: 700; }
.card-v78-professor .card-v78-coordinator small { color: var(--muted); font-weight: 400; }
.plan-assignment-fixed-time { display: inline-grid; gap: 2px; align-self: end; padding: 6px 10px; border-radius: 10px; background: var(--surface-soft); }
.plan-assignment-fixed-time small { color: var(--muted); font-size: calc(.74rem * var(--font-scale)); }
.plan-assignment-fixed-time b { font-size: calc(.9rem * var(--font-scale)); }