/* =========================================================================
   محاكي قياس — 04-layout.css
   هياكل الصفحات + شريط التبويب السفلي (Bottom Tab Bar)

   ماذا يفعل هذا الملف؟
   1) يحوّل الهيدر العلوي الحالي ‎.dashboard-header‎ (المولَّد من sharedHeader.js)
      إلى شريط تبويب سفلي ثابت بنمط التطبيقات الأصلية — بدون تغيير أي اسم كلاس،
      لأن الـHTML يُبنى داخل قالب نصّي في الـJS ولا يمكن إعادة هيكلته.
   2) يخفي داخل الشريط السفلي كلاً من الشعار ‎.dashboard-logo‎ وحالة الحساب
      ‎.shared-account-status‎ — فمكانهما الطبيعي أصبح شريط التطبيق العلوي.
   3) يوفّر شريط تطبيق علوي اختياري بأسماء جديدة: ‎.app-bar‎ وتوابعه.
   4) يضبط حاويات الصفحات (dashboard / index / quiz / account / subscription)
      مع حشوة سفلية تمنع اختفاء المحتوى خلف الشريط الثابت.
   5) يضيف شريط إجراء لاصق ‎.sticky-action-bar‎ (زر تسليم الاختبار).
   6) يعالج المناطق الآمنة، والوضع الليلي، والشاشات العريضة، والوضع الأفقي.

   التحميل: بعد 03-components.css.
   ⚠️ لا يوجد أي لون مكتوب يدوياً — كل الألوان من 01-tokens.css.
   ========================================================================= */


/* =========================================================================
   1) الغلاف العام للتطبيق  —  .dashboard-app
   ========================================================================= */
.dashboard-app{
  display:flex;
  flex-direction:column;
  min-height:100dvh;
  min-height:100vh;              /* احتياطي للمتصفحات القديمة */
  background:var(--bg);
}


/* =========================================================================
   2) شريط التبويب السفلي  —  .dashboard-header
   نفس العنصر الذي كان هيدراً علوياً، أُعيد وضعه أسفل الشاشة.
   ========================================================================= */
.dashboard-header{
  position:fixed;
  inset-inline:0;
  bottom:0;
  z-index:var(--z-tabbar);

  background:var(--surface);
  box-shadow:var(--sh-nav);

  /* المنطقة الآمنة السفلية (شريط الإيماءات في iOS/Android) */
  padding-bottom:calc(8px + var(--safe-bottom));
  padding-top:6px;
  padding-inline:max(var(--s-2), var(--safe-start));

  /* زجاجية خفيفة عند دعم المتصفح — تسقط بأمان إن لم تُدعم */
  -webkit-backdrop-filter:saturate(150%) blur(12px);
  backdrop-filter:saturate(150%) blur(12px);
}

/* الغلاف الداخلي — يبقى موجوداً في الـJS، نستخدمه للتوسيط */
.dashboard-header .header-container{
  display:block;
  width:100%;
  max-width:var(--content-max);
  margin-inline:auto;
  padding:0;
}

/* ------------------------------------------------------------------
   الشعار وحالة الحساب: مخفيان داخل الشريط السفلي فقط.
   (الـJS ما زال ينشئهما ويحدّث نصوصهما — لا مشكلة، مجرّد إخفاء بصري)
   ------------------------------------------------------------------ */
.dashboard-header .dashboard-logo,
.dashboard-header .shared-account-status{
  display:none;
}


/* =========================================================================
   3) شبكة التبويبات  —  .dashboard-navigation
   5 أعمدة: 4 روابط + زر الخروج.
   ========================================================================= */
.dashboard-navigation{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  align-items:stretch;
  width:100%;
  gap:2px;
}


/* -------------------------------------------------------------------------
   عنصر التبويب  —  .nav-link  و  .nav-button (زر الخروج)
   أيقونة فوق النص، بارتفاع لمس لا يقل عن 48px.
   ------------------------------------------------------------------------- */
.dashboard-header .nav-link,
.dashboard-header .nav-button{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;

  min-height:var(--tap-min);
  padding:7px 2px 6px;

  font-family:var(--font);
  color:var(--text3);
  text-decoration:none;

  background:transparent;
  border:0;
  border-radius:var(--r-md);

  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color var(--dur) var(--ease),
             background var(--dur) var(--ease),
             transform var(--dur) var(--ease);
}

/* ارتداد لطيف عند الضغط (لا يوجد تحويم في الجوال) */
.dashboard-header .nav-link:active,
.dashboard-header .nav-button:active{ transform:scale(.94); }

