/* ============================================================================
 * AqaR Digital — App Shell (Phase 2A)
 * ----------------------------------------------------------------------------
 * الهيكل الدائم للمنصة: Header علوي + Sidebar يمين + مساحة محتوى.
 *   - #mainContainer الحالي هو مساحة المحتوى نفسها (لم يُلف بغلاف جديد —
 *     كي تبقى كل عمليات appendChild الديناميكية القائمة سليمة).
 *   - .aq-header / .aq-sidebar شقيقان له، يظهران فقط مع body.aq-app-on
 *     (تُضاف في showApp بعد نجاح الدخول/استعادة الجلسة — عرض فقط، لا منطق).
 *   - #appNav المُنتقل إلى السايدبار يحتفظ بكل عناصره وids ومعالجاته كما هي.
 *   - كل الطبقات تحت المودالات القائمة (1600+) — انظر خريطة z في aqar-tokens.css.
 * ==========================================================================*/

/* ------------------------------------------------------- GLOBAL TOP HEADER
 * الهوية الجديدة: هيدر أبيض عريض يحمل التنقّل الأساسي للتطبيق كله.
 * السايدبار الجانبي لم يعد التنقّل الأساسي — التنقّل الوحيد الكانوني هنا،
 * وبنفس عناصر #appNav وnavIds القائمة (نفس منطق الصلاحيات بلا أي تغيير).
 * التخطيط ltr عمدًا (شعار يسار · تنقّل وسط · هاتف يمين) كما في المرجع،
 * مع بقاء كل نص عربي بسلوكه الطبيعي داخل عناصره. */
