/* ================================================================
   NexaCore Top Bar — topbar.css
   ملف CSS مستقل للتوب بار وتعديلات السايدبار
   ================================================================ */

/* ══ الشريط العلوي (Top Bar) ══ */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  margin-bottom: 18px;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}
[data-theme="light"] .top-bar {
  background: #ffffff;
  border: 1px solid rgba(12,15,36,0.08);
  box-shadow: 0 2px 12px rgba(12,15,36,0.06);
}
[data-theme="dark"] .top-bar {
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,0.07);
}
.top-bar-right { display: flex; flex-direction: column; gap: 4px; }
.top-bar-left  { display: flex; align-items: center; gap: 7px; }
.top-bar-actions { display: flex; align-items: center; gap: 6px; }

/* ── الساعة ── */
.tb-time {
  padding: 5px 11px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  min-width: 64px;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.08);
}
[data-theme="light"] .tb-time { background: #F5F2EC; color: #0C0F24; border-color: rgba(12,15,36,0.10); font-weight: 800; }
[data-theme="dark"]  .tb-time { background: rgba(255,255,255,0.06); color: #E5E7EB; }

/* ── الفاصل ── */
.tb-sep { width: 1px; height: 22px; margin: 0 2px; }
[data-theme="light"] .tb-sep { background: rgba(12,15,36,0.12); }
[data-theme="dark"]  .tb-sep { background: rgba(255,255,255,0.08); }

/* ── الأزرار الكبسولية ── */
.tb-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  border-radius: 50px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s;
  white-space: nowrap;
  font-family: Cairo, sans-serif;
  background: none;
}
.tb-pill svg { width: 14px; height: 14px; flex-shrink: 0; }

[data-theme="light"] .tb-pill-globe   { background: #EEF2FF; color: #2A3068; border-color: rgba(67,97,238,0.25); }
[data-theme="light"] .tb-pill-globe:hover { background: #E0E7FF; color: #1E30A8; }
[data-theme="light"] .tb-pill-theme   { background: #FFFBEB; color: #78350F; border-color: rgba(217,119,6,0.30); }
[data-theme="light"] .tb-pill-theme:hover { background: #FEF3C7; }
[data-theme="light"] .tb-pill-settings {
  background: #F0FDF4; color: #064E3B; border-color: rgba(5,150,105,0.25);
  border-radius: 50%; width: 34px; height: 34px; padding: 0; justify-content: center;
}
[data-theme="light"] .tb-pill-settings:hover { background: #DCFCE7; }
[data-theme="light"] .tb-pill-logout  { background: #FFF0F3; color: #9F1239; border-color: rgba(220,38,38,0.22); }
[data-theme="light"] .tb-pill-logout:hover { background: #FFE4E8; }

[data-theme="dark"] .tb-pill-globe   { background: rgba(37,99,235,0.12); color: #93C5FD; border-color: rgba(37,99,235,0.2); }
[data-theme="dark"] .tb-pill-globe:hover { background: rgba(37,99,235,0.2); }
[data-theme="dark"] .tb-pill-theme   { background: rgba(217,119,6,0.12); color: #FCD34D; border-color: rgba(217,119,6,0.2); }
[data-theme="dark"] .tb-pill-theme:hover { background: rgba(217,119,6,0.2); }
[data-theme="dark"] .tb-pill-settings {
  background: rgba(16,185,129,0.1); color: #6EE7B7; border-color: rgba(16,185,129,0.2);
  border-radius: 50%; width: 34px; height: 34px; padding: 0; justify-content: center;
}
[data-theme="dark"] .tb-pill-settings:hover { background: rgba(16,185,129,0.18); }
[data-theme="dark"] .tb-pill-logout  { background: rgba(220,38,38,0.12); color: #FCA5A5; border-color: rgba(220,38,38,0.2); }
[data-theme="dark"] .tb-pill-logout:hover { background: rgba(220,38,38,0.2); }

.tb-pill-settings svg { transition: transform 0.4s ease; }
.tb-pill-settings:hover svg { transform: rotate(90deg); }

/* ── أزرار الإجراءات السريعة ── */
.tb-action-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s;
  font-family: Cairo, sans-serif;
}
.tb-action-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

[data-theme="dark"] .tb-sale     { background: rgba(16,185,129,0.12); color: #6EE7B7; border-color: rgba(16,185,129,0.2); }
[data-theme="dark"] .tb-sale:hover { background: rgba(16,185,129,0.22); }
[data-theme="dark"] .tb-ai       { background: rgba(139,92,246,0.12); color: #C4B5FD; border-color: rgba(139,92,246,0.2); }
[data-theme="dark"] .tb-ai:hover { background: rgba(139,92,246,0.22); }
[data-theme="dark"] .tb-announce { background: rgba(251,146,60,0.12); color: #FED7AA; border-color: rgba(251,146,60,0.2); }
[data-theme="dark"] .tb-announce:hover { background: rgba(251,146,60,0.22); }

[data-theme="light"] .tb-sale     { background: #ECFDF5; color: #064E3B; border-color: rgba(5,150,105,0.28); font-weight: 700; }
[data-theme="light"] .tb-sale:hover { background: #D1FAE5; }
[data-theme="light"] .tb-ai       { background: #F5F3FF; color: #4C1D95; border-color: rgba(124,58,237,0.28); font-weight: 700; }
[data-theme="light"] .tb-ai:hover { background: #EDE9FE; }
[data-theme="light"] .tb-announce { background: #FFF7ED; color: #78350F; border-color: rgba(217,119,6,0.28); font-weight: 700; }
[data-theme="light"] .tb-announce:hover { background: #FFEDD5; }

/* ── مؤشر الاتصال ── */
.tb-conn {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 50px;
  border: 1px solid transparent;
}
.tb-conn-dot {
  width: 7px; height: 7px;
  border-radius: 50%; flex-shrink: 0;
}
.tb-conn.online  .tb-conn-dot { background: #10B981; box-shadow: 0 0 0 2px rgba(16,185,129,0.3); }
.tb-conn.offline .tb-conn-dot { background: #EF4444; box-shadow: 0 0 0 2px rgba(239,68,68,0.3); animation: tb-blink 1s infinite; }
@keyframes tb-blink { 0%,100% { opacity:1 } 50% { opacity:0.3 } }

[data-theme="dark"] .tb-conn.online  { color: #6EE7B7; border-color: rgba(16,185,129,0.2); background: rgba(16,185,129,0.08); }
[data-theme="dark"] .tb-conn.offline { color: #FCA5A5; border-color: rgba(239,68,68,0.2); background: rgba(239,68,68,0.08); }
[data-theme="light"] .tb-conn.online  { color: #064E3B; border-color: rgba(5,150,105,0.30); background: #ECFDF5; font-weight: 700; }
[data-theme="light"] .tb-conn.offline { color: #9F1239; border-color: rgba(220,38,38,0.28); background: #FFF0F3; font-weight: 700; }

/* ── قائمة اللغة المنسدلة ── */
.tb-lang-wrap { position: relative; }
.tb-lang-dd {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 130px;
  border-radius: 12px;
  padding: 5px;
  z-index: 99999;
  display: none;
  flex-direction: column;
  gap: 2px;
}
.tb-lang-dd.open { display: flex; }

[data-theme="dark"]  .tb-lang-dd { background: #1a2035; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 8px 28px rgba(0,0,0,0.4); }
[data-theme="light"] .tb-lang-dd { background: #ffffff; border: 1px solid rgba(12,15,36,0.10); box-shadow: 0 8px 32px rgba(12,15,36,0.14), 0 2px 8px rgba(12,15,36,0.06); }

.tb-lang-dd button {
  width: 100%;
  text-align: right;
  padding: 8px 12px;
  border-radius: 8px;
  font-family: Cairo, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: none;
  transition: background 0.1s;
}
[data-theme="dark"]  .tb-lang-dd button       { color: #E5E7EB; }
[data-theme="dark"]  .tb-lang-dd button:hover  { background: rgba(255,255,255,0.08); }
[data-theme="dark"]  .tb-lang-dd button.active { background: rgba(79,110,247,0.2); color: #93C5FD; }
[data-theme="light"] .tb-lang-dd button        { color: #0C0F24; font-weight: 600; }
[data-theme="light"] .tb-lang-dd button:hover  { background: #F5F2EC; }
[data-theme="light"] .tb-lang-dd button.active { background: #EEF2FF; color: #2A3068; }


/* ── زر الإشعارات ── */
.tb-notif-wrap { position: relative; }
.tb-pill-notif {
  position: relative;
  border-radius: 50%;
  width: 34px; height: 34px;
  padding: 0;
  justify-content: center;
}
.tb-notif-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 16px; height: 16px;
  border-radius: 50px;
  font-size: 9px;
  font-weight: 800;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
  font-family: Cairo, sans-serif;
}
[data-theme="dark"]  .tb-pill-notif { background: rgba(79,110,247,0.12); color: #93C5FD; border-color: rgba(79,110,247,0.2); }
[data-theme="dark"]  .tb-pill-notif:hover { background: rgba(79,110,247,0.22); }
[data-theme="dark"]  .tb-notif-badge { background: #EF4444; color: #fff; border: 1.5px solid #0d1117; }
[data-theme="light"] .tb-pill-notif { background: #EEF2FF; color: #2A3068; border-color: rgba(67,97,238,0.25); }
[data-theme="light"] .tb-pill-notif:hover { background: #E0E7FF; color: #1E30A8; }
[data-theme="light"] .tb-notif-badge { background: #DC2626; color: #fff; border: 1.5px solid #fff; }

.tb-notif-dd {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 300px;
  border-radius: 14px;
  padding: 6px;
  z-index: 99999;
  display: none;
  flex-direction: column;
  max-height: 360px;
  overflow-y: auto;
}
.tb-notif-dd.open { display: flex; }
[data-theme="dark"]  .tb-notif-dd { background: #1a2035; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 8px 28px rgba(0,0,0,0.5); }
[data-theme="light"] .tb-notif-dd { background: #ffffff; border: 1px solid rgba(12,15,36,0.10); box-shadow: 0 8px 32px rgba(12,15,36,0.16), 0 2px 8px rgba(12,15,36,0.06); }

.tb-notif-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px 6px;
  font-size: 12px; font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  margin-bottom: 4px;
}
[data-theme="light"] .tb-notif-header { border-color: rgba(12,15,36,0.08); color: #0C0F24; }
[data-theme="dark"]  .tb-notif-header { color: #E5E7EB; }

.tb-notif-count {
  background: #EF4444; color: #fff;
  border-radius: 50px; padding: 1px 7px;
  font-size: 10px; font-weight: 800;
}

.tb-notif-empty {
  padding: 18px 10px;
  text-align: center;
  font-size: 12px;
}
[data-theme="dark"]  .tb-notif-empty { color: #6B7280; }
[data-theme="light"] .tb-notif-empty { color: #9CA3AF; }

.tb-notif-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  margin-bottom: 3px;
}
.tb-notif-danger  { background: rgba(239,68,68,0.1); }
.tb-notif-warning { background: rgba(245,158,11,0.1); }
[data-theme="light"] .tb-notif-danger  { background: rgba(239,68,68,0.07); }
[data-theme="light"] .tb-notif-warning { background: rgba(245,158,11,0.07); }
.tb-notif-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.tb-notif-body { flex: 1; min-width: 0; }
.tb-notif-title { font-size: 11.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-notif-sub   { font-size: 10.5px; margin-top: 2px; }
[data-theme="dark"]  .tb-notif-title { color: #E5E7EB; }
[data-theme="dark"]  .tb-notif-sub   { color: #9CA3AF; }
[data-theme="light"] .tb-notif-title { color: #0C0F24; }
[data-theme="light"] .tb-notif-sub   { color: #6771A8; }

.tb-notif-dismiss {
  flex-shrink: 0;
  align-self: center;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
  font-family: Cairo, sans-serif;
}
.tb-notif-dismiss:hover {
  opacity: 1;
  border-color: rgba(239,68,68,0.4);
}
[data-theme="dark"]  .tb-notif-dismiss { color: #9CA3AF; }
[data-theme="dark"]  .tb-notif-dismiss:hover { background: rgba(239,68,68,0.15); color: #F87171; }
[data-theme="light"] .tb-notif-dismiss { color: #6B7280; }
[data-theme="light"] .tb-notif-dismiss:hover { background: rgba(239,68,68,0.08); color: #EF4444; }

/* ================================================================
   تعديلات السايدبار — إخفاء العناصر المنقولة للتوب بار
   ================================================================ */

/* إخفاء اللغة والثيم من السايدبار (أول عنصر في .nav) */
.nav > div:first-child { display: none !important; }

/* إخفاء اسم المتجر وموقعه من السايدبار */
[style*="overflow: hidden"][style*="flex: 1"],
[style*="overflow:hidden"][style*="flex:1"] { display: none !important; }

[style*="overflow: hidden"] div[style*="fontSize: 14"],
[style*="overflow:hidden"]  div[style*="fontSize: 14"],
[style*="textOverflow"] { display: none !important; }

[style*="width: 248px"] > div:first-child > div:last-child,
[style*="width:248px"]  > div:first-child > div:last-child,
[style*="width: 248"]   > div:first-child > div:nth-child(2),
[style*="flexShrink: 0"] > div:first-child > div:nth-child(2),
[style*="position: sticky"] > div:first-child > div:last-child { display: none !important; }

/* ================================================================
   MOBILE RESPONSIVE — topbar.css
   ================================================================ */
@media (max-width: 768px) {

  /* التوب بار — ضغط وتبسيط على الموبايل */
  .top-bar {
    padding: 8px 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* إخفاء الساعة والفاصل والاتصال على الموبايل — توفير مساحة */
  .tb-time,
  .tb-sep,
  .tb-conn { display: none !important; }

  /* أزرار الإجراءات — أصغر حجماً */
  .tb-action-btn {
    padding: 6px 10px;
    font-size: 11px;
  }

  /* الـ pills — أيقونة فقط بدون نص */
  .tb-pill-logout span,
  .tb-pill-globe #tb-lang-label { display: none; }

  .tb-pill-globe { padding: 6px 8px; }
  .tb-pill-logout { padding: 6px 8px; }

  /* أزرار الإجراءات السريعة — اختصار للأيقونة فقط */
  .tb-action-btn svg { width: 16px; height: 16px; }

  /* قائمة اللغة */
  .tb-lang-dd { left: auto; right: 0; }

  /* قائمة الإشعارات — أصغر على الموبايل */
  .tb-notif-dd { width: 260px; left: auto; right: -60px; }

  /* مؤشر الاتصال — مخفي */
  #tb-conn { display: none !important; }
}