/**
 * الهوية البصرية الرسمية «ADH Teal» — تركوازية موحّدة عبر كل منصات مجتمع البيانات العربي.
 * (استبدلت الهوية المؤقتة القديمة: كحلي داكن + برتقالي.)
 * كل الصفحات تستهلك المتغيرات، لا ألواناً صريحة.
 * الأسماء القديمة (--navy-* / --orange-*) أُبقيت كـ«ألياس» يشير للألوان الجديدة
 * حتى لا تُلمس عشرات المراجع في الصفحات — استخدم الأسماء الجديدة (--brand*) لاحقاً.
 */
:root {
  /* ── العلامة (تركوازي) ── */
  --brand:        #108686;  /* التركوازي الأساسي */
  --brand-bright: #08B6B4;  /* التركوازي الوهّاج — CTA/لمسات */
  --brand-dark:   #0E3A42;  /* التركوازي العميق — هيدر/فوتر/عناوين */
  --brand-soft:   #8EC6C6;  /* التركوازي الفاتح */
  --brand-tint:   #EAF5F5;  /* غسول فاتح جداً */
  --on-bright:    #04262B;  /* نص داكن فوق التركوازي الوهّاج (تباين آمن) */

  /* ── ألياس توافقي مع الأسماء القديمة ── */
  --navy-900: #0A2A30;
  --navy-800: var(--brand-dark);
  --navy-700: var(--brand);
  --navy-100: var(--brand-tint);
  --orange-600: #0A9C9A;         /* حالة hover للوهّاج */
  --orange-500: var(--brand-bright);
  --orange-100: var(--brand-tint);

  /* Neutrals */
  --white:    #FFFFFF;
  --offwhite: #FDFDFD;
  --ink:      #12333A;   /* نص على الفاتح */
  --ink-soft: #5B7379;
  --line:     #E4EDED;

  /* Semantic */
  --ok:     #1E8E5A;
  --danger: #C43D3D;

  --radius: 14px;
  --shadow: 0 6px 24px rgba(14, 58, 66, .09);
  --font: 'Tajawal', Tahoma, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--offwhite);
  color: var(--ink);
  direction: rtl;
  line-height: 1.7;
}

a { color: var(--orange-600); text-decoration: none; }
a:hover { color: var(--orange-500); }

.container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* ── Hero (نمط البانر) ── */
.hero {
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(8,182,180,.22), transparent 60%),
    linear-gradient(160deg, var(--navy-800), var(--navy-900));
  color: var(--white);
  padding: 72px 0 64px;
  text-align: center;
}
.hero .brand-chip {
  display: inline-block;
  background: var(--brand-bright);
  color: var(--on-bright);
  font-weight: 800;
  font-size: .85rem;
  border-radius: 999px;
  padding: 7px 18px;
  margin-bottom: 18px;
}
.hero h1 { font-size: 2.1rem; margin: 0 0 10px; font-weight: 800; }
.hero .tagline { color: #BFE0E0; font-size: 1.15rem; margin: 0 0 26px; }

/* ── لوكاب الشعار في الهيدر: المارك (C) + الوردمارك بالخط الرسمي ── */
.brand-lockup { display: inline-flex; align-items: center; gap: 14px; line-height: 0; margin-bottom: 18px; }
.brand-lockup .mk { height: 56px; width: 56px; object-fit: contain; flex: none;
  filter: drop-shadow(0 2px 7px rgba(0,0,0,.22)); }
.brand-lockup .wm { height: 54px; width: auto; object-fit: contain;
  filter: drop-shadow(0 2px 7px rgba(0,0,0,.18)); }
.brand-lockup.on-light .mk, .brand-lockup.on-light .wm { filter: none; }
.brand-lockup.sm .mk { height: 40px; width: 40px; }
.brand-lockup.sm .wm { height: 38px; }
@media (max-width: 640px){ .brand-lockup .mk { height: 42px; width: 42px; } .brand-lockup .wm { height: 40px; } }

/* ── Buttons ── */
.btn {
  display: inline-block;
  border: 0;
  border-radius: 10px;
  padding: 13px 30px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--brand-bright); color: var(--on-bright); }
