/* fap-tokens:start */
/* =====================================================================
 * لایه پایه طراحی (--fap-*)
 *
 * هر رنگ، گردی، سایه و اندازه قلم افزونه از این‌جا می‌آید و قالب اختصاصی
 * هم باید از همین‌ها استفاده کند. انتخاب کاربر (tools/token-preview):
 * خاکستری «فیروزه‌ای‌خاکستری» (B)، سایه سه‌پله با رنگ متن پررنگ (نه مشکی).
 *
 * قاعده استفاده: همیشه با مقدار پیش‌فرض بنویس، مثل
 *     color: var(--fap-c-muted, #5c7175);
 * چون هر صفحه این فایل را بار نمی‌کند و پروداکشن متغیرهای عمومی را initial
 * می‌کند (نام‌ها برای همین پیشوند یکتا دارند). عوض کردن مقدار یک توکن این‌جا
 * همه افزونه را عوض می‌کند؛ پیش‌فرض‌های پراکنده فقط پشتیبان‌اند.
 *
 * نقش رنگ برند: ۵۰۰ نشان برند (لوگو، آیکن، خط برجسته) — زیر متن سفید نه،
 * کنتراستش ۳٫۱ است؛ ۶۰۰ دکمه و لینک؛ ۷۰۰ هاور.
 * متن کم‌رنگ (muted) روی سفید ۵٫۱۵ و روی bg ۴٫۷۸ است؛ faint فقط برای
 * placeholder و تزئین، نه متن خواندنی.
 *
 * نقطه‌های شکست (متغیر در media query کار نمی‌کند، پس قرارداد است):
 *     480 گوشی · 768 تبلت · 1024 لپ‌تاپ کوچک · 1280 دسکتاپ
 *     (782 فقط در صفحه‌های پیشخوان وردپرس)
 * ===================================================================== */

/* وزیرمتن همراه افزونه (OFL 1.1). پیشخوان‌ها هم از این بار می‌کنند؛ قبلا فقط
   نام 'Vazirmatn' را اعلام می‌کردند و روی سیستمی که فونت نصب نبود Tahoma می‌شد. */
