/* =====================================================================
   ui-fix.css — اصلاح‌های ظاهری سراسری (آخرین شیت بارگذاری‌شده)
   ---------------------------------------------------------------------
   این فایل عمداً بعد از tailwind.css و mobile-fixes.css در App.razor
   لینک شده است تا برای یک تغییر ظاهری، ده‌ها فایل razor دست نخورد.
   ===================================================================== */

/* =====================================================================
   ۱) فاصله‌ی یکسان محتوا از ناوبار — همه‌ی صفحه‌های پنل
   ---------------------------------------------------------------------
   مشکل: ناوبار sticky است و داخل همان container صفحه رندر می‌شود. بعضی
   صفحه‌ها بعد از <SiteNavbar /> یک <br> داشتند و بعضی (همان صفحه‌هایی که
   پنل‌های هوشمند گرفتند) هیچ‌چیز؛ نتیجه‌اش این بود که کارت اول صفحه
   می‌چسبید به ناوبار.
   راه‌حل: <br>ها برداشته شد و فاصله یک‌بار همین‌جا تعریف می‌شود.
   ===================================================================== */
nav.daovi-sticky { margin-bottom: 1.75rem; }

@media (max-width: 640px) {
    nav.daovi-sticky { margin-bottom: 1.15rem; }
}

/* =====================================================================
   ۲) جدول‌ها بدون سایه
   ---------------------------------------------------------------------
   خواسته: «تمامی جدول‌ها سایه دارند، بردار».
   هر کارتی که داخلش جدول است سایه‌اش برداشته می‌شود و به‌جایش یک خط
   یک‌پیکسلی می‌گیرد تا لبه‌ی کارت روی پس‌زمینه‌ی طوسی گم نشود.
   ===================================================================== */
:is(div, section, article)[class*="shadow"]:has(table) {
    box-shadow: none !important;
    border: 1px solid #e6eaf0;
}

table, thead, tbody, tfoot, tr, th, td { box-shadow: none !important; }

/* مرورگر بدون پشتیبانی :has — دست‌کم پوشش‌های رایج جدول */
.table-card, .table-wrap, .overflow-x-auto { box-shadow: none !important; }

/* ---------------------------------------------------------------------
   سایه‌ی باقی‌مانده‌ی جدول‌ها: قاب اسکرول جدول (.tbl-scroll) یک شبه‌عنصر
   ::after داشت که یک نوار گرادیان تیره روی لبه‌ی جدول می‌کشید. در RTL این
   نوار سمت چپ جدول می‌افتد و دقیقاً همان «سایه» است که در تصویر مشخص شد.
   حالا به‌جای سایه، یک خط ۱px برای نشان دادن ادامه‌ی جدول می‌ماند.
   --------------------------------------------------------------------- */
.tbl-scroll::after,
.tbl-scroll::before { content: none !important; background: none !important; box-shadow: none !important; }

/* موبایل: کارت‌های «برچسب: مقدار» که جای جدول را می‌گیرند هم سایه نگیرند */
@media (max-width: 767px) {
    .mob-card { box-shadow: none !important; }
}

/* ردیف و سرستون: هیچ سایه‌ی چسبنده‌ای (sticky) روی سلول‌ها نماند */
thead th, tbody td, tfoot td { text-shadow: none !important; }

/* =====================================================================
   ۲-۱) کادرهای متنی: متن فارسی دیگر بریده و بیرون‌زده نمی‌شود
   ---------------------------------------------------------------------
   مشکل تصویر سوم: در بعضی کادرها (مثل انتخابگر پرونده) نوشته‌ی راهنما از
   کادر بیرون می‌زد و بالای حرف‌ها به لبه‌ی کادر می‌چسبید.
   دو علت داشت:
     • فونت وزیرمتن ارتفاع خط بیشتری از پیش‌فرض input می‌خواهد؛ با
       line-height پیش‌فرضِ مرورگر، بالای «ج» و زیر «ی» بریده می‌شد.
     • متن راهنمای بلند فارسی از عرض کادر بیشتر می‌شد و چون input متن را
       نمی‌شکند، سرریز می‌کرد.
   راه‌حل: ارتفاع خط و حداقل ارتفاع مشخص + سرریز با «…».
   ===================================================================== */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select,
