/* ═══════════════════════════════════════════════════════════════
   UI POLISH — طبقة تحسين الواجهة (تُحمَّل بعد app.css)
   ─────────────────────────────────────────────────────────────
   ١) توحيد الهوية البصرية: إزالة بقايا الألوان القديمة
      (البنفسجي ٧B5CFF / البرتقالي F97316 / السماوي ٢5C4C4)
      واستبدالها بألوان الهوية المعتمدة (التركواز + الذهبي + ألوان المستويات)
   ٢) تحسين الوصولية: حلقات تركيز للوحة المفاتيح + احترام تقليل الحركة
   ٣) لمسات دقيقة: شريط تمرير، لون التحديد، حالات الضغط
   لا يغيّر أي معرّفات أو وظائف — تجميل فقط.
   ═══════════════════════════════════════════════════════════════ */

@media screen {

/* ── ١) خلفية الأورورا — هالات من ألوان الهوية نفسها ── */
.aurora-bg {
  background:
    radial-gradient(ellipse 70% 55% at 12% 8%,  rgba(231,111,81,0.16), transparent 60%),
    radial-gradient(ellipse 60% 50% at 92% 18%, rgba(42,157,143,0.16),  transparent 58%),
    radial-gradient(ellipse 65% 55% at 80% 92%, rgba(69,123,157,0.14),  transparent 60%),
    radial-gradient(ellipse 55% 45% at 18% 95%, rgba(196,154,74,0.14),  transparent 55%),
    linear-gradient(165deg, #fdfaf4 0%, #f7f0e6 100%);
}
.aurora-bg::after {
  background-image: radial-gradient(rgba(11,107,99,0.05) 1px, transparent 1px);
}

/* ── ٢) حلقات التركيز — تركواز الهوية بدل البنفسجي ── */
.auth-form input:focus {
  box-shadow: 0 0 0 4px rgba(11,107,99,0.14);
}
.field select:focus,
.search-wrap input:focus {
  box-shadow: 0 0 0 4px rgba(11,107,99,0.12);
}
.date-input.active {
  box-shadow: 0 0 0 4px rgba(11,107,99,0.12);
}
.auth-cube::after {
  border-color: rgba(196,154,74,0.45); /* إطار ذهبي مقطّع */
}

/* تركيز لوحة المفاتيح — لكل العناصر التفاعلية */
:where(button, a, select, input, [tabindex]):focus-visible {
  outline: 3px solid rgba(11,107,99,0.55);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── ٣) عنصر التنقّل النشط — تدرّج من الهوية ── */
.nav-item.active {
  background: linear-gradient(135deg, rgba(42,157,143,0.14), rgba(196,154,74,0.10));
}

/* ── ٤) أزرار المستويات — توهّج بلون المستوى نفسه ── */
.lv-btn[data-level="1"].active { box-shadow: 0 8px 22px rgba(231,111,81,0.30); }
.lv-btn[data-level="2"].active { box-shadow: 0 8px 22px rgba(42,157,143,0.30); }
.lv-btn[data-level="3"].active { box-shadow: 0 8px 22px rgba(69,123,157,0.28); }

/* ── ٥) بطاقة الخطوة المكتملة ونقطة التفتيش — أزرق المستوى الثالث ── */
.step-card.filled            { box-shadow: 0 6px 20px rgba(69,123,157,0.14); }
.checkpoint.ready            { box-shadow: 0 10px 30px rgba(69,123,157,0.18); }

/* ── ٦) لمسات دقيقة ── */
::selection { background: rgba(42,157,143,0.25); color: var(--ink); }

.main::-webkit-scrollbar,
.nav-section::-webkit-scrollbar,
.teacher-dropdown::-webkit-scrollbar { width: 9px; }
.main::-webkit-scrollbar-thumb,
.nav-section::-webkit-scrollbar-thumb,
.teacher-dropdown::-webkit-scrollbar-thumb {
  background: var(--line-2); border-radius: 8px;
  border: 2px solid transparent; background-clip: content-box;
}
.main::-webkit-scrollbar-thumb:hover { background-color: var(--brand-2); }

/* حالة الضغط — استجابة لمسية أوضح */
.btn-primary:active,
.h-btn:active { transform: translateY(1px) scale(0.99); }

/* ظل أنعم لقائمة المعلم */
.teacher-dropdown.show { box-shadow: 0 16px 44px -10px rgba(8,79,73,0.22); }

} /* نهاية @media screen */

/* ── ٧) أعمدة الأهداف وفقرات الدعم في معاينة A4 —
        خلفيات مطابقة لألوان حدودها (تظهر في المعاينة والطباعة) ── */
.obj-col.cog { background: rgba(231,111,81,0.09); }
.obj-col.ski { background: rgba(42,157,143,0.09); }
.obj-col.emo { background: rgba(69,123,157,0.09); }
.sup.enrich  { background: rgba(69,123,157,0.09); }
.sup.treat   { background: rgba(196,154,74,0.13); }

/* ── ٨) احترام تفضيل تقليل الحركة ── */
@media (prefers-reduced-motion: reduce) {
  .aurora-bg { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   تحسينات نسخة الجوال — v20260610
   ١) خلفية معتمة خلف القائمة السفلية (إغلاق بلمسة خارجها)
   ٢) إصلاح تداخل الزر العائم مع شريط الطباعة الثابت
   ٣) منع تكبير iOS التلقائي عند لمس الحقول
   ٤) دعم الحواف الآمنة (iPhone) + لمسات تكبير مناطق اللمس
   ═══════════════════════════════════════════════════════════════ */

