/* ==========================================================
   Layout — الـ App Shell:
   موبايل  : top bar + bottom navigation
   ديسكتوب : sidebar ثابت (يمين) + top bar
   ========================================================== */
.app { min-height: 100vh; min-height: 100dvh; }

/* ----- Top bar ----- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: var(--sp-3);
  padding-inline: var(--sp-5);
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-block-end: 1px solid var(--c-border);
}
.topbar__title { font-size: var(--fs-lg); font-weight: 800; margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__user { font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; background: var(--c-bg); border-radius: 999px; padding: 4px 14px; }
.topbar .btn { min-height: 40px; padding: 0 var(--sp-3); white-space: nowrap; font-size: var(--fs-sm); }

/* ----- Sidebar (مخفي على الموبايل) ----- */
.sidebar { display: none; }

/* ----- Bottom nav (موبايل فقط) ----- */
.bottomnav {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 20;
  height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom));
  display: flex;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-block-start: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.06);
  padding-block-end: env(safe-area-inset-bottom);
}

/* ----- روابط التنقل (مشتركة بين sidebar وbottom nav) ----- */
.nav-link {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  min-height: var(--touch);
  color: var(--c-text-muted);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: background 0.15s, color 0.15s;
}
.nav-link[aria-current="page"] { color: var(--c-primary); font-weight: 800; }
.nav-link[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.nav-link__icon { line-height: 1; }
.nav-link__icon svg { width: 22px; height: 22px; }
/* ----- شريط التنقل السفلي (موبايل): أكبر، وفيه hover / تحديد زي الـ sidebar ----- */
.bottomnav {
  /* شريط عايم (floating): كبسولة منفصلة عن حافة الشاشة */
  inset-inline: 12px; bottom: calc(10px + env(safe-area-inset-bottom));
  height: 68px; padding: 6px; gap: 2px; align-items: stretch;
  border: 1px solid rgba(15, 23, 42, 0.07); border-radius: 26px;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16), 0 2px 6px rgba(15, 23, 42, 0.06);
}
.bottomnav .nav-link {
  flex: 1 1 0; min-width: min-content; flex-direction: column; gap: 4px;
  min-height: 0; padding: 4px 2px;
  font-size: clamp(0.64rem, 2.9vw, 0.74rem); font-weight: 700; line-height: 1.2; text-align: center;
  border-radius: 20px;
  transition: background 0.2s var(--ease), color 0.2s, transform 0.15s, box-shadow 0.2s;
}
.bottomnav .nav-link__icon svg { width: 24px; height: 24px; }
/* ----- الكبسولة المتحركة (بتتحط بـ shell.js) ----- */
.bottomnav__pill {
  position: absolute; top: 6px; bottom: 6px; left: 0; width: 0; z-index: 0;
  border-radius: 20px; pointer-events: none; will-change: transform, width;
  background: linear-gradient(180deg, #14b8a6, #0d9488);
  box-shadow: 0 8px 18px rgba(13, 148, 136, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.85s cubic-bezier(0.25, 0.8, 0.25, 1), width 0.85s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.bottomnav.has-pill .nav-link { position: relative; z-index: 1; }
.bottomnav.has-pill .nav-link[aria-current="page"],
.bottomnav.has-pill .nav-link[aria-current="page"]:hover { background: transparent; box-shadow: none; }
/* الكلمة تتحول للأبيض وهي الكبسولة بتوصل، مش قبلها */
.bottomnav.is-sliding .nav-link[aria-current="page"] { animation: nav-label-in 0.6s ease 0.25s both; }
@keyframes nav-label-in { from { color: var(--c-text-muted); } to { color: #fff; } }

.bottomnav .nav-link:hover { background: var(--c-primary-soft); color: var(--c-primary-hover); }
.bottomnav .nav-link:active { transform: scale(0.95); }
.bottomnav .nav-link[aria-current="page"] {
  flex: 1.4; /* العنصر المحدد أعرض شوية عشان الكلمة تتحط جوه الكبسولة */
  background: linear-gradient(180deg, #14b8a6, #0d9488); color: #fff; font-weight: 700;
  box-shadow: 0 8px 18px rgba(13, 148, 136, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.bottomnav .nav-link[aria-current="page"]:hover { background: linear-gradient(180deg, #0d9488, #0f766e); color: #fff; }

/* ----- Content ----- */
.content {
  padding: var(--sp-4) var(--sp-3);
  padding-block-end: calc(var(--bottomnav-h) + var(--sp-5) + env(safe-area-inset-bottom));
  max-width: var(--content-max);
  margin-inline: auto;
}
/* أنيميشن دخول المحتوى: بيشتغل لما الـ guard يخلص (مش وهو مخفي) */
body:not(.is-authing) .content { animation: page-in 0.35s var(--ease) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.page-head { display: flex; flex-direction: column; gap: 2px; margin-block-end: var(--sp-5); }
.page-head h2 { font-size: var(--fs-2xl); font-weight: 800; margin-block-end: 0; }
.page-head p { color: var(--c-text-muted); margin: 0; max-width: 70ch; }

/* ----- Grid بسيط ----- */
.grid { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 899px) {
  :root { --bottomnav-h: 92px; }
  .topbar { padding-inline: var(--sp-3); height: 56px; }
  .topbar .btn { box-shadow: none; }
  .topbar__user { display: none; }
}

/* ===== Desktop ===== */
@media (min-width: 900px) {
  .bottomnav { display: none; }

  .sidebar {
    display: flex; flex-direction: column; gap: var(--sp-1);
    position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 30;
    width: var(--sidebar-w);
    padding: var(--sp-4);
    overflow-y: auto;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    background: radial-gradient(500px 260px at 100% 0%, rgba(20, 184, 166, 0.16), transparent 70%), linear-gradient(180deg, #0b1220 0%, #101a2e 100%);
    color: var(--c-sidebar-text);
  }
  .sidebar__brand {
    display: flex; align-items: center; gap: var(--sp-3);
    font-size: var(--fs-lg); font-weight: 800; color: #fff;
    padding: var(--sp-3) var(--sp-3) var(--sp-5);
    margin-block-end: var(--sp-3);
    border-block-end: 1px solid rgba(255, 255, 255, 0.08);
  }
  .sidebar__brand::before {
    content: ""; flex: none; width: 42px; height: 42px; border-radius: 13px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3.5' width='14' height='17' rx='2'/%3E%3Cpath d='M9 8h2M13 8h2M9 12h2M13 12h2M10 20.5v-4h4v4'/%3E%3C/svg%3E") center / 24px no-repeat, linear-gradient(135deg, #14b8a6, #0d9488);
    box-shadow: 0 6px 16px rgba(13, 148, 136, 0.45);
  }
  .sidebar .nav-link {
    justify-content: flex-start;
    padding-inline: var(--sp-3);
    border-radius: var(--radius);
    font-size: var(--fs-base);
    color: var(--c-sidebar-text);
  }
  .sidebar .nav-link:hover { background: var(--c-sidebar-hover); color: #fff; }
  .sidebar .nav-link[aria-current="page"] {
    background: linear-gradient(180deg, #14b8a6, #0d9488); color: #fff; font-weight: 800;
    box-shadow: 0 6px 16px rgba(13, 148, 136, 0.35);
  }

  .main { margin-inline-start: var(--sidebar-w); }
  .content { padding: var(--sp-6); padding-block-end: var(--sp-6); }
}


/* ==========================================================
   انتقال سلس بين الصفحات (بدل الشاشة البيضا)
   - المتصفحات اللي بتدعم View Transitions: الصفحة الجديدة بتظهر بـ fade ناعم
     والشريط السفلي/الجانبي بيفضلوا ثابتين (الكبسولة هي اللي بتتحرك).
   - باقي المتصفحات: الشل بيتبني فورًا من الجلسة المحفوظة فمفيش بياض.
   ========================================================== */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.28s; animation-timing-function: ease; }
.bottomnav { view-transition-name: bottom-nav; }
.sidebar { view-transition-name: side-nav; }
::view-transition-group(bottom-nav), ::view-transition-group(side-nav) { animation: none; }
::view-transition-old(bottom-nav), ::view-transition-old(side-nav) { display: none; }
::view-transition-new(bottom-nav), ::view-transition-new(side-nav) { animation: none; }

/* شريط تحميل رفيع تحت الـ top bar وإحنا بنتحقق من الجلسة */
.topbar { position: sticky; }
body.is-authing .topbar::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 3px;
  background: linear-gradient(90deg, transparent, #14b8a6, transparent);
  background-size: 40% 100%; background-repeat: no-repeat;
  animation: auth-bar 1.1s ease-in-out infinite;
}
@keyframes auth-bar { from { background-position: 140% 0; } to { background-position: -40% 0; } }