textarea {
    line-height: 1.8;
    min-height: 2.75rem;                 /* ۴۴px: هم‌اندازه‌ی هدف لمس */
    text-overflow: ellipsis;
}

textarea { min-height: 4.5rem; }

/* کادرهای کوچک عمدی (فیلتر داخل جدول، اعداد کوتاه) نباید کشیده شوند */
input.py-1, input.py-1\.5, select.py-1, select.py-1\.5,
input[type="number"].w-20, input.text-xs, select.text-xs {
    min-height: 2.25rem;
    line-height: 1.6;
}

/* نوشته‌ی راهنما: بلندتر از کادر باشد، با سه‌نقطه تمام می‌شود نه با بریدن */
input::placeholder, textarea::placeholder {
    line-height: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 1;
    color: #93a1b5;
}

input::placeholder { white-space: nowrap; }

/* کادر جست‌وجو: آیکن ذره‌بین جای نوشته را می‌گیرد، پس متن راهنما زیر آیکن نرود */
input[type="search"] { -webkit-appearance: none; appearance: none; }

/* =====================================================================
   ۳) نمای گزارش‌گیری مالی و صفحه‌های مالی: کاملاً تخت
   ---------------------------------------------------------------------
   کلاس pas-flat روی ریشه‌ی این صفحه‌ها گذاشته شده است.
   ===================================================================== */
.pas-flat [class*="shadow"] { box-shadow: none !important; }
.pas-flat .bg-white[class*="shadow"] { border: 1px solid #e6eaf0; }

/* =====================================================================
   ۴) دستیار شناور: کوچک‌تر و همیشه پایین‌تر از ناوبار
   ---------------------------------------------------------------------
   مشکل: پنل ۶۸۰پیکسلی از بالا زیر ناوبار می‌رفت (ناوبار z-index=50 و
   پنل ۴۰ است، پس سرِ پنل بریده می‌شد).
   راه‌حل: دکمه و پنل کوچک‌تر شدند و سقف ارتفاع پنل طوری است که هرگز به
   ناوبار نرسد (۱۲rem فضای امن از بالا).
   ===================================================================== */
.pas-chat-widget { bottom: 18px; left: 18px; }

.pas-chat-fab { width: 48px; height: 48px; font-size: 18px; box-shadow: 0 8px 20px rgba(46, 107, 255, .38); }
.pas-chat-fab:hover { box-shadow: 0 10px 24px rgba(46, 107, 255, .48); }

.pas-chat-panel {
    left: 18px;
    bottom: 78px;
    width: min(360px, calc(100vw - 36px));
    height: min(520px, calc(100dvh - 12rem));
    border-radius: 16px;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .14);
}

.pas-chat-panel-head { padding: 9px 12px; }
.pas-chat-panel-title { font-size: 14px; }
.pas-chat-head-btn { width: 34px; min-width: 34px; height: 34px; border-radius: 9px; font-size: 12px; }

/* موبایل: پنل از پایین باز می‌شود و ناوبار بالای صفحه دیده می‌ماند */
@media (max-width: 640px) {
    .pas-chat-widget { bottom: 14px; left: 14px; }
    .pas-chat-panel {
        inset: auto 0 0 0;
        width: 100vw;
        height: calc(100dvh - 4.25rem);
        border-radius: 14px 14px 0 0;
    }
}

/* =====================================================================
   ۵) حالت مهمان دستیار شناور (پاسخ نیمه + دعوت به ورود)
   نشانه‌گذاری این بخش را wwwroot/pas-chat/chat-app.js می‌سازد.
   ===================================================================== */
.pas-guest-cut {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #d9e0ea;
    font-size: 12.5px;
    line-height: 1.9;
    color: #5b6b80;
    direction: rtl;
}

