/* ==========================================================================
   WinMarket AI — هيكل التطبيق والاستجابة
   نقاط التوقّف: ≥1440 واسع · ≥1024 سطح مكتب · 768–1023 لوحي · ≤767 جوال
   ========================================================================== */

.wmai-app {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--wmai-sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
}

/* ------------------------------------------------------- الشريط الجانبي */
.wmai-sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--wmai-surface);
  border-inline-end: 1px solid var(--wmai-line-soft);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.wmai-sidebar__brand {
  display: flex;
  align-items: center;
  height: var(--wmai-topbar-h);
  padding: 0 var(--wmai-s4);
  border-bottom: 1px solid var(--wmai-line-soft);
  flex: none;
}

.wmai-sidebar__nav { flex: 1; padding: var(--wmai-s4) var(--wmai-s3); }

.wmai-sidebar__group {
  padding: var(--wmai-s4) 11px 7px;
  font-family: var(--wmai-font-data);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  direction: ltr;
  color: var(--wmai-placeholder);
}

.wmai-sidebar__nav > *:first-child.wmai-sidebar__group { padding-top: 0; }

.wmai-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 11px;
  border-radius: var(--wmai-r-sm);
  color: var(--wmai-text-2);
  font-size: 0.875rem;
  text-decoration: none;
  transition: background var(--wmai-t-base) var(--wmai-ease), color var(--wmai-t-base) var(--wmai-ease);
}

.wmai-nav-item .wmai-icon {
  flex: none;
  color: var(--wmai-muted);
  transition: color var(--wmai-t-base) var(--wmai-ease), transform var(--wmai-t-base) var(--wmai-ease);
}

.wmai-nav-item:hover {
  background: rgba(255, 255, 255, 0.035);
  color: var(--wmai-text);
}

.wmai-nav-item:hover .wmai-icon { color: var(--wmai-text-2); transform: translateX(-2px); }

/* الحالة النشطة: تدرّج خافت + شريط مضيء واحد — التوهّج الوحيد في اللوحة */
.wmai-nav-item.is-active {
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.02), var(--wmai-brand-wash-2));
  color: var(--wmai-text);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--wmai-brand-line);
}

.wmai-nav-item.is-active .wmai-icon { color: var(--wmai-brand-2); }

.wmai-nav-item.is-active::before {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  border-radius: 3px 0 0 3px;
  background: var(--wmai-brand-2);
  box-shadow: 0 0 10px 1px rgba(167, 139, 250, 0.55);
}

.wmai-nav-item.is-pending { opacity: 0.66; }

.wmai-nav-item__count {
  margin-inline-start: auto;
  padding: 2px 7px;
  border-radius: var(--wmai-r-pill);
  background: rgba(255, 255, 255, 0.05);
  font-family: var(--wmai-font-data);
  font-size: 0.66rem;
  color: var(--wmai-muted);
}

.wmai-nav-item.is-active .wmai-nav-item__count { background: var(--wmai-brand-wash-2); color: var(--wmai-brand-3); }

.wmai-sidebar__foot {
  flex: none;
  padding: var(--wmai-s3) var(--wmai-s3) var(--wmai-s4);
  border-top: 1px solid var(--wmai-line-soft);
  display: flex;
  flex-direction: column;
  gap: var(--wmai-s3);
}

.wmai-keycard {
  padding: 12px;
  border: 1px solid var(--wmai-line);
  border-radius: var(--wmai-r-sm);
  background: rgba(255, 255, 255, 0.025);
}

.wmai-keycard__row { display: flex; align-items: center; gap: 8px; }
.wmai-keycard__label { font-size: var(--wmai-fs-xs); color: var(--wmai-muted); }
.wmai-keycard__value { display: block; margin-top: 4px; font-size: 0.84rem; color: var(--wmai-text); }

/* حجاب الدرج */
.wmai-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(3, 5, 10, 0.62);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--wmai-t-base), visibility var(--wmai-t-base);
}

/* ------------------------------------------------------- العمود الرئيسي */
.wmai-main { display: flex; flex-direction: column; min-width: 0; }