.btn-primary:hover { background: var(--orange-600); color: var(--on-bright); }
.btn-ghost {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255, 255, 255, .45);
}
.btn-ghost:hover { border-color: var(--white); color: var(--white); }
/* .btn-ghost أبيض على أبيض — للأسطح الداكنة فقط. فوق لوحة أو بطاقة أو خلية جدول
   استعمل .btn-outline (أو .btn-danger-outline لفعل لا رجعة فيه). */
.btn-outline {
  background: transparent; color: var(--brand);
  border: 1.5px solid var(--brand); border-radius: 10px;
  font-family: inherit; font-weight: 700; cursor: pointer;
}
.btn-outline:hover { background: var(--brand-tint); }
.btn-danger-outline {
  background: transparent; color: #B42318;
  border: 1.5px solid #E9BDB8; border-radius: 10px;
  font-family: inherit; font-weight: 700; cursor: pointer;
}
.btn-danger-outline:hover { background: #FDF3F2; border-color: #B42318; }
/* حارس: يمنع تكرار الغلطة صامتةً فوق الأسطح الفاتحة */
.panel .btn-ghost, .card .btn-ghost, td .btn-ghost { color: var(--brand); border-color: var(--brand); }

/* ── Cards ── */
/* min(100%, 260px): يمنع المسار من تجاوز الحاوية على الشاشات الضيقة (320px) */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px; align-items: stretch; }
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}
.card h3 { margin: 0 0 8px; color: var(--navy-800); font-size: 1.05rem; }
.card p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.card .icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--orange-100);
  color: var(--orange-600);
  border-radius: 10px;
  font-size: 1.3rem;
  margin-bottom: 12px;
}
/* شارة ترقيم احترافية لأهداف البرنامج */
.card .num {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--navy-800);
  color: var(--white);
  border-radius: 10px;
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 14px;
}
/* شريط لوني احترافي بديل عن الأيقونة في بطاقات الرؤية/الرسالة */
.card .accent {
  display: block;
  width: 46px; height: 3px;
  background: var(--orange-500);
  border-radius: 3px;
  margin-bottom: 16px;
}

.section { padding: 56px 0; }
.section h2 { color: var(--navy-800); font-size: 1.5rem; margin: 0 0 24px; text-align: center; }

.badge-soon {
  display: inline-block;
  background: var(--navy-100);
  color: var(--navy-700);
  border-radius: 999px;
  padding: 6px 18px;
  font-size: .85rem;
  font-weight: 700;
}