.pas-guest-cut b { color: #1e293b; }

.pas-guest-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

.pas-guest-btn {
    display: inline-block;
    padding: 7px 14px;
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    background: #2e6bff;
    color: #fff;
    border: 1px solid #2e6bff;
}

.pas-guest-btn.is-ghost { background: #fff; color: #33415c; border-color: #dbe3f0; }
.pas-guest-btn:hover { filter: brightness(.96); }

.pas-guest-note {
    margin: 8px 12px;
    padding: 8px 12px;
    border-radius: 10px;
    background: #f4f7ff;
    border: 1px solid #dbe6ff;
    color: #33415c;
    font-size: 12px;
    line-height: 1.9;
    direction: rtl;
}

/* =====================================================================
   ۵) منوی بازشوی کادرهای متنی دیگر روی ناوبار نمی‌افتد
   ---------------------------------------------------------------------
   خواسته: «کادرهایی که با کلیک یک منو زیرشان باز می‌شود، وقتی صفحه را
   اسکرول می‌کنم با ناوبار قاطی می‌شوند و منو می‌رود روی ناوبار.»

   ریشه‌ی باگ دقیقاً در مقیاس لایه‌ها بود:
     ناوبار چسبان  → --z-sticky = ۵۰
     منوی انتخابگر → --z-drawer = ۶۰   (mobile-fixes.css خط ۷۴۷)
   یعنی منو یک لایه بالاتر از ناوبار بود؛ با اسکرول، منو از روی ناوبار
   رد می‌شد و ناوبار نصفه زیرش گم می‌شد.

   راه‌حل: منوها یک لایه «زیر» ناوبار می‌نشینند (۴۵ < ۵۰). حالا با اسکرول،
   ناوبار روی منو می‌آید — همان رفتاری که کاربر از هر سایتی انتظار دارد —
   و هیچ‌جا دو عنصر روی هم نمی‌ریزند.

   نکته: عدد ۴۵ از ۴۰ (چت شناور) بالاتر است، پس منو هنوز روی هر چیز
   دیگری در صفحه می‌افتد و دکمه‌های پایینِ فرم از زیرش دیده نمی‌شوند.
   انتخابگرهای داخل مودال هم آسیب نمی‌بینند: مودال (۱۰۰) بستر مستقل
   لایه‌بندی می‌سازد و منو داخل همان بستر باز می‌شود.
   ===================================================================== */
:root { --z-field-menu: 45; }

.dv-picker,
.dv-picker-menu,
.z-\[60\] {
    z-index: var(--z-field-menu) !important;
}

/* ناوبار چسبان همیشه لایه‌ی برنده است (برای مرورگرهایی که ترتیب شیت‌ها را
   جور دیگری حل می‌کنند، صریح تکرار می‌شود) */
nav.daovi-sticky,
header[data-public-nav] {
    z-index: var(--z-sticky) !important;
}

/* =====================================================================
   ۶) ویرایشگر متن مقاله (Shared/RichTextEditor.razor)
   ---------------------------------------------------------------------
   ظاهر عمداً همان ظاهر کادرهای فرم سامانه است تا در صفحه‌ی «محتوای صفحه
   اصلی» عنصر بیگانه‌ای دیده نشود. ارتفاع کادر با پارامتر Rows می‌آید.
   ===================================================================== */
.dv-rich { display: block; }

.dv-rich-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    padding: .5rem;
    background: #f8fafc;
    border: 1px solid #d1d5db;
    border-bottom: 0;
    border-radius: .5rem .5rem 0 0;
}

.dv-rich-btn {
    min-height: 36px;
    padding: 0 .6rem;
    font-size: .8125rem;
    line-height: 1;
    color: #374151;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: .375rem;
    transition: background-color .15s, border-color .15s, color .15s;
}

.dv-rich-btn:hover:not(:disabled) { background: #eef2ff; border-color: #a5b4fc; color: #4338ca; }
.dv-rich-btn:disabled { opacity: .45; cursor: default; }
.dv-rich-btn[aria-pressed="true"] { background: #4338ca; border-color: #4338ca; color: #fff; }

.dv-rich-sep { width: 1px; align-self: stretch; margin: 0 .15rem; background: #e5e7eb; }

.dv-rich-box {
    padding: .75rem;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 0 0 .5rem .5rem;
    overflow-y: auto;
    max-height: 60vh;
    line-height: 1.9;
    text-align: right;
}

.dv-rich-box:focus { outline: 2px solid #a5b4fc; outline-offset: -2px; }

/* متن داخل کادر همان‌شکلی دیده شود که در صفحه‌ی مقاله دیده می‌شود */
.dv-rich-box h2 { font-size: 1.25rem; font-weight: 800; margin: .85rem 0 .4rem; }
.dv-rich-box h3 { font-size: 1.05rem; font-weight: 700; margin: .75rem 0 .35rem; }
.dv-rich-box p { margin: 0 0 .6rem; }
.dv-rich-box strong { font-weight: 800; }
.dv-rich-box ul, .dv-rich-box ol { margin: 0 1.4rem .6rem 0; padding: 0; }
.dv-rich-box ul { list-style: disc; }
.dv-rich-box ol { list-style: decimal; }
.dv-rich-box li { margin-bottom: .25rem; }

/* کادر خالی: راهنمای «از همین‌جا شروع کنید» تا کاربر با یک مستطیل سفید روبه‌رو نشود */
.dv-rich-box:empty::before {
    content: "متن مقاله را همین‌جا بنویسید…";
    color: #9aa5b5;
}

.dv-rich-src { min-height: 14rem; }

.dv-rich-hint { margin-top: .4rem; font-size: .75rem; line-height: 1.7; color: #6b7280; }

/* =====================================================================
   ۱۰) «دو خطی نشدن» — پوشش کامل، همه‌ی بخش‌ها
   ---------------------------------------------------------------------
   mobile-fixes.css بخش ۶ فقط <button> و .btn را nowrap کرده بود. ولی در
   سامانه چهار الگوی دیگر هم هست که همان مشکل را می‌سازند و پوشش نداشتند:

     • ۱۰۵ لینکِ دکمه‌نما: <a class="px-4 py-2 bg-indigo-600 …"> — از نظر
       مرورگر یک <a> معمولی است، پس متنش می‌شکست («ثبت / درخواست»).
     • ۱۵۷ برچسب و شمارنده: <span class="rounded-full …"> — وضعیت پرونده
       («در انتظار / بررسی») دو خطی می‌شد و ارتفاع ردیف را خراب می‌کرد.
     • ۱۴۳ سرستون جدول: <th> فارسی روی موبایل دو-سه خطی می‌شد.
     • ۲۵۰ ردیف flex justify-between: برچسبِ بلند مقدار را به خط بعد
       می‌فرستاد. علت واقعی نبودِ min-width:0 روی فرزندان flex است.

   قاعده‌ی کلی: چیزی که «نشان» است هرگز نمی‌شکند و در صورت نیاز با «…»
   کوتاه می‌شود؛ چیزی که «متن» است (پاراگراف، توضیح، عنوان بلند) آزاد
   می‌ماند، چون nowrap کردنش باعث بیرون‌زدگی افقی صفحه می‌شود.
   ===================================================================== */

/* ---------- ۱۰-۱) لینک‌های دکمه‌نما ---------- */
/* هر <a> که هم‌زمان padding افقی و عمودی گرفته یعنی دکمه است، نه متن */
a[class*="px-"][class*="py-"],
a[class*="p-2"], a[class*="p-3"],
a.btn, a[role="button"] {
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
    max-width: 100%;
}

/* ولی لینکِ تمام‌عرضِ داخل کارت‌ها و منوها باید متنش بشکند، وگرنه
   عنوان بلند از کادر بیرون می‌زند */
a[class*="px-"][class*="py-"][class*="w-full"] span,
a[class*="px-"][class*="py-"] .dv-wrap,
a.dnav-link {
    white-space: normal;
}

/* ---------- ۱۰-۲) برچسب، نشان و شمارنده ---------- */
span[class*="rounded-full"],
span[class*="rounded-md"][class*="text-xs"],
.badge, .chip, .dnav-count, .dnav-trigger-dot,
td [class*="rounded-full"] {
    white-space: nowrap;
    word-break: keep-all;
    /* عدد فارسی و لاتین در یک نشان کنار هم نلرزند */
    font-variant-numeric: tabular-nums;
}

/* ---------- ۱۰-۳) جدول‌ها ---------- */
th {
    white-space: nowrap;
    word-break: keep-all;
}

/* سلول‌های «کوتاه» (تاریخ، مبلغ، وضعیت، عملیات) هم نشکنند؛
   سلول متنی بلند (عنوان پرونده، توضیح) آزاد است و با .dv-wrap علامت می‌خورد */
td[class*="text-center"],
td[class*="whitespace-nowrap"],
td[class*="tabular"],
td:has(> [class*="rounded-full"]),
td:has(> button),
td:has(> a[class*="px-"]) {
    white-space: nowrap;
}

/* ---------- ۱۰-۴) ردیف‌های flex: علت اصلی شکستن ---------- */
/* فرزند flex پیش‌فرض min-width:auto دارد: کوچک‌تر از محتوایش نمی‌شود، پس
   ردیف را پهن می‌کند و همسایه‌اش را به خط بعد می‌اندازد. با min-width:0
   اجازه‌ی جمع‌شدن می‌گیرد و کوتاه‌سازی (truncate) واقعاً کار می‌کند. */
.flex > *,
.inline-flex > * {
    min-width: 0;
}

/* آیکن، نشان و دکمه‌ی کنارِ ردیف هرگز فشرده نشوند */
.flex > i, .inline-flex > i,
.flex > svg, .inline-flex > svg,
.flex > img, .inline-flex > img,
.flex > [class*="rounded-full"],
.flex > button, .flex > .shrink-0 {
    flex-shrink: 0;
}

/* ---------- ۱۰-۵) کارت‌های آمار ---------- */
/* الگوی «آیکن + برچسب + عدد» حدود ۴۰ جای سامانه تکرار شده و روی ۳۶۰ پیکسل
   برچسبش دو خطی می‌شد («پرونده‌های / فعال»).

   نکته‌ی مهم: انتخابگر عمداً باریک است. اگر «هر p.text-sm داخل کارت» را
   nowrap می‌کردیم، توضیح‌های چندخطی کارت‌ها (که همان کلاس را دارند) با «…»
   بریده می‌شدند. پس فقط برچسبی هدف است که بلافاصله بعدش عدد بیاید —
   یعنی همان الگوی کارت آمار و نه متن توضیحی. */
p:has(+ p[class*="text-2xl"]),
p:has(+ p[class*="text-xl"]),
p:has(+ strong),
.dv-stat-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* عدد کارت آمار: هرگز نشکند و ارقامش هم‌عرض باشد تا ردیف نلرزد */
p[class*="text-2xl"][class*="font-bold"],
p[class*="text-xl"][class*="font-bold"],
.dv-stat-value {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* روی صفحه‌ی خیلی باریک، برچسبِ کارت آمار کوچک‌تر شود تا «…» نخورد */
@media (max-width: 400px) {
    p:has(+ p[class*="text-2xl"]),
    .dv-stat-label { font-size: .78rem; }

    p[class*="text-2xl"][class*="font-bold"] { font-size: 1.35rem; }
}

/* ---------- ۱۰-۶) ردیف زبانه/فیلتر: افقی بلغزد، نشکند ---------- */
/* فیلترهای «همه / باز / بسته» و زبانه‌های صفحه‌ی پرونده روی موبایل به دو
   خط می‌رفتند و چیدمان را جابه‌جا می‌کردند. حالا یک نوار افقی می‌شوند. */
@media (max-width: 640px) {
    .dv-tabs,
    .flex.border-b:not(.flex-col),
    .flex.gap-2.overflow-x-auto,
    .flex.overflow-x-auto:not(.flex-col) {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: 2px;
    }

    .dv-tabs > *,
    .flex.border-b:not(.flex-col) > *,
    .flex.overflow-x-auto:not(.flex-col) > * {
        flex: 0 0 auto;
    }
}

/* ---------- ۱۰-۷) متن‌هایی که باید بشکنند ---------- */
/* nowrap نباید به پاراگراف و عنوان سرایت کند، وگرنه صفحه افقی می‌شود */
p:not(.text-sm):not(:has(+ p[class*="text-2xl"])):not(:has(+ p[class*="text-xl"])),
h1, h2, h3, h4,
.leading-fa, .daovi-prose, .dv-wrap,
textarea, .whitespace-pre-line, .whitespace-normal {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* عنوان بلند در ردیف flex: یک خط با «…» — نه دو خط، نه بیرون‌زدگی */
.dv-ellipsis, .truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* ---------- ۱۰-۸) آخرین ضامن: هیچ‌چیز صفحه را افقی نکند ---------- */
/* اگر جایی nowrap باعث پهن‌شدن شد، خودِ عنصر بلغزد نه کل کاغذ */
@media (max-width: 640px) {
    html, body { overflow-x: hidden; }

    table { display: table; width: 100%; }

    /* عدد و کد رهگیری و شماره پرونده: چسبیده و یک‌خطی */
    .font-mono, [class*="tabular-nums"], .dv-code {
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }
}


/* =====================================================================
   ۱۱) ناوبار زیر نوار وضعیت گوشی می‌نشیند + سربرگ کشو از بالا فاصله دارد
   ---------------------------------------------------------------------
   مشکل (از تصویرهای موبایل): در اپ نصب‌شده (PWA)، نوار وضعیت مشکیِ سیستم
   روی ناوبار می‌افتاد. لوگو و نام سامانه، دکمه‌ی «ورود» و آیکن همبرگری
   از بالا بریده می‌شدند؛ سربرگ کشوی ناوبری هم دقیقاً به لبه‌ی بالای صفحه
   چسبیده بود.

   چرا فقط env(safe-area-inset-top) کافی نبود:
     • viewport-fit=cover در App.razor روشن است، پس روی آیفون env درست
       کار می‌کند و بریدگی صفحه را برمی‌گرداند.
     • در اندروید و کرومِ نصب‌شده، env همیشه 0px است — حتی وقتی نوار وضعیت
       واقعاً روی محتواست. پس شرط‌گذاشتن روی env تنها، در اندروید هیچ
       فاصله‌ای نمی‌ساخت.

   راه‌حل: یک متغیر که کفِ ثابت دارد و max() هرکدام بزرگ‌تر بود را می‌گیرد.
   کفِ ثابت فقط در حالت «اپ نصب‌شده» فعال است؛ در تبِ معمولی مرورگر خودِ
   مرورگر نوار آدرس دارد و فاصله‌ی اضافه لازم نیست.
   تنظیم دستی: کافی است همین دو عدد پایین را کم و زیاد کنید.
   ===================================================================== */
:root {
    /* فاصله‌ی «ناحیه‌ی امن» بالای صفحه */
    --daovi-safe-top: env(safe-area-inset-top, 0px);
    /* نفس‌کشیدن ناوبار از لبه — مستقل از نوار وضعیت */
    --daovi-navbar-gap: 6px;
}

@media (display-mode: standalone), (display-mode: minimal-ui),
       (display-mode: fullscreen), (display-mode: window-controls-overlay) {
    :root { --daovi-safe-top: max(env(safe-area-inset-top, 0px), 30px); }
}

/* ---------------------------------------------------------------------
   ‏manifest: حالت "window-controls-overlay" برداشته شد
   ---------------------------------------------------------------------
   این مقدار اولِ display_override بود و کروم با آن، اپ را داخل ناحیه‌ی
   نوار عنوان رندر می‌کند — یعنی محتوا عمداً زیر نوار سیستم می‌رود. حالا
   اپ standalone خالص است و سیستم خودش برای نوار وضعیت جا باز می‌کند و
   آن را با theme_color (‎#4f46e5‎) رنگ می‌زند.
   تغییر manifest تا نصب دوباره‌ی اپ اعمال نمی‌شود؛ قاعده‌ی زیر تا آن موقع
   پوشش می‌دهد و بعد هم برای دسکتاپِ WCO سالم می‌ماند.
   --------------------------------------------------------------------- */
@media (display-mode: window-controls-overlay) {
    :root { --daovi-safe-top: max(env(safe-area-inset-top, 0px), env(titlebar-area-height, 0px), 38px); }
}

/* ---------- ۱۱-۱) هر دو ناوبار: پنل و صفحه‌های عمومی ---------- */
/* هر دو  sticky top-0  هستند، پس پدینگ بالا همان چیزی است که آن‌ها را از
   زیر نوار وضعیت بیرون می‌کشد. پس‌زمینه‌ی خودِ ناوبار سفید است، بنابراین
   این فاصله «نوار خالی» نمی‌سازد و ناوبار بلندتر دیده می‌شود، نه شکسته. */
@media (max-width: 767px) {
    nav.daovi-sticky,
    header[data-public-nav] {
        padding-top: calc(var(--daovi-safe-top) + var(--daovi-navbar-gap));
    }
}

/* ---------- ۱۱-۲) سربرگ کشوی ناوبری موبایل ---------- */
/* .dnav خودش  position: fixed; top: 0  است، پس ناحیه‌ی امن را باید سربرگش
   جبران کند. عدد ۱۴px همان پدینگ عادی سربرگ است که نباید قربانی شود. */
.dnav-head {
    padding-top: calc(var(--daovi-safe-top) + 14px) !important;
}

/* دکمه‌ی بستن و لوگوی داخل سربرگ کشو در یک خط و بدون کشیدگی */
.dnav-head .dnav-brand span { overflow: hidden; text-overflow: ellipsis; }

/* ---------- ۱۱-۳) کشوی ناوبار عمومی داخل <header> ---------- */
/* پدینگ بالای هدر را به ارث می‌برد (درست)، ولی باید مطمئن شویم در گوشی‌های
   کوتاه از صفحه بیرون نمی‌زند: خودش می‌لغزد، نه کل صفحه. */
@media (max-width: 767px) {
    [data-public-nav] #public-mobile-nav {
        max-height: calc(100vh - 4rem - var(--daovi-safe-top));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
}
@supports (max-height: 100dvh) {
    @media (max-width: 767px) {
        [data-public-nav] #public-mobile-nav {
            max-height: calc(100dvh - 4rem - var(--daovi-safe-top));
        }
    }
}

/* ---------- ۱۱-۴) ردیف آیکن‌های موبایلِ ناوبار پنل ---------- */
/* زنگ اعلان، راهنما و همبرگری: هم‌قد، وسط‌چین و با هدف لمس ۴۴ پیکسل.
   (اندازه‌ی نشانِ عدد اعلان دست‌نخورده مانده — در app.css درست است.) */
@media (max-width: 767px) {
    nav.daovi-sticky .dnav-trigger {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        position: relative;
        flex: 0 0 auto;
    }
    nav.daovi-sticky .dnav-trigger svg { width: 22px; height: 22px; }
    /* ردیف ناوبار در موبایل کمی جمع‌تر تا با پدینگ جدید دوقدی نشود */
    nav.daovi-sticky .py-4 { padding-block: .6rem; }
}

/* ---------- ۱۱-۵) دکمه‌ی «ورود» و نام کاربر در ناوبار عمومی ---------- */
/* در عرض‌های خیلی کم (۳۶۰px و کمتر) لوگو + نام سامانه + دکمه + همبرگری
   با هم جا نمی‌شدند و ردیف را دوخطی می‌کردند. */
@media (max-width: 400px) {
    header[data-public-nav] .font-black { font-size: 14px; }
    header[data-public-nav] a[href="/signin"] { padding-inline: .7rem; font-size: 12.5px; }
    header[data-public-nav] a[href="/signin"] i { display: none; }
}


/* =====================================================================
   ۱۲) منوی موبایلِ صفحه‌های عمومی → کشوی همبرگری واقعی
   ---------------------------------------------------------------------
   خواسته: «منوی صفحه اصلی را همبرگری کن، این مدلش بد است.»
   قبلاً یک لیست سفید تمام‌عرض بود که *داخل جریان صفحه* باز می‌شد و
   محتوا را به پایین می‌راند. حالا PublicTopBar همان نشانه‌گذاری کشوی
   پنل (‎.dnav‎) را رندر می‌کند، پس تمام استایلِ آن (app.css) مجانی
   به ارث می‌رسد و ظاهر دو کشو یکی می‌شود.
   چیزی که اینجا لازم است: چند تفاوت کوچک همین کشو + برنده‌کردن md:hidden
   ===================================================================== */

/* ---------- ۱۲-۱) breakpoint: کشوی عمومی از ۷۶۸px به بالا نیست ---------- */
/* ‎.dnav‎ در app.css مقدار ‎display: flex‎ می‌دهد و چون app.css بعد از
   tailwind.css می‌آید، بر ‎.md\:hidden‎ پیروز می‌شد و کشو روی دسکتاپ هم
   می‌ماند. انتخابگر دوکلاسه بی‌نیاز از !important این را حل می‌کند
   (همان الگوی ‎.tap-44.hidden‎ در mobile-fixes.css).
   کشوی پنل ‎xl:hidden‎ دارد و دست‌نخورده می‌ماند. */
@media (min-width: 768px) {
    .dnav.md\:hidden,
    .dnav-overlay.md\:hidden { display: none; }
}

/* ---------- ۱۲-۲) بلوک کاربر، حالا لینک است نه div ---------- */
.dnav-user-link { text-decoration: none; color: inherit; transition: background .16s ease; }
.dnav-user-link:hover, .dnav-user-link:focus-visible { background: #f5f7ff; }

/* ---------- ۱۲-۳) فوتر کشو: «ثبت درخواست» و «ورود» ---------- */
.dnav-foot-public { display: grid; gap: .5rem; }
.dnav-cta {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 46px; padding: 0 1rem; border-radius: 12px;
    background: #4f46e5; color: #fff;
    font-size: 14px; font-weight: 800; text-decoration: none;
    transition: background .16s ease, transform .12s ease;
}
.dnav-cta:hover { background: #4338ca; color: #fff; }
.dnav-cta:active { transform: scale(.985); }
.dnav-cta.is-ghost { background: #eef2ff; color: #3730a3; }
.dnav-cta.is-ghost:hover { background: #e0e7ff; color: #312e81; }

/* ---------- ۱۲-۴) بقایای منوی قدیمی ---------- */
/* عنصر ‎.public-nav-backdrop‎ دیگر رندر نمی‌شود (جایش ‎.dnav-overlay‎ است)
   و ‎#public-mobile-nav‎ هم از داخل <header> بیرون آمده، پس قواعدِ
   ‎[data-public-nav] #public-mobile-nav‎ در mobile-fixes.css دیگر هدفی
   ندارند. این خط فقط تضمین می‌کند اگر جایی ماند، ارتفاع کشو را نبُرد. */
#public-mobile-nav { max-height: none; }

/* ---------- ۱۲-۵) دکمه‌ی بستن (ضرب‌در) کمی بالاتر ---------- */
/* خواسته: «اون دکمه ضرب در رو بزار یکم بالاتر».
   سربرگ کشو حالا پدینگ ناحیه‌ی امن دارد و دکمه‌ی ۴۴px وسط‌چین، پایین‌تر
   از خط چشم می‌نشست. ‎inset-block-start‎ منفی خودِ دکمه را جابه‌جا می‌کند
   بدون اینکه ارتفاع سربرگ یا جای لوگو عوض شود. */
.dnav-head .dnav-close {
    position: relative;
    inset-block-start: -9px;
}


/* =====================================================================
   ۱۳) پرده‌ی تاریک کشو باید *روی* ناوبار بیفتد، نه زیرش
   ---------------------------------------------------------------------
   خواسته: «ناوبار باید زیر اون مشکیه باشه نه اینکه روش.»
   در تصویر، با کشوی باز کل صفحه تاریک می‌شد ولی یک تکه‌ی سفید و روشن
   بالای چپ می‌ماند: خودِ ناوبار با دکمه‌ی همبرگری.

   علت، فقط اختلاف دو عدد بود (توکن‌ها در mobile-fixes.css خط ۶۱۵):
       --z-chat   = ۴۰  ← پرده‌ی کشو (.dnav-overlay)
       --z-sticky = ۵۰  ← ناوبار چسبان
       --z-drawer = ۶۰  ← خودِ کشو
   پرده ده واحد *زیر* ناوبار بود، پس ناوبار رویش می‌ماند و تاریک نمی‌شد.

   حالا پرده روی لایه‌ی ۵۵ می‌نشیند: بالاتر از ناوبار (۵۰) و پایین‌تر از
   کشو (۶۰). نتیجه: ناوبار هم مثل بقیه‌ی صفحه تاریک می‌شود، کشو روشن
   می‌ماند، و کلیک روی ناوبارِ تاریک‌شده کشو را می‌بندد (چون پرده رویش است)
   — همان رفتاری که از یک کشوی مودال انتظار می‌رود.
   ===================================================================== */
:root { --z-overlay: 55; }

.dnav-overlay { z-index: var(--z-overlay) !important; }

/* کشو همیشه باید بالاتر از پرده باشد */
.dnav { z-index: var(--z-drawer, 60) !important; }