/* ============================================================
   🧭 نظام التنقل المتكيف — Adaptive Navigation
   نبراسي v6 | Mobile-First
   ============================================================
   - الجوال (< 768px):  شريط سفلي ثابت (Bottom Navigation Bar)
   - التابلت والكمبيوتر (≥ 768px): شريط جانبي (Sidebar)
   ============================================================ */

/* ─────────────────────── المتغيرات المحلية للتنقل ─────────────────────── */
:root {
  /* ألوان الشريط الجانبي */
  --nav-sidebar-bg:          var(--color-navy);
  --nav-sidebar-text:        rgba(255, 255, 255, 0.75);
  --nav-sidebar-text-hover:  rgba(255, 255, 255, 0.95);
  --nav-sidebar-active-bg:   rgba(201, 162, 75, 0.18);
  --nav-sidebar-active-text: var(--color-accent);
  --nav-sidebar-active-bar:  var(--color-accent);

  /* ألوان الشريط السفلي */
  --nav-bottom-bg:           var(--color-surface);
  --nav-bottom-text:         var(--color-text-muted);
  --nav-bottom-active-text:  var(--color-primary);
  --nav-bottom-active-bg:    rgba(27, 75, 67, 0.08);
}

/* ─────────────────────── الشريط السفلي (جوال) ─────────────────────── */
.bottom-nav {
  position: fixed;
  bottom: 0;
  inset-inline-start: 0;     /* خاصية منطقية بدلاً من left */
  inset-inline-end: 0;       /* خاصية منطقية بدلاً من right */
  z-index: var(--z-nav);
  height: var(--bottom-nav-height);
  background: var(--nav-bottom-bg);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 16px rgba(27, 75, 67, 0.06);
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  /* انتقال ناعم للإخفاء عند ظهور لوحة المفاتيح */
  transition: transform var(--transition-base);
}

/* إخفاء الشريط السفلي عند فتح لوحة المفاتيح على الجوال */
.bottom-nav.nav-hidden-keyboard {
  transform: translateY(calc(100% + env(safe-area-inset-bottom)));
}

/* كل زر تنقل في الشريط السفلي */
.bottom-nav .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 1;
  padding: var(--space-1) var(--space-2);
  color: var(--nav-bottom-text);
  text-decoration: none;
  font-family: var(--font-utility);
  font-size: 0.68rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  margin: var(--space-1);
  transition:
    color var(--transition-fast),
    background var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.bottom-nav .nav-item .icon {
  font-size: 1.3rem;
  line-height: 1;
  transition: transform var(--transition-spring);
}

.bottom-nav .nav-item .nav-label {
  display: block;
  line-height: 1;
}

/* الحالة النشطة للشريط السفلي */
.bottom-nav .nav-item.active,
.bottom-nav .nav-item[aria-selected="true"] {
  color: var(--nav-bottom-active-text);
  background: var(--nav-bottom-active-bg);
  font-weight: 700;
}

.bottom-nav .nav-item.active .icon,
.bottom-nav .nav-item[aria-selected="true"] .icon {
  transform: translateY(-2px) scale(1.1);
}

/* تأثير النقر (Ripple) */
.bottom-nav .nav-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-primary);
  opacity: 0;
  border-radius: inherit;
  transition: opacity var(--transition-fast);
}
.bottom-nav .nav-item:active::after {
  opacity: 0.06;
}

/* التركيز عبر لوحة المفاتيح */
.bottom-nav .nav-item:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

/* ─────────────────────── الشريط الجانبي (تابلت/كمبيوتر) ─────────────────────── */
.sidebar-nav {
  display: none; /* مخفي بشكل افتراضي، يظهر عند >= 768px */
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--nav-sidebar-bg);
  z-index: var(--z-sidebar);
  overflow-y: auto;
  overflow-x: hidden;
  /* تمرير سلس بدون شريط التمرير المرئي */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
  transition: width var(--transition-base);
}

.sidebar-nav::-webkit-scrollbar        { width: 4px; }
.sidebar-nav::-webkit-scrollbar-track  { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb  { background: rgba(255,255,255,0.15); border-radius: 4px; }

/* ترويسة الشريط الجانبي */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4) var(--space-5);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: var(--space-3);
}

