/* ==========================================================================
   منصّة تقدّر — المكوّنات
   قواعد لا تُكسر:
   · الكحلي يحمل نصّ البطاقة، لا حبر الباستيل (حبر الخوخي = 2.98:1 غير مقروء).
   · البرتقالي إشارة واحدة ولا يُستعمل للنجاح أبدًا، ولا نصًّا على أبيض (2.19:1).
   · شريط التقدّم برقمه دائمًا — شريط بلا رقم يقول «تقريبًا».
   · هياكل عظمية لا دوّار وسط الشاشة.
   ========================================================================== */

/* --------------------------------------------------------------------------
   الأزرار — خمسة أنواع، وواحد أساسي لكل شاشة
   -------------------------------------------------------------------------- */
.tq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tq-space-s);
  min-block-size: var(--tq-touch-min);
  padding: var(--tq-space-m) var(--tq-space-xl);
  border-radius: var(--tq-radius-small);
  font: var(--tq-type-bodyStrong);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  border: var(--tq-field-border) solid transparent;
  transition: background-color var(--tq-motion-hover) ease,
              border-color var(--tq-motion-hover) ease,
              color var(--tq-motion-hover) ease,
              transform var(--tq-motion-hover) ease;
}
.tq-btn:hover { text-decoration: none; }
.tq-btn:active { transform: scale(.98); }

/* أساسي — الفعل الرئيسي، واحد لكل شاشة */
.tq-btn--primary { background: var(--tq-actionPrimary); color: var(--tq-onAction); }
.tq-btn--primary:hover { background: var(--tq-navySoft); color: var(--tq-onAction); filter: brightness(1.12); }
.tq-btn--primary:active { background: var(--tq-navyDeep); }

/* ثانوي — فعل بديل بجوار الأساسي */
.tq-btn--secondary {
  background: var(--tq-surface);
  color: var(--tq-navy);
  border-color: var(--tq-line);
}
.tq-btn--secondary:hover { background: var(--tq-navyWash); border-color: var(--tq-navy); }

/* شبحي — «عرض الكل» والتنقّل الخفيف */
.tq-btn--ghost { background: var(--tq-navyWash); color: var(--tq-navy); }
.tq-btn--ghost:hover { background: var(--tq-navyWashStrong); }

/* الإتقان — النجاح والإكمال وحدهما */
.tq-btn--mastery { background: var(--tq-actionMastery); color: var(--tq-onAction); }
.tq-btn--mastery:hover { background: var(--tq-actionMastery); color: var(--tq-onAction); filter: brightness(1.15); }