/* خلفية القائمة — مخفية افتراضياً على كل المقاسات */
.sb-backdrop {
  position: fixed; inset: 0; z-index: 65;
  background: rgba(30,53,49,0.38);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}

/* إلغاء وميض اللمس الافتراضي + منع تأخير النقر المزدوج */
button, .nav-item, .chip-btn, .end-chip, .cal-cell, .lv-btn,
.teacher-card, .td-option, .h-btn { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

@media (max-width: 900px) {
  /* القائمة السفلية: ارتفاع ديناميكي يتكيف مع شريط المتصفح + ظل من الهوية */
  .sidebar {
    height: 86dvh;
    box-shadow: 0 -12px 44px rgba(8,79,73,0.20);
    padding-bottom: env(safe-area-inset-bottom);
  }
  /* مقبض سحب أوضح */
  .sidebar::before { width: 52px; height: 5px; background: var(--brand-2); opacity: 0.55; }

  /* الخلفية المعتمة تظهر مع القائمة */
  .sidebar.show + .sb-backdrop { opacity: 1; pointer-events: auto; }

  /* تمرير سلس بالقصور الذاتي داخل القائمة */
  .nav-section { -webkit-overflow-scrolling: touch; }
}

@media (max-width: 1023px) {
  /* الزر العائم: فوق شريط الطباعة الثابت بدل ما يغطيه + حافة آمنة */
  .mobile-toggle {
    width: 54px; height: 54px; font-size: 22px;
    bottom: calc(96px + env(safe-area-inset-bottom));
    left: 16px;
  }
  /* شريط الطباعة يحترم الحافة الآمنة بالأسفل */
  .checkpoint-wrap { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}

@media (max-width: 640px) {
  /* iOS يكبّر الصفحة تلقائياً إذا كان خط الحقل أصغر من 16px — نمنع ذلك */
  .field select,
  .search-wrap input,
  .auth-form input { font-size: 16px; }

  /* رأس الصفحة: أزرار الإجراءات بعرض كامل يسهل لمسها */
  .head-actions { width: 100%; }
  .head-actions .h-btn { flex: 1; padding: 13px 10px; }

  /* أزرار المستويات الثلاثة: أرحب للمس وأنظف على الشاشات الضيقة */
  .lv-btn { padding: 14px 6px; min-height: 76px; }
  .lv-btn .name { font-size: 14px; }
  .lv-btn .desc { font-size: 10px; }

  /* هوامش جانبية أرحب للمحتوى على الجوال */
  .panel-strip, .ctl-row, .preview-wrap, .checkpoint-wrap {
    padding-left: 14px; padding-right: 14px;
  }
  .ctl-card { padding: 16px 14px; }

  /* بطاقة المعلم بالأسفل: مساحة لمس أكبر */
  .teacher-card { padding: 13px; }
}

/* شاشات صغيرة جداً (هواتف ضيقة) */
@media (max-width: 380px) {
  .lv-btn .desc { display: none; }
  .end-chips { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   درع الطباعة — إصلاح انزياح الورقة عند الطباعة من الجوال
   ─────────────────────────────────────────────────────────
   كتلة الطباعة في app.css تصفّر بعض الأغلفة وتنسى أخرى
   (#preview وسلسلته). على الشاشات الأضيق من A4 (الجوال)
   يتسرب حشو/إزاحة الأغلفة إلى الطباعة فتنزاح الورقة يمينًا
   وتُقص حافتها. هنا نصفّر السلسلة كاملة بصرامة فتملأ
   الورقةُ الصفحةَ بالضبط على كل الأجهزة.
   ═══════════════════════════════════════════════════════════ */
@media print {
  html, body {
    width: auto !important; min-width: 0 !important; max-width: none !important;
    margin: 0 !important; padding: 0 !important;
    overflow: visible !important;
  }
  .app, .main, .workspace, .preview-col, .preview-wrap, #preview {
    display: block !important;
    width: auto !important; min-width: 0 !important; max-width: none !important;
    margin: 0 !important; padding: 0 !important;
    overflow: visible !important;
    position: static !important;
    transform: none !important;
    gap: 0 !important;
  }
  /* الورقة المرنة: تتنفس داخل مساحة الطباعة الفعلية.
     لا نفرض min-width هنا؛ لأن بعض متصفحات PDF تطبق هوامش أضيق من A4
     فينتج قص من الجهة اليسرى عند RTL. */
  #preview .a4 {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 auto !important;
    transform: none !important;
    overflow: visible !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
  }
}

/* ── زر حفظ الخطة في السجل (Supabase) ── */
.cp-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cp-save {
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  padding: 12px 18px; border-radius: 13px; border: 1.5px solid #0d9488;
  background: linear-gradient(135deg, #14b8a6, #0d9488); color: #fff;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  box-shadow: 0 4px 14px rgba(13,148,136,0.28);
}
.cp-save:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(13,148,136,0.36); }
.cp-save:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.3); }
.cp-save.saving { opacity: .7; cursor: progress; }

/* ── السجل: عرض الخطط المحفوظة ── */
.sp-pick { padding: 4px 2px 14px; }
.sp-pick label { display: block; font-size: 13px; font-weight: 700; color: var(--ink-2, #555); margin-bottom: 6px; }
.sp-pick select {
  width: 100%; padding: 11px 12px; border-radius: 12px; border: 1.5px solid var(--line, #e2e2e2);
  font-family: inherit; font-size: 14px; background: #fff; color: var(--ink, #222);
}
.sp-list { display: flex; flex-direction: column; gap: 9px; }
.sp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sp-row .ti b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sp-eval { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 20px; white-space: nowrap; }
.sp-eval.green  { background: #dcfce7; color: #15803d; }
.sp-eval.orange { background: #ffedd5; color: #c2410c; }
.sp-eval.red    { background: #fee2e2; color: #b91c1c; }
.sp-open {
  font-family: inherit; font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap;
  padding: 9px 18px; border-radius: 11px; border: 1.5px solid #0d9488;
  background: linear-gradient(135deg, #14b8a6, #0d9488); color: #fff;
  transition: transform .12s ease;
}
.sp-open:hover { transform: translateY(-1px); }

/* ── شريط التقييم في المعاينة ── */
.eval-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 12px 16px; border-radius: 14px;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9); border: 1.5px solid #e2e8f0;
}
.eval-lbl { font-weight: 800; font-size: 14px; color: #334155; }
.eval-btn {
  font-family: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer;
  padding: 9px 16px; border-radius: 11px; border: 2px solid transparent; background: #fff;
  transition: transform .1s ease, box-shadow .12s ease; box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.eval-btn:hover { transform: translateY(-1px); }
.eval-btn.green  { color: #15803d; border-color: #86efac; }
.eval-btn.orange { color: #c2410c; border-color: #fdba74; }
.eval-btn.red    { color: #b91c1c; border-color: #fca5a5; }
.eval-btn.on.green  { background: #15803d; color: #fff; border-color: #15803d; }
.eval-btn.on.orange { background: #c2410c; color: #fff; border-color: #c2410c; }
.eval-btn.on.red    { background: #b91c1c; color: #fff; border-color: #b91c1c; }

/* ── ختم التقييم الواقعي (دائري) — الألوان داخل الـSVG مباشرة ── */
.iep-stamp {
  position: absolute; bottom: 18mm; left: 11mm; width: 33mm; height: 33mm;
  transform: rotate(-14deg); pointer-events: none; z-index: 6; opacity: .92;
}
.iep-stamp svg { width: 100%; height: 100%; overflow: visible; }

/* ── لوحة الإدارة ── */
.modal-admin { max-width: 640px; width: 94vw; }
.admin-tabs { display: flex; gap: 8px; padding: 0 4px 12px; border-bottom: 1.5px solid #eef2f7; margin-bottom: 12px; }
.admin-tab {
  font-family: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
  padding: 9px 16px; border-radius: 11px 11px 0 0; border: none; background: transparent; color: #64748b;
}
.admin-tab.active { background: #f1f5f9; color: #0f766e; }
.adm-bar { display: flex; gap: 9px; margin-bottom: 12px; }
.adm-search { flex: 1; padding: 10px 12px; border-radius: 11px; border: 1.5px solid #e2e8f0; font-family: inherit; font-size: 14px; }
.adm-add {
  font-family: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; white-space: nowrap;
  padding: 10px 16px; border-radius: 11px; border: none; color: #fff;
  background: linear-gradient(135deg, #14b8a6, #0d9488);
}
.adm-list { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; }
.adm-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-radius: 12px; background: #f8fafc; border: 1.5px solid #eef2f7; }
.adm-info b { display: block; font-size: 14.5px; color: #1e293b; }
.adm-info span { font-size: 12px; color: #64748b; }
.adm-actions { display: flex; gap: 6px; }
.adm-edit, .adm-del { font-family: inherit; font-weight: 700; font-size: 12.5px; cursor: pointer; padding: 7px 13px; border-radius: 9px; border: 1.5px solid transparent; }
.adm-edit { background: #e0f2fe; color: #0369a1; }
.adm-del { background: #fee2e2; color: #b91c1c; }
.adm-card { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 14px; padding: 16px; margin-bottom: 14px; box-shadow: 0 4px 16px rgba(0,0,0,.05); }
.adm-card h4 { margin: 0 0 10px; font-size: 15.5px; color: #0f766e; }
.adm-card label { display: block; font-size: 12.5px; font-weight: 700; color: #475569; margin: 9px 0 4px; }
.adm-card input, .adm-card select { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1.5px solid #e2e8f0; font-family: inherit; font-size: 14px; background: #fff; }
.adm-form-actions { display: flex; gap: 8px; margin-top: 14px; }
.adm-save { flex: 1; font-family: inherit; font-weight: 800; font-size: 14px; cursor: pointer; padding: 11px; border-radius: 11px; border: none; color: #fff; background: linear-gradient(135deg, #14b8a6, #0d9488); }
.adm-cancel { font-family: inherit; font-weight: 700; font-size: 14px; cursor: pointer; padding: 11px 18px; border-radius: 11px; border: 1.5px solid #e2e8f0; background: #fff; color: #64748b; }
.adm-hint { font-size: 11.5px; color: #94a3b8; margin-top: 10px; line-height: 1.5; }
.adm-err { color: #ef4444; font-size: 13px; font-weight: 600; margin-top: 8px; }