.wmai-topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--wmai-s3);
  height: var(--wmai-topbar-h);
  padding: 0 var(--wmai-s5);
  background: rgba(13, 19, 34, 0.78);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--wmai-line-soft);
}

.wmai-topbar__menu {
  display: none;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border: 1px solid var(--wmai-line);
  border-radius: var(--wmai-r-sm);
  background: transparent;
  color: var(--wmai-text-2);
  cursor: pointer;
  transition: color var(--wmai-t-fast), border-color var(--wmai-t-fast);
}

.wmai-topbar__menu:hover { color: var(--wmai-text); border-color: var(--wmai-line-strong); }

.wmai-topbar__search { flex: 1; max-width: 380px; }
.wmai-topbar__search .wmai-input { padding-block: 10px; padding-inline-end: 46px; font-size: 0.86rem; }

.wmai-topbar__side { display: flex; align-items: center; gap: var(--wmai-s3); margin-inline-start: auto; }

.wmai-topbar__divider { width: 1px; height: 26px; background: var(--wmai-line); flex: none; }

.wmai-iconbtn {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--wmai-line);
  border-radius: var(--wmai-r-sm);
  background: transparent;
  color: var(--wmai-text-2);
  cursor: pointer;
  transition: color var(--wmai-t-fast), border-color var(--wmai-t-fast), background var(--wmai-t-fast);
}

.wmai-iconbtn:hover { color: var(--wmai-text); border-color: var(--wmai-line-strong); background: rgba(255, 255, 255, 0.035); }

.wmai-iconbtn__dot {
  position: absolute;
  top: 7px;
  inset-inline-end: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wmai-hot);
  border: 2px solid var(--wmai-surface);
}

/* بطاقة المستخدم في الشريط العلوي */
.wmai-user {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 6px 5px 10px;
  border: 1px solid var(--wmai-line);
  border-radius: var(--wmai-r-pill);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--wmai-t-fast), background var(--wmai-t-fast);
}

.wmai-user:hover { border-color: var(--wmai-line-strong); background: rgba(255, 255, 255, 0.035); }

.wmai-user__meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.wmai-user__name { font-size: 0.8rem; font-weight: 600; color: var(--wmai-text); }
.wmai-user__role { font-size: 0.66rem; color: var(--wmai-muted); }

.wmai-avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--wmai-brand-2), var(--wmai-brand-deep));
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* ------------------------------------------------------- منطقة المحتوى */
.wmai-content {
  flex: 1;
  width: 100%;
  max-width: var(--wmai-content-max);
  margin-inline: auto;
  padding: var(--wmai-s5) var(--wmai-s5) var(--wmai-s8);
  display: flex;
  flex-direction: column;
  gap: var(--wmai-s5);
}

/* ------------------------------------------------------- الواجهة البطلة */
/* الواجهة البطلة ليست بطاقة: لا تعبئة صلبة ولا لمعة حافة.
   تندمج مع أرضية الصفحة ويحدّها خط خفيف جدًا وهالتان لونيتان. */
.wmai-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--wmai-s6);
  align-items: center;
  padding: var(--wmai-s7) var(--wmai-s6);
  border: 1px solid var(--wmai-line-soft);
  border-radius: var(--wmai-r-xl);
  background:
    radial-gradient(80% 130% at 86% -10%, rgba(139, 92, 246, 0.13), transparent 60%),
    radial-gradient(70% 120% at 6% 110%, rgba(52, 211, 153, 0.05), transparent 58%);
  overflow: hidden;
}

.wmai-hero__body { position: relative; display: flex; flex-direction: column; gap: var(--wmai-s4); }

/* العنوان الرئيسي: أكبر عنصر في الصفحة، ويتنفّس مع الرادار بلا أن يزاحمه.
   مقاسه مستقل عن سلّم العناوين العام كي لا يجرّ معه بقية الصفحات. */
.wmai-hero__title {
  font-size: clamp(1.85rem, 3.3vw, 2.65rem);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -0.015em;
  text-wrap: balance;
  max-width: 22ch;
}