/* خطر — الحذف والإلغاء، بتأكيد دائمًا */
.tq-btn--danger { background: var(--tq-actionDanger); color: var(--tq-onAction); }
.tq-btn--danger:hover { filter: brightness(.92); color: #fff; }

.tq-btn[disabled],
.tq-btn[aria-disabled='true'] {
  background: var(--tq-line);
  color: var(--tq-text3);
  border-color: transparent;
  cursor: not-allowed;
  pointer-events: none;
}

/* تحميل — العرض ثابت لا يقفز */
.tq-btn[data-loading='true'] { color: transparent; position: relative; pointer-events: none; }
.tq-btn[data-loading='true']::after {
  content: '';
  position: absolute;
  inline-size: 18px; block-size: 18px;
  border: 2px solid currentcolor;
  border-block-start-color: transparent;
  border-radius: var(--tq-radius-pill);
  animation: tq-spin 700ms linear infinite;
  color: #fff;
}
@keyframes tq-spin { to { transform: rotate(360deg); } }

.tq-btn--sm { padding: var(--tq-space-s) var(--tq-space-l); font: var(--tq-type-caption); min-block-size: 36px; }
.tq-btn--block { inline-size: 100%; }

/* --------------------------------------------------------------------------
   الحقول — رسالة الخطأ تقول كيف يُصحَّح لا ما المشكلة
   -------------------------------------------------------------------------- */
.tq-field { display: block; margin-block-end: var(--tq-space-l); }

/* كل حقل له تسمية مرتبطة — لا يُكتفى بنصّ داخل الحقل */
.tq-field__label {
  display: block;
  margin-block-end: var(--tq-space-s);
  font: var(--tq-type-caption);
  color: var(--tq-text2);
}

.tq-input,
.tq-select,
.tq-textarea {
  inline-size: 100%;
  min-block-size: var(--tq-touch-min);
  padding: var(--tq-space-m) var(--tq-space-l);
  background: var(--tq-surface);
  color: var(--tq-text);
  border: var(--tq-field-border) solid var(--tq-line);
  border-radius: var(--tq-radius-small);
  transition: border-color var(--tq-motion-hover) ease;
}
.tq-input::placeholder,
.tq-textarea::placeholder { color: var(--tq-text3); }
.tq-input:focus,
.tq-select:focus,
.tq-textarea:focus { border-color: var(--tq-navy); }

.tq-field[data-state='error'] .tq-input,
.tq-field[data-state='error'] .tq-select { border-color: var(--tq-danger); }
.tq-field[data-state='success'] .tq-input { border-color: var(--tq-teal); }

.tq-input[disabled],
.tq-select[disabled] { background: var(--tq-ground); border-color: transparent; color: var(--tq-text3); }

.tq-field__msg { display: block; margin-block-start: var(--tq-space-s); font: var(--tq-type-micro); }
.tq-field[data-state='error'] .tq-field__msg { color: var(--tq-danger); }
.tq-field__hint { color: var(--tq-text2); }

.tq-textarea { min-block-size: 120px; resize: vertical; }

/* --------------------------------------------------------------------------
   الشارات — خمس، كلها بنمط حبر على تظليله
   -------------------------------------------------------------------------- */
.tq-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--tq-space-xs);
  padding: var(--tq-space-xs) var(--tq-space-m);
  border-radius: var(--tq-radius-pill);
  font: var(--tq-type-micro);
  white-space: nowrap;
}
/* مكتمل · متقن */
.tq-badge--mastered { background: var(--tq-tealSoft); color: var(--tq-teal); }
/* قيد التقدّم · جديد — تعبئة السماوي بالحبر الكحلي (الكحلي يحمل النصّ) */
.tq-badge--progress { background: var(--tq-sky-fill); color: var(--tq-navy); }
/* يقترب موعده */
.tq-badge--due { background: var(--tq-amberSoft); color: var(--tq-navy); }
/* متأخّر · مرفوض */
.tq-badge--late { background: var(--tq-dangerSoft); color: var(--tq-danger); }
/* لم يبدأ */
.tq-badge--idle { background: var(--tq-line); color: var(--tq-text2); }

/* --------------------------------------------------------------------------
   شريط التقدّم — 7px، والنسبة بجواره إلزاميًّا
   -------------------------------------------------------------------------- */
.tq-progress { display: flex; align-items: center; gap: var(--tq-space-m); }
.tq-progress__track {
  flex: 1;
  block-size: var(--tq-progress-h);
  background: var(--tq-line);
  border-radius: var(--tq-radius-pill);
  overflow: hidden;
}
.tq-progress__fill {
  block-size: 100%;
  background: var(--tq-actionMastery);
  border-radius: var(--tq-radius-pill);
  transition: inline-size var(--tq-motion-ringFill) var(--tq-ease-enter);
}
.tq-progress__value { font: var(--tq-type-numeralSm); color: var(--tq-navy); unicode-bidi: isolate; direction: ltr; }

/* حلقة التقدّم */
.tq-ring { position: relative; display: grid; place-items: center; }
.tq-ring svg { transform: rotate(-90deg); }
.tq-ring__track { stroke: var(--tq-line); fill: none; }
.tq-ring__fill  { stroke: var(--tq-teal); fill: none; stroke-linecap: round;
                  transition: stroke-dashoffset var(--tq-motion-ringFill) var(--tq-ease-enter); }
.tq-ring__label { position: absolute; text-align: center; }

/* --------------------------------------------------------------------------
   البطاقات
   -------------------------------------------------------------------------- */
