/* ═══════════════════════════════════════════════════════════════
   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 انتقلت لملف assets/components.css */
.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;
}

/* ── ٤) أزرار المستويات — توهّج بلون المستوى نفسه ── */
/* قواعد .lv-btn.active انتقلت لملف assets/components.css */

/* ── ٥) بطاقة الخطوة المكتملة ونقطة التفتيش — أزرق المستوى الثالث ── */
/* .step-card.filled انتقلت لملف assets/components.css */
/* .checkpoint.ready انتقلت لملف assets/components.css */

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

.main::-webkit-scrollbar,
.teacher-dropdown::-webkit-scrollbar { width: 9px; }
.main::-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); }

/* ظل أنعم لقائمة المعلم */
.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) + لمسات تكبير مناطق اللمس
   ═══════════════════════════════════════════════════════════════ */

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

@media (max-width: 1023px) {
  /* شريط الطباعة يحترم الحافة الآمنة بالأسفل */
  .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; }

  /* أزرار المستويات الثلاثة (الجوال) انتقلت لملف assets/components.css */

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

  /* بطاقة المعلم بالأسفل: مساحة لمس أكبر */
  /* .teacher-card (الجوال) انتقلت لملف assets/components.css */
}

/* شاشات صغيرة جداً (هواتف ضيقة) */
@media (max-width: 380px) {
  /* .lv-btn .desc انتقلت لملف assets/components.css */
  .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 و.cp-save انتقلتا لملف assets/components.css */

/* ── شريط التقييم في المعاينة ── */
.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-search { flex: 1; padding: 10px 12px; border-radius: 11px; border: 1.5px solid #e2e8f0; font-family: inherit; font-size: 14px; }
.adm-list { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; }
/* حُذفت .adm-row — لا وجود لهذا الاسم في أي HTML/JS (لوحة الإدارة تستخدم adm-data-row/adm-class-row) */
.adm-actions { display: flex; gap: 6px; }
.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; }
/* لمسات «منصة الوليد» على أدوات الإدارة — مجموعة من ui-vision.css وwelcome.css
   (جُمعت هنا مع الأساس حتى يكون أساس أدوات الإدارة كله كتلة واحدة؛
   طبقة إعادة التصميم الكاملة فوقها في ui-refresh.css كما هي) */
.screen .adm-list { max-height: none; }
@media screen {
  .admin-tab { border-radius: 16px !important; }
  .adm-card label { color: var(--vision-muted); }
  .adm-list { gap: 10px; }
  .admin-tabs { border-bottom-color: var(--vision-line); }
  .admin-tab.active { background: rgba(8,118,107,.10); color: var(--vision-brand); }
  .adm-card { border-radius: 22px; }
  @media (max-width: 760px) {
    .adm-actions { width: 100%; }
  }
}