.dashboard-header .nav-button:disabled{
  opacity:.5;
  transform:none;
  cursor:not-allowed;
}


/* -------------------------------------------------------------------------
   التبويب النشِط  —  .nav-link.active
   خلفية حبّة خفيفة + مؤشّر 3px أعلى العنصر.
   ------------------------------------------------------------------------- */
.dashboard-header .nav-link.active{
  color:var(--primary);
  background:var(--tint-primary);
}

.dashboard-header .nav-link.active::before{
  content:'';
  position:absolute;
  top:0;
  inset-inline-start:50%;
  transform:translateX(50%);     /* RTL: الإزاحة معكوسة */
  width:26px;
  height:3px;
  background:var(--primary);
  border-radius:var(--r-pill);
}

/* في LTR (لو استُخدم الملف في صفحة إنجليزية) يُصحَّح اتجاه التوسيط */
[dir="ltr"] .dashboard-header .nav-link.active::before{
  transform:translateX(-50%);
}


/* -------------------------------------------------------------------------
   الأيقونة  —  .nav-icon

   ✅ الطريقة الموصى بها: SVG مضمّن داخل القالب (inline) كما في
      snippets/sharedHeader-template.js — عندها ترث الأيقونة لون التبويب
      تلقائياً عبر currentColor، فيتلوّن الرمز والنص معاً عند التفعيل.
   ------------------------------------------------------------------------- */
.dashboard-header .nav-icon{
  width:22px;
  height:22px;
  flex:none;

  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;

  transition:stroke-width var(--dur) var(--ease),
             transform var(--dur) var(--ease),
             opacity var(--dur) var(--ease);
}

.dashboard-header .nav-link.active .nav-icon{
  stroke-width:2.1;
  transform:translateY(-1px);
}

/* ------------------------------------------------------------------
   ⚠️ حالة واحدة يجب الانتباه لها:
   لو أبقيت الأيقونات كصور  <img src="...">  بدل SVG مضمّن، فإن
   currentColor لا يعبر حدود ملف الصورة، وستبقى الأيقونة سوداء بينما
   يتلوّن النص وحده. الحل في تلك الحالة الاعتماد على الشفافية:
   ------------------------------------------------------------------ */
.dashboard-header img.nav-icon{
  object-fit:contain;
  stroke:none;
  opacity:.55;
}
.dashboard-header .nav-link.active img.nav-icon{ opacity:1; }

/* ------------------------------------------------------------------
   بديل ثالث — تلوين صورة أحادية اللون عبر القناع (يعمل مع PNG و SVG):

   .dashboard-header .nav-icon{
     width:22px; height:22px; opacity:1;
     background:currentColor;
     -webkit-mask:var(--icon-url) center / contain no-repeat;
             mask:var(--icon-url) center / contain no-repeat;
   }
   ثم في القالب:  <span class="nav-icon" style="--icon-url:url(assets/icons/test.svg)"></span>
   ------------------------------------------------------------------ */


/* -------------------------------------------------------------------------
   نص التبويب  —  .nav-label  /  .logout-label
   ------------------------------------------------------------------------- */