.tq-card {
  background: var(--tq-surface);
  border-radius: var(--tq-radius-card);
  box-shadow: var(--tq-shadow-soft);
  padding: var(--tq-space-l);
}
.tq-card--raised { box-shadow: var(--tq-shadow-raised); }
.tq-card--float  { box-shadow: var(--tq-shadow-card); }
.tq-card--panel  { border-radius: var(--tq-radius-soft); padding: var(--tq-space-xl); }
.tq-card--flat   { box-shadow: none; border: 1px solid var(--tq-line); }

.tq-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--tq-space-m);
  margin-block-end: var(--tq-space-l);
}
.tq-card__title { font: var(--tq-type-h2); color: var(--tq-navy); margin: 0; }

/* بطاقة باستيل: العنوان والمتن كحليّان، وحبر العائلة للتسمية والأيقونة فقط */
.tq-pastel { border-radius: var(--tq-radius-card); padding: var(--tq-space-l); }
.tq-pastel .tq-pastel__title,
.tq-pastel .tq-pastel__body { color: var(--tq-navy); }
.tq-pastel .tq-pastel__label,
.tq-pastel .tq-pastel__icon { color: var(--tq-pastel-ink); }

.tq-pastel--mint  { background: var(--tq-mint-fill);  --tq-pastel-ink: var(--tq-mint-ink); }
.tq-pastel--sky   { background: var(--tq-sky-fill);   --tq-pastel-ink: var(--tq-sky-ink); }
.tq-pastel--peach { background: var(--tq-peach-fill); --tq-pastel-ink: var(--tq-peach-ink); }
.tq-pastel--lilac { background: var(--tq-lilac-fill); --tq-pastel-ink: var(--tq-lilac-ink); }
.tq-pastel--rose  { background: var(--tq-rose-fill);  --tq-pastel-ink: var(--tq-rose-ink); }
.tq-pastel--sand  { background: var(--tq-sand-fill);  --tq-pastel-ink: var(--tq-sand-ink); }

/* التسمية نصّ، والنصّ عتبته 4.5:1 مقيسةً لا مقدَّرة. وبالقياس على تعبئتها:
   النعناع 4.65 والسماوي 9.51 والليلكي 4.70 تجتاز، بينما الخوخي 2.98
   والوردي 3.74 والرملي 3.69 تسقط. فتسمية هذه الثلاث كحلية، وحبر العائلة
   فيها للأيقونة وحدها. قاعدة استخدام لا تغيير توكن — الشيفرة هي الصواب. */
.tq-pastel--peach .tq-pastel__label,
.tq-pastel--rose  .tq-pastel__label,
.tq-pastel--sand  .tq-pastel__label { color: var(--tq-navy); }

.tq-pastel--peach .tq-pastel__icon { color: var(--tq-peach-ink); }
.tq-pastel--rose  .tq-pastel__icon { color: var(--tq-rose-ink); }
.tq-pastel--sand  .tq-pastel__icon { color: var(--tq-sand-ink); }

/* أيقونة في مربّع باستيل */
.tq-icon-box {
  display: grid; place-items: center;
  inline-size: 44px; block-size: 44px;
  border-radius: var(--tq-radius-small);
  flex: none;
}

/* --------------------------------------------------------------------------
   القائمة الجانبية — 240 مفتوحة / 72 مطوية، عنصر 44px، ترتيب ثابت
   -------------------------------------------------------------------------- */
.tq-rail {
  inline-size: var(--tq-rail-open);
  flex: none;
  background: var(--tq-surface);
  border-inline-end: 1px solid var(--tq-line);
  padding: var(--tq-space-l) var(--tq-space-m);
  display: flex; flex-direction: column; gap: var(--tq-space-xs);
}
.tq-rail[data-collapsed='true'] { inline-size: var(--tq-rail-collapsed); }
.tq-rail[data-collapsed='true'] .tq-rail__text,
.tq-rail[data-collapsed='true'] .tq-rail__promo { display: none; }