/* الجزء الحاسم من الجملة يحمل لون العلامة — تمييز داخل العنوان نفسه، لا نصًّا إضافيًا */
.wmai-hero__title-accent {
  display: inline-block;
  background: linear-gradient(120deg, var(--wmai-brand-3) 0%, var(--wmai-brand-2) 45%, var(--wmai-brand) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--wmai-brand-2); /* احتياطي إن لم يُدعم القصّ */
  -webkit-text-fill-color: transparent;
  padding-inline: 0.06em;
}

.wmai-hero__lede { font-size: 1.02rem; color: var(--wmai-text-2); max-width: 46ch; }
.wmai-hero__actions { display: flex; flex-wrap: wrap; gap: var(--wmai-s3); margin-top: var(--wmai-s2); }

.wmai-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wmai-s5);
  padding-top: var(--wmai-s4);
  margin-top: var(--wmai-s2);
  border-top: 1px solid var(--wmai-line-soft);
}

.wmai-hero__stat { display: flex; flex-direction: column; gap: 2px; }
.wmai-hero__stat b { font-family: var(--wmai-font-data); font-size: 1.25rem; font-weight: 600; direction: ltr; }
.wmai-hero__stat span { font-size: 0.72rem; color: var(--wmai-muted); }

.wmai-hero__visual { position: relative; display: grid; place-items: center; min-height: 240px; }

/* الرادار: حلقات + عُقد بيانات + مسح دوّار.
   الحركة كلها بطيئة ومنخفضة السعة — ذكاء سوقي لا لعبة. */
.wmai-radar { width: 100%; max-width: 300px; height: auto; }
.wmai-radar__ring { fill: none; stroke: rgba(255, 255, 255, 0.075); stroke-width: 1; }
.wmai-radar__cross { stroke: rgba(255, 255, 255, 0.05); stroke-width: 1; }

.wmai-radar__sweep {
  transform-origin: 150px 150px;
  animation: wmai-sweep 16s linear infinite;
}

/* عُقد الذكاء البنفسجية: انزياح بطيء جدًا يوحي بسوق يتحرك */
.wmai-radar__node {
  transform-box: fill-box;
  transform-origin: center;
}

.wmai-radar__node--drift-a { animation: wmai-drift-a 17s ease-in-out infinite; }
.wmai-radar__node--drift-b { animation: wmai-drift-b 21s ease-in-out infinite; }
.wmai-radar__node--drift-c { animation: wmai-drift-c 19s ease-in-out infinite; }

/* العقدة النشطة: وميض خفيف لا أكثر */
.wmai-radar__node--active { animation: wmai-node-active 4.2s ease-in-out infinite; }

/* العقدة النشطة المنزاحة تجمع الحركتين بدل أن تلغي إحداهما الأخرى */
.wmai-radar__node--drift-a.wmai-radar__node--active {
  animation:
    wmai-drift-a 17s ease-in-out infinite,
    wmai-node-active 4.2s ease-in-out infinite;
}

/* عقدة الفرصة الخضراء + هالتها */
.wmai-radar__opp { animation: wmai-node-active 3.6s ease-in-out infinite; }

.wmai-radar__halo {
  fill: none;
  stroke: var(--wmai-rise);
  stroke-width: 1.2;
  transform-box: fill-box;
  transform-origin: center;
  animation: wmai-halo 3.6s ease-out infinite;
}

/* الوصل البصري بين عقدة الفرصة وبطاقة Trend Score */
.wmai-radar__link {
  fill: none;
  stroke: var(--wmai-rise);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-dasharray: 3 5;
  opacity: 0.5;
  animation: wmai-link 9s linear infinite;
}

.wmai-radar__link-end {
  fill: none;
  stroke: var(--wmai-rise);
  stroke-width: 1.2;
  opacity: 0.6;
}

@keyframes wmai-sweep {
  to { transform: rotate(360deg); }
}

@keyframes wmai-drift-a {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(3px, -4px); }
}