.dashboard-header .nav-label{
  font-size:10.5px;
  font-weight:var(--fw-semibold);
  line-height:1.25;
  letter-spacing:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

.dashboard-header .nav-link.active .nav-label{
  font-weight:var(--fw-bold);
}

/* زر الخروج — نبرة محايدة، ويتحوّل للأحمر عند الضغط فقط */
.dashboard-header .logout-label{ color:inherit; }
.dashboard-header .nav-button:active{ color:var(--danger); }
.dashboard-header .nav-button:active .nav-icon{ opacity:.85; }


/* =========================================================================
   4) شريط التطبيق العلوي (اختياري)  —  .app-bar
   للصفحات التي تريد إظهار الشعار + حالة الحساب بعد نقلهما من الشريط السفلي.
   أسماء جديدة بالكامل — لا تتعارض مع الـJS الحالي.
   ========================================================================= */
.app-bar{
  position:sticky;
  top:0;
  z-index:var(--z-header);

  display:flex;
  align-items:center;
  gap:var(--s-3);

  min-height:var(--header-h);
  padding-top:calc(10px + var(--safe-top));
  padding-bottom:10px;
  padding-inline:max(var(--page-pad), var(--safe-start))
                 max(var(--page-pad), var(--safe-end));

  background:var(--surface);
  border-bottom:1px solid var(--border);
}

/* الشعار النصّي «محاكي قياس» */
.app-bar-logo{
  display:flex;
  align-items:center;
  gap:var(--s-2);

  font-size:var(--fs-lg);
  font-weight:var(--fw-bold);
  letter-spacing:-.3px;
  color:var(--text);
  text-decoration:none;
  white-space:nowrap;
}

/* العلامة المربّعة الصغيرة بجانب الشعار */
.app-bar-mark{
  width:28px;
  height:28px;
  flex:none;
  display:grid;
  place-items:center;

  font-size:var(--fs-sm);
  font-weight:var(--fw-bold);
  line-height:1;

  color:#fff;
  background:linear-gradient(180deg,var(--primary-light),var(--primary));
  border-radius:var(--r-sm);
  box-shadow:var(--sh-btn-primary);
}

/* -------------------------------------------------------------------------
   حبّة حالة الحساب  —  .app-bar-status
   نفس حالات ‎.shared-account-status‎ بالضبط.
   ------------------------------------------------------------------------- */
.app-bar-status,
.shared-account-status{
  display:inline-flex;
  align-items:center;
  gap:5px;

  margin-inline-start:auto;
  max-width:60%;
  padding:5px 11px;

  font-size:var(--fs-xs);
  font-weight:var(--fw-bold);
  line-height:1.5;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;

  background:var(--surface2);
  color:var(--text2);
  border-radius:var(--r-pill);

  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.app-bar-status .shared-account-status-icon,
.app-bar-status .app-bar-status-icon,
.shared-account-status .shared-account-status-icon{
  flex:none;
  font-size:11px;
  line-height:1;
}

.app-bar-status .shared-account-status-text,
.app-bar-status .app-bar-status-text,
.shared-account-status .shared-account-status-text{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* الحالات */
.app-bar-status.is-loading,
.shared-account-status.is-loading{
  background:var(--surface2);
  color:var(--text3);
}

.app-bar-status.is-free,
.shared-account-status.is-free{
  background:var(--tint-primary);
  color:var(--primary);
}

.app-bar-status.is-warning,
.shared-account-status.is-warning{
  background:var(--tint-warning);
  color:var(--gold-text);
}

.app-bar-status.is-active,
.shared-account-status.is-active{
  background:var(--tint-success);
  color:var(--success);
}

.app-bar-status.is-expired,
.shared-account-status.is-expired{
  background:var(--tint-danger);
  color:var(--danger);
}

.app-bar-status.is-unavailable,
.shared-account-status.is-unavailable{
  background:var(--surface2);
  color:var(--text3);
}


/* =========================================================================
   5) حاويات الصفحات
   ‎.dashboard-main‎ · ‎.account-page‎ · ‎.subscription-page‎ · ‎.quiz-main‎
   ‎#home‎ (index.html) · ‎.container‎ (quiz.html) · ‎.page‎ (أداة عامة)

   ⚠️ الأهم: الحشوة السفلية تحسب ارتفاع الشريط الثابت + المنطقة الآمنة
      حتى لا يختفي آخر المحتوى خلف التبويبات.
   ========================================================================= */
.dashboard-main,
.account-page,
.subscription-page,
.quiz-main,
#home,
.container,
.page{
  width:100%;
  max-width:var(--content-max);
  margin-inline:auto;

  padding-top:var(--page-pad);
  padding-inline:max(var(--page-pad), var(--safe-start))
                 max(var(--page-pad), var(--safe-end));
  padding-bottom:calc(var(--tabbar-h) + var(--safe-bottom) + var(--s-6));
}

/* المسافة بين أقسام الصفحة */
.dashboard-main,
.account-page,
.subscription-page,
.quiz-main,
#home,
.page{
  display:flex;
  flex-direction:column;
  gap:var(--section-gap);
}

/* ‎.container‎ في quiz.html تُستخدم لعدّة شاشات متبادلة الإظهار،
   فتُترك كتلة عادية حتى لا تتأثر عناصرها المخفية بالـflex */
.container{ display:block; }
.container > * + *{ margin-top:var(--section-gap); }

/* ‎.dashboard-main‎ داخل غلاف مرن — تأخذ المساحة المتبقية */
.dashboard-app > .dashboard-main{ flex:1 1 auto; }

/* أداة: صفحة بلا حشوة سفلية للتبويبات (شاشات ملء الشاشة) */
.page--flush{ padding-bottom:calc(var(--safe-bottom) + var(--s-6)); }


/* -------------------------------------------------------------------------
   تذييل الصفحة  —  .dashboard-footer
   يوضع فوق الشريط السفلي، لذلك يرث نفس الحشوة الوقائية.
   ------------------------------------------------------------------------- */
.dashboard-footer{
  width:100%;
  max-width:var(--content-max);
  margin-inline:auto;

  padding-top:var(--s-5);
  padding-inline:var(--page-pad);
  padding-bottom:calc(var(--tabbar-h) + var(--safe-bottom) + var(--s-5));

  text-align:center;
  font-size:var(--fs-xs);
  line-height:var(--lh-normal);
  color:var(--text3);
}

/* عند وجود ‎.dashboard-main‎ و‎.dashboard-footer‎ معاً، تكفي حشوة التذييل */
.dashboard-app .dashboard-main{
  padding-bottom:0;
}


/* =========================================================================
   6) كتلة عنوان الصفحة
   ‎.welcome-section‎ · ‎.welcome-content‎ · ‎.account-welcome-section‎
   ترتيب: سطر تمهيدي صغير + عنوان h1 + فقرة هادئة (+ زر اختياري).
   ========================================================================= */
.welcome-section,
.account-welcome-section{
  display:flex;
  flex-direction:column;
  gap:var(--s-4);
  padding:var(--s-2) 0 0;
}

.welcome-content{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
}

/* السطر التمهيدي (اختياري) — نفس مظهر ‎.section-eyebrow‎ في 03 */
.welcome-content .eyebrow,
.welcome-section .section-eyebrow{
  margin:0;
  font-size:10.5px;
  font-weight:var(--fw-bold);
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--text3);
}

.welcome-content h1,
.welcome-section h1{
  margin:0;
  font-size:var(--fs-page);
  font-weight:var(--fw-bold);
  line-height:var(--lh-tight);
  letter-spacing:-.4px;
  color:var(--text);
}

.welcome-content p,
.welcome-section > p{
  margin:0;
  font-size:var(--fs-body);
  line-height:var(--lh-readable);
  color:var(--text2);
  max-width:56ch;
}

/* الزر داخل كتلة الترحيب يبقى بعرض كامل في الجوال، ومحاذياً في الشاشات الأكبر */
@media (min-width:600px){
  .welcome-section{
    flex-direction:row;
    align-items:center;
    gap:var(--s-5);
  }
  .welcome-content{ flex:1 1 auto; }
  .welcome-section > .primary-action-button,
  .welcome-section > .btn{ width:auto; flex:none; }
}


/* =========================================================================
   7) شريط الإجراء اللاصق  —  .sticky-action-bar
   يُستخدم لزر «تسليم الاختبار» ونحوه. يجلس فوق شريط التبويب.
   ========================================================================= */
.sticky-action-bar{
  position:fixed;
  inset-inline:0;
  bottom:calc(var(--tabbar-h) + var(--safe-bottom));
  z-index:calc(var(--z-tabbar) - 1);

  display:flex;
  align-items:center;
  gap:var(--s-3);

  padding:10px max(var(--page-pad), var(--safe-start))
              10px max(var(--page-pad), var(--safe-end));

  background:var(--surface);
  box-shadow:var(--sh-nav);
}

/* المحتوى الداخلي يتوسّط مثل بقية الصفحات */
.sticky-action-bar > *{ min-width:0; }
.sticky-action-bar .btn,
.sticky-action-bar .primary-action-button{ flex:1 1 auto; }

/* معلومة صغيرة على يمين الشريط (عدّاد أسئلة، مؤقّت…) */
.sticky-action-bar .sticky-action-note{
  flex:none;
  font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);
  color:var(--text3);
  font-variant-numeric:tabular-nums;
}

/* -------------------------------------------------------------------------
   نسخة شاشة الاختبار — شريط التبويب مخفي، فيجلس الشريط في القاع مباشرة.
   ------------------------------------------------------------------------- */
.sticky-action-bar--no-tabbar{
  bottom:0;
  padding-bottom:calc(10px + var(--safe-bottom));
}


/* =========================================================================
   8) وضع التركيز أثناء الاختبار
   ‎body.is-quiz-mode‎ أو ‎.hide-tabbar‎ يخفيان شريط التبويب،
   ويُلغى الحجز السفلي في حاويات الصفحة حتى لا تبقى فجوة فارغة.
   ========================================================================= */
body.is-quiz-mode .dashboard-header,
body.hide-tabbar .dashboard-header,
.hide-tabbar .dashboard-header,
.dashboard-header.hide-tabbar{
  display:none;
}

body.is-quiz-mode .dashboard-main,
body.is-quiz-mode .account-page,
body.is-quiz-mode .subscription-page,
body.is-quiz-mode .quiz-main,
body.is-quiz-mode #home,
body.is-quiz-mode .container,
body.is-quiz-mode .page,
body.hide-tabbar .container,
body.hide-tabbar .page{
  padding-bottom:calc(var(--safe-bottom) + var(--s-6));
}

/* مع وجود شريط إجراء لاصق في وضع الاختبار، نترك مساحة له */
body.is-quiz-mode.has-action-bar .container,
body.is-quiz-mode.has-action-bar .quiz-main,
body.is-quiz-mode.has-action-bar .page{
  padding-bottom:calc(72px + var(--safe-bottom) + var(--s-4));
}


/* =========================================================================
   9) الشاشات الأكبر
   ========================================================================= */

/* --- لوحي وما فوق: الشريط يطفو في المنتصف بدل التصاقه بالحواف --- */
@media (min-width:768px){

  .dashboard-header{
    inset-inline:0;
    bottom:0;

    width:calc(100% - (var(--s-4) * 2));
    max-width:560px;
    margin-inline:auto;
    margin-bottom:12px;

    padding-bottom:calc(8px + var(--safe-bottom));
    padding-inline:var(--s-2);

    border-radius:var(--r-xl);
    box-shadow:var(--sh-raise);
  }

  /* حشوة أوسع + مسافة سفلية أكبر بسبب الهامش العائم أسفل الشريط */
  .dashboard-main,
  .account-page,
  .subscription-page,
  .quiz-main,
  #home,
  .container,
  .page{
    padding-top:var(--s-5);
    padding-inline:var(--s-5);
    padding-bottom:calc(var(--tabbar-h) + var(--safe-bottom) + var(--s-8));
  }

  .dashboard-app .dashboard-main{ padding-bottom:0; }

  .dashboard-footer{
    padding-bottom:calc(var(--tabbar-h) + var(--safe-bottom) + var(--s-8));
  }

  .sticky-action-bar{
    bottom:calc(var(--tabbar-h) + var(--safe-bottom) + 12px);
  }
}

/* --- سطح المكتب: نبقي نفس السلوك (شريط عائم) — لا حاجة لتعديل --- */
@media (min-width:1024px){
  .app-bar{ padding-inline:var(--s-5); }
}


/* =========================================================================
   10) الوضع الليلي — حدّ علوي رفيع يفصل الشريط عن المحتوى
   ========================================================================= */
[data-theme="dark"] .dashboard-header{
  border-top:1px solid var(--border);
}

[data-theme="dark"] .sticky-action-bar{
  border-top:1px solid var(--border);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .dashboard-header,
  :root:not([data-theme="light"]) .sticky-action-bar{
    border-top:1px solid var(--border);
  }
}

/* في الوضع العائم (≥768px) الحدّ يحيط بالشريط بالكامل */
@media (min-width:768px){
  [data-theme="dark"] .dashboard-header{
    border:1px solid var(--border);
  }
}


/* =========================================================================
   11) الجوال في الوضع الأفقي (ارتفاع صغير)
   نقلّل ارتفاع الشريط ونخفي النصوص للإبقاء على مساحة قراءة كافية.
   ========================================================================= */
@media (max-height:480px) and (orientation:landscape){

  :root{ --tabbar-h:48px; }

  .dashboard-header{
    padding-top:2px;
    padding-bottom:calc(4px + var(--safe-bottom));
  }

  .dashboard-header .nav-link,
  .dashboard-header .nav-button{
    min-height:40px;
    padding:4px 2px;
    gap:0;
  }

  .dashboard-header .nav-label{ display:none; }

  .dashboard-header .nav-icon{ width:20px; height:20px; }

  .dashboard-header .nav-link.active .nav-icon{ transform:none; }

  .app-bar{
    min-height:44px;
    padding-top:calc(6px + var(--safe-top));
    padding-bottom:6px;
  }

  .dashboard-main,
  .account-page,
  .subscription-page,
  .quiz-main,
  #home,
  .container,
  .page{
    padding-bottom:calc(var(--tabbar-h) + var(--safe-bottom) + var(--s-4));
  }

  .dashboard-app .dashboard-main{ padding-bottom:0; }
}


/* =========================================================================
   12) تفضيل تقليل الحركة
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  .dashboard-header .nav-link,
  .dashboard-header .nav-button,
  .dashboard-header .nav-icon{
    transition:none;
  }
  .dashboard-header .nav-link:active,
  .dashboard-header .nav-button:active{ transform:none; }
  .dashboard-header .nav-link.active .nav-icon{ transform:none; }
}
.app-bar-logo-image {
    width: auto;
    height: 32px;

    max-width: 90px;

    object-fit: contain;

    display: block;

    flex: 0 0 auto;
}

.app-bar-title {
    white-space: nowrap;
}