.tq-rail__item {
  display: flex; align-items: center; gap: var(--tq-space-m);
  min-block-size: var(--tq-nav-item-h);
  padding-inline: var(--tq-space-m);
  border-radius: var(--tq-radius-small);
  color: var(--tq-text2);
  font: var(--tq-type-body);
  transition: background-color var(--tq-motion-hover) ease, color var(--tq-motion-hover) ease;
}
.tq-rail__item:hover { background: var(--tq-navyWash); color: var(--tq-navy); text-decoration: none; }
.tq-rail__item[aria-current='page'] {
  background: var(--tq-actionPrimary);
  color: var(--tq-onAction);
  font-weight: 700;
}
.tq-rail__count {
  margin-inline-start: auto;
  min-inline-size: 22px;
  padding: 2px var(--tq-space-s);
  border-radius: var(--tq-radius-pill);
  background: var(--tq-actionPrimary);
  color: var(--tq-onAction);
  font: var(--tq-type-numeralSm);
  text-align: center;
  unicode-bidi: isolate; direction: ltr;
}
/* نفس القاعدة: الرقم كحليّ على تظليل أحمر بحدّ أحمر، لا أبيض على أحمر. */
.tq-rail__count--urgent {
  background: var(--tq-dangerSoft);
  color: var(--tq-navy);
  border: 1.5px solid var(--tq-danger);
}
.tq-rail__item[aria-current='page'] .tq-rail__count { background: rgba(255, 255, 255, .22); }

@media (max-width: 1023.98px) {
  .tq-rail { inline-size: var(--tq-rail-collapsed); }
  .tq-rail .tq-rail__text, .tq-rail .tq-rail__promo { display: none; }
}
@media (max-width: 639.98px) {
  /* درج على الجوّال */
  .tq-rail {
    position: fixed; inset-block: 0; inset-inline-start: 0;
    inline-size: var(--tq-rail-open); z-index: 60;
    transform: translateX(100%);
    transition: transform var(--tq-motion-route) var(--tq-ease-enter);
    box-shadow: var(--tq-shadow-card);
  }
  html[dir='ltr'] .tq-rail { transform: translateX(-100%); }
  .tq-rail[data-open='true'] { transform: none; }
  .tq-rail .tq-rail__text, .tq-rail .tq-rail__promo { display: revert; }
}

/* --------------------------------------------------------------------------
   الترويسة العلوية
   -------------------------------------------------------------------------- */
.tq-topbar {
  display: flex; align-items: center; gap: var(--tq-space-l);
  padding: var(--tq-space-l) var(--tq-space-xl);
  background: var(--tq-surface);
  border-block-end: 1px solid var(--tq-line);
}
.tq-topbar__greet { flex: none; }
.tq-topbar__search { flex: 1; max-inline-size: 560px; margin-inline: auto; position: relative; }
.tq-topbar__kbd {
  position: absolute; inset-inline-end: var(--tq-space-m); inset-block-start: 50%;
  transform: translateY(-50%);
  padding: 2px var(--tq-space-s);
  border: 1px solid var(--tq-line); border-radius: var(--tq-radius-small);
  font: var(--tq-type-micro); color: var(--tq-text2);
}
.tq-topbar__actions { display: flex; align-items: center; gap: var(--tq-space-m); margin-inline-start: auto; }

.tq-iconbtn {
  position: relative; display: grid; place-items: center;
  inline-size: var(--tq-touch-min); block-size: var(--tq-touch-min);
  border-radius: var(--tq-radius-small); color: var(--tq-text2);
}
.tq-iconbtn:hover { background: var(--tq-navyWash); color: var(--tq-navy); }
/* الأبيض على الأحمر يبلغ 4.38:1 — وهو أحد الثمانية الممنوعة، والوثيقة
   تقصره على النصّ الكبير. وعدّاد الشارة نصّ صغير، فيأخذ البديل المنصوص:
   الكحلي يحمل الرقم على تظليل أحمر، والحدّ الأحمر يبقي الإشارة العاجلة. */
.tq-iconbtn__dot {
  position: absolute; inset-block-start: 4px; inset-inline-end: 4px;
  min-inline-size: 20px; padding: 0 5px;
  background: var(--tq-dangerSoft); color: var(--tq-navy);
  border: 1.5px solid var(--tq-danger);
  border-radius: var(--tq-radius-pill);
  font: var(--tq-type-micro); font-weight: 700; text-align: center;
  unicode-bidi: isolate;
}

/* --------------------------------------------------------------------------
   التبويبات والحبّات
   -------------------------------------------------------------------------- */