.sidebar-brand .brand-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
}

.sidebar-brand .brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
}

/* مجموعة عناصر التنقل */
.sidebar-nav-group {
  padding: 0 var(--space-3);
  flex: 1;
}

/* كل زر/رابط تنقل في الشريط الجانبي */
.sidebar-nav .nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: var(--nav-sidebar-text);
  text-decoration: none;
  font-family: var(--font-utility);
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-1);
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    padding-inline-start var(--transition-fast);
  white-space: nowrap;
  overflow: hidden;
  /* خط جانبي للحالة النشطة */
  border-inline-start: 3px solid transparent;
  position: relative;
}

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

.sidebar-nav .nav-item .icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}

.sidebar-nav .nav-item .nav-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* الحالة النشطة للشريط الجانبي */
.sidebar-nav .nav-item.active,
.sidebar-nav .nav-item[aria-selected="true"] {
  background: var(--nav-sidebar-active-bg);
  color: var(--nav-sidebar-active-text);
  font-weight: 700;
  border-inline-start-color: var(--nav-sidebar-active-bar);
}

.sidebar-nav .nav-item.active .icon,
.sidebar-nav .nav-item[aria-selected="true"] .icon {
  filter: drop-shadow(0 0 6px rgba(201,162,75,0.6));
}

/* التركيز لوحة المفاتيح */
.sidebar-nav .nav-item:focus-visible {
  outline: var(--focus-ring);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

/* ─────────────────────── القائمة المنسدلة لتبديل حالة الشريط ─────────────────────── */
.sidebar-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  border: none;
  transition: background var(--transition-fast);
  flex-shrink: 0;
}
.sidebar-toggle-btn:hover { background: rgba(255,255,255,0.14); }

/* ─────────────────────── Skeleton Loaders ─────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-surface-2) 0%,
    var(--color-surface-3) 50%,
    var(--color-surface-2) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

.skeleton-card {
  height: 140px;
  border-radius: var(--radius-md);
}

.skeleton-line {
  height: 14px;
  width: 100%;
  margin-bottom: var(--space-2);
}
.skeleton-line.w-3\/4 { width: 75%; }
.skeleton-line.w-1\/2 { width: 50%; }
.skeleton-line.w-1\/3 { width: 33%; }

.skeleton-title {
  height: 20px;
  width: 60%;
  margin-bottom: var(--space-3);
}

/* ─────────────────────── شريط التقدم العلوي (Loading Bar) ─────────────────────── */
.loading-bar {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-primary-light));
  z-index: calc(var(--z-toast) + 1);
  transform-origin: right;
  animation: loadingBar 1.2s ease-in-out infinite;
}

[dir="ltr"] .loading-bar { transform-origin: left; }

@keyframes loadingBar {
  0%   { transform: scaleX(0);   opacity: 1; }
  60%  { transform: scaleX(0.85); opacity: 1; }
  100% { transform: scaleX(1);   opacity: 0; }
}

/* ─────────────────────── صفحة Offline ─────────────────────── */
.offline-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-6);
  text-align: center;
  background: var(--color-bg);
}

.offline-icon {
  font-size: 4rem;
  line-height: 1;
}

.offline-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}

.offline-desc {
  font-family: var(--font-body);
  color: var(--color-text-muted);
  max-width: 320px;
  line-height: 1.7;
}

/* ─────────────────────── التنقل بالوضع المتكيف (Responsive) ─────────────────────── */
@media (min-width: 768px) {
  /* إخفاء الشريط السفلي وإظهار الشريط الجانبي */
  .bottom-nav  { display: none; }
  .sidebar-nav { display: flex; }

  /* تعديل .app-shell ليصبح أفقياً */
  .app-shell {
    flex-direction: row !important;
    align-items: stretch;
  }

  /* مسافة السفلي لا حاجة لها على التابلت+ */
  .view {
    padding-bottom: var(--space-7) !important;
  }
}

@media (min-width: 1024px) {
  .sidebar-nav {
    width: var(--sidebar-width);
  }
}

/* ─────────────────────── live regions للإعلانات (a11y) ─────────────────────── */
.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;
}

#nav-announcer {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}