@keyframes wmai-drift-b {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-4px, 3px); }
}

@keyframes wmai-drift-c {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(2.5px, 3.5px); }
}

@keyframes wmai-node-active {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}

@keyframes wmai-halo {
  0% { opacity: 0.55; transform: scale(0.72); }
  70% { opacity: 0; transform: scale(1.5); }
  100% { opacity: 0; transform: scale(1.5); }
}

@keyframes wmai-link {
  to { stroke-dashoffset: -32; }
}

/* بطاقة عائمة فوق الرادار */
.wmai-hero__chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  border: 1px solid var(--wmai-line-strong);
  border-radius: var(--wmai-r-sm);
  background: rgba(23, 32, 51, 0.86);
  backdrop-filter: blur(10px);
  box-shadow: var(--wmai-shadow-2);
}

.wmai-hero__chip--score { inset-inline-start: 2%; top: 16%; }
.wmai-hero__chip--ads { inset-inline-end: 0%; bottom: 14%; }
.wmai-hero__chip b { font-family: var(--wmai-font-data); font-size: 0.95rem; direction: ltr; }
.wmai-hero__chip span { font-size: 0.68rem; color: var(--wmai-muted); display: block; }

/* ------------------------------------------------------- الشبكات */
.wmai-kpi-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wmai-s4); }
.wmai-products-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wmai-s4); }
.wmai-opps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wmai-s4); }
.wmai-split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--wmai-s4); align-items: start; }

.wmai-footer {
  padding: var(--wmai-s5);
  border-top: 1px solid var(--wmai-line-soft);
  color: var(--wmai-muted);
  font-size: var(--wmai-fs-xs);
}

.wmai-footer__inner {
  max-width: var(--wmai-content-max);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wmai-s4);
  flex-wrap: wrap;
}

/* ------------------------------------------------------- شريط الجوال السفلي */
.wmai-mobilebar {
  display: none;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 80;
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(13, 19, 34, 0.95);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--wmai-line-soft);
}

.wmai-mobilebar__list { display: flex; height: var(--wmai-mobilebar-h); }
.wmai-mobilebar__cell { flex: 1; display: flex; }

.wmai-mobilebar__item {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--wmai-muted);
  font-size: 0.62rem;
  text-decoration: none;
  transition: color var(--wmai-t-fast);
}

.wmai-mobilebar__item.is-active { color: var(--wmai-brand-2); }

.wmai-mobilebar__item.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  width: 22px;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--wmai-brand-2);
}

.wmai-mobilebar__item:hover { color: var(--wmai-text-2); }

/* ------------------------------------------------------- شريط إدارة ووردبريس */
.admin-bar .wmai-sidebar { height: calc(100vh - 32px); top: 32px; }
.admin-bar .wmai-topbar { top: 32px; }

@media screen and (max-width: 782px) {
  .admin-bar .wmai-sidebar { height: calc(100vh - 46px); top: 46px; }
  .admin-bar .wmai-topbar { top: 46px; }
}

/* ==========================================================================
   ≥1440 — شاشات واسعة
   ========================================================================== */
@media (min-width: 1440px) {
  .wmai-content { padding-inline: var(--wmai-s6); gap: var(--wmai-s6); }
  .wmai-hero { padding: var(--wmai-s7) var(--wmai-s6); }
}

/* ==========================================================================
   ≤1279 — تضييق الشبكات قبل كسرها
   ========================================================================== */
@media (max-width: 1279px) {
  .wmai-products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wmai-opps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 1024–1279: العمود النصي وحده يضيق هنا فيكسر العنوان إلى ثلاثة أسطر.
   إزاحة بسيطة لصالح النص تكفي، والرادار يبقى كبيرًا بما يوازنه. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .wmai-hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
  .wmai-radar { max-width: 280px; }
}

/* ==========================================================================
   ≤1023 — لوحي: الشريط الجانبي يصبح درجًا
   ========================================================================== */