.tq-tabs { display: flex; gap: var(--tq-space-xl); border-block-end: 1px solid var(--tq-line); margin-block-end: var(--tq-space-xl); }
.tq-tab {
  padding: var(--tq-space-m) 0;
  color: var(--tq-text2);
  border-block-end: 2px solid transparent;
  margin-block-end: -1px;
  white-space: nowrap;
}
.tq-tab[aria-selected='true'] { color: var(--tq-navy); border-block-end-color: var(--tq-navy); font-weight: 700; }

.tq-pill {
  display: inline-flex; align-items: center; gap: var(--tq-space-xs);
  padding: var(--tq-space-s) var(--tq-space-l);
  border-radius: var(--tq-radius-pill);
  background: var(--tq-surface); border: 1px solid var(--tq-line);
  color: var(--tq-text2); font: var(--tq-type-caption);
}
.tq-pill[aria-pressed='true'] { background: var(--tq-navy); border-color: var(--tq-navy); color: #fff; }

/* --------------------------------------------------------------------------
   الجداول
   -------------------------------------------------------------------------- */
.tq-table { inline-size: 100%; border-collapse: collapse; }
.tq-table th {
  text-align: start;
  padding: var(--tq-space-m) var(--tq-space-l);
  font: var(--tq-type-caption); color: var(--tq-text2); font-weight: 700;
  border-block-end: 1px solid var(--tq-line);
}
.tq-table td { padding: var(--tq-space-l); border-block-end: 1px solid var(--tq-line); }
.tq-table tbody tr:hover { background: var(--tq-navyWash); }

/* --------------------------------------------------------------------------
   الهياكل العظمية — لا دوّار وسط الشاشة.
   الهيكل يقول «هذا ما سيصل وبهذا الحجم»، فلا يقفز التخطيط عند الوصول.
   -------------------------------------------------------------------------- */
.tq-skeleton {
  background: linear-gradient(90deg, var(--tq-line) 25%, var(--tq-ground) 37%, var(--tq-line) 63%);
  background-size: 400% 100%;
  animation: tq-shimmer 1400ms ease infinite;
  border-radius: var(--tq-radius-small);
  block-size: 1em;
}
.tq-skeleton--title { block-size: 1.6em; inline-size: 60%; }
.tq-skeleton--card  { block-size: 180px; border-radius: var(--tq-radius-card); }
.tq-skeleton--avatar { inline-size: 44px; block-size: 44px; border-radius: var(--tq-radius-pill); }
@keyframes tq-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* --------------------------------------------------------------------------
   الحالات الفارغة — ست، وأكثر ما يراه المستخدم الجديد
   -------------------------------------------------------------------------- */
.tq-empty {
  display: grid; justify-items: center; gap: var(--tq-space-m);
  padding: var(--tq-space-h3) var(--tq-space-xl);
  text-align: center;
}
.tq-empty__art { inline-size: 120px; block-size: 120px; opacity: .9; }
.tq-empty__title { font: var(--tq-type-h2); color: var(--tq-navy); margin: 0; }
.tq-empty__text { color: var(--tq-text2); max-inline-size: 46ch; margin: 0; }

/* شريط «بلا اتصال» الثابت */
.tq-offline {
  position: sticky; inset-block-start: 0; z-index: 70;
  background: var(--tq-amberSoft); color: var(--tq-navy);
  padding: var(--tq-space-s) var(--tq-space-l);
  text-align: center; font: var(--tq-type-caption);
}

/* --------------------------------------------------------------------------
   الصورة الرمزية
   -------------------------------------------------------------------------- */
.tq-avatar {
  inline-size: 40px; block-size: 40px; flex: none;
  border-radius: var(--tq-radius-pill);
  object-fit: cover;
  background: var(--tq-sky-fill);
}
.tq-avatar--lg { inline-size: 64px; block-size: 64px; }
.tq-avatar--sm { inline-size: 32px; block-size: 32px; }

/* عزل مقطع لاتيني داخل صندوق يرث اتجاه الصفحة.
   فرض direction على الصندوق نفسه يقلب معنى inset-inline-end فيهاجر إلى
   الجهة الخاطئة — العزل يخصّ النصّ لا الصندوق. */
.tq-ltr {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}