@font-face { font-family: 'FAP Vazirmatn'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+200C-200D, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'FAP Vazirmatn'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/Vazirmatn-Medium.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+200C-200D, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'FAP Vazirmatn'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/Vazirmatn-SemiBold.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+200C-200D, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'FAP Vazirmatn'; font-style: normal; font-weight: 700 900; font-display: swap; src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+200C-200D, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'FAP Vazirmatn'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('../fonts/Vazirmatn-Latin-Regular.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'FAP Vazirmatn'; font-style: normal; font-weight: 600 900; font-display: swap; src: url('../fonts/Vazirmatn-Latin-Bold.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; }

:root {
    /* برند */
    --fap-brand-50: #eef8f6;
    --fap-brand-100: #e3f4f1;
    --fap-brand-200: #c6e9e4;
    --fap-brand-300: #9fd9d1;
    --fap-brand-400: #5cbfb6;
    --fap-brand-500: #1aa29a;
    --fap-brand-600: #0d8276;
    --fap-brand-700: #0b6c62;
    --fap-brand-800: #0a5650;
    --fap-brand-900: #083f3b;

    /* خنثی: فیروزه‌ای‌خاکستری */
    --fap-c-ink: #13292d;
    --fap-c-text: #34494d;
    --fap-c-muted: #5c7175;
    --fap-c-faint: #98aaae;
    --fap-c-line-strong: #c4d2d4;
    --fap-c-line: #e0e8e9;
    --fap-c-line-soft: #edf2f2;
    --fap-c-bg-strong: #e8efef;
    --fap-c-bg: #f3f7f7;
    --fap-c-bg-soft: #f8fafa;
    --fap-c-surface: #fff;

    /* وضعیت (همان باکس پیام، اعلان و دکمه) */
    --fap-c-success: #15803d;
    --fap-c-success-strong: #166534;
    --fap-c-success-soft: #f0faf3;
    --fap-c-success-line: #c9ecd5;
    --fap-c-error: #c81e1e;
    --fap-c-error-strong: #a91919;
    --fap-c-error-soft: #fef4f3;
    --fap-c-error-line: #f6d3d0;
    --fap-c-warning: #b45309;
    --fap-c-warning-strong: #974407;
    --fap-c-warning-soft: #fffaf0;
    --fap-c-warning-line: #f6e1b8;
    --fap-c-warning-accent: #f59e0b;
    /* اطلاع / در جریان (پیش‌تر هفت آبی مختلف جایش نشسته بود) */
    --fap-c-info: #1d5c9c;
    --fap-c-info-strong: #174a7e;
    --fap-c-info-soft: #f2f7fc;
    --fap-c-info-line: #cfe0f1;
    /* زمینه برچسب وضعیت: میان soft و line، تا برچسب بی‌حاشیه روی کارت سفید دیده شود */
    --fap-c-success-tint: #e3f5e9;
    --fap-c-warning-tint: #fcefd6;
    --fap-c-error-tint: #fde7e5;
    --fap-c-info-tint: #e5eef9;

    /* گردی */
    --fap-r-xs: 6px;      /* برچسب */
    --fap-r-sm: 10px;     /* کنترل کوچک */
    --fap-r-md: 12px;     /* دکمه، فیلد */
    --fap-r-lg: 16px;     /* کارت، باکس */
    --fap-r-xl: 20px;     /* پنل، پنجره */
    --fap-r-pill: 999px;

    /* سایه: سه پله، با رنگ متن پررنگ (نه مشکی، نه رنگی) */
    --fap-sh-xs: 0 1px 2px rgba(19, 41, 45, .06);
    --fap-sh-sm: 0 1px 3px rgba(19, 41, 45, .06), 0 4px 12px rgba(19, 41, 45, .05);
    --fap-sh-md: 0 2px 6px rgba(19, 41, 45, .05), 0 12px 28px -8px rgba(19, 41, 45, .16);

    /* قلم */
    --fap-font: 'Vazirmatn', 'FAP Vazirmatn', Tahoma, sans-serif;
    --fap-fs-2xs: 11px;   /* شمارنده و برچسب ریز */
    --fap-fs-xs: 12px;    /* برچسب، توضیح زیر فیلد */
    --fap-fs-sm: 13px;    /* متن ثانوی، دکمه کوچک */
    --fap-fs-md: 14px;    /* متن پایه، دکمه، فیلد */
    --fap-fs-lg: 16px;    /* متن برجسته، دکمه بزرگ */
    --fap-fs-xl: 18px;    /* عنوان کارت */
    --fap-fs-2xl: 22px;   /* عنوان بخش */
    --fap-fs-3xl: 28px;   /* عنوان صفحه */

    /* حرکت */
    --fap-dur-fast: .15s;
    --fap-dur: .25s;
    --fap-ease: cubic-bezier(.2, .8, .2, 1);

    /* فیلد (ظاهر «بینابین»): پس‌زمینه خیلی روشن، حاشیه نرم، فوکوس سفید با حلقه */
    --fap-field-h: 44px;
    --fap-field-h-sm: 36px;
    --fap-field-h-lg: 50px;
    --fap-field-r: 12px;
    --fap-field-bg: #f8fafa;
    --fap-field-bg-focus: #fff;
    --fap-field-bd: #d6e0e1;
    --fap-field-bd-hover: #c4d2d4;
    --fap-field-bd-focus: #1aa29a;
    --fap-field-ring: 0 0 0 3px #e3f4f1;
    --fap-field-fs: 14px;

    /* فهرست دراپ‌داون (مرتب‌سازی، انتخاب برند، منوی کاربر، Select2…) */
    --fap-menu-bg: #fff;
    --fap-menu-bd: #e0e8e9;
    --fap-menu-r: 12px;
    --fap-menu-pad: 6px;
    --fap-menu-item-r: 10px;
    /* فاصله آیتم‌های کنار هم (فهرست، تب تکه‌ای): هاور یکی به انتخاب‌شده کناری نچسبد */
    --fap-item-gap: 2px;
    --fap-menu-item-hover: #f3f7f7;
    --fap-menu-item-sel-bg: #eef8f6;
    --fap-menu-item-sel-fg: #0b6c62;

    /* تب (خط زیرین)، کنترل تکه‌ای (سفید روی ریل خاکستری)، چیپ (ملایم با تیک) */
    --fap-tab-h: 44px;
    --fap-seg-h: 34px;
    --fap-seg-r: 12px;
    --fap-seg-item-r: 8px;
    --fap-chip-h: 34px;
    --fap-chip-r: 10px;

    /* اسکلت بارگذاری (همان رنگ اسکلت پنل حساب؛ کم‌رنگ‌تر نشود) */
    --fap-sk-base: #e3eaea;
    --fap-sk-hi: #f1f5f5;
    --fap-sk-dur: 1.4s;

    /* برچسب وضعیت (ظاهر «ملایم»، گوشه ۶) */
    --fap-badge-h: 24px;
    --fap-badge-h-sm: 20px;
    --fap-badge-r: 6px;
    --fap-badge-fs: 12px;
    --fap-badge-fs-sm: 11px;

    /* سربرگ صفحه‌های پیشخوان: تنها گرادیان مجاز افزونه (به انتخاب کاربر) */
    --fap-phead-bg: linear-gradient(120deg, var(--fap-brand-500, #1aa29a) 0%, var(--fap-brand-700, #0b6c62) 100%);

    /* لایه‌ها (z-index) */
    --fap-z-sticky: 100;
    --fap-z-header: 1000;
    --fap-z-drawer: 99990;
    --fap-z-modal: 2147481000;
    --fap-z-confirm: 2147482000;
    --fap-z-toast: 2147483000;
}
/* fap-tokens:end */

/* =====================================================================
 * باکس پیام واحد افزونه (.fap-mbx)
 *
 * هم‌خانواده fap-toast.js (اعلان شناور)، fap-confirm.js (تایید) و fap-modal.js
 * (پنجره): همان چهار رنگ و همان آیکن‌ها، ولی داخل جریان صفحه. هر پیام موفقیت/
 * خطا/هشدار/راهنمای داخل صفحه از همین ساخته می‌شود:
 *   PHP: fap_msg('success', 'متن', ['title' => …, 'actions' => …])   (includes/fap-msg.php)
 *   JS:  fapMsg.show(ظرف، 'error', 'متن', {...})                        (assets/js/fap-msg.js)
 *
 * چرا فایل CSS واقعی و نه تزریق با JS (برخلاف toast/confirm/modal): بیشتر این
 * باکس‌ها در سرور چاپ می‌شوند و باید از همان رندر اول استایل داشته باشند.
 * هر استایل مصرف‌کننده 'fap-msg' را وابستگی می‌گیرد تا در <head> بیاید.
 *
 * زره ضد قالب: ریشه همیشه کلاس رنگ دارد (is-*)، پس قوانین اصلی دوکلاسه‌اند و
 * فرزندان دوکلاسه یا بیشتر؛ کیت المنتور (۰،۱،۱) و قوانین هم‌وزن میزبان نمی‌برند.
 * متغیرها نام یکتا + fallback دارند (پروداکشن توکن‌های عمومی را initial می‌کند).
 * ===================================================================== */

.fap-mbx {
    --fap-mbx-c: var(--fap-brand-600, #0d8276);
    --fap-mbx-bg: var(--fap-brand-50, #eef8f6);
    --fap-mbx-bd: var(--fap-brand-200, #c6e9e4);
    --fap-mbx-tile: var(--fap-brand-100, #e3f4f1);
}
.fap-mbx.is-success { --fap-mbx-c: var(--fap-c-success, #15803d); --fap-mbx-bg: var(--fap-c-success-soft, #f0faf3); --fap-mbx-bd: var(--fap-c-success-line, #c9ecd5); --fap-mbx-tile: var(--fap-c-success-soft, #f0faf3); }
.fap-mbx.is-error   { --fap-mbx-c: var(--fap-c-error, #c81e1e); --fap-mbx-bg: var(--fap-c-error-soft, #fef4f3); --fap-mbx-bd: var(--fap-c-error-line, #f6d3d0); --fap-mbx-tile: var(--fap-c-error-soft, #fef4f3); }
.fap-mbx.is-warning { --fap-mbx-c: var(--fap-c-warning, #b45309); --fap-mbx-bg: var(--fap-c-warning-soft, #fffaf0); --fap-mbx-bd: var(--fap-c-warning-line, #f6e1b8); --fap-mbx-tile: var(--fap-c-warning-line, #f6e1b8); }

.fap-mbx.is-info,
.fap-mbx.is-success,
.fap-mbx.is-error,
.fap-mbx.is-warning {
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    max-width: none;
    margin: 0 0 16px;
    padding: 13px 14px;
    background: var(--fap-mbx-bg, #f1faf8);
    border: 1px solid var(--fap-mbx-bd, #cdeae5);
    border-radius: var(--fap-r-md, 12px);
    box-shadow: none;
    color: var(--fap-c-ink, #13292d);
    font-family: inherit;
    font-size: var(--fap-fs-md, 14px);
    font-weight: 500;
    line-height: 1.85;
    letter-spacing: normal;
    text-align: right;
    text-transform: none;
    direction: rtl;
}
.fap-mbx.fap-mbx[hidden] { display: none !important; }
/* بعضی پنل‌ها باکس خطا را برای صفحه‌خوان فوکوس می‌کنند (tabindex=-1)؛ حلقه فوکوس
   عمومی آن‌ها (مثلا «.fap-acc :focus-visible») نباید شکل باکس را عوض کند. */
.fap-mbx.fap-mbx:focus,
.fap-mbx.fap-mbx:focus-visible { outline: none; border-radius: var(--fap-r-md, 12px); }
.fap-mbx *,
.fap-mbx *::before,
.fap-mbx *::after { box-sizing: border-box; }

/* آیکن */
.fap-mbx .fap-mbx-ic {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    border-radius: var(--fap-r-sm, 10px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fap-mbx-tile, #dff3ef);
    color: var(--fap-mbx-c, #0d8276);
}
.fap-mbx .fap-mbx-ic svg,
.fap-mbx .fap-mbx-x svg {
    display: block;
    width: 19px;
    height: 19px;
    max-width: none;
    margin: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* متن */
.fap-mbx .fap-mbx-body { flex: 1 1 auto; min-width: 0; margin: 0; padding: 4px 0 0; }
.fap-mbx .fap-mbx-title { display: block; margin: 0; padding: 0; color: var(--fap-c-ink, #13292d); font-size: var(--fap-fs-md, 14px); font-weight: 700; line-height: 1.75; }
.fap-mbx .fap-mbx-text { margin: 0; padding: 0; color: var(--fap-c-text, #34494d); font-size: var(--fap-fs-md, 14px); font-weight: 500; line-height: 1.9; overflow-wrap: anywhere; }
.fap-mbx .fap-mbx-title + .fap-mbx-text { margin-top: 1px; }
.fap-mbx .fap-mbx-text p { margin: 0 0 4px; padding: 0; color: inherit; font-size: inherit; line-height: inherit; }
.fap-mbx .fap-mbx-text p:last-child { margin-bottom: 0; }
.fap-mbx .fap-mbx-text ul,
.fap-mbx .fap-mbx-text ol { margin: 4px 0 0; padding-inline-start: 18px; }
.fap-mbx .fap-mbx-text li { margin: 0 0 2px; }
.fap-mbx .fap-mbx-text strong,
.fap-mbx .fap-mbx-text b { color: var(--fap-c-ink, #13292d); font-weight: 700; }
.fap-mbx .fap-mbx-text code { padding: 1px 6px; border-radius: var(--fap-r-xs, 6px); background: rgba(15, 23, 42, .06); font-size: var(--fap-fs-xs, 12px); direction: ltr; unicode-bidi: isolate; }
.fap-mbx .fap-mbx-text a,
.fap-mbx .fap-mbx-text a:link,
.fap-mbx .fap-mbx-text a:visited,
.fap-mbx .fap-mbx-text a:hover,
.fap-mbx .fap-mbx-text a:focus {
    color: var(--fap-mbx-c, #0d8276);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    box-shadow: none;
}

/* دکمه‌های اقدام */
.fap-mbx .fap-mbx-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; }
.fap-mbx .fap-mbx-btn,
.fap-mbx a.fap-mbx-btn,
.fap-mbx a.fap-mbx-btn:link,
.fap-mbx a.fap-mbx-btn:visited,
.fap-mbx a.fap-mbx-btn:focus,
.fap-mbx button.fap-mbx-btn:focus {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 5px 14px;
    border-radius: var(--fap-r-sm, 10px);
    background: var(--fap-mbx-c, #0d8276);
    color: #fff;
    font-family: inherit;
    font-size: var(--fap-fs-sm, 13px);
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.fap-mbx .fap-mbx-btn:hover,
.fap-mbx a.fap-mbx-btn:hover { filter: brightness(1.07); color: #fff; text-decoration: none; }
.fap-mbx .fap-mbx-btn.is-ghost,
.fap-mbx a.fap-mbx-btn.is-ghost,
.fap-mbx a.fap-mbx-btn.is-ghost:visited,
.fap-mbx a.fap-mbx-btn.is-ghost:hover {
    background: #fff;
    color: var(--fap-mbx-c, #0d8276);
    box-shadow: inset 0 0 0 1px var(--fap-mbx-bd, #cdeae5);
}
.fap-mbx .fap-mbx-btn svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* دکمه بستن */
.fap-mbx .fap-mbx-x,
.fap-mbx .fap-mbx-x:focus {
    all: unset;
    box-sizing: border-box;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    margin: 3px 0 0;
    border-radius: var(--fap-r-sm, 10px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--fap-c-faint, #98aaae);
    cursor: pointer;
}
.fap-mbx .fap-mbx-x:hover { background: rgba(15, 23, 42, .06); color: var(--fap-c-ink, #13292d); }
.fap-mbx .fap-mbx-x svg { width: 15px; height: 15px; }
.fap-mbx .fap-mbx-x:focus-visible,
.fap-mbx .fap-mbx-btn:focus-visible { outline: 2px solid var(--fap-mbx-c, #0d8276); outline-offset: 2px; }

/* حالت فشرده: زیر فیلد فرم، داخل کارت یا بلوک اقدام — بدون کاشی آیکن */
.fap-mbx.fap-mbx--sm { gap: 8px; margin: 8px 0 12px; padding: 8px 11px; border-radius: var(--fap-r-sm, 10px); font-size: var(--fap-fs-sm, 13px); }
.fap-mbx.fap-mbx--sm:focus,
.fap-mbx.fap-mbx--sm:focus-visible { border-radius: var(--fap-r-sm, 10px); }
.fap-mbx.fap-mbx--sm .fap-mbx-ic { flex-basis: 20px; width: 20px; height: 20px; margin-top: 2px; background: none; border-radius: 0; }
.fap-mbx.fap-mbx--sm .fap-mbx-ic svg { width: 18px; height: 18px; }
.fap-mbx.fap-mbx--sm .fap-mbx-body { padding-top: 0; }
.fap-mbx.fap-mbx--sm .fap-mbx-title { font-size: var(--fap-fs-md, 14px); }
.fap-mbx.fap-mbx--sm .fap-mbx-text { font-size: var(--fap-fs-sm, 13px); line-height: 1.8; }
.fap-mbx.fap-mbx--sm .fap-mbx-x { flex-basis: 24px; width: 24px; height: 24px; margin-top: 0; }

/* ورود نرم وقتی با JS نشان داده می‌شود */
.fap-mbx.is-in { animation: fap-mbx-in .28s cubic-bezier(.21, 1.02, .73, 1) both; }
@keyframes fap-mbx-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fap-mbx.is-in { animation: none; } }

@media (max-width: 600px) {
    .fap-mbx.is-info,
    .fap-mbx.is-success,
    .fap-mbx.is-error,
    .fap-mbx.is-warning { gap: 10px; padding: 12px; }
    .fap-mbx.fap-mbx--sm { gap: 8px; padding: 8px 10px; }
    .fap-mbx .fap-mbx-acts { flex-direction: column; align-items: stretch; }
    .fap-mbx .fap-mbx-acts .fap-mbx-btn { white-space: normal; }
}

@media print {
    .fap-mbx .fap-mbx-x,
    .fap-mbx .fap-mbx-acts { display: none; }
}

/* =====================================================================
 * چرخنده واحد «در حال بارگذاری» (.fap-spin)
 *
 * جای ۱۴ چرخنده جدای افزونه (آپلود فرم‌ها، چت‌بات، استوری، رادار، استعلام،
 * کیف پول، ورود، مارکتینگ، پیشخوان، پیامک). یک حلقه با دنباله محوشونده روی
 * ریل کم‌رنگ، یک سرعت، یک keyframe:
 *   <span class="fap-spin"></span>                      ۲۰px — دکمه/آپلود
 *   <span class="fap-spin fap-spin--sm"></span>         ۱۶px — کنار متن، داخل فیلد
 *   <span class="fap-spin fap-spin--lg"></span>         ۳۶px — بارگذاری صفحه/بخش
 *   + fap-spin--cur  هم‌رنگ متن اطراف (دکمه پررنگ ← سفید، دکمه روشن ← رنگ متن)
 *   + fap-spin--on   سفید، روی تصویر و ویدیو
 * هر استایلی که 'fap-msg' را وابستگی گرفته این را هم دارد. جایی که چرخنده
 * ::before/::after است (دکمه ورود، نظرسنجی چت‌بات) همین دستور را تکرار
 * می‌کند؛ toast و confirm هم که CSS خودشان را تزریق می‌کنند.
 *
 * لایه‌ها: نمایش/جا/رنگ تک‌کلاسه است تا میزبان (فایل بعدی، هم‌وزن) بتواند
 * پنهان/جابه‌جایش کند؛ شکل حلقه دوکلاسه است تا قانون عمومی قالب نشکندش.
 * اندازه با متغیر عوض می‌شود (--fap-spin-s، --fap-spin-w).
 * ===================================================================== */
.fap-spin {
    --fap-spin-s: 20px;
    --fap-spin-w: 2.5px;
    display: inline-block;
    flex: 0 0 auto;
    margin: 0;
    color: var(--fap-brand-600, #0d8276);
    vertical-align: middle;
}
.fap-spin.fap-spin {
    box-sizing: border-box;
    width: var(--fap-spin-s, 20px);
    height: var(--fap-spin-s, 20px);
    min-width: 0;
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 50%;
    /* بدون color-mix (مرورگر قدیمی) فقط ریل کم‌رنگ نمی‌آید؛ حلقه می‌ماند */
    background: conic-gradient(from 0deg, transparent 0 8%, currentColor 100%);
    background: conic-gradient(from 0deg, transparent 0 8%, currentColor 100%), color-mix(in srgb, currentColor 16%, transparent);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--fap-spin-w, 2.5px) - .5px), #000 calc(100% - var(--fap-spin-w, 2.5px)));
    mask: radial-gradient(farthest-side, transparent calc(100% - var(--fap-spin-w, 2.5px) - .5px), #000 calc(100% - var(--fap-spin-w, 2.5px)));
    animation: fap-spin .8s linear infinite;
}
.fap-spin.fap-spin--sm { --fap-spin-s: 16px; --fap-spin-w: 2px; }
.fap-spin.fap-spin--lg { --fap-spin-s: 36px; --fap-spin-w: 3.5px; }
.fap-spin.fap-spin--cur { color: inherit; }
.fap-spin.fap-spin--on { color: #fff; }
.fap-spin.fap-spin[hidden] { display: none !important; }
@keyframes fap-spin { to { transform: rotate(360deg); } }
/* «کاهش حرکت»: کندتر، ولی نشانه بارگذاری نمی‌رود */
@media (prefers-reduced-motion: reduce) { .fap-spin.fap-spin { animation-duration: 1.8s; } }

/* =====================================================================
 * دکمه واحد (.fap-btn)
 *
 * جای ۱۸ خانواده دکمه جدا (فرم‌ها، ورود، پنل حساب، رادار، استعلام، آرشیو،
 * پنل‌های کارکنان…). ظاهر «تخت» به انتخاب کاربر (tools/button-preview):
 *   <button class="fap-btn fap-btn--primary">            اصلی
 *           fap-btn--soft | --ghost (پیش‌فرض) | --danger | --danger-solid | --warn | --link
 *   اندازه: fap-btn--sm (۳۴) | پیش‌فرض (۴۴) | fap-btn--lg (۵۰)
 *   شکل:   fap-btn--block (تمام‌عرض) | fap-btn--icon (فقط آیکن، مربع)
 *   حالت:  disabled / aria-disabled، aria-busy="true" + <span class="fap-spin fap-spin--sm fap-spin--cur">
 * روی <a> هم همین است.
 *
 * رنگ اصلی #0d8276 است نه #1aa29a: متن سفید روی فیروزه روشن کنتراست ۳٫۱
 * دارد (زیر حد خوانایی)، روی این ۴٫۷. رنگ‌ها فقط در متغیرهای گونه‌اند؛
 * عوض کردن ظاهر (مثلا شیب) یعنی عوض کردن همان چند متغیر.
 *
 * دو لایه، عمدا:
 *   ۱. جا و چیدمان (display/width/margin/flex) تک‌کلاسه — هر صفحه می‌تواند
 *      دکمه را پهن، جابه‌جا یا پنهان کند (قانون هم‌وزن در فایل بعدی).
 *   ۲. شکل (رنگ/گردی/قلم/ارتفاع) سه‌کلاسه — ریست Hello Elementor با
 *      [type=button] و کیت با «.elementor-kit-N button» تا (۰،۲،۱) می‌رسند و
 *      دیرتر بار می‌شوند؛ :hover/:focus چهارکلاسه‌اند چون ریست روی همین‌ها رنگ
 *      صورتی و line-height می‌گذارد. شکل را از صفحه میزبان عوض نکن؛ گونه/اندازه بساز.
 * ===================================================================== */
.fap-btn {
    --fap-btn-h: 44px;
    --fap-btn-px: 18px;
    --fap-btn-r: var(--fap-r-md, 12px);
    --fap-btn-fs: var(--fap-fs-md, 14px);
    --fap-btn-bg: #fff;
    --fap-btn-fg: var(--fap-c-ink, #13292d);
    --fap-btn-bd: var(--fap-c-line, #e0e8e9);
    --fap-btn-bg-h: var(--fap-c-bg, #f3f7f7);
    --fap-btn-bd-h: var(--fap-c-line, #e0e8e9);
    --fap-btn-fg-h: var(--fap-c-ink, #13292d);
    box-sizing: border-box;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    max-width: 100%;
    margin: 0;
    vertical-align: middle;
}
.fap-btn.fap-btn.fap-btn {
    min-height: var(--fap-btn-h, 44px);
    height: auto;
    padding: 0 var(--fap-btn-px, 18px);
    border: 1px solid var(--fap-btn-bd, transparent);
    border-radius: var(--fap-btn-r, 12px);
    background: var(--fap-btn-bg, #fff);
    box-shadow: none;
    color: var(--fap-btn-fg, #1f2640);
    font-family: inherit;
    font-size: var(--fap-btn-fs, 14px);
    font-style: normal;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: normal;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    filter: none;
    transform: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .15s, border-color .15s, color .15s;
}
.fap-btn.fap-btn.fap-btn:focus,
.fap-btn.fap-btn.fap-btn:visited {
    background: var(--fap-btn-bg, #fff);
    border-color: var(--fap-btn-bd, transparent);
    box-shadow: none;
    color: var(--fap-btn-fg, #1f2640);
    line-height: 1.4;
    text-decoration: none;
}
.fap-btn.fap-btn.fap-btn:hover {
    background: var(--fap-btn-bg-h, #f5f7fb);
    border-color: var(--fap-btn-bd-h, transparent);
    box-shadow: none;
    color: var(--fap-btn-fg-h, #111827);
    line-height: 1.4;
    text-decoration: none;
}
.fap-btn.fap-btn.fap-btn:active { transform: translateY(1px); }
.fap-btn.fap-btn.fap-btn:focus-visible { outline: 2px solid var(--fap-brand-600, #0d8276); outline-offset: 2px; }
.fap-btn.fap-btn.fap-btn:disabled,
.fap-btn.fap-btn.fap-btn[aria-disabled="true"],
.fap-btn.fap-btn.fap-btn:disabled:hover,
.fap-btn.fap-btn.fap-btn[aria-disabled="true"]:hover {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
    background: var(--fap-btn-bg, #fff);
    border-color: var(--fap-btn-bd, transparent);
    color: var(--fap-btn-fg, #1f2640);
}
.fap-btn.fap-btn.fap-btn[aria-busy="true"] { opacity: .92; cursor: progress; pointer-events: none; }
.fap-btn.fap-btn[hidden] { display: none !important; }
.fap-btn.fap-btn.fap-btn svg,
.fap-btn.fap-btn.fap-btn .dashicons,
.fap-btn.fap-btn.fap-btn .fap-btn__ic {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 0;
    font-size: 18px;
    line-height: 1;
}
.fap-btn.fap-btn.fap-btn svg { fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }

/* گونه‌ها: فقط متغیر (رنگ) */
.fap-btn--primary { --fap-btn-bg: var(--fap-brand-600, #0d8276); --fap-btn-fg: #fff; --fap-btn-bd: var(--fap-brand-600, #0d8276); --fap-btn-bg-h: var(--fap-brand-700, #0b6c62); --fap-btn-bd-h: var(--fap-brand-700, #0b6c62); --fap-btn-fg-h: #fff; }
.fap-btn--soft { --fap-btn-bg: var(--fap-brand-100, #e3f4f1); --fap-btn-fg: var(--fap-brand-700, #0b6c62); --fap-btn-bd: var(--fap-brand-100, #e3f4f1); --fap-btn-bg-h: var(--fap-brand-200, #c6e9e4); --fap-btn-bd-h: var(--fap-brand-200, #c6e9e4); --fap-btn-fg-h: var(--fap-brand-800, #0a5650); }
.fap-btn--danger { --fap-btn-bg: #fff; --fap-btn-fg: var(--fap-c-error, #c81e1e); --fap-btn-bd: var(--fap-c-error-line, #f6d3d0); --fap-btn-bg-h: var(--fap-c-error-soft, #fef4f3); --fap-btn-bd-h: var(--fap-c-error-line, #f6d3d0); --fap-btn-fg-h: var(--fap-c-error-strong, #a91919); }
.fap-btn--danger-solid { --fap-btn-bg: var(--fap-c-error, #c81e1e); --fap-btn-fg: #fff; --fap-btn-bd: var(--fap-c-error, #c81e1e); --fap-btn-bg-h: var(--fap-c-error-strong, #a91919); --fap-btn-bd-h: var(--fap-c-error-strong, #a91919); --fap-btn-fg-h: #fff; }
.fap-btn--warn { --fap-btn-bg: var(--fap-c-warning, #b45309); --fap-btn-fg: #fff; --fap-btn-bd: var(--fap-c-warning, #b45309); --fap-btn-bg-h: var(--fap-c-warning-strong, #974407); --fap-btn-bd-h: var(--fap-c-warning-strong, #974407); --fap-btn-fg-h: #fff; }
.fap-btn--link { --fap-btn-bg: transparent; --fap-btn-fg: var(--fap-brand-600, #0d8276); --fap-btn-bd: transparent; --fap-btn-bg-h: transparent; --fap-btn-bd-h: transparent; --fap-btn-fg-h: var(--fap-brand-800, #0a5650); --fap-btn-px: 4px; --fap-btn-h: 32px; }
.fap-btn.fap-btn.fap-btn.fap-btn--link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* اندازه و شکل */
.fap-btn.fap-btn--sm { --fap-btn-h: 34px; --fap-btn-px: 13px; --fap-btn-r: var(--fap-r-sm, 10px); --fap-btn-fs: var(--fap-fs-sm, 13px); gap: 6px; }
.fap-btn.fap-btn--lg { --fap-btn-h: 50px; --fap-btn-px: 24px; --fap-btn-fs: var(--fap-fs-lg, 16px); }
.fap-btn.fap-btn--block { display: flex; width: 100%; }
.fap-btn.fap-btn--icon { --fap-btn-px: 0px; width: var(--fap-btn-h, 44px); }
.fap-btn.fap-btn.fap-btn.fap-btn--wrap { white-space: normal; }  /* متن بلند: چندخطی */
.fap-btn.fap-btn.fap-btn--sm svg,
.fap-btn.fap-btn.fap-btn--sm .dashicons,
.fap-btn.fap-btn.fap-btn--sm .fap-btn__ic { width: 16px; height: 16px; font-size: 16px; }

@media (prefers-reduced-motion: reduce) {
    .fap-btn.fap-btn.fap-btn { transition: none; }
    .fap-btn.fap-btn.fap-btn:active { transform: none; }
}
@media print { .fap-btn.fap-btn { display: none; } }

/* =====================================================================
 * فیلد واحد (.fap-input) و دراپ‌داون واحد (.fap-dd / .fap-menu)
 *
 * ظاهر «بینابین» به انتخاب کاربر (tools/field-preview): پس‌زمینه خیلی روشن
 * (#f8fafa) با حاشیه نرم (#d6e0e1)؛ فوکوس سفید با حاشیه برند و حلقه ۳ پیکسلی.
 * هم‌قد دکمه‌ها: --sm ۳۶، پیش‌فرض ۴۴، --lg ۵۰. روی موبایل قلم ۱۶ پیکسل است
 * (iOS روی کمتر از آن هنگام فوکوس صفحه را زوم می‌کند).
 *
 * بیشتر فیلدهای افزونه کلاس ندارند و با ظرفشان استایل می‌گیرند؛ آن قانون‌ها
 * به همین متغیرهای --fap-field-* وصل‌اند، پس ظاهر همه از همین‌جا عوض می‌شود.
 * مارکاپ تازه: <input class="fap-input">، <select class="fap-input">،
 * <textarea class="fap-input">، و .fap-field/.fap-label/.fap-help/.fap-field-error.
 *
 * دراپ‌داون‌های اختصاصی (مرتب‌سازی آرشیو، برند قیمت دست‌دوم، کار ریویو، منوی
 * کاربر، کمبوی منشی) کد خودشان را دارند و فقط قابشان به --fap-menu-* وصل
 * است؛ Select2 و تقویم شمسی هم همین‌جا پوشانده می‌شوند.
 * ===================================================================== */
.fap-input {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
}
.fap-input.fap-input.fap-input {
    min-height: var(--fap-field-h, 44px);
    padding: 0 12px;
    border: 1px solid var(--fap-field-bd, #d6e0e1);
    border-radius: var(--fap-field-r, 12px);
    background: var(--fap-field-bg, #f8fafa);
    box-shadow: none;
    color: var(--fap-c-ink, #13292d);
    font-family: inherit;
    font-size: var(--fap-field-fs, 14px);
    line-height: 1.5;
    outline: none;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.fap-input.fap-input.fap-input::placeholder { color: var(--fap-c-faint, #98aaae); opacity: 1; }
.fap-input.fap-input.fap-input:hover { border-color: var(--fap-field-bd-hover, #c4d2d4); }
.fap-input.fap-input.fap-input:focus,
.fap-input.fap-input.fap-input:focus-within { border-color: var(--fap-field-bd-focus, #1aa29a); background: var(--fap-field-bg-focus, #fff); box-shadow: var(--fap-field-ring, 0 0 0 3px #e3f4f1); }
.fap-input.fap-input.fap-input:disabled { border-color: var(--fap-c-line, #e0e8e9); background: var(--fap-c-bg-strong, #e8efef); color: var(--fap-c-faint, #98aaae); cursor: not-allowed; }
.fap-input.fap-input.fap-input[readonly] { background: var(--fap-c-bg, #f3f7f7); border-style: dashed; }
.fap-input.fap-input.fap-input.is-invalid,
.fap-input.fap-input.fap-input[aria-invalid="true"] { border-color: var(--fap-c-error, #c81e1e); }
.fap-input.fap-input.fap-input.is-invalid:focus,
.fap-input.fap-input.fap-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(200, 30, 30, .12); }
.fap-input.fap-input--sm { --fap-field-h: var(--fap-field-h-sm, 36px); }
.fap-input.fap-input.fap-input.fap-input--sm { padding: 0 10px; border-radius: var(--fap-r-sm, 10px); font-size: var(--fap-fs-sm, 13px); }
.fap-input.fap-input--lg { --fap-field-h: var(--fap-field-h-lg, 50px); }
.fap-input.fap-input.fap-input.fap-input--lg { padding: 0 14px; font-size: var(--fap-fs-lg, 16px); }
select.fap-input.fap-input.fap-input {
    -webkit-appearance: none;
    appearance: none;
    padding-left: 36px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c7175' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: left 12px center;
}
textarea.fap-input.fap-input.fap-input { min-height: 96px; padding: 10px 12px; line-height: 1.8; resize: vertical; }
@media (max-width: 768px) {
    .fap-input.fap-input.fap-input,
    .fap-input.fap-input.fap-input.fap-input--sm { font-size: 16px; }
}

/* فیلد مرکب: آیکن/پسوند + input درون قاب */
.fap-input-group.fap-input-group { display: flex; align-items: center; gap: 8px; }
.fap-input-group.fap-input-group input { flex: 1 1 auto; min-width: 0; height: calc(var(--fap-field-h, 44px) - 2px); margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; color: inherit; font: inherit; outline: none; }
.fap-input-group .fap-addon { flex: 0 0 auto; color: var(--fap-c-muted, #5c7175); font-size: var(--fap-fs-sm, 13px); white-space: nowrap; }
.fap-input-group svg { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: var(--fap-c-muted, #5c7175); stroke-width: 2; }

/* برچسب، راهنما، خطا */
.fap-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.fap-label.fap-label { margin: 0; color: var(--fap-c-ink, #13292d); font-size: var(--fap-fs-sm, 13px); font-weight: 700; line-height: 1.6; }
.fap-label .req { margin-inline-start: 2px; color: var(--fap-c-error, #c81e1e); }
.fap-help.fap-help { margin: 0; color: var(--fap-c-muted, #5c7175); font-size: var(--fap-fs-xs, 12px); line-height: 1.7; }
.fap-field-error.fap-field-error { display: flex; align-items: center; gap: 5px; margin: 0; color: var(--fap-c-error, #c81e1e); font-size: var(--fap-fs-xs, 12px); font-weight: 600; }

/* چک‌باکس، رادیو، سوییچ */
:where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--fap-brand-600, #0d8276); }
.fap-check { display: inline-flex; align-items: flex-start; gap: 8px; color: var(--fap-c-text, #34494d); font-size: var(--fap-fs-md, 14px); line-height: 1.6; cursor: pointer; }
.fap-check.fap-check input {
    -webkit-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    border: 1.5px solid var(--fap-c-line-strong, #c4d2d4);
    border-radius: var(--fap-r-xs, 6px);
    background: var(--fap-c-surface, #fff);
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
.fap-check.fap-check input[type="radio"] { border-radius: 50%; }
.fap-check.fap-check input:hover { border-color: var(--fap-brand-500, #1aa29a); }
.fap-check.fap-check input:checked {
    border-color: var(--fap-brand-600, #0d8276);
    background: var(--fap-brand-600, #0d8276) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") no-repeat center / 12px;
}
.fap-check.fap-check input[type="radio"]:checked { background-image: radial-gradient(circle, #fff 0 3.5px, transparent 4px); background-size: auto; }
.fap-check.fap-check input:focus-visible { outline: none; box-shadow: var(--fap-field-ring, 0 0 0 3px #e3f4f1); }
.fap-check.fap-check input:disabled { border-color: var(--fap-c-line, #e0e8e9); background-color: var(--fap-c-bg-strong, #e8efef); cursor: not-allowed; }
.fap-switch { display: inline-flex; align-items: center; gap: 10px; color: var(--fap-c-text, #34494d); font-size: var(--fap-fs-md, 14px); cursor: pointer; }
.fap-switch.fap-switch input {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 24px;
    margin: 0;
    border: 0;
    border-radius: var(--fap-r-pill, 999px);
    background: var(--fap-c-line-strong, #c4d2d4);
    cursor: pointer;
    transition: background-color .15s;
}
.fap-switch.fap-switch input::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--fap-sh-xs, 0 1px 2px rgba(19, 41, 45, .06)); transition: inset-inline-start .15s; }
.fap-switch.fap-switch input:checked { background: var(--fap-brand-600, #0d8276); }
.fap-switch.fap-switch input:checked::after { inset-inline-start: 19px; }
.fap-switch.fap-switch input:focus-visible { outline: none; box-shadow: var(--fap-field-ring, 0 0 0 3px #e3f4f1); }

/* دراپ‌داون: دکمه بازکننده = فیلد، فهرست = .fap-menu */
.fap-dd { position: relative; }
.fap-picker.fap-picker { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; color: var(--fap-c-faint, #98aaae); text-align: right; cursor: pointer; }
.fap-picker.fap-picker.has-value { color: var(--fap-c-ink, #13292d); }
.fap-picker svg { flex: 0 0 auto; width: 16px; height: 16px; fill: none; stroke: var(--fap-c-muted, #5c7175); stroke-width: 2.2; transition: transform .15s; }
.fap-dd.is-open .fap-picker.fap-picker { border-color: var(--fap-field-bd-focus, #1aa29a); background: var(--fap-field-bg-focus, #fff); box-shadow: var(--fap-field-ring, 0 0 0 3px #e3f4f1); }
.fap-dd.is-open .fap-picker svg { transform: rotate(180deg); }
.fap-menu.fap-menu {
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    inset-inline: 0;
    min-width: 100%;
    max-height: 300px;
    overflow: auto;
    margin: 0;
    padding: var(--fap-menu-pad, 6px);
    border: 1px solid var(--fap-menu-bd, #e0e8e9);
    border-radius: var(--fap-menu-r, 12px);
    background: var(--fap-menu-bg, #fff);
    box-shadow: var(--fap-sh-md, 0 2px 6px rgba(19, 41, 45, .05), 0 12px 28px -8px rgba(19, 41, 45, .16));
    list-style: none;
    text-align: right;
}
.fap-dd:not(.is-open) > .fap-menu { display: none; }
.fap-menu [hidden] { display: none !important; }
.fap-menu-head { padding: 8px 10px 4px; color: var(--fap-c-muted, #5c7175); font-size: var(--fap-fs-2xs, 11px); font-weight: 700; }
.fap-menu-item.fap-menu-item + .fap-menu-item { margin-top: var(--fap-item-gap, 2px); }
.fap-menu-item.fap-menu-item { display: flex; align-items: center; gap: 10px; min-height: 38px; margin: 0; padding: 6px 10px; border-radius: var(--fap-menu-item-r, 10px); background: transparent; color: var(--fap-c-text, #34494d); font-size: var(--fap-fs-md, 14px); line-height: 1.5; text-decoration: none; cursor: pointer; }
.fap-menu-item.fap-menu-item:hover,
.fap-menu-item.fap-menu-item.is-active { background: var(--fap-menu-item-hover, #f3f7f7); color: var(--fap-c-ink, #13292d); }
.fap-menu-item.fap-menu-item[aria-selected="true"] { background: var(--fap-menu-item-sel-bg, #eef8f6); color: var(--fap-menu-item-sel-fg, #0b6c62); font-weight: 700; }
.fap-menu-item.is-danger.is-danger { color: var(--fap-c-error, #c81e1e); }
.fap-menu-item.is-danger.is-danger:hover { background: var(--fap-c-error-soft, #fef4f3); }
.fap-menu-item .meta { margin-inline-start: auto; color: var(--fap-c-muted, #5c7175); font-size: var(--fap-fs-xs, 12px); }
.fap-menu-sep { height: 1px; margin: 6px 4px; background: var(--fap-c-line-soft, #edf2f2); }
.fap-menu-empty { padding: 14px 10px; color: var(--fap-c-muted, #5c7175); font-size: var(--fap-fs-sm, 13px); text-align: center; }

/* Select2 (کتابخانه): همان قاب فیلد و فهرست؛ بدون آبی پیش‌فرض #5897fb */
.select2-container.select2-container--default .select2-selection--single,
.select2-container.select2-container--default .select2-selection--multiple { border: 1px solid var(--fap-field-bd, #d6e0e1); border-radius: var(--fap-field-r, 12px); background: var(--fap-field-bg, #f8fafa); }
.select2-container.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container.select2-container--default.select2-container--open .select2-selection--single,
.select2-container.select2-container--default.select2-container--focus .select2-selection--multiple { border-color: var(--fap-field-bd-focus, #1aa29a); background: var(--fap-field-bg-focus, #fff); box-shadow: var(--fap-field-ring, 0 0 0 3px #e3f4f1); }
/* فهرست با ۶ پیکسل فاصله باز می‌شود؛ گوشه‌هایی که Select2 برای چسبیدن صاف می‌کند گرد بمانند */
.select2-container.select2-container--default.select2-container--open .select2-selection--single.select2-selection--single,
.select2-container.select2-container--default.select2-container--open .select2-selection--multiple.select2-selection--multiple { border-radius: var(--fap-field-r, 12px); }
.select2-container.select2-container--default .select2-dropdown { overflow: hidden; border: 1px solid var(--fap-menu-bd, #e0e8e9); border-radius: var(--fap-menu-r, 12px); background: var(--fap-menu-bg, #fff); box-shadow: var(--fap-sh-md, 0 2px 6px rgba(19, 41, 45, .05), 0 12px 28px -8px rgba(19, 41, 45, .16)); font-family: inherit; }
.select2-container.select2-container--default .select2-dropdown--below { margin-top: 6px; }
.select2-container.select2-container--default .select2-dropdown--above { margin-top: -6px; }
.select2-container.select2-container--default .select2-results > .select2-results__options { padding: var(--fap-menu-pad, 6px); }
.select2-container.select2-container--default .select2-results__option + .select2-results__option { margin-top: var(--fap-item-gap, 2px); }
.select2-container.select2-container--default .select2-results__option { margin: 0; padding: 8px 10px; border-radius: var(--fap-menu-item-r, 10px); color: var(--fap-c-text, #34494d); font-size: var(--fap-fs-md, 14px); }
.select2-container.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--fap-menu-item-hover, #f3f7f7); color: var(--fap-c-ink, #13292d); }
.select2-container.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container.select2-container--default .select2-results__option--selected { background: var(--fap-menu-item-sel-bg, #eef8f6); color: var(--fap-menu-item-sel-fg, #0b6c62); font-weight: 700; }
.select2-container.select2-container--default .select2-search--dropdown { padding: var(--fap-menu-pad, 6px) var(--fap-menu-pad, 6px) 0; }
.select2-container.select2-container--default .select2-search--dropdown .select2-search__field { height: var(--fap-field-h-sm, 36px); padding: 0 10px; border: 1px solid var(--fap-field-bd, #d6e0e1); border-radius: var(--fap-r-sm, 10px); background: var(--fap-field-bg, #f8fafa); font: inherit; outline: none; }
.select2-container.select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--fap-field-bd-focus, #1aa29a); background: var(--fap-field-bg-focus, #fff); box-shadow: var(--fap-field-ring, 0 0 0 3px #e3f4f1); outline: none; }

/* تقویم شمسی (jalalidatepicker): رنگ برند به‌جای آبی #569ff7 */
body jdp-container { border: 1px solid var(--fap-menu-bd, #e0e8e9); border-radius: var(--fap-menu-r, 12px); box-shadow: var(--fap-sh-md, 0 2px 6px rgba(19, 41, 45, .05), 0 12px 28px -8px rgba(19, 41, 45, .16)); font-family: inherit; }
body jdp-container .jdp-day.selected,
body jdp-container .jdp-day-name.selected { background-color: var(--fap-brand-600, #0d8276) !important; color: #fff !important; }
body jdp-container .jdp-btn-close,
body jdp-container .jdp-btn-empty,
body jdp-container .jdp-btn-today { border-radius: var(--fap-r-sm, 10px); background: var(--fap-brand-600, #0d8276); }

/* =====================================================================
   برچسب وضعیت — .fap-badge  (+ شمارنده .fap-count و نقطه .fap-dot)
   ظاهر «ملایم»: زمینه رنگی روشن و متن هم‌رنگ پررنگ، بی‌حاشیه، گوشه ۶.
   لحن دسته معنی را می‌گوید و متن خود وضعیت را:
     success  کار تمام شد و نتیجه خوب بود
     warning  منتظر نفر دیگر (کارشناس، پرداخت، تایید)
     action   نوبت خود کاربر (فقط سایت؛ تنها برچسب پررنگ)
     info     در جریان، چیزی از کسی نمی‌خواهد
     error    رد، خطا، شکست، جریمه
     neutral  بسته شد بی‌خوب/بد، یا هنوز شروع نشده (پیش‌فرض)
     brand    نشان فرمولا، نه وضعیت
   در PHP: fap_badge($label, $tone, ['size' => 'sm']).
   شکل دوکلاسه است تا قانون تک‌کلاسه قدیمی یا قالب میزبان (کیت المنتور روی a) نبرد.
   ===================================================================== */
.fap-badge.fap-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: var(--fap-badge-h, 24px);
    margin: 0;
    padding: 0 9px;
    border: 0;
    border-radius: var(--fap-badge-r, 6px);
    background: var(--fap-c-bg-strong, #e8efef);
    color: var(--fap-c-text, #34494d);
    font-family: inherit;
    font-size: var(--fap-badge-fs, 12px);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: middle;
    text-decoration: none;
    box-shadow: none;
}
.fap-badge.fap-badge svg { width: 12px; height: 12px; flex: 0 0 auto; }
.fap-badge.fap-badge--sm { gap: 4px; min-height: var(--fap-badge-h-sm, 20px); padding: 0 7px; font-size: var(--fap-badge-fs-sm, 11px); }
.fap-badge.fap-badge--success { background: var(--fap-c-success-tint, #e3f5e9); color: var(--fap-c-success-strong, #166534); }
.fap-badge.fap-badge--warning { background: var(--fap-c-warning-tint, #fcefd6); color: var(--fap-c-warning-strong, #974407); }
.fap-badge.fap-badge--error { background: var(--fap-c-error-tint, #fde7e5); color: var(--fap-c-error-strong, #a91919); }
.fap-badge.fap-badge--info { background: var(--fap-c-info-tint, #e5eef9); color: var(--fap-c-info-strong, #174a7e); }
.fap-badge.fap-badge--neutral { background: var(--fap-c-bg-strong, #e8efef); color: var(--fap-c-text, #34494d); }
.fap-badge.fap-badge--brand { background: var(--fap-brand-100, #e3f4f1); color: var(--fap-brand-700, #0b6c62); }
.fap-badge.fap-badge--action { background: var(--fap-c-warning-accent, #f59e0b); color: var(--fap-c-ink, #13292d); font-weight: 700; }

/* شمارنده (تعداد کنار منو و تب) و نقطه وضعیت بی‌متن؛ هیچ‌کدام نمی‌تپد */
.fap-count.fap-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--fap-r-pill, 999px);
    background: var(--fap-brand-600, #0d8276);
    color: #fff;
    font-size: var(--fap-fs-2xs, 11px);
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.fap-count.fap-count--alert { background: var(--fap-c-error, #c81e1e); }
.fap-count.fap-count--soft { background: var(--fap-c-bg-strong, #e8efef); color: var(--fap-c-muted, #5c7175); }
.fap-dot.fap-dot { display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--fap-c-faint, #98aaae); vertical-align: middle; }
.fap-dot.fap-dot--success { background: var(--fap-c-success, #15803d); }
.fap-dot.fap-dot--warning { background: var(--fap-c-warning-accent, #f59e0b); }
.fap-dot.fap-dot--error { background: var(--fap-c-error, #c81e1e); }
.fap-dot.fap-dot--info { background: var(--fap-c-info, #1d5c9c); }
.fap-dot.fap-dot--brand { background: var(--fap-brand-500, #1aa29a); }

/* =====================================================================
   تب بخش‌ها (.fap-tabs/.fap-tab)، کنترل تکه‌ای (.fap-seg) و چیپ (.fap-chip)
   سه نقش جدا که هیچ‌کدام شبیه دکمه اصلی نیست:
     تب      جای کاربر را نشان می‌دهد؛ متن ساده + خط زیرین فیروزه‌ای.
     تکه‌ای  نمای یک فهرست را عوض می‌کند (۲ تا ۵ گزینه)؛ سفید روی ریل خاکستری.
     چیپ     فیلتر یا گزینه را روشن/خاموش می‌کند؛ انتخاب‌شده ملایم با تیک.
   فعال: .is-active یا [aria-selected="true"] یا [aria-pressed="true"]. بی گرادیان و هاله.
   ===================================================================== */
.fap-tabs.fap-tabs {
    display: flex;
    gap: var(--fap-item-gap, 2px);
    margin: 0;
    padding: 0 4px;
    border-bottom: 1px solid var(--fap-c-line, #e0e8e9);
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
}
.fap-tabs.fap-tabs::-webkit-scrollbar { display: none; }
.fap-tab.fap-tab {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    height: var(--fap-tab-h, 44px);
    margin: 0 0 -1px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--fap-r-sm, 10px) var(--fap-r-sm, 10px) 0 0;
    background: transparent;
    color: var(--fap-c-muted, #5c7175);
    font-family: inherit;
    font-size: var(--fap-fs-md, 14px);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
}
.fap-tab.fap-tab:hover { background: var(--fap-c-bg, #f3f7f7); color: var(--fap-c-ink, #13292d); }
.fap-tab.fap-tab.is-active,
.fap-tab.fap-tab[aria-selected="true"] { background: transparent; color: var(--fap-brand-700, #0b6c62); font-weight: 700; }
.fap-tab.fap-tab.is-active::after,
.fap-tab.fap-tab[aria-selected="true"]::after { content: ""; position: absolute; inset-inline: 10px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--fap-brand-600, #0d8276); }
.fap-tab.fap-tab:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--fap-brand-300, #9fd9d1); }
.fap-tab.fap-tab svg { width: 16px; height: 16px; flex: 0 0 auto; }

.fap-seg.fap-seg {
    position: relative;
    display: inline-flex;
    gap: var(--fap-item-gap, 2px);
    margin: 0;
    padding: 4px;
    border: 0;
    border-radius: var(--fap-seg-r, 12px);
    background: var(--fap-c-bg-strong, #e8efef);
}
.fap-seg.fap-seg--block { display: flex; }
.fap-seg--block > .fap-seg__item { flex: 1 1 0; }
.fap-seg__item.fap-seg__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: var(--fap-seg-h, 34px);
    margin: 0;
    padding: 0 14px;
    border: 0;
    border-radius: var(--fap-seg-item-r, 8px);
    background: transparent;
    color: var(--fap-c-muted, #5c7175);
    font-family: inherit;
    font-size: var(--fap-fs-sm, 13px);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
}
.fap-seg__item.fap-seg__item:hover { color: var(--fap-c-ink, #13292d); }
.fap-seg__item.fap-seg__item.is-active,
.fap-seg__item.fap-seg__item[aria-selected="true"],
.fap-seg__item.fap-seg__item[aria-pressed="true"] { background: #fff; color: var(--fap-c-ink, #13292d); font-weight: 700; box-shadow: var(--fap-sh-xs, 0 1px 2px rgba(19, 41, 45, .06)); }
.fap-seg__item.fap-seg__item:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--fap-brand-300, #9fd9d1); }

.fap-chip.fap-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--fap-chip-h, 34px);
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--fap-field-bd, #d6e0e1);
    border-radius: var(--fap-chip-r, 10px);
    background: #fff;
    color: var(--fap-c-text, #34494d);
    font-family: inherit;
    font-size: var(--fap-fs-sm, 13px);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
}
.fap-chip.fap-chip:hover { border-color: var(--fap-c-line-strong, #c4d2d4); background: var(--fap-c-bg-soft, #f8fafa); color: var(--fap-c-ink, #13292d); }
.fap-chip.fap-chip:focus-visible { outline: none; border-color: var(--fap-brand-500, #1aa29a); box-shadow: 0 0 0 3px var(--fap-brand-100, #e3f4f1); }
.fap-chip.fap-chip.is-active,
.fap-chip.fap-chip[aria-pressed="true"],
.fap-chip.fap-chip[aria-selected="true"] { border-color: var(--fap-brand-600, #0d8276); background: var(--fap-brand-50, #eef8f6); color: var(--fap-brand-700, #0b6c62); }
.fap-chip.fap-chip.is-active::before,
.fap-chip.fap-chip[aria-pressed="true"]::before,
.fap-chip.fap-chip[aria-selected="true"]::before {
    content: "";
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fap-chip.fap-chip svg { width: 14px; height: 14px; flex: 0 0 auto; }
/* فیلتر اعمال‌شده با دکمه حذف */
.fap-chip.fap-chip--remove { padding-inline-end: 4px; border-color: var(--fap-brand-200, #c6e9e4); background: var(--fap-brand-50, #eef8f6); color: var(--fap-brand-700, #0b6c62); cursor: default; }
.fap-chip__x { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 0; padding: 0; border: 0; border-radius: var(--fap-r-xs, 6px); background: transparent; color: inherit; cursor: pointer; }
.fap-chip__x:hover { background: var(--fap-brand-100, #e3f4f1); }
/* افزودن فیلتر */
.fap-chip.fap-chip--add { border-style: dashed; color: var(--fap-c-muted, #5c7175); }

/* =====================================================================
   حالت خالی (.fap-empty) و اسکلت بارگذاری (.fap-sk)
   خالی: همیشه وسط‌چین؛ آیکن در دایره فیروزه‌ای ملایم، عنوان (چه چیزی نیست)،
   یک جمله راهنما (چه کنند) و اگر کاری از دستشان برمی‌آید، دکمه‌اش.
     --sm    درون جدول، کارت کوچک، فهرست کشویی و نمودار
     --card  وقتی خودش روی پس‌زمینه صفحه می‌نشیند
   PHP: fap_empty($title, ['text' => …, 'icon' => 'search', 'actions' => […]])
   JS:  fapMsg.empty(title, {text, icon, size, actions})
   آیکن: data-ic روی .fap-empty__ic (inbox پیش‌فرض) یا یک svg درونش.
   ===================================================================== */
.fap-empty.fap-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 36px 20px;
    text-align: center;
    color: var(--fap-c-muted, #5c7175);
    font-size: var(--fap-fs-md, 14px);
    line-height: 1.8;
}
.fap-empty.fap-empty--card { background: #fff; border: 1px solid var(--fap-c-line, #e0e8e9); border-radius: var(--fap-r-lg, 16px); }
.fap-empty__ic { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0 0 4px; border-radius: 50%; background: var(--fap-brand-100, #e3f4f1); color: var(--fap-brand-600, #0d8276); }
.fap-empty__ic svg { width: 26px; height: 26px; }
.fap-empty__ic:empty::before { content: ""; width: 26px; height: 26px; background: currentColor; -webkit-mask: var(--fap-empty-ic, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E")) center / contain no-repeat; mask: var(--fap-empty-ic, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E")) center / contain no-repeat; }
.fap-empty__ic[data-ic="search"] { --fap-empty-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); }
.fap-empty__ic[data-ic="heart"] { --fap-empty-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 1 0-7.8 7.8l1 1.1L12 21l7.8-7.5 1-1.1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E"); }
.fap-empty__ic[data-ic="chart"] { --fap-empty-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E"); }
.fap-empty__ic[data-ic="bell"] { --fap-empty-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.7 21a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E"); }
.fap-empty__ic[data-ic="wallet"] { --fap-empty-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7V5a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2'/%3E%3Cpath d='M3 6v12a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-3'/%3E%3C/svg%3E"); }
.fap-empty__ic[data-ic="clock"] { --fap-empty-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.fap-empty__ic[data-ic="car"] { --fap-empty-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 17h2a1 1 0 0 0 1-1v-3a2 2 0 0 0-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3A2.5 2.5 0 0 0 12 7H5a1.5 1.5 0 0 0-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4a1 1 0 0 0 1 1h2'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Cpath d='M9 17h6'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E"); }
.fap-empty__ic[data-ic="doc"] { --fap-empty-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E"); }
.fap-empty__ic[data-ic="image"] { --fap-empty-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E"); }
.fap-empty__ic[data-ic="lock"] { --fap-empty-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); }
.fap-empty__ic[data-ic="check"] { --fap-empty-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12.5 2.5 2.5 4.5-5'/%3E%3C/svg%3E"); }
.fap-empty .fap-empty__title { margin: 0; padding: 0; color: var(--fap-c-ink, #13292d); font-size: var(--fap-fs-lg, 16px); font-weight: 700; line-height: 1.6; }
.fap-empty .fap-empty__text { margin: 0; max-width: 46ch; color: var(--fap-c-muted, #5c7175); font-size: var(--fap-fs-md, 14px); line-height: 1.8; }
.fap-empty__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.fap-empty a.fap-empty__link { color: var(--fap-brand-700, #0b6c62); font-weight: 600; text-decoration: none; }
.fap-empty a.fap-empty__link:hover { text-decoration: underline; }
.fap-empty.fap-empty--sm { gap: 2px; padding: 20px 14px; font-size: var(--fap-fs-sm, 13px); }
.fap-empty--sm .fap-empty__ic { width: auto; height: auto; margin: 0 0 4px; background: none; color: var(--fap-c-faint, #98aaae); }
.fap-empty--sm .fap-empty__ic svg,
.fap-empty--sm .fap-empty__ic:empty::before { width: 20px; height: 20px; }
.fap-empty--sm .fap-empty__title { color: var(--fap-c-text, #34494d); font-size: var(--fap-fs-sm, 13px); font-weight: 600; }
.fap-empty--sm .fap-empty__text { font-size: var(--fap-fs-sm, 13px); }
.fap-empty--sm .fap-empty__acts { margin-top: 6px; }

/* اسکلت: یک درخشش آرام برای همه؛ هم‌رنگ اسکلت پنل حساب (حس «داده واقعی در راه») */
@keyframes fap-sk { from { background-position: 100% 0; } to { background-position: 0 0; } }
.fap-sk {
    display: block;
    border-radius: var(--fap-r-xs, 6px);
    background: linear-gradient(90deg, var(--fap-sk-base, #e3eaea) 25%, var(--fap-sk-hi, #f1f5f5) 40%, var(--fap-sk-base, #e3eaea) 60%) 0 0 / 300% 100%;
    animation: fap-sk var(--fap-sk-dur, 1.4s) ease-in-out infinite;
}
.fap-sk.fap-sk--line { height: 12px; }
.fap-sk.fap-sk--title { height: 16px; }
.fap-sk.fap-sk--block { border-radius: var(--fap-r-md, 12px); }
.fap-sk.fap-sk--circle { border-radius: 50%; }
@media (prefers-reduced-motion: reduce) {
    .fap-sk { animation: none; }
}

/* =====================================================================
 * آیکن واحد (.fap-i) — fap_icon() / fapIcon()
 *
 * همه ظاهر در خود SVG است (اندازه، خط، currentColor) تا روی صفحه‌هایی که این
 * فایل را بار نمی‌کنند هم درست باشد. این‌جا فقط زره است: بعضی پوسته‌ها و کیت
 * المنتور روی svg/path رنگ fill یا max-width می‌گذارند.
 * ===================================================================== */
.fap-i.fap-i { flex: none; max-width: none; overflow: visible; fill: none; }
.fap-i :where(path, circle, rect, line, ellipse, polyline, polygon):not([fill]) { fill: none; }
/* آیکن کنار متن (نه در flex) روی خط پایه بالا می‌ایستد؛ اختصاصیت صفر تا هر قانون میزبان (مثل .dashicons) ببرد */
:where(.fap-i) { vertical-align: -.2em; }

/* =====================================================================
 * سربرگ صفحه (.fap-phead) — همه پنل‌های پیشخوان
 *
 * تنها جایی که گرادیان مجاز است (--fap-phead-bg). بی‌سایه، بی‌لکه و هاله تزئینی.
 * <header class="fap-phead"><div class="fap-phead__main"><span class="fap-phead__ic">fap_icon(…, 28)</span>
 *   <div><h1 class="fap-phead__title">…</h1><p class="fap-phead__sub">…</p></div></div>
 *   <div class="fap-phead__acts"><span class="fap-phead__stat"><b>۱۷</b> درخواست</span> …دکمه‌ها</div></header>
 * پنل‌های قدیمی (fap-bs-hero، fap-mkt-header، …) همین مقادیر را مستقیم دارند.
 * ===================================================================== */
.fap-phead.fap-phead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; margin: 0 0 16px; padding: 20px 24px; border-radius: var(--fap-r-lg, 16px); background: var(--fap-phead-bg, linear-gradient(120deg, #1aa29a 0%, #0b6c62 100%)); color: #fff; box-shadow: none; }
.fap-phead__main { display: flex; align-items: center; gap: 16px; min-width: 0; }
.fap-phead__ic { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--fap-r-md, 12px); background: rgba(255, 255, 255, .16); color: #fff; }
.fap-phead__title.fap-phead__title { margin: 0 0 4px; padding: 0; color: #fff; font-size: var(--fap-fs-2xl, 22px); font-weight: 800; line-height: 1.4; }
.fap-phead__sub.fap-phead__sub { margin: 0; color: rgba(255, 255, 255, .86); font-size: var(--fap-fs-sm, 13px); line-height: 1.8; }
.fap-phead__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fap-phead__stat { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 18px; border-radius: var(--fap-r-md, 12px); background: rgba(255, 255, 255, .16); font-size: var(--fap-fs-xs, 12px); line-height: 1.2; }
.fap-phead__stat b { font-size: var(--fap-fs-2xl, 22px); font-weight: 800; font-variant-numeric: tabular-nums; }
@media (max-width: 768px) {
    .fap-phead.fap-phead { padding: 16px; border-radius: var(--fap-r-md, 12px); }
    .fap-phead__title.fap-phead__title { font-size: var(--fap-fs-xl, 18px); }
}

/* =====================================================================
 * کارت (.fap-card) — «فقط حاشیه» مثل پنل حساب (به انتخاب کاربر): بی‌سایه، گوشه ۱۶
 * <section class="fap-card"><header class="fap-card__head"><span class="fap-card__ic">fap_icon(…, 18)</span>
 *   <div><h3 class="fap-card__title">…</h3><span class="fap-card__sub">…</span></div><div class="fap-card__acts">…</div></header>
 *   <div class="fap-card__body">…</div></section>
 * کاشی عدد (KPI) هم بی‌سایه است ولی گوشه ۱۲ دارد؛ رنگ کاشی‌های آمار عمدا رنگی می‌ماند.
 * ===================================================================== */
.fap-card.fap-card { background: #fff; border: 1px solid var(--fap-c-line, #e0e8e9); border-radius: var(--fap-r-lg, 16px); box-shadow: none; }
.fap-card + .fap-card { margin-top: 12px; }
.fap-card__head { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--fap-c-line-soft, #edf2f2); }
.fap-card__ic { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--fap-r-sm, 10px); background: var(--fap-brand-50, #eef8f6); color: var(--fap-brand-600, #0d8276); }
.fap-card__title.fap-card__title { margin: 0; padding: 0; color: var(--fap-c-ink, #13292d); font-size: var(--fap-fs-lg, 15px); font-weight: 700; line-height: 1.6; }
.fap-card__sub { display: block; color: var(--fap-c-muted, #5c7175); font-size: var(--fap-fs-xs, 12px); font-weight: 500; }
.fap-card__acts { display: flex; flex-wrap: wrap; gap: 6px; margin-inline-start: auto; }
.fap-card__body { padding: 16px 20px; color: var(--fap-c-text, #34494d); font-size: var(--fap-fs-sm, 13.5px); }
@media (max-width: 768px) { .fap-card__head, .fap-card__body { padding-inline: 16px; } }

/* =====================================================================
 * جدول (.fap-table در .fap-table-wrap) — زبان مشترک جدول‌های کاربر و پیشخوان
 *
 * ظرف اسکرول با قاب گرد؛ سرستون خاکستری ملایم (تخت)، متن muted ۱۲/۷۰۰؛ فقط خط افقی؛ هاور ملایم.
 * زره: ریست قالب (table, th, td {border:1px}) اول خنثی می‌شود. وضعیت‌ها با fap_badge().
 * ===================================================================== */
.fap-table-wrap { overflow-x: auto; max-width: 100%; min-width: 0; border: 1px solid var(--fap-c-line, #e0e8e9); border-radius: var(--fap-r-md, 12px); background: #fff; }
.fap-table.fap-table { width: 100%; margin: 0; border: 0; border-collapse: collapse; background: none; font-size: var(--fap-fs-sm, 13.5px); }
.fap-table.fap-table :where(thead, tbody, tr, th, td) { border: 0; background: none; }
.fap-table.fap-table th { padding: 11px 14px; border-bottom: 1px solid var(--fap-c-line, #e0e8e9); background: var(--fap-c-bg, #f3f7f7); color: var(--fap-c-muted, #5c7175); font-size: var(--fap-fs-xs, 12px); font-weight: 700; text-align: start; white-space: nowrap; }
.fap-table.fap-table td { padding: 12px 14px; border-bottom: 1px solid var(--fap-c-line-soft, #edf2f2); color: var(--fap-c-text, #34494d); text-align: start; vertical-align: middle; }
.fap-table.fap-table tbody tr:last-child td { border-bottom: 0; }
.fap-table.fap-table tbody tr:hover td { background: var(--fap-c-bg-soft, #f8fafa); }
.fap-table .is-num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* =====================================================================
 * نوار پیشرفت (.fap-progress) و صفحه‌بندی (.fap-pager)
 * <div class="fap-progress" role="progressbar" aria-valuenow="64"><span style="width:64%"></span></div>
 * <nav class="fap-pager"><a>…</a><span class="is-current" aria-current="page">۲</span><span class="is-gap">…</span></nav>
 * صفحه فعلی «ملایم» است (به انتخاب کاربر)، مثل گزینه انتخاب‌شده فهرست‌ها و چیپ‌ها.
 * ===================================================================== */
.fap-progress { height: 8px; overflow: hidden; border-radius: var(--fap-r-pill, 999px); background: var(--fap-c-bg-strong, #e8efef); }
.fap-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--fap-brand-600, #0d8276); transition: width .2s ease; }
.fap-progress.is-done > span { background: var(--fap-c-success, #15803d); }
.fap-progress.is-error > span { background: var(--fap-c-error, #c81e1e); }
.fap-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.fap-pager > a, .fap-pager > span { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 8px; border: 1px solid var(--fap-c-line, #e0e8e9); border-radius: var(--fap-r-sm, 10px); background: #fff; color: var(--fap-c-text, #34494d); font-size: var(--fap-fs-sm, 13px); font-weight: 600; text-decoration: none; }
.fap-pager > a:hover { border-color: var(--fap-c-line-strong, #c4d2d4); background: var(--fap-c-bg-soft, #f8fafa); color: var(--fap-c-ink, #13292d); }
.fap-pager > .is-current { border-color: var(--fap-brand-200, #c6e9e4); background: var(--fap-brand-100, #e3f4f1); color: var(--fap-brand-700, #0b6c62); font-weight: 800; }
.fap-pager > .is-gap { border-color: transparent; background: none; color: var(--fap-c-faint, #98aaae); }
@media (prefers-reduced-motion: reduce) { .fap-progress > span { transition: none; } }