.aq-header {
  display: none;
  position: fixed; top: 0; right: 0; left: 0; height: var(--aq-header-h);
  z-index: var(--aq-z-shell-header);
  direction: ltr;
  background: var(--aq-prop-surface, #fff);
  border-bottom: 1px solid var(--aq-prop-border, #E3E6E5);
  box-shadow: 0 1px 3px rgba(11,40,33,0.06);
  align-items: center; gap: var(--aq-space-4);
  padding: 0 var(--aq-space-5);
}
body.aq-app-on .aq-header { display: flex; }

/* ---- شعار AqaR Digital: DIGITAL فوق Real Estate (قفل هوية واحد) ---- */
.aq-brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; text-decoration: none; }
.aq-brand-mark {
  width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto;
  background: linear-gradient(140deg, var(--aq-prop-green, #0E5446) 0%, var(--aq-prop-green-ink, #023A3A) 100%);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: var(--aq-fw-black); font-size: var(--aq-fs-body-lg);
  letter-spacing: 0.5px;
}
.aq-brand-lockup { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.aq-brand-word {
  font-size: 20px; font-weight: var(--aq-fw-black); letter-spacing: 0.16em;
  color: var(--aq-prop-text, #16211E); text-transform: uppercase;
}
.aq-brand-sub {
  font-size: 10px; font-weight: var(--aq-fw-bold); letter-spacing: 0.30em;
  color: var(--aq-prop-green, #0E5446); text-transform: uppercase; margin-top: 3px;
}

/* ---- التنقّل الأساسي داخل الهيدر ---- */
.aq-header #appNav {
  display: flex; align-items: center; gap: 2px;
  /* الهيدر نفسه ltr (شعار يسار · هاتف يمين)، أما التنقّل فعربي: direction: rtl
     يجعل أول عنصر في الـ DOM هو الأيمن بصريًا — بلا عكس ترتيب الـ DOM. */
  direction: rtl;
  flex: 1 1 auto; justify-content: center; flex-wrap: nowrap;
  margin: 0; padding: 0; border: none; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
}
.aq-header #appNav::-webkit-scrollbar { display: none; }
.aq-header #appNav .app-nav-btn {
  flex: 0 0 auto; width: auto; max-width: none; min-width: 0;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 13px; border-radius: var(--aq-radius-pill);
  background: transparent; border: 1px solid transparent;
  color: var(--aq-prop-text, #16211E);
  font-family: var(--aq-font); font-size: var(--aq-fs-button); font-weight: var(--aq-fw-bold);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background var(--aq-motion-base), color var(--aq-motion-base), border-color var(--aq-motion-base);
}
.aq-header #appNav .app-nav-btn svg { width: 17px; height: 17px; flex: 0 0 auto; opacity: 0.85; }
.aq-header #appNav .app-nav-btn:hover {
  background: var(--aq-prop-green-soft, #E4EDEA); color: var(--aq-prop-green, #0E5446);
}
.aq-header #appNav .app-nav-btn.is-active {
  background: var(--aq-prop-green-soft, #E4EDEA);
  border-color: var(--aq-prop-green-line, #BFD8CF);
  color: var(--aq-prop-green, #0E5446);
}
.aq-header #appNav .app-nav-btn:focus-visible { outline: var(--aq-focus-outline); outline-offset: 2px; }

/* ---- طرف الهيدر: هوية المستخدم · خروج · زر الهاتف ---- */
.aq-header-end { display: flex; align-items: center; gap: var(--aq-space-3); flex: 0 0 auto; }
.aq-header-identity { display: flex; align-items: center; gap: var(--aq-space-2); min-width: 0; }
.aq-header-identity .aq-id-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.3; min-width: 0; }
.aq-header-identity .aq-id-name {
  font-size: var(--aq-fs-caption); font-weight: var(--aq-fw-bold); color: var(--aq-prop-text, #16211E);
  max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aq-header-identity .aq-id-role { font-size: var(--aq-fs-caption-sm); color: var(--aq-prop-green, #0E5446); font-weight: var(--aq-fw-medium); }
.aq-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; overflow: hidden;
  background: var(--aq-prop-green-soft, #E4EDEA); border: 1px solid var(--aq-prop-green-line, #BFD8CF);
  display: flex; align-items: center; justify-content: center;
  color: var(--aq-prop-green, #0E5446); font-weight: var(--aq-fw-black); font-size: var(--aq-fs-body);
}
.aq-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* زر الخروج — نفس id ونفس المعالج القائم، بشكل أيقوني داخل الهيدر */
.aq-side-logout {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 11px; border-radius: var(--aq-radius-sm);
  background: transparent; border: 1px solid var(--aq-prop-border, #E3E6E5);
  color: var(--aq-prop-text-muted, #6E7573); font-family: var(--aq-font);
  font-size: var(--aq-fs-caption); font-weight: var(--aq-fw-bold); cursor: pointer;
  transition: border-color var(--aq-motion-base), color var(--aq-motion-base), background var(--aq-motion-base);
}
.aq-side-logout span { display: none; }
.aq-side-logout:hover { border-color: var(--aq-danger-border); color: var(--aq-danger-soft); background: var(--aq-danger-tint); }
.aq-side-logout svg { width: 17px; height: 17px; }
.aq-side-logout:focus-visible, .aq-menu-toggle:focus-visible { outline: var(--aq-focus-outline); outline-offset: 2px; }

/* زر الهاتف (أقصى اليمين) — الرقم الرسمي المستخدم في أصل الغلاف الخاص بالشركة */
.aq-phone-cta {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  padding: 11px 18px; border-radius: var(--aq-radius-pill);
  background: var(--aq-prop-green-deep, #004C43); color: #fff; text-decoration: none;
  font-size: var(--aq-fs-button); font-weight: var(--aq-fw-black); letter-spacing: 0.2px;
  white-space: nowrap; direction: ltr;
  transition: background var(--aq-motion-base), transform var(--aq-motion-fast);
  box-shadow: 0 2px 10px rgba(0,76,67,0.20);
}
.aq-phone-cta:hover { background: var(--aq-prop-green-ink, #023A3A); transform: translateY(-1px); }
.aq-phone-cta svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* زر القائمة (موبايل) */
.aq-menu-toggle {
  display: none; background: transparent; border: 1px solid var(--aq-prop-border, #E3E6E5);
  border-radius: var(--aq-radius-sm); color: var(--aq-prop-text, #16211E); cursor: pointer;
  width: 38px; height: 38px; align-items: center; justify-content: center; flex: 0 0 auto;
  transition: border-color var(--aq-motion-base), color var(--aq-motion-base);
}
.aq-menu-toggle:hover { border-color: var(--aq-prop-green, #0E5446); color: var(--aq-prop-green, #0E5446); }
.aq-menu-toggle svg { width: 18px; height: 18px; min-width: 18px; flex: 0 0 18px; }

/* ------------------------------------------------- CONTENT AREA (existing) */
/* #mainContainer مساحة المحتوى: تُزاح عن الهيدر فقط (لا سايدبار بعد الآن). */
body.aq-app-on #mainContainer {
  max-width: none;
  margin: 0;
  padding: var(--aq-content-pad);
  padding-top: calc(var(--aq-header-h) + var(--aq-content-pad));
}
body.aq-app-on #mainContainer > * { max-width: var(--aq-container-max); margin-inline: auto; }

/* -------------------------------------------- MOBILE NAV PANEL (≤1024px) */
.aq-shell-overlay {
  display: none; position: fixed; inset: 0; z-index: var(--aq-z-shell-overlay);
  background: var(--aq-overlay);
}
@media (max-width: 1024px) {
  .aq-menu-toggle { display: flex; }
  /* التنقّل يتحوّل إلى لوحة منسدلة أسفل الهيدر — لا سايدبار جانبي */
  .aq-header #appNav {
    position: fixed; top: var(--aq-header-h); inset-inline: 0;
    display: none; flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--aq-prop-surface, #fff);
    border-bottom: 1px solid var(--aq-prop-border, #E3E6E5);
    box-shadow: 0 12px 28px rgba(11,40,33,0.12);
    padding: var(--aq-space-3); overflow-y: auto; max-height: calc(100vh - var(--aq-header-h));
    z-index: var(--aq-z-shell-sidebar);
  }
  body.aq-app-on.aq-drawer-open .aq-header #appNav { display: flex; }
  .aq-header #appNav .app-nav-btn {
    width: 100%; justify-content: flex-start; border-radius: var(--aq-radius-sm);
    padding: 12px 14px; direction: rtl; text-align: right;
  }
  body.aq-app-on.aq-drawer-open .aq-shell-overlay { display: block; }
  .aq-header-identity .aq-id-text { display: none; }
  .aq-phone-cta { padding: 10px 14px; }
}
@media (max-width: 640px) {
  .aq-header { padding: 0 var(--aq-space-3); gap: var(--aq-space-2); }
  .aq-brand-word { font-size: 16px; letter-spacing: 0.12em; }
  .aq-brand-sub { font-size: 9px; letter-spacing: 0.22em; }
  .aq-brand-mark { width: 32px; height: 32px; }
  .aq-phone-cta { padding: 9px 11px; font-size: var(--aq-fs-caption); }
  .aq-phone-cta .aq-phone-text { display: none; }
  body.aq-app-on #mainContainer { padding: calc(var(--aq-header-h) + var(--aq-space-3)) var(--aq-space-2) var(--aq-space-3); }
}

@media (prefers-reduced-motion: reduce) {
  .aq-phone-cta { transition: none; }
}

/* ---------------------------------------------------- PAGE HEADER (Phase 3C)
 * هيدر الصفحة الموحّد داخل مساحة المحتوى — يُرسم من ROUTE_REGISTRY (aqar-shell.js).
 * يحل محل عنوان البحث الثابت (.site-header) وعناوين أقسام اللوحة (.dash-page-title) عندما
 * يكون الشِل فعّالًا؛ العناصر القديمة تبقى في الـ DOM (بلا تغيير markup/JS) وتُخفى فقط. */
body.aq-app-on .site-header,
body.aq-app-on #dashboardView .dash-page-title { display: none; }

.aq-page-header {
  display: none;
  align-items: flex-end; justify-content: space-between; gap: var(--aq-space-4);
  margin: var(--aq-space-1) 0 var(--aq-space-4);
  padding-bottom: var(--aq-space-3);
  border-bottom: 1px solid var(--aq-border-accent);
}
body.aq-app-on .aq-page-header:not([hidden]) { display: flex; }
.aq-page-header-main { min-width: 0; flex: 1 1 auto; }
.aq-page-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--aq-space-1) var(--aq-space-2);
  font-size: var(--aq-fs-caption); color: var(--aq-text-tertiary); margin-bottom: var(--aq-space-1);
}
.aq-page-crumb.is-current { color: var(--aq-gold-soft); }
.aq-page-crumb-sep { color: var(--aq-text-disabled); }
.aq-page-header .aq-page-title {
  margin: 0; font-size: var(--aq-fs-title-lg); font-weight: var(--aq-fw-bold); line-height: var(--aq-lh-tight);
  color: var(--aq-text-primary); padding-inline-start: var(--aq-space-3); border-inline-start: 3px solid var(--aq-gold);
}
.aq-page-subtitle {
  margin: var(--aq-space-1) 0 0; font-size: var(--aq-fs-label); line-height: var(--aq-lh-body);
  color: var(--aq-text-tertiary); max-width: 620px;
}
.aq-page-actions { display: flex; align-items: center; gap: var(--aq-space-2); flex: 0 0 auto; }
@media (max-width: 640px) {
  .aq-page-header { flex-direction: column; align-items: stretch; gap: var(--aq-space-2); margin-bottom: var(--aq-space-3); }
  .aq-page-header .aq-page-title { font-size: var(--aq-fs-section-title); }
  .aq-page-actions { justify-content: flex-start; flex-wrap: wrap; }
}