/* =====================================================================
 *  تەواف — بۆشایی سەلامەت لە سەرەوە (Safe Area)
 * ---------------------------------------------------------------------
 *  کێشەکە: کاتێک مالپەڕەکە وەک ئەپ دادەمەزرێت لەسەر مۆبایل،
 *  ناوەڕۆکەکە دەچێتە ژێر ستاتیس بارەکەی مۆبایل (کات، وایفای،
 *  باتری). ئەنجام: سەرپەڕی مالپەڕ تێکەڵ دەبێت لەگەڵ ستاتیس بار
 *  و بەکارهێنەر ناتوانێت پەنجە لە دوگمەکان بدات.
 *
 *  چارەسەر: هەموو سەرپەڕێک بۆشایی سەرەوەی هەیە کە بەلایەنی
 *  کەمەوە ٢٢ پیکسڵە، و لە ئامێرەکانی نۆچدا زیاتریش دەبێت.
 *
 *  ئەم فایلە دەبێت **دوایین** فایلی CSS بێت.
 * ================================================================== */

:root{
  /* بۆشایی ستاتیس بار — ئەگەر وێبگەڕ نەیزانی، سفر */
  --tw-sat: env(safe-area-inset-top, 0px);
  --tw-sab: env(safe-area-inset-bottom, 0px);
  /* کەمترین بۆشایی — بۆ ئەو ئامێرانەی env ڕاست ناداتەوە */
  --tw-top-min: 14px;
}

/* کاتێک وەک ئەپی دامەزراو کاردەکات، ستاتیس بار زیاتر جێگا دەگرێت */
@media (display-mode: standalone), (display-mode: fullscreen){
  :root{ --tw-top-min: 30px; }
}

/* ---------------------------------------------------------------
   ١ · هەموو سەرپەڕەکان — بۆشایی سەرەوە
   max() بەکاردێت: کامیان گەورەترە، ئەوە دەگیرێت
--------------------------------------------------------------- */
@media (max-width: 900px){
  body.dash-body .dash-topbar,
  .dash-topbar{
    padding-top: max(var(--tw-top-min), calc(var(--tw-sat) + 10px)) !important;
    padding-bottom: 14px !important;
    padding-inline: 14px !important;
    min-height: 60px;
    box-sizing: border-box;
    position: relative;
    z-index: 40;
  }

  .site-header{
    padding-top: max(var(--tw-top-min), calc(var(--tw-sat) + 8px)) !important;
    position: relative;
    z-index: 40;
  }

  /* ستریپی سەرەوە — ئەگەر لە سەرووی هەمووانەوەیە، ئەویش بۆشایی دەوێت */
  .topstrip{
    padding-top: max(var(--tw-top-min), calc(var(--tw-sat) + 6px)) !important;
  }
  /* ئەگەر topstrip هەبوو، سەرپەڕی ژێری ئیتر بۆشایی زیادەی ناوێت */
  .topstrip + .site-header{ padding-top: 8px !important; }
}

/* ---------------------------------------------------------------
   ٢ · دوگمەکانی سەرپەڕ — گەورە و دەستلێدراو
--------------------------------------------------------------- */
@media (max-width: 900px){
  .dash-topbar .icon-btn,
  .site-header .icon-btn{
    /* تێبینی: display دەستکاری ناکەین — ئەگەر دیزاینەکە شاردبێتییەوە،
       شاراوە دەمێنێتەوە. تەنها قەبارەی دەستلێدان گەورە دەکەین. */
    min-width: 44px !important;
    min-height: 44px !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
  }
  /* ناوچەی دەستلێدان فراوان دەکەین بەبێ گۆڕینی دیمەن */
  .dash-topbar .icon-btn::after,
  .site-header .icon-btn::after{
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: inherit;
  }
}

/* ---------------------------------------------------------------
   ٣ · بۆشایی خوارەوە — دوگمەکانی خوارەوە ناوەڕۆک نەشارنەوە
--------------------------------------------------------------- */
@media (max-width: 900px){
  .dash-content{
    padding-bottom: calc(96px + var(--tw-sab)) !important;
  }
  .bottom-nav, .fab-wrap{
    padding-bottom: var(--tw-sab);
  }
}

/* ---------------------------------------------------------------
   ٤ · سایدبار — سەرەوەی ئەویش دەبێت بۆشایی هەبێت
--------------------------------------------------------------- */
@media (max-width: 900px){
  .sidebar{
    padding-top: max(var(--tw-top-min), calc(var(--tw-sat) + 12px)) !important;
  }
}

/* ---------------------------------------------------------------
   ٥ · لاپەڕە تایبەتەکان (جزدان، پرۆفایل، فید…) کە سەرپەڕی خۆیان هەیە
--------------------------------------------------------------- */
@media (max-width: 900px){
  .wl-top, .pf-top, .hdr-app, .app-top{
    padding-top: max(var(--tw-top-min), calc(var(--tw-sat) + 8px)) !important;
  }
}