/* ── Footer ── */
footer {
  background: var(--navy-900);
  color: #BFE0E0;
  padding: 36px 0;
  text-align: center;
  font-size: .9rem;
}
footer .socials { margin-bottom: 10px; }
footer .socials { display: flex; justify-content: center; gap: 10px; }
footer .socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1.5px solid rgba(255,255,255,.35);
  border-radius: 50%;
  color: var(--white);
  transition: border-color .15s, color .15s, background .15s;
}
footer .socials a svg { width: 18px; height: 18px; fill: currentColor; display: block; }
footer .socials a:hover { border-color: var(--brand-bright); color: var(--brand-bright); background: rgba(8,182,180,.10); }
footer .tags { color: #7FA9AC; font-size: .8rem; margin-top: 10px; }

/* ── Chat widget ── */
.chatbox { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.chat-msgs { height: 260px; overflow-y: auto; padding: 14px; background: var(--offwhite); display: flex; flex-direction: column; gap: 8px; }
.cmsg { max-width: 78%; }
.cmsg.mine { align-self: flex-start; }
.cmsg.their { align-self: flex-end; }
.cmsg .bub { padding: 9px 13px; border-radius: 12px; font-size: .92rem; line-height: 1.6; word-wrap: break-word; }
.cmsg.mine .bub { background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
.cmsg.their .bub { background: #fff; color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.cmsg .cmeta { font-size: .7rem; color: var(--ink-soft); margin-top: 3px; }
.chat-in { display: flex; gap: 8px; padding: 10px; background: #fff; border-top: 1px solid var(--line); }
.chat-in input { flex: 1; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; font-family: inherit; }
.chat-in input:focus { outline: none; border-color: var(--orange-500); }
.chat-note { padding: 6px 12px; font-size: .78rem; }

/* ── Notification bell ── */
.bell-wrap { position: relative; display: inline-block; }
.bell-btn { background: transparent; border: 0; font-size: 1.4rem; cursor: pointer; position: relative; line-height: 1; }
.bell-badge { position: absolute; top: -4px; left: -6px; background: var(--brand); color: #fff; border-radius: 999px; min-width: 17px; height: 17px; font-size: .68rem; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.bell-drop { position: absolute; top: 130%; left: 0; width: 300px; max-height: 380px; overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); z-index: 60; }
.bell-item { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.bell-item.unread { background: var(--orange-100); }
.bell-item .bt { font-weight: 700; color: var(--navy-800); font-size: .9rem; }
.bell-item .bb { color: var(--ink-soft); font-size: .84rem; margin-top: 2px; }
.bell-item .bd { color: var(--ink-soft); font-size: .72rem; margin-top: 4px; }
.bell-empty { padding: 22px; text-align: center; color: var(--ink-soft); font-size: .88rem; }

@media (max-width: 640px) {
  .hero h1 { font-size: 1.5rem; }
  .hero .tagline { font-size: 1rem; }
  .bell-drop { width: 260px; }
}

/* ── أساسيات الوصول (مشتركة لكل الصفحات) ────────────────────────────────────
   موضعها آخر الملف ليعلو على التعريفات السابقة؛ وكل صفحة تعرّف .btn-sm محلياً
   بعد هذا الملف، فتُضبط أهدافُ اللمس في كل صفحة على حدة أيضاً. */

/* حجم خط عناصر النموذج: iOS يكبّر الصفحة تلقائياً تحت 16px */
input, select, textarea, button { font-family: inherit; }
input, select, textarea { font-size: 16px; }
@media (min-width: 768px) { input, select, textarea { font-size: 15px; } }

/* مؤشّر تركيز مرئي بتباين كافٍ — كان البديل بلون العلامة الفاتح (تباين 2.51:1) */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--brand-dark);
  outline-offset: 2px;
  border-radius: 8px;
}

/* هدف لمس لا يقل عن 44px */
.btn, .btn-sm, .tab { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.link-inline { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px;
               color: var(--brand); font-weight: 700; }

/* جداول عريضة: تمرير داخل حاويتها بدل قصّها أو دفع الصفحة */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 640px; }

/* حالة تحميل تحجز المساحة بدل منطقة بيضاء صامتة */
.skel { height: 180px; border-radius: var(--radius); background: var(--line);
        background-image: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
        background-size: 200% 100%; animation: skel 1.4s ease-in-out infinite; }
@keyframes skel { to { background-position: -200% 0; } }

/* مداخل الأدوار في التذييل */
footer .portals { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 22px; margin:14px 0 6px; }
footer .portals a { color:#BFE0E0; font-size:.88rem; padding:8px 4px; min-height:44px;
                    display:inline-flex; align-items:center; }
footer .portals a:hover { color: var(--brand-bright); }

/* أيقونة اتجاهية تُقلب مع اتجاه الصفحة بدل محرف ثابت يظهر معكوساً في RTL */
.icon-dir { display:inline-block; }
[dir="rtl"] .icon-dir { transform: scaleX(-1); }

/* نصّ للقارئ الصوتي فقط */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
           overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .skel { animation: none; }
}