@media (max-width: 1023px) {
  .wmai-app { grid-template-columns: minmax(0, 1fr); }

  .wmai-sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 100;
    width: min(86vw, 300px);
    height: 100vh;
    transform: translateX(100%);
    transition: transform var(--wmai-t-slow) var(--wmai-ease);
    box-shadow: var(--wmai-shadow-3);
  }

  [dir="ltr"] .wmai-sidebar { transform: translateX(-100%); }

  .wmai-app.is-nav-open .wmai-sidebar { transform: translateX(0); }
  .wmai-app.is-nav-open .wmai-scrim { opacity: 1; visibility: visible; }

  .wmai-topbar__menu { display: grid; }
  .wmai-topbar { padding-inline: var(--wmai-s4); }

  .wmai-hero { grid-template-columns: minmax(0, 1fr); gap: var(--wmai-s5); }
  .wmai-hero__visual { min-height: 210px; order: -1; }
  .wmai-radar { max-width: 230px; }

  .wmai-split { grid-template-columns: minmax(0, 1fr); }
  .wmai-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .admin-bar .wmai-sidebar { top: 32px; height: calc(100vh - 32px); }
}

/* ==========================================================================
   ≤767 — جوال
   ========================================================================== */
@media (max-width: 767px) {
  .wmai-content {
    padding: var(--wmai-s4) var(--wmai-s3);
    padding-bottom: calc(var(--wmai-mobilebar-h) + var(--wmai-s7));
    gap: var(--wmai-s4);
  }

  .wmai-mobilebar { display: block; }

  .wmai-topbar { padding-inline: var(--wmai-s3); gap: var(--wmai-s2); }
  .wmai-topbar__search { max-width: none; }
  .wmai-topbar__search .wmai-input { padding-inline-end: 14px; }
  .wmai-kbd { display: none; }
  .wmai-topbar__divider { display: none; }
  .wmai-user__meta { display: none; }
  .wmai-user { padding: 4px; border-color: transparent; }

  .wmai-hero { padding: var(--wmai-s5) var(--wmai-s4); border-radius: var(--wmai-r-lg); }
  .wmai-hero__title { max-width: none; line-height: 1.3; }
  .wmai-hero__lede { font-size: 0.94rem; }
  .wmai-hero__actions .wmai-btn { flex: 1; }
  .wmai-hero__stats { gap: var(--wmai-s4); }
  .wmai-hero__chip--score { inset-inline-start: 0; top: 8%; }
  .wmai-hero__chip--ads { inset-inline-end: 0; bottom: 6%; }
  .wmai-radar { max-width: 190px; }

  .wmai-kpi-strip,
  .wmai-products-grid,
  .wmai-opps-grid { grid-template-columns: minmax(0, 1fr); }

  .wmai-card--padded { padding: var(--wmai-s4); }
  .wmai-kpi__value { font-size: 1.8rem; }

  .wmai-footer { padding-bottom: calc(var(--wmai-mobilebar-h) + var(--wmai-s4)); }

  .wmai-toasts {
    inset-inline: var(--wmai-s3);
    inset-block-end: calc(var(--wmai-mobilebar-h) + var(--wmai-s3));
  }

  .wmai-modal { padding: var(--wmai-s3); }
}

/* ==========================================================================
   ≤380 — أضيق الأجهزة
   ========================================================================== */
@media (max-width: 380px) {
  /* على أضيق الشاشات نخفض المقاس قليلًا كي يقع العنوان في سطرين متوازنين
     بدل ثلاثة أسطر أحدها كلمة واحدة. */
  .wmai-hero__title { font-size: 1.68rem; letter-spacing: -0.01em; }
  .wmai-hero__actions { flex-direction: column; }
  .wmai-hero__actions .wmai-btn { width: 100%; }
  .wmai-mobilebar__item span { font-size: 0.58rem; }
}

/* ==========================================================================
   الطباعة الورقية
   ========================================================================== */
@media print {
  .wmai-sidebar,
  .wmai-topbar,
  .wmai-mobilebar,
  .wmai-scrim { display: none !important; }

  .wmai-app { grid-template-columns: 1fr; }
  body.wmai { background: #fff; color: #000; }
}