/* فونت وزیرمتن از روی خودِ سرور لود می‌شه، نه از سرورهای گوگل.
دلیل: لینک گوگل‌فونت رندر صفحه رو بلاک می‌کنه و چون از ایران کند/ناپایداره،
کل صفحه تا تایم‌اوت شدنش معطل می‌موند. اگه فایل فونت هم نبود، مرورگر بی‌درنگ
می‌ره سراغ Tahoma و صفحه بدون هیچ تاخیری بالا میاد. */
@font-face {
font-family: 'Vazirmatn';
src: url('/static/fonts/Vazirmatn-Regular.woff2') format('woff2');
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Vazirmatn';
src: url('/static/fonts/Vazirmatn-Medium.woff2') format('woff2');
font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Vazirmatn';
src: url('/static/fonts/Vazirmatn-Bold.woff2') format('woff2');
font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'Vazirmatn';
src: url('/static/fonts/Vazirmatn-ExtraBold.woff2') format('woff2');
font-weight: 800; font-style: normal; font-display: swap;
}
:root {
/* ===== پالت دقیقاً مطابق فایل فیگما (style/app style) ===== */
--accent: #2B3EAC;
--accent2: #4F6AFF;
--accent-dark: #081B89; /* نسخه‌ی تیره‌ترِ accent، برای گرادیانتِ کارت‌های تبلیغاتی */
--accent-text: #2B3EAC; /* رنگ کسب‌وکار وقتی به‌عنوان متن (نه پس‌زمینه) میاد */
--accent2-text: #4F6AFF;
--border: #E5E7EB;
--page-bg: #F4F5F7;
--header-bg: #F9FAFB;
--total-bg: #EEF1FF;
--text: #111827;
--muted: #6B7280;
--surface: #ffffff;
--sidebar-active-bg: #EEF1FF;
--pastel-red: #FEF2F2; --pastel-red-text: #DC2626;
--pastel-yellow: #FEF3C7; --pastel-yellow-text: #D97706;
--pastel-green: #ECFDF5; --pastel-green-text: #059669;
--pastel-blue: #EEF1FF; --pastel-blue-text: #2B3EAC;
/* ===== توکن‌های معنایی وضعیت =====
تا رنگ «موفق/خطا/هشدار/اطلاع» یک‌جا تعریف بشه و توی جاوااسکریپت هاردکد نشه.
مقدارها همون پالت pastel بالاست، فقط با اسم معنایی تا استفاده‌شون خواناتر باشه. */
--success: #047857; --success-soft: #ECFDF5;
--danger: #CE1F1F; --danger-soft: #FEF2F2;
--warning: #B45309; --warning-soft: #FEF3C7;
--info: #2B3EAC; --info-soft: #EEF1FF;
--neutral: #6B7280; --neutral-soft: #F3F4F6;
--purple: #7C3AED; --purple-soft: #F3E8FF;
--teal: #0D9488; --teal-soft: #ECFDF9;
--card-radius: 12px;
/* شعاعِ گوشه‌ی مخصوصِ کارت‌های داشبورد — عمداً از --card-radius سراسری جداست تا
بازطراحیِ داشبورد روی بقیه‌ی صفحه‌ها (کیف پول، تنظیمات، ویترین…) اثر نذاره */
--dash-radius: 16px;
/* سایه‌ی نرم و یکدستِ کارت‌ها (سبک soft) */
--card-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 4px 12px rgba(17, 24, 39, 0.05);
--card-shadow-hover: 0 2px 4px rgba(17, 24, 39, 0.06), 0 8px 20px rgba(17, 24, 39, 0.08);
--focus-ring: 0 0 0 3px rgba(79, 106, 255, 0.35);
--ui-zoom: 1;
--font-main: 'Vazirmatn', 'Tahoma', 'Segoe UI', sans-serif;
}
html[data-theme="dark"] {
--border: #363d59;
--page-bg: #1a1e2c;
--header-bg: #232a44;
--total-bg: #283463;
--text: #ececec;
--muted: #aab0c6;
--surface: #212739;
--sidebar-active-bg: #283463;
--accent-text: #93a9ff; /* نسخه‌ی روشنِ رنگ کسب‌وکار، برای متن روی پس‌زمینه‌ی تیره */
--accent2-text: #b9c6ff;
--pastel-red: #3a1f1f; --pastel-red-text: #f87171;
--pastel-yellow: #3a3320; --pastel-yellow-text: #fbbf24;
--pastel-green: #16302a; --pastel-green-text: #34d399;
--pastel-blue: #232c4d; --pastel-blue-text: #93a9ff;
--success: #34d399; --success-soft: #16302a;
--danger: #f87171; --danger-soft: #3a1f1f;
--warning: #fbbf24; --warning-soft: #3a3320;
--info: #93a9ff; --info-soft: #232c4d;
--neutral: #aab0c6; --neutral-soft: #2a3048;
--purple: #c4b5fd; --purple-soft: #2e2350;
--teal: #5eead4; --teal-soft: #123634;
--card-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 4px 14px rgba(0, 0, 0, 0.32);
--card-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.34), 0 10px 24px rgba(0, 0, 0, 0.42);
--focus-ring: 0 0 0 3px rgba(147, 169, 255, 0.45);
}
html[data-theme="dark"] .field-line input,
html[data-theme="dark"] .aux-column .field-line input,
html[data-theme="dark"] .stamp-upload-hint {
border-color: #4a4b52;
}
/* فاکتور و چاپ فاکتور استایل جدا و ثابت خودشون رو دارن؛ مستقل از تم/پالت رنگی بقیه‌ی سیستم
(این استایل بعداً جدا طراحی می‌شه، فعلاً همون ظاهر قبلی‌شو نگه می‌داریم) */
#panelInvoice, #invoiceViewPageView {
--accent: #e2483a;
--border: #e2e2e2;
--page-bg: #eef0f2;
--header-bg: #f7f7f7;
--total-bg: #fdeeec;
--text: #262626;
--muted: #6b6b6b;
--surface: #ffffff;
/* ===== چرا رنگِ متن اینجا دوباره اعلام می‌شه؟ =====
رنگِ متنِ کلِ برنامه از body میاد: body { color: var(--text) }. متغیر همون‌جا
(روی body) به مقدار تبدیل می‌شه، پس بازتعریفِ --text روی همین سند فقط جاهایی
اثر داشت که خودشون var(--text) صدا می‌زدن؛ بقیه‌ی متن‌ها رنگِ محاسبه‌شده‌ی body
رو به ارث می‌بردن. تو تمِ شب یعنی متنِ روشن — و موقعِ چاپ، متنِ روشن روی کاغذِ
سفید: نامرئی. با این خط، --text دوباره روی خودِ سند حل می‌شه و کلِ زیردرخت
رنگِ درست (تیره موقعِ چاپ) رو می‌گیره.
(چرا استایل‌شیت نمی‌تونه از ریشه درستش کنه: رنگ‌های تمِ شب سمتِ جاوااسکریپت
به‌صورت inline روی نوشته می‌شن و inline از هر قانونِ استایل‌شیت بالاتره.) */
color: var(--text);
}
/* فرمِ ساختِ فاکتور و صفحه‌ی مشاهده‌ی فاکتور، هر دو از تمِ روز/شبِ برنامه پیروی
می‌کنن. رنگِ شناسه‌ایِ سند (قرمز) تو هر دو تم می‌مونه، فقط روشنایی‌ش برای
زمینه‌ی تیره بالا می‌ره. موقعِ چاپ پالتِ روشن برمی‌گرده — کاغذ همیشه سفیده. */
html[data-theme="dark"] #panelInvoice,
html[data-theme="dark"] #invoiceViewPageView {
--accent: #f0705f;
--border: #3a4159;
--page-bg: #1a1e2c;
--header-bg: #262d45;
--total-bg: #3a2320;
--text: #ececec;
--muted: #aab0c6;
--surface: #212739;
}
/* ===== کاغذ همیشه روشنه =====
چه تمِ اپ شب باشه چه روز، سندِ چاپی/PDF باید دقیقاً همون پالتِ روشنِ پوسته‌ی
کلاسیک رو داشته باشه. کلِ پالت اینجا دوباره تعریف می‌شه (نه فقط چند توکن)
تا هیچ رنگِ تمِ شبی از راهِ توکن‌های معنایی (وضعیت، پاستل‌ها، ته‌رنگِ ردیفِ
فعال…) به کاغذ نشت نکنه.
چرا روی همین دو المان و نه روی :root؟ چون رنگ‌های تمِ شب سمتِ جاوااسکریپت
به‌صورت inline روی نوشته می‌شن و استایل‌شیت نمی‌تونه inline رو ببره؛
ولی همین متغیرها اگه روی خودِ عنصرِ سند اعلام بشن، برای کلِ زیردرختش برنده‌ن. */
@media print {
html[data-theme="dark"] #panelInvoice,
html[data-theme="dark"] #invoiceViewPageView {
--accent: #e2483a;
--accent-text: var(--biz-accent, #2B3EAC);
--border: #e2e2e2;
--page-bg: #eef0f2;
--header-bg: #f7f7f7;
--total-bg: #fdeeec;
--text: #262626;
--muted: #6b6b6b;
--surface: #ffffff;
--sidebar-active-bg: #EEF1FF;
--pastel-red: #FEF2F2; --pastel-red-text: #DC2626;
--pastel-yellow: #FEF3C7; --pastel-yellow-text: #D97706;
--pastel-green: #ECFDF5; --pastel-green-text: #059669;
--pastel-blue: #EEF1FF; --pastel-blue-text: #2B3EAC;
--success: #047857; --success-soft: #ECFDF5;
--danger: #CE1F1F; --danger-soft: #FEF2F2;
--warning: #B45309; --warning-soft: #FEF3C7;
--info: #2B3EAC; --info-soft: #EEF1FF;
--neutral: #6B7280; --neutral-soft: #F3F4F6;
--purple: #7C3AED; --purple-soft: #F3E8FF;
--teal: #0D9488; --teal-soft: #ECFDF9;
}
}
/* گرفتنِ عکسِ فاکتور (html2canvas، برای «ارسال به‌صورت تصویر») روی مدیاکوئریِ print
اجرا نمی‌شه؛ برای همینم موقعِ ساختِ تصویر همین کلاسِ printing-invoice-view (که برای
چاپِ واقعی هم استفاده می‌شه) رو موقتاً روی body می‌ذاریم تا همون پالتِ کلاسیکِ بالا،
مستقل از پرینت‌بودنِ واقعی، اعمال بشه. باید بعد از قانونِ تمِ شبِ بالا بیاد چون
اسپسیفیسیتی‌شون برابره و ترتیب توی فایل تعیین‌کننده‌ست. */
body.printing-invoice-view #panelInvoice,
body.printing-invoice-view #invoiceViewPageView {
--accent: #e2483a;
--accent-text: var(--biz-accent, #2B3EAC);
--border: #e2e2e2;
--page-bg: #eef0f2;
--header-bg: #f7f7f7;
--total-bg: #fdeeec;
--text: #262626;
--muted: #6b6b6b;
--surface: #ffffff;
--sidebar-active-bg: #EEF1FF;
--pastel-red: #FEF2F2; --pastel-red-text: #DC2626;
--pastel-yellow: #FEF3C7; --pastel-yellow-text: #D97706;
--pastel-green: #ECFDF5; --pastel-green-text: #059669;
--pastel-blue: #EEF1FF; --pastel-blue-text: #2B3EAC;
--success: #047857; --success-soft: #ECFDF5;
--danger: #CE1F1F; --danger-soft: #FEF2F2;
--warning: #B45309; --warning-soft: #FEF3C7;
--info: #2B3EAC; --info-soft: #EEF1FF;
--neutral: #6B7280; --neutral-soft: #F3F4F6;
--purple: #7C3AED; --purple-soft: #F3E8FF;
--teal: #0D9488; --teal-soft: #ECFDF9;
}
/* ===== سربرگِ صفحه‌ی مشاهده: دکمه‌ی بازگشت (جایگزینِ ضربدرِ پاپ‌آپ) ===== */
.iv-page-head { display: flex; align-items: center; margin-bottom: 10px; }
.iv-back-btn {
display: inline-flex; align-items: center; gap: 6px;
background: var(--surface); color: var(--text);
border: 1px solid var(--border); border-radius: 10px;
padding: 7px 12px; font-family: inherit; font-size: 13px; font-weight: 700;
cursor: pointer; transition: .15s;
}
.iv-back-btn .ic { width: 17px; height: 17px; }
@media (hover: hover) {
.iv-back-btn:hover { border-color: var(--accent); color: var(--accent); }
}
* { margin: 0; padding: 0; box-sizing: border-box; }
/* ===== رفتار لمسی موبایل (مرحله‌ی ۱) =====
این بلوک هیچ‌چیزی رو جابه‌جا یا رنگی نمی‌کنه؛ فقط رفتارهایی رو خاموش می‌کنه که
مرورگر برای «یک صفحه‌ی وب» انجام می‌ده و داخل یه اپ بی‌معنان. */
/* اندروید روی هر لمس یه فلاش خاکستری می‌زنه که هیچ اپ نیتیوی نداره */
* { -webkit-tap-highlight-color: transparent; }
/* دبل‌تپ رو صفحه نباید زوم کنه — این ژست مرورگر برای «صفحه‌ی وب»ه، نه رفتار اپ.
manipulation یعنی: پن (اسکرول) و پینچ-زوم دست‌نخورده می‌مونن، فقط ژست دبل‌تپ-زوم خاموش می‌شه؛
برخلاف user-scalable=no که پینچ-زوم رو هم برای همیشه می‌بنده (بد برای دسترسی‌پذیری). */
* { touch-action: manipulation; }
/* کشیدنِ صفحه نباید رفرشِ مرورگر یا کشسانیِ لبه (که پس‌زمینه‌ی مرورگر رو لو می‌ده) فعال کنه */
html, body { overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
/* ===== «بکش تا تازه شود» =====
نشانگر بیرونِ ظرفِ اسکروله و fixed می‌مونه تا کشیدنِ محتوا جابه‌جاش نکنه.
بالای صفحه پنهونه و با انگشت پایین میاد. */
.pull-refresh {
position: fixed; top: 6px; left: 50%; z-index: 900;
transform: translateX(-50%) translateY(-60px); opacity: 0;
width: 36px; height: 36px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--surface, #fff); color: var(--muted);
box-shadow: 0 3px 14px rgba(0,0,0,.16);
pointer-events: none;
}
.pull-refresh .ic { width: 19px; height: 19px; }
.pull-refresh.is-ready { color: var(--accent, #FF8138); }
.pull-refresh.is-refreshing .ic { animation: pullSpin .7s linear infinite; }
/* وقتی انگشت برداشته می‌شه و به آستانه نرسیده، نرم برمی‌گرده بالا */
.pull-refresh:not(.is-pulling) { transition: transform .25s ease, opacity .25s ease; }
@keyframes pullSpin { to { transform: rotate(360deg); } }
/* ریلودِ ناشی از کشیدن: پرده‌ی تمام‌صفحه نمیاد، فقط همین نشانگرِ کوچک می‌چرخه */
html.is-pull-reloading .pull-refresh {
opacity: 1; transform: translateX(-50%) translateY(14px);
}
html.is-pull-reloading .pull-refresh .ic { animation: pullSpin .7s linear infinite; }
@media (prefers-reduced-motion: reduce) { .pull-refresh.is-refreshing .ic { animation: none; } }
/* رسیدن به ته یک لیست نباید صفحه‌ی پشتش رو هم بکشه */
.shell-main, .sidebar-page-content, .modal-box, .account-sidebar, .table-wrap {
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
/* عناصرِ رابط با لمسِ طولانی انتخاب نشن (مثل اپ نیتیو)، ولی محتوای واقعی —
مبلغ، شماره، نام مشتری — همچنان قابل کپی بمونه */
.main-nav, .mobile-shortcut-bar, .shell-topbar, .main-tabs,
.settings-tabs, .sidebar-page-header, button, label {
-webkit-user-select: none; user-select: none;
}
img { max-width: 100%; } /* svg رو عمداً مستثنی می‌کنیم: آیکون‌های inline (.ic) با em سایز می‌شن و max-width:100% روی svgِ بدون width/height صریح، داخل دکمه‌های flex، به‌جای محدودکردن، عرضش رو صفر می‌کنه */
html, body { height: 100%; }
/* ===== نوارِ خالیِ ته صفحه روی آیفونِ نصب‌شده =====
با ترکیبِ viewport-fit=cover و نوارِ وضعیتِ شفاف، iOS کلِ سند رو به‌اندازه‌ی
ارتفاعِ نوارِ ساعت به بالا می‌کِشه. نتیجه‌ش یه نوارِ خالی به همون اندازه ته
صفحه‌ست: روی آیفون ۱۵ بلندتر از آیفون ۷، و روی اندروید اصلاً وجود نداره —
که با چیزی که Ali روی هر سه دستگاه دید دقیقاً می‌خونه.
راه‌حلِ شناخته‌شده‌ش اینه که همون مقدار به ارتفاعِ سند برگردونده بشه. */
html { min-height: calc(100% + env(safe-area-inset-top, 0px)); }
body {
background: var(--page-bg);
font-family: 'Vazirmatn', 'Tahoma', 'Segoe UI', sans-serif;
color: var(--text);
display: flex;
height: 100vh;
overflow: hidden;
}
.app-shell { width: 100%; }
/* بزرگ‌نمایی متن (--ui-zoom) فقط روی محتوای هر صفحه اعمال می‌شه، نه روی کل body —
چون zoom روی یک عنصر height:100vh باعث می‌شه اندازه‌ی واقعی رندرشده‌ش کوچیک‌تر از صفحه بشه
و یه فاصله‌ی خالی ته صفحه بیفته (سایدبار/هدر که همیشه باید تمام‌قد باشن رو دیگه لمس نمی‌کنه) */
/* پوشش‌های تمام‌صفحه محتوای صفحه نیستن؛ نه پدینگِ صفحه باید بگیرن نه zoom.
zoom روی یه المان اون رو تبدیل به stacking context و containing block می‌کنه،
و همین باعث می‌شد پاپ‌آپ زیرِ کشوی کسب‌وکار و سایدبار بیفته. */
.shell-main > div:not(.shell-topbar):not(.modal-overlay) { padding: 24px 28px; zoom: var(--ui-zoom); }
/* ===== قاب اصلی (سایدبار سرمه‌ای + هدر بالا + محتوا) — دقیقاً مطابق Shell.tsx فیگما ===== */
.shell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-y: auto; }
/* ----- بنرِ اطلاع‌رسانیِ سراسری (از پنلِ ادمین روشن/خاموش می‌شه) -----
body با ارتفاعِ 100vh و box-sizing: border-box، پس padding-top باعثِ کوچیک‌شدنِ
ناحیه‌ی محتوا می‌شه نه سرریزِ صفحه. */
body.has-global-banner { padding-top: 42px; }
.global-banner {
position: fixed; top: 0; left: 0; right: 0; z-index: 60;
display: flex; align-items: center; gap: 12px; height: 42px;
padding: 0 16px; font-size: 13px; line-height: 1.6;
background: #1E40AF; color: #fff;
}
.global-banner.is-warning { background: #B45309; }
.global-banner-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.global-banner-close {
flex-shrink: 0; background: rgba(255,255,255,.18); color: #fff; border: none;
border-radius: 6px; padding: 3px 10px; font-family: inherit; font-size: 12px; cursor: pointer;
}
@media (hover: hover) { .global-banner-close:hover { background: rgba(255,255,255,.32); } }
@media (max-width: 900px) {
body.has-global-banner { padding-top: calc(42px + env(safe-area-inset-top, 0px)); }
.global-banner { height: calc(42px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); }
.global-banner-text { white-space: normal; font-size: 12px; }
}
.shell-topbar {
display: flex; align-items: center; gap: 16px;
background: var(--surface); border: none; border-bottom: 1px solid var(--border); border-radius: 0;
padding: 0 28px; height: 60px; margin-bottom: 0; flex-shrink: 0;
position: sticky; top: 0; z-index: 10;
}
.shell-topbar h1 { flex: 1; margin: 0; font-size: 16px; font-weight: 700; color: var(--text); font-family: inherit; }
.shell-topbar-btn-primary {
background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 8px 16px;
cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit; white-space: nowrap;
}@media (hover: hover) {
.shell-topbar-btn-primary:hover { filter: brightness(0.88); } }
.shell-topbar-bell {
width: 36px; height: 36px; background: var(--header-bg); border: 1px solid var(--border); border-radius: 8px;
cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center;
position: relative; flex-shrink: 0; color: var(--text);
}
.shell-topbar-bell-dot {
position: absolute; top: 6px; right: 7px; width: 7px; height: 7px;
background: #DC2626; border-radius: 50%; border: 1.5px solid #fff;
}
/* ===== مودال عمومی (برای پروفایل مشتری، حالت پاپ‌آپ) ===== */
.modal-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,.45);
display: none; align-items: center; justify-content: center; z-index: 1000; padding: 16px;
overscroll-behavior: contain;
}
.modal-overlay.open { display: flex; }
/* کارتِ محصول وقتی از داخلِ پاپ‌آپِ «افزودن گروهی» باز می‌شه باید روی اون بشینه؛
تو DOM قبل از اونه، پس با z-index بالاتر میاد جلو. */
.modal-overlay.is-stacked { z-index: 1100; }
/* ضربدرِ بستن absolute و بالا-چپِ پاپ‌آپه؛ این ردیف با space-between دکمه‌اش رو
دقیقاً می‌برد زیرِ همون ضربدر. حالا دکمه بلافاصله بعد از عنوان می‌شینه و ردیف
هم از سمتِ چپ به‌اندازه‌ی جای ضربدر خالی نگه داشته می‌شه. */
.bulk-add-head {
display: flex; align-items: center; justify-content: flex-start; gap: 10px;
margin-bottom: 12px; padding-inline-end: 34px;
}
.bulk-add-new-btn {
flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
background: var(--sidebar-active-bg); color: var(--accent-text);
border: none; border-radius: 9px; padding: 8px 12px;
font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.bulk-add-new-btn .ic { width: 15px; height: 15px; }
.bulk-add-new-btn:active { opacity: .8; }
.modal-box {
background: var(--surface); border-radius: 16px; max-width: 520px; width: 100%;
max-height: 88vh; overflow-y: auto; overflow-x: hidden; padding: 28px; position: relative;
overscroll-behavior: contain;
}
.modal-box-cust-profile { max-width: 680px; }
/* ===== نوارِ پیشرفتِ آپلودِ عکس (مشترک برای همه‌ی جاهایی که عکس آپلود می‌شه) ===== */
.prod-gallery-add { position: relative; }
.img-upload-progress-overlay {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
background: rgba(0,0,0,.55); color: #fff; font-size: 11px; font-weight: 700; text-align: center;
border-radius: inherit; padding: 4px; line-height: 1.3; z-index: 6; pointer-events: none;
}
/* نوارِ خطیِ کوچیک برای اسلات‌های کوچیک (لوگو، مهر، اسلاتِ گالریِ محصول) موقعِ پردازشِ سرور */
.img-upload-mini-bar {
display: block; width: 70%; height: 4px; border-radius: 3px;
background: rgba(255,255,255,.3); overflow: hidden; position: relative;
}
.img-upload-mini-bar > span {
position: absolute; top: 0; right: 0; height: 100%; width: 45%; border-radius: 3px;
background: #fff; animation: imgUploadIndeterminate 1.1s ease-in-out infinite;
}
.img-upload-progress-bar-wrap { margin-top: 6px; }
.img-upload-progress-bar-track {
height: 6px; border-radius: 4px; background: var(--border); overflow: hidden;
}
.img-upload-progress-bar-fill {
height: 100%; background: var(--accent); width: 0%; transition: width .15s ease;
}
.img-upload-progress-bar-text { font-size: 11px; color: var(--muted); margin-top: 3px; text-align: center; min-height: 14px; }
/* آپلود تموم شده و سرور داره پردازش می‌کنه — مدتش معلوم نیست، پس نوار حالتِ نامعیّن می‌گیره */
.img-upload-progress-bar-track.indeterminate { position: relative; overflow: hidden; }
.img-upload-progress-bar-track.indeterminate .img-upload-progress-bar-fill {
width: 40% !important; position: absolute; top: 0; right: 0;
animation: imgUploadIndeterminate 1.1s ease-in-out infinite;
}
@keyframes imgUploadIndeterminate {
0% { transform: translateX(120%); }
100% { transform: translateX(-260%); }
}
.gallery-select-all-row { margin-bottom: 10px; }
.gallery-select-all-row label {
display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px;
color: var(--muted); cursor: pointer; font-weight: 700;
}
.gallery-select-all-row input { width: auto !important; margin: 0; accent-color: var(--accent); }
.modal-box-wide { max-width: 960px; max-height: 94vh; }
/* مشاهده‌ی فاکتور ممکنه از داخل پاپ‌آپ بررسی سفارش باز بشه؛ باید همیشه رو همه‌ی پاپ‌آپ‌های دیگه بیاد جلو */
/* این پاپ‌آپ از داخلِ پاپ‌آپِ «مشاهده‌ی فاکتور» باز می‌شه؛ باید رو اون بیاد جلو، نه زیرش پنهان بشه */
#invoiceSmsChoiceOverlay { z-index: 1150; }
/* پاپ‌آپ قیمت‌گذاری هوشمند از داخل کارت محصول باز می‌شه؛ باید روش بیاد جلو */
#smartPricingModalOverlay { z-index: 1120; }
.sp-bom-row { display: grid; grid-template-columns: 90px 1fr 110px 130px 32px; gap: 8px; align-items: center; margin-bottom: 8px; }
@media (max-width: 480px) { .sp-bom-row { grid-template-columns: 1fr; gap: 4px; } .sp-bom-remove { justify-self: start; } }
.sp-bom-row select, .sp-bom-row input { width: 100%; }
.sp-bom-remove { background: none; border: none; color: var(--danger, #e2483a); cursor: pointer; font-size: 16px; }
.sp-summary-box { background: var(--panel-2, #f6f7f9); border-radius: 10px; padding: 14px; margin-top: 14px; }
.sp-summary-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; }
.sp-summary-row.total { font-weight: 700; font-size: 15px; border-top: 1px solid var(--border, #e3e5e9); margin-top: 6px; padding-top: 8px; }
/* پاپ‌آپ قابلیت قفل‌شده هم ممکنه از دل پاپ‌آپ‌های دیگه (مثل فرم فاکتور یا محصول) باز بشه */
#featureLockModalOverlay { z-index: 1150; }
/* پاپ‌آپ خرید توکن معمولاً از دلِ فرمِ افزودنِ کسب‌وکار یا پاپ‌آپِ قابلیتِ قفل‌شده باز می‌شه
(وقتی موجودی کافی نیست)؛ چون هر دو هم z-index پیش‌فرض (۱۰۰۰ یا ۱۱۵۰) دارن، بدونِ این
override این پاپ‌آپ می‌تونست پشتِ پاپ‌آپِ بازِ قبلی گم بشه. */
#buyTokensModal { z-index: 1160; }
/* فرمِ افزودن/ویرایشِ کسب‌وکار هم ممکنه پاپ‌آپِ خرید توکن یا قابلیتِ قفل‌شده رو روی خودش باز کنه؛
ولی خودش نباید رو هیچ‌کدوم از اونا بیاد، برای همین همون z-index پیش‌فرضِ ۱۰۰۰ کافیه. */
.fl-media-wrap { background: var(--panel-2, #f6f7f9); border: 1px dashed var(--border, #e3e5e9); border-radius: 10px;
padding: 22px 14px; text-align: center; color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.fl-price-box { background: var(--panel-2, #f6f7f9); border-radius: 10px; padding: 12px 14px; }
.fl-price-line { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13.5px; }
.fl-price-line:first-child { font-weight: 700; }
/* لایت‌باکس تمام‌صفحه برای دیدن عکس فیش واریزی با کیفیت کامل — همیشه رو همه‌چیز بیاد جلو */
#imageLightboxOverlay { z-index: 1200; }
#imageLightboxOverlay .modal-box {
background: transparent; box-shadow: none; padding: 0; max-width: 95vw; max-height: 95vh;
overflow: visible; display: flex; align-items: center; justify-content: center;
}
#imageLightboxOverlay img { max-width: 95vw; max-height: 95vh; border-radius: 8px; display: block; }
#imageLightboxOverlay .modal-close {
position: fixed; top: 20px; left: 20px; background: rgba(0,0,0,.55); color: #fff;
width: 34px; height: 34px; border-radius: 50%; font-size: 16px;
}
.modal-box-wide #invoiceViewContent,
.modal-box-wide .review-card { margin-bottom: 0; }
.modal-view-footer {
position: sticky; bottom: -28px; margin: 18px -28px -28px; padding: 14px 20px;
background: var(--surface); border-top: 1px solid var(--border);
border-radius: 0 0 16px 16px; display: flex; align-items: center; justify-content: space-between;
gap: 10px; flex-wrap: wrap;
}
.modal-box-sticky-footer {
position: sticky; bottom: -22px; margin: 16px -22px -22px; padding: 14px 22px;
background: var(--surface); border-top: 1px solid var(--border);
border-radius: 0 0 18px 18px; display: flex; gap: 10px; flex-wrap: wrap;
}
/* فوترِ کارتِ محصول سه دکمه داره ("ذخیره و محصول بعدی" طولانیه) که تو موبایل
به‌جای یه ردیف، ۲ ردیف می‌شد؛ اینجا (فقط برای همین پاپ‌آپ) اجازه‌ی wrapشدنِ
خودِ ردیف گرفته می‌شه، ولی هر دکمه اجازه داره متنش خودش دو خط بشه — سه دکمه
همیشه یه ردیف می‌مونن. */
/* فوترِ کارتِ محصول حالا دو ردیفه: بالا نوارِ شناورِ قیمتِ فروش، پایین دکمه‌ها —
هر دو با هم روی .modal-box-sticky-footer چسبیده‌ن (همون مکانیزمِ sticky/margin
قبلی)، فقط داخلش عمودی چیده شده. */
#productCardModalOverlay .modal-box-sticky-footer { flex-direction: column; align-items: stretch; gap: 0; flex-wrap: nowrap; }
.prod-sale-float-bar {
padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--border);
}
.prod-sale-float-bar .prod-sale-price-value { margin: 0; }
.prod-sale-float-bar .prod-sale-price-note { white-space: normal; line-height: 1.7; }
.prod-sticky-actions { display: flex; gap: 8px; flex-wrap: nowrap; }
#productCardModalOverlay .prod-sticky-actions .btn-save,
#productCardModalOverlay .prod-sticky-actions .btn-clear {
flex: 1; min-width: 0; white-space: normal; padding-left: 6px; padding-right: 6px;
font-size: 12px; line-height: 1.3;
display: flex; align-items: center; justify-content: center; gap: 6px;
}
/* آیکون (کلاسِ اختصاصیِ خودمون، نه .ic عمومی که جاهای دیگه‌ی اپ استفاده می‌شه —
تا هیچ قاعده‌ی دیگه‌ای رنگ/سایزش رو خراب نکنه) فقط رویِ دو دکمه‌ی «ذخیره» و
«انصراف» و فقط تو موبایل نشون داده می‌شه. «ذخیره و محصول بعدی» همیشه متنیه —
متنش طولانیه و آیکونِ تنها گمراه‌کننده می‌شه. */
.prod-sticky-actions .btn-icon-svg {
display: none; width: 20px; height: 20px; flex-shrink: 0; stroke: currentColor;
}
@media (max-width: 900px) {
.prod-sticky-actions .btn-icon-svg { display: inline-block; }
.prod-sticky-actions .btn-icon-mode .btn-label-text { display: none; }
#productCardModalOverlay .prod-sticky-actions .btn-icon-mode {
flex: 0 0 46px; padding: 11px 0;
}
#productCardModalOverlay .prod-sticky-actions .btn-save:not(.btn-icon-mode) {
flex: 1 1 auto; padding: 11px 8px; font-size: 11.5px;
}
/* وقتی کیبورد بازه، فقط قیمت رو نشون بده — دکمه‌ها رو مخفی کن. چون موقعِ
تایپِ درصد انگشتِ کاربر نزدیکِ همین دکمه‌هاست و ممکنه سهوی «ذخیره» رو بزنه.
کلاسِ keyboard-open رو app.js (syncKeyboardViewportVars) رویِ می‌ذاره. */
html.keyboard-open #productCardModalOverlay .prod-sticky-actions { display: none; }
html.keyboard-open #productCardModalOverlay .prod-sale-float-bar {
padding-bottom: 0; margin-bottom: 0; border-bottom: none;
}
}
.modal-close {
position: absolute; top: 14px; left: 14px; background: none; border: none;
font-size: 18px; color: var(--muted); cursor: pointer;
}
/* نکته‌ی force-reflow-nudge بالای init() تو app.js توضیح داده شده. */
.force-reflow-nudge { transform: translateZ(0); }
/* نکته‌ی syncBackgroundScrollLock/has-open-overlay هم همون‌جا توضیح داده شده —
تا وقتی حداقل یه پاپ‌آپ بازه، .shell-main (ظرفِ اصلیِ اسکرول‌پذیرِ پسِ‌زمینه
تو موبایل) قابلِ اسکرول نباشه. عمداً touch-action ست نشده: .modal-overlay از
نظرِ DOM زیرمجموعه‌ی .shell-main ـه (فقط از نظرِ چیدمان fixed ـه)، و touch-action
رویِ اجدادی که تاچ اونجا شروع شده اثر می‌ذاره — اگه اینجا none بذاریم، اسکرولِ
خودِ پاپ‌آپ هم قفل می‌شه، دقیقاً همون چیزی که می‌خوایم رفعش کنیم. */
@media (max-width: 900px) {
html.has-open-overlay .shell-main { overflow: hidden !important; }
}
/* ===== تقویم شمسی سفارشی ===== */
.jalali-cal-popup {
position: absolute; z-index: 2000; background: var(--surface); border: 1px solid var(--border);
border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.15); padding: 12px; width: 260px;
display: none;
}
.jalali-cal-popup.open { display: block; }
.jalali-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-weight: 700; font-size: 13px; }
.jalali-cal-header button { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--accent-text); padding: 2px 8px; }
.jalali-cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.jalali-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.jalali-cal-day { text-align: center; padding: 6px 0; border-radius: 6px; font-size: 12px; cursor: pointer; }@media (hover: hover) {
.jalali-cal-day:hover { background: var(--header-bg); } }
.jalali-cal-day.empty { cursor: default; visibility: hidden; }
.jalali-cal-day.today { border: 1px solid var(--accent-text); }
.jalali-cal-day.selected { background: var(--accent); color: white; }
/* ===== محتوای پروفایل مشتری (مشترک بین پاپ‌آپ و صفحه کامل) ===== */
.profile-meta { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.profile-invoices-title { font-size: 13px; font-weight: 700; margin: 16px 0 8px; }
/* ===== سایدبار اصلی (ناوبری کل پنل + پروفایل/کسب‌وکار/تنظیمات/پشتیبانی) =====
رنگ سایدبار از رنگ کسب‌وکار فعال می‌آید. همه‌ی رنگ‌های داخلش از روی همین دو متغیر
ساخته می‌شن: --sb-bg (پس‌زمینه) و --sb-fg (رنگ متن، که بسته به روشن یا تیره بودن
پس‌زمینه خودکار سفید یا مشکی می‌شه تا همیشه خوانا بمونه). */
:root {
--sb-bg: #1A2163;
--sb-fg: 255, 255, 255; /* اجزای RGB رنگ متن، برای ساختن حالت‌های نیمه‌شفاف */
--sb-fg-muted: #A9B2D6; /* رنگ توپر برای متن‌های کم‌رنگ‌تر سایدبار (خوانا روی پس‌زمینه‌ی تیره) */
--sb-tint: 0, 0, 0; /* جهتِ امنِ رنگ‌آمیزیِ ملایمِ پس‌زمینه‌ی سایدبار (برعکسِ sb-fg) */
--sb-accent: #7C9DFF; /* رنگ آیتم فعال */
--sb-accent-bg: rgba(79,106,255,0.18);
}
.account-sidebar {
width: 220px;
flex-shrink: 0;
background: var(--sb-bg);
border: none;
border-left: 1px solid rgba(var(--sb-fg), 0.06);
display: flex;
flex-direction: column;
overflow-y: auto;
}
.main-nav-logo {
display: flex; align-items: center; gap: 10px;
padding: 18px 20px 14px; border-bottom: 1px solid rgba(var(--sb-fg),0.08); flex-shrink: 0;
}
.main-nav-logo-badge {
width: 38px; height: 38px; flex-shrink: 0;
border-radius: 10px; display: flex; align-items: center; justify-content: center;
overflow: hidden; background: none; padding: 0;
}
.main-nav-logo-badge img { width: 100%; height: 100%; object-fit: cover; display: block; }
.main-nav-logo-title { color: rgb(var(--sb-fg)); font-weight: 700; font-size: 15px; line-height: 1; }
.main-nav-logo-sub { color: var(--sb-fg-muted); font-size: 11px; margin-top: 3px; }
/* سایدبار اسکرول نداره — همه‌ی دکمه‌ها باید هم‌زمان دیده بشن، پس فاصله‌ها فشرده‌ترن */
.main-nav-primary { flex: 1; padding: 10px 10px; display: flex; flex-direction: column; gap: 1px; overflow: visible; }
.main-nav-primary button {
display: flex; align-items: center; gap: 10px; width: 100%; text-align: right;
padding: 7px 12px; border-radius: 8px; border: none; cursor: pointer;
background: transparent; color: var(--sb-fg-muted); font-family: inherit;
font-size: 13.5px; font-weight: 400; transition: 0.15s;
}@media (hover: hover) {
.main-nav-primary button:hover { background: rgba(var(--sb-tint),0.09); color: rgb(var(--sb-fg)); } }
.main-nav-primary button.active { background: var(--sb-accent-bg); color: rgb(var(--sb-fg)); font-weight: 800; }
/* بخش‌های غیرفعال: حالت «فرورفته» تا از نگاه کردن هم معلوم باشه غیرفعالن، ولی همچنان
دیده بشن تا کاربر بدونه این قابلیت‌ها وجود دارن. */
.main-nav-primary button.nav-locked {
background: rgba(0,0,0,0.22);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.35), inset 0 -1px 0 rgba(var(--sb-fg),0.05);
color: rgba(var(--sb-fg),0.34);
cursor: not-allowed;
}@media (hover: hover) {
.main-nav-primary button.nav-locked:hover { background: rgba(0,0,0,0.16); color: rgba(var(--sb-fg),0.34); } }
/* ویترین قفل‌شده کلیک‌پذیره (می‌بردت به خرید)، پس نشانگرش دست بمونه */
.main-nav-primary button.nav-locked[data-nav="storefront"]:not(:disabled) { cursor: pointer; }@media (hover: hover) {
.main-nav-primary button.nav-locked[data-nav="storefront"]:not(:disabled):hover { color: var(--sb-fg-muted); } }
.main-nav-primary button.nav-locked .main-nav-icon { opacity: 0.55; }
.main-nav-lock { margin-right: auto; opacity: 0.65; }
/* تا وقتی کسب‌وکاری ساخته نشده، خودِ بنر بالای منو تنها قدم بعدیه — پس نورانی می‌شه */
.active-biz-banner.biz-cta {
background: rgba(var(--sb-tint),0.13);
box-shadow: 0 0 0 1px rgba(var(--sb-fg),0.45), 0 0 14px rgba(var(--sb-fg),0.22);
animation: bizPulse 2.4s ease-in-out infinite;
}@media (hover: hover) {
.active-biz-banner.biz-cta:hover { background: rgba(var(--sb-tint),0.2); } }
@keyframes bizPulse {
0%, 100% { box-shadow: 0 0 0 1px rgba(var(--sb-fg),0.4), 0 0 10px rgba(var(--sb-fg),0.16); }
50% { box-shadow: 0 0 0 1px rgba(var(--sb-fg),0.7), 0 0 20px rgba(var(--sb-fg),0.3); }
}
@media (prefers-reduced-motion: reduce) {
.active-biz-banner.biz-cta { animation: none; }
/* سوسوی اسکلتون هم برای کاربری که «کاهش حرکت» رو روشن کرده متوقف می‌شه؛
خودِ کادرِ خاکستری می‌مونه تا همچنان معلوم باشه داره چیزی لود می‌شه. */
.skeleton-block::after, .skeleton-card::after { animation: none; opacity: 0; }
.dash-cards-track { scroll-behavior: auto; }
.dash-cards-dot { transition: none; }
}
.main-nav-primary button.nav-disabled { opacity: 0.35; cursor: not-allowed; }@media (hover: hover) {
.main-nav-primary button.nav-disabled:hover { background: transparent; color: var(--sb-fg-muted); } }
.main-nav-icon { font-size: 14px; opacity: 0.8; width: 16px; text-align: center; flex-shrink: 0; }
.main-nav-primary button span:nth-child(2) { flex: 1; }
.main-nav-badge {
background: #DC2626; color: #fff; font-size: 10px; font-weight: 700;
padding: 1px 6px; border-radius: 20px; flex-shrink: 0;
}
.main-nav-divider { height: 1px; background: rgba(var(--sb-fg),0.1); margin: 6px 4px; }
.main-nav-lock { font-size: 11px; opacity: 0.7; flex-shrink: 0; }
.account-sidebar h4 {
font-size: 11px;
color: var(--sb-fg-muted);
margin-bottom: 8px;
padding: 0 8px;
}
.account-sub-nav {
display: flex;
flex-direction: column;
gap: 3px;
}
.account-sub-nav button {
text-align: right;
padding: 9px 10px;
border-radius: 8px;
background: transparent;
border: none;
font-family: inherit;
font-size: 13px;
font-weight: 500;
color: rgba(255,255,255,0.55);
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: 0.15s;
}@media (hover: hover) {
.account-sub-nav button:hover { background: rgba(255,255,255,0.06); color: #fff; } }
.account-sub-nav button.active { background: rgba(79,106,255,0.18); color: #7C9DFF; font-weight: 600; }
/* پروفایل کاربر پایین سایدبار — دقیقاً مطابق Shell.tsx فیگما */
.account-footer {
display: flex; align-items: center; gap: 10px;
padding: 14px 16px; flex-shrink: 0;
border-top: 1px solid rgba(var(--sb-fg),0.1);
cursor: pointer; transition: 0.15s;
}@media (hover: hover) {
.account-footer:hover { background: rgba(var(--sb-tint),0.09); } }
.account-footer-avatar {
width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
background: rgba(var(--sb-tint),0.18);
display: flex; align-items: center; justify-content: center;
color: rgb(var(--sb-fg)); font-size: 12px; font-weight: 700;
}
.account-footer-info { flex: 1; min-width: 0; }
.account-footer-name {
color: rgb(var(--sb-fg)); font-size: 12.5px; font-weight: 500;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.account-footer-role { color: var(--sb-fg-muted); font-size: 11px; margin-top: 1px; }
/* تب‌های صفحه‌ی حساب کاربری (پروفایل/کسب‌وکار/پشتیبانی) داخل پاپ‌آپ */
.sidebar-page-tabs { display: flex; gap: 6px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.sidebar-page-tabs button {
padding: 8px 12px; border: none; background: transparent; cursor: pointer;
font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted);
border-bottom: 2px solid transparent; margin-bottom: -1px; transition: 0.15s;
}@media (hover: hover) {
.sidebar-page-tabs button:hover { color: var(--text); } }
.sidebar-page-tabs button.active { color: var(--accent-text); border-bottom-color: var(--accent-text); }
.sidebar-page-overlay {
position: fixed; inset: 0; background: rgba(0,0,0,.45);
display: none; align-items: center; justify-content: center; z-index: 1000; padding: 16px;
}
.sidebar-page-overlay.open { display: flex; }
.sidebar-page-box {
background: var(--surface); border-radius: 18px; max-width: 560px; width: 100%;
max-height: 85vh; overflow-y: auto; padding: 26px; position: relative;
}
.sidebar-page-box .close-btn {
position: absolute; top: 14px; left: 14px; background: none; border: none;
font-size: 18px; color: var(--muted); cursor: pointer;
}
.sidebar-page-box h3 { font-size: 17px; margin-bottom: 14px; }
.sidebar-page-placeholder { color: var(--muted); font-size: 13px; padding: 30px 10px; text-align: center; }
/* ===== پنل تنظیمات (استایل نرم‌افزاری) ===== */
.settings-section { margin-bottom: 20px; }
.settings-section:last-child { margin-bottom: 0; }
.settings-section-title {
font-size: 11px; font-weight: 800; color: var(--muted); margin-bottom: 8px;
padding: 0 4px; letter-spacing: .3px;
}
.settings-card {
background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
}
.settings-row {
display: flex; align-items: center; justify-content: space-between; gap: 14px;
padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.settings-row:last-child { border-bottom: none; }
.settings-row-label { font-size: 13px; font-weight: 700; color: var(--text); }
.settings-row-desc { font-size: 11px; color: var(--muted); font-weight: 400; margin-top: 3px; line-height: 1.7; }
.wallet-card {
background: linear-gradient(135deg, var(--accent-dark), var(--accent)); border-radius: 14px; padding: 22px 18px;
text-align: center; color: #fff;
}
.wallet-balance-label { font-size: 12px; color: rgba(255,255,255,0.65); margin-bottom: 6px; }
.wallet-balance-value { font-size: 26px; font-weight: 800; color: #fff; margin-bottom: 14px; }
.referral-code-wrap { display: flex; align-items: center; gap: 8px; justify-content: center; }
.referral-code-wrap span { font-weight: 800; letter-spacing: 1px; color: #fff; }
.wallet-tx-item {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 16px; border-bottom: 1px solid var(--border); font-size: 12px;
}
.wallet-tx-item:last-child { border-bottom: none; }
.wallet-tx-desc { color: var(--text); font-weight: 600; }
.wallet-tx-date { color: var(--muted); font-size: 10px; margin-top: 2px; }
.wallet-tx-amount.credit { color: #2c7a4d; font-weight: 800; white-space: nowrap; }
.wallet-tx-amount.debit { color: var(--accent-text); font-weight: 800; white-space: nowrap; }
.token-packages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.token-package-card { background: var(--page-bg); border-radius: 14px; padding: 16px; text-align: center; }
.token-package-card .tp-days { font-size: 17px; font-weight: 800; color: var(--text); }
.token-package-card .tp-price { font-size: 12px; color: var(--muted); margin: 6px 0 12px; }
@media (max-width: 700px) {
.token-packages { grid-template-columns: 1fr; }
}
/* ===== اعلان‌های سیستمی ===== */
.notif-list { background: var(--header-bg); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.notif-item { padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: 0.15s; }
.notif-item:last-child { border-bottom: none; }
.notif-item.unread { background: var(--sidebar-active-bg); }
.notif-item .notif-title { font-weight: 700; font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 6px; }
.notif-item .notif-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.notif-item .notif-message { font-size: 12px; color: var(--muted); margin-top: 3px; white-space: pre-line; }
.notif-item .notif-date { font-size: 11px; color: var(--muted); margin-top: 4px; }
.notif-empty { padding: 16px; text-align: center; color: var(--muted); font-size: 13px; background: var(--header-bg); border: 1px solid var(--border); border-radius: 14px; }
/* ===== تیکت‌های پشتیبانی ===== */
.ticket-list-item { padding: 14px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: 0.15s; }
.ticket-list-item:last-child { border-bottom: none; }@media (hover: hover) {
.ticket-list-item:hover { background: var(--header-bg); } }
.ticket-row-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ticket-subject { font-weight: 700; font-size: 13px; color: var(--text); }
.ticket-status-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; flex-shrink: 0; }
.ticket-status-badge.open { background: var(--pastel-red); color: var(--accent-text); }
.ticket-status-badge.closed { background: var(--pastel-green); color: #2c7a4d; }
.ticket-status-badge.pending { background: var(--pastel-yellow); color: #a1740c; }
.ticket-snippet { font-size: 12px; color: var(--muted); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-date { font-size: 11px; color: var(--muted); margin-top: 4px; }
.ticket-thread { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
.ticket-msg { border-radius: 12px; padding: 10px 14px; font-size: 13px; max-width: 85%; line-height: 1.6; }
.ticket-msg.user { background: var(--sidebar-active-bg); align-self: flex-end; color: var(--text); }
.ticket-msg.admin { background: var(--header-bg); align-self: flex-start; color: var(--text); border: 1px solid var(--border); }
.ticket-msg .ticket-msg-date { font-size: 10px; color: var(--muted); margin-top: 4px; }
.segmented-control {
display: flex; background: var(--surface); border: 1px solid var(--border);
border-radius: 8px; padding: 3px; gap: 2px; flex-shrink: 0;
}
.segmented-control button {
padding: 6px 12px; font-size: 12px; font-weight: 700; border-radius: 6px;
background: transparent; color: var(--muted); border: none; cursor: pointer; white-space: nowrap;
}
.segmented-control button.active { background: var(--accent); color: white; }
/* ===== تنظیمات > میانبر: چک‌لیستِ ۹ بخش ===== */
.shortcut-item-row {
display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
padding: 10px 16px; border-bottom: 1px solid var(--border);
}
.shortcut-item-row:last-child { border-bottom: none; }
.shortcut-item-row.is-main { background: var(--sidebar-active-bg, rgba(124,157,255,.08)); }
.shortcut-item-order-badge {
width: 22px; height: 22px; border-radius: 50%; background: var(--header-bg); color: var(--muted);
font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.shortcut-item-row.is-main .shortcut-item-order-badge { background: var(--accent); color: #fff; }
.shortcut-item-check { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); flex: 1; min-width: 130px; cursor: pointer; }
.shortcut-item-reorder { display: flex; gap: 4px; flex-shrink: 0; }
.shortcut-item-reorder button {
width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface);
color: var(--text); cursor: pointer; font-size: 10px; display: flex; align-items: center; justify-content: center;
}
.shortcut-item-reorder button:disabled { opacity: .3; cursor: not-allowed; }
.shortcut-mode-control { flex-shrink: 0; }
.shortcut-available-row { justify-content: flex-start; gap: 10px; cursor: pointer; }
.shortcut-available-row.is-disabled { opacity: .45; cursor: not-allowed; }
/* چک‌لیست‌های تنظیمات دو ستونه می‌شن تا ارتفاع کارت تنظیمات نصف بشه */
#dashQuickItemsWrap, #shortcutItemsWrap .shortcut-available-list {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px;
}
#dashQuickItemsWrap .settings-row, #shortcutItemsWrap .shortcut-available-list .settings-row { min-width: 0; }
@media (max-width: 640px) {
#dashQuickItemsWrap, #shortcutItemsWrap .shortcut-available-list { grid-template-columns: 1fr; }
}
/* نوار کارت‌های آماری داشبورد: تعداد ستون با تعداد واقعیِ کارت‌ها ست می‌شه،
چون کارت‌های پولی برای کاربر خام حذف می‌شن */
.dash-stats-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .dash-stats-grid.cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .dash-stats-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* ===== نوار میانبرِ پایین صفحه (فقط موبایل) ===== */
.mobile-shortcut-bar {
display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 850;
background: var(--surface); border-top: 1px solid var(--border);
/* ارتفاعِ بخشِ محتوا: ۲ + ۴۵ + ۲ = ۴۹ پیکسل، دقیقاً اندازه‌ی تب‌بارِ خودِ iOS.
env پایین، ناحیه‌ی نوارِ خانه‌ست: روی آیفون ۱۵ حدود ۳۴ پیکسل و روی آیفون ۷
و اندروید صفر — برای همین نوار روی ۱۵ بلندتر دیده می‌شه. این فضا باید خالی
بمونه چون ژستِ کشیدن به بالا مالِ سیستمه؛ دکمه گذاشتن اونجا یعنی لمسِ اشتباه. */
padding: 2px 8px calc(2px + env(safe-area-inset-bottom, 0px)); gap: 4px;
align-items: stretch; justify-content: space-between;
}
/* نوار با bottom:0 چسبیده به پایینِ viewport است، ولی روی آیفون (هم ۷ هم ۱۵)
یک نوارِ خالی زیرش دیده می‌شد — یعنی پایینِ viewport بالاتر از لبه‌ی فیزیکیِ
صفحه‌ست. علتش رو از روی کد نتونستم قطعی کنم، پس به‌جای حدس زدن، همون رنگِ
نوار به‌اندازه‌ی کافی به پایین ادامه داده می‌شه. اگه فاصله‌ای نباشه، این
بخش بیرون از صفحه می‌افته و اصلاً دیده نمی‌شه. */
.mobile-shortcut-bar::after {
content: '';
position: absolute;
top: 100%; left: 0; right: 0;
height: 120px;
background: var(--surface);
pointer-events: none;
}
.mobile-shortcut-bar button {
flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 3px; background: transparent; border: none; border-radius: 10px; color: var(--muted); font-family: inherit;
font-size: 10.5px; font-weight: 600; padding: 7px 2px; cursor: pointer;
}
.mobile-shortcut-bar button .mobile-shortcut-icon .ic { width: 19px; height: 19px; }
.mobile-shortcut-bar button .mobile-shortcut-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mobile-shortcut-bar button.active { color: var(--accent); font-weight: 800; }
/* دکمه‌ی وسط/اصلی: نباید کامل رنگی باشه، فقط یه کادرِ ۱پیکسلیِ رنگی داشته باشه که همیشه
متمایزش کنه؛ تشخیصِ «فعال بودن» همچنان با رنگ+بولدِ بالا انجام می‌شه، مثلِ بقیه‌ی دکمه‌ها */
.mobile-shortcut-bar button.mobile-shortcut-main { border: 1px solid var(--accent); border-radius: 12px; }
@media (min-width: 901px) { .mobile-shortcut-bar { display: none !important; } }
@media (max-width: 900px) { body.has-mobile-shortcut .shell-main { padding-bottom: 68px; } }
.toggle-switch { position: relative; width: 44px; height: 25px; flex-shrink: 0; display: inline-block; }
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider {
position: absolute; inset: 0; background: var(--border); border-radius: 999px; cursor: pointer; transition: .2s;
}
.toggle-slider::before {
content: ''; position: absolute; width: 19px; height: 19px; right: 3px; top: 3px;
background: white; border-radius: 50%; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.toggle-switch input:checked + .toggle-slider { background: var(--accent); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(-19px); }
.settings-input {
border: 1px solid var(--border); border-radius: 7px; padding: 8px 10px; font-family: inherit;
font-size: 13px; background: var(--surface); color: var(--text); outline: none; width: 160px;
}
.settings-input:focus { border-color: var(--accent-text); }
.color-palette { display: flex; flex-direction: column; gap: 12px; }
.color-group-label { font-size: 11px; color: var(--muted); margin-bottom: 5px; }
.color-row { display: flex; gap: 6px; flex-wrap: wrap; }
.color-swatch {
width: 26px; height: 26px; border-radius: 7px; cursor: pointer; flex-shrink: 0;
border: 1px solid rgba(0,0,0,0.14); padding: 0; transition: 0.12s;
box-shadow: inset 0 0 0 2px transparent;
}@media (hover: hover) {
.color-swatch:hover { transform: scale(1.12); } }
.color-swatch.selected {
box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--text);
}
/* ===== منوی همبرگری + سایدبار کشویی (موبایل) ===== */
.shell-topbar-hamburger {
width: 34px; height: 34px; background: none; border: none;
border-radius: 0; cursor: pointer; display: flex; align-items: center; justify-content: center;
flex-shrink: 0; color: var(--text);
}
.sidebar-mobile-close { display: none; }
.sidebar-mobile-backdrop {
display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 890; border: none; padding: 0;
}
.sidebar-mobile-backdrop.open { display: block; }
/* هدرِ دوخطِ موبایل — پیش‌فرض مخفیه، فقط زیرِ ۹۰۰px (همون بریک‌پوینتِ کشوی سایدبار) نشون داده می‌شه */
.shell-topbar-mobile { display: none; width: 100%; flex-direction: column; gap: 6px; padding: 10px 0; }
.shell-topbar-mobile-line1 { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.shell-topbar-mobile-line2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.shell-topbar-mobile-line2-start { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* سوییچرِ کسب‌وکار به‌صورت قرصِ کلیک‌شدنی با فلشِ رو به پایین (طبقِ طرحِ مرجع) —
فلش نشون می‌ده که این یه انتخابگره، نه فقط یه متن. */
/* نامِ کسب‌وکار متنِ ساده‌ست، نه قرص: بدون پس‌زمینه، حاشیه و سایه.
فلشِ کوچک می‌مونه چون تنها نشانه‌ایه که می‌گه این متن کلیک‌شدنیه. */
.shell-topbar-mobile-biz {
display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 52vw;
font-family: inherit; font-size: 14.5px; font-weight: 700; color: var(--text); cursor: pointer;
background: none; border: none; border-radius: 0;
padding: 7px 2px; transition: opacity 0.15s ease;
}
.shell-topbar-mobile-biz > span {
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shell-topbar-mobile-biz .shell-biz-caret { width: 15px; height: 15px; color: var(--accent-text); flex-shrink: 0; }@media (hover: hover) {
.shell-topbar-mobile-biz:hover { opacity: .7; } }
.shell-topbar-mobile-biz:focus-visible { outline: 2px solid var(--accent2-text); outline-offset: 2px; }
/* دکمه‌های آیکونیِ هدرِ موبایل: دایره‌ای، با زنگوله‌ی کهرباییِ طرحِ مرجع.
نقطه‌ی قرمزِ «پیامِ خوانده‌نشده» سرِ جاش می‌مونه چون وضعیتِ واقعی رو نشون می‌ده. */
/* زنگوله هم مثل همبرگری بدون قابه: نه پس‌زمینه، نه حاشیه، نه سایه.
رنگِ کهربایی روی خودِ آیکون می‌مونه — تنها چیزیه که زنگوله رو از بقیه‌ی
آیکون‌ها جدا می‌کنه و نقطه‌ی قرمزِ «خوانده‌نشده» هم روش می‌شینه. */
/* اندازه‌ی دیداری = خودِ آیکون، تا با نقطه‌ی وضعیتِ خط بالا روی یک خط بشینه.
اگه جعبه ۴۴ پیکسل بمونه، آیکون ۱۰ پیکسل داخل‌تر می‌افته و هم‌تراز نمی‌شه.
ناحیه‌ی لمس با یک حلقه‌ی نامرئی همچنان ۴۵ پیکسله. */
.shell-topbar-mobile .shell-topbar-bell {
width: 26px; height: 26px; border-radius: 0;
background: none; box-shadow: none; padding: 0; position: relative;
}
.shell-topbar-mobile .shell-topbar-hamburger::after,
.shell-topbar-mobile .shell-topbar-bell::after {
content: ''; position: absolute; inset: -10px;
}
/* همبرگری فقط سه خطه: بدون پس‌زمینه، حاشیه و سایه. ناحیه‌ی لمس ۴۴ پیکسله
ولی چون قابِ دیداری نداره، بزرگ‌بودنش به چشم نمیاد. */
.shell-topbar-mobile .shell-topbar-hamburger {
width: 26px; height: 26px; border: none; background: none;
box-shadow: none; border-radius: 0; padding: 0; position: relative;
}
.shell-topbar-mobile .shell-topbar-bell {
background: none; border: none; color: var(--warning);
}
.shell-topbar-mobile .shell-topbar-bell .ic { width: 25px; height: 25px; }
.shell-topbar-mobile .shell-topbar-hamburger .ic { width: 25px; height: 25px; }
.shell-topbar-mobile .shell-topbar-bell-dot { top: -1px; right: 0; }
.shell-topbar-mobile-line1 { letter-spacing: 0.2px; }
@media (max-width: 900px) {
body { flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
/* روی موبایل، خودِ سایدبار دسکتاپ (همون محتوا) به یه کشوی شناور روی صفحه تبدیل می‌شه —
نه یه کپیِ جدا؛ همیشه با محتوای واقعیِ فعلی هماهنگه. پیش‌فرض بیرون از صفحه (سمت راست) پنهانه. */
.account-sidebar {
position: fixed; top: 0; right: 0; bottom: 0; height: 100vh; height: 100dvh;
width: 80%; z-index: 900; transform: translateX(100%); transition: transform .28s ease;
border-left: none; box-shadow: -8px 0 24px rgba(0,0,0,.25);
}
.account-sidebar.sidebar-mobile-open { transform: translateX(0); }
.account-sidebar nav, .main-nav-primary { flex-direction: column; overflow-x: visible; }
.sidebar-mobile-close {
display: flex; align-items: center; justify-content: center; position: absolute; top: 12px; left: 12px;
width: 30px; height: 30px; border-radius: 8px; border: none; background: rgba(var(--sb-tint),0.18);
color: rgb(var(--sb-fg)); cursor: pointer; z-index: 2;
}
.shell-main { height: 100vh; height: 100dvh; overflow-y: auto; overflow-x: hidden; }
.shell-main > div:not(.shell-topbar):not(.modal-overlay) { max-width: 100vw; }
/* هدر: ردیفِ دسکتاپ (تیتر تک‌خط + دکمه‌ی فاکتور جدید + زنگولهٔ اصلی) مخفی می‌شه،
به‌جاش هدرِ دوخطِ مخصوصِ موبایل میاد */
/* پس‌زمینه‌ی نوار همچنان تا لبه‌ی صفحه می‌ره (padding داخلیه، نه margin)، ولی
خودِ دکمه‌ها به دیواره نمی‌چسبن. env برای حالت افقی روی گوشی‌های ناچ‌دار. */
.shell-topbar {
position: sticky; top: 0; height: auto; flex-wrap: wrap; align-items: stretch;
/* محتوای نوار از زیرِ ساعت و باتری شروع بشه؛ خودِ اون ناحیه رو body::before رنگ می‌کنه */
padding-top: env(safe-area-inset-top, 0px); padding-bottom: 0;
padding-left: calc(10px + env(safe-area-inset-left, 0px));
padding-right: calc(10px + env(safe-area-inset-right, 0px));
}
.shell-topbar > h1,
.shell-topbar > #shellNewInvoiceBtn,
.shell-topbar > .shell-topbar-bell { display: none !important; }
.shell-topbar-mobile { display: flex; }
}
/* ===== زوم خودکارِ موبایل موقعِ فوکوس روی فیلد =====
قبلاً اینجا فونتِ همه‌ی ورودی‌ها روی موبایل ۱۶px می‌شد تا سافاری زوم نکنه. حالا
این کار از متاتگِ viewport (maximum-scale=1) انجام می‌شه، چون اون قانون فیلدها رو
بی‌خود بزرگ می‌کرد و تو موبایل که فضا کمه، جا هدر می‌رفت. فونتِ هر فیلد حالا
همونیه که تو استایلِ خودش تعریف شده. */
/* ===== فاصله‌ها روی موبایل: کاهش پدینگ/گپ صفحه و کارت‌ها تا فضای بیشتری به محتوا برسه ===== */
@media (max-width: 900px) {
/* فاصله‌ی کارت‌ها از دیواره‌ی صفحه: ۵ پیکسل (درخواست شده). */
.shell-main > div:not(.shell-topbar):not(.modal-overlay) {
padding-top: 8px; padding-bottom: 8px;
padding-left: calc(5px + env(safe-area-inset-left, 0px));
padding-right: calc(5px + env(safe-area-inset-right, 0px));
}
/* اطمینانِ اضافه: هیچ‌کدوم از کارت‌های اصلیِ داشبورد/ویترین نباید مارجین/عرضِ اضافه‌ای داشته
باشن که باعث بشه به لبه‌ی چپِ صفحه بچسبن یا از پدینگِ صفحه بیرون بزنن. */
.dash-panel, .dash-storefront-widget, .dash-lowstock-card, .dash-stats-grid,
.dash-main-grid, .storefront-analytics-grid, .storefront-analytics-side,
#dashProvinceWidget, .dash-province-card { margin-left: 0; margin-right: 0; max-width: 100%; box-sizing: border-box; }
.dashboard-card { padding: 9px; }
/* هیچ کارتی نباید مارجین/پدینگِ افقیِ اضافه‌ای روی خودش داشته باشه — فاصله‌ی ۵ پیکسلی
از لبه‌ی صفحه فقط از پدینگِ خودِ صفحه میاد، تا در همه‌ی صفحه‌ها یکسان باشه. */
.dash-stats-strip, .dash-stats-grid, .invoice-container, .app-shell,
.inv-summary-stats, .pi-order-stats, .sf-order-stats {
margin-left: 0; margin-right: 0; max-width: 100%; box-sizing: border-box;
}
.invoice-list-section { padding-left: 8px; padding-right: 8px; }
.settings-section { margin-bottom: 7px; }
.dash-storefront-widget { padding: 7px; margin-bottom: 6px; }
.dash-quick-grid { padding: 4px; gap: 3px; }
.dash-quick-grid button { padding: 5px 4px; }
.dash-stats-grid { gap: 5px; margin-bottom: 8px; }
.dash-main-grid,
.invoice-form-grid,
.invoice-form-main, .invoice-form-side,
.prod-page-grid,
.storefront-page-grid { gap: 7px; }
.sf-masonry { column-gap: 9px; }
.sf-masonry > * { margin-bottom: 9px; }
.storefront-analytics-grid,
.storefront-analytics-side,
.storefront-page-main, .storefront-page-side,
.wallet-page-grid,
.sf-2col-grid { gap: 5px; }
.token-packages-grid,
.token-packages,
.cust-stats-row { gap: 4px; }
.skeleton-cards-grid,
.inv-stats-row { gap: 5px; }
.review-buyer-grid { gap: 3px 5px; }
.referral-stats { gap: 3px; }
}
/* ===== رفعِ سرریزِ گریدها: بدونِ min-width:0، آیتمِ گرید هیچ‌وقت از عرضِ محتوای خودش
(مثلاً یه عددِ بلندِ ریالی) باریک‌تر نمی‌شه و کل ردیف رو از کادر بیرون می‌بره ===== */
.dash-stats-grid > .dash-stat-card,
.dash-main-grid > *,
.dash-main-grid .dash-panel,
.dash-quick-grid > button,
.cust-stats-row > *,
.inv-stats-row > *,
.token-packages-grid > *,
.token-packages > *,
.review-buyer-grid > *,
.skeleton-cards-grid > * { min-width: 0; }
.dash-stat-value, .dash-stat-label { min-width: 0; overflow-wrap: anywhere; }
/* ===== صفحه‌ی کیف پول ===== */
.wallet-page-grid { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: start; }
.token-packages-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.referral-hero {
background: linear-gradient(135deg, var(--accent-dark), var(--accent)); color: #fff;
border-radius: 14px; padding: 22px 24px; margin-bottom: 14px;
}
.referral-hero-title { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.referral-hero-desc { font-size: 12.5px; line-height: 2; opacity: .9; margin-bottom: 14px; }
.referral-code-box {
display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,0.14);
padding: 9px 16px; border-radius: 10px; font-weight: 700; letter-spacing: 1px; direction: ltr;
}
.referral-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.referral-stat {
background: var(--card-bg, #fff); border: 1px solid var(--border); border-radius: 12px;
padding: 14px; text-align: center;
}
.referral-stat b { display: block; font-size: 20px; font-weight: 800; }
.referral-stat span { font-size: 11.5px; color: var(--muted); }
.ref-row {
display: flex; align-items: center; gap: 9px; padding: 9px 12px; margin-bottom: 5px;
border: 1px solid var(--border); border-radius: 10px; font-size: 12.5px; background: var(--card-bg, #fff);
}
.ref-bullet { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.ref-bullet.ok { background: #2a9d5c; }
.ref-phone { font-weight: 700; direction: ltr; }
.ref-badge { font-size: 11px; color: var(--muted); }
.ref-earn { margin-right: auto; font-size: 12px; color: var(--muted); }
.ref-earn.has { color: #2a9d5c; font-weight: 700; }
@media (max-width: 900px) {
.wallet-page-grid { grid-template-columns: 1fr; }
.referral-stats { grid-template-columns: 1fr; }
}
/* ===== آیکون‌های تخت و تک‌رنگ (همه از رنگ متنِ والد ارث می‌برن) ===== */
.ic { width: 1.05em; height: 1.05em; vertical-align: -0.16em; flex-shrink: 0; display: inline-block; }
.main-nav-icon .ic, .main-nav-icon > svg { width: 16px; height: 16px; vertical-align: middle; }
.dash-quick-icon .ic, .dash-quick-icon > svg { width: 18px; height: 18px; }
button .ic, a .ic { pointer-events: none; }
/* ===== داشبورد (صفحه اصلی) ===== */
.dashboard-view { width: 100%; }
.dashboard-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--card-radius); padding: 26px;
}
.dashboard-card h2 { font-size: 19px; margin-bottom: 4px; }
.dashboard-card .dash-sub { font-size: 13px; color: var(--muted); }
/* سوییچر کسب‌وکار — حالا داخل خودِ سایدبار سرمه‌ای، دقیقاً زیر لوگو (مطابق Shell.tsx فیگما) */
.active-biz-banner {
display: flex; align-items: center; gap: 10px;
background: rgba(var(--sb-tint),0.09); border-radius: 8px;
padding: 10px 12px; margin: 12px 12px 0; cursor: pointer; transition: 0.15s;
}@media (hover: hover) {
.active-biz-banner:hover { background: rgba(var(--sb-tint),0.14); } }
.active-biz-banner .biz-logo {
width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
object-fit: contain; background: #fff; padding: 2px;
}
.active-biz-banner .biz-logo-placeholder {
width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 800; color: rgb(var(--sb-fg));
}
.active-biz-banner .biz-info { flex: 1; min-width: 0; }
.active-biz-banner .biz-info .biz-label { font-size: 10.5px; color: var(--sb-fg-muted); margin-bottom: 2px; }
.active-biz-banner .biz-info .biz-name {
font-size: 12.5px; font-weight: 600; color: rgb(var(--sb-fg));
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.active-biz-banner .biz-switch-hint {
font-size: 11px; font-weight: 600; color: var(--sb-fg-muted); flex-shrink: 0;
}
/* ===== صفحه‌ی ویترین: تب داشبورد ===== */
/* RTL: ستون اول روی راست می‌شینه، پس ۷ کسری اول = ۷۰٪ سمت راست */
.sf-dash-grid { display: grid; grid-template-columns: 7fr 3fr; gap: 16px; align-items: start; }
.sf-dash-main, .sf-dash-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sf-dash-stats-row { display: grid; grid-template-columns: 3fr 1fr; gap: 14px; align-items: start; min-width: 0; }
.sf-dash-stats-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sf-dash-sms-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; min-width: 0; }
@media (max-width: 1180px) {
.sf-dash-stats-row { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
.sf-dash-grid { grid-template-columns: 1fr; }
.sf-dash-sms-row { grid-template-columns: 1fr; }
}
/* کارت وضعیت ویترین/ویترین پرو */
.sf-status-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sf-status-toggle {
display: flex; align-items: center; gap: 8px; cursor: pointer; flex-shrink: 0;
background: var(--header-bg); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px;
font-size: 12.5px; font-weight: 700; color: var(--text);
}
.sf-status-toggle input { width: 17px; height: 17px; margin: 0; }
.sf-status-toggle-sm {
display: flex; align-items: center; gap: 5px; cursor: pointer; flex-shrink: 0;
font-size: 11px; font-weight: 700; color: var(--muted); margin-inline-start: auto;
}
.sf-status-toggle-sm input { width: 14px; height: 14px; margin: 0; }
.sf-status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
@media (max-width: 720px) { .sf-status-grid { grid-template-columns: 1fr; } }
.sf-status-box {
background: var(--header-bg); border: 1px solid var(--border);
border-radius: 11px; padding: 12px 14px;
}
.sf-status-box.ok { border-color: var(--accent); }
.sf-status-box-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.sf-status-box-head b { font-size: 13px; }
.sf-status-pill {
font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 2px 9px;
background: var(--surface); border: 1px solid var(--border); color: var(--muted); white-space: nowrap;
}
.sf-status-pill.ok { background: #ECFDF5; border-color: #6EE7B7; color: #065F46; }
.sf-status-pill.off { background: #FEF2F2; border-color: #FCA5A5; color: #991B1B; }
.sf-status-info-row {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
font-size: 12px; padding: 4px 0; min-width: 0;
}
.sf-status-info-row > span:first-child { color: var(--muted); flex-shrink: 0; }
.sf-status-info-row > span:last-child {
font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left;
}
.sf-status-link { color: var(--accent-text); direction: ltr; }
/* کارت‌های ستون ۳۰٪ */
#sfPreviewButtons { display: flex; flex-direction: column; gap: 8px; }
.sf-dash-bank-row {
background: var(--header-bg); border: 1px solid var(--border); border-radius: 9px;
padding: 9px 11px; margin-bottom: 8px;
}
.sf-dash-bank-num { font-size: 13px; font-weight: 700; direction: ltr; text-align: left; letter-spacing: .3px; }
.sf-dash-bank-holder { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.sf-dash-code-row {
display: flex; align-items: center; gap: 8px; padding: 7px 0;
border-bottom: 1px solid var(--border); font-size: 12.5px;
}
.sf-dash-code-row:last-child { border-bottom: none; }
.sf-dash-code-row.off { opacity: .6; }
.sf-dash-code { font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sf-dash-code-val { color: var(--muted); font-size: 11.5px; }
/* کارت‌های پیامک داشبورد */
.storefront-card.sf-card-danger { border-color: #FCA5A5; background: #FFF7F7; }
.sf-sms-credit {
display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
background: var(--header-bg); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px;
}
.sf-sms-credit.low { background: #FEF2F2; border-color: #FCA5A5; }
.sf-sms-credit-label { font-size: 11.5px; color: var(--muted); }
.sf-sms-credit-value { font-size: 20px; font-weight: 800; color: var(--text); }
.sf-sms-credit-value small { font-size: 12px; font-weight: 600; color: var(--muted); }
.sf-sms-credit.low .sf-sms-credit-value { color: #991B1B; }
.sf-sms-warn { margin-top: 8px; font-size: 12px; color: #991B1B; font-weight: 600; }
/* ===== صفحه‌ی ویترین: تب تنظیمات (سه‌ستونه) ===== */
.sf-settings-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
.sf-settings-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (max-width: 1180px) { .sf-settings-cols { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .sf-settings-cols { grid-template-columns: 1fr; gap: 10px; } .sf-settings-col { gap: 10px; } }
/* کارت‌های کشویی: روی دسکتاپ همیشه بازن، روی موبایل با کلیک روی عنوان باز می‌شن */
.sf-acc-head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
width: 100%; background: none; border: none; padding: 0; margin: 0;
font-family: inherit; text-align: right; color: inherit; cursor: default;
}
.sf-acc-head h4 { margin-bottom: 2px; }
.sf-acc-head .settings-row-desc { padding-top: 0; }
.sf-acc-chevron { display: none; }
.sf-acc-body { margin-top: 14px; }
.sf-acc-divider { border-top: 1px solid var(--border); margin: 16px 0 14px; }
@media (max-width: 900px) {
.sf-acc { padding: 0; }
.sf-acc-head { padding: 14px 16px; cursor: pointer; align-items: center; }
.sf-acc-chevron {
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
width: 26px; height: 26px; border-radius: 7px; background: var(--header-bg);
border: 1px solid var(--border); color: var(--muted); transition: transform .2s ease;
}
.sf-acc.open .sf-acc-chevron { transform: rotate(180deg); }
.sf-acc-body { display: none; margin-top: 0; padding: 0 16px 16px; }
.sf-acc.open .sf-acc-body { display: block; }
.sf-acc.open .sf-acc-head { border-bottom: 1px solid var(--border); margin-bottom: 14px; }
}
/* کارت‌های بانکی در تنظیمات */
.sf-bank-card-row {
display: flex; align-items: center; gap: 8px; background: var(--header-bg);
border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; margin-bottom: 8px;
}
.sf-bank-card-row.off { opacity: .55; }
.sf-bank-card-num { font-size: 13px; font-weight: 700; direction: ltr; text-align: left; letter-spacing: .3px; }
.sf-bank-card-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.sf-bank-card-toggle { display: flex; align-items: center; cursor: pointer; flex-shrink: 0; }
.sf-bank-card-toggle input { width: 17px; height: 17px; margin: 0; }
/* نشانگر شناور ذخیره‌ی خودکار */
.sf-save-toast {
position: fixed; bottom: 22px; inset-inline-start: 22px; z-index: 1200;
display: flex; align-items: center; gap: 8px;
background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
padding: 9px 16px; font-size: 12.5px; font-weight: 700; color: var(--text);
box-shadow: 0 8px 24px rgba(0,0,0,.14);
opacity: 0; transform: translateY(8px); pointer-events: none;
transition: opacity .18s ease, transform .18s ease;
}
.sf-save-toast.show { opacity: 1; transform: translateY(0); }
.sf-save-toast.is-saved { border-color: #6EE7B7; }
.sf-save-toast.is-error { border-color: #FCA5A5; color: #991B1B; }
.sf-save-check { color: #059669; font-weight: 800; }
.sf-save-spinner {
width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0;
border: 2px solid var(--border); border-top-color: var(--accent);
animation: sfSaveSpin .7s linear infinite;
}
@keyframes sfSaveSpin { to { transform: rotate(360deg); } }
@media (max-width: 560px) {
.sf-save-toast { inset-inline-start: 12px; bottom: 74px; }
}
/* ===== نمایشِ کارتی/لیستیِ فهرست‌ها (محصولات، انبار، کاربران) =====
همون زبانِ بصریِ کارت‌های تنظیماتِ ویترین: سطح روشن، حاشیه‌ی نازک، گردیِ ۱۲px و
هاورِ تغییرِ رنگِ حاشیه به رنگِ برند. */
.entity-toolbar {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
}
.entity-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
.entity-chip {
border: 1px solid var(--border); background: var(--surface); color: var(--muted);
border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600;
font-family: inherit; cursor: pointer; white-space: nowrap; transition: .15s;
display: inline-flex; align-items: center; gap: 6px;
}@media (hover: hover) {
.entity-chip:hover { border-color: var(--accent); color: var(--accent-text); } }
.entity-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.entity-chip-count { font-size: 10.5px; opacity: .78; font-weight: 700; }
.entity-view-tools { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.entity-seg {
display: inline-flex; background: var(--header-bg); border: 1px solid var(--border);
border-radius: 9px; padding: 2px; gap: 2px;
}
.entity-seg button {
border: none; background: transparent; color: var(--muted); cursor: pointer; font-family: inherit;
font-size: 11.5px; font-weight: 700; padding: 5px 9px; border-radius: 7px;
display: inline-flex; align-items: center; gap: 5px;
}@media (hover: hover) {
.entity-seg button:hover { color: var(--text); } }
.entity-seg button.active { background: var(--surface); color: var(--accent-text); box-shadow: 0 1px 3px rgba(0,0,0,.07); }
/* شبکه‌ی کارت‌ها — سه اندازه: کوچک / متوسط / بزرگ */
.entity-grid { display: grid; gap: 12px; }
.entity-grid.size-sm { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 10px; }
.entity-grid.size-md { grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); }
.entity-grid.size-lg { grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; }
.ent-card {
background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
padding: 12px; display: flex; flex-direction: column; gap: 9px; position: relative;
min-width: 0; transition: border-color .15s ease, box-shadow .15s ease;
}@media (hover: hover) {
.ent-card:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(0,0,0,.05); } }
.ent-card.selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ent-card-check { position: absolute; top: 9px; inset-inline-end: 9px; z-index: 2; margin: 0; }
.ent-card-thumb {
width: 100%; aspect-ratio: 1 / 1; border-radius: 9px; object-fit: cover; display: block;
background: var(--header-bg); border: 1px solid var(--border);
}
.ent-card-thumb.ph { display: flex; align-items: center; justify-content: center; color: var(--muted); }
.ent-card-title {
font-size: 13px; font-weight: 700; color: var(--text); cursor: pointer; line-height: 1.65;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}@media (hover: hover) {
.ent-card-title:hover { color: var(--accent-text); } }
.ent-card-meta { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; min-width: 0; }
.ent-card-price { font-size: 13.5px; font-weight: 800; color: var(--text); }
.ent-card-price .price-discount-tag { font-weight: 600; }
.ent-card-rows { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; color: var(--muted); }
.ent-card-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.ent-card-row > span:last-child { color: var(--text); font-weight: 700; text-align: left; direction: ltr; }
.ent-card-tools { display: flex; flex-direction: column; gap: 6px; }
.ent-card-foot {
display: flex; align-items: center; gap: 6px; margin-top: auto;
padding-top: 9px; border-top: 1px solid var(--border);
}
.ent-card-foot .btn-spacer { margin-inline-start: auto; }
.ent-card-avatar {
width: 58px; height: 58px; border-radius: 12px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
color: #fff; font-weight: 800; font-size: 17px;
}
.ent-card-head { display: flex; align-items: center; gap: 10px; min-width: 0; padding-inline-end: 22px; }
/* در حالت تایل، عکس/آواتار سمت چپ و متن سمت راست — با row-reverse توی چیدمان
راست‌به‌چپ، آواتار می‌ره انتهای سمت چپِ کارت */
.ent-card-head { flex-direction: row-reverse; }
.ent-card-head > div:not(.ent-card-avatar) { text-align: right; }
/* آواتار کاربر دایره‌ایه (چه عکس، چه حرف اول) */
.cust-ent-card .ent-card-avatar, .ent-card-avatar-img { border-radius: 50%; }
.ent-card-head .ent-card-title { -webkit-line-clamp: 1; }
.ent-card-empty {
grid-column: 1 / -1; padding: 30px 10px; text-align: center;
font-size: 13px; color: var(--muted);
}
/* اندازه‌ی کوچک: فقط اطلاعاتِ ضروری، تا کارت واقعاً جمع‌وجور بمونه */
.entity-grid.size-sm .ent-card { padding: 9px; gap: 7px; border-radius: 10px; }
.entity-grid.size-sm .ent-card-title { font-size: 12px; -webkit-line-clamp: 2; }
.entity-grid.size-sm .ent-card-price { font-size: 12.5px; }
.entity-grid.size-sm .ent-card-tools { display: none; }
.entity-grid.size-sm .ent-card-avatar { width: 46px; height: 46px; border-radius: 10px; font-size: 16px; }
.entity-grid.size-lg .ent-card-avatar { width: 66px; height: 66px; font-size: 22px; }
.entity-grid.size-sm .ent-card-foot { padding-top: 7px; }
.entity-grid.size-lg .ent-card { padding: 14px; gap: 11px; }
.entity-grid.size-lg .ent-card-title { font-size: 14px; }
@media (max-width: 560px) {
.entity-grid.size-md, .entity-grid.size-lg { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.entity-grid.size-sm { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
.entity-toolbar { gap: 8px; }
.entity-view-tools { width: 100%; justify-content: flex-end; }
}
.sf-domain-ip-box {
display: flex; align-items: center; gap: 8px; margin-top: 10px;
background: var(--header-bg); border: 1px solid var(--border); border-radius: 9px;
padding: 8px 11px; font-size: 12.5px;
}
.sf-domain-ip-box span { color: var(--muted); flex-shrink: 0; }
.sf-domain-ip-box code { direction: ltr; font-weight: 700; color: var(--text); flex: 1; }
.sf-domain-status { font-weight: 600; }
.sf-domain-status.ok { color: #059669; }
.sf-domain-status.off { color: #DC2626; }
/* ===== سوییچرِ کسب‌وکار =====
دسکتاپ: کرکره‌ای زیرِ بنر، ولی عرضش دیگه به عرضِ باریکِ سایدبار (۲۲۰px) گره نخورده —
لبه‌ی راستش با لبه‌ی راستِ سایدبار یکی می‌شه و به سمتِ محتوا باز می‌شه تا اسمِ کامل
کسب‌وکارها جا بشه.
موبایل: به شیتِ پایینِ تمام‌عرض تبدیل می‌شه (JS استایل‌های inlineِ دسکتاپ رو پاک می‌کنه). */
.biz-switcher-backdrop {
display: none; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 940;
}
.biz-switcher-backdrop.open { display: block; }
.biz-dropdown-panel {
display: none; position: fixed; z-index: 950; flex-direction: column;
width: 300px; max-width: calc(100vw - 20px); max-height: min(70vh, 520px);
background: var(--surface); border: 1px solid var(--border);
border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.16); overflow: hidden;
}
.biz-dropdown-panel.open { display: flex; }
.biz-switcher-head {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 9px 10px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.biz-switcher-title { font-size: 12px; font-weight: 800; color: var(--muted); }
.biz-switcher-close {
width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border);
background: var(--header-bg); color: var(--muted); cursor: pointer; padding: 0;
display: flex; align-items: center; justify-content: center;
}@media (hover: hover) {
.biz-switcher-close:hover { border-color: var(--accent); color: var(--accent-text); } }
.biz-switcher-body {
padding: 6px; overflow-y: auto; flex: 1;
display: flex; flex-direction: column; gap: 4px;
}
.biz-switcher-foot { padding: 6px; border-top: 1px solid var(--border); flex-shrink: 0; }
.biz-switcher-add {
width: 100%; padding: 8px; border-radius: 7px; border: 1px dashed var(--border);
background: var(--header-bg); color: var(--text); font-family: inherit;
font-size: 12px; font-weight: 700; cursor: pointer;
}@media (hover: hover) {
.biz-switcher-add:hover { border-color: var(--accent); color: var(--accent-text); } }
.biz-switcher-empty { padding: 18px 10px; text-align: center; font-size: 12px; color: var(--muted); line-height: 1.9; }
/* کارتِ هر کسب‌وکار — همون زبانِ بصریِ کارت‌های ویترین */
.biz-card {
display: flex; align-items: center; gap: 8px; width: 100%; text-align: right;
background: var(--header-bg); border: 1px solid var(--border); border-radius: 7px;
padding: 6px 8px; cursor: pointer; font-family: inherit;
transition: border-color .15s ease, background .15s ease;
}@media (hover: hover) {
.biz-card:hover { border-color: var(--accent); } }
.biz-card.active { cursor: default; border-color: var(--accent); background: var(--surface); box-shadow: inset 2.5px 0 0 var(--accent); }
.biz-card-logo {
width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0;
object-fit: contain; background: var(--surface); border: 1px solid var(--border);
}
.biz-card-logo-ph {
width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
color: #fff; font-weight: 800; font-size: 12px;
}
.biz-card-main { flex: 1; min-width: 0; }
/* نام و ستاره روی یک خط. min-width:0 روی نام لازمه وگرنه نامِ بلند به‌جای
سه‌نقطه‌شدن، ستاره رو از ردیف بیرون هل می‌ده. */
.biz-card-name-row { display: flex; align-items: center; gap: 5px; min-width: 0; }
.biz-card-name {
font-size: 12.5px; font-weight: 700; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.biz-star { color: #C9950B; font-size: 15px; line-height: 1; flex-shrink: 0; }
.biz-card-tags { display: flex; align-items: center; gap: 4px; margin-top: 2px; flex-wrap: wrap; }
.biz-tag {
font-size: 9.5px; font-weight: 700; border-radius: 999px; padding: 1px 6px; line-height: 1.6;
border: 1px solid var(--border); color: var(--muted); background: var(--surface); white-space: nowrap;
}
.biz-tag.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.biz-tag.star { color: #B4820A; border-color: #F0D48A; background: #FFFBEB; }
.biz-card-edit {
width: 24px; height: 24px; flex-shrink: 0; border-radius: 6px; padding: 0;
border: 1px solid var(--border); background: var(--surface); color: var(--muted);
cursor: pointer; display: flex; align-items: center; justify-content: center;
position: relative;
}@media (hover: hover) {
.biz-card-edit:hover { border-color: var(--accent); color: var(--accent-text); } }
/* روی گوشی این دکمه ۲۴ پیکسل بود و داخلِ کارتی نشسته بود که خودش هم کلیک‌پذیره:
هر لمسِ کمی خطا به‌جای باز کردنِ فرمِ ویرایش، کسب‌وکار رو عوض می‌کرد، و روی
کسب‌وکارِ فعال (که onclick نداره) اصلاً هیچ اتفاقی نمی‌افتاد. اندازه‌ی دیداری
کمی بزرگ‌تر شده و ناحیه‌ی لمس با یه لایه‌ی نامرئی به حدود ۴۴ پیکسل رسیده. */
@media (max-width: 900px) {
.biz-card-edit { width: 32px; height: 32px; }
.biz-card-edit::after { content: ''; position: absolute; inset: -6px; }
}
@media (max-width: 900px) {
.biz-dropdown-panel {
width: 100%; max-width: 100%; right: 0; left: 0; top: auto; bottom: 0;
border-radius: 12px 12px 0 0; max-height: 78vh;
box-shadow: 0 -8px 26px rgba(0,0,0,.24);
}
.biz-switcher-head::before {
content: ''; position: absolute; top: 7px; right: 50%; transform: translateX(50%);
width: 38px; height: 4px; border-radius: 999px; background: var(--border);
}
.biz-switcher-head { position: relative; padding-top: 15px; }
}
/* ===== بخش آمار داشبورد ===== */
.dashboard-stats-row {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
margin-bottom: 22px;
}
.dashboard-stat-item {
background: var(--page-bg); border-radius: 14px; padding: 16px; text-align: center;
}
.dashboard-stat-item .stat-value { font-size: 21px; font-weight: 800; color: var(--text); }
.dashboard-stat-item .stat-label { font-size: 12px; color: var(--muted); margin-top: 4px; }
@media (max-width: 700px) {
.dashboard-stats-row { grid-template-columns: repeat(1, 1fr); }
}
.dashboard-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.dash-card {
background: var(--pastel-blue); border: none; border-radius: var(--card-radius);
padding: 22px 16px; text-align: center; cursor: pointer;
box-shadow: none; transition: 0.15s;
}@media (hover: hover) {
.dash-card:hover { transform: translateY(-3px); } }
.dash-card.pastel-red { background: var(--pastel-red); }
.dash-card.pastel-yellow { background: var(--pastel-yellow); }
.dash-card.pastel-green { background: var(--pastel-green); }
.dash-card.pastel-blue { background: var(--pastel-blue); }
.dash-card .dash-icon {
width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 14px;
background: var(--surface); display: flex; align-items: center; justify-content: center;
font-size: 22px; box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.dash-card .dash-label { font-size: 14px; font-weight: 700; color: var(--text); }
/* توی مدل ناوبری فیگما (سایدبار دائمی)، دکمه‌ی «بازگشت به داشبورد» اضافه‌ست — کاربر مستقیم از سایدبار جابه‌جا می‌شه */
.back-to-dashboard { display: none !important; }
@media (max-width: 700px) {
.dashboard-grid { grid-template-columns: repeat(2, 1fr); }
}
.dashboard-showcase-section {
margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border);
text-align: center;
}
.dashboard-showcase-title { font-size: 16px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.dashboard-showcase-desc { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.dashboard-showcase-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.showcase-pending-badge {
display: inline-block; margin: 0 auto 12px; padding: 6px 14px; border-radius: 999px;
background: var(--pastel-yellow); color: #8a6d1f; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.storefront-summary-box {
display: inline-flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center;
margin-bottom: 14px;
}
.storefront-link-pill {
display: flex; align-items: center; gap: 8px; background: var(--pastel-blue);
border-radius: 999px; padding: 6px 8px 6px 14px; font-size: 12px; direction: ltr;
max-width: 100%; min-width: 0;
}
/* آدرس طولانی باید کوتاه بشه، نه اینکه کارت رو پهن کنه */
.storefront-link-pill > span {
flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.storefront-link-pill button {
border: none; background: var(--surface); border-radius: 999px; padding: 4px 10px;
font-size: 11.5px; cursor: pointer; color: var(--text); direction: rtl;
}
.storefront-meta-pill {
background: var(--pastel-green); border-radius: 999px; padding: 6px 14px; font-size: 12px; color: #2f6b45;
}
/* ===== داشبورد — نسخه‌ی جدید طبق طرح فیگما ===== */
.dash-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 0 0 32px; }
.dash-stat-card {
background: var(--surface); border-radius: var(--dash-radius); padding: 22px 22px 20px;
border: 1px solid transparent; position: relative; overflow: hidden;
box-shadow: var(--card-shadow);
transition: box-shadow 0.2s ease, transform 0.2s ease;
}@media (hover: hover) {
.dash-stat-card:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-3px); } }
/* کارت‌های آماریِ کلیک‌شدنی — به‌صورت button رندر می‌شن تا با کیبورد هم قابل‌استفاده باشن */
button.dash-stat-card { font-family: inherit; text-align: right; cursor: pointer; width: 100%; }
button.dash-stat-card:focus-visible { outline: 2px solid var(--accent2-text); outline-offset: 2px; }
.dash-stat-icon, .dash-stat-icon-m { position: relative; overflow: visible; }
.dash-stat-card { overflow: visible; }
/* بجِ قرمز: قبلاً با مقدار منفی بیرونِ کادرِ آیکون می‌نشست و روی موبایل (که کارت
overflow:hidden داشت) بریده می‌شد. حالا داخلِ کادر می‌شینه و هیچ‌جا بریده نمی‌شه. */
.dash-stat-badge {
position: absolute; top: -5px; left: -5px; min-width: 19px; height: 19px; padding: 0 5px;
display: flex; align-items: center; justify-content: center;
background: var(--danger); color: #fff; border-radius: 20px;
font-size: 10.5px; font-weight: 700; border: 2px solid var(--surface);
}
/* آیکونِ کارت: کادرِ گردِ رنگی، جایگزینِ نوارِ نازکِ کناریِ قبلی */
.dash-stat-icon {
display: flex; align-items: center; justify-content: center;
width: 44px; height: 44px; border-radius: 14px; margin-bottom: 16px;
}
.dash-stat-icon .ic { width: 21px; height: 21px; }
.tone-card-info .dash-stat-icon { background: var(--info-soft); color: var(--info); }
.tone-card-danger .dash-stat-icon { background: var(--danger-soft); color: var(--danger); }
.tone-card-success .dash-stat-icon { background: var(--success-soft); color: var(--success); }
.tone-card-warning .dash-stat-icon { background: var(--warning-soft); color: var(--warning); }
.dash-stat-label { font-size: 12.5px; color: var(--muted); margin-bottom: 8px; font-weight: 500; }
.dash-stat-value-row { display: flex; align-items: baseline; gap: 6px; margin-bottom: 10px; }
.dash-stat-value { font-size: 30px; font-weight: 800; letter-spacing: -1px; color: var(--text); }
.dash-stat-unit { font-size: 12px; color: var(--muted); }
/* متنِ تغییر: داخلِ یه برچسبِ رنگی با آیکونِ جهت */
.dash-stat-change {
font-size: 12px; font-weight: 600;
display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 20px;
}
.dash-stat-change .ic { width: 13px; height: 13px; stroke-width: 2.4; flex-shrink: 0; }
.dash-stat-change.tone-success { background: var(--success-soft); }
.dash-stat-change.tone-danger { background: var(--danger-soft); }
.dash-stat-change.tone-warning { background: var(--warning-soft); }
.dash-stat-change.tone-neutral { background: var(--neutral-soft); }
/* نسخه‌ی موبایلِ آیکون و مقدار — روی دسکتاپ دیده نمی‌شن */
.dash-stat-mobile, .dash-stat-icon-m { display: none; }
/* ===== کلاس‌های معنایی وضعیت =====
به‌جای رنگِ هاردکدشده‌ی inline توی جاوااسکریپت، همه‌جای داشبورد از همین‌ها استفاده می‌شه. */
.tone-success { color: var(--success); }
.tone-danger { color: var(--danger); }
.tone-warning { color: var(--warning); }
.tone-info { color: var(--info); }
.tone-neutral { color: var(--muted); }
/* پس‌زمینه‌ی هم‌رنگِ وضعیت — برای نقطه‌ی کنارِ هر ردیفِ گردشِ پول */
.bg-tone-success { background: var(--success); }
.bg-tone-danger { background: var(--danger); }
.bg-tone-warning { background: var(--warning); }
.bg-tone-info { background: var(--info); }
.bg-tone-neutral { background: var(--neutral); }
@media (max-width: 900px) { .dash-stats-grid { grid-template-columns: repeat(2, 1fr); } }
/* ===== موبایل: همون نوارِ یکپارچه‌ی دسکتاپ، فقط دو ستونه =====
قبلاً روی موبایل به چهار کارتِ جدا تبدیل می‌شد؛ حالا ساختار و ظاهرش دقیقاً مثل
دسکتاپه (یک پنلِ سفید، آیکونِ خطی کنارِ متن، عددِ کامل) و فقط در دو ستون می‌چینه. */
@media (max-width: 640px) {
/* دسترسی سریع: ردیف‌های افقیِ جدید روی موبایل کمی جمع‌تر */
.dash-quick-icon { width: 32px; height: 32px; border-radius: 10px; }
.dash-quick-icon .ic { width: 16px; height: 16px; }
.dash-quick-grid button { gap: 9px; }
/* پنل‌ها و جدول: پدینگِ افقیِ کمتر تا متن به لبه نچسبه ولی فضا هدر نره */
.dash-panel-head { padding: 14px 14px 10px; }
.dash-panel-head h2 { font-size: 14.5px; }
.dash-mini-table th { padding: 8px 12px; }
.dash-mini-table td { padding: 11px 12px; font-size: 12.5px; }
/* نمودار روی موبایل طبقِ طرحِ مرجع: پلاتِ فرورفته‌ی روشن، خطِ نرمِ بدون نقطه و بدون
سایه‌ی زیرِ خط، و برچسبِ ماه‌ها با رنگِ اکسنت */
/* min-height نگه داشته می‌شه (نه صفر) تا موقعِ جایگزینیِ اسکلتون با نمودار چیدمان نپره */
.dash-bar-chart { padding: 2px 12px 12px; min-height: 196px; }
.dash-chart-plot {
background: var(--header-bg); border-radius: 12px; padding: 10px 6px; overflow: hidden;
}
.dash-bar-chart .lc-area, .dash-bar-chart .lc-dot { display: none; }
/* بدون non-scaling-stroke، چون viewBox با preserveAspectRatio="none" کشیده می‌شه،
ضخامتِ خط در جهت‌های مختلف فرق می‌کنه؛ این‌طوری ضخامت همه‌جا یکنواخت می‌مونه. */
.dash-bar-chart .lc-line { stroke-width: 2.6px; vector-effect: non-scaling-stroke; }
.dash-chart-labels { padding: 8px 2px 0; }
.dash-bar-label { font-size: 10px; color: var(--accent-text); font-weight: 500; }
.dash-panel-pill { font-size: 10.5px; padding: 4px 10px; }
.dash-lowstock-card { padding: 14px 16px; }
}
.dash-main-grid { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; }
@media (max-width: 900px) { .dash-main-grid { grid-template-columns: 1fr; } }
/* ===== چیدمان جدید داشبورد (طبق طرح مرجع) =====
ردیف اول: نوارِ یکپارچه‌ی آمار. ردیف دوم: کارت‌های بانکی (راست) + گردش پول (چپ).
ردیف سوم: ستون کناری (راست) + نمودار درآمد (چپ). */
.dash-row { display: grid; gap: 20px; align-items: start; margin-bottom: 20px; }
/* خط ۳: دسترسی سریع (راست، ۳۰٪) + آخرین تراکنش‌ها (چپ، ۷۰٪)، هم‌ارتفاع */
.dash-row-cards { grid-template-columns: 30fr 70fr; align-items: stretch; }
.dash-row-cards > .dash-panel { display: flex; flex-direction: column; margin-bottom: 0; }
.dash-row-cards .dash-quick-grid, .dash-row-cards #dashTransactions { flex: 1; }
/* خط ۲: نمودار (راست) + کارت بانکی (چپ). هر دو پنل باید دقیقاً هم‌ارتفاع باشن، و
ارتفاع را کارتِ بانکی تعیین کنه — قبلاً نمودار خودش را تا ارتفاعِ ستونِ بلندِ کناری
می‌کشید و بی‌دلیل بلند می‌شد. */
.dash-row-chart { grid-template-columns: 50fr 25fr 25fr; align-items: stretch; }
.dash-row-chart > .dash-panel { display: flex; flex-direction: column; margin-bottom: 0; }
.dash-row-chart .dash-bar-chart {
flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center;
}
.dash-row-chart .dash-cards-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.dash-row-chart .dash-cal-card .cal-grid { flex: 1; align-content: center; }
/* خط ۴: استان‌ها، ویترین و موجودی کم کنار هم؛ اگر پنل استان مخفی باشه بقیه جا را پر می‌کنن */
.dash-row-misc { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.dash-row-misc > * { margin-bottom: 0; }
/* کارت وضعیت ویترین داخل داشبورد: همون محتوای صفحه‌ی تنظیمات، فقط تک‌ستونه
چون عرضِ این پنل کمتر از عرضِ صفحه‌ی تنظیماته */
.dash-sf-status { padding: 0 20px 4px; }
.dash-sf-status .sf-status-head { display: none; }
.dash-sf-status .sf-status-grid { grid-template-columns: 1fr; gap: 10px; }
.dash-row > *, .dash-row .dash-panel { min-width: 0; }
.dash-row .dash-panel { margin-bottom: 0; }
@media (max-width: 1100px) { .dash-row-misc { grid-template-columns: 1fr; } }
/* ردیفِ تراکنش/کارت تا عرضِ ۹۰۰ پیکسل همون ۷۰/۳۰ می‌مونه و فقط زیرِ اون تک‌ستونه می‌شه،
وگرنه روی لپ‌تاپ‌های معمولی (۱۰۰۰–۱۱۰۰px) این نسبت اصلاً دیده نمی‌شد. */
@media (max-width: 900px) {
.dash-row-cards, .dash-row-chart { grid-template-columns: 1fr; }
}
/* نوار آمار: یک پنلِ سفیدِ یکپارچه با چهار بلوکِ افقی (آیکون کنارِ متن) */
.dash-stats-strip {
background: var(--surface); border-radius: var(--dash-radius); box-shadow: var(--card-shadow);
padding: 22px 24px; gap: 0; margin-bottom: 20px;
}
/* چیدمانِ افقیِ هر بلوک با گرید و جای‌گذاریِ صریح — عمداً بدونِ عنصرِ wrapper، تا
ترتیبِ order-محورِ نسخه‌ی موبایل (که فرزندانِ مستقیمِ همین کارت رو می‌چینه) نشکنه. */
.dash-stats-strip .dash-stat-card {
background: none; box-shadow: none; border: none; border-radius: 0; padding: 0 22px;
display: grid; grid-template-columns: 1fr auto; grid-auto-rows: min-content;
align-content: center; column-gap: 14px; overflow: visible;
}@media (hover: hover) {
.dash-stats-strip .dash-stat-card:hover { transform: none; box-shadow: none; } }
/* خطِ جداکننده‌ی نازک بین بلوک‌ها (نه دور تا دورِ کارت) */
.dash-stats-strip .dash-stat-card + .dash-stat-card { border-right: 1px solid var(--border); }
.dash-stats-strip .dash-stat-icon {
grid-column: 2; grid-row: 1 / span 3; align-self: center;
width: 54px; height: 54px; border-radius: 16px; margin: 0; flex-shrink: 0;
}
.dash-stats-strip .dash-stat-icon .ic { width: 24px; height: 24px; }
.dash-stats-strip .dash-stat-label { grid-column: 1; grid-row: 1; margin-bottom: 6px; }
.dash-stats-strip .dash-stat-value-row { grid-column: 1; grid-row: 2; margin-bottom: 6px; }
.dash-stats-strip .dash-stat-change { grid-column: 1; grid-row: 3; justify-self: start; }
.dash-stats-strip .dash-stat-value { font-size: 24px; }
/* ===== کارت بانکی ===== */
/* فقط یک کارت هم‌زمان دیده می‌شه؛ بقیه با کشیدن/دکمه ورق می‌خورن.
جابه‌جایی با scroll-snap نیتیو انجام می‌شه تا لمس روی موبایل بدون هیچ جاوااسکریپتی
روان باشه و اسکرول روی کامپوزیتور بمونه. */
.dash-cards-wrap { padding: 4px 22px 14px; }
.dash-cards-slider { position: relative; }
.dash-cards-track {
display: flex; gap: 16px;
overflow-x: auto; overscroll-behavior-x: contain;
scroll-snap-type: x mandatory; scroll-behavior: smooth;
scrollbar-width: none; -ms-overflow-style: none;
border-radius: 18px;
}
.dash-cards-track::-webkit-scrollbar { display: none; }
.dash-cards-track:focus-visible { outline: 2px solid var(--accent2-text); outline-offset: 3px; }
.dash-card-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: center; scroll-snap-stop: always; }
/* دکمه‌های ورق‌زدن — روی خودِ کارت شناورن */
.dash-cards-nav {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
width: 24px; height: 24px; padding: 0; cursor: pointer; border-radius: 0;
display: flex; align-items: center; justify-content: center;
background: none; border: none; box-shadow: none;
color: var(--muted); opacity: .7; transition: opacity 0.15s ease, color 0.15s ease;
}@media (hover: hover) {
.dash-cards-nav:hover { opacity: 1; color: var(--text); } }
.dash-cards-nav:focus-visible { outline: 2px solid var(--accent2-text); outline-offset: 2px; }
.dash-cards-nav .ic { width: 18px; height: 18px; }
.dash-cards-nav.prev { right: -6px; }
.dash-cards-nav.next { left: -6px; }
.dash-cards-slider.is-single .dash-cards-nav { display: none; }
/* نقطه‌های نشانگر */
.dash-cards-dots { display: flex; justify-content: center; gap: 6px; padding: 14px 22px 16px; }
.dash-cards-dot {
width: 7px; height: 7px; border-radius: 50%; padding: 0; cursor: pointer;
background: var(--muted); opacity: .28; border: none;
transition: width 0.2s ease, opacity 0.2s ease;
}
.dash-cards-dot.is-active { width: 18px; border-radius: 20px; opacity: .55; }
.dash-cards-dot:focus-visible { outline: 2px solid var(--accent2-text); outline-offset: 2px; }
.dash-bank-card {
position: relative; border-radius: 14px; padding: 15px 16px 13px; overflow: hidden;
/* نسبت ابعاد کارت بانکی فیزیکی (ID-1: ۸۵.۶ × ۵۳.۹۸ میلی‌متر). عرضِ واقعی روی صفحه
حدود ۳۲۳ پیکسله؛ اینجا ۲۹۱ پیکسل یعنی ۹۰٪ اندازه‌ی واقعی (۱۰٪ کوچک‌تر).
ارتفاع خودکار از روی همین نسبت حساب می‌شه، پس min-height ثابتِ قبلی حذف شد. */
aspect-ratio: 85.6 / 53.98; width: 100%; max-width: 291px; margin-inline: auto;
display: flex; flex-direction: column; justify-content: space-between;
background: var(--header-bg); border: 1px solid var(--border); color: var(--text);
}
/* پالت رنگیِ کارت‌های فعال — هر کارت به‌ترتیب یکی از این چهار رنگ رو می‌گیره */
.dash-bank-card.c1 { background: linear-gradient(135deg, #0F3D8A, #2B6BD4); border-color: transparent; color: #fff; }
.dash-bank-card.c2 { background: linear-gradient(135deg, #084538, #0E7259); border-color: transparent; color: #fff; }
.dash-bank-card.c3 { background: linear-gradient(135deg, #6B2478, #A23AA8); border-color: transparent; color: #fff; }
.dash-bank-card.c4 { background: linear-gradient(135deg, #6B2D0E, #A8541A); border-color: transparent; color: #fff; }
/* کارت غیرفعال: خاکستری و کم‌رنگ، ولی همچنان خوانا */
.dash-bank-card.is-off {
background: linear-gradient(135deg, #545A65, #6E7581); border-color: transparent; color: #fff;
}
.dash-bank-card-off {
position: absolute; top: 10px; left: 12px; z-index: 1;
background: rgba(0,0,0,.28); color: #fff; border-radius: 20px;
padding: 2px 9px; font-size: 9.5px; font-weight: 700;
}
.dash-bank-card.is-primary {
/* پایانِ گرادیانت عمداً --accent است نه --accent2: با --accent2 روشن، نسبتِ کنتراستِ
متن‌های ریزِ پایینِ کارت (نام صاحب کارت / شماره) به ۴.۳۴ می‌افتاد و AA رد نمی‌شد.
این همون جفتی‌ه که بقیه‌ی کارت‌های گرادیانتیِ برنامه هم استفاده می‌کنن. */
background: linear-gradient(135deg, var(--accent-dark), var(--accent));
border-color: transparent; color: #fff;
}
.dash-bank-card-top { display: flex; flex-direction: column; gap: 4px; }
.dash-bank-card-label { font-size: 10.5px; opacity: .75; }
.dash-bank-card-balance { font-size: 17px; font-weight: 800; letter-spacing: -0.4px; white-space: nowrap; }
.dash-bank-card-chip { width: 28px; height: 21px; opacity: .85; }
.dash-bank-card-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.dash-bank-card-cap { font-size: 9px; letter-spacing: .6px; opacity: .7; text-transform: uppercase; }
.dash-bank-card-val { font-size: 12px; font-weight: 700; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-bank-card-num { font-size: 10.5px; direction: ltr; opacity: .8; letter-spacing: .4px; white-space: nowrap; }
.dash-bank-card-unit { font-size: 10.5px; font-weight: 600; opacity: .8; margin-right: 4px; }
.dash-bank-card-foot { gap: 8px; }
.dash-cards-empty {
padding: 26px 22px; text-align: center; color: var(--muted); font-size: 12.5px;
display: flex; flex-direction: column; align-items: center; gap: 10px;
}
/* کارتِ تقویمِ داشبورد: همون شبکه، فقط جمع‌تر */
.dash-row-cal { grid-template-columns: 1fr; }
.dash-cal-card .cal-weekdays { padding: 0 16px 5px; gap: 3px; font-size: 10px; }
.dash-cal-card .cal-grid { padding: 0 16px 16px; gap: 3px; }
.dash-cal-card .cal-cell { border-radius: 7px; gap: 2px; }
.dash-cal-card .cal-cell-num { font-size: 11px; }
.dash-cal-card .cal-cell-dots { height: 4px; gap: 1.5px; }
.dash-cal-card .cal-cell-dots i { width: 3.5px; height: 3.5px; }
.dash-cal-card .cal-cell.is-today { border-color: var(--accent); background: var(--info-soft); font-weight: 700; }
/* ===== صفحه‌ی تقویم ===== */
.cal-layout { display: grid; grid-template-columns: 380px 1fr; gap: 20px; align-items: start; }
.cal-layout > * { min-width: 0; }
@media (max-width: 980px) { .cal-layout { grid-template-columns: 1fr; } }
.cal-month-nav { display: flex; align-items: center; gap: 4px; }
.cal-month-nav button {
width: 28px; height: 28px; border-radius: 8px; border: none; cursor: pointer;
background: var(--header-bg); color: var(--text);
display: flex; align-items: center; justify-content: center;
}@media (hover: hover) {
.cal-month-nav button:hover { background: var(--sidebar-active-bg); } }
.cal-month-nav button:focus-visible { outline: 2px solid var(--accent2-text); outline-offset: 2px; }
.cal-month-nav .ic { width: 15px; height: 15px; }
.cal-month-nav .cal-today-btn {
width: auto; padding: 0 10px; font-family: inherit; font-size: 11.5px; font-weight: 600;
color: var(--accent-text); background: var(--info-soft);
}
.cal-weekdays {
display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px;
padding: 0 20px 6px; font-size: 11px; color: var(--muted); text-align: center; font-weight: 600;
}
.cal-weekdays span { min-width: 0; }
/* جمعه تعطیله — هم در سرستون هم در خانه‌های تقویم قرمز نشون داده می‌شه */
.cal-weekdays span:last-child { color: var(--danger); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 0 20px 8px; }
.cal-cell {
/* بدون min-width:0 خانه‌ها از عرضِ محتواشون باریک‌تر نمی‌شن و کلِ شبکه از کادر بیرون می‌زنه */
position: relative; min-width: 0; aspect-ratio: 1; border: 1px solid transparent; border-radius: 10px;
background: var(--header-bg); cursor: pointer; font-family: inherit; padding: 0; overflow: hidden;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
transition: background 0.15s ease, border-color 0.15s ease;
}
.cal-cell.is-empty { background: none; cursor: default; }@media (hover: hover) {
.cal-cell:hover { background: var(--sidebar-active-bg); } }
.cal-cell.is-selected { border-color: var(--accent); background: var(--info-soft); }
.cal-cell.has-events { font-weight: 700; }
.cal-cell:focus-visible { outline: 2px solid var(--accent2-text); outline-offset: 1px; }
.cal-cell-num { font-size: 12.5px; color: var(--text); line-height: 1; }
.cal-cell.is-holiday .cal-cell-num { color: var(--danger); }
.cal-cell.is-holiday { background: var(--danger-soft); }@media (hover: hover) {
.cal-cell.is-holiday:hover { background: var(--danger-soft); filter: brightness(0.97); } }
.cal-cell-dots { display: flex; gap: 2px; height: 5px; }
.cal-cell-dots i { width: 5px; height: 5px; border-radius: 50%; display: block; }
.cal-legend {
display: flex; gap: 14px; flex-wrap: wrap; padding: 4px 20px 18px;
font-size: 11px; color: var(--muted);
}
.cal-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cal-legend i { width: 7px; height: 7px; border-radius: 50%; display: block; }
.cal-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 22px 14px; }
.cal-filter {
border: 1px solid var(--border); background: var(--surface); color: var(--muted);
border-radius: 20px; padding: 5px 12px; font-family: inherit; font-size: 11.5px;
font-weight: 600; cursor: pointer; transition: all 0.15s ease;
}@media (hover: hover) {
.cal-filter:hover { color: var(--text); } }
.cal-filter.is-active { background: var(--info-soft); border-color: transparent; color: var(--accent-text); }
.cal-filter:focus-visible { outline: 2px solid var(--accent2-text); outline-offset: 2px; }
/* خطِ زمانیِ روز */
.cal-timeline { padding: 0 22px 20px; }
.cal-story { display: flex; flex-direction: column; }
.cal-ev { display: grid; grid-template-columns: 46px 18px 1fr; gap: 8px; }
.cal-ev-time { font-size: 11.5px; color: var(--muted); padding-top: 12px; text-align: left; }
.cal-ev-rail { position: relative; display: flex; justify-content: center; }
/* خطِ عمودیِ پیوسته‌ی استوری */
.cal-ev-rail::before {
content: ''; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--border);
}
.cal-ev:first-child .cal-ev-rail::before { top: 14px; }
.cal-ev:last-child .cal-ev-rail::before { bottom: calc(100% - 14px); }
.cal-ev-dot {
position: relative; z-index: 1; width: 10px; height: 10px; border-radius: 50%;
margin-top: 12px; border: 2px solid var(--surface);
}
.cal-ev-body { padding: 8px 0 14px; min-width: 0; }
.cal-ev-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cal-ev-kind { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; }
.cal-ev-kind .ic { width: 14px; height: 14px; }
.cal-ev-amount { font-size: 12px; font-weight: 700; margin-right: auto; white-space: nowrap; }
.cal-ev-del {
border: none; background: none; color: var(--muted); cursor: pointer;
font-size: 17px; line-height: 1; padding: 0 4px;
}@media (hover: hover) {
.cal-ev-del:hover { color: var(--danger); } }
.cal-ev-title { font-size: 13px; color: var(--text); margin-top: 3px; }
.cal-ev-note { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
@media (max-width: 640px) {
.cal-weekdays, .cal-grid { padding-left: 12px; padding-right: 12px; }
.cal-legend, .cal-filters, .cal-timeline { padding-left: 14px; padding-right: 14px; }
.cal-ev { grid-template-columns: 40px 16px 1fr; gap: 6px; }
.cal-cell-num { font-size: 11.5px; }
}
/* ===== ردیف‌های گردش پول ===== */
.dash-tx-list { padding: 2px 22px 18px; }
.dash-tx-row {
display: flex; align-items: center; gap: 12px; padding: 11px 0;
border-bottom: 1px solid var(--border); font-size: 12.5px;
}
.dash-tx-row:last-child { border-bottom: none; }
.dash-tx-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; order: 4; }
.dash-tx-amount { font-weight: 700; white-space: nowrap; order: 3; }
.dash-tx-date { color: var(--muted); font-size: 11.5px; white-space: nowrap; order: 2; }
.dash-tx-title {
flex: 1; min-width: 0; order: 1; text-align: right; color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* شمارنده‌ی ویترین: یه دکمه‌ی تمام‌عرض که مستقیم به تبِ سفارش‌های در انتظار می‌بره */
.dash-sf-counter {
display: flex; align-items: center; gap: 10px; width: calc(100% - 44px);
margin: 0 22px 20px; padding: 14px 16px; border-radius: 12px; cursor: pointer;
background: var(--info-soft); border: 1px solid transparent; font-family: inherit;
color: var(--accent-text); text-align: right; transition: background 0.15s ease;
}@media (hover: hover) {
.dash-sf-counter:hover { background: var(--sidebar-active-bg); } }
.dash-sf-counter:focus-visible { outline: 2px solid var(--accent2-text); outline-offset: 2px; }
.dash-sf-counter .ic { width: 16px; height: 16px; margin-right: auto; opacity: .7; }
.dash-sf-counter-num { font-size: 20px; font-weight: 800; letter-spacing: -0.5px; }
.dash-sf-counter-text { font-size: 12.5px; font-weight: 600; }
/* انتخابگرِ بازه‌ی نمودار */
.dash-range-group { display: inline-flex; gap: 2px; background: var(--header-bg); border-radius: 20px; padding: 3px; }
.dash-range-btn {
border: none; background: none; cursor: pointer; font-family: inherit;
font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 5px 11px; border-radius: 20px;
transition: background 0.15s ease, color 0.15s ease;
}@media (hover: hover) {
.dash-range-btn:hover { color: var(--text); } }
.dash-range-btn.is-active { background: var(--surface); color: var(--accent-text); box-shadow: var(--card-shadow); }
.dash-range-btn:focus-visible { outline: 2px solid var(--accent2-text); outline-offset: 1px; }
.dash-sf-body { padding: 0 22px 8px; }
#dashStorefrontPanel .showcase-pending-badge { margin: 0 22px 18px; }
/* ===== رزروِ فضا برای جلوگیری از پرشِ چیدمان (CLS) =====
هر ظرفی که محتواش بعداً با fetch میاد، از همون اول به‌اندازه‌ی محتوای نهایی جا می‌گیره؛
وگرنه لحظه‌ی رسیدنِ داده کلِ ستون به پایین می‌پره. */
#dashboardStats { min-height: 131px; }
#dashMyCards { min-height: 239px; }
#dashTransactions { min-height: 232px; }
#dashSfCounter { min-height: 62px; }
/* اسکلتونِ کارت‌ها دقیقاً همون گریدِ کارت‌های واقعی رو می‌گیره */
#dashMyCards .skeleton-cards-grid { grid-template-columns: 1fr; gap: 0; padding: 4px 22px 51px; }
#dashMyCards .skeleton-card {
height: auto !important; aspect-ratio: 85.6 / 53.98;
max-width: 291px; margin-inline: auto; border-radius: 14px;
}
/* اسکلتونِ نوارِ آمار: یک‌ردیفه و افقی، هم‌شکلِ خودِ dash-stats-strip — نه فقط برای
داشبورد، برای هر جایی که این کلاس رو داره (فاکتورها، محصولات، خریدها، سفارش‌های
ویترین)، وگرنه موقعِ فیلتر/چیپ‌زدن یه لحظه شکلش عوض می‌شه و صفحه می‌پره. */
.dash-stats-strip .skeleton-cards-grid {
display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0;
}
.dash-stats-strip .skeleton-card { height: 87px !important; margin: 0 22px; border-radius: 10px; }
/* اسکلتونِ ردیف‌های تراکنش، هم‌ارتفاعِ ردیفِ واقعی */
.dash-tx-skeleton .dash-tx-row { border-bottom-color: transparent; }
.dash-tx-skeleton .skeleton-block { height: 15px; }
/* ===== موبایل: بازگردانیِ چیدمانِ جدید به حالتِ تک‌ستونه =====
این بلوک عمداً بعد از قوانینِ دسکتاپِ بالا نوشته شده؛ چون هم‌وزن‌ان و در CSS
قانونِ بعدی برنده‌ست، اگر بالاتر می‌بود اثری نداشت. */
@media (max-width: 640px) {
.dash-row { gap: 10px; margin-bottom: 10px; }
/* ===== موبایل: همون نوارِ یکپارچه‌ی دسکتاپ، فقط دو ستونه =====
عمداً این‌جاست (بعد از قوانین دسکتاپ)، چون هم‌وزن‌ان و در CSS قانون بعدی برنده‌ست؛
بالاتر که بود، پدینگ و چیدمانِ دسکتاپ روش سوار می‌شد. */
/* ===== موبایل: هر چهار بلوکِ آمار در یک خطِ افقی =====
عرضِ هر بلوک حدود ۷۰ پیکسله؛ عددِ کاملِ ریالی و زیرنویس («این هفته …») توش جا
نمی‌شن، پس داخلِ بلوک عمودی می‌چینیم (آیکون، عددِ کوتاه‌شده، عنوان) و زیرنویس
مخفی می‌شه — طبق چیزی که خواسته شد. */
.dash-stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-bottom: 14px; }
/* ستون‌های گرید از قبل مساوی بودن؛ چیزی که نامساوی به‌نظر می‌رسید پدینگِ افقیِ
خودِ نوار بود: دو بلوکِ کناری ۱۰ پیکسل فضای اضافه از سمتِ بیرون می‌گرفتن و
پهن‌تر دیده می‌شدن. پدینگِ افقی از نوار برداشته و به تک‌تکِ بلوک‌ها داده شد،
تا هر چهارتا دقیقاً یک‌جور باشن و جداکننده‌ها هم فاصله‌ی یکسان بگیرن. */
.dash-stats-strip { padding: 14px 0; }
.dash-stats-strip .dash-stat-card {
display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
gap: 6px; padding: 0 8px; min-width: 0; overflow: visible; text-align: center;
}
.dash-stats-strip .dash-stat-card + .dash-stat-card { border-right: 1px solid var(--border); }
.dash-stats-strip .dash-stat-icon { width: 38px; height: 38px; border-radius: 12px; margin: 0; }
.dash-stats-strip .dash-stat-icon .ic { width: 19px; height: 19px; }
.dash-stats-strip .dash-stat-value-row,
.dash-stats-strip .dash-stat-change { display: none; }
.dash-stat-icon-m { display: none !important; }
.dash-stats-strip .dash-stat-mobile {
display: block; width: 100%; font-weight: 800; line-height: 1.15; color: var(--text);
font-size: clamp(10px, 3vw, 13px); white-space: nowrap;
overflow: hidden; text-overflow: ellipsis;
}
.dash-stats-strip .dash-stat-mobile.is-long { font-size: clamp(8.5px, 2.5vw, 11px); }
.dash-stats-strip .dash-stat-label {
font-size: clamp(8.5px, 2.4vw, 10px); line-height: 1.25; margin: 0; width: 100%;
}
.dash-stat-badge { top: -5px; left: -5px; min-width: 16px; height: 16px; font-size: 9.5px; }
.dash-cards-wrap { padding: 2px 12px 10px; }
.dash-cards-track { gap: 10px; }
.dash-cards-nav { width: 28px; height: 28px; }
.dash-cards-nav.prev { right: -4px; }
.dash-cards-nav.next { left: -4px; }
.dash-cards-dots { padding: 0 12px 14px; }
.dash-bank-card { min-height: 148px; padding: 15px; border-radius: 16px; }
.dash-bank-card-balance { font-size: 17px; }
.dash-tx-list { padding: 0 12px 12px; }
.dash-tx-row { gap: 8px; font-size: 12px; padding: 10px 0; flex-wrap: wrap; }
.dash-tx-title { flex-basis: 100%; order: 1; }
.dash-tx-date { order: 3; }
.dash-tx-amount { order: 2; }
.dash-sf-body { padding: 0 14px 8px; }
#dashStorefrontPanel .showcase-pending-badge { margin: 0 14px 14px; }
/* روی موبایل ارتفاعِ نهایی این بخش‌ها فرق می‌کنه، پس فضای رزروشده هم فرق می‌کنه */
#dashboardStats { min-height: 96px; }
#dashMyCards { min-height: 236px; }
#dashTransactions { min-height: 250px; }
#dashSfCounter { min-height: 56px; }
#dashMyCards .skeleton-cards-grid { grid-template-columns: 1fr; gap: 0; padding: 2px 12px 47px; }
.dash-stats-strip .skeleton-cards-grid { grid-auto-columns: 1fr; gap: 8px; }
.dash-stats-strip .skeleton-card { height: 88px !important; margin: 0; border-radius: 16px; }
}
/* ===== تبلت (۶۴۱ تا ۱۲۰۰ پیکسل): نوارهای آماریِ ۴ یا ۵-کارتی (طبق طراحی همیشه
یک‌ردیفه می‌مونن، به dash-stats-grid.cols نمی‌رن) با اندازه‌ی کاملِ دسکتاپ توی
این عرض‌ها جا نمی‌شن و کارت‌ها با هم برخورد/هم‌پوشانی پیدا می‌کنن. سقفِ بازه از
۹۰۰ به ۱۲۰۰ پیکسل افزایش پیدا کرد چون بالای ۹۰۰px ساید‌بارِ ۲۲۰پیکسلی برمی‌گرده و
عرضِ واقعیِ محتوا رو دوباره کوچیک می‌کنه — یعنی مثلاً در ۱۰۲۴px (لپ‌تاپ/تبلتِ
landscape) عرضِ محتوا معادلِ همون بازه‌ی تنگِ ۶۴۱-۹۰۰ می‌شه، بدونِ سایدبار. همون
راه‌حلِ فشرده‌ی موبایل (آیکونِ کوچیک، بدونِ ردیفِ مقدار/تغییر، فقط متنِ خلاصه)
اینجا هم با اندازه‌ای بینِ موبایل و دسکتاپ تکرار شد. */
@media (min-width: 641px) and (max-width: 1200px) {
.dash-stats-strip .dash-stat-card {
display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
gap: 6px; padding: 0 6px; min-width: 0; overflow: visible; text-align: center;
}
.dash-stats-strip .dash-stat-icon { width: 40px; height: 40px; border-radius: 12px; margin: 0; }
.dash-stats-strip .dash-stat-icon .ic { width: 20px; height: 20px; }
.dash-stats-strip .dash-stat-value-row,
.dash-stats-strip .dash-stat-change { display: none; }
.dash-stat-icon-m { display: none !important; }
.dash-stats-strip .dash-stat-mobile {
display: block; width: 100%; font-weight: 800; line-height: 1.15; color: var(--text);
font-size: clamp(11px, 1.6vw, 14px); white-space: nowrap;
overflow: hidden; text-overflow: ellipsis;
}
.dash-stats-strip .dash-stat-mobile.is-long { font-size: clamp(9.5px, 1.4vw, 12px); }
.dash-stats-strip .dash-stat-label {
font-size: clamp(9.5px, 1.3vw, 11px); line-height: 1.25; margin: 0; width: 100%;
}
}
@media (max-width: 900px) { .invoice-form-grid { grid-template-columns: 1fr; } }
.dash-panel {
background: var(--surface); border-radius: var(--dash-radius); border: 1px solid transparent;
margin-bottom: 24px; box-shadow: var(--card-shadow);
}
.dash-panel-pad { padding: 18px; }
.dash-panel-head {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 20px 22px 14px; border-bottom: none;
}
.dash-panel-head h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -0.3px; }
.dash-card-add {
width: 30px; height: 30px; border-radius: 9px; cursor: pointer; padding: 0;
display: flex; align-items: center; justify-content: center;
background: var(--info-soft); border: none; color: var(--accent-text);
transition: background 0.15s ease;
}@media (hover: hover) {
.dash-card-add:hover { background: var(--accent); color: #fff; } }
.dash-card-add:focus-visible { outline: 2px solid var(--accent2-text); outline-offset: 2px; }
.dash-card-add .ic { width: 17px; height: 17px; }
.dash-panel-sub { font-size: 12px; color: var(--muted); }
.dash-panel-link {
background: var(--info-soft); border: none; cursor: pointer; color: var(--accent-text);
font-size: 12.5px; font-family: inherit; font-weight: 600; padding: 6px 12px; border-radius: 20px;
transition: background 0.15s ease;
}@media (hover: hover) {
.dash-panel-link:hover { background: var(--sidebar-active-bg); } }
/* ارتفاع حداقلی تا موقعِ جایگزینیِ اسکلتون با نمودار، چیدمان نپره */
.dash-bar-chart { padding: 6px 22px 16px; }
.dash-bar-label { font-size: 10.5px; color: var(--muted); }
.dash-bar-label.is-dim { visibility: hidden; }
.dash-chart-body { width: 100%; min-width: 0; }
.dash-bar-chart, .dash-panel { min-width: 0; }
.dash-chart-labels { display: flex; justify-content: space-between; padding: 4px 4px 0; }
/* برچسبِ بازه‌ی زمانیِ کنارِ عنوانِ نمودار */
.dash-panel-pill {
background: var(--info-soft); color: var(--accent-text);
font-size: 11.5px; font-weight: 600; padding: 5px 12px; border-radius: 20px; white-space: nowrap;
}
.dash-chart-empty { padding: 30px 18px; text-align: center; color: var(--muted); font-size: 12.5px; }
.dash-mini-table { width: 100%; border-collapse: collapse; }
.dash-mini-table th {
padding: 9px 22px; text-align: right; font-size: 11px; color: var(--muted); font-weight: 600;
border-bottom: none; background: var(--header-bg);
}
.dash-mini-table thead tr th:first-child { border-radius: 0 8px 8px 0; }
.dash-mini-table thead tr th:last-child { border-radius: 8px 0 0 8px; }
.dash-mini-table td { padding: 14px 22px; font-size: 13px; border-bottom: none; color: var(--text); }
.dash-mini-table tbody tr { transition: background 0.15s ease; }@media (hover: hover) {
.dash-mini-table tbody tr:hover { background: var(--header-bg); } }
.dash-mini-table .dm-num { color: var(--accent2-text); font-weight: 500; }
.dash-mini-table .dm-amount { }
.dash-mini-table .dm-date { font-size: 11.5px; color: var(--muted); }
.dash-status-badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 11.5px; font-weight: 600; }
.dash-status-badge.tone-success { background: var(--success-soft); color: var(--success); }
.dash-status-badge.tone-danger { background: var(--danger-soft); color: var(--danger); }
.dash-status-badge.tone-warning { background: var(--warning-soft); color: var(--warning); }
.dash-status-badge.tone-neutral { background: var(--neutral-soft); color: var(--muted); }
.dash-mini-empty { padding: 26px 18px; text-align: center; color: var(--muted); font-size: 12.5px; }
/* حالتِ «بارگذاری نشد» — عمداً از حالتِ خالی (که یعنی داده‌ای وجود نداره) متمایزه */
.dash-load-error {
display: flex; flex-direction: column; align-items: center; gap: 8px;
padding: 24px 18px; text-align: center; font-size: 12.5px; color: var(--danger);
}
.dash-load-error .ic { width: 22px; height: 22px; }
.dash-load-error button {
background: none; border: 1px solid var(--danger); color: var(--danger);
border-radius: 8px; padding: 5px 14px; font-size: 12px; font-family: inherit;
font-weight: 600; cursor: pointer; transition: background 0.15s ease;
}@media (hover: hover) {
.dash-load-error button:hover { background: var(--danger-soft); } }
.dash-load-error button:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }
.dash-stats-grid .dash-load-error { grid-column: 1 / -1; }
.dash-storefront-widget .dash-load-error { color: #fff; }
.dash-storefront-widget .dash-load-error button { border-color: rgba(255,255,255,0.6); color: #fff; }
.dash-quick-grid { padding: 8px 12px 14px; display: grid; grid-template-columns: 1fr; gap: 4px; }
.dash-quick-grid button {
background: none; border: 1px solid transparent; border-radius: 12px; padding: 11px 10px;
cursor: pointer; text-align: right; font-family: inherit; transition: all 0.15s; width: 100%;
display: flex; align-items: center; gap: 12px;
}@media (hover: hover) {
.dash-quick-grid button:hover { background: var(--info-soft); border-color: transparent; } }
.dash-quick-text { flex: 1; min-width: 0; }
.dash-quick-arrow { color: var(--muted); flex-shrink: 0; display: flex; }
.dash-quick-arrow .ic { width: 16px; height: 16px; }
.dash-quick-grid button:focus-visible,
.dash-panel-link:focus-visible,
.dash-lowstock-link:focus-visible {
outline: 2px solid var(--accent2-text); outline-offset: 2px; box-shadow: var(--focus-ring);
}
.dash-quick-icon {
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
width: 38px; height: 38px; border-radius: 12px; margin: 0;
background: var(--info-soft); color: var(--accent-text); transition: all 0.15s ease;
}@media (hover: hover) {
.dash-quick-grid button:hover .dash-quick-icon { background: var(--accent); color: #fff; } }
.dash-quick-label { display: block; font-size: 13px; font-weight: 600; color: var(--text); }
.dash-quick-desc { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.dash-storefront-widget {
background: linear-gradient(135deg, var(--accent-dark), var(--accent)); border-radius: var(--dash-radius);
padding: 22px; color: #fff; margin-bottom: 24px; box-shadow: var(--card-shadow);
}
.dash-storefront-widget .btn-save:focus-visible,
.dash-storefront-widget .btn-ghost:focus-visible {
outline: 2px solid #fff; outline-offset: 2px;
}
.dash-storefront-widget h2 { margin: 0; font-size: 16px; font-weight: 700; color: #fff; }
.dash-storefront-widget .dash-panel-sub { color: rgba(255,255,255,0.55); }
.dash-storefront-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.dash-storefront-widget .storefront-summary-box { justify-content: flex-start; margin-bottom: 12px; }
.dash-storefront-widget .storefront-link-pill { background: rgba(255,255,255,0.12); color: #fff; }
.dash-storefront-widget .storefront-link-pill button { background: #fff; color: var(--accent); }
.dash-storefront-widget .storefront-meta-pill { background: rgba(255,255,255,0.12); color: #fff; }
.dash-storefront-widget .showcase-pending-badge {
display: block; width: 100%; text-align: center; background: rgba(255,255,255,0.12); color: #FCA5A5; margin-bottom: 12px;
}
.dash-storefront-widget .dashboard-showcase-actions { justify-content: flex-start; gap: 8px; }
.dash-storefront-widget .btn-save, .dash-storefront-widget .btn-ghost {
flex: 1; padding: 8px; border-radius: 8px; font-size: 12px; cursor: pointer; font-family: inherit; text-align: center;
}
.dash-storefront-widget .btn-save { background: var(--accent); border: none; color: #fff; font-weight: 600; }
.dash-storefront-widget .btn-ghost { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.15) !important; color: #fff; }
.dash-lowstock-card {
background: var(--surface); border-radius: var(--dash-radius); border: 1px solid var(--border);
border-right: 4px solid var(--warning);
padding: 18px 20px; box-shadow: var(--card-shadow);
}
.dash-lowstock-head { display: flex; gap: 10px; align-items: flex-start; }
/* آیکون هشدار/سلامتِ کارت موجودی — هم‌اندازه و هم‌خانواده با بقیه‌ی آیکون‌های SVG برنامه */
.dash-lowstock-icon {
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
width: 38px; height: 38px; border-radius: 12px;
background: var(--warning-soft); color: var(--warning);
}
.dash-lowstock-icon.tone-success { background: var(--success-soft); color: var(--success); }
.dash-lowstock-icon .ic { width: 20px; height: 20px; }
.dash-lowstock-title { font-size: 13.5px; font-weight: 700; color: var(--warning); margin-bottom: 8px; }
.dash-lowstock-title.tone-success { color: var(--success); }
.dash-lowstock-item { font-size: 12.5px; color: var(--text); padding: 5px 0; border-bottom: 1px solid var(--border); }
.dash-lowstock-item:last-of-type { border-bottom: none; }
.dash-lowstock-item .dl-count { color: var(--muted); }
.dash-lowstock-empty { font-size: 12.5px; color: var(--muted); }
.dash-lowstock-link { margin-top: 10px; background: none; border: none; color: var(--warning); cursor: pointer; font-size: 12.5px; font-family: inherit; padding: 0; font-weight: 600; display: block; }
.dash-lowstock-empty { font-size: 12px; color: var(--muted); }
.main-tabs {
display: flex;
gap: 4px;
margin-bottom: 18px;
background: var(--header-bg);
border: none;
border-radius: 10px;
padding: 4px;
width: fit-content;
}
.main-tabs button {
flex: 0 0 auto;
padding: 7px 20px;
border: none;
background: transparent;
border-radius: 7px;
font-family: inherit;
font-weight: 600;
font-size: 13px;
color: var(--muted);
cursor: pointer;
transition: 0.15s;
}
/* تبِ فعال با رنگ پُرِ اکسنت مشخص می‌شه (نه فقط یه چیپِ سفید)، تا توی صفحه‌های
ویترین/فاکتورها/محصولات/کاربران/کیف پول یک‌نگاهی معلوم باشه کاربر کدوم تبه. */
.main-tabs button.active {
background: var(--accent);
color: #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.main-tabs button.active .ic { color: #fff; }@media (hover: hover) {
.main-tabs button:not(.active):hover { color: var(--text); background: var(--surface); } }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
/* ===== ردیفِ تب‌ها + دکمه‌ی مستقلِ افزودن =====
تب‌های فاکتورها/ویترین همون .main-tabs استانداردِ صفحه‌های محصولات و کاربرانن
(نوار سگمنتی، بدون آیکون)؛ اینجا فقط دکمه‌ی افزودن کنارشون چیده می‌شه. */
/* دو تلاشِ CSS-خالص (stretch، بعد aspect-ratio) نتیجه‌ی قابل‌پیش‌بینی ندادن — تعاملِ
stretch + aspect-ratio تو فلکس رفتارِ یکسانی رو تو مرورگرها تضمین نمی‌کنه. اندازه‌ی
دقیقِ دکمه‌ی + حالا با جاوااسکریپت از رو ارتفاعِ واقعیِ رندرشده‌ی دکمه‌های تب اندازه
گیری می‌شه (نگاه کن به syncInvAddBtnSize تو app.js) — همیشه دقیق و مربعه، بدون حدس. */
/* center نه flex-start: خودِ نوارِ تب‌ها ۴px پدینگِ داخلی داره، پس دکمه‌های تب ۴px
پایین‌ترن از لبه‌ی بالاییِ نوار. با flex-start دکمه‌ی + با لبه‌ی «نوار» هم‌تراز
می‌شد نه با «دکمه‌های تب» و چند پیکسل بالاتر می‌افتاد. center این اختلاف رو
خودکار جبران می‌کنه، بدون اینکه لازم باشه عددِ پدینگ رو دستی جبران کنیم. */
.inv-tabs-row { display: flex; align-items: center; gap: 10px; }
.inv-add-btn {
margin-inline-start: auto; flex-shrink: 0;
display: inline-flex; align-items: center; gap: 6px;
background: var(--accent); color: #fff; border: 1px solid var(--accent);
border-radius: 10px; padding: 8px 16px;
font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
white-space: nowrap;
}@media (hover: hover) {
.inv-add-btn:hover { filter: brightness(1.06); } }
@media (max-width: 640px) {
/* در موبایل دکمه‌ی افزودن فقط یه «+» مربعیه تا جا برای تب‌ها باز بمونه */
.inv-tabs-row .main-tabs { min-width: 0; flex: 1 1 auto; }
.inv-tabs-row .main-tabs button { flex: 1 1 0; padding: 7px 8px; font-size: 12px; }
/* عرض/ارتفاعِ واقعی رو جاوااسکریپت (syncInvAddBtnSize) ست می‌کنه؛ اینجا فقط
حالتِ پایه (بدون پدینگِ متن) رو آماده می‌کنیم. */
.inv-add-btn { padding: 0; justify-content: center; }
.inv-add-btn span { display: none; }
/* .ic پیش‌فرض نسبت به فونتِ ۱۳پیکسلیِ دکمه اندازه می‌گیره (۱.۰۵em ≈ ۱۴px) که
تو یه دکمه‌ی مربعیِ فقط-آیکون خیلی ریز و نازک به نظر می‌رسه */
.inv-add-btn .ic { width: 20px; height: 20px; stroke-width: 2.4; }
}
/* ===== کارت‌های آماری «سفارش‌های ویترین»: پنج کارت فیلترکننده، هم‌سبک با کارت‌های آماری
داشبورد، همیشه در یک ردیف (دسکتاپ و موبایل) — با همون قانونِ dash-stats-strip ===== */
.sf-order-stats { grid-template-columns: repeat(5, 1fr); }
.sf-order-stats .dash-stat-card.is-active { background: var(--header-bg); }
@media (max-width: 900px) {
.sf-order-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* ===== کارت‌های آماری «فاکتورهای فروش» و «فاکتورهای خرید» — هر دو ۴ کارت، همون قانون.
کارتِ «افزودن» از این ردیف بیرون اومد و شد دکمه‌ی مستقلِ کنارِ تب‌ها.
(خرید قبلاً ۳ کارت داشت؛ با اضافه‌شدنِ کارتِ چهارم، ستون‌ها هم ۴ تا شدن وگرنه
کارتِ چهارم می‌افتاد خطِ بعد.) ===== */
.inv-summary-stats, .pi-order-stats { grid-template-columns: repeat(4, 1fr); }
.inv-summary-stats .dash-stat-card.is-active,
.pi-order-stats .dash-stat-card.is-active { background: var(--header-bg); }
@media (max-width: 900px) {
.inv-summary-stats, .pi-order-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.invoice-container {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}
/* ===== چیدمان دوستونه‌ی فرم فاکتور (مطابق فیگما): ستون اصلی ۱fr + ستون کناری ۳۰۰px ===== */
.invoice-form-grid { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
.invoice-form-main, .invoice-form-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* هر بخش فرم فاکتور یه کارت مستقل سفید با گوشه‌ی گرد می‌شه (به‌جای یه سند بزرگ با خط‌جداکننده) */
#panelInvoice .doc-header,
#panelInvoice .info-card,
#panelInvoice .items-table-section,
#panelInvoice .notes-box,
#panelInvoice .summary-table-col,
#panelInvoice .sign-stamp {
/* سفیدِ ثابت نه: کارت باید با تمِ اپ عوض بشه (موقعِ چاپ، --surface خودش سفید می‌شه) */
background: var(--surface); border: 1px solid var(--border); border-radius: 12px; margin: 0;
}
/* تو فرمِ فاکتور این کارت تک‌ستونه‌ست: بالا نوع سند (چیپ‌های افقی)، پایین
شماره‌ی فاکتور و تاریخ صدور کنارِ هم ۵۰/۵۰. (تو نمای سند/چاپ همون دو ستونیِ
قبلی می‌مونه — لوگو سمتِ راست، مشخصات سمتِ چپ.) */
#panelInvoice .doc-header {
border-bottom: 1px solid var(--border); padding: 14px 16px;
grid-template-columns: minmax(0, 1fr); gap: 12px;
}
#panelInvoice .header-meta-col {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px;
}
#panelInvoice .items-table-section { padding: 20px; margin-top: 0; }
#panelInvoice .notes-box { padding: 20px; }
#panelInvoice .summary-table-col { padding: 20px; }
#panelInvoice .summary-table-col h4 { font-size: 15px; font-weight: 700; margin-bottom: 8px; color: var(--text); }
/* ===== کارت «خلاصه فاکتور» + دکمه‌های پایین — بازسازی از روی طرحِ مرجع ===== */
#panelInvoice .summary-table-col { border-radius: 14px; padding: 16px 20px; }
#panelInvoice .summary-table { border-collapse: collapse; table-layout: fixed; font-size: 13px; }
/* خطوطِ جداکننده‌ی افقیِ نازک به‌جای کادرِ دورِ هر سلول */
#panelInvoice .summary-table td {
border: none; border-bottom: 1px solid var(--border);
background: transparent; padding: 13px 2px;
}
#panelInvoice .summary-table tr:last-child td { border-bottom: none; }
#panelInvoice .summary-table .s-label {
background: transparent; color: var(--muted); font-weight: 700; font-size: 12.5px;
width: 52%; text-align: right;
}
#panelInvoice .summary-table .s-value { text-align: left; font-weight: 700; color: var(--text); }
#panelInvoice .summary-table .s-value input { font-weight: 700; font-size: 13px; }
/* تخفیف تو طرح رنگِ هشدار داره */
#panelInvoice .summary-table .s-value #discountInput { color: var(--danger); }
/* ردیفِ مبلغ نهایی: بدون پس‌زمینه‌ی رنگی، فقط بزرگ و پررنگ با رنگِ کسب‌وکار */
#panelInvoice .summary-table .final-row .s-label {
background: transparent; color: var(--text); font-size: 13.5px; font-weight: 800;
}
#panelInvoice .summary-table .final-row .s-value {
background: transparent; color: var(--accent-text); font-size: 17px; font-weight: 800;
}
#panelInvoice .summary-table .final-row td { border-top: 1px solid var(--border); }
/* دکمه‌ها: اصلی پهن و پُر، کناری‌ها سبک — با آیکون، مثل طرح */
/* align-items اینجا عمداً center ست، نه stretch. با stretch، اگه به هر دلیلی
ظرف بلندتر از محتواش بشه (فلکسِ چندخطی، ارتفاعِ گرفته‌شده از والد…) خودِ
دکمه‌ها کش میان و غول‌پیکر می‌شن — چیزی که تو موبایل دیده شد. با center
ارتفاعِ دکمه فقط به پدینگ و min-height خودش بستگی داره. */
#panelInvoice .invoice-editor-actions {
display: flex; gap: 10px; align-items: center; align-content: center;
background: transparent; padding: 14px 20px 0 20px; flex-wrap: wrap;
}
#panelInvoice .invoice-editor-actions button {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
border-radius: 10px; padding: 9px 14px; font-size: 13px; font-weight: 700;
min-height: 38px; height: auto;
}
/* بدون این، قانونِ display: inline-flex بالا بر display:none ی که مرورگر برای
صفتِ [hidden] می‌ذاره می‌چربه و دکمه‌ی پنهان‌شده باز هم دیده می‌شه — دقیقاً
همون چیزی که باعث شد «ذخیره در پیش‌نویس» تو فاکتور خرید هم ظاهر بشه. */
#panelInvoice .invoice-editor-actions button[hidden] { display: none; }
#panelInvoice .invoice-editor-actions .btn-save { flex: 1 1 200px; }
#panelInvoice .invoice-editor-actions .btn-ghost { flex: 1 1 140px; background: var(--surface); }
#panelInvoice .invoice-editor-actions .ic { width: 16px; height: 16px; }
#panelInvoice .sign-stamp { margin-bottom: 0; }
/* ===== کارت‌های «مهر و امضا» و «توضیحات فاکتور» — بازسازی از روی طرحِ مرجع =====
فقط داخل #panelInvoice؛ همین کلاس‌ها تو نسخه‌ی چاپی/پاپ‌آپ مشاهده هم هستن و
اون‌ها باید همون شکلِ سندی خودشون رو نگه دارن. */
#panelInvoice .sign-stamp,
#panelInvoice .notes-box {
border-radius: 14px; padding: 14px 16px; margin: 0;
display: block;
}
/* بدون این، همین display: block بالا بر display:none ی که مرورگر برای صفتِ
[hidden] می‌ذاره می‌چربه و کارتِ «تصویر فاکتور» تو فاکتور فروش هم دیده می‌شه. */
#panelInvoice .notes-box[hidden] { display: none; }
#panelInvoice .card-head {
display: flex; align-items: center; gap: 8px;
font-size: 14.5px; font-weight: 800; color: var(--text);
border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 14px;
}
#panelInvoice .card-head .ic { width: 18px; height: 18px; color: var(--accent-text); }
/* دو دراپ‌زونِ هم‌عرض، دقیقاً ۵۰/۵۰ مثل بقیه‌ی کارت‌ها */
#panelInvoice .sign-stamp-cols {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px;
}
#panelInvoice .sign-stamp .stamp-box {
flex: none; min-width: 0; height: auto; min-height: 104px;
border: 1.5px dashed var(--border); border-radius: 12px;
background: var(--header-bg); padding: 14px 12px; position: relative;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
#panelInvoice .sign-stamp .stamp-box[id="stampBox"] { cursor: pointer; }
#panelInvoice .sign-stamp .stamp-zone-icon {
width: 22px; height: 22px; color: var(--accent-text); opacity: .85;
}
#panelInvoice .sign-stamp .stamp-label {
font-size: 12.5px; font-weight: 700; color: var(--muted); text-align: center;
}
/* وقتی مهر آپلود شده، خودِ عکس جای آیکون/برچسب رو می‌گیره */
#panelInvoice .sign-stamp .stamp-box.has-stamp {
border-style: solid; background: var(--surface);
}
#panelInvoice .sign-stamp .stamp-box.has-stamp .stamp-zone-icon,
#panelInvoice .sign-stamp .stamp-box.has-stamp .stamp-label { display: none; }
#panelInvoice .sign-stamp .stamp-preview-img { max-height: 76px; margin: 0; }
/* کادرِ توضیحات: همون کادرِ پُرِ گِردِ بقیه‌ی فیلدها */
#panelInvoice .notes-box textarea {
min-height: 96px; border: 1px solid transparent; border-radius: 10px;
background: var(--header-bg); padding: 12px 14px; font-size: 13px; line-height: 1.9;
color: var(--text);
}
#panelInvoice .notes-box textarea:focus {
border-color: var(--accent); background: var(--surface);
}
.header-meta-col .hm-value select {
border: none; border-bottom: 1px solid var(--border); background: transparent;
font-size: 13px; font-family: inherit; color: var(--text); padding: 0 2px; outline: none;
}
.header-meta-col .hm-value select:focus { border-bottom-color: var(--accent-text); }
/* این دو قانون قبلاً بی‌اثر بودن: سلکتورشون از #panelInvoice ... ضعیف‌تره بود و
اونجا هم flex-direction هم padding ست شده. حالا با همون وزن و — مهم‌تر —
فقط برای موبایل نوشته می‌شن (قبلاً سراسری بودن، ولی چون بی‌اثر بودن کسی
متوجه نشد؛ اگه همین‌طور سراسری قوی‌شون می‌کردم دسکتاپ هم ستونی می‌شد). */
@media (max-width: 900px) {
#panelInvoice .invoice-editor-actions { flex-direction: column; align-items: stretch; }
#panelInvoice .invoice-editor-actions button { width: 100%; padding: 9px 12px; font-size: 13px; }
/* ریشه‌ی دکمه‌های غول‌پیکر: .btn-save و .btn-ghost بالاتر flex: 1 1 200px دارن.
تو چیدمانِ ردیفیِ دسکتاپ این یعنی «عرض رو پر کن»، ولی همین‌که موبایل
ستونی می‌شه محورِ اصلی عمودی می‌شه و همون flex-grow دکمه رو تا ته ارتفاعِ
ظرف کش می‌ده. اینجا خنثی می‌شه تا ارتفاع فقط از پدینگ و min-height بیاد. */
#panelInvoice .invoice-editor-actions .btn-save,
#panelInvoice .invoice-editor-actions .btn-ghost { flex: 0 0 auto; }
}
/* ===== هدر ===== */
/* کارت لوگو — بازسازی از روی طرحِ مرجع، ولی با توکن‌های خودِ پروژه (نه پالتِ جدید):
فیلدها برچسب‌بالا + کادرِ پُرِ گِرد، ستاره‌ی قرمز برای اجباری‌ها، و نوع سند
به‌صورت رادیو زیر لوگو. رنگِ انتخاب‌شده --accent هست (رنگِ کسب‌وکار) نه آبیِ
ثابتِ طرح، تا کارت با بقیه‌ی اپ هم‌رنگ بمونه. */
.doc-header {
display: grid;
/* minmax(0,1fr) نه 1fr: کفِ 1fr برابرِ min-content ـه، برای همین ستونی که
محتوای پهن‌تری داره (کادرِ تاریخ با متنِ nowrap) بیشتر از نصف رو می‌گرفت و
کارت هیچ‌وقت واقعاً ۵۰/۵۰ نمی‌شد. */
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
/* stretch نه start: ستونِ نوع سند باید دقیقاً هم‌ارتفاعِ ستونِ روبه‌رو بشه.
با stretch + پخش‌شدنِ رادیوها، این هم‌ارتفاعی به اندازه‌ی فونت و گپ وابسته
نیست و با هر تغییرِ بعدی هم خودش درست می‌مونه. */
align-items: stretch;
padding: 16px 20px;
border-bottom: 1px solid var(--border);
gap: 14px 18px;
}
.header-logo-col { display: flex; flex-direction: column; gap: 12px; padding: 0; text-align: right; min-width: 0; }
.header-meta-col { display: flex; flex-direction: column; gap: 8px; text-align: right; min-width: 0; }
/* گروهِ «برچسب بالا، کادر پایین» — پایه‌ی همه‌ی فیلدهای این کارت */
.doc-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.doc-field-label {
font-size: 12.5px; font-weight: 700; color: var(--muted); line-height: 1.6;
}
.doc-req { color: var(--danger); font-style: normal; margin-inline-start: 2px; }
.doc-field-box {
display: flex; align-items: center; justify-content: flex-start; text-align: right; gap: 6px;
min-width: 0; overflow: hidden;
background: var(--header-bg); border: 1px solid transparent;
border-radius: 9px; padding: 7px 10px; min-height: 34px;
font-size: 13px; color: var(--text);
}
.doc-field-box input { cursor: inherit; }
.doc-field-box input[readonly] { cursor: pointer; }
.doc-field-icon { width: 15px; height: 15px; color: var(--muted); flex-shrink: 0; }
.doc-field-box:focus-within { border-color: var(--accent); background: var(--surface); }
.doc-field-box input {
flex: 1 1 0; min-width: 0; width: 100%; border: none; background: transparent; padding: 0;
font-family: inherit; font-size: 13.5px; color: var(--text); text-align: right;
}
.doc-field-box input:focus { outline: none; }
/* ===== نوع سند: همون چیپ‌های لیست فاکتورها =====
قبلاً رادیوهای عمودی بودن و یه ستونِ کاملِ کارت رو می‌گرفتن. حالا از همون
کامپوننتِ .inv-chip (با tone-* رنگیِ لیست فاکتورها) استفاده می‌کنن تا زبانِ
بصری یکی باشه، و افقی می‌شینن تا شماره‌ی فاکتور و تاریخ صدور زیرشون ۵۰/۵۰ بیان.
.inv-chip-bar خودش فلکسِ nowrap با اسکرولِ افقیه، پس هر چهارتا حتماً تو یک خط
می‌مونن و هیچ‌وقت به خطِ دوم نمی‌رن. برچسب‌ها هم عمداً کوتاه شدن (نامِ کاملشون
تو title هست) تا رو صفحه‌های باریک هم بدونِ اسکرول جا بشن. */
.doc-field-fill { flex: 1; }
/* تنها تفاوت با نوارِ چیپِ لیست: اینجا داخلِ کارته، پس پدینگ/مارجینِ خودِ نوار
لازم نیست. اندازه و پدینگِ چیپ‌ها عیناً همون چیپ‌های لیسته. */
.doc-type-chips { padding: 0; margin: 0; }
/* ===== تقویم رولی شمسی (مشترک) ===== */
/* ===== چرا z-index جدا؟ =====
این شیت معمولاً از داخلِ یک پاپ‌آپِ دیگه باز می‌شه (یادداشت/یادآوری، فرمِ چک…).
همه‌ی .modal-overlay ها z-index: 1000 دارن و وقتی برابر باشن، هرکدوم تو DOM
پایین‌تر باشه رو بقیه می‌افته — این شیت بالای فایل تعریف شده، پس زیرِ پاپ‌آپِ
یادداشت می‌رفت و اصلاً دیده نمی‌شد. از پاپ‌آپ‌های دیگه بالاتر می‌شینه ولی هنوز
زیرِ لایت‌باکسِ تصویر (۱۲۰۰). */
.wheel-date-overlay { align-items: flex-end; z-index: 3600; }
.wheel-date-sheet {
width: 100%; max-width: 420px; margin: 0 auto;
background: var(--surface); border-radius: 18px 18px 0 0;
padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px)) 14px;
box-shadow: 0 -6px 24px rgba(0,0,0,.14);
}
.wheel-date-head {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.wheel-date-title { font-size: 13.5px; font-weight: 800; color: var(--text); }
.wheel-date-head button {
background: none; border: none; font-family: inherit; font-size: 13.5px;
font-weight: 700; cursor: pointer; padding: 6px 4px; min-height: 40px;
}
.wheel-date-cancel { color: var(--muted); }
.wheel-date-confirm { color: var(--accent-text); }
.wheel-date-body {
position: relative; display: grid; grid-template-columns: 1fr 1.4fr 1fr;
gap: 6px; height: 200px; margin-top: 6px;
}
/* حالتِ ساعت: فقط دو ستونِ ساعت و دقیقه (۲۴ساعته) */
.wheel-date-body.is-time { grid-template-columns: 1fr 1fr; }
.wheel-date-body.is-time .wheel-col-date { display: none; }
.wheel-date-body:not(.is-time) .wheel-col-time { display: none; }
/* فیلدهایی که مقدارشون با چرخ انتخاب می‌شه: کیبورد باز نمی‌کنن، پس نشانگرِ
دست بگیرن تا معلوم باشه کلیک‌شدنی‌ان */
.wheel-pick-input { cursor: pointer; }
/* نوارِ وسط که آیتمِ انتخاب‌شده روش می‌شینه */
.wheel-date-band {
position: absolute; top: 50%; left: 0; right: 0; height: 40px;
transform: translateY(-50%); border-radius: 10px;
background: var(--header-bg); pointer-events: none;
}
.wheel-col {
position: relative; overflow-y: auto; scroll-snap-type: y mandatory;
-webkit-overflow-scrolling: touch; scrollbar-width: none; text-align: center;
overscroll-behavior: contain;
}
.wheel-col::-webkit-scrollbar { display: none; }
/* پدِ بالا/پایین = (ارتفاعِ ستون − ارتفاعِ یک آیتم) ÷ ۲ */
.wheel-pad { height: 80px; }
.wheel-item {
height: 40px; line-height: 40px; scroll-snap-align: center; cursor: pointer;
font-size: 14px; color: var(--muted); white-space: nowrap;
transition: color .12s, font-weight .12s;
}
.wheel-item.is-active { color: var(--text); font-weight: 800; font-size: 15px; }
.wheel-date-today {
width: 100%; margin-top: 10px; background: var(--header-bg); border: none;
border-radius: 10px; padding: 11px; font-family: inherit; font-size: 13px;
font-weight: 700; color: var(--accent-text); cursor: pointer; min-height: 44px;
}
.doc-type-draft-badge {
display: inline-block; align-self: flex-start; font-size: 11px; font-weight: 700;
background: var(--header-bg); color: var(--muted); border-radius: 6px; padding: 2px 8px;
}
.doc-type-printed { display: none; }
@media print {
.doc-type-printed { display: block; font-size: 13px; font-weight: 700; }
}
/* آدرس ممکنه بلند باشه: به‌جای بریدن، تا دو خط رشد می‌کنه */
.field-line-address textarea {
resize: none; overflow: hidden; min-height: 1.6em; max-height: 3.4em;
border: none; border-bottom: 1px solid var(--border); background: transparent;
font-family: inherit; font-size: 13px; color: var(--text); padding: 0; width: 100%;
line-height: 1.7;
}
.field-line-address textarea:focus { outline: none; border-bottom-color: var(--accent-text); }
.field-line-missing span { color: var(--warning); font-size: 11.5px; }
.header-meta-col .hm-label { font-weight: 700; color: var(--text); font-size: 13px; white-space: nowrap; }
.header-meta-col .hm-value { font-size: 13px; display: flex; align-items: baseline; gap: 4px; }
.header-meta-col .hm-value input {
width: 110px; border: none; border-bottom: 1px solid var(--border);
background: transparent; font-size: 13px; font-family: inherit; color: var(--text);
text-align: right; padding: 0;
}
.header-meta-col .hm-value input:focus { outline: none; border-bottom-color: var(--accent-text); }
/* پیشوندِ شماره و متنِ تاریخ نباید ستون رو پهن نگه دارن — با minmax(0,1fr) ستون
دیگه از سهمش بیشتر نمی‌گیره، پس محتوای بلند باید خودش کوتاه بشه نه اینکه سرریز کنه. */
.number-prefix-badge { font-weight: 800; color: var(--text); flex-shrink: 0; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-field-box > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logo-upload {
position: relative; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 6px;
cursor: pointer; overflow: hidden;
min-height: 86px; border-radius: 12px; padding: 12px;
border: 1.5px dashed var(--border); background: var(--header-bg);
font-size: 12px; color: var(--muted); text-align: center; line-height: 1.6;
}
.logo-upload .ic { width: 22px; height: 22px; opacity: .75; }
.logo-upload.has-logo {
width: auto; border-radius: 6px; padding: 2px; background: transparent;
border: none; min-height: 0; display: flex;
}
.logo-upload img { height: 100%; width: auto; object-fit: contain; display: block; }
.logo-remove-btn {
display: none; position: absolute; top: 2px; left: 2px; background: var(--danger); color: #fff;
border: none; border-radius: 50%; width: 18px; height: 18px; padding: 0;
align-items: center; justify-content: center; cursor: pointer; z-index: 2;
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.logo-remove-btn .ic { width: 11px; height: 11px; }
.logo-upload.has-logo .logo-remove-btn { display: flex; }
/* ===== کارت‌های فروشنده / خریدار ===== */
.info-card {
display: flex; border: 1px solid var(--border); border-radius: 8px;
overflow: hidden; margin: 16px 30px 0 30px;
}
.side-tag {
width: 38px; background: var(--header-bg); display: flex; align-items: center;
justify-content: center; font-weight: 800; font-size: 14px;
writing-mode: vertical-rl; text-orientation: mixed;
border-left: 1px solid var(--border); color: var(--text); letter-spacing: 2px;
}
.main-content {
flex: 2; min-width: 220px; padding: 12px 16px; display: flex;
flex-direction: column; justify-content: center; gap: 8px;
border-left: 1px solid var(--border);
}
.field-line { display: flex; align-items: baseline; gap: 6px; font-size: 13px; flex-wrap: wrap; }
.field-line label { font-weight: 700; color: var(--text); white-space: nowrap; }
.field-line input, .field-line select {
border: none; border-bottom: 1px dashed var(--border); background: transparent;
font-family: inherit; font-size: 13px; flex: 1; min-width: 120px;
padding: 3px 2px; color: var(--text); outline: none;
}
.field-line input:focus, .field-line select:focus { border-bottom: 1px solid var(--accent-text); }
.aux-column {
flex: 1; min-width: 160px; padding: 12px 16px; display: flex;
flex-direction: column; justify-content: center; gap: 8px;
background: var(--header-bg); font-size: 13px;
}
.aux-column .field-line input { border-bottom: 1px dashed var(--border); }
.btn-pick-customer { flex-shrink: 0; padding: 4px 10px; font-size: 11px; font-weight: 700; }
/* ===== کارت‌های فرمِ فاکتور (فروشنده/خریدار) — بازسازی از روی طرحِ مرجع =====
فقط داخل #panelInvoice؛ همین کلاس‌ها تو پاپ‌آپِ مشاهده و نسخه‌ی چاپی هم استفاده
می‌شن و اون‌ها نباید عوض بشن. */
#panelInvoice .info-card {
display: block; border: 1px solid var(--border); border-radius: 14px;
overflow: visible; margin: 0; padding: 14px 16px 8px 16px;
background: var(--surface);
}
/* «برچسبِ کناریِ» عمودی به سربرگِ افقی با آیکون و خطِ جداکننده تبدیل می‌شه */
#panelInvoice .side-tag {
width: auto; background: transparent; writing-mode: horizontal-tb;
border-left: none; border-bottom: 1px solid var(--border);
display: flex; align-items: center; gap: 8px; justify-content: flex-start;
font-weight: 800; font-size: 14.5px; letter-spacing: 0;
color: var(--text); padding-bottom: 9px; margin-bottom: 11px;
}
#panelInvoice .side-tag .ic { width: 18px; height: 18px; color: var(--accent-text); }
/* دکمه‌ی کنارِ سربرگ — رنگِ کسب‌وکار (--biz-accent چون --accent داخل این پنل با
رنگِ ثابتِ فاکتور بازنویسی شده) */
.card-head-btn {
margin-inline-start: auto; flex-shrink: 0;
background: var(--biz-accent, var(--accent)); color: #fff; border: none;
border-radius: 9px; padding: 7px 12px; min-height: 32px;
font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
white-space: nowrap;
}
.card-head-btn:active { opacity: .85; }
/* فیلدهای کارت فروشنده: دو ستونِ مساوی، با امکانِ تمام‌عرض شدنِ آدرس */
#panelInvoice .seller-grid {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 8px 12px; align-items: start;
}
#panelInvoice .seller-grid .span-2 { grid-column: 1 / -1; }
/* دکمه‌ی ذره‌بینِ انتخاب مشتری داخلِ همون کادرِ نام می‌شینه تا ردیف به هم نریزه */
#panelInvoice .field-with-btn { display: flex; align-items: stretch; gap: 6px; min-width: 0; }
#panelInvoice .field-with-btn input { flex: 1 1 0; min-width: 0; }
#panelInvoice .field-with-btn .btn-pick-customer {
flex: 0 0 auto; width: 40px; height: 40px; padding: 0;
display: inline-flex; align-items: center; justify-content: center;
background: var(--biz-accent, var(--accent)); border: none !important; border-radius: 9px;
color: #fff; text-decoration: none; min-height: 0;
}
#panelInvoice .field-with-btn .btn-pick-customer:active { opacity: .85; }
#panelInvoice .field-with-btn .btn-pick-customer .ic { width: 16px; height: 16px; }
/* کشوی «فیلدهای بیشتر»: به‌جای قطعِ ناگهانیِ display، ارتفاع و شفافیت نرم تغییر
می‌کنن. max-height عمداً از محتوای واقعی بیشتره چون ارتفاع دقیق از قبل معلوم
نیست و انیمیشنِ height:auto کار نمی‌کنه. */
#panelInvoice .card-more {
margin-top: 0; overflow: hidden;
max-height: 0; opacity: 0;
transition: max-height .28s ease, opacity .2s ease, margin-top .28s ease;
}
#panelInvoice .card-more.is-open { max-height: 460px; opacity: 1; margin-top: 8px; }
@media (prefers-reduced-motion: reduce) {
#panelInvoice .card-more { transition: none; }
}
/* مشتری‌ای که از ویترین معمولی اومده و شماره‌ش تایید نشده */
.cust-temp-tag { background: var(--warning-soft); color: var(--warning); }
/* دکمه‌ی «پاک کردن فرم» کنارِ دکمه‌ی ویرایش — با رنگِ خنثی تا با دکمه‌ی اصلی
(که رنگِ کسب‌وکار داره) اشتباه گرفته نشه */
#panelInvoice .field-with-btn .btn-clear-buyer {
background: var(--header-bg); color: var(--muted);
}
/* فیلدِ قفل‌شده باید دیده بشه که قفله، نه اینکه خالی و بی‌جواب به نظر برسه */
#panelInvoice .field-line > input[readonly],
#panelInvoice .field-line > textarea[readonly],
#panelInvoice .field-with-btn > input[readonly] {
color: var(--muted); cursor: default;
}
.dup-phone-msg { font-size: 13px; line-height: 2; color: var(--text); margin-bottom: 16px; }
.dup-phone-msg b { color: var(--accent-text); }
.dup-phone-actions { display: flex; flex-direction: column; gap: 8px; }
.dup-phone-actions button { width: 100%; min-height: 46px; border-radius: 10px; font-size: 13px; font-weight: 700; }
/* فقط خودِ فلش — بدون کادر و پس‌زمینه، و چسبیده به آخرین فیلد تا ارتفاعِ کارت
بی‌خود بلند نشه. ناحیه‌ی لمس با پدینگِ نامرئی تأمین می‌شه، نه با کادر. */
.card-more-toggle {
display: flex; align-items: center; justify-content: center;
width: 100%; margin: 0; padding: 2px 0 0 0; min-height: 0;
background: none; border: none; color: var(--muted); cursor: pointer;
line-height: 0;
}
.card-more-toggle .ic { width: 20px; height: 20px; transition: transform .18s; }
.card-more-toggle.is-open .ic { transform: rotate(180deg); }
.card-more-toggle:active { opacity: .6; }
/* دو ستونِ دقیقاً ۵۰/۵۰ */
#panelInvoice .info-card-cols {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 12px 18px; align-items: start;
}
#panelInvoice .main-content,
#panelInvoice .aux-column {
flex: none; min-width: 0; padding: 0; background: transparent;
border-left: none; display: flex; flex-direction: column; gap: 12px;
justify-content: flex-start;
}
/* هر فیلد: برچسبِ بالا + کادرِ پُر — همون پرایمیتیوِ کارت لوگو */
#panelInvoice .field-line {
display: flex; flex-direction: column; align-items: stretch;
gap: 6px; flex-wrap: nowrap; font-size: 13px;
}
#panelInvoice .field-line > label {
font-size: 12.5px; font-weight: 700; color: var(--muted);
white-space: normal; line-height: 1.6;
}
/* کادرِ همه‌ی فیلدها یکیه — چه مقدارِ فقط-خواندنیِ فروشنده (span) باشه، چه ورودیِ
خریدار (input)، چه ورودیِ داخلِ ردیفِ نام+دکمه. ارتفاع با min-height و
line-height ثابت مهار می‌شه تا قانونِ «فونت ۱۶px ورودی‌ها در موبایل» (که برای
جلوگیری از زومِ سافاری هست) ورودی‌ها رو از span بلندتر نکنه. */
#panelInvoice .field-line > span,
#panelInvoice .field-line > input,
#panelInvoice .field-line > textarea,
#panelInvoice .field-with-btn > input {
background: var(--header-bg); border: 1px solid transparent; border-radius: 10px;
padding: 9px 12px; font-family: inherit; font-size: 13.5px;
line-height: 1.2; color: var(--text); width: 100%; display: flex; align-items: center;
}
/* ارتفاعِ صریح (نه min-height) برای فیلدهای تک‌خطی: مقدارِ فقط-خواندنیِ فروشنده span
است و ورودیِ خریدار input، و قانونِ «فونت ۱۶px ورودی‌ها در موبایل» فقط روی
دومی اثر می‌ذاره. با height ثابت، ارتفاع دیگه به فونت وابسته نیست و دو کارت
دقیقاً هم‌اندازه می‌مونن. */
#panelInvoice .field-line > span,
#panelInvoice .field-line > input,
#panelInvoice .field-with-btn > input { height: 40px; }
#panelInvoice .field-line > textarea { min-height: 40px; }
#panelInvoice .field-line > input,
#panelInvoice .field-line > textarea,
#panelInvoice .field-with-btn > input { display: block; }
#panelInvoice .field-line > input:focus,
#panelInvoice .field-line > textarea:focus,
#panelInvoice .field-with-btn > input:focus {
outline: none; border-color: var(--accent); background: var(--surface);
}
#panelInvoice .field-line-address textarea {
border-bottom: 1px solid transparent; max-height: none; min-height: 40px;
overflow: hidden; line-height: 1.8;
}
/* دکمه‌ی «تغییر کسب‌وکار» زیرِ کادرِ نام می‌شینه، مثل یه لینک نه یه دکمه‌ی پُر */
#panelInvoice .btn-pick-customer {
align-self: flex-start; background: none; border: none !important; padding: 0;
color: var(--accent-text); font-size: 12.5px; font-weight: 700;
text-decoration: underline; min-height: 0; display: inline-flex;
align-items: center; gap: 5px;
}
#panelInvoice .btn-pick-customer .ic { width: 14px; height: 14px; }
#panelInvoice .field-line-missing > span {
color: var(--warning); font-size: 11.5px; background: var(--warning-soft);
}
#panelInvoice .field-line .doc-req { color: var(--danger); font-style: normal; margin-inline-start: 2px; }
/* ===== جدول اقلام ===== */
/* بازسازی از روی طرحِ مرجع. نکته‌ی مهم: ترتیبِ ستون‌ها تو DOM دست‌نخورده مونده
(ردیف، نام، توضیحات، قیمت، تخفیف، تعداد، مجموع، حذف) چون saveInvoice و
recalculateTotal سلول‌ها رو با ایندکس می‌خونن؛ ترتیبِ دیداریِ طرح
(ردیف، شرح، تعداد، فی، تخفیف، مبلغ کل) با گرید ساخته می‌شه، نه با جابه‌جاییِ DOM. */
#panelInvoice .items-table-section {
border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
margin: 0; padding: 14px 16px;
}
#panelInvoice .items-table-section > h4 {
display: flex; align-items: center; gap: 8px;
font-size: 14.5px; font-weight: 800; color: var(--text);
border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 6px;
}
#panelInvoice .items-table-section > h4 .ic { width: 18px; height: 18px; color: var(--accent-text); }
#panelInvoice #itemsTable { width: 100%; border-collapse: collapse; min-width: 0; }
#panelInvoice #itemsTable thead tr,
#panelInvoice #itemsTable tbody tr {
display: grid;
grid-template-columns: minmax(0, 1fr) 58px 92px 60px 96px 24px;
align-items: center;
column-gap: 6px;
grid-auto-rows: min-content;
}
/* سربرگ پس‌زمینه‌ی رنگی می‌گیره و ردیف‌ها فقط با یک خط از هم جدا می‌شن —
بوردرِ دورِ جدول لازم نیست چون خودِ کارت کادر داره. */
#panelInvoice .table-wrap { border: none; border-radius: 0; overflow: visible; }
/* سربرگِ ستون‌ها ته‌رنگِ کسب‌وکار می‌گیره. --sidebar-active-bg همون رنگِ کسب‌وکارِ
۸۸٪-سفیدشده‌ست که موقعِ اعمالِ تمِ کسب‌وکار ساخته می‌شه، پس بدونِ color-mix
(که روی iOS 15 نیست) هم کار می‌کنه. متنش هم خودِ رنگِ کسب‌وکاره که تضمین‌شده
به‌اندازه‌ی کافی تیره‌ست. */
#panelInvoice #itemsTable thead tr {
background: var(--sidebar-active-bg, var(--header-bg));
border-bottom: 1px solid var(--border);
}
#panelInvoice #itemsTable thead th:first-child { border-radius: 0 8px 8px 0; }
#panelInvoice #itemsTable thead th:last-child { border-radius: 8px 0 0 8px; }
#panelInvoice #itemsTable thead th {
background: transparent; border: none; padding: 10px 2px;
font-size: 11.5px; font-weight: 700; color: var(--accent-text); text-align: right;
white-space: normal; line-height: 1.5;
}
#panelInvoice #itemsTable tbody tr {
border-bottom: 1px solid var(--border);
}
#panelInvoice #itemsTable tbody td {
border: none; padding: 12px 2px; font-size: 13px; color: var(--text);
min-width: 0; overflow: hidden;
}
/* ریشه‌ی به‌هم‌ریختگی: بالاتر برای «سندِ فاکتور» عرضِ درصدیِ ستون‌ها با
th/td:nth-child تعریف شده (۵٪، ۲۱٪، ۱۳٪…) به‌علاوه‌ی table-layout: fixed.
اون قانون‌ها این جدول رو هم می‌گرفتن؛ گریدْ سلول رو تو ترکِ درست می‌ذاشت ولی
خودِ سلول عرضِ درصدیِ کوچیکش رو نگه می‌داشت، پس متن تو یه باکسِ چندپیکسلی
می‌افتاد و با overflow-wrap: break-word حرف‌به‌حرف می‌شکست — تو فارسی یعنی
حروفِ جدا و ناخوانا. اینجا خنثی می‌شن (دو آی‌دی، پس بر اون‌ها می‌چربه). */
#panelInvoice #itemsTable { table-layout: auto; }
#panelInvoice #itemsTable thead th,
#panelInvoice #itemsTable tbody td,
#panelInvoice #itemsTable tfoot td {
width: auto; overflow-wrap: normal; word-wrap: normal;
}
/* چیدمانِ دیداری: ستون‌ها به ترتیبِ طرح، مستقل از ترتیبِ DOM */
/* ستونِ «ردیف» تو طرحِ مرجع نیست؛ شماره‌ی ردیف چیزی به خوانایی اضافه نمی‌کرد و
عرض می‌گرفت. تو DOM می‌مونه (renumberRows و ایندکس‌های saveInvoice بهش وابسته‌ن)
ولی نمایش داده نمی‌شه. */
#panelInvoice #itemsTable thead th:nth-child(1),
#panelInvoice #itemsTable tbody td[data-label="ردیف"] { display: none; }
#panelInvoice #itemsTable thead th:nth-child(2),
#panelInvoice #itemsTable tbody td[data-label="نام کالا"] { grid-column: 1; grid-row: 1; }
/* ستونِ «توضیحات» کلاً از فرم برداشته شد (تو DOM می‌مونه تا ایندکس‌های
saveInvoice جابه‌جا نشن، ولی نه دیده می‌شه نه جا می‌گیره). */
#panelInvoice #itemsTable thead th:nth-child(3),
#panelInvoice #itemsTable tbody td[data-label="توضیحات"] { display: none; }
#panelInvoice #itemsTable thead th:nth-child(6),
#panelInvoice #itemsTable tbody td[data-label="تعداد"] { grid-column: 2; grid-row: 1; }
#panelInvoice #itemsTable thead th:nth-child(4),
#panelInvoice #itemsTable tbody td[data-label="قیمت"] { grid-column: 3; grid-row: 1; }
#panelInvoice #itemsTable thead th:nth-child(5),
#panelInvoice #itemsTable tbody td[data-label="تخفیف"] { grid-column: 4; grid-row: 1; }
#panelInvoice #itemsTable thead th:nth-child(7),
#panelInvoice #itemsTable tbody td[data-label="مجموع"] { grid-column: 5; grid-row: 1; }
#panelInvoice #itemsTable thead th:nth-child(8),
#panelInvoice #itemsTable tbody td:last-child { grid-column: 6; grid-row: 1; }
/* ورودی‌های داخل ردیف: بدون کادر، هم‌شکلِ متنِ جدول */
#panelInvoice #itemsTable tbody td textarea,
#panelInvoice #itemsTable tbody td input {
width: 100%; border: none; background: transparent; padding: 2px 0;
font-family: inherit; font-size: 13px; color: var(--text); resize: none; outline: none;
}
/* نامِ بلند نباید ستون رو باز کنه یا چندخطی بشه: تک‌خطی می‌مونه و بقیه‌اش بریده
می‌شه. (textarea الیپسیسِ واقعی نمی‌گیره، پس برش با overflow انجام می‌شه.) */
#panelInvoice #itemsTable tbody td[data-label="نام کالا"] textarea {
white-space: nowrap; overflow: hidden; height: auto !important;
/* اسکرولِ نرمِ متنِ بلند (مارکی) با JS انجام می‌شه؛ نوارِ اسکرول دیده نشه */
scrollbar-width: none; -ms-overflow-style: none;
}
#panelInvoice #itemsTable tbody td[data-label="نام کالا"] textarea::-webkit-scrollbar {
width: 0; height: 0;
}
#panelInvoice #itemsTable tbody td[data-label="توضیحات"] textarea { font-size: 11.5px; color: var(--muted); }
#panelInvoice #itemsTable tbody td[data-label="مجموع"] { font-weight: 800; }
/* تخفیفِ غیرصفر تو طرح رنگی‌ست، صفر کم‌رنگ */
/* چک‌باکسِ انتخابِ ردیف و شماره‌ی ردیف هر دو تو سلولِ اولن؛ این سلول تو طرح
پنهانه و فقط رو دسکتاپ (که ستونِ انتخاب معنی داره) باز می‌شه. */
#panelInvoice #itemsTable .item-row-check { display: none; }
#panelInvoice #itemsTable .row-num { display: none; }
/* عدد و نشانه‌ی ٪ کنارِ هم، تا معلوم باشه تخفیف درصدیه نه مبلغ */
#panelInvoice #itemsTable .discount-cell {
display: flex; align-items: baseline; justify-content: flex-start; gap: 2px; min-width: 0;
}
#panelInvoice #itemsTable .discount-cell input { width: auto; flex: 1 1 auto; min-width: 0; text-align: left; }
#panelInvoice #itemsTable .discount-pct-sign { flex: 0 0 auto; font-size: 11.5px; color: var(--muted); }
#panelInvoice #itemsTable .row-discount-input { color: var(--danger); font-weight: 700; }
#panelInvoice #itemsTable .row-discount-input.is-zero { color: var(--muted); font-weight: 400; }
/* ردیفِ «افزودن محصول از لیست»: دکمه‌ی تمام‌عرضِ ته کارت */
#panelInvoice #itemsTable tbody tr.item-placeholder-row { display: block; border-bottom: none; padding-top: 10px; }
#panelInvoice #itemsTable tbody tr.item-placeholder-row td { display: none; }
#panelInvoice #itemsTable tbody tr.item-placeholder-row .placeholder-add-cell {
display: flex; align-items: stretch; background: none; padding: 0;
}
#panelInvoice .ph-add-main {
flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
background: var(--sidebar-active-bg); color: var(--accent-text);
border: none; border-radius: 10px; padding: 13px 12px;
font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
}
#panelInvoice .ph-del-btn, #panelInvoice .ph-cancel-btn {
flex: 0 0 auto; border-radius: 9px; padding: 7px 16px;
font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
#panelInvoice .ph-del-btn {
background: rgba(220, 53, 69, .08); color: var(--danger);
border: 1px solid rgba(220, 53, 69, .28);
}
#panelInvoice .ph-cancel-btn {
background: transparent; color: var(--muted);
border: 1px solid var(--border);
}
#panelInvoice .ph-cancel-btn[hidden] { display: none; }
#panelInvoice .ph-add-main:active,
#panelInvoice .ph-del-btn:active,
#panelInvoice .ph-cancel-btn:active { opacity: .8; }
/* ===== انتخابِ ردیفِ اقلام (نگه‌داشتنِ انگشت) ===== */
/* ===== منوی نیتیوِ copy/lookup/translate در فرمِ فاکتور =====
روی هیچ‌جای این فرم نباید باز بشه، چون هیچ‌کدوم از این بخش‌ها «متنِ خواندنی»
نیستن و نگه‌داشتنِ انگشت روی ردیف‌ها معنیِ خودش رو داره (انتخابِ ردیف).
تنها استثنا فیلدهاییه که صفحه‌کلید باز می‌کنن — اونجا کپی/پیست واقعاً لازمه. */
#panelInvoice, #panelInvoice * {
-webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
#panelInvoice input:not([readonly]):not([type="radio"]):not([type="checkbox"]):not([type="file"]),
#panelInvoice textarea:not([readonly]) {
-webkit-touch-callout: default; -webkit-user-select: text; user-select: text;
}
/* نامِ کالا اصلاً ویرایش نمی‌شه (readonly)، پس نه صفحه‌کلید باز می‌کنه نه منوی
نیتیو. pointer-events هم برداشته می‌شه تا لمس مستقیم به ردیف برسه و
انتخابِ گروهی با نگه‌داشتنِ انگشت روی همین بزرگ‌ترین هدفِ ردیف کار کنه. */
#panelInvoice #itemsBody td[data-label="نام کالا"] textarea {
-webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
pointer-events: none; cursor: default;
}
#panelInvoice #itemsTable tbody tr.item-row-selected {
background: var(--sidebar-active-bg);
box-shadow: inset 2px 0 0 var(--accent-text);
}
/* تو حالتِ انتخاب، تپ باید به ردیف برسه نه به فیلد (وگرنه فیلد فوکوس می‌شه و
صفحه‌کلید باز می‌شه به‌جای انتخاب‌شدنِ ردیف) */
/* ردیفِ پایانی (افزودن محصول / حذف / لغو) عمداً مستثناست — قبلاً همین قانون
دکمه‌های حذف و لغو رو دقیقاً تو همون حالتی که لازمن از کار می‌نداخت. */
#panelInvoice #itemsBody.is-selecting tr:not(.item-placeholder-row) input,
#panelInvoice #itemsBody.is-selecting tr:not(.item-placeholder-row) textarea,
#panelInvoice #itemsBody.is-selecting tr:not(.item-placeholder-row) button { pointer-events: none; }
/* نوارِ عملیاتِ اقلام، درست زیرِ دکمه‌ی «افزودن محصول از لیست»:
راست تعدادِ اقلام (یا تعدادِ انتخاب‌شده)، چپ دکمه‌های حذف/لغو. */
#panelInvoice .item-select-bar {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--muted);
}
#panelInvoice .item-select-bar[hidden] { display: none; }
#panelInvoice #itemSelectCount.is-selected-count { color: var(--accent-text); }
#panelInvoice .item-select-actions { display: flex; align-items: center; gap: 6px; }
/* ردیفِ جمعِ ته جدول دیگه نمایش داده نمی‌شه؛ مبلغ رفته تو کارتِ خلاصه. خودِ
عنصر تو DOM می‌مونه چون recalculateTotal مقدارش رو می‌نویسه و کارتِ خلاصه
از همون می‌خونه. */
#panelInvoice #itemsTable tfoot { display: none; }
#panelInvoice #itemsTable tfoot tr {
display: flex; align-items: center; justify-content: flex-end; gap: 10px;
padding-top: 10px; font-size: 13px; font-weight: 700; color: var(--muted);
}
#panelInvoice #itemsTable tfoot td { border: none; padding: 0; }
/* مبلغِ کلِ فاکتور مهم‌ترین عددِ این کارته، پس از بقیه بزرگ‌تر و پررنگ‌تره */
#panelInvoice #itemsTable tfoot #itemsFooterTotal {
color: var(--text); font-size: 16px; font-weight: 800;
}
.items-table-section { padding: 0 30px; margin-top: 20px; }
.items-table-section h4 { font-size: 15px; font-weight: 700; margin-bottom: 8px; color: var(--text); }
/* جدولِ سندیِ فقط‌خواندنی (پیش‌نمایش/چاپ فاکتور، لینک عمومی) — سلول‌ها همیشه تک‌خط بمونن،
اگه جا نشد کل جدول (نه کل صفحه) اسکرول افقی بخوره؛ #itemsTable ادیت‌شدنیِ فرم با آی‌دی
اولویتِ بالاتری داره و از این قانون مستثنی می‌مونه. */
.items-table-section table th, .items-table-section table td { white-space: nowrap; }
.table-wrap { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
/* «screen and» حیاتیه: عرضِ صفحه موقعِ چاپ برابرِ عرضِ کاغذه (≈۶۸۰px) و بدونِ این
قید، همین قانون‌ها موقعِ چاپ هم اجرا می‌شدن. نتیجه‌ش این بود که جدولِ اقلامِ سند
display: block می‌گرفت؛ یعنی دیگه جدولِ واقعی نبود و عرضِ ۱۰۰٪ روی همون بلوکِ
نامرئی می‌نشست، ولی خودِ جدولِ داخلش به اندازه‌ی محتواش جمع می‌شد — فاکتور با
جدولِ نصفه‌عرض چاپ می‌شد. رو کاغذ هم اسکرولِ افقی اصلاً معنی نداره. */
@media screen and (max-width: 900px) {
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* هر جدولی که خودش قبلاً برای موبایل به کارت تبدیل نشده (data-table / itemsTable)، به‌جای
بیرون‌زدن از کارت، فقط خودش (نه کل صفحه) به‌صورت افقی اسکرول بشه */
table:not(.data-table):not(.summary-table):not(#itemsTable) { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
}
.table-wrap table { border: none; }
/* این قوانین فقط مخصوص جدول اقلامِ خودِ سند فاکتور (۷ ستونی) هستن — قبلاً بدون محدوده نوشته شده بودن
و همین باعث می‌شد روی جدول‌های دیگه (لیست مشتریان/محصولات/انبار، جدول داشبورد) هم اثر بذارن و بهم‌بریزنشون.
الان محدود شدن به همون سند فاکتور، جدول‌های بقیه‌ی صفحات دست‌نخورده و با استایل خودشون نمایش داده می‌شن. */
#panelInvoice table, #invoiceViewPageView table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
#panelInvoice th, #invoiceViewPageView th { background: var(--header-bg); font-weight: 700; font-size: 13px; }
#panelInvoice th, #panelInvoice td, #invoiceViewPageView th, #invoiceViewPageView td {
border: 1px solid var(--border); padding: 9px 6px; text-align: center;
vertical-align: middle; word-wrap: break-word; overflow-wrap: break-word;
}
/* درصدها جمعاً باید حداکثر ۱۰۰٪ بشن (با احتساب ستون هشتم دکمه‌ی حذف که فقط توی panelInvoice هست)
— قبلاً جمعشون ۱۰۳٪ بود که باعث می‌شد جدول از عرض کادر بزنه بیرون و ستون «مجموع» زیر کادر گم بشه. */
#panelInvoice th:nth-child(1), #panelInvoice td:nth-child(1), #invoiceViewPageView th:nth-child(1), #invoiceViewPageView td:nth-child(1) { width: 5%; }
#panelInvoice th:nth-child(2), #panelInvoice td:nth-child(2), #invoiceViewPageView th:nth-child(2), #invoiceViewPageView td:nth-child(2) { width: 21%; }
#panelInvoice th:nth-child(3), #panelInvoice td:nth-child(3), #invoiceViewPageView th:nth-child(3), #invoiceViewPageView td:nth-child(3) { width: 21%; }
#panelInvoice th:nth-child(4), #panelInvoice td:nth-child(4), #invoiceViewPageView th:nth-child(4), #invoiceViewPageView td:nth-child(4) { width: 13%; }
#panelInvoice th:nth-child(5), #panelInvoice td:nth-child(5), #invoiceViewPageView th:nth-child(5), #invoiceViewPageView td:nth-child(5) { width: 10%; }
#panelInvoice th:nth-child(6), #panelInvoice td:nth-child(6), #invoiceViewPageView th:nth-child(6), #invoiceViewPageView td:nth-child(6) { width: 13%; }
#panelInvoice th:nth-child(7), #panelInvoice td:nth-child(7), #invoiceViewPageView th:nth-child(7), #invoiceViewPageView td:nth-child(7) { width: 11%; }
/* ستون هشتم (دکمه‌ی حذف ردیف) قبلاً ۴٪ بود که برای دکمه‌ی ۳۰px + پدینگ سلول کافی نبود
و باعث می‌شد دکمه از لبه‌ی گرد کارت بیرون بزنه و نصفه دیده بشه؛ به ۶٪ افزایش پیدا کرد. */
#panelInvoice th:nth-child(8), #panelInvoice td:nth-child(8) { width: 6%; }
.row-product-select {
width: 100%; font-family: inherit; font-size: 11px; margin-bottom: 4px;
border: 1px solid var(--border); border-radius: 4px; padding: 2px; color: var(--muted);
background: var(--header-bg);
}
td textarea {
width: 100%; border: none; background: transparent; text-align: right;
font-family: inherit; font-size: 13px; outline: none; resize: none;
min-height: 20px; overflow: hidden; box-sizing: border-box; line-height: 1.5;
display: block; vertical-align: top;
}
td input {
width: 100%; border: none; background: transparent; text-align: center;
font-family: inherit; font-size: 13px; outline: none; padding: 4px;
}
.row-total-cell { font-weight: 700; white-space: nowrap; }
tfoot td { background: var(--total-bg); font-weight: 800; }
.delete-row-btn { background: none; border: none; font-size: 17px; cursor: pointer; color: #c00; font-weight: bold; }
.table-actions { margin-top: 10px; display: flex; gap: 10px; flex-wrap: wrap; }
/* ===== ردیف توضیحات + جمع‌بندی ===== */
.summary-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 20px 30px 0 30px; align-items: start; }
.notes-box { min-width: 0; box-sizing: border-box; }
.notes-box h4 { font-size: 14px; margin-bottom: 8px; color: var(--text); }
.notes-box textarea {
width: 100%; min-height: 140px; border: 1px solid var(--border); border-radius: 8px;
padding: 10px; font-family: inherit; font-size: 13px; resize: none; outline: none;
box-sizing: border-box; overflow: hidden; line-height: 1.6;
}
.summary-table { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; border-collapse: collapse; font-size: 14px; table-layout: fixed; }
.summary-table td { border: 1px solid var(--border); padding: 10px 12px; word-break: break-word; overflow-wrap: break-word; }
.summary-table .s-label { background: var(--header-bg); font-weight: 700; width: 33%; text-align: right; }
.summary-table .s-value { text-align: left; direction: ltr; }
.summary-table .s-value input {
width: 100%; border: none; background: transparent; text-align: right; direction: rtl;
font-family: inherit; font-size: 13px; outline: none;
}
.summary-table .s-value.status-cell { text-align: right; direction: rtl; }
.toman-amt { display: inline-flex; direction: ltr; gap: 4px; white-space: nowrap; }
.summary-table-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* ===== حالتِ «فاکتور خرید» =====
نقشِ دو طرف عوض می‌شه (فروشنده = تامین‌کننده، خریدار = خودِ کسب‌وکار)، پس جای
دو کارت با order جابه‌جا می‌شه — نه با جابه‌جاییِ DOM، تا هیچ‌کدوم از
ارجاع‌های موجود (renderActiveBusinessCard، انتخاب مشتری، هشدارِ شماره‌ی
تکراری…) نشکنه.
نکته‌ی مهم: order فقط روی یک کارت گذاشتن غلط بود. order پیش‌فرضِ همه‌ی
هم‌نیاها صفره، پس order:-1 اون کارت رو نه‌فقط جلوی کارتِ روبه‌روش، بلکه
جلوی «نوع سند» هم می‌انداخت و اولین کارتِ صفحه می‌شد. برای همین اینجا به
همه‌ی کارت‌ها order صریح داده می‌شه:
نوع سند → فروشنده(تامین‌کننده) → خریدار(کسب‌وکار) → بقیه به ترتیبِ سورس. */
#panelInvoice.is-purchase-mode .invoice-form-main > * { order: 3; }
#panelInvoice.is-purchase-mode .doc-header { order: 0; }
#panelInvoice.is-purchase-mode #buyerCard { order: 1; }
#panelInvoice.is-purchase-mode #sellerCard { order: 2; }
/* ===== دسکتاپ: دو کارتِ طرفین کنارِ هم =====
تو موبایل این دو کارت زیرِ همن و همون درسته. رو دسکتاپ اما هرکدوم فقط چند
فیلد دارن و زیرِ هم گذاشتنشون بی‌دلیل صفحه رو بلند می‌کنه و «اقلام فاکتور»
رو می‌فرسته پایینِ صفحه.
ستونِ اصلیِ فرم از flex به grid تغییر می‌کنه، ولی جای بقیه‌ی کارت‌ها عوض
نمی‌شه چون همه‌شون تمامِ عرض رو می‌گیرن؛ فقط همین دو کارت در یک ردیف کنارِ
هم می‌شینن.
چرا auto-fit و نه دو ستونِ ثابت: عرضِ این ستون به عرضِ پنجره، بازبودنِ
سایدبار و ستونِ ۳۰۰px کناری بستگی داره. با auto-fit، اگه جا نبود خودشون
برمی‌گردن زیرِ هم به‌جای اینکه له بشن.
چرا grid-column: auto روی دو کارت (و نه ستونِ ثابت): تو فاکتور خرید جای
این دو با order عوض می‌شه؛ با ستونِ ثابت اون جابه‌جایی خنثی می‌شد. */
@media screen and (min-width: 901px) {
#panelInvoice .invoice-form-main {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
align-items: stretch;
}
#panelInvoice .invoice-form-main > * { grid-column: 1 / -1; }
#panelInvoice #sellerCard,
#panelInvoice #buyerCard { grid-column: auto; }
}
/* تصویرِ فاکتورِ کاغذی */
.inv-receipt-row { display: flex; gap: 8px; flex-wrap: wrap; }
.inv-receipt-del { color: var(--danger); border-color: var(--danger); }
.inv-receipt-img {
display: block; margin-top: 10px; max-width: 220px; width: 100%;
border-radius: 10px; border: 1px solid var(--border); cursor: zoom-in;
}
/* تبِ منبعِ اقلام داخلِ پاپ‌آپِ افزودن گروهی (فقط فاکتور خرید) */
.bulk-source-tabs { margin-bottom: 10px; }
.bulk-source-tabs[hidden] { display: none; }
.label-with-toggle { display: flex; align-items: center; justify-content: flex-start; gap: 8px; }
.split-value-row { display: flex; align-items: center; gap: 8px; direction: rtl; }
.split-value-row input { flex: 1 1 auto; width: 100%; min-width: 0; }
.pay-amount-wrap { display: inline-flex; align-items: center; gap: 4px; direction: ltr; }
.input-suffix { color: var(--muted); font-size: 12px; white-space: nowrap; }
.mode-toggle-sign {
flex-shrink: 0; color: var(--muted); font-size: 15px; font-weight: 700; cursor: pointer; user-select: none;
}@media (hover: hover) {
.mode-toggle-sign:hover { color: var(--accent-text); text-decoration: underline; } }
.summary-table .final-row .s-label, .summary-table .final-row .s-value {
background: var(--total-bg); color: var(--text); font-weight: 800; font-size: 15px;
}
/* ===== امضا و مهر ===== */
.sign-stamp { display: flex; gap: 20px; padding: 24px 30px 24px 30px; flex-wrap: wrap; }
.stamp-box {
flex: 1; min-width: 200px; height: 100px; border: 1px solid var(--border);
border-radius: 8px; padding: 10px 14px; position: relative;
}
.stamp-box .stamp-label { font-weight: 700; font-size: 13px; color: var(--text); }
.stamp-box.uploadable { cursor: pointer; display: flex; flex-direction: column; overflow: hidden; }@media (hover: hover) {
.stamp-box.uploadable:hover { border-color: var(--accent-text); } }
.stamp-upload-hint {
flex: 1; display: flex; align-items: center; justify-content: center; font-size: 12px;
color: var(--muted); border: 1px dashed #d5d5d5; border-radius: 6px; margin-top: 6px;
text-align: center; padding: 4px;
}
.stamp-box.has-stamp .stamp-upload-hint { display: none; }
.stamp-preview-img { display: none; max-height: 68px; max-width: 100%; margin: 4px auto 0 auto; object-fit: contain; }
.stamp-box.has-stamp .stamp-preview-img { display: block; }
.stamp-remove-btn {
display: none; position: absolute; top: 6px; left: 6px; background: var(--danger); color: #fff;
border: none; border-radius: 50%; width: 20px; height: 20px; font-size: 12px;
line-height: 20px; text-align: center; cursor: pointer; padding: 0;
}
.stamp-box.has-stamp .stamp-remove-btn { display: block; }
/* ===== دکمه‌های عملیاتی ===== */
.action-buttons {
padding: 18px 30px; background: var(--header-bg); display: flex; gap: 10px;
flex-wrap: wrap; border-top: 1px solid var(--border);
}
.floating-action-bar {
/* sticky (نه fixed) داخل .shell-main — عرضش خودکار به‌اندازه‌ی ستون محتواست،
هیچ‌وقت زیر سایدبار نمی‌ره چون اصلاً به viewport وصل نیست، به ستون محتوا وصله */
position: sticky; bottom: 0; z-index: 500;
background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -4px 14px rgba(0,0,0,.1);
padding: 10px 16px; display: flex; align-items: center; justify-content: space-between;
gap: 10px; flex-wrap: wrap; margin-top: auto;
}
.floating-bar-total { font-size: 15px; font-weight: 800; color: var(--accent-text); white-space: nowrap; }
.floating-bar-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.floating-action-bar button { padding: 10px 20px; font-size: 13px; }
.modal-view-footer button { padding: 10px 20px; font-size: 13px; }
.invoice-filter-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; }
.invoice-filter-row select {
padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
font-family: inherit; font-size: 13px;
}
.settle-status { font-weight: 800; font-size: 13px; }
.settle-quick-percents { display: flex; gap: 8px; font-size: 11px; flex-shrink: 0; white-space: nowrap; }
.settle-quick-percents span { color: var(--muted); cursor: pointer; }@media (hover: hover) {
.settle-quick-percents span:hover { color: var(--accent-text); text-decoration: underline; } }
.check-toggle-btn {
flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; padding: 0;
border: 1px solid var(--border); background: var(--surface); color: var(--muted);
font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center;
white-space: nowrap; overflow: hidden; line-height: 1;
}
.check-toggle-btn.active { background: var(--accent); color: white; border-color: var(--accent); }
.settle-pay-line { display: flex; align-items: center; gap: 10px; direction: rtl; }
.settle-pay-line .pay-amount-wrap { flex: 1; min-width: 0; }
.settle-pay-line input { flex: 1 1 auto; width: auto; min-width: 60px; }
.check-fields-grid { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.check-fields-grid input {
width: 100%; border: 1px solid var(--border) !important; background: var(--surface); border-radius: 5px;
padding: 5px 8px; text-align: right; direction: rtl; font-family: inherit; font-size: 12px; outline: none;
}
.status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-left: 6px; vertical-align: middle; }
button { padding: 9px 18px; border: none; border-radius: 8px; cursor: pointer; font-weight: 600; font-family: inherit; transition: 0.2s; font-size: 13px; }@media (hover: hover) {
button:hover { filter: brightness(0.95); } }
/* فاکتور استایل جدا داره: دکمه‌ها همون شکل قبلی (کمتر گرد) رو نگه می‌دارن */
#panelInvoice button, #invoiceViewPageView button { border-radius: 6px; }
/* ...ولی چیپ‌ها قرصی‌ان. این قانونِ بالا با آی‌دی نوشته شده و بر .inv-chip
(که فقط کلاسه) غلبه می‌کرد؛ نتیجه‌ش این بود که چیپ‌های «نوع سند» داخلِ فرم،
با همون کلاس‌های چیپ‌های لیست، گوشه‌ی ۶پیکسلی می‌گرفتن و مثل دکمه‌ی معمولی
دیده می‌شدن نه چیپ. اینجا با همون سطحِ آی‌دی برگردونده می‌شه. */
#panelInvoice .inv-chip, #invoiceViewPageView .inv-chip { border-radius: 999px; }
.btn-save { background: var(--accent); color: white; font-weight: 700; }
.btn-print { background: var(--accent); color: white; }
.btn-add { background: var(--surface); color: var(--accent-text); border: 1px dashed var(--accent-text) !important; font-weight: 600; }
.btn-clear, .btn-delete { background: var(--surface); color: var(--pastel-red-text); border: 1px solid var(--pastel-red-text) !important; }@media (hover: hover) {
.btn-clear:hover, .btn-delete:hover { background: var(--pastel-red); } }
.btn-ghost { background: var(--surface); color: var(--muted); border: 1px solid var(--border) !important; }@media (hover: hover) {
.btn-ghost:hover { background: var(--header-bg); } }
.btn-edit { background: var(--surface); color: var(--muted); border: 1px solid var(--border) !important; padding: 5px 12px; font-size: 12px; }
.btn-delete { padding: 5px 12px; font-size: 12px; }
/* ===== دکمه‌های کوچک آیکونی (توی جدول‌ها) ===== */
.icon-btn {
width: 30px !important; height: 30px; padding: 0 !important; display: inline-flex;
align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0;
}
/* ایموجی‌های رنگی / هرکدوم رنگ ذاتی خودشون رو دارن و با بردر دکمه (خاکستری/قرمز) هماهنگ نبودن؛
با grayscale یکدست‌شون می‌کنیم تا فقط بردر/رنگ دکمه تفاوت رو نشون بده، نه خود آیکون. */
.icon-btn.btn-edit, .icon-btn.btn-delete { filter: grayscale(1); }
/* ردیف/کارتِ محصول با لمس باز می‌شه، نگه‌داشتنِ انگشت انتخابش می‌کنه — دقیقاً
هم‌رفتارِ ردیف/کارتِ فاکتورها؛ نباید هم‌زمان منوی نیتیوِ مرورگر (کپی/ترجمه/
جست‌وجو در وب) هم باز بشه. */
.prod-row-clickable, .cust-row-clickable {
cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
@media (hover: hover) {
tr.prod-row-clickable:hover, tr.cust-row-clickable:hover { background: var(--header-bg); }
.ent-card.prod-row-clickable:hover, .ent-card.cust-row-clickable:hover { border-color: var(--accent); } }
/* صفحه‌ی کاربران: ستونِ آواتار و ماندِ حساب */
.cust-table td[data-cell="thumb"] .cust-list-avatar { width: 34px; height: 34px; }
.cust-balance { font-weight: 700; white-space: nowrap; }
.cust-balance small { font-size: 11px; font-weight: 600; opacity: .85; }
/* ===== صفحه‌ی کاربران: ردیفِ دکمه‌های بالای صفحه (بالای نوارِ آماری) ===== */
.cust-top-row { margin-bottom: 14px; }
.cust-top-row .cust-payroll-btn { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 640px) {
.cust-top-row { margin-bottom: 8px; }
.cust-top-row .cust-payroll-btn { min-height: 40px; }
/* «+» مربعی، هم‌ارتفاعِ دکمه‌ی حقوق و دستمزد */
.cust-top-row .inv-add-btn { width: 40px; height: 40px; }
}
/* ===== کارتِ کاربر (نمای تایل) در موبایل: نامِ بلند زیرِ آواتار نره =====
آواتار کوچیک‌تر و به سمتِ چپ می‌ره، نام زیرش تمام‌عرضِ کارت رو می‌گیره و تا دو خط
شکسته می‌شه (نه بریده‌شدن کنارِ عکس). چک‌باکس روی موبایل پنهانه، پس فاصله‌ی جاش هم لازم نیست. */
@media (max-width: 700px) {
.cust-ent-card .ent-card-head {
flex-direction: column; align-items: stretch; gap: 6px; padding-inline-end: 0;
}
.cust-ent-card .ent-card-avatar { width: 44px; height: 44px; font-size: 15px; align-self: flex-end; }
.cust-ent-card .ent-card-head > div:not(.ent-card-avatar) { width: 100%; min-width: 0; }
.cust-ent-card .ent-card-head .ent-card-title {
-webkit-line-clamp: 2; white-space: normal; overflow-wrap: anywhere; word-break: break-word;
}
}
/* ===== پاپ‌آپِ حقوق و دستمزد ===== */
.py-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.py-list-row {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
width: 100%; padding: 12px 14px; border: none; border-bottom: 1px solid var(--border);
background: var(--surface); color: var(--text); font-family: inherit; text-align: right; cursor: pointer;
}
.py-list-row:last-child { border-bottom: none; }
@media (hover: hover) { .py-list-row:hover { background: var(--header-bg); } }
.py-list-main { min-width: 0; }
.py-list-side { display: flex; align-items: center; gap: 6px; flex-shrink: 0; color: var(--muted); }
.py-list-side .ic { width: 16px; height: 16px; }
.py-list-bal { font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.py-list-bal.is-owed, .py-balance.is-owed .py-balance-value, .py-history-amount.is-owed { color: var(--success); }
.py-list-bal.is-debt, .py-balance.is-debt .py-balance-value, .py-history-amount.is-debt { color: var(--danger); }
.py-list-bal.is-muted { color: var(--muted); font-weight: 500; }
.py-detail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding-left: 30px; }
.py-detail-head h4 { margin: 0; font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.py-back-btn {
width: 34px; height: 34px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); cursor: pointer; padding: 0;
}
.py-back-btn .ic { width: 18px; height: 18px; }
@media (hover: hover) { .py-back-btn:hover { border-color: var(--accent); color: var(--accent-text); } }
.py-balance {
text-align: center; border-radius: 12px; padding: 14px 12px; margin-bottom: 12px;
background: var(--header-bg);
}
.py-balance.is-owed { background: var(--success-soft); }
.py-balance.is-debt { background: var(--danger-soft); }
.py-balance-label { font-size: 12px; color: var(--muted); }
.py-balance-value { font-size: 22px; font-weight: 800; margin-top: 2px; }
.py-balance-meta { font-size: 11.5px; color: var(--muted); margin-top: 6px; line-height: 1.8; }
.py-section { border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 12px; background: var(--surface); }
.py-section-title { font-size: 14px; font-weight: 800; color: var(--text); margin-bottom: 12px; }
.customer-form.py-form { margin-bottom: 12px; }
.py-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text); cursor: pointer; }
.py-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.py-save-btn { width: 100%; }
.py-contract-add {
width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 14px; border: 1px dashed var(--border); border-radius: 8px; background: var(--header-bg);
color: var(--muted); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
@media (hover: hover) { .py-contract-add:hover { border-color: var(--accent); color: var(--accent-text); } }
.py-contract-img { display: flex; flex-direction: column; gap: 8px; }
.py-contract-img img {
width: 100%; max-height: 260px; object-fit: contain; border: 1px solid var(--border);
border-radius: 8px; background: var(--header-bg); cursor: zoom-in;
}
.py-contract-img-actions { display: flex; gap: 8px; }
.py-contract-img-actions .btn-ghost { flex: 1; }
.py-contract-remove { color: var(--danger) !important; }
.py-history { display: flex; flex-direction: column; }
.py-history-row {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 10px 0; border-bottom: 1px solid var(--border);
}
.py-history-row:last-child { border-bottom: none; }
.py-history-main { min-width: 0; }
.py-history-side { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.py-history-amount { font-weight: 700; font-size: 13px; white-space: nowrap; }
/* موبایل: پدینگِ خودِ پاپ‌آپ و پوششِ دورش کم می‌شه، و بخش‌های داخلی (قرارداد/تاریخچه)
کادر و پدینگ ندارن — مستقیم داخلِ پاپ‌آپِ اصلی و تمام‌عرض، فقط با یه خطِ جداکننده. */
@media (max-width: 900px) {
.sidebar-page-overlay { padding-left: 8px; padding-right: 8px; }
.sidebar-page-box { padding: 16px 12px; border-radius: 16px; }
.sidebar-page-box .close-btn { top: 12px; left: 10px; }
.py-list-row { padding: 11px 10px; }
.py-section {
border: none; border-radius: 0; padding: 14px 0 0; margin-bottom: 14px;
border-top: 1px solid var(--border); background: none;
}
.customer-form.py-form { grid-template-columns: 1fr 1fr; gap: 10px; }
}
/* ===== لیست فاکتورهای ذخیره‌شده ===== */
.invoice-list-section { padding: 20px 30px 24px 30px; border-top: 1px solid var(--border); }
.invoice-list-section h4 { font-size: 15px; margin-bottom: 10px; color: var(--text); }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th {
background: transparent; font-weight: 500; border: none; border-bottom: 1px solid var(--border);
padding: 10px 14px; text-align: right; font-size: 11.5px; color: var(--muted);
}
.data-table td { border: none; border-bottom: 1px solid var(--header-bg); padding: 11px 14px; text-align: right; }
.data-table tr:last-child td { border-bottom: none; }
.list-empty { text-align: center; color: var(--muted); font-size: 13px; padding: 14px; border: 1px dashed var(--border); border-radius: 8px; }
/* اسکلت لودینگ — تا وقتی جواب سرور نرسیده، یه شکل کلی از جدول با انیمیشن سوسو نشون می‌ده که
کاربر بدونه داره چیزی لود می‌شه، نه اینکه صفحه خالی/خراب به نظر برسه */
/* سوسوی اسکلتون با transform انجام می‌شه، نه با background-position.
انیمیتِ background-position هر فریم رو دوباره paint می‌کنه و چون بی‌نهایت تکرار می‌شه،
روی دستگاه‌های ضعیف (که دقیقاً همون‌جاییه که لودینگ طول می‌کشه) هزینه‌ی واقعی داره.
transform روی کامپوزیتور اجرا می‌شه و paint اضافه نمی‌سازه. */
.skeleton-block { height: 13px; border-radius: 4px; background: var(--header-bg); position: relative; overflow: hidden; }
.skeleton-block::after, .skeleton-card::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent 0%, var(--border) 50%, transparent 100%);
transform: translateX(100%);
animation: skeleton-sweep 1.4s ease-in-out infinite;
}
/* از راست به چپ، هم‌جهت با خودِ رابط */
@keyframes skeleton-sweep { from { transform: translateX(100%); } to { transform: translateX(-100%); } }
.skeleton-row td { padding: 13px 14px; }
.inv-pagination-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.inv-pagination-info { font-size: 12px; color: var(--muted); }
.inv-pagination-btns { display: flex; gap: 8px; }
.inv-pagination-btns button:disabled { opacity: .4; cursor: default; }
.skeleton-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.skeleton-card { border-radius: var(--card-radius); background: var(--header-bg); position: relative; overflow: hidden; }
.skeleton-lines { padding: 2px 0; }
/* خط جداکننده‌ی دسته‌های لیبل چاپ‌شده — هر دسته یعنی سفارش‌هایی که سرِ یه بار چاپ با هم پرینت شدن */
.sf-batch-divider-row td { padding: 0 !important; border-bottom: none !important; }
.sf-batch-divider { height: 14px; position: relative; }
.sf-batch-divider::before {
content: ''; position: absolute; top: 50%; right: 0; left: 0; height: 1px; background: var(--border);
}
.invoice-row-online td { background: var(--pastel-blue); }
.invoice-row-online td:first-child { border-right: 3px solid var(--pastel-blue-text); }
/* ردیفِ انتخاب‌شده (چک‌باکسِ دسکتاپ یا نگه‌داشتنِ انگشت تو موبایل) کلاً رنگی می‌شه —
مثل انتخاب گروهی فایل تو اکسپلورر. رو خودِ tr می‌شینه، نه هر td، تا زیرِ
بکگراندِ احتمالیِ td (مثل رنگِ فاکتور آنلاین) هم درست دیده بشه. */
.inv-list-wrap .data-table tbody tr.is-selected { background: var(--sidebar-active-bg); }
.list-actions { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.type-badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; }
/* ===== افزودن گروهی محصول به فاکتور ===== */
/* بدونِ background/color، مرورگر رنگِ پیش‌فرضِ خودش (سفید با متنِ سیاه) رو
می‌ذاشت و این کادر تو تمِ شب سفید می‌موند. */
.bulk-add-search {
width: 100%; padding: 8px 10px; margin-bottom: 10px; border: 1px solid var(--border);
border-radius: 6px; font-family: inherit; font-size: 13px;
background: var(--surface); color: var(--text);
}
.bulk-add-search::placeholder { color: var(--muted); }
.bulk-add-search:focus { outline: none; border-color: var(--accent-text); }
.bulk-add-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; }
.bulk-add-item {
display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: 13px;
border-bottom: 1px solid var(--border); cursor: pointer;
}
.bulk-add-item:last-child { border-bottom: none; }@media (hover: hover) {
.bulk-add-item:hover { background: var(--header-bg); } }
.bulk-add-name { flex: 1; }
.bulk-add-price { color: var(--muted); font-size: 12px; white-space: nowrap; }
.bulk-add-item.already-added { opacity: .55; cursor: default; }
/* محصولِ تازه‌ساخته‌شده بالای لیست و مشخص می‌مونه تا کاربر تیکش رو بزنه */
.bulk-add-item.is-new { background: var(--sidebar-active-bg); border-radius: 8px; }
.bulk-add-stock { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.bulk-add-stock.is-out { color: var(--danger); }
/* ===== ردیف پیش‌فرض (افزودن محصول) ===== */
.item-placeholder-row td { border-style: dashed; background: var(--page-bg); }
.item-placeholder-row .placeholder-add-cell {
cursor: pointer; color: var(--accent-text); font-weight: 700; text-align: center !important;
}@media (hover: hover) {
.item-placeholder-row .placeholder-add-cell:hover { background: var(--header-bg); } }
/* ===== دکمه‌های افزایش/کاهش تعداد ===== */
.qty-cell { display: flex; align-items: center; gap: 4px; justify-content: center; }
.qty-cell input { width: 46px; text-align: center; }
.qty-step-btn {
width: 24px; height: 24px; padding: 0 !important; font-size: 14px; line-height: 1;
background: var(--header-bg); color: var(--text); flex-shrink: 0;
}
/* ===== دکمه‌های −/+ فقط جایی که ستونِ «تعداد» براشون جا داره =====
این دکمه‌ها تا ۷۰۰px پنهان بودن، ولی ستونِ «تعداد» تا خیلی بعدتر هم باریکه.
استپر (۲۴ + ورودی + ۲۴ + فاصله‌ها) حدود ۱۱۰px می‌خواد و ستون فقط وقتی به
این عرض می‌رسه که کلِ جدول ≥ ۵۰۰px باشه — یعنی پنجره حدود ۱۲۸۰px به بالا
(۲۲۰px سایدبار + ۵۶px پدینگ + ۳۲۰px ستونِ کناریِ فرم از عرض کم می‌شن).
پایین‌تر از اون، دکمه‌ها با ورودی روی هم می‌افتادن و عدد دیده نمی‌شد؛ پس
همون رفتارِ موبایل (تایپِ مستقیم) ادامه پیدا می‌کنه. */
@media screen and (min-width: 701px) and (max-width: 1279px) {
#panelInvoice #itemsTable .qty-step-btn { display: none; }
#panelInvoice #itemsTable .qty-cell { gap: 0; }
#panelInvoice #itemsTable .qty-cell input { width: 100%; }
}
/* ===== بازه‌ی میانی (۹۰۱ تا ۱۲۷۹) =====
ستون‌ها کمی بازتر از موبایل، ولی با minmax تا کفِ خودشون جمع می‌شن تا وقتی
ستونِ کناریِ ۳۰۰پیکسلیِ فرم فضا رو تنگ می‌کنه، به‌جای سرریز فقط باریک بشن. */
@media screen and (min-width: 901px) and (max-width: 1279px) {
#panelInvoice #itemsTable thead tr,
#panelInvoice #itemsTable tbody tr {
grid-template-columns:
minmax(0, 1fr) minmax(48px, 64px) minmax(88px, 112px)
minmax(48px, 60px) minmax(92px, 120px) 24px;
}
}
/* ===== دسکتاپ (۱۲۸۰px به بالا) =====
۱) ستون‌های این جدول (minmax(0,1fr) 58px 92px 60px 96px 24px) برای عرضِ
موبایل انتخاب شده بودن. رو دسکتاپ دکمه‌های −/+ هم دیده می‌شن و مجموعِ
دکمه+ورودی+دکمه ۱۱۰px لازم داره، ولی ستون ۵۸px بود؛ چون سلول
overflow: hidden داره، خودِ عددِ تعداد بریده می‌شد و ستون‌های قیمت/تخفیف/
مجموع هم با اعدادِ چندرقمی روی هم می‌افتادن.
۲) کارتِ خریدار مثلِ کارتِ فروشنده دو ستونه می‌شه: نام و شماره تماس کنارِ هم،
آدرس تمام‌عرض. span-2 روی این دو فیلد مالِ موبایله (اونجا دکمه‌های
انتخاب/ویرایشِ کنارِ نام، عرضِ ورودی رو می‌خوردن). */
/* ===== دکمه‌ی حذفِ هر ردیف (دسکتاپ) =====
قبلاً یک ضربدرِ لخت بود: بدونِ پس‌زمینه، بدونِ کادر و با رنگِ ثابتِ #c00 که تو
تمِ شب هم عوض نمی‌شد. حالا هم‌شکلِ دکمه‌ی «حذف»ِ نوارِ پایینِ همین کارت
(.ph-del-btn) می‌شه: قرمزِ کم‌رنگ با کادرِ نازک و گوشه‌ی گرد. */
@media screen and (min-width: 901px) {
#panelInvoice #itemsTable .delete-row-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px; padding: 0; font-size: 15px; line-height: 1;
border-radius: 7px; cursor: pointer;
background: rgba(220, 53, 69, .08);
border: 1px solid rgba(220, 53, 69, .28);
color: var(--danger);
}
#panelInvoice #itemsTable .delete-row-btn:active { background: rgba(220, 53, 69, .18); }
/* شماره تماس چپ‌چین: عددِ لاتین تو متنِ راست‌به‌چپ، خواناتر و هم‌ترازِ بقیه‌ی
شماره‌های برنامه (کارت بانکی، دامنه…). هم کارتِ خریدار، هم فروشنده. */
#panelInvoice #buyerPhone,
#panelInvoice #sellerDisplayMain .is-phone-field span {
direction: ltr; text-align: left;
}
#panelInvoice #sellerDisplayMain .is-phone-field { text-align: left; }
}
@media screen and (min-width: 1280px) {
/* یک ستونِ تازه اولِ جدول برای چک‌باکسِ انتخابِ ردیف؛ بقیه یکی می‌رن جلوتر */
#panelInvoice #itemsTable thead tr,
#panelInvoice #itemsTable tbody tr {
grid-template-columns:
28px minmax(0, 1fr) 110px minmax(104px, 124px)
minmax(56px, 68px) minmax(112px, 132px) 30px;
column-gap: 10px;
}
#panelInvoice #itemsTable thead th:nth-child(1),
#panelInvoice #itemsTable tbody td[data-label="ردیف"] {
display: flex; align-items: center; justify-content: center; grid-column: 1;
}
#panelInvoice #itemsTable thead th:nth-child(2),
#panelInvoice #itemsTable tbody td[data-label="نام کالا"] { grid-column: 2; }
#panelInvoice #itemsTable thead th:nth-child(6),
#panelInvoice #itemsTable tbody td[data-label="تعداد"] { grid-column: 3; }
#panelInvoice #itemsTable thead th:nth-child(4),
#panelInvoice #itemsTable tbody td[data-label="قیمت"] { grid-column: 4; }
#panelInvoice #itemsTable thead th:nth-child(5),
#panelInvoice #itemsTable tbody td[data-label="تخفیف"] { grid-column: 5; }
#panelInvoice #itemsTable thead th:nth-child(7),
#panelInvoice #itemsTable tbody td[data-label="مجموع"] { grid-column: 6; }
#panelInvoice #itemsTable thead th:nth-child(8),
#panelInvoice #itemsTable tbody td:last-child { grid-column: 7; }
#panelInvoice #itemsTable .item-row-check {
display: block; width: 16px; height: 16px; margin: 0;
accent-color: var(--biz-accent, var(--accent-text)); cursor: pointer; flex-shrink: 0;
}
/* جا برای تعدادِ سه‌رقمی */
#panelInvoice #itemsTable .qty-cell input { width: 54px; }
/* سربرگِ «تعداد» هم مثلِ خودِ استپر وسط‌چین بشه */
#panelInvoice #itemsTable thead th:nth-child(6) { text-align: center; }
/* با چک‌باکس دیگه لازم نیست موقعِ انتخاب، ورودی‌های ردیف قفل بشن (اون قفل
مالِ انتخاب با نگه‌داشتنِ انگشته تا تپ به‌جای فیلد به ردیف برسه). */
#panelInvoice #itemsBody.is-selecting tr:not(.item-placeholder-row) input,
#panelInvoice #itemsBody.is-selecting tr:not(.item-placeholder-row) textarea,
#panelInvoice #itemsBody.is-selecting tr:not(.item-placeholder-row) button { pointer-events: auto; }
/* دکمه‌ی حذفِ ردیف کمی بزرگ‌تر، چون ستونش ۳۰px شده */
#panelInvoice #itemsTable .delete-row-btn { width: 26px; height: 26px; font-size: 16px; }
}
/* کارتِ خریدار: نام و شماره تماس کنارِ هم (مثلِ کارتِ فروشنده) */
@media screen and (min-width: 901px) {
#panelInvoice #buyerDisplayMain .field-line.span-2 { grid-column: auto; }
/* آدرس باید تمام‌عرض بمونه. کلاسِ .span-2 هم داره، پس اگه این سلکتور فقط
.field-line-address بود، اسپسیفیسیتی‌ش از قانونِ بالا کمتر می‌شد و آدرس هم
تک‌ستونه می‌افتاد — با .span-2 هم‌وزن می‌شه و چون بعدشه، برنده‌ست. */
#panelInvoice #buyerDisplayMain .field-line-address.span-2 { grid-column: 1 / -1; }
}
/* ===== تب مشتریان ===== */
.customers-panel { padding: 24px 28px; }
.customer-form {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
background: none; padding: 0; border-radius: 0; margin-bottom: 20px;
}
.customer-form .field-line {
display: flex; flex-direction: column; align-items: stretch; gap: 6px;
background: none; border: none; padding: 0;
}
.customer-form .field-line label {
font-size: 11.5px; font-weight: 500; color: var(--muted); white-space: normal;
}
.customer-form .field-line input,
.customer-form .field-line select {
width: 100%; padding: 9px 12px; border: 1px solid var(--border) !important;
border-radius: 8px !important; font-size: 13px; font-family: inherit;
background: var(--surface); color: var(--text); outline: none;
}
.customer-form .field-line input:focus,
.customer-form .field-line select:focus { border-color: var(--accent-text) !important; }
.customer-form-actions { grid-column: 1 / -1; display: flex; gap: 10px; }
/* استایلِ فیلدهای کارتِ محصول، عیناً هم‌مقدارِ فیلدهای فرمِ فاکتور (#panelInvoice
.field-line) — پس‌زمینه‌ی خاکستریِ پُر به‌جای کادرِ سفیدِ حاشیه‌دار، با فوکوسِ رنگی.
چون ساختارِ HTMLِ این دو فرم فرق داره (customer-form/cust-profile-card در برابرِ
info-card)، مقدارها اینجا تکرار شدن؛ اگه مقادیرِ مرجع عوض شد این‌ها هم باید عوض بشن. */
#productCardContent .field-line > label {
font-size: 12.5px !important; font-weight: 700 !important; color: var(--muted) !important;
line-height: 1.6;
}
#productCardContent .field-line > input,
#productCardContent .field-line > select {
background: var(--header-bg) !important; border: 1px solid transparent !important;
border-radius: 10px !important; padding: 9px 12px !important; font-size: 13.5px !important;
height: 40px; color: var(--text);
}
#productCardContent .field-line > input:focus,
#productCardContent .field-line > select:focus {
border-color: var(--accent) !important; background: var(--surface) !important;
}
/* ===== فرم کاربر: نام و شماره تماس سمت راست (۶۰٪)، عکس سمت چپ (۴۰٪) ===== */
.cust-form-layout { grid-template-columns: 60% 40%; align-items: start; }
.cust-form-fields { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cust-form-photo { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
/* عکس پروفایل دایره‌ایه، نه مربع */
.cust-photo-box {
width: 104px; height: 104px; border-radius: 50%; border: 1px dashed var(--border);
background: var(--header-bg); color: var(--muted); font-size: 12px; cursor: pointer;
display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0;
text-align: center; padding: 6px;
}@media (hover: hover) {
.cust-photo-box:hover { border-color: var(--accent); color: var(--text); } }
.cust-photo-progress { width: 120px; }
.cust-photo-box img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
/* نقش کاربر: رادیوباتون‌ها. اگه نقش‌ها زیاد بشن کادر اسکرول می‌گیره تا فرم دراز نشه */
.cust-role-radios {
display: flex; flex-wrap: wrap; gap: 8px;
max-height: 108px; overflow-y: auto;
border: 1px solid var(--border); border-radius: 10px; padding: 8px; background: var(--surface);
}
.cust-role-radio {
display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px;
font-size: 12.5px; color: var(--text); background: var(--surface);
}
.cust-role-radio:has(input:checked) { border-color: var(--accent-text); background: var(--sidebar-active-bg); color: var(--accent-text); font-weight: 600; }
/* همون تله‌ی درختِ دسته‌بندی: قانونِ عمومیِ اینپوت‌های فرم نباید رادیو/چک‌باکس رو پهن کنه */
.customer-form .field-line .cust-role-radios input[type="radio"],
.customer-form .field-line .cust-supplier-check input[type="checkbox"] {
width: 16px !important; height: 16px; min-width: 0; padding: 0 !important; margin: 0;
border: none !important; border-radius: 50% !important; background: none;
flex: 0 0 auto; accent-color: var(--accent);
}
.customer-form .field-line .cust-supplier-check input[type="checkbox"] { border-radius: 3px !important; }
.cust-role-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cust-role-add-btn { font-size: 12px; padding: 4px 10px; flex-shrink: 0; }
.cust-supplier-check {
display: flex; align-items: center; gap: 8px; margin-top: 8px;
font-size: 12.5px; font-weight: normal; color: var(--text); cursor: pointer;
}
/* کشوی «موارد بیشتر» */
.cust-more-toggle {
display: flex; align-items: center; gap: 6px; width: 100%; justify-content: space-between;
border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px;
background: var(--header-bg); color: var(--text); font-family: inherit; font-size: 13px;
font-weight: 600; cursor: pointer;
}@media (hover: hover) {
.cust-more-toggle:hover { border-color: var(--accent); } }
.cust-more-toggle .cust-more-caret { transition: transform .15s; }
.cust-more-toggle.is-open .cust-more-caret { transform: rotate(180deg); }
.cust-more-box {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
border: 1px solid var(--border); border-top: none;
border-radius: 0 0 10px 10px; padding: 12px; background: var(--surface);
}
/* ===== تب‌های صفحه‌ی تنظیمات ===== */
.settings-tabs { margin: 0 0 14px; }
.settings-panel { display: none; }
.settings-panel.active { display: block; }
/* لیستِ انواع اعلان دو ستونه، مثل بقیه‌ی چک‌لیست‌های تنظیمات */
.push-types-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
@media (max-width: 640px) { .push-types-grid { grid-template-columns: 1fr; } }
/* ===== تب‌های داخل پرونده‌ی مشتری ===== */
.cust-profile-tabs { margin: 4px 0 14px; flex-wrap: wrap; }
.cust-profile-panel { display: none; }
.cust-profile-panel.active { display: block; }
/* ثبت پرداخت و ثبت چک کنار هم، ۵۰/۵۰ */
.cust-new-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.cust-new-grid .cust-section-card { margin-bottom: 0; }
.check-thumb {
width: 38px; height: 38px; object-fit: cover; border-radius: 6px;
border: 1px solid var(--border); cursor: pointer; display: block;
}
.check-image-preview img { border: 1px solid var(--border); }
@media (max-width: 760px) {
.cust-new-grid { grid-template-columns: 1fr; }
}
/* ===== CRM سبک مشتری: آمار، سبد، یادآوری و خط زمانی ===== */
.crm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.crm-stat {
background: var(--header-bg); border-radius: 10px; padding: 10px 8px; text-align: center;
display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.crm-stat span { font-size: 13px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.crm-stat small { font-size: 11px; color: var(--muted); }
.crm-stat.is-debt span { color: var(--pastel-red-text); }
.crm-cart { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; }
.crm-cart-title { font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.crm-cart-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 4px 0; color: var(--muted); }
.crm-reminder-box { border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin-bottom: 16px; }
.crm-reminder-form { display: flex; gap: 8px; flex-wrap: wrap; }
.crm-reminder-form input {
flex: 1; min-width: 120px; border: 1px solid var(--border); border-radius: 8px;
padding: 7px 10px; font-family: inherit; font-size: 13px; background: var(--surface); color: var(--text);
}
.crm-targets { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.crm-target { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; cursor: pointer; color: var(--text); }
.crm-target input { width: 15px !important; height: 15px; margin: 0; accent-color: var(--accent); }
.crm-reminder-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.crm-reminder {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
background: var(--header-bg); border-radius: 8px; padding: 8px 10px;
}
.crm-reminder.is-done { opacity: .5; }
.crm-reminder-title { font-size: 12.5px; font-weight: 600; color: var(--text); }
/* خط زمانی: یه خط عمودی با نقطه‌های رنگی، هم‌خانواده با تقویم */
.crm-timeline { position: relative; padding-inline-start: 6px; }
.crm-timeline::before {
content: ''; position: absolute; inset-inline-start: 19px; top: 6px; bottom: 6px;
width: 2px; background: var(--border);
}
.crm-event { display: flex; gap: 12px; padding: 8px 0; position: relative; }
.crm-event-dot {
width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; z-index: 1;
display: flex; align-items: center; justify-content: center;
background: var(--header-bg); color: var(--muted); border: 2px solid var(--surface);
}
.crm-event-dot .ic { width: 15px; height: 15px; }
.crm-event.tone-info .crm-event-dot { background: var(--pastel-blue); color: var(--pastel-blue-text); }
.crm-event.tone-success .crm-event-dot { background: var(--pastel-green); color: var(--pastel-green-text); }
.crm-event.tone-warning .crm-event-dot { background: var(--pastel-yellow); color: var(--pastel-yellow-text); }
.crm-event-body { flex: 1; min-width: 0; }
.crm-event-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.crm-event-title { font-size: 13px; font-weight: 600; color: var(--text); }
.crm-event-amount { font-size: 12.5px; font-weight: 700; color: var(--text); white-space: nowrap; }
.crm-event-meta { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
@media (max-width: 640px) {
.crm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.crm-reminder-form input { min-width: 0; flex-basis: 100%; }
}
/* آواتار دایره‌ای کاربر توی لیست */
/* عکس کاربر توی حالت کارتی: همون قابِ آواتار، ولی به‌جای حرفِ اول، خودِ عکس */
.ent-card-avatar-img { object-fit: cover; padding: 0; }
.cust-list-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.cust-list-avatar {
width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
border: 1px solid var(--border); background: var(--header-bg);
}
.cust-list-avatar-letter {
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700; color: var(--muted);
}
@media (max-width: 640px) {
/* در موبایل عکس می‌ره بالا و وسط، فیلدها زیرش */
.cust-form-layout { grid-template-columns: 1fr; }
.cust-form-photo { order: -1; }
.cust-form-fields { order: 0; }
.cust-more-box { grid-template-columns: 1fr; }
}
/* ===== کارت مشتری (پروفایل) ===== */
.cust-profile-card {
border: 1px solid var(--border); border-radius: var(--card-radius); padding: 20px;
margin-bottom: 18px; background: var(--surface);
}
.cust-profile-header { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cust-avatar {
width: 56px; height: 56px; border-radius: 50%; background: var(--pastel-blue); color: var(--pastel-blue-text);
display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; flex-shrink: 0;
}
.cust-header-info h3 { margin: 0 0 4px; font-size: 18px; }
.cust-header-meta { font-size: 13px; color: var(--muted); }
.cust-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cust-badge { background: var(--header-bg); border-radius: 999px; padding: 5px 12px; font-size: 12px; color: var(--text); }
.cust-badge b { color: var(--muted); font-weight: 600; margin-left: 4px; }
.cust-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.cust-stat { border-radius: 14px; padding: 16px; text-align: center; }
.cust-stat .cust-stat-value { font-size: 18px; font-weight: 800; }
.cust-stat .cust-stat-label { font-size: 12px; margin-top: 4px; opacity: .85; }
@media (max-width: 700px) { .cust-stats-row { grid-template-columns: 1fr; } }
.cust-section-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; margin-bottom: 14px; }
.cust-section-card .profile-invoices-title { margin: 0 0 10px; }
/* ===== کارتِ کنترلِ ویترین پرو ===== */
.sf-howto-warn {
margin-top: 10px; padding: 10px 12px; border-radius: 8px; font-size: 12.5px; line-height: 2;
background: rgba(226, 72, 58, .07); border: 1px solid rgba(226, 72, 58, .28);
color: var(--text);
}
.sf-howto-warn-title { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--danger, #e2483a); margin-bottom: 2px; }
.sf-howto-warn code {
direction: ltr; font-weight: 700; padding: 1px 6px; border-radius: 5px;
background: rgba(226, 72, 58, .12);
}
/* ---- کارت دامنه: راهنمای پویا ---- */
.sf-howto-block {
margin-top: 10px; padding: 11px 12px; border: 1px solid var(--border);
border-radius: 8px; background: var(--accent-soft, rgba(0,0,0,.02));
}
.sf-howto-title { font-size: 13px; font-weight: 700; color: var(--text); }
.sf-howto-rec {
margin-top: 8px; padding: 8px 10px; border-radius: 7px;
background: var(--card-bg, #fff); border: 1px solid var(--border);
}
.sf-howto-rec > div {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 3px 0; font-size: 12.5px;
}
.sf-howto-rec > div > span { color: var(--muted); min-width: 96px; }
.sf-howto-rec code {
direction: ltr; font-weight: 700; padding: 1px 7px; border-radius: 5px;
background: var(--accent-soft, rgba(0,0,0,.05));
}
.sf-howto-rec .btn-ghost { padding: 2px 8px; font-size: 11.5px; }
/* ---- کارت دامنه: لیست دامنه‌های کاربر ---- */
.sf-domain-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.sf-domain-row {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
flex-wrap: wrap; padding: 9px 11px; border: 1px solid var(--border);
border-radius: 8px; background: var(--card-bg, #fff);
}
.sf-domain-row.primary { border-color: var(--accent); background: var(--accent-soft, rgba(0,0,0,.03)); }
.sf-domain-row-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.sf-domain-name { font-size: 13.5px; font-weight: 700; direction: ltr; word-break: break-all; }
.sf-domain-badge {
font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 20px;
background: var(--accent); color: #fff;
}
.sf-domain-row-tools { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.sf-domain-row-tools .btn-ghost { padding: 4px 9px; font-size: 12px; }
.sf-domain-del { color: var(--danger, #e2483a); }
.sf-domain-note {
padding: 10px 12px; border-radius: 8px; font-size: 12.5px; line-height: 1.9;
background: var(--accent-soft, rgba(0,0,0,.03)); color: var(--muted); margin-top: 10px;
}
@media (max-width: 520px) {
.sf-domain-row { align-items: flex-start; flex-direction: column; }
.sf-domain-row-tools { width: 100%; }
}
.sf-pro-badge {
background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 800;
border-radius: 999px; padding: 2px 9px; vertical-align: middle; margin-right: 6px;
}
.sf-pro-links { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.sf-pro-link-row {
display: flex; align-items: center; gap: 8px; background: var(--header-bg);
border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; flex-wrap: wrap;
}
.sf-pro-link-label { font-size: 12.5px; font-weight: 700; min-width: 96px; }
.sf-pro-link-url {
flex: 1; min-width: 0; font-size: 12px; color: var(--muted); direction: ltr; text-align: left;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sf-pro-link-row a, .sf-pro-link-row button {
font-size: 11.5px; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--border);
background: var(--surface); color: var(--text); cursor: pointer; font-family: inherit; white-space: nowrap;
}@media (hover: hover) {
.sf-pro-link-row a:hover, .sf-pro-link-row button:hover { border-color: var(--accent); color: var(--accent-text); } }
.sf-pro-sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.sf-pro-section {
background: var(--header-bg); border: 1px solid var(--border); border-radius: 10px;
padding: 11px 12px; font-size: 12.5px; cursor: pointer; text-align: right;
font-family: inherit; color: var(--text); display: flex; flex-direction: column; gap: 3px;
}@media (hover: hover) {
.sf-pro-section:hover { border-color: var(--accent); } }
.sf-pro-section small { color: var(--muted); font-size: 11px; font-weight: 400; }
.sf-pro-section.soon { opacity: .55; cursor: default; }@media (hover: hover) {
.sf-pro-section.soon:hover { border-color: var(--border); } }
/* ===== کارتِ پنلِ پیامک ===== */
.sms-credit-box {
display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
background: var(--header-bg); border: 1px solid var(--border); border-radius: 12px;
padding: 12px 14px; margin-bottom: 14px;
}
.sms-credit-value { font-size: 20px; font-weight: 800; color: var(--accent-text); }
.sms-provider-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.sms-provider-option {
display: flex; align-items: flex-start; gap: 9px; border: 1px solid var(--border);
border-radius: 12px; padding: 12px; cursor: pointer; font-size: 13px; background: var(--surface);
}
.sms-provider-option.active { border-color: var(--accent); background: var(--header-bg); }
.sms-provider-option input { width: auto !important; margin: 3px 0 0; accent-color: var(--accent); flex-shrink: 0; }
.sms-provider-option small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 3px; line-height: 1.7; }
.sms-packages { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.sms-package {
border: 1px solid var(--border); border-radius: 12px; padding: 12px; text-align: center;
background: var(--surface); cursor: pointer; font-family: inherit; color: var(--text);
}@media (hover: hover) {
.sms-package:hover { border-color: var(--accent); } }
.sms-package b { display: block; font-size: 16px; margin-bottom: 3px; }
.sms-package small { color: var(--muted); font-size: 11.5px; }
.sms-ledger { font-size: 12px; }
.sms-ledger-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.sms-ledger-row:last-child { border-bottom: none; }
.sms-ledger-row .plus { color: #2f6b45; font-weight: 700; }
.sms-ledger-row .minus { color: var(--muted); }
/* ===== ویرایشگرِ صفحاتِ فروشگاه ===== */
.page-editor-toolbar {
display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
border: 1px solid var(--border); border-bottom: none;
border-radius: 10px 10px 0 0; padding: 7px 8px; background: var(--header-bg);
}
.page-editor-toolbar button {
background: var(--surface); border: 1px solid var(--border); border-radius: 7px;
padding: 5px 10px; font-family: inherit; font-size: 12px; cursor: pointer; color: var(--text);
}@media (hover: hover) {
.page-editor-toolbar button:hover { border-color: var(--accent); color: var(--accent-text); } }
.page-editor-sep { width: 1px; height: 18px; background: var(--border); margin: 0 3px; }
.page-editor-content {
border: 1px solid var(--border); border-radius: 0 0 10px 10px; padding: 14px;
min-height: 200px; max-height: 340px; overflow-y: auto; background: var(--surface);
font-size: 14px; line-height: 2.1; color: var(--text); outline: none;
}
.page-editor-content:focus { border-color: var(--accent); }
.page-editor-content h2 { font-size: 17px; margin: 14px 0 8px; }
.page-editor-content h3 { font-size: 15px; margin: 12px 0 6px; }
.page-editor-content ul, .page-editor-content ol { padding-right: 22px; }
.page-editor-content a { color: var(--accent-text); text-decoration: underline; }
.pro-field-group { display: flex; flex-direction: column; gap: 5px; }
.sf-page-row {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
background: var(--header-bg); border: 1px solid var(--border); border-radius: 10px;
padding: 10px 12px; margin-bottom: 8px;
}
.sf-page-row .sf-page-title { font-size: 13px; font-weight: 700; flex: 1; min-width: 0; }
.sf-page-row .sf-page-slug { font-size: 11px; color: var(--muted); direction: ltr; }
.sf-page-badge { font-size: 10.5px; border-radius: 999px; padding: 2px 8px; background: var(--border); color: var(--muted); }
.sf-page-badge.live { background: var(--accent); color: #fff; }
.sf-page-row button {
font-size: 11.5px; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--border);
background: var(--surface); color: var(--text); cursor: pointer; font-family: inherit;
}@media (hover: hover) {
.sf-page-row button:hover { border-color: var(--accent); color: var(--accent-text); } }
/* ===== گالریِ تصاویر ===== */
.gallery-toolbar {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px;
}
.gallery-toolbar input[type="text"] { width: 220px; }
.gallery-cat-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.gallery-cat-tabs button {
background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
padding: 6px 14px; font-family: inherit; font-size: 12.5px; color: var(--muted); cursor: pointer;
}
.gallery-cat-tabs button.active {
background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700;
}
.gallery-cat-tabs button .gallery-cat-count { opacity: .75; font-size: 11px; margin-right: 4px; }
.gallery-bulk-bar {
display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
background: var(--header-bg); border: 1px solid var(--border); border-radius: 12px;
padding: 10px 14px; margin-bottom: 14px; font-size: 13px; font-weight: 700;
}
.gallery-bulk-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.gallery-bulk-actions button { font-size: 12px; padding: 6px 10px; }
.btn-danger-ghost {
background: none; border: 1px solid var(--danger, #e2483a); color: var(--danger, #e2483a);
border-radius: 8px; padding: 6px 10px; font-family: inherit; font-size: 12px; cursor: pointer;
}
.gallery-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px;
}
.gallery-grid-picker { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); max-height: 52vh; overflow-y: auto; }
.gallery-card {
background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
overflow: hidden; position: relative; display: flex; flex-direction: column;
}
.gallery-card.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.gallery-card-thumb {
width: 100%; aspect-ratio: 1/1; background: var(--header-bg); cursor: zoom-in;
display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative;
}
.gallery-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-card-check {
position: absolute; top: 7px; right: 7px; width: 20px; height: 20px; cursor: pointer;
accent-color: var(--accent); z-index: 2;
}
.gallery-card-flags { position: absolute; top: 7px; left: 7px; display: flex; gap: 4px; z-index: 2; }
.gallery-flag {
background: rgba(0,0,0,.62); color: #fff; border-radius: 6px; font-size: 10px;
padding: 2px 6px; font-weight: 700; line-height: 1.6;
}
.gallery-flag.warn { background: #d9803f; }
.gallery-flag.orphan { background: #7a7a7a; }
.gallery-card-body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 4px; }
.gallery-card-name {
font-size: 12.5px; font-weight: 700; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gallery-card-meta { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gallery-card-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.gallery-card-tag {
background: var(--header-bg); border-radius: 5px; padding: 1px 6px; font-size: 10.5px; color: var(--muted);
}
.gallery-card-actions { display: flex; gap: 5px; margin-top: 5px; }
.gallery-card-actions button {
flex: 1; background: var(--header-bg); border: 1px solid var(--border); border-radius: 7px;
font-family: inherit; font-size: 11px; padding: 5px 4px; cursor: pointer; color: var(--text);
}@media (hover: hover) {
.gallery-card-actions button:hover { border-color: var(--accent); color: var(--accent-text); } }
/* ترتیبِ عکس‌های یه محصول (کشیدن و رها کردن) */
.gallery-card[draggable="true"] { cursor: grab; }
.gallery-card.drag-over { border-color: var(--accent); border-style: dashed; }
.gallery-featured-badge {
position: absolute; bottom: 7px; right: 7px; background: var(--accent); color: #fff;
border-radius: 6px; font-size: 10px; padding: 2px 6px; font-weight: 700; z-index: 2;
}
.wm-field-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.wm-field-row label { font-size: 13px; font-weight: 700; min-width: 96px; }
.wm-field-row input[type="range"] { flex: 1; min-width: 130px; accent-color: var(--accent); }
.wm-range-value { font-size: 12px; color: var(--muted); min-width: 42px; text-align: left; }
/* پاپ‌آپِ واترمارک با .customer-form — اسلایدرها نباید استایلِ کادرِ فیلدِ متنی بگیرن */
.wm-form { margin-bottom: 14px; }
.wm-range { display: flex; align-items: center; gap: 10px; }
.customer-form .field-line .wm-range input[type="range"] {
flex: 1; width: auto; padding: 0; border: none !important; background: none; accent-color: var(--accent);
}
.wm-hint { font-size: 11px; color: var(--muted); line-height: 1.8; }
.wm-hint.is-warn { color: var(--danger); }
/* ===== گالری: کارت/ردیفِ هم‌ساختارِ مرجع ===== */
.gal-row-clickable { cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
@media (hover: hover) {
tr.gal-row-clickable:hover { background: var(--header-bg); }
.ent-card.gal-row-clickable:hover { border-color: var(--accent); }
}
.gal-ent-card .ent-card-thumb { object-fit: cover; }
.gal-ent-card .ent-card-meta .gallery-flag,
.gal-table .gallery-flag { font-size: 10px; }
.gal-usage { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gal-list-thumb { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; display: block; background: var(--header-bg); border: 1px solid var(--border); }
/* جدولِ لیستیِ گالری — هم‌سبکِ لیستِ محصولات: نام پررنگ و اکسنت، زیرش خطِ خاکستریِ استفاده/تاریخ */
.gal-table td { vertical-align: middle; }
.gal-table .gal-name {
color: var(--accent); font-weight: 600; font-size: 13px; max-width: 360px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gal-table .gal-sub, .gal-sub { font-size: 11.5px; color: var(--muted); margin-top: 3px; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gal-flags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.gal-flag { display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 8px; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.gal-flag.tone-info { background: var(--info-soft); color: var(--info); }
.gal-flag.tone-warning { background: var(--warning-soft); color: var(--warning); }
.gal-flag.tone-neutral { background: var(--neutral-soft); color: var(--muted); }
.gal-table .list-actions { flex-wrap: nowrap; }
/* «انتخاب همه» در نوارِ ابزار — هم‌ارتفاعِ دکمه‌های ۳۰پیکسلیِ کنارش */
.inv-select-all {
display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
font-size: 12px; font-weight: 700; color: var(--muted); cursor: pointer; white-space: nowrap; user-select: none;
}
.inv-select-all input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.inv-select-all:has(input:checked) { border-color: var(--accent-text); color: var(--accent-text); background: var(--sidebar-active-bg); }
.inv-select-all.is-disabled { opacity: .45; cursor: not-allowed; }
/* منوی ترکیبیِ واترمارک فقط مالِ موبایله؛ دسکتاپ همون دو آیکونِ جدا رو داره */
.gal-wm-dd { display: none; }
@media (max-width: 700px) {
/* نوارِ ابزارِ گالری تو موبایل: یک ردیف (با بازشدنِ جست‌وجو، نهایتاً دو ردیف) */
#galleryFilterBar { flex-wrap: wrap; gap: 6px; }
#galleryToolbarActions { flex: 1 1 0; min-width: 0; flex-wrap: nowrap; gap: 5px; justify-content: flex-end; }
#galleryToolbarActions .inv-select-all { padding: 0 8px; gap: 0; }
#galleryToolbarActions .inv-select-all-label { display: none; }
#galleryToolbarActions .inv-toolbar-count { display: none; }
#galleryToolbarActions .inv-toolbar-count.has-selection {
display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px;
padding: 0 7px; border-radius: 999px; background: var(--accent); color: #fff; text-decoration: none;
font-size: 12px; font-weight: 800; flex-shrink: 0;
}
#galleryToolbarActions .inv-toolbar-count .cnt-label { display: none; }
#galleryBulkWmAddBtn, #galleryBulkWmRemoveBtn { display: none; }
.gal-wm-dd { display: block; }
#galleryToolbarActions .inv-filter-sep { display: none; }
#galleryToolbarActions .inv-view-toggle { gap: 3px; }
.gal-wm-dd .inv-sort-menu { min-width: 170px; }
/* جای بیشتر برای یک‌ردیفه‌موندن: فلشِ مرتب‌سازی حذف، دکمه فقط آیکون */
#galleryToolbarActions .inv-sort-caret { display: none; }
#galleryToolbarActions .inv-sort-trigger { padding: 0 7px; }
}
/* پیش‌نمایشِ زنده‌ی واترمارک */
.wm-preview {
position: relative; margin-bottom: 14px; border-radius: 10px; overflow: hidden;
border: 1px solid var(--border); background: var(--header-bg); min-height: 120px;
display: flex; align-items: center; justify-content: center;
}
.wm-preview img { width: 100%; max-height: 260px; object-fit: contain; display: block; }
.wm-preview-msg { font-size: 12px; color: var(--muted); padding: 20px; text-align: center; }
/* اسلایدرِ لمسی: جای انگشتِ بزرگ‌تر و بدونِ تداخلِ اسکرول */
.wm-range input[type="range"] { height: 28px; touch-action: none; }
.icon-btn.is-on { color: var(--accent-text); border-color: var(--accent-text); }
.gal-edit-preview { text-align: center; margin-bottom: 14px; }
.gal-edit-preview img {
max-width: 100%; max-height: 240px; border-radius: 10px; border: 1px solid var(--border);
background: var(--header-bg); cursor: zoom-in; object-fit: contain;
}
@media (max-width: 900px) {
.gallery-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 9px; }
.gallery-toolbar input[type="text"] { width: 100%; }
}
/* ===== کارت محصول ===== */
.prod-gallery { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.prod-gallery-slot {
width: 84px; height: 84px; border-radius: 12px; border: 1px dashed var(--border);
background: var(--header-bg); display: flex; align-items: center; justify-content: center;
position: relative; overflow: hidden; flex-shrink: 0;
}
.prod-gallery-slot img { width: 100%; height: 100%; object-fit: cover; }
.prod-gallery-slot.is-default { border: 2px solid var(--accent-text); }
.prod-gallery-slot .prod-img-actions {
position: absolute; inset: 0; background: rgba(0,0,0,.45); display: none;
align-items: center; justify-content: center; gap: 6px;
}@media (hover: hover) {
.prod-gallery-slot:hover .prod-img-actions { display: flex; } }
.prod-gallery-slot .prod-img-actions button {
background: var(--surface); border: none; border-radius: 6px; font-size: 11px; padding: 3px 6px; cursor: pointer;
}
.prod-gallery-add {
width: 84px; height: 84px; border-radius: 12px; border: 1px dashed var(--border);
display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--muted);
font-size: 12px; text-align: center; flex-shrink: 0;
}
/* ===== کارتِ «مشاهده‌ی محصول» (پاپ‌آپِ فقط‌خواندنی، جدا از کارتِ ویرایش) ===== */
.prod-view-gallery { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.prod-view-img {
width: 96px; height: 96px; border-radius: 12px; border: 1px solid var(--border);
background: var(--header-bg); overflow: hidden; flex-shrink: 0; cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.prod-view-img img { width: 100%; height: 100%; object-fit: cover; }
.prod-view-img.ph { cursor: default; color: var(--muted); }
/* نام+شناسه سمتِ راست (شروعِ RTL)، قیمت سمتِ چپ — رویِ دسکتاپ که عرض کافیه کنارِ
هم می‌مونن (موبایل زیرِ هم می‌شه، پایین‌تر). min-width:0 لازمه چون توی فلکس
بدونش عنوانِ طولانی جمع نمی‌شه و رویِ قیمت سوار می‌شه. */
.prod-view-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.prod-view-head-info { min-width: 0; flex: 1 1 auto; }
.prod-view-head-info h3 { margin: 0 0 4px; font-size: 18px; word-break: break-word; }
.prod-view-head-price { text-align: left; direction: ltr; flex-shrink: 0; }
@media (max-width: 900px) {
/* سه‌تا سه‌تا تو یک ردیف — به‌جایِ عرضِ ثابتِ پیکسلی که عرضِ باریکِ گوشی رو
نامنظم پر می‌کرد، گرید با ۳ ستونِ مساوی همیشه دقیقاً ۳تایی می‌چینه. */
.prod-view-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.prod-view-img { width: auto; height: auto; aspect-ratio: 1 / 1; }
/* نام/شناسه و قیمت زیرِ هم — کنارِ‌هم‌نگه‌داشتنشون تو عرضِ کمِ موبایل باعثِ
روی‌هم‌افتادن می‌شد. قیمت طبقِ قراردادِ همیشگیِ اپ چپ‌چین می‌مونه. */
.prod-view-head { flex-direction: column; gap: 6px; }
}
/* ===== انتخاب‌گر چندگانه‌ی دسته‌بندی (فرم افزودن محصول) ===== */
.category-picker-field { display: flex; flex-direction: column; align-items: stretch; gap: 6px; background: transparent !important; border: none !important; padding: 0 !important; }
.category-picker {
background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
padding: 8px; min-width: 0;
}
/* ===== انتخابگرِ دسته‌بندی به‌شکلِ چیپس — بدونِ اسکرولِ داخلی؛ با زدنِ هر چیپ هم
انتخاب/لغوِ انتخاب می‌شه هم (اگه زیرشاخه داشته باشه) زیرشاخه‌هاش باز می‌شن. */
.cat-chip-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.cat-chip-level {
flex: 1 1 100%; margin-top: 6px; padding-inline-start: 14px;
border-inline-start: 2px dashed var(--border);
overflow: hidden;
/* باز شدن: چون هر رندر یه المنتِ کاملاً تازه می‌سازه (نه پچِ روی قبلی)، فقط
انیمیشنِ ورود (نه ترنزیشن) خودکار روش اجرا می‌شه. برای جمع‌شدنِ نرم، خودِ
collapseCategoryChipLevel تو app.js کلاسِ is-collapsing رو قبل از حذفِ واقعیِ
این المنت اضافه می‌کنه تا ترنزیشنِ زیر فعال بشه و فرصتِ انیمیشن‌شدن پیدا کنه. */
animation: cat-chip-level-in .22s ease;
}
.cat-chip-level.is-collapsing {
animation: none;
transition: max-height .2s ease, opacity .2s ease;
}
@keyframes cat-chip-level-in {
from { opacity: 0; max-height: 0; }
to { opacity: 1; max-height: 600px; }
}
.cat-chip {
position: relative; display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
border: 1px solid transparent; border-radius: 999px; padding: 5px 10px;
font-size: 12.5px; color: var(--text); background: var(--header-bg); white-space: nowrap;
}
/* هر ریشه یه رنگِ ثابت از چرخه‌ی tone-* می‌گیره و زیرشاخه‌هاش همون رنگ رو ارث
می‌برن (رجوع به CAT_CHIP_TONES تو app.js) — دقیقاً هم‌رنگ‌بندیِ inv-chip.tone-* */
.cat-chip.tone-neutral { background: var(--neutral-soft); color: var(--muted); }
.cat-chip.tone-danger { background: var(--danger-soft); color: var(--danger); }
.cat-chip.tone-warning { background: var(--warning-soft); color: var(--warning); }
.cat-chip.tone-success { background: var(--success-soft); color: var(--success); }
.cat-chip.tone-info { background: var(--info-soft); color: var(--info); }
.cat-chip.tone-purple { background: var(--purple-soft); color: var(--purple); }
.cat-chip.tone-teal { background: var(--teal-soft); color: var(--teal); }
.cat-chip.tone-neutral:has(input:checked) { background: var(--neutral); color: #fff; font-weight: 600; }
.cat-chip.tone-danger:has(input:checked) { background: var(--danger); color: #fff; font-weight: 600; }
.cat-chip.tone-warning:has(input:checked) { background: var(--warning); color: #fff; font-weight: 600; }
.cat-chip.tone-success:has(input:checked) { background: var(--success); color: #fff; font-weight: 600; }
.cat-chip.tone-info:has(input:checked) { background: var(--info); color: #fff; font-weight: 600; }
.cat-chip.tone-purple:has(input:checked) { background: var(--purple); color: #fff; font-weight: 600; }
.cat-chip.tone-teal:has(input:checked) { background: var(--teal); color: #fff; font-weight: 600; }
/* چک‌باکس نیازی نیست دیده بشه — خودِ رنگِ چیپ (tone-* در برابرِ tone-*:has(checked))
وضعیتِ انتخاب رو کاملاً نشون می‌ده. اینجا فقط بصری مخفی می‌شه (نه display:none
که بعضی مرورگرها با اِلمنتِ کاملاً حذف‌شده رفتارِ کلیکِ لیبل رو درست انجام نمی‌دن)
تا هم چک‌باکسِ واقعی و getCheckedCategoryIds و :has(input:checked) دستِ‌نخورده
بمونن، هم کلیک روی کلِ لیبل همچنان تیک بخوره. */
.customer-form .field-line .cat-chip input[type="checkbox"] {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.cat-chip span { overflow: hidden; text-overflow: ellipsis; }
.cat-chip-caret { font-size: 10px; color: var(--muted); padding: 0 1px; }
/* ===== بخشِ «فرمول قیمت» تو کارتِ محصول — دیگه کرکره‌ای نیست، همیشه بازه ===== */
.prod-formula-section { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); padding: 12px 14px; }
.prod-formula-section-head { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
/* ===== چیپس‌های فرمولِ قیمت — همون رنگ‌بندیِ چیپس‌های دسته‌بندی (CAT_CHIP_TONES) ===== */
.prod-formula-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.prod-formula-chip {
border: 1px solid transparent; border-radius: 999px; padding: 5px 12px;
font-size: 12.5px; font-family: inherit; font-weight: 500; color: var(--text);
background: var(--surface); cursor: pointer; white-space: nowrap;
}
.prod-formula-chip.tone-neutral { background: var(--neutral-soft); color: var(--muted); }
.prod-formula-chip.tone-danger { background: var(--danger-soft); color: var(--danger); }
.prod-formula-chip.tone-warning { background: var(--warning-soft); color: var(--warning); }
.prod-formula-chip.tone-success { background: var(--success-soft); color: var(--success); }
.prod-formula-chip.tone-info { background: var(--info-soft); color: var(--info); }
.prod-formula-chip.tone-purple { background: var(--purple-soft); color: var(--purple); }
.prod-formula-chip.tone-teal { background: var(--teal-soft); color: var(--teal); }
.prod-formula-chip.tone-neutral.is-active { background: var(--neutral); color: #fff; font-weight: 700; }
.prod-formula-chip.tone-danger.is-active { background: var(--danger); color: #fff; font-weight: 700; }
.prod-formula-chip.tone-warning.is-active { background: var(--warning); color: #fff; font-weight: 700; }
.prod-formula-chip.tone-success.is-active { background: var(--success); color: #fff; font-weight: 700; }
.prod-formula-chip.tone-info.is-active { background: var(--info); color: #fff; font-weight: 700; }
.prod-formula-chip.tone-purple.is-active { background: var(--purple); color: #fff; font-weight: 700; }
.prod-formula-chip.tone-teal.is-active { background: var(--teal); color: #fff; font-weight: 700; }
/* ===== نمایشِ عددیِ «قیمتِ فروشِ محصول» تو کارتِ محصول — فقط متنه، هیچ ظاهرِ
ورودی/کادر نداره (نه بکگراند، نه بوردر) که با فیلدهای واقعی اشتباه گرفته نشه. */
.prod-sale-price-value { font-size: 21px; font-weight: 800; color: var(--accent-text); text-align: left; direction: ltr; }
.prod-sale-price-note { font-size: 11px; color: var(--muted); margin-top: 3px; text-align: left; direction: ltr; }
#cardProdCostPrice, #cardProdPricePercent { text-align: left; direction: ltr; }
/* همون دفاعِ min-width:0 برایِ ردیفِ قیمتِ خرید/درصد — تا فیلدِ باریکِ درصد هم از
کادرِ پاپ‌آپ بیرون نزنه. */
.prod-cost-percent-row { min-width: 0; max-width: 100%; overflow: hidden; }
.prod-cost-percent-row .field-line { min-width: 0; max-width: 100%; }
.prod-cost-percent-row .field-line input { width: 100%; min-width: 0; max-width: 100%; }
/* ===== ردیفِ نام/شناسه‌ی محصول — تو موبایل (که عرض کمه) ۷۵٪ نام / ۲۵٪ شناسه؛
تو دسکتاپ (که عرض بیشتره) همون جفت‌شدنِ مساویِ قبلی حفظ می‌شه. */
/* min-width:0 هم رویِ خودِ ردیف (که آیتمِ گریدِ .customer-form ـه) هم رویِ هر دو
فرزندش لازمه — وگرنه اندازه‌ی حداقلیِ پیش‌فرضِ مرورگر برای (min-width:auto)
از شیرِ فلکس/گرید عبور می‌کنه و شناسه از کادرِ پاپ‌آپ بیرون می‌زنه. */
.prod-name-code-row { display: flex; gap: 10px; align-items: flex-start; min-width: 0; max-width: 100%; overflow: hidden; }
.prod-name-code-row .prod-name-field { flex: 75; min-width: 0; max-width: 100%; }
.prod-name-code-row .prod-code-field { flex: 25; min-width: 0; max-width: 100%; }
.prod-name-code-row .prod-name-field input,
.prod-name-code-row .prod-code-field input { width: 100%; min-width: 0; max-width: 100%; }
@media (min-width: 769px) {
.prod-name-code-row .prod-name-field { flex: 1; }
.prod-name-code-row .prod-code-field { flex: 1; }
}
/* ===== برچسب دسته‌بندی روی محصولات (جدول‌ها) ===== */
.cat-tag {
display: inline-block; background: var(--sidebar-active-bg); color: var(--accent-text);
font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin: 2px;
}
.category-filter-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.category-filter-row select { border: 1px solid var(--border); border-radius: 7px; padding: 7px 10px; font-family: inherit; font-size: 13px; background: var(--surface); color: var(--text); }
/* ===== آپلود گروهی ===== */
.import-box {
background: var(--header-bg); border: 1px dashed var(--border); border-radius: 14px;
padding: 14px 16px; margin-bottom: 24px;
}
.import-box h4 { font-size: 14px; margin-bottom: 6px; }
.import-hint { font-size: 12px; color: var(--muted); margin-bottom: 10px; line-height: 1.8; }
.import-hint code { background: var(--surface); padding: 1px 5px; border-radius: 4px; border: 1px solid var(--border); }
.import-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.import-actions input[type="file"] { font-family: inherit; font-size: 12px; flex: 1; min-width: 180px; }
.import-result-msg { margin-top: 8px; font-size: 13px; font-weight: 700; }
.import-result-msg.ok { color: #2c7a4d; }
.import-result-msg.err { color: #9e2a2a; }
/* ===== موجودی محصول ===== */
.stock-cell { display: flex; align-items: center; gap: 6px; justify-content: center; }
.stock-badge {
font-weight: 800; padding: 2px 8px; border-radius: 20px; font-size: 12px;
background: #eaf6ee; color: #2c7a4d;
}
.stock-badge.low { background: #fdeeec; color: var(--accent); }
.btn-stock {
background: var(--header-bg); border: 1px solid var(--border); color: var(--text);
width: 22px; height: 22px; border-radius: 5px; font-size: 13px; font-weight: 800;
cursor: pointer; padding: 0; line-height: 1;
}
.inv-adjust-row { display: flex; align-items: center; gap: 6px; justify-content: center; }
.inv-adjust-row input[type="text"] {
width: 60px; border: 1px solid var(--border); border-radius: 7px; padding: 5px 6px;
font-family: inherit; font-size: 12px; background: var(--surface); color: var(--text); text-align: center;
}
/* ===== نوار فیلترهای انبار — دقیقاً مطابق Inventory.tsx فیگما (ردیف افقی) ===== */
.inv-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.inv-stat-card {
background: var(--surface); border-radius: 10px; border: 1px solid var(--border);
padding: 16px 18px; display: flex; align-items: center; gap: 14px;
}
.inv-stat-bar { width: 10px; height: 36px; border-radius: 4px; flex-shrink: 0; }
.inv-stat-num { font-size: 22px; font-weight: 700; color: var(--text); }
.inv-stat-label { font-size: 12px; color: var(--muted); margin-top: 2px; }
@media (max-width: 900px) { .inv-stats-row { grid-template-columns: repeat(2, 1fr); } }
.inv-filter-bar { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.inv-filter-bar > input[type="text"] {
border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px;
font-family: inherit; font-size: 13px; background: var(--surface); color: var(--text);
}
.inv-filter-sep { width: 1px; height: 20px; background: var(--border); flex-shrink: 0; }
/* ===== نوار عملیاتِ هم‌ردیفِ کادر جست‌وجو (سمت چپ) ===== */
/* margin-right:auto توی چیدمان راست‌به‌چپ یعنی «برو تا انتهای سمت چپ» */
.inv-toolbar-actions { display: flex; align-items: center; gap: 8px; margin-right: auto; flex-wrap: wrap; }
.inv-toolbar-count {
font-size: 12px; color: var(--muted); white-space: nowrap; font-family: inherit;
background: none; border: none; padding: 0 2px; cursor: default;
}
.inv-toolbar-count.has-selection { color: var(--accent); font-weight: 600; cursor: pointer; text-decoration: underline; }
.inv-toolbar-count:disabled { cursor: default; text-decoration: none; }
/* دکمه‌ها همیشه دیده می‌شن؛ بدون انتخاب فقط کم‌رنگ و غیرفعالن */
.inv-toolbar-actions .icon-btn:disabled { opacity: .38; cursor: not-allowed; filter: grayscale(1); }@media (hover: hover) {
.inv-toolbar-actions .icon-btn:disabled:hover { border-color: var(--border); } }
.inv-view-toggle { display: flex; gap: 4px; }
.inv-view-toggle button {
width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--border); background: var(--surface); color: var(--muted);
border-radius: 8px; cursor: pointer;
}@media (hover: hover) {
.inv-view-toggle button:hover { border-color: var(--accent); color: var(--text); } }
.inv-view-toggle button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
/* ===== حالت کارتی لیست فاکتورها ===== */
.inv-cards-selectall {
display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
color: var(--muted); margin-bottom: 10px; cursor: pointer;
}
.inv-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.inv-card {
border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
}
.inv-card.is-selected { border-color: var(--accent); background: var(--sidebar-active-bg); }
/* ردیف/کارت با کلیک باز می‌شه (جای دکمه‌های آیکونیِ مشاهده و ویرایش رو گرفته) */
.inv-row-clickable { cursor: pointer; }
/* رو ردیفِ لیستِ فاکتورها (و حالا کارت‌ها هم)، نگه‌داشتنِ انگشت معنیِ خودش رو داره
(انتخاب گروهی)؛ نباید هم‌زمان منوی نیتیوِ مرورگر (کپی/جست‌وجو در وب/ترجمه) هم باز بشه. */
.inv-row-clickable {
-webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}
@media (hover: hover) {
tr.inv-row-clickable:hover { background: var(--header-bg); } }@media (hover: hover) {
.inv-card.inv-row-clickable:hover { border-color: var(--accent); } }
.inv-card-head { display: flex; align-items: center; gap: 8px; }
/* شماره‌ی فاکتور تو حالت کارتی کامل نمایش داده می‌شه (برخلاف حالت لیستی که
خلاصه می‌شه) — پس به‌جای بریدن با الیپسیس، اگه جا نشد می‌شکنه به خط بعد. */
.inv-card-number {
font-size: 13px; font-weight: 600; color: var(--text);
word-break: break-all;
}
.inv-card-buyer { font-size: 13px; color: var(--text); }
.inv-card-amount { font-size: 14px; font-weight: 700; color: var(--text); }
.inv-card-dates { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11.5px; color: var(--muted); }
.inv-date-label { opacity: .75; }
/* عددِ فاکتور کنارِ تاریخ فقط تو موبایل لازمه (چون اونجا ستونِ «شماره» پنهانه)؛
دسکتاپ ستونِ شماره‌ی خودش رو داره، پس اینجا پیش‌فرض مخفیه. */
.inv-list-number-inline { display: none; }
.inv-card-actions { border-top: 1px solid var(--border); padding-top: 8px; }
/* دکمه‌ی آیکونیِ جست‌وجو فقط در موبایل دیده می‌شه */
.inv-search-toggle { display: none; }
/* چک‌باکس‌های لیست فاکتورها با اندازه‌ی پیش‌فرضِ مرورگر خیلی ریز بودن */
.inv-list-wrap input[type="checkbox"],
.inv-cards-selectall input[type="checkbox"] {
width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; vertical-align: middle;
}
.inv-card-actions .list-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.inv-filter-group { display: flex; flex-direction: row; align-items: center; gap: 6px; }
.inv-filter-label { font-size: 12px; color: var(--muted); font-weight: 500; white-space: nowrap; }
.inv-filter-group select {
padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
font-family: inherit; font-size: 13px; background: var(--surface); color: var(--text);
}
.inv-btn-group { display: flex; flex-wrap: wrap; gap: 6px; }
.inv-filter-btn {
border: 1px solid var(--border); background: var(--surface); color: var(--muted);
border-radius: 20px; padding: 6px 16px; font-size: 12.5px; font-family: inherit; cursor: pointer; font-weight: 500;
}
.inv-filter-btn.active { background: var(--sidebar-active-bg); color: var(--accent-text); border-color: var(--accent-text); font-weight: 600; }
/* ===== صفحه‌ی انبار: انتخابِ چندانبار با چک‌باکس (قرص‌های هم‌خانواده‌ی .inv-chip) ===== */
.inv-wh-pick {
display: flex; align-items: center; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
padding: 1px 1px 6px; margin-bottom: 8px; scrollbar-width: none;
}
.inv-wh-pick::-webkit-scrollbar { display: none; }
.inv-wh-pick .inv-filter-label { flex: 0 0 auto; font-weight: 700; }
.inv-wh-check {
flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
height: 32px; padding: 0 13px; border-radius: 999px;
border: 1px solid var(--border); background: var(--surface); color: var(--muted);
font-family: inherit; font-size: 12.5px; font-weight: 700; white-space: nowrap;
cursor: pointer; user-select: none; transition: background-color .15s, border-color .15s, color .15s;
}
.inv-wh-check input[type="checkbox"] {
width: 15px; height: 15px; margin: 0; flex-shrink: 0; cursor: pointer; accent-color: var(--accent);
}
.inv-wh-check.is-checked {
background: var(--sidebar-active-bg); border-color: var(--accent-text); color: var(--accent-text);
}
.inv-wh-tag {
font-size: 10.5px; font-weight: 700; line-height: 1.6; padding: 0 7px; border-radius: 999px;
background: var(--header-bg); color: var(--muted);
}
.inv-wh-check.is-checked .inv-wh-tag { background: var(--surface); color: var(--accent-text); }
@media (hover: hover) {
.inv-wh-check:hover { border-color: var(--accent); color: var(--text); }
.inv-wh-check.is-checked:hover { color: var(--accent-text); }
}
.inv-more-wh-btn { width: 100%; justify-content: center; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; }
/* ===== صفحه‌ی انبار: منوی کشوییِ مرتب‌سازی (هم‌ارتفاعِ دکمه‌های ۳۰پیکسلیِ نوارِ ابزار) ===== */
.inv-sort-dd { position: relative; flex-shrink: 0; }
.inv-sort-trigger {
height: 30px; display: inline-flex; align-items: center; gap: 5px; padding: 0 9px;
border: 1px solid var(--border); background: var(--surface); color: var(--muted);
border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 700; white-space: nowrap;
}
.inv-sort-trigger .ic { width: 15px; height: 15px; }
.inv-sort-trigger .inv-sort-caret { width: 13px; height: 13px; transition: transform .15s; }
.inv-sort-trigger-label { color: var(--text); }
.inv-sort-dd.open .inv-sort-trigger { border-color: var(--accent); color: var(--accent-text); }
.inv-sort-dd.open .inv-sort-caret { transform: rotate(180deg); }
@media (hover: hover) { .inv-sort-trigger:hover { border-color: var(--accent); color: var(--text); } }
.inv-sort-menu {
display: none; position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 80;
min-width: 200px; padding: 6px; flex-direction: column; gap: 2px;
background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
box-shadow: 0 10px 28px rgba(0,0,0,.16);
}
.inv-sort-dd.open .inv-sort-menu { display: flex; }
.inv-sort-menu-title { font-size: 11px; font-weight: 800; color: var(--muted); padding: 4px 8px 6px; }
.inv-sort-opt {
display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
padding: 8px 10px; border: none; border-radius: 7px; background: transparent; color: var(--text);
font-family: inherit; font-size: 12.5px; font-weight: 500; text-align: right; cursor: pointer;
}
.inv-sort-opt .ic { width: 15px; height: 15px; flex-shrink: 0; }
.inv-sort-opt.is-active { background: var(--sidebar-active-bg); color: var(--accent-text); font-weight: 700; }
@media (hover: hover) { .inv-sort-opt:not(.is-active):hover { background: var(--header-bg); } }
@media (max-width: 700px) {
/* تو موبایل فقط آیکون + فلش، تا نوارِ ابزار تو یک خط جا بشه */
.inv-sort-trigger-label { display: none; }
.inv-sort-trigger { padding: 0 7px; gap: 3px; }
}
#invLowStockThreshold {
width: 60px; border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px;
font-size: 13px; background: var(--surface); color: var(--text); text-align: center;
}
.inv-cat-filter-btn {
border: 1px solid var(--border); background: var(--surface); color: var(--text);
border-radius: 8px; padding: 6px 14px; font-size: 12.5px; font-family: inherit; cursor: pointer;
}
.inv-cat-tree-panel {
border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
max-height: 240px; overflow-y: auto; padding: 6px; margin-top: 6px;
}
.inv-cat-tree-row { padding: 7px 10px; font-size: 13px; border-radius: 7px; cursor: pointer; }@media (hover: hover) {
.inv-cat-tree-row:hover { background: var(--header-bg); } }
.inv-cat-tree-row.active { background: var(--sidebar-active-bg); color: var(--accent-text); font-weight: 700; }
.inv-cat-clear-btn {
border: 1px solid var(--border); background: var(--surface); color: var(--muted);
border-radius: 999px; padding: 6px 12px; font-size: 12px; font-family: inherit; cursor: pointer;
margin-right: 6px;
}@media (hover: hover) {
.inv-cat-clear-btn:hover { color: var(--accent-text); border-color: var(--accent-text); } }
/* ===== صفحه محصولات: کارت دسته‌بندی همیشه‌کنار لیست (مطابق فیگما) ===== */
.prod-page-grid { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; }
.prod-category-card {
background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px;
position: sticky; top: 76px;
}
@media (max-width: 900px) { .prod-page-grid { grid-template-columns: 1fr; } .prod-category-card { position: static; } }
.prod-category-card h4 { font-size: 15px; font-weight: 700; margin: 0; color: var(--text); }
/* سربرگِ کارتِ دسته‌بندی: تیتر + دکمه‌ی «+ دسته‌بندی جدید» کنارِ هم؛ کلیکِ خودِ سربرگ (نه دکمه)
تویِ موبایل جمع/بازش می‌کنه. */
.prod-cat-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.prod-cat-add-btn {
display: flex; align-items: center; gap: 5px; flex-shrink: 0; cursor: pointer; font-family: inherit;
border: 1px solid var(--accent); color: var(--accent); background: transparent; border-radius: 999px;
padding: 5px 12px; font-size: 12px; transition: background .15s, color .15s;
}
.prod-cat-add-btn .ic { width: 14px; height: 14px; flex-shrink: 0; }
/* دو دکمه‌ی سربرگِ کارتِ دسته‌بندی: «جدید» و «ویرایش» */
.prod-cat-head-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.cat-mgmt-locked { font-size: 12px; color: var(--muted); }
@media (hover: hover) { .prod-cat-add-btn:hover { background: var(--accent); color: #fff; } }
/* موبایل: کارتِ دسته‌بندی جمع‌شده شروع می‌شه (تا وقتی دسته‌ها زیادن، کلِ ارتفاعِ صفحه رو نگیره)
و با زدنِ سربرگش باز/بسته می‌شه؛ فاصله‌ی بینِ ردیفِ دسته‌ها هم کمتر می‌شه. دکمه‌ی افزودن روی
موبایل فقط یه دایره‌ی «+» می‌شه (بدونِ برچسبِ متنی) تا جا نگیره. */
@media (max-width: 900px) {
.prod-category-card { padding: 8px 10px; }
.prod-cat-card-head {
cursor: pointer; margin-bottom: 0; padding: 4px 2px;
}
.prod-cat-card-head::after {
content: '▾'; font-size: 11px; color: var(--muted); transition: transform .15s; flex-shrink: 0; margin-right: 8px;
}
.prod-category-card.expanded .prod-cat-card-head::after { transform: rotate(180deg); }
.prod-category-card > div:last-child { display: none; margin-top: 8px; }
.prod-category-card.expanded > div:last-child { display: block; }
.prod-cat-add-btn { width: 30px; height: 30px; padding: 0; border-radius: 50%; justify-content: center; }
.prod-cat-add-label { display: none; }
/* .prod-cat-card-head سه فرزندِ فلکس داره: عنوان، این دکمه‌ها، و فلشِ ::after.
با justify-content:space-between فرزندِ وسط (همین دکمه‌ها) بین اون دو تا
سِنتر می‌افته. margin-inline-start:auto این فضا رو خودش می‌بلعه و دکمه‌ها رو
کنارِ فلش (یعنی سمتِ چپ) می‌چسبونه. */
.prod-cat-head-actions { margin-inline-start: auto; }
.prod-cat-all { padding: 6px 8px; margin-bottom: 4px; }
.prod-cat-group { margin-bottom: 2px; }
.prod-cat-group + .prod-cat-group { margin-top: 2px; }
.prod-cat-parent { padding: 6px 8px; }
.prod-cat-child { padding: 6px 8px; }
}
.prod-cat-all {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 12px; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 13.5px;
color: var(--text); margin-bottom: 12px; transition: background .15s;
}@media (hover: hover) {
.prod-cat-all:hover { background: var(--header-bg); } }
.prod-cat-all.active { background: var(--sidebar-active-bg); color: var(--accent-text); }
.prod-cat-group { margin-bottom: 6px; }
.prod-cat-group + .prod-cat-group { margin-top: 6px; }
.prod-cat-parent {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 9px 10px; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 13.5px;
color: var(--text); transition: background .15s;
}@media (hover: hover) {
.prod-cat-parent:hover { background: var(--header-bg); } }
.prod-cat-parent.active { background: var(--sidebar-active-bg); color: var(--accent-text); }
.prod-cat-parent .prod-cat-name { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-cat-parent .prod-cat-count { color: var(--muted); font-weight: 600; font-size: 12.5px; }
.prod-cat-parent.active .prod-cat-count { color: var(--accent); }
.prod-cat-child {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 8px 10px 8px 10px; margin-right: 14px; margin-left: 10px; border-radius: 8px; cursor: pointer;
font-size: 13px; color: var(--text); transition: background .15s;
}@media (hover: hover) {
.prod-cat-child:hover { background: var(--header-bg); } }
.prod-cat-child.active { background: var(--sidebar-active-bg); color: var(--accent-text); font-weight: 700; }
.prod-cat-child > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-cat-child .prod-cat-count { color: var(--accent2-text); font-weight: 700; font-size: 12.5px; }
.prod-cat-child.active .prod-cat-count { color: var(--accent); }
@media (max-width: 900px) {
.prod-page-grid { grid-template-columns: 1fr; }
.prod-category-card { position: static; }
}
/* ----- تب «دسته‌بندی‌ها»: مدیریت به شکل کارتی (مطابق فیگما) ----- */
.cat-mgmt-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
/* ضربدرِ پاپ‌آپ (.modal-close) absolute گوشه‌ی چپِ بالاست؛ سرتیترِ اولِ پاپ‌آپ‌های
مدیریت (انبارها، دسته‌بندی‌ها و …) دکمه‌ی «+ جدید» رو هم همون سمتِ چپ می‌ذاشت و
دکمه زیرِ ضربدر می‌رفت. این فاصله جای ضربدر رو خالی نگه می‌داره. */
.modal-box > .modal-close + .cat-mgmt-header { padding-left: 38px; }
.cat-mgmt-card {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
padding: 14px 16px; margin-bottom: 10px;
}
.cat-mgmt-card.is-child { margin-right: 26px; background: var(--header-bg); }
.cat-mgmt-name { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--text); }
.cat-mgmt-card.is-child .cat-mgmt-name { font-weight: 500; font-size: 13.5px; }
.cat-mgmt-arrow { color: var(--muted); font-size: 13px; }
.cat-mgmt-count { color: var(--muted); font-weight: 400; font-size: 12.5px; }
.cat-mgmt-folder { font-size: 15px; }
.cat-mgmt-tag { font-size: 11.5px; padding: 2px 9px; border-radius: 20px; font-weight: 600; }
.cat-mgmt-tag-discount { background: #ECFDF5; color: #059669; }
.cat-mgmt-tag-tax { background: #FEF3E2; color: #B45309; }
.cat-mgmt-actions { display: flex; align-items: center; gap: 16px; font-size: 13px; flex-shrink: 0; }
.cat-mgmt-actions button { background: none; border: none; padding: 0; font: inherit; cursor: pointer; }
.cat-mgmt-add-sub { color: var(--accent2-text); }
.cat-mgmt-edit { color: var(--accent-text); }
.cat-mgmt-delete { color: #DC2626; }@media (hover: hover) {
.cat-mgmt-actions button:hover { text-decoration: underline; } }
/* ===== صفحه‌ی کامل ویترین (مطابق Storefront.tsx فیگما) ===== */
.storefront-page-grid { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
.storefront-page-main, .storefront-page-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* ===== چیدمانِ صفحه‌ی تنظیماتِ ویترین =====
بالا: وضعیت ویترین (تمام‌عرض) → آمار (بازدید کنارِ منابع ورودی) → بقیه به‌صورت
ماسونری. از column استفاده شده نه grid، چون کارت‌ها ارتفاعِ متفاوت دارن و این‌طوری
فضای خالیِ بینشون نمی‌مونه. */
.sf-full-row { margin-bottom: 14px; }
.sf-full-row .storefront-card { border: 1px solid var(--accent); }
.sf-masonry { columns: 3; column-gap: 14px; margin-top: 14px; }
.sf-masonry > * {
break-inside: avoid; page-break-inside: avoid; -webkit-column-break-inside: avoid;
display: block; width: 100%; margin: 0 0 14px;
}
@media (max-width: 1180px) { .sf-masonry { columns: 2; } }
@media (max-width: 760px) { .sf-masonry { columns: 1; column-gap: 0; } }
.sf-save-bar {
position: sticky; bottom: 0; z-index: 5; margin-top: 6px; padding: 12px 0;
background: linear-gradient(to top, var(--bg) 55%, transparent);
}
.sf-save-bar .btn-save { width: 100%; padding: 13px; font-size: 14px; }
/* همه‌ی کارت‌های تنظیمات، همون زبانِ بصریِ کارتِ «ویترین پرو» رو می‌گیرن */
.storefront-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px; }
.sf-masonry .storefront-card,
.sf-masonry .storefront-preview-card { transition: border-color .15s ease; }@media (hover: hover) {
.sf-masonry .storefront-card:hover { border-color: var(--accent); } }
.sf-masonry .storefront-card h4 { display: flex; align-items: center; gap: 7px; }
.storefront-card h4 { font-size: 14px; font-weight: 700; margin-bottom: 4px; color: var(--text); }
.sf-status-banner { border-radius: 8px; padding: 12px 14px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; margin-top: 14px; }
.sf-status-banner.on { background: #ECFDF5; border: 1px solid #6EE7B7; color: #065F46; }
.sf-status-banner.off { background: #FEF2F2; border: 1px solid #FCA5A5; color: #991B1B; }
.storefront-card .sf-link-row { display: flex; gap: 8px; margin-top: 10px; min-width: 0; }
.storefront-card .sf-link-row input { flex: 1; direction: ltr; text-align: left; min-width: 0; }
.storefront-preview-card {
background: linear-gradient(135deg, var(--accent-dark), var(--accent)); border-radius: 12px; padding: 20px; color: #fff;
}
.storefront-preview-card h4 { color: #fff; margin-bottom: 4px; }
.storefront-preview-card p { font-size: 12px; color: rgba(255,255,255,0.6); margin: 0 0 14px; }
.storefront-preview-card button {
width: 100%; padding: 10px; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.2);
border-radius: 8px; color: #fff; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600;
}@media (hover: hover) {
.storefront-preview-card button:hover { background: rgba(255,255,255,0.22); } }
@media (max-width: 900px) { .storefront-page-grid { grid-template-columns: 1fr; } }
/* ===== کارت‌های آمار ویترین (بازدید/درآمد/منابع ورودی) ===== */
.storefront-analytics-grid { display: grid; grid-template-columns: 7fr 3fr; gap: 16px; align-items: start; }
.storefront-analytics-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 900px) { .storefront-analytics-grid { grid-template-columns: 1fr; } }
/* ===== دو ستونیِ ۵۰-۵۰ برای فیلدهای «تنظیمات هدر و فوتر» ===== */
.sf-2col-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; align-items: start; margin-top: 8px; }
/* بدون min-width:0، وقتی داخل یه ستونِ گرید یه ردیفِ فلکس (مثل .sf-link-row با یه اینپوتِ
flex:1) باشه، اون اینپوت به اندازه‌ی محتواش عرض می‌خواد و کل ستون رو از ۵۰٪ بیرون می‌زنه —
این باگِ دقیقاً همون چیزی بود که ردیفِ «موقعیت مکانی» رو نامتقارن می‌کرد. */
.sf-2col-grid > * { min-width: 0; }
.sf-2col-grid > .sf-col-span-2 { grid-column: 1 / -1; }
@media (max-width: 640px) { .sf-2col-grid { grid-template-columns: 1fr; } }
.sf-stats-chart-label { font-size: 10px; color: var(--muted); white-space: nowrap; }
.sf-stats-summary-pill { background: var(--total-bg); border-radius: 8px; padding: 8px 14px; font-size: 12px; color: var(--text); }
.sf-stats-summary-pill b { font-weight: 700; }
.sf-traffic-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; gap: 8px; }
.sf-traffic-row:last-child { border-bottom: none; }
.sf-traffic-row-name { flex-shrink: 0; color: var(--text); }
.sf-traffic-row-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--total-bg); overflow: hidden; }
.sf-traffic-row-bar-fill { height: 100%; background: var(--accent); border-radius: 3px; }
.sf-traffic-row-count { flex-shrink: 0; color: var(--muted); font-size: 11.5px; min-width: 24px; text-align: left; }
.sf-mode-btn, .sf-size-btn, .sf-ppr-btn {
padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface);
font-size: 12.5px; font-family: inherit; cursor: pointer; color: var(--muted);
}
.sf-mode-btn.active, .sf-size-btn.active, .sf-ppr-btn.active { border-color: var(--accent2); background: var(--sidebar-active-bg); color: var(--accent2); font-weight: 700; }
.sf-social-row-item {
display: flex; align-items: center; gap: 8px; margin-top: 8px;
}
.sf-social-row-item select {
width: 110px; flex-shrink: 0;
}
.sf-social-row-item input { flex: 1; direction: ltr; text-align: left; }
.sf-social-remove-btn {
flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border);
background: var(--surface); cursor: pointer; color: #DC2626; font-size: 13px;
}
/* ===== جدول انبار — وضعیت/موجودی/عملیات مطابق Inventory.tsx فیگما ===== */
.inv-table th { font-size: 11.5px; }
.inv-status-badge {
display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
border-radius: 20px; font-size: 11px; font-weight: 600;
}
.inv-status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.inv-stock-num { font-size: 14px; font-weight: 700; }
.inv-edit-btn {
padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border);
background: var(--surface); font-size: 11.5px; cursor: pointer; font-family: inherit; color: var(--muted);
}@media (hover: hover) {
.inv-edit-btn:hover { color: var(--accent-text); border-color: var(--accent-text); } }
/* ===== نوار عملیات گروهی (انبار/محصولات) ===== */
.inv-bulk-bar {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
background: var(--header-bg); border: 1px solid var(--border); border-radius: 12px;
padding: 10px 14px; margin-bottom: 14px; font-size: 13px;
}
.inv-bulk-bar input[type="text"] {
width: 140px; border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px;
font-family: inherit; font-size: 13px; background: var(--surface); color: var(--text);
}
.inv-bulk-subgroup {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 6px 10px;
}
.inv-bulk-subgroup-label { font-size: 12px; color: var(--muted); font-weight: 700; }
/* همون فیلدِ .inv-bulk-bar، ولی برای وقتی که این کنترل‌ها داخلِ پاپ‌آپن نه نوارِ درون‌خطی
(مثلِ پاپ‌آپِ تغییرِ قیمتِ گروهیِ محصولات) و عرضِ کامل می‌خوان، نه ۱۴۰px ثابت */
#prodBulkPriceModalBody input[type="text"] {
width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
font-family: inherit; font-size: 13px; background: var(--surface); color: var(--text);
}
#prodBulkPriceModalBody input[type="text"]:focus { border-color: var(--accent-text); }
.bulk-price-hint { font-size: 11.5px; color: var(--muted); margin: 2px 0 0; line-height: 1.6; }
.inv-btn-group-sm .inv-filter-btn { padding: 6px 10px; font-size: 11.5px; }
.price-changed { display: flex; flex-direction: column; gap: 1px; }
.price-changed .price-old-val { font-size: 11px; color: var(--muted); text-decoration: line-through; }
.price-changed .price-new-val { font-weight: 700; color: #2f6b45; }
.price-discount-tag {
display: inline-block; margin-top: 3px; font-size: 10px; font-weight: 700; color: #c0392b;
background: #fdecea; padding: 1px 7px; border-radius: 999px;
}
/* ===== صف بررسی سفارش‌های ویترین ===== */
.review-queue-header {
display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 10px;
}
.review-queue-counter { font-size: 13px; color: var(--muted); font-weight: 700; }
.review-empty-state {
text-align: center; padding: 60px 20px; color: var(--muted); font-size: 15px;
}
.review-card {
border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
overflow: hidden; max-width: 780px; margin: 0 auto;
}
.review-card-head {
background: var(--header-bg); padding: 14px 18px; display: flex; justify-content: space-between;
align-items: center; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--border);
}
.review-card-buyer { font-weight: 700; font-size: 15px; }
.review-card-buyer .rc-sub { font-weight: 400; font-size: 12px; color: var(--muted); margin-top: 2px; }
.review-card-number { font-size: 12px; color: var(--muted); }
.review-buyer-details { padding: 14px 18px; border-bottom: 1px solid var(--border); }
.review-buyer-details .rc-label { font-size: 12px; color: var(--muted); font-weight: 700; margin-bottom: 8px; }
.review-buyer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 16px; }
.review-buyer-grid div { font-size: 12.5px; color: var(--text); }
.review-buyer-grid span { color: var(--muted); margin-left: 4px; }
.review-card-body { padding: 18px; display: flex; gap: 18px; flex-wrap: wrap; }
.review-items-col { flex: 1 1 320px; min-width: 260px; }
.review-items-col table { width: 100%; border-collapse: collapse; font-size: 13px; }
.review-items-col th, .review-items-col td { padding: 7px 6px; border-bottom: 1px solid var(--border); text-align: right; }
.review-items-col th { color: var(--muted); font-weight: 700; font-size: 11.5px; }
.review-receipt-col { flex: 1 1 240px; min-width: 220px; }
.review-receipt-col .rc-label { font-size: 12px; color: var(--muted); font-weight: 700; margin-bottom: 6px; }
.review-receipt-img {
width: 100%; max-height: 280px; object-fit: contain; border: 1px solid var(--border);
border-radius: 10px; background: var(--header-bg); cursor: zoom-in;
}
.review-no-receipt {
display: flex; align-items: center; justify-content: center; height: 160px; color: var(--muted);
border: 1px dashed var(--border); border-radius: 10px; font-size: 13px;
}
.review-total-row {
display: flex; justify-content: space-between; align-items: center; padding: 12px 18px;
background: var(--total-bg, var(--header-bg)); border-top: 1px solid var(--border); font-weight: 700;
}
.review-card-actions {
display: flex; gap: 10px; padding: 14px 18px; flex-wrap: wrap; border-top: 1px solid var(--border);
}
.review-card-actions button { flex: 1 1 auto; min-width: 130px; }
.review-reject-box {
padding: 14px 18px; border-top: 1px solid var(--border); background: var(--header-bg); display: none;
}
.review-reject-box.open { display: block; }
.review-reject-options { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.review-reject-options button {
border: 1px solid var(--border); background: var(--surface); color: var(--text);
border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-family: inherit; cursor: pointer;
}@media (hover: hover) {
.review-reject-options button:hover { color: #c0392b; border-color: #c0392b; } }
.review-reject-custom { display: flex; gap: 8px; flex-wrap: wrap; }
.review-reject-custom input {
flex: 1 1 220px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px;
font-family: inherit; font-size: 13px; background: var(--surface); color: var(--text);
}
/* ===== ریسپانسیو ===== */
@media (max-width: 768px) {
/* این ۱۰ پیکسل از قالبِ قدیمی مونده بود، قبل از اینکه چیدمانِ app-shell ساخته بشه.
کلِ برنامه رو از هر چهار طرف تو می‌برد، برای همین نوارِ بالا به لبه‌ی صفحه
نمی‌رسید و کنارش یه نوارِ باریکِ خالی دیده می‌شد. ضمناً روی فاصله‌ی افقیِ
صفحه سوار می‌شد و فاصله‌ی واقعی رو ۱۰ پیکسل بیشتر از مقدارِ تعیین‌شده می‌کرد.
padding-top دست‌نخورده می‌مونه چون ناحیه‌ی امنِ بالای صفحه از اون میاد. */
body { padding-left: 0; padding-right: 0; padding-bottom: 0; }
.invoice-form-grid { grid-template-columns: 1fr; }
/* این چهار قانون از دورانی مونده بود که این کارت‌ها فلکس بودن. الان گرید‌ن و
text-align:center باعث می‌شد متنِ فیلدها وسط‌چین دیده بشه. فقط برای فرمِ
فاکتور خنثی می‌شن؛ پاپ‌آپ مشاهده و نسخه‌ی چاپی همون رفتار قبلی رو دارن. */
.doc-header { text-align: center; padding: 10px; }
#panelInvoice .doc-header {
text-align: right; padding: 14px 14px;
grid-template-columns: minmax(0, 1fr); gap: 12px;
}
.info-card { flex-direction: column; margin: 6px 6px 0 6px; }
#panelInvoice .info-card { margin: 0; }
.side-tag { writing-mode: horizontal-tb; width: 100%; padding: 6px 0; border-left: none; border-bottom: 1px solid var(--border); }
.main-content, .aux-column { border-left: none; border-bottom: 1px solid var(--border); padding: 8px 10px; }
#panelInvoice .main-content, #panelInvoice .aux-column { border-bottom: none; padding: 0; }
#panelInvoice .info-card-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; }
.items-table-section, .summary-row, .sign-stamp, .action-buttons, .invoice-list-section, .customers-panel { padding-left: 6px; padding-right: 6px; }
.items-table-section { margin-top: 8px; }
.summary-row { grid-template-columns: 1fr; gap: 8px; }
.summary-table { width: 100%; order: 1; }
.notes-box { order: 2; }
.customer-form { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
/* جدول اقلام تو موبایل هم همون چیدمانِ جدولیِ طرح رو نگه می‌داره (قبلاً به کارت
تبدیل می‌شد)؛ فقط ستون‌ها جمع‌تر می‌شن و اگه باز هم جا نشد، خودِ جدول (نه صفحه)
افقی اسکرول می‌خوره. */
#panelInvoice .items-table-section { margin: 0; padding: 12px 10px; }
/* ===== کارتِ خلاصه‌ی فاکتور (فقط موبایل) =====
sticky ست نه fixed: در جریانِ صفحه و درست زیرِ «اقلام فاکتور» می‌شینه،
ولی تا وقتی کارتِ اقلام تو دیده‌رسه به کفِ صفحه می‌چسبه — پس «جمع کل
اقلام» همیشه دیده می‌شه. به‌محضِ اینکه از اقلام رد شدی، موقعیتِ طبیعیِ
خودش می‌رسه و با محتوا به بالا اسکرول می‌شه و مهر و امضا و توضیحات
زیرش پیدا می‌شن. با fixed این رفتار ممکن نبود، چون fixed هیچ‌وقت از
کف صفحه کنده نمی‌شه. */
/* کارتِ «مهر و امضا» تو فرم فقط تزئینیه (مهر از مشخصاتِ کسب‌وکار خونده
می‌شه و امضا هم فقط تو خروجیِ چاپی معنی داره)، پس تو موبایل که فضا کمه
نمایش داده نمی‌شه. تو DOM می‌مونه چون renderStamp بهش وابسته‌ست. */
#panelInvoice .sign-stamp { display: none; }
/* بدونِ اسکرولِ افقی: همه‌ی ستون‌ها باید تو عرضِ صفحه جا بشن. برای همین ستون‌های
عددی تا حدِ محتوای واقعی‌شون کوچیک شدن، فاصله‌ها کم شد و فونت ریزتر — و ستونِ
شرح هرچی موند رو می‌گیره و اسمِ بلند رو می‌بره. */
#panelInvoice .table-wrap { overflow-x: visible; }
#panelInvoice #itemsTable { min-width: 0; }
#panelInvoice #itemsTable thead tr,
#panelInvoice #itemsTable tbody tr {
grid-template-columns: minmax(0, 1fr) 30px 78px 30px 88px;
column-gap: 2px;
}
/* فاصله‌ی خطِ جداکننده تا محتوای ردیف = ۳px. پدینگِ عمودیِ خودِ ورودی‌ها صفره
(و داخلِ کادرها ۱px) تا این ۳px واقعاً ۳px بمونه، نه ۳ + پدینگِ ورودی. */
/* جدول روی موبایل کاملاً از حالتِ جدولی درمیاد (ردیف‌ها از قبل گرید بودن)؛
این‌طوری گردیِ گوشه‌ها و مارجینِ سربرگ قابلِ اتکا کار می‌کنه. */
/* tfoot عمداً اینجا نیست: پایین‌تر همیشه display:none می‌گیره و اگه اینجا
block می‌شد، همین قانونِ دیرتر اون رو باطل می‌کرد و ردیفِ مجموع دوباره
ظاهر می‌شد. */
#panelInvoice #itemsTable, #panelInvoice #itemsTable thead,
#panelInvoice #itemsTable tbody { display: block; }
/* سربرگ هم‌شکلِ کارتِ نوارِ انتخاب: کارتِ گردِ ته‌رنگِ کسب‌وکار */
#panelInvoice #itemsTable thead tr {
background: var(--sidebar-active-bg); border-bottom: none;
border-radius: 10px; margin-bottom: 6px;
}
#panelInvoice #itemsTable thead th { font-size: 12px; font-weight: 800; padding: 7px 3px; line-height: 1.3; border-radius: 0; }
#panelInvoice #itemsTable tbody td { font-size: 13.5px; padding: 3px 1px; }
#panelInvoice #itemsTable tbody td textarea,
#panelInvoice #itemsTable tbody td input { font-size: 13.5px; padding: 0; line-height: 1.3; }
/* ستونِ دکمه‌ی حذفِ ردیف روی موبایل نمایش داده نمی‌شه: همون ۱۶ پیکسل بود که
«مبلغ کل» رو از لبه‌ی کارت دور نگه می‌داشت و عددهای بزرگ رو می‌شکست.
حذفِ ردیف حالا با نگه‌داشتنِ انگشت + نوارِ بالای جدول انجام می‌شه. */
#panelInvoice #itemsTable thead th:nth-child(8),
#panelInvoice #itemsTable tbody td:last-child { display: none; }
/* «مبلغ کل» تا ۴ پیکسلیِ لبه‌ی کارت میاد و هیچ‌وقت نمی‌شکنه؛ عددهای خیلی بزرگ
به‌جای رفتن به خط بعد، فونتشون کوچیک می‌شه (کلاس‌ها از recalculateTotal). */
#panelInvoice #itemsTable tbody td[data-label="مجموع"] {
font-size: 13.5px; padding-left: 4px; padding-right: 0;
white-space: nowrap; overflow: hidden;
}
#panelInvoice #itemsTable tbody td[data-label="مجموع"].is-long { font-size: 11px; }
#panelInvoice #itemsTable tbody td[data-label="مجموع"].is-xlong { font-size: 8.5px; }
/* «مبلغ کل» چپ‌چین؛ «فی» و «تخفیف» مثل «تعداد» وسط‌چین چون هر سه داخل کادرن. */
#panelInvoice #itemsTable thead th:nth-child(7),
#panelInvoice #itemsTable tbody td[data-label="مجموع"] { text-align: left; }
#panelInvoice #itemsTable thead th:nth-child(4),
#panelInvoice #itemsTable thead th:nth-child(5),
#panelInvoice #itemsTable tbody td[data-label="قیمت"],
#panelInvoice #itemsTable tbody td[data-label="تخفیف"],
#panelInvoice #itemsTable tbody td[data-label="قیمت"] input,
#panelInvoice #itemsTable tbody td[data-label="تخفیف"] input { text-align: center; }
/* «تعداد»، «فی» و «تخفیف» کادرِ گردِ مشخص می‌گیرن تا زدن روشون راحت باشه. */
#panelInvoice #itemsTable thead th:nth-child(6) { text-align: center; }
#panelInvoice #itemsTable tbody td[data-label="تعداد"],
#panelInvoice #itemsTable tbody td[data-label="قیمت"],
#panelInvoice #itemsTable tbody td[data-label="تخفیف"] { overflow: visible; }
#panelInvoice #itemsTable tbody td[data-label="تعداد"] input,
#panelInvoice #itemsTable tbody td[data-label="قیمت"] input,
#panelInvoice #itemsTable tbody td[data-label="تخفیف"] input {
border: 1px solid var(--border); border-radius: 6px;
background: var(--header-bg); padding: 1px 2px; font-weight: 700;
}
#panelInvoice #itemsTable tbody td[data-label="تعداد"] input,
#panelInvoice #itemsTable tbody td[data-label="قیمت"] input,
#panelInvoice #itemsTable tbody td[data-label="تخفیف"] input { text-align: center; }
#panelInvoice #itemsTable tbody td[data-label="تعداد"] input:focus,
#panelInvoice #itemsTable tbody td[data-label="قیمت"] input:focus,
#panelInvoice #itemsTable tbody td[data-label="تخفیف"] input:focus {
border-color: var(--accent-text); background: transparent;
}
/* دکمه‌های −/+ تعداد روی موبایل ۱۰۲ پیکسل لازم داشتن (۲۴+۴۶+۲۴ و فاصله‌ها) و از
ستونشون می‌زدن بیرون. اونجا صفحه‌کلید عددی خودش باز می‌شه، پس تایپ‌کردن از
زدنِ دکمه‌های ۲۴پیکسلی راحت‌تره. */
#panelInvoice #itemsTable .qty-step-btn { display: none; }
#panelInvoice #itemsTable .qty-cell { gap: 0; }
#panelInvoice #itemsTable .qty-cell input { width: 100%; }
.data-table, .data-table thead, .data-table tbody, .data-table tr, .data-table th, .data-table td { display: block; width: 100% !important; }
.data-table thead { display: none; }
.data-table tbody tr { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; }
.data-table tbody td { display: flex; justify-content: space-between; border: none; border-bottom: 1px solid var(--border); text-align: right; }
.data-table tbody td:last-child { border-bottom: none; }
.data-table tbody td::before { content: attr(data-label); font-weight: 700; color: var(--muted); }
/* لیست فاکتورها در موبایل «لیست» می‌مونه، نه کارت، ولی خیلی خلوت‌تر از قبل:
خط اول خریدار + مبلغ، خط دوم تاریخ فاکتور + وضعیت. شماره، تاریخ چاپ، چک‌باکس
و دکمه‌های عملیات (که دسکتاپ بهشون نیاز داره) اینجا کلاً پنهانن — انتخاب گروهی
با نگه‌داشتن انگشت روی ردیف انجام می‌شه (نه چک‌باکس)، لمس ردیف پاپ‌آپ
فاکتور/بررسیِ سفارش رو باز می‌کنه (نه دکمه‌ی جدا)، و دسکتاپ کاملاً دست‌نخورده
می‌مونه چون همه‌ی این‌ها فقط تو همین مدیاکوئری‌ان.
این قانونِ عمومیِ بالا (تبدیل جدول به کارت) رو فقط برای همین یک جدول خنثی می‌کنه. */
/* این قوانین به نقشِ سلول (data-cell) بسته‌ن، نه به نامِ ستون — تا هر لیستی که
کلاسِ .inv-list-wrap داشته باشه (فروش، خرید، و لیست‌های بعدی) دقیقاً همین
چیدمان رو بگیره، حتی وقتی عنوانِ ستون‌هاش فرق داره (خریدار / تامین‌کننده). */
.inv-list-wrap .data-table tbody tr {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"party amount"
"created badge";
align-items: center;
gap: 3px 8px;
padding: 10px 12px;
margin-bottom: 6px;
}
.inv-list-wrap .data-table tbody td {
display: block; border: none; padding: 0; width: auto !important;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.inv-list-wrap .data-table tbody td::before { content: none; }
.inv-list-wrap .data-table tbody td[data-cell="select"],
.inv-list-wrap .data-table tbody td[data-cell="number"],
.inv-list-wrap .data-table tbody td[data-cell="aux"],
.inv-list-wrap .data-table tbody td[data-cell="actions"] { display: none; }
.inv-list-wrap .data-table tbody td[data-cell="party"] { grid-area: party; font-weight: 600; font-size: 13px; }
.inv-list-wrap .data-table tbody td[data-cell="amount"] { grid-area: amount; font-weight: 700; font-size: 13px; text-align: left; }
.inv-list-wrap .data-table tbody td[data-cell="created"] { grid-area: created; font-size: 11.5px; color: var(--muted); }
/* همون فونت/وزنِ تاریخ رو ارث می‌بره چون فونت/رنگِ جدا روش ست نشده */
.inv-list-wrap .data-table tbody td[data-cell="created"] .inv-list-number-inline {
display: inline; margin-right: 14px; opacity: .8;
}
.inv-list-wrap .data-table tbody td[data-cell="badge"] { grid-area: badge; text-align: left; }
.inv-list-wrap .data-table tbody td[data-cell="badge"] .type-badge { font-size: 10.5px; padding: 2px 6px; }
/* بکگراند رنگیِ فاکتورهای ویترین اینجا اضافه‌ست: برچسبِ وضعیت (بالا) از قبل
می‌گه ویترینه و پرداخت‌شده یا نه — فقط تو موبایل خنثی می‌شه، دسکتاپ دست‌نخورده می‌مونه */
.inv-list-wrap .data-table tbody tr.invoice-row-online td { background: transparent; }
.inv-list-wrap .data-table tbody tr.invoice-row-online td:first-child { border-right: none; }
/* لیستِ محصولات در موبایل، هم‌الگوی لیستِ فاکتورها: ردیفِ فشرده‌ی دوسطری با
عکس کنارش. چک‌باکس دیگه اینجا نیست — انتخاب با نگه‌داشتنِ انگشت انجام می‌شه
(مثلِ فاکتورها)؛ دکمه‌های ویرایش/حذف برخلافِ فاکتورها هنوز موندن (محصولات
براشون کارتِ جزئیاتِ سریع‌الوصولی مثلِ نمای فاکتور نداره). */
.prod-list-wrap .data-table tbody tr {
display: grid;
grid-template-columns: 46px minmax(0, 1fr) auto;
grid-template-areas:
"thumb name price"
"thumb category actions";
align-items: center;
gap: 4px 10px;
padding: 8px 10px;
margin-bottom: 6px;
}
.prod-list-wrap .data-table tbody td {
display: block; border: none; padding: 0; width: auto !important;
}
.prod-list-wrap .data-table tbody td::before { content: none; }
.prod-list-wrap .data-table tbody td[data-cell="select"] { display: none; }
/* عکس با height:100% به‌جای عددِ ثابت — دقیقاً هم‌ارتفاعِ دوسطرِ متن می‌مونه،
پس بزرگ‌تر از قبل هست ولی هیچ‌وقت باعثِ تغییرِ ارتفاعِ ردیف نمی‌شه */
.prod-list-wrap .data-table tbody td[data-cell="thumb"] { grid-area: thumb; align-self: stretch; }
.prod-list-wrap .data-table tbody td[data-cell="thumb"] img,
.prod-list-wrap .data-table tbody td[data-cell="thumb"] div {
width: auto !important; height: 100% !important; aspect-ratio: 1 / 1; object-fit: cover;
}
.prod-list-wrap .data-table tbody td[data-cell="name"] {
grid-area: name; font-weight: 600; font-size: 13px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prod-list-wrap .data-table tbody td[data-cell="price"] {
grid-area: price; font-weight: 700; font-size: 13px; text-align: left; white-space: nowrap;
}
.prod-list-wrap .data-table tbody td[data-cell="category"] {
grid-area: category; font-size: 11.5px; color: var(--muted);
}
.prod-list-wrap .data-table tbody td[data-cell="actions"] { grid-area: actions; }
.prod-list-wrap .data-table tbody td[data-cell="actions"] .list-actions { justify-content: flex-end; }
.prod-list-wrap .data-table tbody tr.is-selected { background: var(--sidebar-active-bg); }
/* دکمه‌های ویرایش/حذف مربع بمونن — قانونِ عمومیِ min-height:40px (برای لمسِ راحت‌تر)
روی .btn-delete هم اثر می‌ذاشت و فقط اون رو کشیده/مستطیلی می‌کرد، نه ویرایش رو */
.prod-list-wrap .icon-btn, #productsListWrap .ent-card .icon-btn {
width: 30px !important; height: 30px !important; min-height: 30px !important;
}
/* لیستِ انبار در موبایل: چیدمانِ گریدِ عمومیِ بالا (thumb/name/price/category/actions)
برای جدولِ محصولاته و ستون‌های «وضعیت»/«موجودی» رو نمی‌شناسه — بدونِ این
بازنویسی، اون دو سلول جایگاهِ گریدی نداشتن و چیدمان به‌هم می‌ریخت. اینجا با
یک ستونِ اضافه، وضعیت و موجودی رو کنارِ هم تو ردیفِ دوم جا می‌ده. */
#inventoryListWrap.prod-list-wrap .data-table tbody tr {
grid-template-columns: 46px minmax(0, 1fr) auto auto;
grid-template-areas:
"thumb name price price"
"thumb category status stock";
}
#inventoryListWrap.prod-list-wrap .data-table tbody td[data-cell="status"] {
grid-area: status; text-align: left;
}
#inventoryListWrap.prod-list-wrap .data-table tbody td[data-cell="stock"] {
grid-area: stock; text-align: left; white-space: nowrap;
}
/* لیستِ کاربران در موبایل: همون چیدمانِ دوسطریِ محصولات (thumb/name/price/category/actions)
— آواتار جای عکس، ماندِ حساب جای قیمت، نقش جای دسته‌بندی. تلفن و آخرین خرید فقط دسکتاپ. */
#customersListWrap.prod-list-wrap .data-table tbody td[data-cell="phone"],
#customersListWrap.prod-list-wrap .data-table tbody td[data-cell="last"] { display: none; }
#customersListWrap.prod-list-wrap .data-table tbody td[data-cell="thumb"] {
display: flex; align-items: center; justify-content: center;
}
#customersListWrap.prod-list-wrap .data-table tbody td[data-cell="thumb"] .cust-list-avatar {
width: 40px !important; height: 40px !important; font-size: 15px;
}
#customersListWrap.prod-list-wrap .data-table tbody td[data-cell="category"] {
display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-width: 0;
}
#customersListWrap.prod-list-wrap .data-table tbody tr.cust-row-clickable.is-selected { background: var(--sidebar-active-bg); }
/* گالری در حالتِ لیستیِ موبایل: همون چیدمانِ دوسطریِ محصولات */
#galleryListWrap.prod-list-wrap .data-table tbody tr {
grid-template-columns: 60px minmax(0, 1fr) auto;
align-items: center;
}
#galleryListWrap.prod-list-wrap .data-table tbody td[data-cell="thumb"] .gal-list-thumb {
width: 60px !important; height: 60px !important; aspect-ratio: 1 / 1;
}
#galleryListWrap.prod-list-wrap .data-table tbody td[data-cell="name"] { overflow: hidden; }
#galleryListWrap.prod-list-wrap .gal-name, #galleryListWrap.prod-list-wrap .gal-sub { max-width: 100%; }
#galleryListWrap.prod-list-wrap .data-table tbody td[data-cell="category"] .gal-flags { flex-wrap: nowrap; overflow: hidden; }
#galleryListWrap.prod-list-wrap .data-table tbody td[data-cell="category"] .gal-sub { display: none; }
#galleryListWrap.prod-list-wrap .data-table tbody tr.gal-row-clickable.is-selected { background: var(--sidebar-active-bg); }
/* نوارِ ابزارِ گالری آیکونِ بیشتری داره؛ بدونِ متنِ مرتب‌سازی تو یک خط جا می‌شه */
#galleryToolbarActions { gap: 6px; }
/* حالتِ کارتیِ محصولات در موبایل: چک‌باکس مثلِ لیست پنهانه، انتخاب با
نگه‌داشتنِ انگشت انجام می‌شه */
#productsListWrap .ent-card-check,
#inventoryListWrap .ent-card-check,
#customersListWrap .ent-card-check,
#galleryListWrap .ent-card-check { display: none; }
/* حالت کارتی در موبایل: دو کارت کنار هم، خیلی خلوت‌تر از دسکتاپ —
چک‌باکس، دکمه‌های عملیات و تاریخ چاپ پنهانن (چیزی از کد حذف نشده، فقط اینجا
display:none)؛ انتخاب گروهی با نگه‌داشتن انگشت جای چک‌باکس رو گرفته (همون
منطقِ حالت لیستی)، و زدنِ کارت پاپ‌آپِ فاکتور/بررسیِ سفارش رو باز می‌کنه. */
.inv-card-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.inv-cards-selectall { display: none; }
.inv-card { padding: 9px 10px; gap: 5px; }
.inv-card-head .inv-row-check { display: none; }
.inv-card-number { font-size: 11.5px; }
.inv-card-buyer { font-size: 12px; }
.inv-card-amount { font-size: 12.5px; }
.inv-card-dates { font-size: 10.5px; gap: 6px; }
.inv-card-badge .type-badge { font-size: 9.5px; padding: 2px 6px; }
.inv-card-print-date { display: none; }
.inv-card-actions { display: none; }
/* مبلغ، تاریخِ ایجاد و شماره‌ی فاکتور چپ‌چین باشن (خریدار و وضعیت راست‌چین می‌مونن) */
.inv-card-amount { text-align: left; }
.inv-card-dates { justify-content: flex-end; }
.inv-card-head { justify-content: flex-end; }
.inv-card-number { text-align: left; }
/* کنسول جست‌وجو در موبایل جمع‌شده‌ست: فقط آیکون. با زدن آیکون باز می‌شه و
تمام عرض ردیف رو می‌گیره تا تایپ راحت باشه. */
.inv-search-toggle {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; flex-shrink: 0;
border: 1px solid var(--border); background: var(--surface); color: var(--muted);
border-radius: 8px; cursor: pointer; padding: 0;
}
.inv-filter-bar.search-open .inv-search-toggle { background: var(--accent); border-color: var(--accent); color: #fff; }
/* هم کادرِ جست‌وجوی لیستِ فروش، هم لیستِ خرید — رفتارشون یکیه */
.inv-filter-bar > input[type="text"]#invoiceSearchInput,
.inv-filter-bar > input[type="text"]#piSearchInput,
.inv-filter-bar > input[type="text"]#prodSearchInput,
.inv-filter-bar > input[type="text"]#invSearchInput,
.inv-filter-bar > input[type="text"]#custSearchInput,
.inv-filter-bar > input[type="text"]#gallerySearchInput { display: none; }
.inv-filter-bar.search-open > input[type="text"]#invoiceSearchInput,
.inv-filter-bar.search-open > input[type="text"]#piSearchInput,
.inv-filter-bar.search-open > input[type="text"]#prodSearchInput,
.inv-filter-bar.search-open > input[type="text"]#invSearchInput,
.inv-filter-bar.search-open > input[type="text"]#custSearchInput,
.inv-filter-bar.search-open > input[type="text"]#gallerySearchInput {
display: block; width: 100% !important; order: 5; flex-basis: 100%;
}
}
@media print {
:root, html[data-theme="dark"] {
--border: #e2e2e2; --page-bg: #eef0f2; --header-bg: #f7f7f7; --total-bg: #fdeeec;
--text: #262626; --muted: #6b6b6b; --surface: #ffffff;
}
body { background: white; padding: 0; margin: 0; }
.shell-main > div:not(.shell-topbar):not(.modal-overlay) { zoom: 1 !important; }
.main-tabs, .action-buttons, .delete-row-btn, .btn-add, .btn-clear, .invoice-list-section, .no-print, .account-sidebar, .back-to-dashboard { display: none !important; }
/* مشاهده‌ی فاکتور حالا یه صفحه‌ی معمولیه (نه پاپ‌آپ). موقعِ چاپ باید فقط همون
صفحه دیده بشه: پاپ‌آپ‌ها و بقیه‌ی خواهرهاش (داشبورد، تب‌ها، توپ‌بار) پنهان
می‌شن و خودش تمامِ عرض رو می‌گیره. */
.modal-overlay { display: none !important; }
html.is-printing-invoice body > *:not(.shell-main) { display: none !important; }
html.is-printing-invoice .shell-topbar { display: none !important; }
html.is-printing-invoice .shell-main { padding: 0 !important; }
html.is-printing-invoice .shell-main > div:not(#invoiceViewPageView) { display: none !important; }
html.is-printing-invoice #invoiceViewPageView {
display: block !important; padding: 0 !important; max-width: 100% !important;
overflow: visible !important;
}
.invoice-container { box-shadow: none; border: none; margin: 0; width: 100%; max-width: 100%; }
th, td { border: 1px solid #000; }
input, textarea, select { border: none !important; background: transparent; color: black; }
.field-line input, .summary-table .s-value input { border-bottom: none !important; }
.logo-upload:not(.has-logo) { display: none; }
.logo-upload { border: none; }
.stamp-box.uploadable { cursor: default; }
.info-card, .items-table-section, .summary-table, .notes-box, .sign-stamp { break-inside: avoid; page-break-inside: avoid; }
@page { size: A4; margin: 1.5cm; }
}
.ship-label {
width: 100mm; min-height: 60mm; box-sizing: border-box; padding: 10mm;
border: 1px dashed #999; margin: 6mm auto; page-break-after: always;
}
.ship-label-box { margin-bottom: 10mm; }
.ship-label-sender { border-top: 1px solid #ccc; padding-top: 6mm; }
.ship-label-title { font-size: 11px; color: #666; margin-bottom: 4px; }
.ship-label-name { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.ship-label-line { font-size: 13px; margin-bottom: 6px; }
.ship-label-row { display: flex; justify-content: space-between; font-size: 12px; color: #333; }
.ship-label-order-no { text-align: left; font-size: 11px; color: #999; direction: ltr; }
@media print { .ship-label:last-child { page-break-after: auto; } }
/* ===== جدولِ اعلان‌ها و پیامک‌ها (رویداد × کانال) ===== */
.notif-matrix { width: 100%; border-collapse: collapse; font-size: 13px; }
.notif-matrix th,
.notif-matrix td { padding: 9px 6px; border-bottom: 1px solid var(--border); }
.notif-matrix tbody tr:last-child td { border-bottom: 0; }
.notif-matrix th {
font-size: 12px; font-weight: 700; color: var(--muted);
text-align: center; white-space: nowrap;
}
.notif-matrix th.nm-label { text-align: right; }
.notif-matrix td.nm-label { text-align: right; color: var(--text); line-height: 1.5; }
.notif-matrix .nm-ch { text-align: center; width: 62px; }
.notif-matrix input[type="checkbox"] { margin: 0; cursor: pointer; }
/* اعتبار که تموم شده باشه تیک‌ها کم‌رنگ می‌شن ولی قفل نمی‌شن — کاربر باید بتونه
از قبل تنظیم کنه تا بعدِ شارژ خودکار کار کنه. */
.notif-matrix .nm-dim { opacity: .45; }
.notif-matrix .nm-locked { color: var(--accent-text); font-weight: 700; }
.notif-matrix .nm-na { color: var(--muted); opacity: .6; }
.notif-matrix .nm-note {
display: block; font-size: 11px; color: var(--muted); margin-top: 2px;
}
@media (max-width: 560px) {
.notif-matrix { font-size: 12.5px; }
.notif-matrix th, .notif-matrix td { padding: 8px 3px; }
.notif-matrix .nm-ch { width: 48px; }
}
/* ===== مرحله‌ی ۱: اصلاحاتِ مخصوص موبایل ===== */
/* ===== ناحیه‌های امن (ناچ، جزیره‌ی پویا، نوار خانه) =====
با viewport-fit=cover محتوا تا لبه‌های فیزیکیِ صفحه کشیده می‌شه، پس فاصله‌ها
دیگه خودکار نیستن و باید دستی گذاشته بشن — وگرنه دکمه‌های بالای صفحه زیر ناچ
و دکمه‌های پایین زیر نوار خانه می‌رن. عناصرِ position:fixed از padding بدنه
ارث نمی‌برن، پس هرکدوم باید جدا محاسبه بشن. */
@media (max-width: 900px) {
/* فاصله‌ی ناچ عمداً روی body گذاشته نمی‌شه.
تجربه نشون داد وقتی body پدینگِ بالا می‌گیره، نوارِ پایین که position:fixed و
bottom:0 است دقیقاً به همون اندازه از کفِ صفحه فاصله می‌گیره — روی آیفون ۱۵
بیشتر و روی آیفون ۷ کمتر، چون ارتفاعِ نوارِ وضعیت‌شون فرق داره.
به‌جاش هر ناحیه‌ای که واقعاً بالای صفحه‌ست خودش فاصله‌اش رو می‌گیره:
نوارِ بالا پایین‌تر، و پوشش‌ها و کشو که قبلاً تنظیم شده‌ن. */
/* نوارِ ساعت و باتری با رنگِ کسب‌وکار پر می‌شه — همون کاری که اپ‌های نیتیو می‌کنن.
رنگش در JS طوری تیره می‌شه که متنِ سفیدِ نوارِ وضعیت همیشه خونا بمونه.
z-index بالا لازمه چون این نوار باید روی پاپ‌آپ‌ها هم دیده بشه، نه زیرشون. */
body::before {
content: '';
position: fixed;
top: 0; left: 0; right: 0;
height: env(safe-area-inset-top, 0px);
background: var(--status-bar-bg, #1A2163);
z-index: 2000;
pointer-events: none;
}
/* پوشش‌های تمام‌صفحه inset:0 دارن، یعنی دقیقاً روی ناچ می‌افتن */
.modal-overlay, .sidebar-page-overlay {
padding-top: calc(16px + env(safe-area-inset-top, 0px));
padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
/* کشوی کناری تمام‌قد است و دکمه‌ی بستنش با top مطلق جای‌گذاری شده */
.account-sidebar { padding-top: env(safe-area-inset-top, 0px); }
.sidebar-mobile-close { top: calc(12px + env(safe-area-inset-top, 0px)); }
/* شناورهای پایین صفحه نباید زیر نوار خانه برن */
.sf-save-toast { bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
/* دکمه‌ی بستنِ نمایشگرِ تصویر، بالا-چپِ ثابت */
#imageLightboxOverlay .modal-close { top: calc(20px + env(safe-area-inset-top, 0px)); }
/* وقتی نوار پایین هست، محتوا باید از رویش رد بشه نه زیرش */
body.has-mobile-shortcut .shell-main {
padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
}
}
@media (max-width: 900px) {
/* قانونِ ۱۶px برای جلوگیری از زوم، از قبل بالاتر توی همین فایل وجود داشت؛
اینجا تکرار نمی‌شه. */
.account-sidebar { padding-bottom: env(safe-area-inset-bottom, 0px); }
}
/* ===== مرحله‌ی ۲: بازخورد لمسی =====
تا الان ۷۴ قانون :hover داشتیم و صفر قانون :active. هاور روی گوشی وجود نداره،
پس کاربر دکمه رو می‌زد و تا رسیدن جواب سرور هیچ نشونه‌ای نمی‌دید. توی اپ نیتیو
هر لمس بلافاصله یه واکنش داره؛ این بلوک همون رو اضافه می‌کنه.
دو خانواده داریم: سطح‌های فشردنی (کمی کوچیک می‌شن) و ردیف‌های فشردنی
(پس‌زمینه‌شون تیره می‌شه). ردیف‌های جدول عمداً scale نمی‌گیرن چون transform
روی در همه‌ی مرورگرها درست رندر نمی‌شه. */
.btn-save, .btn-ghost, .btn-clear, .btn-delete, .inv-add-btn,
.dash-card, .dash-stat-card, .dash-quick-grid button, .dash-range-btn,
.ent-card, .inv-card, .biz-card, .entity-chip, .cal-filter, .color-swatch,
.main-tabs button, .settings-tabs button, .entity-seg button,
.mobile-shortcut-bar button, .account-sub-nav button, .main-nav button {
transition: transform .09s ease, opacity .09s ease, background-color .12s ease;
}
.btn-save:active, .btn-ghost:active, .btn-clear:active, .btn-delete:active,
.inv-add-btn:active, .dash-quick-grid button:active, .dash-range-btn:active,
.entity-chip:active, .cal-filter:active, .color-swatch:active, .biz-card-edit:active,
.main-tabs button:active, .settings-tabs button:active, .entity-seg button:active {
transform: scale(.96);
opacity: .9;
}
/* کارت‌ها بزرگ‌ترن، پس فشردگی‌شون باید ظریف‌تر باشه وگرنه جهشی به‌نظر می‌رسه */
.dash-card:active, .dash-stat-card:active, .ent-card:active,
.inv-card.inv-row-clickable:active, .biz-card:active {
transform: scale(.985);
}
/* ردیف‌ها و آیتم‌های فهرست: به‌جای فشردگی، تیره‌شدنِ پس‌زمینه */
.bulk-add-item:active, .cat-tree-row:active, .settings-row:active,
.dash-mini-table tbody tr:active, .cal-cell:active, .dash-panel-link:active,
.notif-matrix tbody tr:active {
background: var(--pastel-hover, rgba(0, 0, 0, .05));
}
/* نوار پایین و ناوبری: فشردگی روی خودِ نوار بد به‌نظر می‌رسه، فقط محتوا کم‌رنگ می‌شه */
.mobile-shortcut-bar button:active, .main-nav button:active,
.account-sub-nav button:active {
opacity: .6;
}
/* کسانی که «کاهش حرکت» رو در سیستم‌عامل روشن کرده‌ن نباید انیمیشن ببینن */
@media (prefers-reduced-motion: reduce) {
.btn-save, .btn-ghost, .btn-clear, .btn-delete, .inv-add-btn,
.dash-card, .dash-stat-card, .dash-quick-grid button, .dash-range-btn,
.ent-card, .inv-card, .biz-card, .entity-chip, .cal-filter, .color-swatch,
.main-tabs button, .settings-tabs button, .entity-seg button,
.mobile-shortcut-bar button, .account-sub-nav button, .main-nav button {
transition: none;
}
.btn-save:active, .btn-ghost:active, .btn-clear:active, .btn-delete:active,
.inv-add-btn:active, .dash-card:active, .dash-stat-card:active, .ent-card:active,
.inv-card.inv-row-clickable:active, .biz-card:active {
transform: none;
}
}
/* حداقلِ ناحیه‌ی لمس روی موبایل. زیر ۴۴ پیکسل، زدنِ درست دکمه سخت می‌شه. */
@media (max-width: 900px) {
.mobile-shortcut-bar button { min-height: 45px; }
.main-tabs button, .settings-tabs button, .entity-seg button,
.btn-save, .btn-ghost, .btn-clear, .btn-delete { min-height: 40px; }
/* دکمه‌های ریزِ آیکونیِ نوار عملیاتِ لیست فاکتورها (حذف/چاپ/تایید گروهی) از این قاعده
مستثنی‌ان: قرارِ کنارِ دکمه‌ی جست‌وجو و دکمه‌ی لیست/کارتی (هر دو ۳۰-۳۴ پیکسل) باشن،
نه اینکه با قانونِ عمومیِ بالا کش بیان و بلندتر از همسایه‌هاشون بشن. */
.inv-toolbar-actions .icon-btn.btn-save,
.inv-toolbar-actions .icon-btn.btn-ghost,
.inv-toolbar-actions .icon-btn.btn-delete { min-height: 30px; }
}
/* ===== پاپ‌آپ‌ها روی موبایل =====
پدینگِ ۲۸ پیکسلی برای دسکتاپ نوشته شده؛ روی گوشی از هر طرف ۲۸ پیکسل به‌علاوه‌ی
۱۶ پیکسلِ خودِ پوشش، بخش بزرگی از عرضِ صفحه رو می‌خوره و فرم‌های چندفیلدی
(مثل فرمِ کسب‌وکار) خیلی تنگ می‌شن. */
@media (max-width: 900px) {
/* max-height نباید vh باشه: vh کلِ صفحه رو می‌سنجه، ولی ظرفِ واقعیِ این کارت،
پوششیه که ناحیه‌ی امنِ بالا و پایین ازش کم شده. روی آیفونِ ناچ‌دار اختلافش
حدود ۱۲۵ پیکسله، و چون کارت وسط‌چینه، مقدارِ اضافه از *هر دو طرف* بیرون می‌زد:
تیتر و دکمه‌ی بستن زیرِ نوارِ ساعت می‌رفت و دکمه‌های ذخیره از پایین بیرون می‌افتاد.
۱۰۰٪ نسبت به همون ظرفِ پدینگ‌دار حساب می‌شه، پس هیچ‌وقت بیرون نمی‌زنه. */
.modal-box { padding: 16px; max-height: 100%; }
#productCardModalOverlay .cust-profile-card { padding: 12px; }
.modal-box > .cat-mgmt-header { flex-direction: column; align-items: stretch; }
.modal-box > .cat-mgmt-header > button { width: 100%; }
/* وقتی کیبورد باز می‌شه، window.visualViewport (نه window.innerHeight) کوچیک می‌شه؛
app.js این دو مقدار رو تو --vv-height/--vv-top می‌ذاره (نگاه کن به
syncKeyboardViewportVars). با استفاده از همین‌ها به‌جایِ کلِ viewport، خودِ
پاپ‌آپ (و فوترِ چسبانِ قیمت/دکمه‌هاش) همیشه بالایِ کیبورد می‌مونه، نه زیرش. اگه
مرورگر visualViewport رو پشتیبانی نکنه یا اسکریپت هنوز اجرا نشده باشه، مقدارِ
پیش‌فرض (100%/0) دقیقاً همون رفتارِ قبلی رو حفظ می‌کنه. */
.modal-overlay {
height: var(--vv-height, 100%);
top: var(--vv-top, 0px);
bottom: auto;
}
}
/* پاپ‌آپِ کارتِ محصول تو موبایل: کارتِ اولِ فرم (نام/شناسه/قیمت/تصاویر) کارت‌بودنش رو
از دست می‌ده و مستقیم تو پاپ‌آپ می‌شینه — وگرنه پدینگِ خودش رویِ پدینگِ خودِ پاپ‌آپ
(که همین بالا ۱۶ پیکسل شده) جمع می‌شه و عرضِ فیلدها بی‌خودی کم می‌شه. این قانون باید
بعد از قانونِ ۹۰۰پیکسیِ بالا بیاد تا رویِ پدینگِ ۱۲پیکسیش برنده بشه. کارتِ تاریخچه‌ی
فروش (cust-section-card) دست‌نخورده می‌مونه، چون جدولِ اون اسکرولِ افقیِ خودش رو داره. */
@media (max-width: 768px) {
#productCardModalOverlay .cust-profile-card {
padding: 0; border: none; background: none; border-radius: 0; margin-bottom: 18px;
}
}
/* ===== شماره‌ی تصویریِ افزونه‌ها ===== */
.token-package-card.has-addon-number { position: relative; }
.addon-number {
display: flex; align-items: center; gap: 1px;
margin-bottom: 6px;
}
.addon-number img {
width: 30px; height: 30px; display: block;
/* فایل‌ها پس‌زمینه‌ی روشنِ خودشون رو دارن؛ گردکردنِ گوشه‌ها کنارِ کارت طبیعی‌تره */
border-radius: 6px;
}
@media (max-width: 900px) {
.addon-number img { width: 26px; height: 26px; }
}
/* ===== نشانگر اتصال به سرور =====
عمداً کنارِ نامِ برنامه نشسته، نه روی زنگوله: زنگوله از قبل نقطه‌ی قرمزِ
«پیام خوانده‌نشده» رو داره و گذاشتنِ یه وضعیتِ بی‌ربطِ دیگه روی همون عنصر،
دو معنیِ متفاوت رو با رنگ‌های قرمز/سبز قاطی می‌کنه.
وقتی وصله فقط یه نقطه‌ی کوچک سبزه تا سروصدا نکنه؛ وقتی قطع شد هم رنگ عوض
می‌شه هم کلمه‌ی «آفلاین» میاد — چون این حالت رفتارِ برنامه رو عوض می‌کنه و
یه نقطه‌ی ۷ پیکسلی برای گفتنش کافی نیست. */
.conn-dot {
display: inline-block; width: 7px; height: 7px; border-radius: 50%;
background: #2e9e5b; margin-inline-end: 5px;
vertical-align: middle; flex-shrink: 0;
transition: background .2s ease;
}
.conn-label { display: none; }
body.is-offline .conn-dot { background: var(--muted, #9aa0a6); }
body.is-offline .conn-label { display: inline; color: var(--muted); font-weight: 700; }
body.is-offline .conn-label::before { content: '— '; }
@media (prefers-reduced-motion: reduce) {
.conn-dot { transition: none; }
}
/* ===== کشوی انتخاب کسب‌وکار روی موبایل =====
بازنویسی بر اساس شیتِ مرجع: ردیف‌های ساده با یک دایره‌ی انتخاب سمتِ کناری،
جداکننده‌ی نازک، و بدون کارت‌بندی. برچسب‌های متنیِ «فعال» و «پیش‌فرض» جاشون
رو به نشانه‌های تصویری دادن — دایره‌ی پرشده یعنی فعال، ستاره یعنی پیش‌فرض —
چون سه تا برچسب کنار هم ردیف رو شلوغ می‌کرد و اسمِ کسب‌وکار رو له می‌کرد. */
@media (max-width: 900px) {
/* شیت باید بالا بیاد و پایین بره، نه اینکه ناگهان ظاهر بشه. برای همین همیشه
توی صفحه می‌مونه و با transform جابه‌جا می‌شه؛ display:none اجازه‌ی انیمیشن
نمی‌ده. visibility هم لازمه تا وقتی پایینه هیچ لمسی رو نگیره. */
.biz-dropdown-panel {
display: flex;
transform: translateY(100%);
visibility: hidden;
transition: transform .28s ease, visibility .28s;
}
.biz-dropdown-panel.open { transform: translateY(0); visibility: visible; }
.biz-switcher-backdrop { display: block; opacity: 0; pointer-events: none; transition: opacity .28s ease; }
.biz-switcher-backdrop.open { opacity: 1; pointer-events: auto; }
.biz-switcher-body { padding: 0; gap: 0; }
.biz-card {
border: none; border-radius: 0; background: none;
border-bottom: 1px solid var(--border);
padding: 14px 18px; gap: 12px; align-items: center;
}
.biz-card:last-child { border-bottom: none; }
.biz-card.active { box-shadow: none; background: none; border-color: var(--border); }
/* لوگو بدون قاب و بزرگ‌تر، با همون گردیِ آشنای بقیه‌ی برنامه */
.biz-card-logo, .biz-card-logo-ph {
width: 46px; height: 46px; border-radius: 13px; border: none;
}
/* دکمه‌ی ویرایش بزرگ‌تر و با فاصله‌ی بیشتر از لبه */
.biz-card-edit {
width: 38px; height: 38px; border-radius: 10px;
margin-inline-start: 4px;
}
.biz-card-edit .ic { width: 18px; height: 18px; }
/* دکمه‌ی افزودن: بلندتر و درشت‌تر، چون تنها کنشِ اصلیِ ته شیته */
.biz-switcher-foot { padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); }
.biz-switcher-add { padding: 14px; font-size: 14.5px; border-radius: 12px; }
.biz-card-name { font-size: 14.5px; }
.biz-card-tags { margin-top: 3px; gap: 6px; }
/* برچسب‌های متنی روی موبایل حذف؛ وضعیت با نشانه‌ها گفته می‌شه:
دایره‌ی پرشده = فعال، ستاره‌ی کنارِ نام = پیش‌فرض. */
.biz-tag { display: none; }
.biz-star { font-size: 18px; }
/* دایره‌ی انتخاب، همون الگوی آشنای فهرست‌های انتخابی */
.biz-radio {
width: 21px; height: 21px; border-radius: 50%; flex-shrink: 0;
border: 2px solid var(--border); position: relative;
}
.biz-card.active .biz-radio { border-color: var(--accent); }
.biz-card.active .biz-radio::after {
content: ''; position: absolute; inset: 3px;
border-radius: 50%; background: var(--accent);
}
}
@media (min-width: 901px) { .biz-radio { display: none; } }
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
.biz-dropdown-panel, .biz-switcher-backdrop { transition: none; }
}
/* ===== دو کارتِ داشبورد که روی موبایل پنهان می‌شن (درخواست‌شده) =====
important اینجا لازمه و تزئینی نیست: نمایشِ این دو پنل با استایلِ inline از
جاوااسکریپت کنترل می‌شه (وقتی داده دارن display ست می‌شه) و استایلِ inline از
هر قانونِ CSS قوی‌تره. */
@media (max-width: 900px) {
#dashStorefrontPanel,
#dashGeoPanel { display: none !important; }
}
/* ===== جفتِ تقویم + دسترسی سریع روی موبایل =====
ظرفِ مستقلِ دوستونی. عمداً به گریدِ ردیف‌های داشبورد تکیه نمی‌کنه، چون اون دو پنل
در HTML توی دو ردیفِ جدا هستن و هماهنگ‌کردنشون از راهِ گرید شکننده بود. */
/* align-items: stretch (پیش‌فرضِ گرید) یعنی هر دو کارت تا ارتفاعِ بلندترین کشیده
می‌شن؛ بعد داخلِ هر کارت، بدنه با flex:1 فضای باقی‌مانده رو پر می‌کنه تا دو کارت
واقعاً هم‌ارتفاع دیده بشن، نه فقط ظرف‌هاشون. */
/* ستون‌ها به ترتیبِ DOM شمرده می‌شن و صفحه راست‌به‌چپه، پس ستونِ اول (۴۰٪) سمتِ
راست و مالِ دسترسی سریعه، و ستونِ دوم (۶۰٪) سمتِ چپ و مالِ تقویم. */
.dash-pair { display: grid; grid-template-columns: 40fr 60fr; gap: 7px; align-items: stretch; }
.dash-pair > .dash-panel {
margin-bottom: 0; min-width: 0;
display: flex; flex-direction: column;
}
@media (max-width: 900px) {
/* چهار میانبر زیرِ هم در یک ستون، هرکدام آیکون و بعد اسمش در همان ردیف.
همه‌ی فاصله‌ها تا جای ممکن کم شده‌ن تا کارت از تقویمِ کناری بلندتر نشه. */
.dash-pair .dash-quick-grid {
padding: 4px; gap: 2px; flex: 1;
grid-template-columns: 1fr;
align-content: center;
}
.dash-pair .dash-quick-grid button {
flex-direction: row; align-items: center; justify-content: flex-start;
gap: 7px; padding: 3px 6px;
text-align: right; line-height: 1.25;
}
.dash-pair .dash-quick-grid button .dash-quick-icon {
margin: 0; flex-shrink: 0;
width: 28px; height: 28px; border-radius: 9px;
}
.dash-pair .dash-quick-grid button .dash-quick-icon .ic { width: 15px; height: 15px; }
/* اندازه‌ی متن روی خودِ برچسب ست می‌شه، نه روی دکمه: .dash-quick-label فونتِ
مستقلِ خودش رو داره و از دکمه ارث نمی‌بره، پس تغییرِ فونتِ دکمه بی‌اثر بود. */
.dash-pair .dash-quick-grid .dash-quick-label { font-size: 11.5px; }
/* اسمِ بلند نباید کارتِ ۴۰درصدی رو پهن کنه؛ کوتاه می‌شه */
.dash-pair .dash-quick-grid .dash-quick-text { min-width: 0; }
.dash-pair .dash-quick-grid .dash-quick-label {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
.dash-pair .dash-panel-head { padding-left: 10px; padding-right: 10px; }
/* فلشِ تزئینیِ ته هر میانبر روی چیدمانِ عمودی فقط ارتفاع می‌گیره و کارت رو از
تقویم بلندتر می‌کنه؛ خودِ آیکون و برچسب گویا هستن. */
.dash-pair .dash-quick-arrow { display: none; }
/* «مشاهده کامل» حذف شد: زدن روی هر روزِ تقویم از قبل همون صفحه رو باز می‌کنه،
پس دکمه تکراری بود و جای تیتر رو تنگ می‌کرد. */
.dash-pair .dash-cal-card .dash-panel-link { display: none; }
/* تیتر تاریخ باید در یک خط بمونه */
.dash-pair .dash-cal-card .dash-panel-head h2 {
font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* شبکه‌ی روزهای تقویم هم فضای باقی‌مانده رو پر کنه تا هم‌قد بمونه */
.dash-pair .dash-cal-card .cal-grid { flex: 1; align-content: center; }
}
/* ===================================================================
۳.پ۱ — پاپ‌آپ مشاهده‌ی فاکتور
عمداً انتهای فایل: چند قانونِ عمومی‌تر (.doc-header، .modal-view-footer،
.btn-print) پایین‌تر از جای قبلیِ این بلوک تعریف شده بودن و همون‌ها padding و
رنگ رو پس می‌گرفتن. اینجا هم وزنِ سلکتور بالاتره هم ترتیب، پس دیگه سورپرایز
نمی‌شه.
=================================================================== */
/* ===== ۳.پ۱ — پاپ‌آپ مشاهده‌ی فاکتور =====
این همون سندیه که لینکش برای مشتری فرستاده می‌شه، پس هرچی عرضِ بیشتری به
خودِ سند برسه بهتره. پدینگِ ۲۸ پیکسلیِ عمومیِ پاپ‌آپ‌ها اینجا فقط فضا
می‌خورد؛ به ۳ میلی‌متر (حدود ۱۱px) کم می‌شه و کادرِ اضافه‌ی دورِ سند هم
برداشته می‌شه تا فقط کارت‌های داخلش دیده بشن. */
/* =====================================================================
صفحه‌ی مشاهده‌ی فاکتور — قانون‌های مشترکِ موبایل و دسکتاپ
===================================================================== */
/* ===== چرا صفحه چند لحظه قفل می‌شد =====
کادرِ دورِ جدول (.table-wrap) از قانونِ عمومی overflow: hidden می‌گرفت و
اینجا فقط محورِ افقی‌ش visible می‌شد. طبقِ استاندارد، وقتی یک محور visible
باشه و محورِ دیگه نه، اون visible به auto تبدیل می‌شه — یعنی این کادر
می‌شد یک «ظرفِ اسکرول». خودش چیزی برای اسکرول نداشت، ولی
overscroll-behavior: contain (که برای لیست‌های اسکرولی گذاشته شده) اجازه
نمی‌داد اسکرول به صفحه‌ی پشتش منتقل بشه؛ پس تا وقتی انگشت/نشانگر روی جدولِ
اقلام بود — که وسطِ سند و بیشترِ سطحِ صفحه رو می‌گیره — صفحه تکون نمی‌خورد و
مرورگر هم چند لحظه ژست رو به همون ظرف قفل نگه می‌داشت.
clip دقیقاً همون برشِ گوشه‌های گرد رو می‌ده ولی ظرفِ اسکرول نمی‌سازه.
(فرمِ ایجاد فاکتور این باگ رو نداشت چون اونجا هر دو محور visible بود.) */
#invoiceViewPageView .table-wrap {
overflow: clip;
/* اگه مرورگری clip رو نشناسه و به hidden برگرده، دست‌کم زنجیرِ اسکرول قطع نشه */
overscroll-behavior: auto;
}
#invoiceViewPageView { overflow-x: clip; }
#invoiceViewPageView * { max-width: 100%; }
#invoiceViewPageView .invoice-container,
#invoiceViewPageView .info-card,
#invoiceViewPageView .items-table-section,
#invoiceViewPageView .summary-row,
#invoiceViewPageView .doc-header { box-sizing: border-box; }
@media print { #invoiceViewPageView .sign-stamp { display: flex; } }
/* متنِ کنارِ آیکونِ دکمه‌های نوارِ پایین: فقط دسکتاپ. تو موبایل جا نیست و
دکمه‌ها همون مربعِ ۴۰px آیکونی می‌مونن. */
.iv-btn-label { display: none; }
/* =====================================================================
نمای موبایلِ صفحه‌ی مشاهده‌ی فاکتور (تا ۹۰۰px، فقط صفحه‌ی نمایش)
قبلاً این بلوک بدونِ مدیاکوئری بود و روی دسکتاپ هم می‌نشست؛ برای همین
دسکتاپ همون سندِ فشرده‌ی موبایل رو نشون می‌داد. حالا فقط موبایله و
دسکتاپ بلوکِ جداگانه‌ی خودش رو داره (پایین‌تر).
«screen and» هم عمدیه: موقعِ چاپ، عرضِ صفحه برابرِ عرضِ کاغذه (A4 با حاشیه‌ی
۱.۵cm ≈ ۶۸۰px) که کمتر از ۹۰۰ ـه، پس این بلوک تو چاپ هم فعال می‌شد و خروجیِ
PDF همون سندِ فشرده‌ی موبایل درمی‌اومد — حتی وقتی از دسکتاپ چاپ می‌گرفتی.
===================================================================== */
@media screen and (max-width: 900px) {
#invoiceViewPageView { padding: 11px; }
#invoiceViewPageView .invoice-container {
border: none; box-shadow: none; border-radius: 0; background: transparent;
}
/* هدرِ سند: لوگو راست، سه سطرِ اطلاعات چپ — هر برچسب و مقدارش روی یک خط.
قبلاً برچسب و مقدار هر کدوم یک سطرِ جدا می‌گرفتن و ارتفاعِ هدر دو برابر
می‌شد. */
#invoiceViewPageView .header-meta-col { gap: 4px; }
#invoiceViewPageView .hm-row {
display: flex; align-items: baseline; justify-content: flex-end; gap: 6px;
white-space: nowrap;
}
#invoiceViewPageView .hm-row .hm-label { font-size: 12px; color: var(--muted); font-weight: 600; }
#invoiceViewPageView .hm-row .hm-value { font-size: 13px; font-weight: 700; }
/* جدولِ اقلامِ سند بدونِ اسکرولِ افقی: پنج ستون، عرضِ ثابت برای ستون‌های عددی
و بقیه‌ش مالِ شرحِ کالا. */
#invoiceViewPageView .items-view-table { width: 100%; table-layout: fixed; min-width: 0; }
#invoiceViewPageView .items-view-table th,
#invoiceViewPageView .items-view-table td {
padding: 7px 6px; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis;
}
#invoiceViewPageView .items-view-table th:nth-child(1),
#invoiceViewPageView .items-view-table td:nth-child(1) { width: auto; white-space: normal; }
#invoiceViewPageView .items-view-table th:nth-child(2),
#invoiceViewPageView .items-view-table td:nth-child(2) { width: 22%; }
#invoiceViewPageView .items-view-table th:nth-child(3),
#invoiceViewPageView .items-view-table td:nth-child(3) { width: 12%; }
#invoiceViewPageView .items-view-table th:nth-child(4),
#invoiceViewPageView .items-view-table td:nth-child(4) { width: 12%; }
#invoiceViewPageView .items-view-table th:nth-child(5),
#invoiceViewPageView .items-view-table td:nth-child(5) { width: 24%; font-weight: 800; }
/* دکمه‌های پایین: ویرایش و چاپ فقط آیکون، ارسال متنی */
/* ===== نوارِ پایین =====
وقتی این بخش پاپ‌آپ بود، نوار به کفِ همون پاپ‌آپ می‌چسبید و مارجینِ منفی
داشت تا تا لبه‌ها کش بیاد. حالا که صفحه‌ست، نوار به کفِ خودِ صفحه (viewport)
می‌چسبه: sticky با bottom برابرِ صفر، و فقط به‌اندازه‌ی پدینگِ افقیِ صفحه
(۱۱px) به بیرون کش میاد تا تمامِ عرض رو بگیره.
پدینگِ پایین با longhand نوشته شده نه شورت‌هند: env() داخلِ calc() تو
شورت‌هند، اگه موتوری اون تابع رو نشناسه کلِ اعلان رو دور می‌ندازه. */
#invoiceViewModalFooter {
position: sticky; bottom: 0; z-index: 500;
margin: 14px -11px 0; border-radius: 0;
/* پدینگِ افقی ۶px: خودِ نوار با مارجینِ منفی به لبه‌ی صفحه می‌رسه، ولی
دکمه‌ها هم باید تا نزدیکِ همون لبه بیان نه ۱۲px عقب‌تر. */
padding: 8px 6px 8px; box-sizing: border-box; width: auto;
}
#invoiceViewModalFooter { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
/* ===== چرا روی موبایل fixed و نه sticky؟ =====
روی موبایل ظرفِ اسکرول خودِ .shell-main ـه و ته‌ش پدینگ داره (جای نوارِ
میانبرِ پایین). آفستِ sticky از همون پدینگ شروع می‌شه، یعنی هرچی به bottom
بدیم روی اون ۶۸px سوار می‌شه — نتیجه‌ش نواری بود که وسطِ صفحه شناور می‌موند.
با fixed، مبنا خودِ صفحه‌ی نمایشه و جای نوار قطعیه: دقیقاً به‌اندازه‌ی
ارتفاعِ واقعیِ نوارِ پایین (که سمتِ جاوااسکریپت اندازه‌گیری و تو
--mobile-nav-h ریخته می‌شه) بالاتر می‌شینه. عرض هم مشکلی نداره چون تو
موبایل ستونِ محتوا تمامِ عرضه. روی دسکتاپ همون sticky می‌مونه تا زیرِ
سایدبار نره. */
#invoiceViewModalFooter {
position: fixed; left: 0; right: 0; bottom: 0;
/* یک پله زیرِ نوارِ میانبر (۸۵۰) تا هیچ‌وقت روش نیفته */
z-index: 840; margin: 0; width: auto;
}
body.has-mobile-shortcut #invoiceViewModalFooter {
/* تقسیم بر --ui-zoom عمدیه: بزرگ‌نماییِ متن (تنظیماتِ اندازه‌ی فونت) روی
همین صفحه اعمال می‌شه، پس هر طولی که این تو بنویسیم هم همون‌قدر بزرگ
می‌شه. ارتفاعِ نوارِ پایین اما بیرون از این بزرگ‌نمایی اندازه‌گیری شده،
برای همین قبل از استفاده به مقیاسِ همین‌جا برگردونده می‌شه. */
bottom: calc(var(--mobile-nav-h, 68px) / var(--ui-zoom, 1));
/* ناحیه‌ی امنِ پایینِ صفحه رو خودِ نوارِ میانبر گرفته */
padding-bottom: 8px;
}
/* محتوا نباید زیرِ نوارِ ثابت گم بشه */
#invoiceViewPageView { padding-bottom: 76px; }
/* تو موبایل عددِ نهایی از نوارِ شناور برداشته شد: خودِ سند بالاتر همین عدد رو
داره و اینجا فقط جای دکمه‌ها رو تنگ می‌کرد (حالا «ثبت پرداخت» و «ذخیره» هم
اضافه شدن). رو دسکتاپ سرِ جاشه. */
#invoiceViewModalFooter .floating-bar-total { display: none; }
#invoiceViewModalFooter .floating-bar-buttons { flex: 1 1 auto; min-width: 0; justify-content: space-between; }
/* ۳) مهر و امضا فقط در چاپ معنی دارد؛ روی صفحه فقط ارتفاع می‌گیرد */
#invoiceViewPageView .sign-stamp { display: none; }
/* ===== کارت‌ها تا نزدیکِ لبه =====
کارت‌های این سند از قانون‌های عمومیِ «سندِ چاپی» می‌آن که برای کاغذِ A4
نوشته شدن: .info-card مارجینِ ۳۰px کناری داره، .items-table-section و
.summary-row هم پدینگِ ۳۰px. تو پاپ‌آپِ موبایل این یعنی دو نوارِ خالیِ
پهن در دو طرف. اینجا به ۴px کم می‌شن تا عرضِ مفیدِ کارت‌ها بیشتر بشه. */
#invoiceViewPageView .info-card { margin: 6px 4px 0 4px; }
#invoiceViewPageView .items-table-section { padding: 0 4px; margin-top: 8px; }
#invoiceViewPageView .summary-row { padding: 10px 4px 0 4px; gap: 8px; }
#invoiceViewPageView .doc-header { padding-left: 4px; padding-right: 4px; }
#invoiceViewModalFooter .floating-bar-buttons { gap: 8px; }
#invoiceViewModalFooter .iv-icon-btn {
flex: 0 0 auto; width: 40px; min-width: 40px; padding: 0; min-height: 38px;
display: inline-flex; align-items: center; justify-content: center;
/* چاپ هم‌شکلِ ویرایش: دکمه‌ی سبکِ حاشیه‌دار، نه دکمه‌ی پُرِ قرمز */
background: var(--surface); color: var(--muted);
border: 1px solid var(--border) !important;
}
#invoiceViewModalFooter .iv-send-btn { flex: 1 1 auto; min-height: 38px; }
/* ===== بدونِ جابه‌جاییِ افقی =====
سند عرض‌های درصدیِ ثابت و جدول داره؛ اگه از عرضِ پاپ‌آپ بزنه بیرون، کلِ صفحه
با انگشت افقی جابه‌جا می‌شه. اینجا افقی قفل می‌شه و هر عنصرِ داخلی هم به
عرضِ ظرفش محدود. */
/* اینجا عمداً hidden نیست: overflow-x: hidden خودِ صفحه رو به یه «ظرفِ اسکرول»
تبدیل می‌کنه و اون‌وقت position: sticky ِ نوارِ پایین نسبت به همین ظرف حساب
می‌شه نه نسبت به صفحه‌ی نمایش — یعنی عملاً می‌چسبه ته محتوا و شناور نمی‌مونه.
clip همون جلوگیری از اسکرولِ افقی رو می‌کنه ولی ظرفِ اسکرول نمی‌سازه.
(overscroll-behavior هم مالِ دورانِ پاپ‌آپ بود و روی صفحه معنی نداره.) */
#invoiceViewPageView .summary-row { grid-template-columns: 1fr; }
/* قبلاً ضربدرِ بستنِ پاپ‌آپ روی شماره‌ی فاکتور می‌افتاد و هدر ۳۴px از بالا فاصله
می‌گرفت. حالا دکمه‌ی بازگشت یه ردیفِ جدا بالای سنده، پس اون فاصله لازم نیست. */
#invoiceViewPageView .doc-header { padding-top: 12px; }
/* ۵ و ۶) کارت فروشنده/خریدار: گرید ۵۰/۵۰ فشرده */
#invoiceViewPageView .iv-party-card,
#invoiceViewPageView .iv-receipt-card { padding: 0; display: block; }
#invoiceViewPageView .iv-party-card .side-tag,
#invoiceViewPageView .iv-receipt-card .side-tag {
display: block; text-align: center; padding: 6px 10px;
background: var(--header-bg); border-bottom: 1px solid var(--border);
font-size: 12.5px; font-weight: 700;
}
#invoiceViewPageView .iv-party-grid {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 0; padding: 0;
}
/* ظرف‌های «ستونِ اصلی/کناری» فقط برای نمای کاغذی‌ان؛ اینجا محو می‌شن تا
فیلدها مثلِ قبل مستقیم بچه‌ی همین شبکه باشن و موبایل هیچ فرقی نکنه. */
#invoiceViewPageView .iv-party-main,
#invoiceViewPageView .iv-party-aux { display: contents; }
#invoiceViewPageView .iv-field {
display: flex; align-items: baseline; gap: 5px; min-width: 0;
padding: 5px 10px; border-bottom: 1px solid var(--border); font-size: 12px;
}
#invoiceViewPageView .iv-field-full { grid-column: 1 / -1; }
#invoiceViewPageView .iv-field label {
flex: 0 0 auto; color: var(--muted); font-weight: 600; font-size: 11.5px;
}
#invoiceViewPageView .iv-field span {
flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-weight: 600;
}
/* دو سلولِ کنارِ هم فقط یک خطِ عمودیِ جداکننده لازم دارن */
#invoiceViewPageView .iv-field:nth-child(odd):not(.iv-field-full) { border-left: 1px solid var(--border); }
#invoiceViewPageView .iv-party-grid .iv-field:last-child { border-bottom: none; }
}
/* =====================================================================
نمای «کاغذی» صفحه‌ی مشاهده‌ی فاکتور — دسکتاپ (۹۰۱px به بالا) و چاپ/PDF
پوسته‌ی «کلاسیک». چه روی دسکتاپ دیده بشه، چه روی کاغذ/PDF بره، یک شکله:
برگه‌ی سفید با عرضِ محدود، برچسبِ عمودیِ فروشنده/خریدار، جدولِ اقلامِ کامل
و بخشِ مهر و امضا — نه نسخه‌ی فشرده‌ی موبایل. چون چاپ هم همین بلوک رو
می‌گیره، خروجیِ PDF از موبایل و دسکتاپ دقیقاً یکیه.
قانونِ پوسته‌ها: هر استایلِ فاکتورِ جدیدی که اضافه می‌شه باید هر دو نما رو
داشته باشه. بلوکِ پوسته‌ی بعدی این شکلی نوشته می‌شه (اسپسیفیسیتیِ بالاتر،
پس روی همین کلاسیک می‌شینه):
@media (min-width: 901px) {
#invoiceViewPageView[data-invoice-theme="modern"] { ... }
}
اتریبیوتِ data-invoice-theme سمتِ جاوااسکریپت (loadActiveBusiness) از روی
پوسته‌ی انتخاب‌شده‌ی همین کسب‌وکار ست می‌شه.
===================================================================== */
@media print, screen and (min-width: 901px) {
/* برگه وسطِ صفحه، با همون عرضِ سندِ مرجع */
#invoiceViewPageView { padding: 20px 24px 0; }
#invoiceViewPageView .iv-page-head { max-width: 1100px; margin: 0 auto 12px; }
#invoiceViewPageView .invoice-container { max-width: 1100px; margin: 0 auto; }
/* هدرِ سند: لوگو راست، مشخصات چپ — با فاصله‌ی کاغذیِ ۳۰px */
#invoiceViewPageView .doc-header { padding: 18px 30px; align-items: center; }
#invoiceViewPageView .header-meta-col { gap: 7px; }
#invoiceViewPageView .hm-row {
display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; white-space: nowrap;
}
#invoiceViewPageView .hm-row .hm-label { font-size: 13px; color: var(--muted); font-weight: 700; }
#invoiceViewPageView .hm-row .hm-value { font-size: 14px; font-weight: 700; }
/* کارتِ فروشنده/خریدار: برچسبِ عمودی سمتِ راست (مثلِ سندِ مرجع) و فیلدها
در سه ستون، چون روی دسکتاپ عرض هست. */
#invoiceViewPageView .iv-party-card,
#invoiceViewPageView .iv-receipt-card { display: flex; padding: 0; }
#invoiceViewPageView .iv-party-card .side-tag,
#invoiceViewPageView .iv-receipt-card .side-tag {
display: flex; flex: 0 0 38px; width: 38px; padding: 0; text-align: center;
writing-mode: vertical-rl; text-orientation: mixed; letter-spacing: 2px;
align-items: center; justify-content: center;
background: var(--header-bg); color: var(--text);
border-bottom: none; border-left: 1px solid var(--border);
font-size: 14px; font-weight: 800;
}
/* ===== دو ستونِ سندِ مرجع =====
ستونِ اصلی (نام، آدرس، کدها) سمتِ راست و ستونِ کناریِ خاکستری (راه‌های
ارتباطی) سمتِ چپ — همون ساختارِ .main-content/.aux-column ِ سندِ کلاسیک.
قبلاً همه‌ی فیلدها تو یک شبکه‌ی سه‌ستونی می‌افتادن و چون بعضی فیلدها (آدرس،
ایمیل) تمامِ عرض رو می‌گرفتن، جای خالی و کادرهای ناهم‌تراز می‌ساختن. */
#invoiceViewPageView .iv-party-grid {
flex: 1 1 auto; min-width: 0;
display: flex; gap: 0; padding: 0;
}
#invoiceViewPageView .iv-party-main,
#invoiceViewPageView .iv-party-aux {
display: flex; flex-direction: column; justify-content: center;
gap: 7px; padding: 12px 16px; min-width: 0;
}
#invoiceViewPageView .iv-party-main { flex: 2 1 0; border-left: 1px solid var(--border); }
#invoiceViewPageView .iv-party-aux { flex: 1 1 0; background: var(--header-bg); }
#invoiceViewPageView .iv-field {
display: flex; align-items: baseline; gap: 6px; min-width: 0;
padding: 0; border: none; font-size: 13px;
}
#invoiceViewPageView .iv-field label { flex: 0 0 auto; color: var(--muted); font-weight: 700; font-size: 12.5px; }
#invoiceViewPageView .iv-field span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
/* جدولِ اقلام: پنج ستون با عرضِ کاغذی (شرحِ کالا بقیه‌ی فضا رو می‌گیره).
قانونِ nth-child عمومیِ بالای فایل برای جدولِ هفت‌ستونیِ فرم نوشته شده و
اینجا باید خنثی بشه، وگرنه مجموعِ عرض‌ها ۷۰٪ می‌مونه و جدول جمع می‌شه. */
#invoiceViewPageView .items-view-table th,
#invoiceViewPageView .items-view-table td { padding: 9px 8px; font-size: 13px; }
#invoiceViewPageView .items-view-table th:nth-child(1),
#invoiceViewPageView .items-view-table td:nth-child(1) { width: auto; white-space: normal; text-align: right; }
#invoiceViewPageView .items-view-table th:nth-child(2),
#invoiceViewPageView .items-view-table td:nth-child(2) { width: 16%; }
#invoiceViewPageView .items-view-table th:nth-child(3),
#invoiceViewPageView .items-view-table td:nth-child(3) { width: 12%; }
#invoiceViewPageView .items-view-table th:nth-child(4),
#invoiceViewPageView .items-view-table td:nth-child(4) { width: 12%; }
#invoiceViewPageView .items-view-table th:nth-child(5),
#invoiceViewPageView .items-view-table td:nth-child(5) { width: 18%; font-weight: 800; }
/* توضیحات سمتِ راست (پهن) و جدولِ جمع‌بندی سمتِ چپ (باریک) — مثلِ سندِ مرجع */
#invoiceViewPageView .summary-row {
grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 20px; padding: 20px 30px 0 30px;
}
/* ===== خنثی‌کردنِ بلوک‌های موبایلِ سراسریِ اپ =====
قانون‌های @media (max-width: 768px) و (max-width: 700px) برای کلِ برنامه
نوشته شدن و چون عرضِ کاغذ کمتر از اوناست، موقعِ چاپ هم فعال می‌شن و سند رو
موبایلی می‌کردن (برچسبِ افقی، کارتِ ستونی، خلاصه‌ی تک‌ستونه، پدینگِ ۶px).
اینجا با سلکتورِ آی‌دی‌دار و ترتیبِ بعدتر، مقدارِ کاغذی برمی‌گرده. */
#invoiceViewPageView .doc-header { text-align: right; }
#invoiceViewPageView .info-card { flex-direction: row; margin: 16px 30px 0 30px; }
#invoiceViewPageView .items-table-section { padding: 0 30px; margin-top: 20px; }
/* تو موبایل جدولِ خلاصه با order می‌ره بالای توضیحات؛ رو کاغذ باید همون
ترتیبِ طبیعیِ سند باشه (توضیحات راست، خلاصه چپ) */
#invoiceViewPageView .notes-box,
#invoiceViewPageView .summary-table { order: 0; }
/* مهر و امضا بخشی از سنده (تو موبایل فقط جای خالی می‌گرفت).
بدونِ این، قانونِ display:none ِ بلوکِ موبایل — که تو فایل بعد از قانونِ
@media print بالا میاد و هم‌اسپسیفیسیتیه — موقعِ چاپ برنده می‌شد و امضا و
مهر اصلاً رو کاغذ نمی‌اومد. */
#invoiceViewPageView .sign-stamp { display: flex; padding: 24px 30px; }
/* ===== نوارِ پایین =====
هم‌عرضِ خودِ سند و کمی بالاتر از کفِ صفحه شناور می‌مونه، نه چسبیده به لبه‌ی
پنجره؛ و چون جا هست، ویرایش و چاپ هم متن می‌گیرن نه فقط آیکون. */
#invoiceViewModalFooter {
position: sticky; bottom: 16px; z-index: 500;
max-width: 1100px; margin: 16px auto 24px; width: auto;
border-radius: 12px; padding: 10px 16px; box-sizing: border-box;
box-shadow: var(--card-shadow);
}
#invoiceViewModalFooter .iv-btn-label { display: inline; }
#invoiceViewModalFooter .iv-icon-btn {
display: inline-flex; align-items: center; gap: 6px;
min-height: 38px; padding: 0 14px;
}
#invoiceViewModalFooter .iv-send-btn { min-height: 38px; padding: 0 22px; }
}
/* =====================================================================
تفاوت‌های مخصوصِ کاغذ (بعد از بلوکِ کاغذی میاد تا برنده باشه)
چیدمان همون بالاست؛ اینجا فقط چیزهایی که مالِ صفحه‌ی نمایشه برداشته می‌شه:
کادر و سایه‌ی دورِ برگه، عرضِ ۱۱۰۰px و پدینگِ صفحه — چون خودِ کاغذ حاشیه داره
(@page margin: 1.5cm).
===================================================================== */
@media print {
/* بدونِ این، مرورگر پیش‌فرضاً پس‌زمینه‌ها رو موقعِ چاپ حذف می‌کنه و نوارِ خاکستریِ
سرستون‌ها، برچسبِ فروشنده/خریدار و ردیفِ صورتیِ مجموع سفید درمی‌ان — یعنی
PDF دیگه شبیهِ سندِ روی صفحه نیست. */
#invoiceViewPageView,
#invoiceViewPageView * {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
#invoiceViewPageView { padding: 0; }
#invoiceViewPageView .iv-page-head { display: none; }
#invoiceViewPageView .invoice-container {
max-width: 100%; margin: 0; border: none; box-shadow: none; border-radius: 0;
}
/* قانونِ سراسریِ چاپ همه‌ی جدول‌ها رو کادرِ مشکی می‌ده (مالِ لیبلِ پستی و
گزارش‌هاست). سندِ فاکتور باید همون خطوطِ روشنِ پوسته‌ی کلاسیک رو داشته باشه
تا خروجیِ PDF عیناً همونی باشه که رو صفحه دیده می‌شه. */
#invoiceViewPageView th,
#invoiceViewPageView td { border: 1px solid var(--border); }
}
/* =============================================================
پاپ‌آپِ «ثبت پرداخت / چک» و دکمه‌اش در کارتِ خلاصه‌ی فاکتور
============================================================= */
.inv-pay-open-btn {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12.5px; font-weight: 700; padding: 8px 12px;
}
.inv-pay-summary { font-size: 12px; color: var(--text); margin-top: 6px; }
.inv-pay-summary-empty { color: var(--muted); font-weight: 400; }
.inv-pay-head {
background: var(--header-bg); border: 1px solid var(--border);
border-radius: 10px; padding: 10px 12px;
}
.inv-pay-head-row {
display: flex; align-items: baseline; justify-content: space-between;
gap: 10px; font-size: 13px; padding: 3px 0;
}
.inv-pay-head-row span { color: var(--muted); }
.inv-pay-head-row.is-remaining { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 7px; }
.inv-pay-head-row.is-remaining b { color: var(--accent-text); font-size: 14.5px; }
/* دو تبِ روشِ پرداخت */
.inv-pay-tabs {
display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
background: var(--header-bg); border: 1px solid var(--border);
border-radius: 10px; padding: 4px; margin: 14px 0 12px;
}
.inv-pay-tabs button {
border: none; background: transparent; color: var(--muted);
font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
padding: 9px 10px; border-radius: 8px; transition: .15s;
}
.inv-pay-tabs button.active { background: var(--surface); color: var(--accent-text); box-shadow: var(--card-shadow); }
/* توضیح و تصویرِ اختیاریِ پرداخت */
.inv-pay-extra { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.inv-pay-extra-label {
display: block; font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 6px;
}
.inv-pay-extra input[type="file"] { width: 100%; font-size: 12px; margin-bottom: 4px; }
.inv-pay-extra input[type="text"] { margin-bottom: 12px; }
.inv-pay-image-preview img {
display: block; max-width: 180px; border-radius: 8px; margin-top: 8px; border: 1px solid var(--border);
}
.inv-pay-image-clear { margin-top: 8px; font-size: 12px; padding: 6px 12px; }
/* فیلدهای منتقل‌شده از کارتِ خلاصه به پاپ‌آپ: اینجا عرضِ کامل دارن، پس چیدمانشان
بازتر از حالتِ فشرده‌ی داخلِ جدولِ خلاصه‌ست. */
#invoicePayOverlay .settle-pay-line { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
#invoicePayOverlay .settle-quick-percents { display: flex; gap: 6px; flex-wrap: wrap; }
#invoicePayOverlay .pay-amount-wrap { width: 100%; }
#invoicePayOverlay .check-fields-grid {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px;
}
#invoicePayOverlay input[type="text"] {
width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px;
padding: 9px 10px; font-family: inherit; font-size: 13px;
background: var(--surface); color: var(--text);
}
/* =============================================================
چیپ‌های فیلترِ «لیست فاکتورها» (۳.۱.۵) — Choice Chips
جایگزینِ کلیک‌شدنِ کارت‌های آماری: حالا خودِ کارت‌ها فقط اطلاعاتی‌ان (نه دکمه)
و فیلتر کردن با همین ردیفِ چیپِ رنگی، بینِ نوارِ آماری و کارتِ لیست، انجام می‌شه.
هر چیپ همیشه رنگِ خودش رو داره (نه فقط وقتی فعاله) تا دسته‌بندی از روی رنگ هم
قابلِ تشخیص باشه؛ حالتِ فعال فقط پرتر/توپرتر می‌شه. ============================= */
.inv-chip-bar {
display: flex; align-items: center; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
padding: 1px 1px 6px; margin-bottom: 10px; scrollbar-width: none;
}
.inv-chip-bar::-webkit-scrollbar { display: none; }
/* دسکتاپ: وقتی چیپ‌ها زیاد می‌شن (نقش‌ها، منابعِ گالری…) اسکرولِ افقی با ماوس عملاً ممکن نیست،
پس چند ردیفه می‌شن. موبایل همون نوارِ تک‌ردیفه با اسکرولِ افقیِ لمسی می‌مونه. */
@media (min-width: 901px) {
.inv-chip-bar { flex-wrap: wrap; overflow-x: visible; row-gap: 8px; }
}
.inv-chip {
flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
border: none; border-radius: 999px; padding: 7px 14px;
font-family: inherit; font-size: 12.5px; font-weight: 700; white-space: nowrap;
cursor: pointer; transition: background-color .15s, color .15s;
}
.inv-chip-count {
font-size: 11px; font-weight: 800; border-radius: 999px;
padding: 1px 7px; min-width: 18px; text-align: center; line-height: 1.6;
background: rgba(0, 0, 0, .08);
}
.inv-chip.is-active .inv-chip-count { background: rgba(255, 255, 255, .3); }
.inv-chip.tone-neutral { background: var(--neutral-soft); color: var(--muted); }
.inv-chip.tone-neutral.is-active { background: var(--neutral); color: #fff; }
.inv-chip.tone-danger { background: var(--danger-soft); color: var(--danger); }
.inv-chip.tone-danger.is-active { background: var(--danger); color: #fff; }
.inv-chip.tone-warning { background: var(--warning-soft); color: var(--warning); }
.inv-chip.tone-warning.is-active { background: var(--warning); color: #fff; }
.inv-chip.tone-success { background: var(--success-soft); color: var(--success); }
.inv-chip.tone-success.is-active { background: var(--success); color: #fff; }
.inv-chip.tone-info { background: var(--info-soft); color: var(--info); }
.inv-chip.tone-info.is-active { background: var(--info); color: #fff; }
.inv-chip.tone-purple { background: var(--purple-soft); color: var(--purple); }
.inv-chip.tone-purple.is-active { background: var(--purple); color: #fff; }
.inv-chip.tone-teal { background: var(--teal-soft); color: var(--teal); }
.inv-chip.tone-teal.is-active { background: var(--teal); color: #fff; }
/* چیپِ نقش‌های کاربران — رنگش از رنگِ ثابتِ همون دسته‌بندی میاد (custCategoryColor) */
.inv-chip.tone-role { background: var(--chip-bg); color: var(--chip-c); }
.inv-chip.tone-role.is-active { background: var(--chip-c); color: #fff; }
@media (hover: hover) {
.inv-chip:hover { filter: brightness(0.95); }
}
/* دو گروهِ دکمه‌ی نوارِ پایینِ صفحه‌ی مشاهده (فروش/خرید) با اتریبیوتِ hidden جابه‌جا
می‌شن؛ چون .floating-bar-buttons خودش display داره، [hidden] بدون این قانون
نادیده گرفته می‌شه (همون درسِ قبلی). */
#invoiceViewModalFooter .floating-bar-buttons[hidden] { display: none !important; }
/* ===== نوتیفِ کوتاهِ غیرمسدودکننده (تایید/ارسال) ===== */
.app-toast {
position: fixed; bottom: 28px; left: 50%; z-index: 99999;
transform: translateX(-50%) translateY(10px);
background: #262626; color: #fff;
padding: 10px 22px; border-radius: 10px; font-size: 13.5px; font-weight: 700;
box-shadow: 0 4px 16px rgba(0,0,0,.22);
opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
max-width: calc(100vw - 32px); text-align: center;
}
.app-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* ===== لینکِ همیشه‌نمایانِ فاکتور توی پاپ‌آپِ «تایید و ارسال» ===== */
.inv-share-link-box {
direction: ltr; text-align: left; font-size: 12px; word-break: break-all;
background: var(--header-bg); border: 1px dashed var(--border); border-radius: 8px;
padding: 9px 10px; margin: 2px 0 12px; cursor: pointer; color: var(--accent-text);
}
.inv-share-link-box:active { filter: brightness(0.95); }
/* =====================================================================
نوارِ ابزارِ لیست‌ها (فاکتور فروش/خرید، محصولات، انبار، کاربران، گالری) — دکمه‌های بزرگ‌تر
دکمه‌های ۳۰پیکسلی مخصوصاً رو گوشی برای لمس کوچیک بودن؛ حالا همه ۳۶ پیکسلن (دسکتاپ و
موبایل) با آیکونِ ۱۸ پیکسلی. تو موبایل برای اینکه با وجودِ بزرگ‌تر شدن باز هم تو یک ردیف
جا بشن، همون راه‌حل‌های صفحه‌ی گالری برای همه اعمال می‌شه: «انتخاب‌نشده» پنهان و فقط عددِ
انتخاب‌شده، کلیدِ لیست/کارت یک دکمه (فقط حالتِ مقصد دیده می‌شه)، بدونِ جداکننده‌ها،
مرتب‌سازی فقط آیکون. جست‌وجو اولِ همین ردیفه و با باز شدن، ردیفِ دوم رو می‌گیره.
===================================================================== */
.inv-toolbar-actions .icon-btn,
.inv-toolbar-actions .inv-sort-trigger,
.inv-view-toggle button,
.inv-filter-bar > .inv-search-toggle {
width: 36px !important; height: 36px !important; min-height: 36px !important; border-radius: 9px;
}
.inv-toolbar-actions .inv-sort-trigger { width: auto !important; padding: 0 10px; }
.inv-toolbar-actions .icon-btn .ic,
.inv-view-toggle button .ic,
.inv-filter-bar > .inv-search-toggle .ic,
.inv-toolbar-actions .inv-sort-trigger > .ic:first-child { width: 18px; height: 18px; }
.inv-toolbar-actions .inv-select-all { height: 36px; border-radius: 9px; }
.inv-toolbar-actions .inv-select-all input { width: 17px; height: 17px; }
.inv-filter-bar > input[type="text"] { height: 36px; box-sizing: border-box; }
.inv-toolbar-count { font-size: 12.5px; }
@media (max-width: 700px) {
.inv-filter-bar { gap: 6px; }
.inv-filter-bar > .inv-toolbar-actions {
flex: 1 1 0; min-width: 0; flex-wrap: nowrap; gap: 5px; justify-content: flex-end;
}
.inv-toolbar-actions .inv-filter-sep { display: none; }
/* شمارش: «انتخاب‌نشده» پنهان، و وقتی چیزی انتخابه فقط عدد تو دایره‌ی رنگی (زدنش = لغو انتخاب) */
.inv-toolbar-actions .inv-toolbar-count { display: none; }
.inv-toolbar-actions .inv-toolbar-count.has-selection {
display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px;
background: var(--accent); color: #fff; text-decoration: none; font-size: 12.5px; font-weight: 800;
}
.inv-toolbar-actions .inv-toolbar-count .cnt-label { display: none; }
/* لیست/کارت: یک دکمه — فقط حالتی که با زدنش می‌ری دیده می‌شه */
.inv-toolbar-actions .inv-view-toggle { gap: 0; }
.inv-toolbar-actions .inv-view-toggle button.active { display: none; }
/* مرتب‌سازی: فقط آیکون */
.inv-toolbar-actions .inv-sort-caret { display: none; }
.inv-toolbar-actions .inv-sort-trigger { width: 36px !important; padding: 0; justify-content: center; }
.inv-toolbar-actions .inv-select-all { padding: 0 9px; gap: 0; }
.inv-toolbar-actions .inv-select-all-label { display: none; }
.inv-toolbar-actions .icon-btn, .inv-toolbar-actions .inv-sort-dd { flex-shrink: 0; }
}
/* =====================================================================
پاپ‌آپِ ایجاد/ویرایشِ کسب‌وکار — هم‌زبانِ پاپ‌آپِ «افزودن کاربر»
===================================================================== */
.biz-form-box { max-width: 580px; }
.biz-form-layout { margin-bottom: 12px; }
/* لوگو مربعِ گرد (نه دایره مثلِ عکسِ کاربر) چون لوگوها معمولاً مستطیلی/شفافن */
.biz-logo-box {
position: relative; width: 112px; height: 112px; border-radius: 18px;
border: 1.5px dashed var(--border); background: var(--header-bg); color: var(--muted);
font-size: 12px; line-height: 1.7; text-align: center; padding: 8px; cursor: pointer;
display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0;
}
@media (hover: hover) { .biz-logo-box:hover { border-color: var(--accent); color: var(--text); } }
.biz-logo-box.has-logo { border-style: solid; background: var(--surface); padding: 6px; }
.biz-logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.biz-logo-box .logo-remove-btn { top: 6px; left: 6px; width: 22px; height: 22px; }
.biz-logo-box.has-logo .logo-remove-btn { display: flex; }
/* کشوی «موارد بیشتر»: باز/بسته‌شدنِ نرم با grid-template-rows (ارتفاعِ واقعیِ محتوا، بدونِ عددِ ثابت) */
.biz-more-toggle {
display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px;
background: var(--header-bg); color: var(--text); font-family: inherit; font-size: 13px; font-weight: 700;
cursor: pointer; transition: border-color .2s, border-radius .25s;
}
@media (hover: hover) { .biz-more-toggle:hover { border-color: var(--accent); } }
.biz-more-toggle .biz-more-caret { width: 18px; height: 18px; color: var(--muted); transition: transform .3s ease; }
.biz-more-toggle.is-open { border-radius: 10px 10px 0 0; }
.biz-more-toggle.is-open .biz-more-caret { transform: rotate(180deg); }
.biz-more-panel {
display: grid; grid-template-rows: 0fr; opacity: 0;
transition: grid-template-rows .32s ease, opacity .25s ease;
}
.biz-more-panel.is-open { grid-template-rows: 1fr; opacity: 1; }
.biz-more-inner { overflow: hidden; min-height: 0; }
.biz-more-grid {
margin: 0; padding: 14px; border: 1px solid var(--border); border-top: none;
border-radius: 0 0 10px 10px; background: var(--surface);
}
.biz-more-panel:not(.is-open) .biz-more-grid { visibility: hidden; transition: visibility 0s .32s; }
@media (prefers-reduced-motion: reduce) {
.biz-more-panel, .biz-more-toggle .biz-more-caret { transition: none; }
}
.biz-stamp-box { min-width: 0; width: 100%; height: 110px; box-sizing: border-box; }
.biz-section { margin-top: 18px; }
.biz-section-title { font-size: 13px; font-weight: 800; color: var(--text); margin-bottom: 10px; }
.biz-section .settings-row { padding: 12px 14px; }
.biz-row-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.biz-default-badge {
flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--accent-text);
background: var(--sidebar-active-bg); border-radius: 999px; padding: 4px 12px;
}
/* پالتِ یکپارچه‌ی رنگ — خونه‌های بزرگ‌تر، داخلِ یک کادر */
.biz-color-palette {
display: flex; flex-wrap: wrap; gap: 8px; padding: 12px;
border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
}
.biz-color-palette .color-swatch { width: 34px; height: 34px; border-radius: 9px; }
.biz-color-name { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; color: var(--muted); min-height: 20px; }
.biz-color-name b { color: var(--text); }
.biz-color-dot { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0,0,0,.14); flex-shrink: 0; }
/* دکمه‌های شناورِ پایینِ پاپ‌آپ (sticky به کفِ خودِ پاپ‌آپ؛ حاشیه‌ی منفی = پدینگِ .modal-box) */
.biz-form-footer {
position: sticky; bottom: -28px; z-index: 5;
margin: 20px -28px -28px; padding: 12px 28px;
display: flex; gap: 10px; background: var(--surface); border-top: 1px solid var(--border);
border-radius: 0 0 16px 16px; box-shadow: 0 -6px 16px rgba(0,0,0,.05);
}
.biz-form-footer .btn-save { flex: 1; }
.biz-form-footer .btn-clear { flex: 0 0 auto; min-width: 96px; }
@media (max-width: 900px) {
.biz-form-footer { bottom: -16px; margin: 18px -16px -16px; padding: 12px 16px; }
.biz-color-palette .color-swatch { width: 36px; height: 36px; }
.biz-section .settings-row { padding: 11px 12px; }
}
@media (max-width: 640px) {
.biz-more-grid { grid-template-columns: 1fr; padding: 12px; }
}
/* =====================================================================
سوییچرِ کسب‌وکار — هم‌زبانِ تمِ اصلیِ اپ (کارت‌ها، قرص‌های وضعیت، دکمه‌ی اصلی)
روی قوانینِ قدیمی (دسکتاپ و شیتِ موبایل) با #bizDropdownPanel سوار می‌شه؛
مکانیزمِ باز/بسته‌شدن و جای‌گذاری دست‌نخورده‌ست، فقط ظاهر عوض شده.
===================================================================== */
#bizDropdownPanel {
width: 340px; border-radius: 16px; border: 1px solid var(--border);
box-shadow: 0 16px 40px rgba(0,0,0,.18);
}
#bizDropdownPanel .biz-switcher-head { padding: 14px 16px 12px; gap: 12px; }
#bizDropdownPanel .biz-switcher-heading { min-width: 0; }
#bizDropdownPanel .biz-switcher-title { font-size: 15px; font-weight: 800; color: var(--text); }
#bizDropdownPanel .biz-switcher-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
#bizDropdownPanel .biz-switcher-close {
width: 34px; height: 34px; border-radius: 10px; background: var(--surface);
}
#bizDropdownPanel .biz-switcher-close .ic { width: 16px; height: 16px; }
#bizDropdownPanel .biz-switcher-body { padding: 10px 12px; gap: 8px; background: var(--header-bg); }
#bizDropdownPanel .biz-card {
gap: 12px; padding: 10px 12px; border-radius: 12px;
background: var(--surface); border: 1px solid var(--border); box-shadow: none;
border-bottom: 1px solid var(--border);
}
@media (hover: hover) {
#bizDropdownPanel .biz-card:not(.active):hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(0,0,0,.05); }
}
#bizDropdownPanel .biz-card.active {
border-color: var(--accent); background: var(--sidebar-active-bg);
box-shadow: inset 0 0 0 1px var(--accent);
}
#bizDropdownPanel .biz-card-logo-wrap { position: relative; flex-shrink: 0; }
#bizDropdownPanel .biz-card-logo,
#bizDropdownPanel .biz-card-logo-ph {
width: 44px; height: 44px; border-radius: 12px; font-size: 16px;
}
#bizDropdownPanel .biz-card-logo { border: 1px solid var(--border); background: var(--surface); }
#bizDropdownPanel .biz-card-check {
position: absolute; bottom: -4px; left: -4px; width: 20px; height: 20px; border-radius: 50%;
background: var(--accent); color: #fff; border: 2px solid var(--surface);
display: flex; align-items: center; justify-content: center;
}
#bizDropdownPanel .biz-card-check .ic { width: 11px; height: 11px; }
#bizDropdownPanel .biz-card-main { flex: 1; min-width: 0; }
#bizDropdownPanel .biz-card-name {
display: block; font-size: 13.5px; font-weight: 800; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#bizDropdownPanel .biz-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.biz-pill {
display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 9px;
font-size: 10.5px; font-weight: 700; line-height: 1.6; white-space: nowrap;
}
.biz-pill.tone-accent { background: var(--accent); color: #fff; }
.biz-pill.tone-warning { background: var(--warning-soft); color: var(--warning); }
.biz-pill.tone-neutral { background: var(--neutral-soft); color: var(--muted); }
#bizDropdownPanel .biz-card-edit {
width: 36px; height: 36px; border-radius: 10px; margin: 0;
background: var(--surface); border: 1px solid var(--border); color: var(--muted);
}
#bizDropdownPanel .biz-card-edit .ic { width: 17px; height: 17px; }
#bizDropdownPanel .biz-radio { display: none; }
#bizDropdownPanel .biz-switcher-foot { padding: 12px; background: var(--surface); }
#bizDropdownPanel .biz-switcher-add {
display: flex; align-items: center; justify-content: center; gap: 6px;
padding: 11px; border-radius: 10px; border: 1px solid var(--accent);
background: var(--accent); color: #fff; font-size: 13px; font-weight: 700;
}
#bizDropdownPanel .biz-switcher-add .ic { width: 16px; height: 16px; }
@media (hover: hover) { #bizDropdownPanel .biz-switcher-add:hover { filter: brightness(1.06); color: #fff; } }
@media (max-width: 900px) {
#bizDropdownPanel { width: 100%; border-radius: 18px 18px 0 0; border-bottom: none; }
#bizDropdownPanel .biz-switcher-head { padding: 18px 16px 12px; }
#bizDropdownPanel .biz-switcher-body { padding: 12px; gap: 8px; }
#bizDropdownPanel .biz-card { padding: 12px; border-radius: 14px; border-bottom: 1px solid var(--border); }
#bizDropdownPanel .biz-card.active { border-color: var(--accent); }
#bizDropdownPanel .biz-card-logo,
#bizDropdownPanel .biz-card-logo-ph { width: 48px; height: 48px; border-radius: 13px; }
#bizDropdownPanel .biz-card-name { font-size: 14.5px; }
#bizDropdownPanel .biz-card-tags .biz-pill { display: inline-flex; }
#bizDropdownPanel .biz-card-edit { width: 40px; height: 40px; }
#bizDropdownPanel .biz-switcher-foot { padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
#bizDropdownPanel .biz-switcher-add { padding: 14px; font-size: 14.5px; border-radius: 12px; }
}
/* =====================================================================
کارتِ افزونه‌ها — شماره داخلِ دایره‌ی ۶۰×۶۰ وسطِ کارت، نام، وضعیت، فهرستِ امکانات،
و پایین دکمه‌ی فعال‌سازی/تمدید + کلیدِ روشن/خاموشِ ماژول
===================================================================== */
#tokenPackagesWrap.token-packages-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; align-items: stretch; }
.addon-card {
display: flex; flex-direction: column; align-items: center; text-align: center;
background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
padding: 20px 16px 16px; min-width: 0; transition: border-color .15s, box-shadow .15s;
}
@media (hover: hover) { .addon-card:hover { border-color: var(--accent); box-shadow: 0 6px 18px rgba(0,0,0,.06); } }
/* شماره‌ی تصویریِ افزونه (همون فایل‌های SVGِ رقم‌ها) — بزرگ، وسطِ کارت، بدونِ دایره */
.addon-card .addon-number { justify-content: center; gap: 2px; margin: 0 0 12px; }
.addon-card .addon-number img { width: 60px; height: 60px; border-radius: 12px; }
.addon-card.is-off .addon-number img { filter: grayscale(1); opacity: .6; }
.addon-card.is-off { opacity: .85; }
.addon-name { font-size: 14.5px; font-weight: 800; color: var(--text); line-height: 1.7; }
.addon-status {
display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px;
margin-top: 6px; font-size: 12px; color: var(--muted);
}
.addon-pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 2px 10px; font-size: 11px; font-weight: 700; }
.addon-pill.tone-success { background: var(--success-soft); color: var(--success); }
.addon-pill.tone-neutral { background: var(--neutral-soft); color: var(--muted); }
.addon-prereq { margin-top: 6px; font-size: 11.5px; font-weight: 700; color: var(--danger); }
.addon-features {
list-style: none; margin: 14px 0 0; padding: 12px 0 0; width: 100%;
border-top: 1px dashed var(--border); text-align: right;
display: flex; flex-direction: column; gap: 7px; flex: 1;
}
.addon-features li {
position: relative; padding-right: 22px; font-size: 12.5px; line-height: 1.7; color: var(--text);
}
.addon-features li::before {
content: ''; position: absolute; right: 0; top: 5px; width: 14px; height: 14px; border-radius: 50%;
background: var(--success-soft);
box-shadow: inset 0 0 0 1.5px var(--success);
}
.addon-features li::after {
content: ''; position: absolute; right: 4.5px; top: 8px; width: 4px; height: 6px;
border: solid var(--success); border-width: 0 1.8px 1.8px 0; transform: rotate(45deg);
}
.addon-card.is-off .addon-features li::before { background: var(--neutral-soft); box-shadow: inset 0 0 0 1.5px var(--border); }
.addon-card.is-off .addon-features li::after { border-color: var(--muted); }
.addon-actions { width: 100%; margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.addon-actions > button { width: 100%; }
.addon-actions > button:disabled { opacity: .5; cursor: not-allowed; }
.addon-toggle {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--header-bg);
font-size: 12.5px; font-weight: 700; color: var(--text); cursor: pointer;
}
@media (max-width: 640px) {
#tokenPackagesWrap.token-packages-grid { grid-template-columns: 1fr; }
}
/* ===== درختِ دسترسیِ کارمند (فرمِ کاربر) ===== */
.emp-perm-tree {
display: flex; flex-direction: column; gap: 2px; background: var(--surface);
border: 1px solid var(--border); border-radius: 10px; padding: 8px; max-height: 360px; overflow-y: auto;
}
.emp-perm-row {
display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--text);
padding: 6px 8px; padding-right: calc(8px + var(--lvl, 0) * 22px); border-radius: 8px; position: relative;
}
.emp-perm-row.lvl-0 { font-weight: 800; margin-top: 4px; }
.emp-perm-row.lvl-0:first-child { margin-top: 0; }
.emp-perm-row:not(.lvl-0)::before {
content: ''; position: absolute; right: calc(var(--lvl) * 22px - 8px); top: 50%;
width: 8px; height: 1px; background: var(--border);
}
.emp-perm-row.is-muted { opacity: .5; }
@media (hover: hover) { .emp-perm-row:hover { background: var(--header-bg); } }
.customer-form .field-line .emp-perm-row input[type="checkbox"],
.emp-perm-row input[type="checkbox"] {
width: 16px !important; height: 16px; min-width: 0; padding: 0 !important; margin: 0; flex: 0 0 auto;
border: none !important; accent-color: var(--accent);
}
/* =====================================================================
صفحه‌ی تنظیماتِ شخصی — هم‌زبانِ تمِ اصلی (کارت‌های گرد، کنترل‌های قرصی، دکمه‌ی ذخیره‌ی چسبان)
===================================================================== */
.settings-page .settings-tabs { width: 100%; }
.settings-page .settings-tabs button { flex: 1 1 0; }
.settings-page .settings-section { margin-bottom: 16px; }
.settings-page .settings-section-title {
font-size: 12.5px; font-weight: 800; color: var(--text); letter-spacing: 0; margin-bottom: 8px; padding: 0 2px;
}
.settings-page .settings-card { border-radius: 14px; background: var(--surface); }
.settings-page .settings-row { padding: 13px 14px; gap: 12px; }
.settings-page .settings-row-label { font-size: 13px; }
.settings-page .segmented-control {
background: var(--header-bg); border: none; border-radius: 10px; padding: 3px;
}
.settings-page .segmented-control button { border-radius: 8px; padding: 7px 12px; font-family: inherit; }
.settings-page .segmented-control button.active { box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.settings-page .shortcut-available-row input[type="checkbox"],
.settings-page .shortcut-item-check input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--accent); }
.settings-page .shortcut-item-reorder button { border-radius: 8px; width: 30px; height: 30px; }
.settings-personal-note {
display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 12px; padding: 10px 12px;
background: var(--info-soft); color: var(--info); border-radius: 10px; font-size: 12px; line-height: 1.8;
}
.settings-save-bar {
position: sticky; bottom: -26px; z-index: 5; margin: 0 -26px -26px; padding: 12px 26px;
background: var(--surface); border-top: 1px solid var(--border);
}
.settings-save-bar .btn-save { width: 100%; }
@media (max-width: 900px) {
.settings-save-bar { bottom: -16px; margin: 0 -12px -16px; padding: 12px; }
.settings-page .segmented-control { flex-wrap: wrap; }
}
/* ===== تیکت‌ها: نامِ فرستنده ===== */
.ticket-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.ticket-meta-row .ticket-date { margin-top: 0; }
.ticket-creator { font-size: 11.5px; font-weight: 700; color: var(--accent-text); }
.ticket-detail-creator { font-size: 12px; color: var(--muted); margin: 4px 0 10px; }
.ticket-msg-sender { font-size: 11px; font-weight: 800; color: var(--muted); margin-bottom: 3px; }
.ticket-msg.admin .ticket-msg-sender { color: var(--accent-text); }
/* ===== داشبوردِ کارمند: کارت‌های بدونِ دسترسی — سرِ جاشون، ولی مات با نشانِ قفل ===== */
.dash-panel.dash-locked { position: relative; overflow: hidden; }
.dash-panel.dash-locked > :not(.dash-lock-overlay):not(.dash-panel-head) {
filter: blur(6px); opacity: .55; pointer-events: none; user-select: none;
}
.dash-panel.dash-locked .dash-panel-head button,
.dash-panel.dash-locked .dash-panel-head .dash-range-group { visibility: hidden; }
.dash-lock-overlay {
position: absolute; inset: 52px 0 0 0; display: flex; flex-direction: column; align-items: center;
justify-content: center; gap: 8px; padding: 12px; text-align: center; z-index: 2;
font-size: 12.5px; font-weight: 700; color: var(--muted);
}
.dash-lock-overlay .ic {
width: 30px; height: 30px; padding: 7px; border-radius: 50%; box-sizing: content-box;
background: var(--surface); border: 1px solid var(--border); color: var(--muted);
}
.dash-fake-chart { display: flex; align-items: flex-end; gap: 6%; height: 160px; padding: 10px 20px; }
.dash-fake-chart span { flex: 1; border-radius: 6px 6px 0 0; background: var(--accent); opacity: .5; }
.dash-fake-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 6px 12px 14px; }
.dash-fake-grid span { text-align: center; font-size: 12px; padding: 5px 0; border-radius: 8px; background: var(--header-bg); color: var(--muted); }
.dash-fake-rows { display: flex; flex-direction: column; gap: 10px; padding: 8px 18px 16px; }
.dash-fake-row { display: flex; align-items: center; gap: 10px; }
.dash-fake-row span { height: 12px; border-radius: 6px; background: var(--header-bg); }
.dash-fake-row .a { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; }
.dash-fake-row .b { flex: 1; }
.dash-fake-row .c { width: 70px; }
.dash-stat-card.is-locked { cursor: default; }
.dash-stat-card.is-locked .dash-stat-icon, .dash-stat-card.is-locked .dash-stat-icon-m { opacity: .7; }
.dash-blur { filter: blur(5px); user-select: none; }
/* ===== داشبورد: قفلِ کوچیک گوشه‌ی پایینِ کارت (بدونِ متن) ===== */
.dash-lock-overlay {
inset: auto auto 10px 10px !important; padding: 0 !important; display: flex; align-items: center; justify-content: center;
}
.dash-lock-overlay .ic {
width: 14px !important; height: 14px !important; padding: 6px !important;
background: var(--surface); border: 1px solid var(--border); color: var(--muted); border-radius: 50%;
}
.dash-stat-card.is-locked .dash-stat-icon, .dash-stat-card.is-locked .dash-stat-icon-m { opacity: 1; }
/* ===== تنظیمات: سرتیترِ بخش‌ها با آیکون و انتخابگرِ میان‌برها به‌شکلِ کاشیِ گروه‌بندی‌شده ===== */
.settings-page .settings-section-title { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 10px; }
.settings-sec-ic {
width: 28px; height: 28px; border-radius: 9px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
background: var(--sidebar-active-bg); color: var(--accent-text);
}
.settings-sec-ic .ic { width: 16px; height: 16px; }
.sc-available, #dashQuickItemsWrap { display: flex !important; flex-direction: column; gap: 12px; padding: 10px 12px 14px; }
#dashQuickItemsWrap { grid-template-columns: none !important; }
.sc-group-title { font-size: 11.5px; font-weight: 800; color: var(--muted); margin-bottom: 6px; padding: 0 2px; }
.sc-group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.sc-pick {
position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 10px; min-width: 0;
border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer;
font-size: 12.5px; font-weight: 600; color: var(--text); transition: border-color .15s, background .15s;
}
.sc-pick input { position: absolute; opacity: 0; pointer-events: none; }
.sc-pick-icon { width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--header-bg); color: var(--muted); }
.sc-pick-icon .ic { width: 15px; height: 15px; }
.sc-pick-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .sc-pick:not(.is-disabled):hover { border-color: var(--accent); } }
.sc-pick.is-on, .sc-pick:has(input:checked) { border-color: var(--accent-text); background: var(--sidebar-active-bg); color: var(--accent-text); }
.sc-pick.is-on .sc-pick-icon, .sc-pick:has(input:checked) .sc-pick-icon { background: var(--accent); color: #fff; }
.sc-pick.is-disabled { opacity: .45; cursor: not-allowed; }
.shortcut-item-check .sc-pick-icon { width: 24px; height: 24px; }
@media (max-width: 640px) { .sc-group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ===== درختِ دسترسیِ کارمند: خلاصه‌ی بالا + درختِ بسته با فلش ===== */
.emp-perm-tree { max-height: none; padding: 0; border: none; background: none; gap: 10px; }
.emp-perm-summary {
display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px;
background: var(--surface); border: 1px solid var(--border);
}
.emp-perm-summary-empty { font-size: 12px; color: var(--muted); }
.emp-perm-summary-item { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; }
.emp-perm-summary-root { font-weight: 800; color: var(--text); white-space: nowrap; padding-top: 2px; }
.emp-perm-summary-subs { display: flex; flex-wrap: wrap; gap: 4px; }
.emp-perm-chip { border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 600; background: var(--sidebar-active-bg); color: var(--accent-text); }
.emp-perm-chip.is-muted { background: var(--header-bg); color: var(--muted); }
.emp-perm-tree-rows {
display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--border);
border-radius: 10px; padding: 6px; max-height: 340px; overflow-y: auto;
}
.emp-perm-row { display: flex; align-items: center; gap: 4px; padding: 3px 4px; padding-right: calc(4px + var(--lvl, 0) * 20px); }
.emp-perm-row:not(.lvl-0)::before { content: none !important; }
.emp-perm-label { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; cursor: pointer; font-size: 13px; padding: 4px 4px; border-radius: 8px; }
@media (hover: hover) { .emp-perm-label:hover { background: var(--header-bg); } }
.emp-perm-row.lvl-0 .emp-perm-label { font-weight: 800; }
.emp-perm-caret, .emp-perm-caret-spacer { width: 26px; height: 26px; flex-shrink: 0; }
.emp-perm-caret {
display: inline-flex; align-items: center; justify-content: center; border: none; background: none;
color: var(--muted); cursor: pointer; border-radius: 7px; padding: 0;
}
.emp-perm-caret .ic { width: 16px; height: 16px; transition: transform .2s; }
.emp-perm-row.is-open > .emp-perm-caret .ic { transform: rotate(-90deg); }
@media (hover: hover) { .emp-perm-caret:hover { background: var(--header-bg); color: var(--text); } }
.emp-perm-label input[type="checkbox"] { width: 16px !important; height: 16px; margin: 0; flex: 0 0 auto; accent-color: var(--accent); padding: 0 !important; border: none !important; }
/* ===== نوارِ پایینِ موبایل: دکمه‌ی بخشِ فعال متمایز (هم‌زبانِ تب‌های فعالِ اپ)؛ بدونِ دکمه‌ی «اصلی» ===== */
.mobile-shortcut-bar button.mobile-shortcut-main { border: none; }
.mobile-shortcut-bar button .mobile-shortcut-icon {
width: 38px; height: 26px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
transition: background-color .2s ease, color .2s ease;
}
.mobile-shortcut-bar button.active { color: var(--accent-text); font-weight: 800; }
.mobile-shortcut-bar button.active .mobile-shortcut-icon { background: var(--accent); color: #fff; }
/* وقتی فقط متن نمایش داده می‌شه، خودِ دکمه قرصِ رنگی می‌گیره */
.mobile-shortcut-bar button.active:not(:has(.mobile-shortcut-icon)) { background: var(--sidebar-active-bg); }
.shortcut-item-row.is-main { background: none; }
/* گزینه‌ی میانبر وقتی ظرفیت پره: کم‌رنگ ولی قابلِ کلیک (تا پیامِ راهنما نشون داده بشه) */
.sc-pick.is-full { opacity: .55; }
/* =====================================================================
تبِ «اعلان‌ها و پیامک‌ها» — هم‌زبانِ تم (سرستون‌های آیکون‌دار، تیک‌های قرصی، کارتِ اعتبار)
===================================================================== */
.notif-test-row { padding: 0 14px 12px; text-align: left; }
.notif-test-row .btn-ghost { font-size: 12px; padding: 6px 14px; border-radius: 999px; }
.notif-credit-card .settings-row { align-items: center; }
.notif-credit-ic {
width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
background: var(--success-soft); color: var(--success);
}
.notif-credit-card.is-empty .notif-credit-ic { background: var(--danger-soft); color: var(--danger); }
.notif-credit-ic .ic { width: 19px; height: 19px; }
.notif-credit-btn { font-size: 12px !important; padding: 7px 14px !important; border-radius: 999px !important; white-space: nowrap; min-height: 0 !important; }
.notif-caption { font-size: 11.5px; color: var(--muted); line-height: 1.8; margin: -4px 2px 8px; }
.notif-matrix thead th { background: var(--header-bg); border-bottom: none; padding: 8px 6px; }
.notif-matrix thead th:first-child { border-radius: 0 10px 10px 0; }
.notif-matrix thead th:last-child { border-radius: 10px 0 0 10px; }
.nm-head { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10.5px; font-weight: 800; color: var(--muted); }
.nm-head .ic { width: 15px; height: 15px; }
.notif-matrix td.nm-label { font-weight: 600; font-size: 12.5px; }
@media (hover: hover) { .notif-matrix tbody tr:hover td { background: var(--header-bg); } }
/* تیکِ هر خونه: مربعِ گردِ رنگی به‌جای چک‌باکسِ پیش‌فرضِ مرورگر */
.notif-matrix input[type="checkbox"] {
appearance: none; -webkit-appearance: none; width: 22px; height: 22px; border-radius: 7px;
border: 1.5px solid var(--border); background: var(--surface); display: inline-grid; place-content: center;
transition: background-color .15s, border-color .15s; vertical-align: middle;
}
.notif-matrix input[type="checkbox"]::after {
content: ''; width: 5px; height: 9px; border: solid #fff; border-width: 0 2.2px 2.2px 0;
transform: rotate(45deg) translate(-1px, -1px); opacity: 0;
}
.notif-matrix input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
.notif-matrix input[type="checkbox"]:checked::after { opacity: 1; }
.notif-matrix .nm-locked {
width: 22px; height: 22px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center;
background: var(--sidebar-active-bg); color: var(--accent-text); vertical-align: middle;
}
.notif-matrix .nm-locked .ic { width: 12px; height: 12px; }
.notif-matrix .nm-note {
display: inline-block; margin-inline-start: 6px; font-size: 10px; font-weight: 700;
background: var(--header-bg); color: var(--muted); border-radius: 999px; padding: 1px 7px;
}
/* ===== منوی پایینِ موبایل: آیکون‌های بزرگ‌تر؛ حالتِ فقط‌متن هم پس‌زمینه‌ی رنگی می‌گیره ===== */
.mobile-shortcut-bar button .mobile-shortcut-icon { width: 46px; height: 30px; }
.mobile-shortcut-bar button .mobile-shortcut-icon .ic { width: 22px !important; height: 22px !important; }
.mobile-shortcut-bar button { font-size: 11px; }
.mobile-shortcut-bar button.active:not(:has(.mobile-shortcut-icon)) {
background: var(--accent); color: #fff; border-radius: 12px; margin: 5px 1px;
}
/* =====================================================================
پروفایلِ حساب — هم‌زبانِ تمِ اوکرو
===================================================================== */
.profile-hero {
display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
padding: 18px 12px 16px; margin-bottom: 14px; border-radius: 18px;
background: var(--sidebar-active-bg); border: 1px solid var(--border);
}
.profile-avatar-box {
position: relative; width: 92px; height: 92px; border-radius: 50%; cursor: pointer;
background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center;
font-size: 34px; font-weight: 800; box-shadow: 0 0 0 4px var(--surface); overflow: visible;
}
.profile-avatar-box img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; transition: opacity .2s; }
.profile-avatar-edit {
position: absolute; bottom: 0; left: 0; width: 30px; height: 30px; border-radius: 50%;
background: var(--surface); color: var(--accent-text); border: 1px solid var(--border);
display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.profile-avatar-edit .ic { width: 15px; height: 15px; }
.profile-hero .cust-photo-progress { width: 120px; margin-top: 6px; }
.profile-hero-name { font-size: 16px; font-weight: 800; margin-top: 8px; }
.profile-hero-phone { font-size: 12.5px; color: var(--muted); direction: ltr; }
.profile-avatar-remove {
background: none; border: none; color: var(--danger); font: inherit; font-size: 12px; cursor: pointer; padding: 2px 8px; margin-top: 2px;
}
.profile-form { padding: 4px 0 0; }
.profile-phone-box { padding: 12px 14px 14px; border-top: 1px dashed var(--border); }
.profile-phone-actions, .profile-backup-actions, .biz-transfer-actions {
display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px;
}
.profile-backup-actions { padding: 0 14px 14px; margin-top: 0; }
.profile-backup-actions .btn-ghost { flex: 1; }
.profile-logout {
width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 6px 0 16px;
padding: 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface);
color: var(--danger); font: inherit; font-weight: 700; cursor: pointer;
}
.profile-logout .ic { width: 18px; height: 18px; }
@media (hover: hover) { .profile-logout:hover { background: var(--danger-soft); } }
/* آواتارِ فوترِ سایدبار با عکس */
.account-footer-avatar.has-img { padding: 0; overflow: hidden; background: none; }
.account-footer-avatar.has-img img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
/* =====================================================================
واگذاریِ کسب‌وکار
===================================================================== */
.biz-transfer-box { max-width: 460px; }
.biz-transfer-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-left: 30px; }
.biz-transfer-head h4 { margin: 0 0 2px; }
.biz-transfer-ic {
width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
background: var(--sidebar-active-bg); color: var(--accent-text);
}
.biz-transfer-ic .ic { width: 21px; height: 21px; }
.biz-transfer-warn {
font-size: 12.5px; line-height: 2; padding: 10px 12px; border-radius: 12px;
background: var(--warning-soft, var(--header-bg)); color: var(--text);
}
.biz-transfer-empty { font-size: 13px; line-height: 2.1; color: var(--muted); text-align: center; padding: 14px 6px; }
.biz-transfer-list { display: flex; flex-direction: column; gap: 8px; max-height: 44vh; overflow-y: auto; }
.biz-transfer-item {
display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; cursor: pointer;
border: 1.5px solid var(--border); background: var(--surface); transition: border-color .15s, background-color .15s;
}
.biz-transfer-item input { display: none; }
.biz-transfer-item.is-on { border-color: var(--accent); background: var(--sidebar-active-bg); }
.biz-transfer-avatar {
width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
background: var(--accent); color: #fff; font-weight: 800;
}
.biz-transfer-radio {
width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0; position: relative;
}
.biz-transfer-item.is-on .biz-transfer-radio { border-color: var(--accent); }
.biz-transfer-item.is-on .biz-transfer-radio::after {
content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent);
}
.biz-transfer-pending { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: var(--header-bg); }
.biz-transfer-actions .btn-save, .biz-transfer-actions .btn-delete { flex: 1; }
.biz-transfer-actions .btn-save[disabled] { opacity: .5; cursor: not-allowed; }
/* =====================================================================
داشبوردِ ویترین — هم‌زبانِ تمِ اوکرو
===================================================================== */
#sfDashStatsRow { margin-bottom: 16px; }
#sfDashStatsRow:empty { display: none; }
.sf-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; min-width: 0; }
.sf-card-head h4 { margin: 0 0 1px !important; font-size: 14px; }
.sf-card-head .settings-row-desc { padding: 0; margin: 0; font-size: 11.5px; }
.sf-card-ic {
width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
background: var(--sidebar-active-bg); color: var(--accent-text);
}
.sf-card-ic .ic { width: 18px; height: 18px; }
.sf-card-ic.tone-info { background: var(--info-soft); color: var(--info); }
.sf-card-ic.tone-success { background: var(--success-soft); color: var(--success); }
.sf-card-ic.tone-warning { background: var(--warning-soft); color: var(--warning); }
.sf-card-ic.tone-danger { background: var(--danger-soft); color: var(--danger); }
#sfPanelDashboard .storefront-card { border-radius: 16px; padding: 16px; }
/* کارتِ وضعیت: فقط دو ردیف با کلیدِ روشن/خاموش */
.sf-status-list { display: flex; flex-direction: column; gap: 8px; }
.sf-status-item {
display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 13px;
background: var(--header-bg); border: 1.5px solid transparent; transition: border-color .15s, background-color .15s;
}
.sf-status-item.is-on { border-color: var(--accent); background: var(--sidebar-active-bg); }
.sf-status-item-ic {
width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
background: var(--surface); color: var(--muted);
}
.sf-status-item.is-on .sf-status-item-ic { background: var(--accent); color: #fff; }
.sf-status-item-ic .ic { width: 17px; height: 17px; }
.sf-status-item-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sf-status-item-txt b { font-size: 13px; }
.sf-status-item-sub { font-size: 11px; font-weight: 700; color: var(--muted); }
.sf-status-item-sub.ok { color: var(--success); }
.sf-status-switch { flex-shrink: 0; }
.sf-status-unlock { font-size: 12px !important; padding: 6px 14px !important; border-radius: 999px !important; white-space: nowrap; }
@media (min-width: 721px) { #sfStatusCard .sf-status-list { flex-direction: row; } #sfStatusCard .sf-status-item { flex: 1; } }
/* نمودار و خلاصه */
.sf-stats-summary-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px !important; background: var(--header-bg) !important; }
.sf-pill-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
/* میانگینِ فروش به ازای هر بازدید */
.sf-avg-value { font-size: 20px; font-weight: 800; color: var(--text); line-height: 1.4; }
.sf-avg-change { display: inline-block; margin-top: 6px; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; }
.sf-avg-change:empty { display: none; }
.sf-avg-change.is-up { background: var(--success-soft); color: var(--success); }
.sf-avg-change.is-down { background: var(--danger-soft); color: var(--danger); }
/* منابع ورودی */
.sf-traffic-row { font-size: 12.5px; padding: 7px 0; }
.sf-traffic-row-bar { height: 8px; border-radius: 999px; background: var(--header-bg); }
.sf-traffic-row-bar-fill { border-radius: 999px; }
/* کارت‌های ستونِ کناری */
.sf-dash-bank-row { border-radius: 12px; border: none; padding: 10px 12px; }
.sf-dash-bank-num { display: block; }
.sf-dash-bank-holder { display: block; }
.sf-dash-code-row { padding: 8px 0; }
.sf-dash-code { background: var(--header-bg); border-radius: 8px; padding: 3px 8px; flex: 0 1 auto; font-size: 12px; letter-spacing: .3px; }
.sf-dash-code-val { flex: 1; text-align: left; font-weight: 700; color: var(--text); }
.sf-status-pill { border: none !important; }
.sf-status-pill.ok { background: var(--success-soft) !important; color: var(--success) !important; }
.sf-status-pill.off { background: var(--danger-soft) !important; color: var(--danger) !important; }
#sfPanelDashboard .btn-ghost[onclick^="switchStorefrontTab"] { border-radius: 999px; }
.storefront-card.sf-card-danger { border-color: var(--danger) !important; background: var(--danger-soft) !important; }
.sf-sms-credit { border-radius: 12px; }
.sf-sms-credit.low { background: var(--surface); border-color: var(--danger); }
.sf-sms-credit.low .sf-sms-credit-value, .sf-sms-warn { color: var(--danger); }
/* موبایل: «منابع ورودی» و «فروش به ازای هر بازدید» کنارِ هم (۵۰/۵۰) */
@media (max-width: 1180px) {
.sf-dash-stats-side { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
}
@media (max-width: 720px) {
.sf-dash-stats-side { gap: 10px; }
.sf-dash-stats-side .storefront-card { padding: 12px; }
.sf-dash-stats-side .sf-card-head { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 8px; }
.sf-dash-stats-side .sf-card-head h4 { font-size: 12.5px; }
.sf-dash-stats-side .sf-card-head .settings-row-desc { display: none; }
.sf-dash-stats-side .sf-traffic-row { font-size: 11px; gap: 5px; }
.sf-dash-stats-side .sf-traffic-row-name { max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-avg-value { font-size: 16px; }
}
.dash-sf-status .sf-card-head { display: none; }
/* ===== داشبوردِ ویترین — دورِ دوم: پیش‌نمایش، نرخ تبدیل، پرفروش‌ها، کارتِ واحدِ پیامک ===== */
.sf-avg-value small { font-size: 13px; font-weight: 700; margin-inline-start: 2px; color: var(--muted); }
.sf-preview-card2 #sfPreviewButtons { display: flex; flex-direction: column; gap: 8px; }
.sf-preview-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 13px; background: var(--header-bg); min-width: 0; }
.sf-preview-row-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sf-preview-row-txt b { font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
.sf-preview-url { font-size: 11px; color: var(--muted); direction: ltr; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-preview-btn {
width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer;
}
.sf-preview-btn .ic { width: 16px; height: 16px; }
.sf-preview-btn.is-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (hover: hover) { .sf-preview-btn:not(.is-primary):hover { border-color: var(--accent); color: var(--accent-text); } }
.sf-top-row { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--border); min-width: 0; }
.sf-top-row:last-child { border-bottom: none; }
.sf-top-rank {
width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 800; background: var(--header-bg); color: var(--muted);
}
.sf-top-rank.r1 { background: var(--warning-soft); color: var(--warning); }
.sf-top-rank.r2 { background: var(--info-soft); color: var(--info); }
.sf-top-rank.r3 { background: var(--success-soft); color: var(--success); }
.sf-top-img {
width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; overflow: hidden; background: var(--sidebar-active-bg);
color: var(--accent-text); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px;
}
.sf-top-img img { width: 100%; height: 100%; object-fit: cover; }
.sf-top-name { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-top-meta { font-size: 11px; color: var(--muted); text-align: left; line-height: 1.5; flex-shrink: 0; }
.sf-top-meta b { color: var(--text); font-size: 12px; }
.sf-sms-credit { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sf-sms-charge { font-size: 12px !important; padding: 7px 14px !important; border-radius: 999px !important; white-space: nowrap; min-height: 0 !important; }
.sf-sms-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; }
.sf-sms-sub { font-size: 11.5px; font-weight: 800; color: var(--muted); margin-bottom: 4px; }
@media (max-width: 720px) { .sf-sms-cols { grid-template-columns: 1fr; gap: 10px; } }
/* ===== داشبوردِ ویترین — موبایل: وضعیتِ دو ویترین کنارِ هم، و ترتیبِ کارت‌ها ===== */
.sf-status-list { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 720px) {
.sf-status-item { padding: 9px 10px; gap: 8px; }
.sf-status-item-ic { display: none; }
.sf-status-item-txt b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sfStatusCard .sf-card-head { margin-bottom: 8px; }
}
@media (max-width: 900px) {
/* ستون‌ها باز می‌شن تا ترتیبِ کارت‌ها مستقل از ستونِ دسکتاپ چیده بشه */
.sf-dash-grid { display: flex !important; flex-direction: column; gap: 14px; align-items: stretch !important; }
.sf-dash-main, .sf-dash-side { display: contents; }
#sfStatusCard { order: 1; }
.sf-dash-stats-row { order: 2; }
#sfTopProductsCard { order: 5; }
#sfDashBankCard { order: 6; }
#sfDashDiscountsCard { order: 7; }
#sfSmsUsageCard { order: 8; }
}
/* ===== تبِ سفارش‌ها — کارتِ لیست هم‌ساختارِ فاکتورها ===== */
#sfPanelOrders .invoice-container { margin-top: 0; }
.sfo-printed-badge { background: var(--header-bg) !important; color: var(--muted) !important; margin-inline-start: 4px; display: inline-flex; align-items: center; gap: 3px; }
.sfo-printed-badge .ic { width: 12px; height: 12px; }
@media (max-width: 768px) { .inv-list-wrap .sfo-printed-badge { display: none; } }
/* ===== کارتِ وضعیتِ ویترین: فقط لینکِ فعلی (کلید + کپی + ارسال) ===== */
.sf-cur { border-radius: 14px; background: var(--header-bg); border: 1.5px solid transparent; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.sf-cur.is-on { border-color: var(--accent); background: var(--sidebar-active-bg); }
.sf-cur-top { display: flex; align-items: center; gap: 10px; }
.sf-cur.is-on .sf-status-item-ic { background: var(--accent); color: #fff; }
.sf-cur-link { display: flex; align-items: center; gap: 6px; min-width: 0; background: var(--surface); border-radius: 11px; padding: 5px 5px 5px 5px; padding-inline-start: 10px; }
.sf-cur-link .sf-preview-url { flex: 1; min-width: 0; font-size: 12px; }
.sf-cur-link .sf-preview-btn { width: 32px; height: 32px; }
@media (max-width: 720px) { .sf-cur .sf-status-item-ic { display: inline-flex; } }
/* کارتِ لینک‌ها در تنظیمات */
.sf-preview-row.is-current { outline: 1.5px solid var(--accent); }
.sf-cur-tag { font-size: 10px; font-weight: 800; background: var(--accent); color: #fff; border-radius: 999px; padding: 1px 8px; }
.sf-preview-note { font-size: 10.5px; color: var(--muted); }
#sfPreviewCard .sf-acc-head .sf-card-head h4 { margin: 0; }
/* موبایل: کارت‌های داشبوردِ ویترین تمام‌عرض (align-items:start ِ گریدِ دسکتاپ اون‌ها رو هم‌اندازه‌ی محتوا می‌کرد) */
@media (max-width: 900px) {
.sf-dash-grid > *, .sf-dash-main > *, .sf-dash-side > *, .sf-dash-stats-row { width: 100%; min-width: 0; box-sizing: border-box; }
.sf-dash-stats-row { align-items: stretch; }
}
/* آدرسِ لینک‌ها پررنگ‌تر و خواناتر */
.sf-preview-url { color: var(--text) !important; font-weight: 700; font-size: 12px; opacity: .85; }
.sf-cur-link .sf-preview-url { font-size: 12.5px; opacity: 1; }
/* =====================================================================
تبِ تنظیماتِ ویترین — هم‌زبانِ تمِ اوکرو (سرتیترِ آیکون‌دار، کلیدهای toggle، باکس‌های گرد)
===================================================================== */
#sfPanelSettings .storefront-card { border-radius: 16px; }
#sfPanelSettings .sf-acc-head .sf-card-head h4 { margin: 0 0 1px; font-size: 14px; }
#sfPanelSettings .sf-acc-head .sf-card-head .settings-row-desc { font-size: 11.5px; line-height: 1.7; }
.sf-card-ic.tone-purple { background: var(--purple-soft); color: var(--purple); }
.sf-card-ic.tone-neutral { background: var(--header-bg); color: var(--muted); }
.sf-field-label { font-size: 12.5px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.sf-hint { font-size: 11.5px; color: var(--muted); line-height: 1.9; margin-top: 8px; }
.sf-hint-warn { background: var(--warning-soft); color: var(--warning); border-radius: 10px; padding: 8px 10px; }
.sf-pro-tag { font-size: 10px; font-weight: 800; background: var(--accent); color: #fff; border-radius: 999px; padding: 1px 7px; margin-inline-start: 4px; vertical-align: middle; }
.sf-domain-modes { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
.sf-domain-modes .sms-provider-option { border-radius: 13px; }
.sf-domain-modes .sms-provider-option small { font-size: 11px; line-height: 1.7; }
@media (max-width: 420px) { .sf-domain-modes { grid-template-columns: 1fr; } }
.sf-copy-box, .sf-slug-box {
display: flex; align-items: center; gap: 6px; min-width: 0;
background: var(--header-bg); border-radius: 12px; padding: 5px; padding-inline-start: 10px;
}
.sf-copy-box input, .sf-slug-box input {
flex: 1; min-width: 0; border: none !important; background: transparent !important; box-shadow: none !important;
direction: ltr; text-align: left; font-weight: 700; font-size: 12.5px; color: var(--text); padding: 6px 4px; width: auto !important;
}
.sf-slug-box input { background: var(--surface) !important; border-radius: 9px; padding: 7px 10px; }
.sf-slug-box .btn-save, .sf-slug-box .btn-ghost { flex-shrink: 0; padding: 7px 14px; font-size: 12.5px; border-radius: 9px; min-height: 0; }
.sf-slug-prefix { font-size: 11.5px; color: var(--muted); white-space: nowrap; direction: ltr; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.sf-slug-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.sf-slug-actions .settings-row-desc { padding: 0; font-size: 11.5px; flex: 1; min-width: 0; }
.sf-slug-actions .btn-save { padding: 7px 16px; font-size: 12.5px; border-radius: 999px; min-height: 0; flex-shrink: 0; }
.sf-lock-box { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.9; background: var(--sidebar-active-bg); border-radius: 12px; padding: 12px; margin-bottom: 4px; }
.sf-lock-box .btn-save { border-radius: 999px; font-size: 12.5px; padding: 7px 16px; }
/* ردیفِ دامنه */
.sf-domain-row { border-radius: 12px !important; background: var(--header-bg); border: 1.5px solid transparent !important; padding: 10px 12px !important; }
.sf-domain-row.primary { border-color: var(--accent) !important; background: var(--sidebar-active-bg); }
.sf-domain-name { font-weight: 800; direction: ltr; color: var(--text); }
.sf-domain-row-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.sf-domain-row-tools .btn-ghost { font-size: 11.5px; padding: 5px 12px; border-radius: 999px; }
.sf-domain-row-status { display: block; width: 100%; margin-top: 4px; }
/* راهنمای نام‌سرور */
.sf-steps { margin: 4px 0 0; padding-inline-start: 18px; font-size: 12.5px; line-height: 2; }
.sf-steps li { margin-bottom: 6px; }
.sf-ns-row { display: flex; align-items: center; gap: 8px; background: var(--header-bg); border-radius: 11px; padding: 5px 5px 5px 5px; padding-inline-start: 10px; margin-top: 6px; }
.sf-ns-label { font-size: 11px; color: var(--muted); white-space: nowrap; }
.sf-ns-row code { flex: 1; direction: ltr; text-align: left; font-weight: 800; font-size: 13px; background: none; color: var(--text); }
/* ارجاعِ پیامک‌ها به تنظیمات */
.sf-inline-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--header-bg); font-size: 11.5px; color: var(--muted); line-height: 1.8; }
.sf-inline-link .btn-ghost { flex-shrink: 0; font-size: 12px; padding: 5px 12px; border-radius: 999px; }
/* ردیف‌های toggle و دکمه‌های انتخابی */
#sfPanelSettings .settings-card { border-radius: 12px; }
#sfPanelSettings label.settings-row { align-items: center; }
.sf-mode-btn, .sf-size-btn, .sf-ppr-btn { border-radius: 999px !important; }
.sf-bank-card-row { border-radius: 12px !important; border: none !important; }
@media (max-width: 900px) {
#sfPanelSettings .sf-acc-head { padding: 12px 14px; }
#sfPanelSettings .sf-acc-body { padding: 0 14px 14px; }
.sf-inline-link { flex-direction: column; align-items: stretch; }
.sf-slug-prefix { max-width: 50%; }
}
/* ===== زیردامنه (ثانویه) در کارتِ دامنه ===== */
.sf-sub-box { margin-top: 14px; border-radius: 14px; background: var(--header-bg); overflow: hidden; }
.sf-sub-toggle { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: none; border: none; font: inherit; color: var(--text); text-align: right; cursor: pointer; }
.sf-sub-toggle b { display: block; font-size: 12.5px; }
.sf-sub-toggle small { display: block; font-size: 11px; color: var(--muted); line-height: 1.7; }
.sf-sub-toggle .sf-card-ic { width: 30px; height: 30px; border-radius: 9px; background: var(--surface); }
.sf-sub-caret { color: var(--muted); transition: transform .2s; flex-shrink: 0; }
.sf-sub-box.open .sf-sub-caret { transform: rotate(180deg); }
.sf-sub-body { padding: 0 12px 12px; }
.sf-sub-body .sf-slug-box { background: var(--surface); }
.sf-sub-body .sf-slug-box input { background: var(--header-bg) !important; }
.sf-rec { display: flex; flex-direction: column; gap: 5px; background: var(--surface); border-radius: 11px; padding: 8px 10px; margin-top: 6px; }
.sf-rec > div { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.sf-rec span { color: var(--muted); min-width: 36px; }
.sf-rec code { direction: ltr; font-weight: 800; color: var(--text); background: none; flex: 1; text-align: left; }
.sf-rec .sf-preview-btn { width: 30px; height: 30px; }
.sf-domain-badge.is-sub { background: var(--header-bg); color: var(--muted); }
/* ===== کارتِ محصول: دکمه‌ی حذفِ هر عکس (همیشه پیدا، حتی در موبایل) + عکسِ شکسته ===== */
.prod-gallery-slot { position: relative; }
.prod-img-remove {
position: absolute; top: 5px; left: 5px; z-index: 3; width: 24px; height: 24px; border-radius: 50%;
border: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
background: rgba(0,0,0,.6); color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.prod-img-remove .ic { width: 13px; height: 13px; }
@media (hover: hover) { .prod-img-remove:hover { background: var(--danger); } }
.prod-img-broken { display: none; }
.prod-gallery-slot.is-broken img { display: none; }
.prod-gallery-slot.is-broken { background: var(--danger-soft); }
.prod-gallery-slot.is-broken .prod-img-broken {
display: flex; position: absolute; inset: 0; align-items: center; justify-content: center; text-align: center;
font-size: 10.5px; font-weight: 700; color: var(--danger); padding: 4px;
}
/* «شاخص کن» در موبایل هم دیده بشه (قبلاً فقط با هاور) */
@media (hover: none) {
.prod-gallery-slot .prod-img-actions { display: flex; inset: auto 0 0 0; padding: 3px; background: rgba(0,0,0,.45); }
.prod-gallery-slot .prod-img-actions:empty { display: none; }
}
/* ===== کارتِ سئو ===== */
.sf-seo-toggle { padding: 0 !important; border: none !important; }
.sf-seo-input { width: 100% !important; border-radius: 10px !important; }
textarea.sf-seo-input { resize: vertical; font-family: inherit; }
.sf-count { font-size: 10.5px; font-weight: 700; color: var(--muted); background: var(--header-bg); border-radius: 999px; padding: 1px 7px; margin-inline-start: 4px; }
.sf-count.is-over { color: var(--danger); background: var(--danger-soft); }
.sf-serp { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; direction: rtl; }
.sf-serp-url { font-size: 11.5px; color: #188038; direction: ltr; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-serp-title { font-size: 15px; color: #1a0dab; margin: 3px 0; line-height: 1.6; }
html[data-theme="dark"] .sf-serp-title { color: #8ab4f8; }
.sf-serp-desc { font-size: 12.5px; color: var(--muted); line-height: 1.8; }
.sf-serp-off { margin-top: 6px; font-size: 11px; font-weight: 700; color: var(--danger); }
.sf-tips { list-style: disc; }
.prod-seo-box { border: 1px dashed var(--border); border-radius: 12px; padding: 8px 12px; }
.prod-seo-box summary { cursor: pointer; font-size: 12.5px; font-weight: 700; }
.prod-seo-box summary small { font-weight: 500; color: var(--muted); margin-inline-start: 4px; }
.prod-seo-box[open] summary { margin-bottom: 8px; }
/* =====================================================================
صفحه‌ساز (تب «طراحی سایت»)
===================================================================== */
.sb-layout { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 16px; align-items: start; }
.sb-editor { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px; }
.sb-toolbar { display: flex; gap: 8px; align-items: center; }
.sb-toolbar select { flex: 1; min-width: 0; border-radius: 10px !important; }
.sb-add-btn { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px !important; font-size: 13px; padding: 8px 14px !important; white-space: nowrap; }
.sb-add-btn .ic { width: 16px; height: 16px; }
.sb-hint { font-size: 11.5px; color: var(--muted); line-height: 1.9; margin: 10px 2px; }
.sb-item { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 13px; background: var(--header-bg); border: 1.5px solid transparent; margin-bottom: 8px; }
.sb-item.drag-over { border-color: var(--accent); border-style: dashed; }
.sb-item.is-off { opacity: .55; }
.sb-grip { color: var(--muted); cursor: grab; display: inline-flex; }
.sb-grip .ic { width: 16px; height: 16px; }
.sb-ic { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); color: var(--accent-text); }
.sb-ic .ic { width: 18px; height: 18px; }
.sb-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sb-info b { font-size: 13px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sb-info small { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-kind { font-size: 10px; font-weight: 800; border-radius: 999px; padding: 1px 7px; }
.sb-kind.auto { background: var(--info-soft); color: var(--info); }
.sb-kind.manual { background: var(--warning-soft); color: var(--warning); }
.sb-badges { display: flex; gap: 4px; flex-wrap: wrap; }
.sb-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; background: var(--surface); color: var(--muted); border-radius: 999px; padding: 1px 7px; }
.sb-badge .ic { width: 11px; height: 11px; }
.sb-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.sb-mini { width: 28px; height: 28px; border-radius: 8px; border: none; background: transparent; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.sb-mini .ic { width: 15px; height: 15px; }
.sb-mini:hover:not(:disabled) { background: var(--surface); color: var(--accent-text); }
.sb-mini.is-danger:hover { color: var(--danger); }
.sb-mini:disabled { opacity: .3; cursor: default; }
.sb-actions .toggle-switch { margin-inline-start: 4px; }
.sb-preview { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 10px; position: sticky; top: 12px; }
.sb-preview-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12.5px; font-weight: 800; }
.sb-preview-devs { display: inline-flex; gap: 2px; background: var(--header-bg); border-radius: 999px; padding: 3px; margin-inline-start: auto; }
.sb-preview-devs button { border: none; background: transparent; font: inherit; font-size: 11.5px; padding: 4px 12px; border-radius: 999px; cursor: pointer; color: var(--muted); }
.sb-preview-devs button.active { background: var(--surface); color: var(--text); font-weight: 700; }
.sb-frame-wrap { border-radius: 12px; overflow: hidden; background: var(--header-bg); height: 72vh; display: flex; justify-content: center; }
.sb-frame-wrap iframe { width: 100%; height: 100%; border: none; background: #fff; }
.sb-frame-wrap.is-mobile iframe { width: 390px; max-width: 100%; border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
.sb-catalog { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sb-cat-item { display: flex; align-items: center; gap: 10px; text-align: right; padding: 10px; border-radius: 13px; border: 1.5px solid var(--border); background: var(--surface); cursor: pointer; font: inherit; color: var(--text); }
.sb-cat-item:hover { border-color: var(--accent); }
.sb-cat-item b { display: block; font-size: 13px; margin-bottom: 3px; }
.sb-divider { border-top: 1px dashed var(--border); margin: 12px 0; }
@media (max-width: 1000px) {
.sb-layout { grid-template-columns: 1fr; }
.sb-preview { position: static; }
.sb-frame-wrap { height: 60vh; }
}
@media (max-width: 520px) {
.sb-catalog { grid-template-columns: 1fr; }
.sb-grip { display: none; }
.sb-item { flex-wrap: wrap; }
.sb-actions { width: 100%; justify-content: flex-end; border-top: 1px solid var(--border); padding-top: 6px; }
}
/* آیتم‌های کارت‌های لیستی در تنظیمات */
.sb-items-field { margin: 6px 0; }
.sb-items-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sb-items-head b { font-size: 13px; }
.sb-items-add { font-size: 12px !important; padding: 5px 12px !important; border-radius: 999px !important; }
#sbItemsList { max-height: 46vh; overflow-y: auto; }
.sb-it { background: var(--header-bg); border-radius: 12px; padding: 8px 10px; margin-bottom: 8px; }
.sb-it-head { display: flex; align-items: center; gap: 2px; margin-bottom: 4px; }
.sb-it-head b { font-size: 12px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.sb-it .field-line { margin-bottom: 6px; }
.sb-it-img { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; }
.sb-it-thumb { width: 64px; height: 48px; border-radius: 9px; background: var(--surface); border: 1px dashed var(--border); overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.sb-it-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sb-it-label { font-size: 11.5px; color: var(--muted); margin-bottom: 4px; }
.sb-it-upload { font-size: 11.5px !important; padding: 4px 10px !important; border-radius: 999px !important; cursor: pointer; display: inline-block; }
.sb-it-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--accent); animation: sbspin .8s linear infinite; }
@keyframes sbspin { to { transform: rotate(360deg); } }
/* ===== صفحه‌ساز: تنظیماتِ صفحه + پیام‌های فرم تماس ===== */
.sb-page-gear { width: 38px; height: 38px; border-radius: 10px; background: var(--header-bg); }
.sb-page-info { font-size: 12px; line-height: 1.9; margin: 10px 2px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sb-page-info .sb-pill { font-size: 11px; font-weight: 800; border-radius: 999px; padding: 2px 9px; }
.sb-page-info .sb-pill.on { background: var(--success-soft, #e7f8ee); color: var(--success, #1f9d55); }
.sb-page-info .sb-pill.off { background: var(--warning-soft); color: var(--warning); }
.sb-page-info a { color: var(--accent-text); direction: ltr; }
.sb-page-info button { font: inherit; font-size: 11.5px; border: none; background: none; color: var(--accent-text); cursor: pointer; text-decoration: underline; padding: 0; }
.sb-empty-tag { font-size: 10px; font-weight: 800; border-radius: 999px; padding: 1px 7px; background: var(--surface); color: var(--muted); }
.sb-set-img { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; }
.sfm-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 800; padding: 0 5px; margin-inline-start: 4px; }
.sfm-count[hidden] { display: none; }
.sfm-box { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px; max-width: 860px; }
.sfm-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.sfm-chips { display: inline-flex; gap: 4px; background: var(--header-bg); border-radius: 999px; padding: 3px; }
.sfm-chips button { border: none; background: transparent; font: inherit; font-size: 12.5px; padding: 5px 14px; border-radius: 999px; cursor: pointer; color: var(--muted); }
.sfm-chips button.active { background: var(--surface); color: var(--text); font-weight: 700; }
.sfm-readall { font-size: 12px !important; padding: 6px 12px !important; border-radius: 999px !important; }
.sfm-item { background: var(--header-bg); border-radius: 13px; padding: 12px 14px; margin-bottom: 8px; border-inline-start: 3px solid transparent; cursor: pointer; }
.sfm-item.is-unread { border-inline-start-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 1px var(--border) inset; }
.sfm-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sfm-head b { font-size: 13.5px; }
.sfm-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.sfm-date { font-size: 11.5px; color: var(--muted); margin-inline-start: auto; }
.sfm-src { font-size: 10.5px; color: var(--muted); background: var(--surface); border-radius: 999px; padding: 1px 8px; }
.sfm-text { font-size: 13px; line-height: 2; margin: 6px 0 8px; white-space: pre-line; word-break: break-word; }
.sfm-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sfm-actions a, .sfm-actions button { font: inherit; font-size: 12px; display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 4px 11px; cursor: pointer; text-decoration: none; }
.sfm-actions .is-danger { color: var(--danger); margin-inline-start: auto; }
.sfm-actions .ic { width: 14px; height: 14px; }
/* ویترین حالا تا ۵ تب داره — روی موبایل نوارِ تب‌ها افقی اسکرول می‌خوره به‌جای بیرون‌زدن */
@media (max-width: 700px) {
#storefrontPageView .main-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
#storefrontPageView .main-tabs::-webkit-scrollbar { display: none; }
#storefrontPageView .main-tabs button { padding: 7px 12px; white-space: nowrap; }
}
/* ===== مرحله‌ی ۵: مشخصاتِ فنیِ محصول ===== */
.prod-specs-list { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.prod-spec-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 30px; gap: 6px; align-items: center; }
.prod-spec-row input { min-width: 0; }
.prod-spec-add { font-size: 12px !important; padding: 5px 12px !important; border-radius: 999px !important; align-self: flex-start; }
.sfm-product { font-size: 11.5px; color: var(--accent-text); background: var(--surface); border-radius: 999px; padding: 1px 9px; text-decoration: none; }
#productCardContent textarea#cardProdDescription { width: 100%; font: inherit; resize: vertical; min-height: 70px; }
/* ===== ساید‌بارِ جمع‌شونده (فقط دسکتاپ) ===== */
.nav-pref-hidden { display: none !important; }
.nav-collapse-btn { display: none; }
@media (min-width: 901px) {
.account-sidebar { transition: width .2s ease; }
.nav-collapse-btn {
display: inline-flex; align-items: center; justify-content: center; margin-inline-start: auto;
width: 28px; height: 28px; border-radius: 8px; border: none; cursor: pointer; flex-shrink: 0;
background: rgba(var(--sb-tint), 0.12); color: var(--sb-fg-muted);
}
.nav-collapse-btn:hover { color: rgb(var(--sb-fg)); background: rgba(var(--sb-tint), 0.2); }
.nav-collapse-btn .ic { width: 16px; height: 16px; transition: transform .2s; }
body.nav-collapsed .account-sidebar { width: 68px; overflow-x: hidden; }
body.nav-collapsed .main-nav-logo { flex-direction: column; padding: 14px 0 10px; gap: 8px; }
body.nav-collapsed .main-nav-logo-text { display: none; }
body.nav-collapsed .nav-collapse-btn { margin: 0; }
body.nav-collapsed .nav-collapse-btn .ic { transform: rotate(180deg); }
body.nav-collapsed .active-biz-banner { margin: 10px 8px 0; padding: 8px 0; justify-content: center; }
body.nav-collapsed .active-biz-banner > :not(.biz-logo):not(.biz-logo-placeholder) { display: none; }
body.nav-collapsed .main-nav-primary { padding: 10px 8px; }
body.nav-collapsed .main-nav-primary button { justify-content: center; padding: 9px 0; position: relative; }
body.nav-collapsed .main-nav-primary button > span:not(.main-nav-icon):not(.main-nav-badge) { display: none; }
body.nav-collapsed .main-nav-primary .main-nav-icon { width: 18px; font-size: 16px; }
body.nav-collapsed .main-nav-primary .main-nav-icon .ic { width: 18px; height: 18px; }
body.nav-collapsed .main-nav-primary .main-nav-badge { position: absolute; top: 3px; left: 8px; font-size: 9px; padding: 0 4px; }
body.nav-collapsed #adminPanelSwitch { font-size: 0; margin: 0 8px 10px !important; padding: 9px 0 !important; }
body.nav-collapsed #adminPanelSwitch .ic { font-size: 14px; }
body.nav-collapsed .account-footer { justify-content: center; padding-inline: 0; }
body.nav-collapsed .account-footer-info { display: none; }
}
/* ===== سایت‌ساز: چیدمانِ جدید ===== */
.sb-layout { grid-template-columns: minmax(0, 330px) minmax(0, 1fr); }
.sb-mobile-bar { display: none; }
.sb-preview-head { flex-wrap: wrap; gap: 6px; }
.sb-preview-head .sb-preview-devs { margin-inline-start: 0; }
.sb-preview-devs button { display: inline-flex; align-items: center; gap: 4px; }
.sb-preview-devs .ic { width: 14px; height: 14px; }
.sb-status { font-size: 11.5px; font-weight: 700; color: var(--muted); margin-inline-start: auto; display: inline-flex; align-items: center; gap: 5px; }
.sb-status.is-dirty { color: var(--warning); }
.sb-status.is-dirty::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--warning); }
.sb-head-btn, .sb-discard-btn { font-size: 12px !important; padding: 6px 12px !important; border-radius: 999px !important; display: inline-flex; align-items: center; gap: 5px; }
.sb-head-btn .ic { width: 14px; height: 14px; }
.sb-publish-btn { font-size: 12.5px !important; padding: 7px 18px !important; border-radius: 999px !important; }
.sb-publish-btn:disabled { opacity: .5; cursor: default; }
.sb-frame-wrap { height: calc(100vh - 190px); min-height: 480px; }
/* پاپ‌آپ‌های کارت: پهن در دسکتاپ، با معرفیِ کارت */
.sb-modal-wide { max-width: 780px !important; width: calc(100% - 32px); }
.sb-set-head { display: flex; gap: 12px; align-items: flex-start; padding: 2px 0 14px; margin-bottom: 12px; border-bottom: 1px solid var(--border); padding-inline-end: 36px; }
.sb-set-head .sb-ic { width: 44px; height: 44px; border-radius: 13px; background: var(--header-bg); }
.sb-set-head .sb-ic .ic { width: 22px; height: 22px; }
.sb-set-head h4 { margin: 0 0 4px; font-size: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sb-set-head p { margin: 0; font-size: 12.5px; line-height: 1.9; color: var(--muted); }
.sb-sec-title { font-size: 12.5px; font-weight: 800; color: var(--muted); margin: 4px 0 8px; }
#sbSettingsBody .sb-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
#sbSettingsBody .sb-fields > .sb-wide { grid-column: 1 / -1; }
#sbSettingsBody .sb-fields .field-line { margin-bottom: 6px; }
#sbSettingsBody .sb-items-list-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#sbSettingsBody .sb-items-list-grid .sb-it { margin-bottom: 0; }
.sb-when { border: 1px solid var(--border); border-radius: 12px; padding: 0 12px; margin-top: 12px; }
.sb-when summary { cursor: pointer; font-size: 13px; font-weight: 700; padding: 11px 0; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.sb-when summary::-webkit-details-marker { display: none; }
.sb-when summary small { font-weight: 400; color: var(--muted); font-size: 11.5px; }
.sb-when[open] summary { border-bottom: 1px dashed var(--border); margin-bottom: 10px; }
.sb-when .sb-when-grid .field-line { flex-direction: column; align-items: stretch; gap: 4px; }
.sb-when .sb-when-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; padding-bottom: 8px; }
.sb-catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sb-cat-group { grid-column: 1 / -1; font-size: 12px; font-weight: 800; color: var(--muted); margin: 6px 2px 0; }
.sb-cat-item { align-items: flex-start; }
.sb-cat-item p { margin: 3px 0 0; font-size: 11px; line-height: 1.8; color: var(--muted); font-weight: 400; }
@media (max-width: 900px) {
.sb-mobile-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; position: sticky; top: 0; z-index: 5; background: var(--bg, transparent); padding: 4px 0; }
.sb-mtabs { flex: 1; display: flex; gap: 3px; background: var(--header-bg); border-radius: 999px; padding: 3px; }
.sb-mtabs button { flex: 1; border: none; background: transparent; font: inherit; font-size: 13px; padding: 7px 0; border-radius: 999px; cursor: pointer; color: var(--muted); }
.sb-mtabs button.active { background: var(--surface); color: var(--text); font-weight: 800; }
.sb-layout { grid-template-columns: minmax(0, 1fr) !important; }
.sb-layout:not(.show-preview) .sb-preview { display: none; }
.sb-layout.show-preview .sb-editor { display: none; }
.sb-preview-head .sb-publish-btn { display: none; }
.sb-frame-wrap { height: calc(100dvh - 210px); min-height: 380px; }
.sb-modal-wide { width: 100%; }
#sbSettingsBody .sb-fields, #sbSettingsBody .sb-items-list-grid { grid-template-columns: 1fr; }
.sb-when .sb-when-grid { grid-template-columns: 1fr; }
.sb-catalog { grid-template-columns: 1fr; }
}
/* ===== پاپ‌آپِ تنظیماتِ کارت‌های سایت‌ساز (بازطراحی) ===== */
.sb-set-body { display: flex; flex-direction: column; gap: 12px; }
.sb-sec { background: var(--header-bg); border-radius: 14px; padding: 14px; }
.sb-sec-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.sb-sec-head b { font-size: 13.5px; }
.sb-sec-head small { font-size: 11.5px; color: var(--muted); }
.sb-set-body .sb-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; align-items: start; }
.sb-set-body .sb-fields > .sb-wide { grid-column: 1 / -1; }
.sb-set-body .field-line { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin: 0; }
.sb-set-body .field-line label { font-size: 12px; font-weight: 600; color: var(--muted); }
.sb-set-body .field-line input, .sb-set-body .field-line select, .sb-set-body .field-line textarea {
width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px;
font: inherit; font-size: 13px; background: var(--surface); color: var(--text); outline: none; box-sizing: border-box;
}
.sb-set-body .field-line textarea { resize: vertical; min-height: 84px; line-height: 1.9; }
.sb-set-body .field-line input:focus, .sb-set-body .field-line select:focus, .sb-set-body .field-line textarea:focus { border-color: var(--accent); }
.sb-set-body input[dir="ltr"] { text-align: right; }
.sb-check { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer;
background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; min-height: 40px; box-sizing: border-box; align-self: end; }
.sb-check > span:first-child { font-size: 13px; font-weight: 600; }
.sb-set-body .sb-hint { margin: 0; }
.sb-img-field { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 8px; }
.sb-img-field .sb-it-thumb { width: 84px; height: 60px; border-radius: 9px; }
.sb-img-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sb-img-meta .sb-it-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.sb-img-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.sb-set-body .sb-items-field { margin: 0; }
.sb-set-body .sb-items-head { margin-bottom: 10px; }
.sb-set-body #sbItemsList { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; max-height: none; overflow: visible; }
.sb-set-body .sb-fields > .sb-check { grid-column: 1 / -1; }
.sb-set-body #sbItemsList.sb-items-list-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sb-set-body .sb-it { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.sb-set-body .sb-it .field-line { margin: 0; }
.sb-set-body .sb-it-head { margin: 0; }
.sb-dev-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 4px; }
.sb-dev-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: none; background: transparent; border-radius: 9px;
padding: 9px 6px; font: inherit; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.sb-dev-seg button .ic { width: 16px; height: 16px; }
.sb-dev-seg button.active { background: var(--accent); color: #fff; font-weight: 700; }
@media (max-width: 700px) {
.sb-set-body .sb-fields, .sb-set-body #sbItemsList.sb-items-list-grid { grid-template-columns: minmax(0, 1fr); }
.sb-dev-seg button { flex-direction: column; gap: 3px; padding: 8px 4px; }
.sb-dev-seg button span { font-size: 11px; line-height: 1.5; white-space: nowrap; }
.sb-sec { padding: 12px; }
}
/* ===== سایت‌ساز: ردیف‌های ثابتِ هدر/فوتر/منوی موبایل ===== */
.sb-item.is-pinned { background: var(--surface); border: 1.5px dashed var(--border); }
.sb-item.is-pinned .sb-ic { background: var(--header-bg); }
.sb-pin-tag { font-size: 10px; font-weight: 700; border-radius: 999px; padding: 1px 7px; background: var(--header-bg); color: var(--muted); }
.sb-list-sep { font-size: 11px; font-weight: 700; color: var(--muted); margin: 10px 4px 6px; display: flex; align-items: center; gap: 8px; }
.sb-list-sep::after { content: ''; flex: 1; border-top: 1px dashed var(--border); }
.sb-subhead { font-size: 12px; font-weight: 800; color: var(--text); margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--border); }
.sb-subhead:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.sb-set-body .sb-fields > .sb-check.is-half { grid-column: auto; }
.sb-iconpick { display: flex; flex-wrap: wrap; gap: 4px; }
.sb-iconpick button { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.sb-iconpick button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.sb-iconpick .ic { width: 17px; height: 17px; }
/* عکس/آیکونِ دسته در فرمِ دسته‌بندی */
.cat-visual-box { grid-column: 1 / -1; background: var(--header-bg); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.cat-visual-head { display: flex; flex-direction: column; gap: 2px; }
.cat-visual-head b { font-size: 13px; }
.cat-visual-head small { font-size: 11.5px; color: var(--muted); }
.cat-visual-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 3px; }
.cat-visual-seg button { border: none; background: none; font: inherit; font-size: 12.5px; padding: 7px 0; border-radius: 8px; cursor: pointer; color: var(--muted); }
.cat-visual-seg button.active { background: var(--accent); color: #fff; font-weight: 700; }
.cat-icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; }
.cat-icon-grid button { aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.cat-icon-grid button.active { border-color: var(--accent); background: var(--accent); color: #fff; }
.cat-icon-grid .ic { width: 20px; height: 20px; }
/* ===== سایت‌ساز: تنظیماتِ کلیِ سایت (کارت‌هایی که از «تنظیمات ویترین» منتقل شدن) ===== */
.sb-site-settings { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 8px; }
.sb-site-settings-title { display: flex; flex-direction: column; gap: 2px; margin: 0 2px 4px; }
.sb-site-settings-title b { font-size: 13px; }
.sb-site-settings-title small { font-size: 11px; color: var(--muted); }
.sb-site-settings .storefront-card { padding: 0; margin: 0; box-shadow: none; border: 1px solid var(--border); background: var(--header-bg); }
.sb-site-settings .sf-acc-head { padding: 11px 12px; cursor: pointer; align-items: center; width: 100%; }
.sb-site-settings .sf-acc-head h4 { font-size: 13px; margin: 0; }
.sb-site-settings .sf-acc-head .settings-row-desc { font-size: 11px; }
.sb-site-settings .sf-card-ic { width: 30px; height: 30px; }
.sb-site-settings .sf-acc-chevron { display: inline-flex; margin-inline-start: auto; transition: transform .2s; }
.sb-site-settings .sf-acc.open .sf-acc-chevron { transform: rotate(180deg); }
.sb-site-settings .sf-acc-body { display: none; margin-top: 0; padding: 0 12px 14px; }
.sb-site-settings .sf-acc.open .sf-acc-body { display: block; }
.sb-site-settings .sf-acc.open .sf-acc-head { border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.sf-pro-only-note { display: none; font-size: 11px; color: var(--muted); }
.sb-site-settings .sf-pro-only-note { display: inline; }
/* ===== گزارشِ ارسالِ پیامک‌های ویترین ===== */
.sms-log { margin-top: 14px; border: 1px solid var(--border); border-radius: 12px; padding: 0 12px; }
.sms-log summary { cursor: pointer; font-size: 13px; font-weight: 700; padding: 11px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.sms-log summary::-webkit-details-marker { display: none; }
.sms-log summary small { font-weight: 400; color: var(--muted); font-size: 11.5px; }
.sms-log-hint { font-size: 11.5px; color: var(--muted); line-height: 1.8; margin-bottom: 8px; }
.sms-log-row { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; border-top: 1px dashed var(--border); font-size: 12.5px; }
.sms-log-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; background: var(--success, #1f9d55); }
.sms-log-row.fail .sms-log-dot { background: var(--danger, #e2483a); }
.sms-log-main { flex: 1; min-width: 0; }
.sms-log-main small { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.8; word-break: break-word; }
.sms-log-row.fail .sms-log-main small { color: var(--danger, #e2483a); }
.sms-log-time { font-size: 11px; color: var(--muted); white-space: nowrap; }
/* ===== بلاگ (پنل) ===== */
.blg-box { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px; }
.blg-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.blg-search { flex: 1; min-width: 160px; display: flex; align-items: center; gap: 6px; background: var(--header-bg); border-radius: 999px; padding: 0 12px; }
.blg-search .ic { width: 16px; height: 16px; color: var(--muted); }
.blg-search input { flex: 1; min-width: 0; border: none; background: none; font: inherit; font-size: 13px; padding: 9px 0; outline: none; color: var(--text); }
.blg-tbtn { font-size: 12.5px !important; padding: 7px 14px !important; border-radius: 999px !important; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.blg-tbtn .ic { width: 15px; height: 15px; }
.blg-n { font-size: 10.5px; opacity: .75; }
.blg-info { font-size: 12px; color: var(--muted); margin: 10px 2px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.blg-info a, .blg-info button { color: var(--accent-text); background: none; border: none; font: inherit; cursor: pointer; padding: 0; }
.blg-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; border-radius: 13px; background: var(--header-bg); margin-bottom: 8px; }
.blg-thumb { width: 76px; height: 52px; border-radius: 10px; overflow: hidden; background: var(--surface); display: flex; align-items: center; justify-content: center; color: var(--muted); }
.blg-thumb img { width: 100%; height: 100%; object-fit: cover; }
.blg-row-title { font-size: 13.5px; font-weight: 700; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blg-row-meta { font-size: 11.5px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; margin-top: 3px; align-items: center; }
.blg-pill { font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 2px 9px; background: var(--warning-soft); color: var(--warning); }
.blg-pill.pub { background: var(--success-soft, #e7f8ee); color: var(--success, #1f9d55); }
.blg-pill.sched { background: var(--info-soft); color: var(--info); }
.blg-row-actions { display: flex; gap: 2px; }
/* ویرایشگرِ تمام‌صفحه */
.blg-editor { position: fixed; inset: 0; z-index: 1200; background: var(--bg, #f6f7fb); display: none; flex-direction: column; }
.blg-editor.open { display: flex; }
.blg-ed-bar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.blg-ed-bar b { font-size: 14px; }
.blg-ed-saved { font-size: 11.5px; color: var(--muted); }
.blg-ed-body { flex: 1; overflow-y: auto; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; padding: 16px; max-width: 1180px; width: 100%; margin: 0 auto; box-sizing: border-box; align-items: start; }
.blg-ed-main { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 18px; min-height: 60vh; }
.blg-title-input { width: 100%; border: none; outline: none; background: none; font: inherit; font-size: 22px; font-weight: 800; padding: 6px 2px 12px; border-bottom: 1px dashed var(--border); margin-bottom: 14px; color: var(--text); box-sizing: border-box; }
.blg-blocks { display: flex; flex-direction: column; gap: 10px; }
.blg-blk { border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px 10px; background: var(--header-bg); }
.blg-blk:focus-within { border-color: var(--accent); }
.blg-blk-head { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.blg-blk-head .ic { width: 14px; height: 14px; }
.blg-blk textarea, .blg-blk input[type=text] { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); padding: 8px 10px; font: inherit; font-size: 14px; line-height: 1.9; color: var(--text); outline: none; resize: vertical; }
.blg-blk textarea:focus, .blg-blk input[type=text]:focus { border-color: var(--accent); }
.blg-blk .blg-h2 { font-size: 18px; font-weight: 800; }
.blg-blk .blg-h3 { font-size: 16px; font-weight: 700; }
.blg-blk .blg-sub { margin-top: 6px; font-size: 12.5px !important; }
.blg-blk-hint { font-size: 11px; color: var(--muted); margin-top: 4px; }
.blg-blk-img { display: flex; gap: 10px; align-items: center; }
.blg-blk-img .sb-it-thumb { width: 120px; height: 76px; }
.blg-blk-prod { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px dashed var(--border); border-radius: 10px; padding: 10px; font-size: 13px; }
.blg-blk-prod b { flex: 1; }
.blg-add { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); font-size: 12px; color: var(--muted); }
.blg-add button { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12px; cursor: pointer; }
.blg-add button:hover { border-color: var(--accent); color: var(--accent-text); }
.blg-add .ic { width: 14px; height: 14px; }
.blg-ed-side { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 0; }
.blg-ed-side .sb-sec { background: var(--surface); border: 1px solid var(--border); }
.blg-ed-side .field-line { display: flex; flex-direction: column; gap: 5px; }
.blg-ed-side .field-line label { font-size: 12px; font-weight: 600; color: var(--muted); }
.blg-ed-side input[type=text], .blg-ed-side select, .blg-ed-side textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; font: inherit; font-size: 13px; background: var(--surface); color: var(--text); outline: none; }
.blg-ed-side input[dir=ltr] { text-align: right; }
.blg-seo summary { cursor: pointer; list-style: none; display: flex; gap: 8px; align-items: baseline; }
.blg-seo summary::-webkit-details-marker { display: none; }
.blg-seo[open] summary { margin-bottom: 10px; }
.blg-seo .field-line + .field-line { margin-top: 8px; }
.blg-cover { display: flex; flex-direction: column; gap: 8px; }
.blg-cover .sb-it-thumb { width: 100%; height: 150px; border-radius: 12px; }
.blg-cat-add { display: flex; gap: 8px; }
.blg-cat-add input { flex: 1; }
.blg-cat-row { display: flex; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.blg-cat-row input { flex: 1; border: 1px solid transparent; background: none; font: inherit; font-size: 13px; padding: 6px 8px; border-radius: 8px; color: var(--text); }
.blg-cat-row input:focus { border-color: var(--border); outline: none; background: var(--surface); }
.blg-prod-list { max-height: 55vh; overflow-y: auto; margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.blg-prod-list button { display: flex; justify-content: space-between; gap: 10px; text-align: right; border: 1px solid var(--border); background: var(--surface); border-radius: 10px; padding: 9px 12px; font: inherit; font-size: 13px; cursor: pointer; color: var(--text); }
.blg-prod-list button:hover { border-color: var(--accent); }
.blg-prod-list small { color: var(--muted); white-space: nowrap; }
/* پیام‌ها: دو حالت */
.sfm-modes { display: flex; gap: 4px; background: var(--header-bg); border-radius: 12px; padding: 4px; margin-bottom: 12px; }
.sfm-modes button { flex: 1; border: none; background: transparent; font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 9px; cursor: pointer; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.sfm-modes button.active { background: var(--surface); color: var(--text); font-weight: 800; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.cmt-post { font-size: 11.5px; color: var(--accent-text); text-decoration: none; }
@media (max-width: 900px) {
.blg-ed-body { grid-template-columns: minmax(0, 1fr); padding: 10px; }
.blg-ed-side { position: static; }
.blg-ed-main { padding: 12px; min-height: 0; }
.blg-title-input { font-size: 18px; }
.blg-ed-bar { padding: 8px 10px; }
.blg-row { grid-template-columns: 60px minmax(0, 1fr); }
.blg-thumb { width: 60px; height: 44px; }
.blg-row-actions { grid-column: 1 / -1; justify-content: flex-end; border-top: 1px solid var(--border); padding-top: 4px; }
.blg-blk-img { flex-direction: column; align-items: stretch; }
.blg-blk-img .sb-it-thumb { width: 100%; height: 140px; }
}
/* پنجره‌های ویرایشگرِ بلاگ باید روی خودِ ویرایشگرِ تمام‌صفحه باز بشن */
#blgProdOverlay, #blgCatOverlay { z-index: 1300 !important; }
.blg-add { flex-direction: column; align-items: stretch; gap: 8px; }
.blg-add-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.blg-add-group > span { font-size: 11.5px; font-weight: 800; color: var(--muted); min-width: 64px; }
.blg-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.blg-row2 select, .blg-blk select { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); padding: 7px 10px; font: inherit; font-size: 13px; color: var(--text); }
.blg-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-top: 6px; }
.blg-item { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 6px; }
.blg-item .sb-it-thumb { width: 100%; height: 90px; }
.blg-item input[type=text] { font-size: 12px !important; padding: 6px 8px !important; }
.blg-item-actions { display: flex; justify-content: space-between; }
.blg-faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.blg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.blg-chips span { display: inline-flex; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px 6px 4px 10px; font-size: 12.5px; }
.blg-chips button { border: none; background: none; cursor: pointer; color: var(--muted); padding: 0 2px; font-size: 14px; line-height: 1; }
.blg-file { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px dashed var(--border); border-radius: 10px; padding: 10px; font-size: 13px; }
.blg-file b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blg-file-ext { width: 38px; height: 44px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
/* ===== مرحله‌ی ۷ (پنل) ===== */
.sb-prod-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-prod-chips span { display: inline-flex; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px 6px 4px 10px; font-size: 12.5px; }
.sb-prod-chips button { border: none; background: none; cursor: pointer; color: var(--muted); font-size: 14px; line-height: 1; padding: 0 2px; }
.subs-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--header-bg); margin-bottom: 6px; font-size: 13px; }
.subs-row b { direction: ltr; }
.subs-row small { color: var(--muted); font-size: 11.5px; }
.subs-row .sb-mini { margin-inline-start: auto; }
/* ===== پوسته‌های سایت (مرحله‌ی ۸) ===== */
.sb-skin-btn { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; font-size:12.5px; }
.sb-skin-btn .ic { width:17px; height:17px; }
.sb-skins { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
@media (max-width:640px) { .sb-skins { grid-template-columns:repeat(2, minmax(0,1fr)); } }
.sb-skin { border:1.5px solid var(--border); border-radius:14px; padding:8px; background:var(--surface); cursor:pointer; text-align:right; font:inherit; color:inherit; display:flex; flex-direction:column; gap:8px; position:relative; }
.sb-skin:hover { border-color:var(--primary); }
.sb-skin.active { border-color:var(--primary); box-shadow:0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent); }
.sb-skin.active::after { content:"✓"; position:absolute; top:12px; left:12px; width:22px; height:22px; border-radius:50%; background:var(--primary); color:#fff; font-size:12px; display:flex; align-items:center; justify-content:center; }
.sb-skin-mock { height:108px; border-radius:9px; overflow:hidden; display:flex; flex-direction:column; gap:6px; padding:8px; }
.sb-skin-mock i { display:block; }
.sb-skin-mock .h { height:8px; border-radius:3px; width:45%; }
.sb-skin-mock .row { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; flex:1; }
.sb-skin-mock .row i { border-radius:inherit; }
.sb-skin-mock .list { display:flex; flex-direction:column; gap:4px; flex:1; }
.sb-skin-mock .list i { flex:1; border-radius:3px; }
.sb-skin b { font-size:13.5px; }
.sb-skin small { font-size:11.5px; color:var(--muted); line-height:1.7; }
.sb-preset-box { display:flex; align-items:center; gap:14px; margin-top:16px; padding:14px; border:1px dashed var(--border); border-radius:14px; }
.sb-preset-box > div { flex:1; font-size:13px; }
.sb-preset-box .btn-ghost { white-space:nowrap; }
@media (max-width:640px) { .sb-preset-box { flex-direction:column; align-items:stretch; } }
.sb-skin-wrap { display:flex; flex-direction:column; gap:6px; }
.sb-skin-try { display:flex; gap:10px; justify-content:center; font-size:11.5px; }
.sb-skin-try a { color:var(--primary); }
/* درصدِ آپلودِ عکس */
.up-prog { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:100%; height:100%; min-height:44px; padding:6px; font-size:11.5px; color:var(--text); }
.up-prog b { font-weight:700; font-variant-numeric:tabular-nums; }
.up-prog i { display:block; width:82%; height:5px; border-radius:99px; background:var(--border); overflow:hidden; }
.up-prog em { display:block; height:100%; background:var(--primary); border-radius:99px; transition:width .15s linear; }
.sb-color-row { display:flex; align-items:center; gap:8px; }
.sb-color-row input[type=color] { width:44px; height:38px; padding:2px; border:1px solid var(--border); border-radius:10px; background:none; cursor:pointer; flex-shrink:0; }
.sb-color-row input[type=text] { flex:1; min-width:0; }
/* ===== نوارِ ابزارِ سایت‌ساز: دو ردیف (صفحه | پوسته + افزودنِ کارت) ===== */
.sb-toolbar { flex-direction:column; align-items:stretch !important; gap:8px !important; }
.sb-tb-row { display:flex; align-items:center; gap:8px; min-width:0; }
.sb-page-pick { flex:1; min-width:0; display:flex; align-items:center; border:1px solid var(--border); border-radius:12px; background:var(--surface); padding:3px; gap:2px; }
.sb-page-pick select { flex:1; min-width:0; border:none !important; background:transparent !important; box-shadow:none !important; height:36px; padding-inline:10px !important; font-weight:600; }
.sb-page-tools { display:flex; gap:2px; flex-shrink:0; padding-inline-start:4px; border-inline-start:1px solid var(--border); }
.sb-page-tools .sb-page-gear { width:34px; height:34px; border-radius:9px; background:transparent; border:none; }
.sb-page-tools .sb-page-gear:hover { background:var(--header-bg); }
.sb-skin-btn { flex:1; min-width:0; display:flex !important; align-items:center; gap:9px; padding:6px 10px !important; height:44px; border:1px solid var(--border); border-radius:12px; background:var(--surface); cursor:pointer; font:inherit; color:inherit; text-align:right; }
.sb-skin-btn:hover { border-color:var(--primary); }
.sb-skin-btn > .ic:first-child { display:none; }
.sb-skin-dot { width:26px; height:26px; border-radius:8px; flex-shrink:0; background:linear-gradient(135deg, #F4F1EE 50%, #e2483a 50%); border:1px solid var(--border); }
.sb-skin-txt { display:flex; flex-direction:column; min-width:0; line-height:1.25; flex:1; }
.sb-skin-txt small { font-size:10.5px; color:var(--muted); }
.sb-skin-txt b { font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-skin-caret { width:15px !important; height:15px !important; color:var(--muted); flex-shrink:0; }
.sb-tb-row .sb-add-btn { height:44px; flex-shrink:0; }
/* ===== تنوعِ محصول در کارتِ محصول ===== */
.pv-opts { display: flex; flex-direction: column; gap: 10px; margin: 8px 0; }
.pv-opt { border: 1px solid var(--border); border-radius: 12px; padding: 8px; background: var(--surface); }
.pv-opt-head { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.pv-opt-name { flex: 1; min-width: 0; font-weight: 600; }
.pv-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pv-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--pastel-blue); color: var(--pastel-blue-text); border-radius: 999px; padding: 3px 6px 3px 10px; font-size: 12.5px; }
.pv-chip button { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 3px; opacity: .7; }
.pv-chip button:hover { opacity: 1; }
.pv-swatch { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); position: relative; overflow: hidden; cursor: pointer; flex: none; }
.pv-swatch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.pv-add-val { flex: 1; min-width: 110px; border: 1px dashed var(--border) !important; border-radius: 999px !important; padding: 4px 10px !important; font-size: 12.5px; background: transparent; }
.pv-table { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.pv-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr) minmax(0, 1fr) 52px 36px; gap: 6px; align-items: center; }
.pv-row input[type=text] { min-width: 0; font-size: 12.5px; padding: 6px 8px; }
.pv-row-head { font-size: 11.5px; color: var(--muted); }
.pv-row-label { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-row-stock { text-align: center; font-size: 12.5px; color: var(--muted); }
.pv-row-on { display: flex; justify-content: center; }
.pv-row.is-off .pv-row-label, .pv-row.is-off input[type=text] { opacity: .45; }
.pv-note { font-size: 11.5px; color: var(--muted); margin: 8px 0 0; }
@media (max-width: 560px) {
.pv-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 40px 30px; }
.pv-row .pv-row-sku, .pv-row-head span:nth-child(3) { display: none; }
}
/* پنجره‌ی انتخابِ تنوع در فاکتور */
.inv-var-prod { border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px; margin-bottom: 10px; }
.inv-var-title { font-weight: 700; margin-bottom: 6px; }
.inv-var-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 80px; gap: 8px; align-items: center; padding: 5px 0; border-top: 1px dashed var(--border); font-size: 13px; }
.inv-var-row:first-of-type { border-top: 0; }
.inv-var-stock { font-size: 11.5px; color: var(--pastel-green-text); }
.inv-var-stock.is-out { color: var(--pastel-red-text); }
.inv-var-price { font-size: 12px; color: var(--muted); }
.inv-var-qty { min-width: 0; text-align: center; padding: 6px !important; }
/* روش‌های ارسال */
.ship-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.ship-presets .btn-ghost { font-size: 12px; padding: 5px 12px; border-radius: 999px; }
.ship-zone { border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px; margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.ship-tier { display: grid; grid-template-columns: auto 80px auto minmax(0, 1fr) 28px; gap: 6px; align-items: center; font-size: 12.5px; }
.ship-tier input { min-width: 0; padding: 6px 8px; font-size: 12.5px; }
.ship-extra { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.ship-extra input { flex: 1; min-width: 0; padding: 6px 8px; }
/* ===== کارتِ محصول: مشخصاتِ فنی و تنوع، هم‌شکلِ بقیه‌ی فیلدهای کارت ===== */
#productCardContent .prod-seo-box { border: 1px solid var(--border); border-radius: 14px; padding: 10px 14px; background: var(--surface); }
#productCardContent .prod-seo-box summary { font-size: 13px; padding: 4px 0; list-style: none; display: flex; align-items: center; gap: 6px; }
#productCardContent .prod-seo-box summary::-webkit-details-marker { display: none; }
#productCardContent .prod-seo-box summary::before { content: ""; width: 7px; height: 7px; border-inline-end: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(135deg); transition: transform .15s; margin-inline-end: 4px; flex: none; }
#productCardContent .prod-seo-box[open] summary::before { transform: rotate(45deg); }
#productCardContent .prod-spec-row input, #productCardContent .pv-opt-name, #productCardContent .pv-row input[type=text] {
background: var(--header-bg); border: 1px solid transparent; border-radius: 10px; padding: 8px 11px; font: inherit; font-size: 13px; color: var(--text); height: 38px; outline: none; min-width: 0;
}
#productCardContent .prod-spec-row input:focus, #productCardContent .pv-opt-name:focus, #productCardContent .pv-row input[type=text]:focus { border-color: var(--accent); background: var(--surface); }
#productCardContent .prod-spec-row { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) 34px; }
#productCardContent .prod-spec-add { background: transparent; border: 1px dashed var(--border); color: var(--accent-text); }
#productCardContent .pv-opt { background: var(--page-bg); border-color: transparent; padding: 10px; }
#productCardContent .pv-opt-name { font-weight: 700; flex: 1; background: var(--surface); }
#productCardContent .pv-add-val { height: 32px; background: var(--surface) !important; }
#productCardContent .pv-table { border: 1px solid var(--border); border-radius: 12px; padding: 6px; gap: 2px; }
#productCardContent .pv-row { padding: 4px 6px; border-radius: 10px; }
#productCardContent .pv-row:not(.pv-row-head):hover { background: var(--page-bg); }
#productCardContent .pv-row-head { padding: 2px 6px 6px; border-bottom: 1px solid var(--border); border-radius: 0; }
#productCardContent .pv-row input[type=text] { height: 34px; font-size: 12.5px; }
#productCardContent .pv-row input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); }
#productCardContent .pv-row.is-custom .pv-row-price { background: var(--pastel-yellow); color: var(--pastel-yellow-text); border-color: var(--pastel-yellow-text); font-weight: 700; }
.pv-custom-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--pastel-yellow); border: 1px solid var(--pastel-yellow-text); vertical-align: middle; }
/* لوگوی روشِ ارسال */
.ship-logo { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 10px; background: var(--pastel-blue); color: var(--pastel-blue-text); overflow: hidden; font-weight: 800; }
.ship-logo svg { width: 60%; height: 60%; }
.ship-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.sf-bank-card-row .ship-logo { margin-inline-end: 4px; }
.ship-logo-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ship-logo-opt { width: 42px; height: 42px; border-radius: 11px; border: 1.5px solid var(--border); background: var(--surface); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; overflow: hidden; }
.ship-logo-opt svg { width: 22px; height: 22px; }
.ship-logo-opt img { width: 100%; height: 100%; object-fit: contain; }
.ship-logo-opt.on { border-color: var(--accent); color: var(--accent-text); background: var(--pastel-blue); }
.ship-logo-up { border-style: dashed; }
.ship-presets .is-custom { border-style: dashed; color: var(--accent-text); }
.ship-kind-hint { font-size: 11.5px; padding-top: 6px; }
/* ===== پاپ‌آپِ موجودیِ تنوع‌ها ===== */
.vs-box { max-width: 760px; width: min(760px, 96vw); }
.vs-title { margin: 0 0 12px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.vs-title small { color: var(--muted); font-weight: 500; font-size: 12.5px; }
.vs-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.vs-field { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.vs-wh { font: inherit; font-size: 13px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--header-bg); color: var(--text); }
.vs-wh-one { font-weight: 700; color: var(--text); }
.vs-seg { display: inline-flex; background: var(--page-bg); border-radius: 11px; padding: 3px; gap: 2px; }
.vs-seg button { font: inherit; font-size: 12.5px; border: 0; background: transparent; color: var(--muted); padding: 6px 12px; border-radius: 9px; cursor: pointer; }
.vs-seg button.on { background: var(--surface); color: var(--accent-text); font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.vs-view { margin-inline-start: auto; }
.vs-hint { font-size: 12px; color: var(--pastel-yellow-text); background: var(--pastel-yellow); border-radius: 10px; padding: 7px 10px; margin-bottom: 10px; }
.vs-chips { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.vs-chip-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vs-chip-name { font-size: 12px; color: var(--muted); min-width: 40px; }
.vs-chip { font: inherit; font-size: 12.5px; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 4px 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.vs-chip.on { background: var(--pastel-blue); border-color: var(--accent); color: var(--accent-text); font-weight: 700; }
.vs-sw { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.2); vertical-align: middle; margin-inline-end: 4px; }
.vs-sep { color: var(--muted); }
.vs-bulk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--page-bg); border-radius: 12px; padding: 8px 10px; margin-bottom: 10px; font-size: 12.5px; }
.vs-bulk > span { flex: 1; min-width: 140px; }
.vs-bulk input { width: 90px; font: inherit; font-size: 13px; padding: 7px 10px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-align: center; }
.vs-bulk .btn-save, .vs-bulk .btn-ghost { padding: 7px 12px !important; font-size: 12.5px !important; }
.vs-bulk .btn-save:disabled { opacity: .45; cursor: default; }
.vs-list { border: 1px solid var(--border); border-radius: 12px; max-height: 48vh; overflow: auto; }
.vs-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 80px 96px 72px; gap: 8px; align-items: center; padding: 6px 10px; border-top: 1px solid var(--border); font-size: 13px; }
.vs-row:first-child { border-top: 0; }
.vs-head { position: sticky; top: 0; background: var(--header-bg); font-size: 11.5px; color: var(--muted); z-index: 1; }
.vs-row.on { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.vs-row.is-off .vs-name { opacity: .55; }
.vs-ck { display: flex; justify-content: center; }
.vs-ck input { width: 17px; height: 17px; accent-color: var(--accent); }
.vs-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-cur { color: var(--muted); text-align: center; }
.vs-qty { font: inherit; font-size: 13px; width: 100%; min-width: 0; padding: 7px 8px; border-radius: 9px; border: 1px solid transparent; background: var(--header-bg); color: var(--text); text-align: center; outline: none; }
.vs-qty:focus { border-color: var(--accent); background: var(--surface); }
.vs-after { text-align: center; font-weight: 700; color: var(--pastel-green-text); }
.vs-after.neg { color: var(--danger, #dc2626); }
.vs-grid-wrap { border: 1px solid var(--border); border-radius: 12px; overflow: auto; max-height: 52vh; }
.vs-grid { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.vs-grid th, .vs-grid td { border: 1px solid var(--border); padding: 5px; text-align: center; }
.vs-grid thead th { position: sticky; top: 0; background: var(--header-bg); z-index: 1; white-space: nowrap; }
.vs-grid tbody th { background: var(--header-bg); white-space: nowrap; }
.vs-grid td.on { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.vs-cell { display: flex; flex-direction: column; gap: 2px; min-width: 70px; }
.vs-cell small { color: var(--muted); font-size: 10.5px; }
.vs-none { color: var(--muted); }
.vs-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.vs-note { flex: 1 1 100%; font: inherit; font-size: 13px; padding: 8px 11px; border-radius: 10px; border: 1px solid transparent; background: var(--header-bg); color: var(--text); }
.vs-sum { flex: 1; font-size: 12.5px; color: var(--muted); }
.vs-sum b { color: var(--text); }
.vs-actions { display: flex; gap: 8px; }
.vs-open-btn { width: 100%; margin-bottom: 4px; }
.pv-stock-btn { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px !important; }
.pv-stock-btn .ic { width: 16px; height: 16px; }
@media (max-width: 600px) {
.vs-row { grid-template-columns: 28px minmax(0, 1fr) 44px 70px 48px; gap: 5px; padding: 6px; font-size: 12.5px; }
.vs-view { margin-inline-start: 0; }
}
/* ===== پاپ‌آپِ وضعیتِ سفارش ===== */
.os-box { max-width: 520px; }
.os-num { font-size: 13px; color: var(--muted); }
.os-sub { font-size: 12.5px; color: var(--muted); margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.os-badge { display: inline-block; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 2px 9px; }
.os-c-yellow { background: var(--pastel-yellow); color: var(--pastel-yellow-text); }
.os-c-blue { background: var(--pastel-blue); color: var(--pastel-blue-text); }
.os-c-green { background: var(--pastel-green); color: var(--pastel-green-text); }
.os-c-red { background: var(--pastel-red); color: var(--pastel-red-text); }
.os-c-purple { background: var(--purple-soft, #f1ecff); color: var(--purple, #6d4bd1); }
.os-steps { list-style: none; margin: 0 0 12px; padding: 12px; display: flex; gap: 4px; background: var(--page-bg); border-radius: 12px; overflow-x: auto; }
.os-step { flex: 1; min-width: 78px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; font-size: 11.5px; color: var(--muted); position: relative; }
.os-step:not(:last-child)::after { content: ""; position: absolute; top: 7px; inset-inline-start: calc(50% + 10px); width: calc(100% - 20px); height: 2px; background: var(--border); }
.os-step.done:not(:last-child)::after { background: var(--accent); }
.os-step b { font-weight: 600; }
.os-step small { display: block; font-size: 10px; }
.os-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border); background: var(--surface); z-index: 1; }
.os-step.done { color: var(--text); }
.os-step.done .os-dot { border-color: var(--accent); background: var(--accent); }
.os-ship { font-size: 12.5px; background: var(--pastel-blue); color: var(--pastel-blue-text); border-radius: 10px; padding: 8px 10px; margin-bottom: 10px; }
.os-warn { font-size: 12px; background: var(--pastel-yellow); color: var(--pastel-yellow-text); border-radius: 10px; padding: 7px 10px; margin: 6px 0 10px; }
.os-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.os-act { font: inherit; font-size: 12.5px; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 6px 13px; cursor: pointer; }
.os-act.on { border-color: var(--accent); background: var(--pastel-blue); color: var(--accent-text); font-weight: 700; }
.os-act.os-canceled, .os-act.os-returned { color: var(--pastel-red-text); }
.os-form { border: 1px solid var(--border); border-radius: 12px; padding: 12px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; }
.os-form .field-line input { width: 100%; }
.os-check { display: flex; gap: 8px; align-items: center; font-size: 12.5px; cursor: pointer; }
.os-check input { accent-color: var(--accent); width: 16px; height: 16px; }
.os-log-title { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.os-log-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12px; padding: 6px 0; border-top: 1px dashed var(--border); }
.os-log-row small { color: var(--muted); white-space: nowrap; }
.sfo-status-btn { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 11px; border-radius: 10px; border: 1px solid var(--accent); background: var(--pastel-blue); color: var(--accent-text); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.sfo-status-btn .ic { width: 17px; height: 17px; }
.sfo-status-btn:hover { background: var(--accent); color: #fff; }
.review-status-btn { width: 100%; justify-content: center; height: 40px; margin: 4px 0 10px; }
/* نظرِ محصولات (پنل) */
.rv-stars { color: #f5b301; letter-spacing: 1px; font-size: 13px; }
.rv-stars i { color: var(--border); font-style: normal; }
.rv-buyer { font-size: 10.5px; font-weight: 700; color: var(--pastel-green-text); background: var(--pastel-green); border-radius: 99px; padding: 1px 8px; }
.rv-phone { font-size: 11.5px; color: var(--muted); margin-top: 2px; text-align: end; }
.rv-reply-box textarea { width: 100%; font: inherit; font-size: 12.5px; border: 1px solid transparent; background: var(--header-bg); color: var(--text); border-radius: 10px; padding: 8px 10px; margin-top: 8px; resize: vertical; }
.rv-reply-box textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.sa-phones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sa-phones a { font-size: 12px; color: var(--accent-text); background: var(--pastel-blue); border-radius: 999px; padding: 2px 10px; text-decoration: none; }
/* =====================================================================
قالبِ یکسانِ پاپ‌آپ‌ها (بازسازیِ پاپ‌آپ‌ها، مرحله‌ی ۱) — روی همه‌ی .modal-box ها
دسکتاپ: کارتِ وسط با سایه و انیمیشنِ باز شدن، تیترِ یکدست، دکمه‌ی بستنِ گرد.
موبایل: «برگه‌ی پایینی» (bottom sheet) تمام‌عرض با دستگیره، گوشه‌ی گردِ بالا، ناحیه‌ی امنِ
پایین، و دکمه‌های پایینِ فرم که موقعِ اسکرول پایین می‌چسبن.
===================================================================== */
.modal-overlay { background: rgba(15, 20, 35, .48); }
.modal-overlay.open { animation: bfFadeIn .18s ease-out; }
.modal-overlay.open > .modal-box { animation: bfPopIn .2s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 24px 60px rgba(0, 0, 0, .22), 0 2px 8px rgba(0, 0, 0, .08); border-radius: 18px; }
.modal-box > .modal-close { top: 16px; left: 16px; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; transition: background .15s, color .15s; z-index: 5; }
.modal-box > .modal-close:hover { background: var(--page-bg); color: var(--text); }
.modal-box > .modal-close .ic { width: 18px; height: 18px; }
.modal-box > h4:first-of-type, .modal-box > h3:first-of-type { font-size: 16.5px; font-weight: 800; line-height: 1.6; padding-inline-end: 40px; }
@keyframes bfFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes bfPopIn { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes bfSheetUp { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .modal-overlay.open, .modal-overlay.open > .modal-box { animation: none !important; } }
@media (max-width: 700px) {
.modal-overlay:not(#imageLightboxOverlay):not(.wheel-date-overlay) {
align-items: flex-end; padding: 0 !important;
padding-top: calc(24px + env(safe-area-inset-top, 0px)) !important;
}
.modal-overlay:not(#imageLightboxOverlay):not(.wheel-date-overlay) > .modal-box {
width: 100%; max-width: none !important; max-height: 100%;
border-radius: 20px 20px 0 0 !important; margin: 0;
padding: 26px 16px calc(16px + env(safe-area-inset-bottom, 0px));
animation: bfSheetUp .26s cubic-bezier(.2, .8, .2, 1) !important;
}
/* دستگیره‌ی برگه */
.modal-overlay:not(#imageLightboxOverlay):not(.wheel-date-overlay) > .modal-box::before {
content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
width: 38px; height: 4px; border-radius: 4px; background: var(--border);
}
.modal-box > .modal-close { top: 14px; left: 12px; }
/* دکمه‌های آخرِ فرم پایینِ برگه می‌چسبن تا بدونِ اسکرول در دسترس باشن */
.modal-box .customer-form-actions:last-child, .modal-box > .customer-form-actions {
position: sticky; bottom: calc(-16px - env(safe-area-inset-bottom, 0px)); z-index: 4;
background: var(--surface); margin-inline: -16px; margin-bottom: calc(-16px - env(safe-area-inset-bottom, 0px));
padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border);
}
.modal-box .customer-form-actions:last-child > button, .modal-box > .customer-form-actions > button { flex: 1; min-height: 44px; }
.modal-box .modal-box-sticky-footer { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}
/* ===== پنجره‌ی تأیید/پیام/ورودیِ یکدست ===== */
.bf-dlg-ov { position: fixed; inset: 0; z-index: 3000; background: rgba(15, 20, 35, .45); display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; transition: opacity .16s ease; }
.bf-dlg-ov.open { opacity: 1; }
.bf-dlg { width: 100%; max-width: 380px; background: var(--surface); color: var(--text); border-radius: 20px; padding: 24px 22px 18px; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,.25); transform: translateY(8px) scale(.97); transition: transform .18s cubic-bezier(.2,.8,.2,1); }
.bf-dlg-ov.open .bf-dlg { transform: none; }
.bf-dlg-ic { width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; background: var(--pastel-blue); color: var(--pastel-blue-text); }
.bf-dlg-ic svg { width: 26px; height: 26px; }
.bf-dlg-danger .bf-dlg-ic, .bf-dlg-error .bf-dlg-ic { background: var(--pastel-red); color: var(--pastel-red-text); }
.bf-dlg-success .bf-dlg-ic { background: var(--pastel-green); color: var(--pastel-green-text); }
.bf-dlg-warn .bf-dlg-ic, .bf-dlg-ask .bf-dlg-ic { background: var(--pastel-yellow); color: var(--pastel-yellow-text); }
.bf-dlg-title { font-size: 16px; font-weight: 800; margin-bottom: 6px; }
.bf-dlg-msg { font-size: 13.5px; line-height: 2; color: var(--muted); white-space: normal; overflow-wrap: anywhere; }
.bf-dlg-msg.is-main { font-size: 14.5px; font-weight: 700; color: var(--text); }
.bf-dlg-input { width: 100%; margin-top: 14px; font: inherit; font-size: 15px; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--header-bg); color: var(--text); outline: none; }
.bf-dlg-input:focus { border-color: var(--accent); background: var(--surface); }
/* انتخابِ جایگاهِ دسته (والد/زیرمجموعه) داخلِ دیالوگ: فهرستِ دکمه‌ای به‌جای select که روی موبایل کیبورد و چیدمان رو به‌هم نریزه */
.bf-dlg-ch-l { display: block; margin: 14px 0 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); text-align: start; }
.bf-dlg-choices { display: flex; flex-wrap: wrap; gap: 6px; max-height: calc(var(--vvh, 100vh) * .3); overflow-y: auto; padding: 2px; text-align: start; }
.bf-dlg-choices button { font-family: inherit; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 700; }
.bf-dlg-choices button.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.bf-dlg-choices button small { opacity: .7; font-weight: 600; }
.bf-dlg-acts { display: flex; flex-direction: row-reverse; gap: 8px; margin-top: 18px; }
.bf-dlg-acts button { flex: 1; min-height: 46px; border-radius: 12px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; border: 1px solid transparent; }
.bf-dlg-ok { background: var(--accent); color: #fff; }
.bf-dlg-danger .bf-dlg-ok { background: var(--pastel-red-text); }
.bf-dlg-cancel { background: transparent; border-color: var(--border) !important; color: var(--text); }
.bf-dlg-cancel:not(:empty):hover { background: var(--page-bg); }
.bf-dlg-acts button:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 2px; }
.bf-dlg-cancel:empty, .bf-dlg-cancel[data-blank] { display: none; }
@media (max-width: 700px) {
.bf-dlg-ov { align-items: flex-end; padding: 0; }
.bf-dlg { max-width: none; border-radius: 22px 22px 0 0; padding: 26px 18px calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateY(100%); }
.bf-dlg::before { content: ""; display: block; width: 38px; height: 4px; border-radius: 4px; background: var(--border); margin: -14px auto 16px; }
.bf-dlg-acts { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .bf-dlg-ov, .bf-dlg { transition: none; } }
/* پاپ‌آپ‌های کوچکِ «تکراری/ذخیره‌نشده» هم همین ظاهر رو می‌گیرن */
#invoiceLeaveOverlay .modal-box, #custDupOverlay .modal-box, #buyerDupPhoneOverlay .modal-box, #prodDupOverlay .modal-box { max-width: 400px !important; text-align: center; padding-top: 28px; }
#invoiceLeaveOverlay .modal-box > h4, #custDupOverlay .modal-box > h4, #buyerDupPhoneOverlay .modal-box > h4, #prodDupOverlay .modal-box > h4 { padding-inline: 34px !important; font-size: 16px; }
#invoiceLeaveOverlay .modal-box > h4::before, #custDupOverlay .modal-box > h4::before, #buyerDupPhoneOverlay .modal-box > h4::before, #prodDupOverlay .modal-box > h4::before { content: ""; display: block; width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%;
background: var(--pastel-yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D97706' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 20h20L12 3z'/%3E%3Cpath d='M12 10v4M12 17h.01'/%3E%3C/svg%3E") center / 26px no-repeat; }
#invoiceLeaveOverlay .modal-box .dup-phone-msg, #custDupOverlay .modal-box .dup-phone-msg, #buyerDupPhoneOverlay .modal-box .dup-phone-msg, #prodDupOverlay .modal-box .dup-phone-msg { color: var(--muted); }
#invoiceLeaveOverlay .modal-box .dup-phone-actions button, #custDupOverlay .modal-box .dup-phone-actions button, #buyerDupPhoneOverlay .modal-box .dup-phone-actions button, #prodDupOverlay .modal-box .dup-phone-actions button { border-radius: 12px; }
/* =====================================================================
پاپ‌آپ‌های پرداخت (گروه B) — ثبتِ پرداختِ فاکتور، پرداخت به تأمین‌کننده، پرداختِ سریع
===================================================================== */
.modal-box.pay-modal { max-width: 480px; }
.pay-modal > h4:first-of-type { margin-bottom: 12px !important; }
/* خلاصه‌ی مبالغ: کاشی‌های کنارِ هم، «مانده» پررنگ */
.pay-modal .inv-pay-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(95px, 1fr)); gap: 8px; background: none; border: 0; padding: 0; }
.pay-modal .inv-pay-head-row { flex-direction: column; align-items: flex-start; gap: 3px; background: var(--header-bg); border: 1px solid var(--border); border-radius: 12px; padding: 9px 11px; margin: 0 !important; }
.pay-modal .inv-pay-head-row span { font-size: 11.5px; }
.pay-modal .inv-pay-head-row b { font-size: 13.5px; }
.pay-modal .inv-pay-head-row.is-remaining { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); background: var(--pastel-blue); }
.pay-modal .inv-pay-head-row.is-remaining span { color: var(--accent-text); }
.pay-modal .inv-pay-head-row.is-remaining b { color: var(--accent-text); font-size: 15px; }
.pay-modal .inv-pay-head .settings-row-desc { grid-column: 1 / -1; }
.pay-modal .inv-pay-tabs { margin: 14px 0; }
/* مبلغ: فیلدِ بزرگ با واحد داخلِ کادر */
.pay-field-label { display: block; font-size: 12.5px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.pay-modal .settle-pay-line { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.pay-modal .settle-pay-line .pay-field-label { order: -2; margin-bottom: 0; }
.pay-modal .pay-amount-wrap { position: relative; display: flex; width: 100%; direction: rtl; }
.pay-modal .pay-amount-wrap input { width: 100% !important; height: 52px; font-size: 20px !important; font-weight: 800; text-align: center; border: 1.5px solid var(--border) !important; border-radius: 12px !important; background: var(--surface) !important; padding: 0 56px !important; color: var(--text); }
.pay-modal .pay-amount-wrap input:focus { border-color: var(--accent) !important; outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.pay-modal .pay-amount-wrap .input-suffix { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 12.5px; }
/* درصدهای سریع: دکمه‌های قرصی */
.pay-modal .settle-quick-percents { order: 1; display: grid !important; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.pay-modal .settle-quick-percents span { text-align: center; font-size: 12.5px; font-weight: 700; color: var(--text); background: var(--header-bg); border: 1px solid var(--border); border-radius: 999px; padding: 6px 0; cursor: pointer; transition: .15s; text-decoration: none !important; }
.pay-modal .settle-quick-percents span:hover { border-color: var(--accent); color: var(--accent-text); background: var(--pastel-blue); }
/* چک: دو ستونه با فیلدهای یکدست */
.pay-modal .check-fields-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.pay-modal .check-fields-grid > input:first-child { grid-column: 1 / -1; }
.pay-modal .check-fields-grid input:not([type=checkbox]), .pay-modal .inv-pay-extra input[type="text"], .pay-modal .check-fields-grid select {
width: 100%; height: 44px; border: 1px solid transparent !important; border-radius: 10px !important; background: var(--header-bg) !important;
padding: 0 12px !important; font-family: inherit; font-size: 13.5px; color: var(--text); box-sizing: border-box; }
.pay-modal .check-fields-grid input:focus, .pay-modal .inv-pay-extra input[type="text"]:focus { border-color: var(--accent) !important; background: var(--surface) !important; outline: none; }
.pay-modal .check-fields-grid .settings-row { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pay-modal .check-fields-grid input[type=checkbox], .pay-modal input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent); flex: none; }
.pay-modal .check-fields-grid > div[style*="grid-column"]:not([style*="none"]) { display: flex !important; }
/* توضیح و تصویر */
.pay-modal .inv-pay-extra { margin-top: 16px; padding-top: 14px; }
.pay-modal .inv-pay-extra input[type="text"] { margin-bottom: 10px; }
.pay-file-input { display: none !important; }
.pay-file-btn { display: flex; align-items: center; gap: 10px; border: 1.5px dashed var(--border); border-radius: 12px; padding: 12px 14px; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text); transition: .15s; }
.pay-file-btn .ic { width: 22px; height: 22px; color: var(--accent-text); flex: none; }
.pay-file-btn small { color: var(--muted); font-weight: 500; }
.pay-file-btn:hover { border-color: var(--accent); background: var(--pastel-blue); }
.pay-modal .inv-pay-image-preview img { max-width: 100%; max-height: 220px; object-fit: contain; border-radius: 12px; }
/* دکمه‌ها و پیام */
.pay-actions { display: flex; gap: 10px; margin-top: 18px; }
.pay-actions .btn-save { flex: 2; min-height: 46px; }
.pay-actions .btn-clear { flex: 1; min-height: 46px; }
.pay-msg:empty { display: none; }
.pay-msg { margin-top: 10px; font-size: 12.5px; text-align: center; color: var(--muted); }
/* پرداختِ سریع */
#customerQuickPayModalOverlay .customer-form { margin-top: 0; }
#customerQuickPayModalOverlay .customer-form-actions .btn-save { width: 100%; min-height: 46px; }
.pay-profile-link { display: block; width: 100%; margin-top: 12px; background: none; border: 0; font: inherit; font-size: 12.5px; color: var(--accent-text); cursor: pointer; padding: 8px; }
.pay-profile-link:hover { text-decoration: underline; }
@media (max-width: 700px) {
.pay-modal .inv-pay-head { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pay-modal .inv-pay-head-row.is-remaining { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
.pay-modal .settle-quick-percents span { padding: 8px 0; }
}
/* تغییرِ قیمت/تخفیفِ گروهی */
.bp-count { font-size: 12.5px; color: var(--muted); margin-bottom: 2px; }
.bp-count b { color: var(--accent-text); font-size: 14px; }
.pay-modal .bp-mode { margin-top: 0; }
#prodBulkPriceModalOverlay .pay-amount-wrap { margin-bottom: 8px; }
.bp-chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-bottom: 6px; }
.bp-chips button { font: inherit; font-size: 12px; font-weight: 700; border: 1px solid var(--border); background: var(--header-bg); color: var(--pastel-green-text); border-radius: 999px; padding: 7px 0; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-chips button.neg { color: var(--pastel-red-text); }
.bp-chips button:hover { border-color: var(--accent); background: var(--pastel-blue); }
.bp-preview { border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; margin-top: 10px; }
.bp-preview-title { font-size: 11.5px; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.bp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 8px; align-items: center; font-size: 12.5px; padding: 5px 0; border-top: 1px dashed var(--border); }
.bp-row:first-of-type { border-top: 0; }
.bp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-old { color: var(--muted); }
.bp-old.is-changed { text-decoration: line-through; }
.bp-arrow { color: var(--muted); }
.bp-new.up { color: var(--pastel-green-text); }
.bp-new.down { color: var(--pastel-red-text); }
.bp-more { font-size: 11.5px; color: var(--muted); padding-top: 4px; }
@media (max-width: 700px) { .bp-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* فرمولِ قیمت‌گذاری */
#pricingFormulaFormModalOverlay .modal-box { max-width: 520px; }
.pf-form { margin-top: 12px; }
.pf-factor-grid { display: flex; flex-direction: column; gap: 6px; }
.pf-factor { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; cursor: pointer; font-size: 13px; transition: .15s; }
.pf-factor:hover { border-color: var(--accent); }
.pf-factor:has(input:checked) { border-color: var(--accent); background: var(--pastel-blue); }
.pf-factor input { width: 18px; height: 18px; accent-color: var(--accent); }
.pf-factor-name { font-weight: 700; }
.pf-factor-val { font-size: 12px; color: var(--muted); }
/* قیمت‌گذاریِ هوشمند */
.sp-empty { display: flex; align-items: center; gap: 12px; border: 1.5px dashed var(--border); border-radius: 14px; padding: 16px; color: var(--muted); font-size: 13px; line-height: 1.9; }
.sp-empty .ic { width: 28px; height: 28px; flex: none; color: var(--accent-text); }
.sp-add-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sp-add-btn { font: inherit; font-size: 12.5px; font-weight: 700; border: 1.5px dashed var(--accent); color: var(--accent-text); background: transparent; border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.sp-add-btn:hover { background: var(--pastel-blue); }
#smartPricingModalOverlay .modal-box-sticky-footer .btn-save { flex: 1; }
@media (max-width: 700px) { .sp-add-btn { flex: 1; } }
/* فیشِ واریزی */
.receipt-preview-img { display: block; max-width: 100%; max-height: 68vh; margin: 0 auto; object-fit: contain; border-radius: 14px; background: var(--header-bg); border: 1px solid var(--border); padding: 6px; cursor: zoom-in; }
.receipt-preview-hint { font-size: 11.5px; color: var(--muted); margin-top: 8px; }
/* =====================================================================
پاپ‌آپ‌ها گروه C — لیست‌ها و انتخابگرها
===================================================================== */
/* کارت‌های مدیریت (دسته‌ها، دسته‌ی مشتری، انبارها، کدهای تخفیف) */
.modal-box .cat-mgmt-header h4 { margin: 0; }
.modal-box .cat-mgmt-card { padding: 12px 14px; margin-bottom: 8px; transition: border-color .15s, box-shadow .15s; }
.modal-box .cat-mgmt-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.cat-mgmt-actions { gap: 6px !important; }
.cat-mgmt-actions button { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px !important; border-radius: 999px; border: 1px solid var(--border) !important; background: var(--surface) !important; font-size: 12px !important; font-weight: 700; text-decoration: none !important; transition: .15s; }
.cat-mgmt-actions button::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--fx-ic) center / contain no-repeat; mask: var(--fx-ic) center / contain no-repeat; }
.cat-mgmt-edit { --fx-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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16v4z'/%3E%3C/svg%3E"); }
.cat-mgmt-delete { --fx-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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M5 7l1 13h12l1-13M9 7V4h6v3'/%3E%3C/svg%3E"); }
.cat-mgmt-add-sub { --fx-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='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.cat-mgmt-edit:hover { border-color: var(--accent) !important; background: var(--pastel-blue) !important; }
.cat-mgmt-delete:hover { border-color: var(--pastel-red-text) !important; background: var(--pastel-red) !important; }
.cat-mgmt-add-sub:hover { border-color: var(--accent2, var(--accent)) !important; background: var(--pastel-blue) !important; }
.cat-mgmt-locked { font-size: 11px !important; background: var(--header-bg); border-radius: 999px; padding: 3px 10px; }
@media (max-width: 700px) {
.modal-box .cat-mgmt-card { flex-wrap: wrap; }
.modal-box .cat-mgmt-actions { width: 100%; justify-content: flex-end; }
}
/* جستجو داخلِ پاپ‌آپ‌ها */
.modal-box .bulk-add-search { height: 44px; border-radius: 12px !important; background: var(--header-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat right 12px center / 18px !important; padding-inline: 38px 12px !important; border: 1px solid transparent !important; font-size: 13.5px; width: 100%; box-sizing: border-box; margin-bottom: 10px; }
.modal-box .bulk-add-search:focus { border-color: var(--accent) !important; background-color: var(--surface) !important; }
/* انتخابِ مشتری */
.picker-box { max-width: 460px; }
.picker-box .bulk-add-list { border: 0; max-height: 56vh; display: flex; flex-direction: column; gap: 4px; }
.picker-row { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: transparent; font: inherit; text-align: start; padding: 9px 10px; border-radius: 12px; cursor: pointer; color: var(--text); }
.picker-row:hover, .picker-row:focus-visible { background: var(--header-bg); outline: none; }
.picker-avatar { width: 38px; height: 38px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--pastel-blue); color: var(--accent-text); font-weight: 800; }
.picker-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.picker-main b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-main small { color: var(--muted); font-size: 12px; text-align: end; direction: ltr; align-self: flex-start; }
.picker-chev { width: 18px; height: 18px; color: var(--muted); flex: none; }
/* افزودنِ گروهی */
.bulk-add-box { max-width: 560px; }
.bulk-add-box .category-filter-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.bulk-add-box .category-filter-row select { flex: 1; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); padding: 0 10px; font: inherit; font-size: 13px; color: var(--text); }
.bulk-add-box .bulk-add-list { max-height: 48vh; border-radius: 12px; }
.bulk-add-box .bulk-add-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; transition: background .12s; }
.bulk-add-box .bulk-add-item:has(input:checked) { background: var(--pastel-blue); }
.bulk-add-box .bulk-add-item input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.bulk-add-thumb { width: 38px; height: 38px; border-radius: 8px; background: var(--header-bg); overflow: hidden; flex: none; }
.bulk-add-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bulk-add-thumb:empty { display: none; }
.bulk-add-box .bulk-add-name { font-size: 13px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bulk-add-box .bulk-add-stock { font-size: 11px; font-weight: 700; background: var(--pastel-green); color: var(--pastel-green-text); border-radius: 999px; padding: 2px 8px; }
.bulk-add-box .bulk-add-stock.is-out { background: var(--pastel-red); color: var(--pastel-red-text); }
/* جعبه‌های «دریافت/بارگذاریِ فایل» داخلِ پاپ‌آپ‌های «بیشتر» */
.modal-box .import-box { border: 1px solid var(--border) !important; border-radius: 14px !important; padding: 14px !important; margin-top: 12px !important; background: var(--surface); }
.modal-box .import-box > h4 { font-size: 14px !important; margin: 0 0 6px; }
.modal-box .import-hint { font-size: 12px; line-height: 1.9; color: var(--muted); }
.modal-box .import-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.modal-box .import-actions .pay-file-btn { flex: 1 1 100%; }
.modal-box .import-actions .btn-add, .modal-box .import-actions .btn-save { min-height: 42px; }
.fx-file.has-file { border-style: solid; border-color: var(--accent); background: var(--pastel-blue); }
.fx-file b { font-weight: 700; }
.inv-more-wh-btn { width: 100%; justify-content: center; min-height: 44px; border-radius: 12px !important; }
/* تیک‌های داخلِ پاپ‌آپ‌ها (مثلاً انتخابِ بخش‌های پشتیبان) */
.modal-box .settings-row > input[type=checkbox], .modal-box label > input[type=checkbox]:not(.toggle-switch input) { width: 19px; height: 19px; accent-color: var(--accent); flex: none; cursor: pointer; }
/* ===== کارتِ محصول (بازطراحیِ گروه D): فیلدهای قیمت با پسوند، فوترِ دودکمه‌ای ===== */
#productCardModalOverlay .modal-box > h4, #productCardContent > h4 { margin-bottom: 14px; }
#productCardContent .req { color: var(--pastel-red-text); }
#productCardContent .cust-profile-card { border-radius: 16px; }
#productCardContent .prod-cost-percent-row { display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 10px; overflow: visible; }
#productCardContent .prod-cost-percent-row:not(:has(.prod-pct-field)) { grid-template-columns: minmax(0, 1fr); }
.prod-num-wrap { position: relative; display: block; width: 100%; }
#productCardContent .prod-num-wrap input { width: 100%; height: 46px; font-size: 16px !important; font-weight: 800; padding-left: 46px !important; text-align: left; direction: ltr; }
.prod-num-suffix { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 700; color: var(--muted); pointer-events: none; }
#productCardContent textarea#cardProdDescription { background: var(--header-bg); border: 1px solid transparent; border-radius: 10px; padding: 10px 12px; font-size: 13.5px; color: var(--text); outline: none; }
#productCardContent textarea#cardProdDescription:focus { border-color: var(--accent); background: var(--surface); }
#productCardContent .prod-formula-section { border-radius: 14px; }
#productCardContent .prod-formula-section-head { font-size: 12.5px; color: var(--muted); }
#productCardContent .prod-gallery-add { border-radius: 12px; }
/* فوتر */
#productCardModalOverlay .prod-sale-float-bar { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 12px; background: var(--pastel-blue); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); border-radius: 12px; padding: 9px 14px; margin-bottom: 10px; }
#productCardModalOverlay .prod-sale-label { font-size: 12px; font-weight: 700; color: var(--accent-text); }
#productCardModalOverlay .prod-sale-float-bar .prod-sale-price-value { font-size: 18px; }
#productCardModalOverlay .prod-sale-float-bar .prod-sale-price-note { grid-column: 1 / -1; margin: 0; }
#productCardModalOverlay .prod-sale-float-bar .prod-sale-price-note:empty { display: none; }
#productCardModalOverlay .prod-sticky-actions.pay-actions { margin-top: 0; }
#productCardModalOverlay .prod-sticky-actions.pay-actions .btn-save { flex: 2; font-size: 14px; padding: 0 12px; }
#productCardModalOverlay .prod-sticky-actions.pay-actions .btn-clear { flex: 1; font-size: 14px; padding: 0 12px; }
#productCardModalOverlay .prod-sticky-actions .btn-icon-svg { display: inline-block; width: 18px; height: 18px; }
@media (max-width: 700px) {
#productCardContent .prod-cost-percent-row { grid-template-columns: minmax(0, 1fr) 104px; }
#productCardModalOverlay .prod-sale-float-bar { padding: 8px 12px; }
}
/* ===== پاپ‌آپ‌ها گروه D: فرم‌های ساده هم‌شکلِ کارتِ محصول ===== */
.modal-box.form-modal:not(.sb-modal-wide) { max-width: 500px; }
.form-modal > h4 { margin-bottom: 14px; }
.form-modal .customer-form { margin-bottom: 0; }
.form-modal .customer-form .field-line > label { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.form-modal .customer-form .field-line > input:not([type=checkbox]):not([type=radio]):not([type=file]),
.form-modal .customer-form .field-line > select,
.form-modal .customer-form .field-line > textarea {
background: var(--header-bg) !important; border: 1px solid transparent !important; border-radius: 10px !important;
height: 44px; padding: 0 12px !important; font-size: 13.5px; font-family: inherit; color: var(--text); width: 100%; box-sizing: border-box; outline: none;
}
.form-modal .customer-form .field-line > textarea { height: auto; min-height: 80px; padding: 10px 12px !important; resize: vertical; }
.form-modal .customer-form .field-line > input:focus,
.form-modal .customer-form .field-line > select:focus,
.form-modal .customer-form .field-line > textarea:focus { border-color: var(--accent) !important; background: var(--surface) !important; }
.form-modal .customer-form .field-line > input[readonly] { color: var(--muted); }
.form-modal .settings-input { background: var(--header-bg); border: 1px solid transparent; border-radius: 10px; height: 44px; padding: 0 12px; font: inherit; font-size: 13.5px; color: var(--text); box-sizing: border-box; outline: none; }
.form-modal .settings-input:focus { border-color: var(--accent); background: var(--surface); }
.form-hint, .form-modal .import-hint { font-size: 12px; color: var(--muted); line-height: 1.9; margin: 0; grid-column: 1 / -1; }
.form-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; margin-top: 12px; cursor: pointer; }
.form-modal .customer-form .form-toggle-row { margin-top: 0; }
.form-modal .settings-card .settings-row { cursor: pointer; }
.form-modal .customer-form-actions { display: flex; gap: 10px; margin-top: 18px; }
.form-modal .customer-form .customer-form-actions { margin-top: 4px; }
.form-modal .customer-form-actions .btn-save { flex: 2; min-height: 46px; }
.form-modal .customer-form-actions .btn-clear { flex: 1; min-height: 46px; }
.form-modal .customer-form-actions .form-del-btn { flex: 0 0 auto; margin-inline-start: auto; color: var(--danger); min-height: 46px; }
.form-modal .blg-cat-add { display: flex; gap: 8px; }
.form-modal .blg-cat-add input { flex: 1; min-width: 0; }
.form-modal .blg-cat-add .btn-save { min-height: 44px; }
#blgProdSearch { width: 100%; margin-bottom: 10px; }
#footerLocationMapEl { border-radius: 14px !important; }
@media (max-width: 700px) {
.form-modal .customer-form-actions .form-del-btn { flex: 1 1 100%; order: 3; margin: 0; }
.form-modal .customer-form-actions { flex-wrap: wrap; }
.form-modal .customer-form-actions .btn-save { flex: 2 1 0; }
.form-modal .customer-form-actions .btn-clear { flex: 1 1 0; }
}
/* ===== پاپ‌آپ‌ها گروه E: کارت‌های بزرگ ===== */
.form-modal .req, .modal-box .req { color: var(--pastel-red-text); }
#customerFormModalOverlay .modal-box.form-modal { max-width: 640px; }
.form-modal .form-toggle-row.sms-gated { margin-top: 14px; }
.form-modal > .settings-row-desc { line-height: 1.9; }
/* فوترهای چسبان (مشاهده‌ی محصول، کارتِ انبار، قیمت‌گذاریِ هوشمند): دکمه‌ی اصلی پهن‌تر */
.modal-box-sticky-footer > .btn-save { flex: 2 1 0; min-height: 46px; }
.modal-box-sticky-footer > .btn-clear { flex: 1 1 0; min-height: 46px; }
.modal-box-sticky-footer > .btn-delete { min-height: 46px; padding-inline: 18px; }
.modal-box-sticky-footer > .btn-delete:first-child { flex: 2 1 0; }
.modal-box-sticky-footer > .btn-delete:not(:first-child) { order: 3; flex: 0 0 auto; }
.biz-form-footer .btn-save { flex: 2 1 0; min-height: 46px; }
.biz-form-footer .btn-clear { min-height: 46px; }
#smartPricingModalOverlay .modal-box-sticky-footer > .btn-clear { white-space: normal; line-height: 1.4; }
/* پروفایلِ کاربر: سه آمار کنارِ هم (در موبایلِ باریک، ردیفیِ فشرده) و تب‌های یک‌خطه با اسکرولِ افقی */
@media (min-width: 521px) { .modal-box .cust-stats-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px; } .modal-box .cust-stat { padding: 12px 8px; } }
@media (max-width: 520px) {
.modal-box .cust-stats-row { grid-template-columns: 1fr !important; gap: 6px; }
.modal-box .cust-stat { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; padding: 10px 14px; text-align: start; }
.modal-box .cust-stat .cust-stat-value { font-size: 15px; }
.modal-box .cust-stat .cust-stat-label { margin-top: 0; }
}
.modal-box .cust-profile-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.modal-box .cust-profile-tabs::-webkit-scrollbar { display: none; }
.modal-box .cust-profile-tabs > button { flex: 0 0 auto; white-space: nowrap; }
/* ===== پاپ‌آپ‌ها گروه F ===== */
.ship-form .ship-presets { margin-bottom: 4px; }
.ship-form .ship-zone { border-radius: 12px; }
.ship-form .ship-tier input, .ship-form .ship-extra input { background: var(--header-bg); border: 1px solid transparent; border-radius: 8px; height: 36px; }
.ship-form .ship-tier input:focus, .ship-form .ship-extra input:focus { border-color: var(--accent); background: var(--surface); outline: none; }
.vs-foot .vs-note { flex: 1 1 260px; min-width: 0; height: 44px; background: var(--header-bg); border: 1px solid transparent; border-radius: 10px; padding: 0 12px; font: inherit; font-size: 13px; color: var(--text); outline: none; }
.vs-foot .vs-note:focus { border-color: var(--accent); background: var(--surface); }
.vs-foot .vs-actions { flex: 1 1 100%; display: flex; gap: 10px; }
.vs-foot .vs-actions .btn-save { flex: 2 1 0; min-height: 46px; }
.vs-foot .vs-actions .btn-clear { flex: 1 1 0; min-height: 46px; }
.os-box .customer-form-actions { display: flex; gap: 10px; }
.os-box .customer-form-actions .btn-save { flex: 2 1 0; min-height: 46px; }
.os-box .customer-form-actions .btn-clear { flex: 1 1 0; min-height: 46px; }
.inv-var-row .inv-var-qty { background: var(--header-bg); border: 1px solid transparent; border-radius: 10px; height: 40px; text-align: center; font: inherit; }
.inv-var-row .inv-var-qty:focus { border-color: var(--accent); background: var(--surface); outline: none; }
/* ===== فاکتورِ دستی: ثبت در یک قدم، مبلغِ دریافتی داخلِ فرم، ارسالِ سه‌بخشی ===== */
.inv-inline-pay { display: flex; gap: 8px; align-items: center; }
.inv-inline-pay[hidden] { display: none; }
.inv-inline-amount { position: relative; flex: 1; min-width: 0; display: block; }
.inv-inline-amount input { width: 100%; height: 42px; box-sizing: border-box; background: var(--header-bg); border: 1px solid transparent; border-radius: 10px; padding: 0 12px 0 44px; font: inherit; font-size: 15px; font-weight: 800; text-align: left; direction: ltr; color: var(--text); outline: none; }
.inv-inline-amount input:focus { border-color: var(--accent); background: var(--surface); }
.inv-inline-amount .input-suffix { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 11.5px; color: var(--muted); pointer-events: none; }
.inv-full-btn { flex: none; font: inherit; font-size: 12px; font-weight: 700; border: 1px solid var(--border); background: var(--surface); color: var(--accent-text); border-radius: 999px; padding: 7px 12px; cursor: pointer; white-space: nowrap; }
.inv-full-btn:hover { border-color: var(--accent); background: var(--pastel-blue); }
.inv-check-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; background: none; border: 0; padding: 2px 0; font: inherit; font-size: 12px; color: var(--accent-text); cursor: pointer; }
.inv-check-link .ic { width: 16px; height: 16px; }
.inv-check-link:hover span { text-decoration: underline; }
.inv-pay-summary:empty { display: none; }
.pay-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pay-label-row .pay-field-label { margin: 0; }
.invoice-editor-actions { display: flex; gap: 10px; }
.invoice-editor-actions .inv-issue-btn { flex: 1 1 auto; min-height: 48px; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.invoice-editor-actions .inv-draft-btn { flex: 0 0 auto; min-height: 48px; padding-inline: 16px; display: inline-flex; align-items: center; gap: 6px; }
.invoice-editor-actions .inv-draft-btn[hidden] { display: none; }
/* پاپ‌آپِ ارسال */
.send-modal { max-width: 440px !important; }
.send-msg:empty { display: none; }
.send-msg { font-size: 12.5px; color: var(--pastel-red-text); background: var(--danger-soft, #fdecec); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; }
.send-sec { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; margin-top: 10px; }
.send-sec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13.5px; }
.send-sec-head .ic { width: 18px; height: 18px; color: var(--accent-text); }
.send-sec-head small { margin-inline-start: auto; color: var(--muted); font-size: 12px; direction: ltr; }
.send-main { width: 100%; min-height: 46px; }
.send-alt { display: block; margin: 8px auto 0; background: none; border: 0; font: inherit; font-size: 12.5px; color: var(--accent-text); cursor: pointer; }
.send-alt:hover { text-decoration: underline; }
.send-row { display: flex; gap: 8px; }
.send-row > button { flex: 1; min-height: 44px; }
.send-row > button[hidden] { display: none; }
.send-sec .inv-share-link-box { margin: 0; }
@media (max-width: 700px) { .send-row { flex-direction: column; } }
/* ===== پیوستِ تیکت ===== */
.tk-att-box { margin-top: 10px; }
.tk-att-btn { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border: 1.5px dashed var(--border); border-radius: 12px; padding: 10px 12px; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--text); }
.tk-att-btn:hover { border-color: var(--accent); background: var(--pastel-blue); }
.tk-att-btn .ic { width: 18px; height: 18px; color: var(--accent-text); }
.tk-att-btn small { font-weight: 500; color: var(--muted); font-size: 11.5px; }
.tk-att-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tk-att-list:empty { display: none; }
.tk-att-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; border: 1px solid var(--border); border-radius: 999px; padding: 4px 6px 4px 10px; font-size: 12px; background: var(--surface); }
.tk-att-chip .tk-att-name { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-att-chip small { color: var(--muted); }
.tk-att-chip.is-err { border-color: var(--pastel-red-text); }
.tk-att-chip.is-err small { color: var(--pastel-red-text); }
.tk-att-chip.is-up { opacity: .7; }
.tk-att-chip button { border: 0; background: var(--header-bg); border-radius: 50%; width: 22px; height: 22px; cursor: pointer; font-size: 14px; line-height: 1; color: var(--muted); }
.tk-att-show { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tk-att-img img { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); display: block; }
.tk-att-file { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 10px; padding: 6px 10px; font-size: 12px; color: var(--text); text-decoration: none; background: var(--surface); max-width: 220px; }
.tk-att-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-att-file .ic { width: 16px; height: 16px; color: var(--accent-text); flex: none; }
/* ===== هزینه‌ها و پروژه‌ها ===== */
.shell-topbar-btn-ghost { font: inherit; font-size: 13px; font-weight: 700; border: 1px solid var(--border); background: var(--surface); color: var(--accent-text); border-radius: 10px; padding: 8px 14px; cursor: pointer; white-space: nowrap; }
.shell-topbar-btn-ghost:hover { border-color: var(--accent); background: var(--pastel-blue); }
@media (max-width: 900px) { .shell-topbar > #shellNewExpenseBtn { display: none !important; } }
.exp-top-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.exp-list-panel { padding: 16px; }
.exp-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.exp-scope { display: flex; gap: 6px; flex-wrap: wrap; }
.exp-scope button { font: inherit; font-size: 12.5px; font-weight: 700; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.exp-scope button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.exp-tools { display: flex; gap: 8px; align-items: center; flex: 1; justify-content: flex-end; min-width: 0; }
.exp-search { flex: 0 1 260px; min-width: 0; height: 40px; background: var(--header-bg); border: 1px solid transparent; border-radius: 10px; padding: 0 12px; font: inherit; font-size: 13px; color: var(--text); outline: none; }
.exp-search:focus { border-color: var(--accent); background: var(--surface); }
.exp-filter-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
.exp-filter-btn .ic { width: 17px; height: 17px; }
.exp-filter-btn b { background: var(--accent); color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 7px; }
.exp-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-items: end; border: 1px solid var(--border); border-radius: 14px; padding: 12px; margin-bottom: 12px; }
.exp-filters[hidden] { display: none; }
.exp-filters .field-line { display: flex; flex-direction: column; gap: 5px; }
.exp-filters label { font-size: 12px; font-weight: 700; color: var(--muted); }
.exp-filters input, .exp-filters select { height: 40px; background: var(--header-bg); border: 1px solid transparent; border-radius: 10px; padding: 0 10px; font: inherit; font-size: 13px; color: var(--text); width: 100%; box-sizing: border-box; }
.exp-filter-reset { min-height: 40px; }
.exp-summary:empty { display: none; }
.exp-summary { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; }
.exp-sum-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.exp-sum-head b { font-size: 16px; color: var(--text); }
.exp-bars { display: flex; flex-direction: column; gap: 6px; }
.exp-bar { display: grid; grid-template-columns: 110px minmax(0, 1fr) 70px; gap: 10px; align-items: center; font-size: 12px; }
.exp-bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-bar-track { height: 8px; background: var(--header-bg); border-radius: 999px; overflow: hidden; }
.exp-bar-track i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.exp-bar-val { text-align: left; color: var(--muted); }
.exp-list { display: flex; flex-direction: column; }
.exp-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 6px; border: 0; border-bottom: 1px solid var(--border); background: none; font: inherit; color: var(--text); text-align: start; cursor: pointer; border-radius: 10px; }
.exp-row:hover { background: var(--header-bg); }
.exp-row-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--pastel-blue); color: var(--accent-text); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.exp-row-ic .ic { width: 20px; height: 20px; }
.exp-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.exp-row-main b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-row-main small { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-proj-badge { align-self: flex-start; font-size: 11px; font-weight: 700; background: var(--purple-soft, #f1ecfd); color: var(--purple, #6d3fd6); border-radius: 999px; padding: 2px 9px; }
.exp-row-amt { font-weight: 800; font-size: 14px; color: var(--pastel-red-text); white-space: nowrap; }
.exp-more { width: 100%; margin-top: 10px; }
/* فرم */
.exp-form .exp-gap { margin-top: 14px; }
.exp-cat-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; max-height: 190px; overflow: auto; padding: 2px; }
.exp-cat-pick button { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 1px solid var(--border); background: var(--surface); border-radius: 12px; padding: 8px 4px; font: inherit; font-size: 11.5px; color: var(--text); cursor: pointer; }
.exp-cat-pick button .ic { width: 20px; height: 20px; color: var(--accent-text); }
.exp-cat-pick button.active { border-color: var(--accent); background: var(--pastel-blue); font-weight: 700; }
.exp-form-grid { margin-top: 12px; }
.exp-more-box .exp-form-grid { margin-top: 6px; }
.exp-cat-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; max-height: 50vh; overflow: auto; }
.exp-cat-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto auto; gap: 8px; align-items: center; border: 1px solid var(--border); border-radius: 12px; padding: 6px 8px; }
.exp-cat-row.is-off { opacity: .6; }
.exp-cat-row small { color: var(--muted); font-size: 11.5px; }
.exp-cat-name { font-size: 13px; font-weight: 700; }
/* پروژه‌ها */
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.proj-card { display: flex; flex-direction: column; gap: 8px; text-align: start; border: 1px solid var(--border); background: var(--surface); border-radius: 16px; padding: 14px; cursor: pointer; font: inherit; color: var(--text); }
.proj-card:hover { border-color: var(--accent); box-shadow: var(--card-shadow); }
.proj-card-head { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.proj-card-head b { font-size: 14.5px; }
.proj-card-sub { color: var(--muted); font-size: 12px; }
.proj-st { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 9px; white-space: nowrap; background: var(--header-bg); color: var(--muted); }
.proj-st.st-active { background: var(--success-soft, #e8f6f0); color: var(--success, #12805c); }
.proj-st.st-done { background: var(--info-soft, #eaf1fe); color: var(--info, #1d5fd8); }
.proj-st.st-canceled { background: var(--danger-soft, #fdecea); color: var(--danger, #c8322b); }
.proj-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.proj-nums span { background: var(--header-bg); border-radius: 10px; padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; }
.proj-nums small { font-size: 11px; color: var(--muted); }
.proj-nums b { font-size: 13px; }
.proj-nums .is-pos b, .proj-tile.is-pos b { color: var(--pastel-green-text); }
.proj-nums .is-neg b, .proj-tile.is-neg b { color: var(--pastel-red-text); }
.proj-budget { display: flex; flex-direction: column; gap: 4px; }
.proj-budget small { font-size: 11.5px; color: var(--muted); }
.proj-budget-track { height: 8px; background: var(--header-bg); border-radius: 999px; overflow: hidden; display: block; }
.proj-budget-track i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.proj-budget-track i.is-over { background: var(--pastel-red-text); }
.proj-budget.is-big { margin: 12px 0; }
.proj-lock { display: flex; gap: 16px; align-items: flex-start; border: 1.5px dashed var(--border); border-radius: 16px; padding: 20px; grid-column: 1 / -1; }
.proj-lock > .ic { width: 36px; height: 36px; color: var(--accent-text); flex: none; }
.proj-lock p { color: var(--muted); font-size: 13px; line-height: 2; margin: 6px 0 12px; }
.proj-detail-box { max-width: 760px; }
.proj-d-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding-inline-end: 30px; }
.proj-d-head h4 { margin: 0; }
.proj-d-info { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; }
.proj-d-info small { display: block; color: var(--muted); font-size: 11.5px; }
.proj-d-desc { font-size: 13px; color: var(--muted); line-height: 2; margin: 10px 0 0; }
.proj-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-top: 14px; }
.proj-tile { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.proj-tile small { color: var(--muted); font-size: 11.5px; }
.proj-tile b { font-size: 14px; }
.proj-sec { margin-top: 16px; }
.proj-sec-title { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; font-weight: 800; margin-bottom: 8px; }
.proj-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
.proj-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.proj-table th { background: var(--header-bg); color: var(--muted); font-weight: 700; text-align: start; padding: 8px 10px; white-space: nowrap; }
.proj-table td { padding: 8px 10px; border-top: 1px solid var(--border); white-space: nowrap; }
.proj-table tbody tr { cursor: pointer; }
.proj-table tbody tr:hover { background: var(--header-bg); }
.num { direction: ltr; text-align: left; font-weight: 700; }
.proj-doc { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; margin-bottom: 6px; }
.proj-doc > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.proj-doc small { color: var(--muted); font-size: 11.5px; }
.proj-detail-box .customer-form-actions { margin-top: 18px; }
.exp-link-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; }
.exp-link-row { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; cursor: pointer; }
.exp-link-row.is-on { border-color: var(--accent); background: var(--pastel-blue); }
.exp-link-main { display: flex; flex-direction: column; min-width: 0; }
.exp-link-main small { color: var(--muted); font-size: 11.5px; }
@media (max-width: 700px) {
.exp-tools { flex: 1 1 100%; }
.exp-search { flex: 1 1 auto; }
.exp-filter-btn span { display: none; }
.exp-bar { grid-template-columns: 80px minmax(0, 1fr) 60px; }
.exp-cat-pick { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.proj-grid { grid-template-columns: 1fr; }
.exp-row-amt { font-size: 13px; }
}
/* ===== ثبتِ سریعِ هزینه ===== */
.quick-exp-fab { position: fixed; left: 22px; bottom: 22px; z-index: 860; display: inline-flex; align-items: center; gap: 6px; height: 50px; padding: 0 18px 0 16px; border: 0; border-radius: 999px; background: var(--accent); color: #fff; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; box-shadow: 0 10px 26px rgba(15, 20, 35, .25); transition: transform .15s, opacity .15s; }
.quick-exp-fab .ic { width: 20px; height: 20px; }
.quick-exp-fab:hover { transform: translateY(-2px); }
.quick-exp-fab.is-hidden { opacity: 0; pointer-events: none; transform: scale(.8); }
body:has(.modal-overlay.open) .quick-exp-fab { opacity: 0; pointer-events: none; }
@media (max-width: 900px) {
.quick-exp-fab { left: 14px; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); height: 48px; width: 48px; padding: 0; justify-content: center; }
.quick-exp-fab span { display: none; }
}
.qe-box { max-width: 460px; }
.qe-proj-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.qe-proj-pick button { font: inherit; font-size: 12.5px; font-weight: 700; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 7px 14px; cursor: pointer; }
.qe-proj-pick button.active { background: var(--purple, #6d3fd6); border-color: var(--purple, #6d3fd6); color: #fff; }
.qe-lock { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; border: 1.5px dashed var(--border); border-radius: 14px; padding: 16px; font-size: 13px; }
.qe-lock[hidden] { display: none; }
.qe-cats-head { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.qe-cats-head .pay-field-label { margin: 0; }
.qe-edit-cats { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; font: inherit; font-size: 12px; color: var(--accent-text); cursor: pointer; }
.qe-edit-cats .ic { width: 15px; height: 15px; }
.qe-cats { margin-top: 6px; }
.qe-desc { width: 100%; height: 44px; box-sizing: border-box; margin-top: 10px; background: var(--header-bg); border: 1px solid transparent; border-radius: 10px; padding: 0 12px; font: inherit; font-size: 13.5px; color: var(--text); outline: none; }
.qe-desc:focus { border-color: var(--accent); background: var(--surface); }
.qe-row { display: flex; gap: 8px; margin-top: 10px; }
.qe-photo-btn { display: inline-flex; align-items: center; gap: 6px; border: 1.5px dashed var(--border); border-radius: 10px; padding: 0 12px; height: 42px; font-size: 12.5px; font-weight: 700; color: var(--text); cursor: pointer; flex: 1; justify-content: center; }
.qe-photo-btn .ic { width: 18px; height: 18px; color: var(--accent-text); }
.qe-photo-btn:hover { border-color: var(--accent); background: var(--pastel-blue); }
.qe-acc { flex: 1; min-width: 0; height: 42px; background: var(--header-bg); border: 1px solid transparent; border-radius: 10px; padding: 0 10px; font: inherit; font-size: 12.5px; color: var(--text); }
.qe-photo-preview { position: relative; display: inline-block; margin-top: 8px; }
.qe-photo-preview:empty { display: none; }
.qe-photo-preview img { max-width: 160px; max-height: 120px; border-radius: 10px; border: 1px solid var(--border); display: block; object-fit: cover; }
.tk-att-x { position: absolute; top: -8px; left: -8px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--pastel-red-text); color: #fff; cursor: pointer; font-size: 15px; line-height: 1; }
/* دسته‌ها: سوییچِ نمایش */
.exp-cat-row { grid-template-columns: 40px minmax(0, 1fr) auto auto auto !important; }
.exp-cat-name { display: flex; flex-direction: column; }
.exp-cat-name small { font-weight: 500; }
/* صفحه: بازه‌ی زمانی، میله‌های قابلِ کلیک، سرِ روز */
.exp-period { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 10px; }
.exp-period::-webkit-scrollbar { display: none; }
.exp-period button { flex: none; font: inherit; font-size: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 999px; padding: 5px 12px; cursor: pointer; white-space: nowrap; }
.exp-period button.active { border-color: var(--accent); color: var(--accent-text); background: var(--pastel-blue); font-weight: 700; }
button.exp-bar { border: 0; background: none; font: inherit; color: var(--text); cursor: pointer; padding: 3px 4px; border-radius: 8px; text-align: start; }
button.exp-bar:hover, button.exp-bar.is-on { background: var(--pastel-blue); }
.exp-day-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 700; color: var(--muted); padding: 12px 6px 4px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.exp-day-head b { color: var(--text); font-size: 12.5px; }
.exp-row-amt { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.exp-has-img { font-size: 10.5px; font-weight: 700; color: var(--accent-text); }
/* ویجتِ داشبورد */
.dash-row-exp { grid-template-columns: 55fr 45fr; align-items: stretch; }
.dash-row-exp > .dash-panel { margin-bottom: 0; display: flex; flex-direction: column; }
.dash-exp-form { display: flex; flex-direction: column; gap: 10px; }
.dash-exp-amount { display: flex; position: relative; }
.dash-exp-amount input { width: 100%; height: 46px; font-size: 17px; font-weight: 800; text-align: center; border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); padding: 0 50px; box-sizing: border-box; outline: none; font-family: inherit; }
.dash-exp-amount input:focus { border-color: var(--accent); }
.dash-exp-amount .input-suffix { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--muted); }
.dash-exp-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.dash-exp-cats button { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 6px 11px; font: inherit; font-size: 12px; color: var(--text); cursor: pointer; }
.dash-exp-cats button .ic { width: 15px; height: 15px; color: var(--accent-text); }
.dash-exp-cats button.active { border-color: var(--accent); background: var(--pastel-blue); font-weight: 700; }
.dash-exp-actions { display: flex; gap: 8px; }
.dash-exp-actions .qe-desc { margin: 0; flex: 1; }
.dash-exp-actions .btn-save { min-width: 90px; }
.dq-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dq-tiles > div { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.dq-tiles small { color: var(--muted); font-size: 11.5px; }
.dq-tiles b { font-size: 14.5px; }
.dq-last { margin-top: 10px; display: flex; flex-direction: column; }
.dq-last-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 0; border-top: 1px dashed var(--border); background: none; padding: 8px 2px; font: inherit; font-size: 12.5px; color: var(--text); cursor: pointer; text-align: start; }
.dq-last-row span { display: flex; flex-direction: column; min-width: 0; }
.dq-last-row small { color: var(--muted); font-size: 11px; }
.dq-last-row b { color: var(--pastel-red-text); white-space: nowrap; }
@media (max-width: 900px) { .dash-row-exp { grid-template-columns: 1fr; } }
/* ===== اصلاحاتِ ثبتِ سریع ===== */
.exp-cat-pick { max-height: none !important; overflow: visible !important; }
.amount-words { font-size: 11.5px; color: var(--muted); text-align: center; min-height: 16px; margin-top: 4px; line-height: 1.6; }
.amount-words:empty { min-height: 0; margin: 0; }
.qe-row { flex-wrap: wrap; }
.qe-date { flex: 0 0 auto; width: 104px; height: 42px; box-sizing: border-box; text-align: center; background: var(--pastel-blue); border: 1px solid transparent; border-radius: 10px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--accent-text); cursor: pointer; }
.qe-date.is-other { background: var(--warning-soft, #fef4e6); color: var(--warning, #b54708); }
@media (max-width: 900px) {
.quick-exp-fab { bottom: calc(var(--mbar-h, 70px) + 12px) !important; }
}
@media (max-width: 420px) {
.qe-photo-btn { flex: 1 1 100%; }
}
.exp-cat-tool { border-style: dashed !important; color: var(--accent-text) !important; background: transparent !important; }
.exp-cat-tool .ic { color: var(--accent-text); }
.dash-exp-cats .exp-cat-tool span { font-weight: 700; }
@media (max-width: 700px) { .exp-filter-btn span { display: inline !important; } .exp-tools { flex-wrap: wrap; } .exp-search { flex: 1 1 100%; } }
/* ===== صیقلِ ثبتِ سریع ===== */
.exp-cat-pick { display: flex !important; flex-wrap: wrap; gap: 7px; grid-template-columns: none !important; }
.exp-chip { gap: 6px; padding: 8px 13px; font-size: 12.5px; }
.exp-chip .ic { width: 16px; height: 16px; }
.exp-cat-empty { font-size: 12px; color: var(--muted); }
.exp-cat-tools { display: flex; gap: 14px; margin-top: 8px; }
.exp-cat-tools:empty { display: none; }
.exp-cat-tools .exp-cat-tool { display: inline-flex; align-items: center; gap: 4px; border: 0 !important; background: none !important; padding: 2px 0; font: inherit; font-size: 12px; font-weight: 700; color: var(--accent-text) !important; cursor: pointer; }
.exp-cat-tools .exp-cat-tool .ic { width: 14px; height: 14px; }
.exp-cat-list { max-height: none !important; overflow: visible !important; }
#expCatOverlay .modal-box { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.jalali-cal-popup.is-centered { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); z-index: 3500; width: min(300px, 88vw); box-shadow: 0 0 0 100vmax rgba(15, 20, 35, .35), 0 18px 48px rgba(0, 0, 0, .25); border-radius: 16px; }
.qe-photo-preview .img-upload-progress-bar-wrap { width: 200px; }
#expAddBtn { display: inline-flex; align-self: center; height: 42px; padding: 0 18px; border-radius: 12px; font-size: 13.5px; box-sizing: border-box; }
#expAddBtn .ic { width: 18px; height: 18px; }
.exp-top-row { align-items: center; }
.exp-top-row .main-tabs { margin: 0; }
@media (max-width: 640px) {
#expAddBtn { width: 42px; height: 42px; padding: 0; justify-content: center; }
#expAddBtn .ic { width: 20px; height: 20px; }
}
/* فیلدهای اختیاریِ ثبتِ سریع */
#quickExpOverlay [hidden] { display: none !important; }
.qe-extra { margin-top: 10px; display: flex; }
.qe-extra .qe-acc { flex: 1; }
.qe-extra-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qe-extra-2 .qe-desc { margin-top: 0; }
.qe-extra-2:has(> [hidden]) { grid-template-columns: 1fr; }
.qe-notes { height: auto; min-height: 64px; padding: 10px 12px; resize: vertical; }
/* چیپِ دسته: دقیقاً قرصِ افقیِ فاکتور (آیکونِ کوچیک کنارِ متن، نه بالای اون) */
.exp-cat-pick .exp-chip, .exp-chip {
flex: 0 0 auto; flex-direction: row !important; align-items: center; gap: 6px;
border: none !important; border-radius: 999px !important; padding: 7px 14px !important;
font-size: 12.5px !important; font-weight: 700; white-space: nowrap; box-shadow: none;
}
.exp-cat-pick .exp-chip .ic, .exp-chip .ic { width: 15px !important; height: 15px !important; color: currentColor !important; }
.exp-chip.is-active { box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
/* «دسته‌ی جدید» و «ویرایش»: دکمه‌ی قرصیِ خط‌چین، جدا از دسته‌ها */
.exp-cat-tools { gap: 8px !important; margin-top: 10px !important; }
.exp-cat-tools .exp-cat-tool { border: 1.5px dashed var(--accent) !important; border-radius: 999px !important; padding: 6px 13px !important; font-size: 12px !important; }
.exp-cat-tools .exp-cat-tool:hover { background: var(--pastel-blue) !important; }
.exp-ic-btn { border: 0; cursor: pointer; }
.exp-ic-btn:hover { box-shadow: 0 0 0 2px var(--accent); }
.exp-icon-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; padding: 10px; border: 1px dashed var(--border); border-radius: 12px; margin: -2px 0 6px; }
.exp-icon-pick button { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--accent-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.exp-icon-pick button .ic { width: 20px; height: 20px; }
.exp-icon-pick button.is-on { background: var(--accent); color: #fff; border-color: var(--accent); }
/* ابزارِ دسته بالای چیپ‌ها، هم‌ردیفِ عنوانِ «دسته» */
.qe-cats-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.qe-cats-head .exp-cat-tools { margin-top: 0 !important; }
.qe-cats { margin-top: 0 !important; }
/* دکمه‌ی حذفِ عکس: دایره‌ی کامل (قانونِ عمومیِ ارتفاعِ دکمه‌ها کشیده‌ش می‌کرد) */
.tk-att-x { width: 26px !important; height: 26px !important; min-width: 26px !important; min-height: 26px !important; max-height: 26px; padding: 0 !important; border-radius: 50% !important; display: inline-flex !important; align-items: center; justify-content: center; aspect-ratio: 1 / 1; font-size: 16px; line-height: 1; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
/* ===== کارتِ ثبتِ سریع — نسخه‌ی ساده ===== */
.qe-box > h4 { margin-bottom: 12px; }
.exp-cat-tools .exp-cat-tool { border: 0 !important; padding: 2px 0 !important; background: none !important; }
.exp-cat-tools .exp-cat-tool:hover { background: none !important; text-decoration: underline; }
.qe-proj-chip { background: var(--neutral-soft); color: var(--muted); }
.qe-proj-chip.is-active { background: var(--purple, #6d3fd6); color: #fff; }
.qe-proj-chip .qe-caret { width: 13px !important; height: 13px !important; transition: transform .25s ease; }
.qe-proj-chip.is-open .qe-caret { transform: rotate(180deg); }
/* بازشدنِ نرمِ پروژه‌ها (grid-rows 0fr→1fr + محوشدن) */
.qe-proj-panel { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .3s ease, opacity .25s ease, margin .3s ease; margin-top: 0; }
.qe-proj-panel.is-open { grid-template-rows: 1fr; opacity: 1; margin-top: 10px; }
.qe-proj-clip { overflow: hidden; min-height: 0; }
.qe-proj-inner { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px; border-radius: 14px; background: var(--header-bg); transform: translateY(-6px); transition: transform .3s ease; }
.qe-proj-panel.is-open .qe-proj-inner { transform: none; }
.qe-proj-note { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; font-size: 12.5px; color: var(--muted); }
.qe-link { border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--accent-text); cursor: pointer; padding: 0; white-space: nowrap; }
.qe-amount-label { margin-top: 16px; }
.qe-line { display: flex; gap: 8px; margin-top: 10px; align-items: stretch; }
.qe-line[hidden] { display: none !important; }
.qe-line .qe-desc { flex: 1; min-width: 0; margin-top: 0; }
.qe-line .qe-date { flex: 0 0 96px; width: auto; }
.qe-line .qe-acc { flex: 1; min-width: 0; height: 44px; }
.qe-photo-wrap { flex: 1; min-width: 0; position: relative; display: flex; }
.qe-photo-wrap[hidden] { display: none !important; }
.qe-photo-btn { position: relative; overflow: hidden; flex: 1; height: 44px; border-style: solid !important; border-width: 1px !important; border-color: var(--border) !important; justify-content: flex-start !important; padding: 0 12px !important; }
.qe-photo-btn::after { content: ''; position: absolute; right: 0; bottom: 0; height: 3px; width: var(--p, 0%); background: var(--accent); transition: width .15s ease; }
.qe-photo-btn.is-up { color: var(--muted); }
.qe-photo-btn.is-done { background: var(--success-soft, #e8f6f0) !important; border-color: transparent !important; color: var(--success, #12805c); }
.qe-photo-btn.is-done .ic { color: var(--success, #12805c); }
.qe-photo-x { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; padding: 0 !important; border: 0; border-radius: 50% !important; background: rgba(0, 0, 0, .08); color: var(--text); font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.qe-photo-x[hidden] { display: none !important; }
#quickExpOverlay .qe-photo-preview { display: none !important; }
/* ===== صفحه‌ی هزینه‌ها — هم‌چیدمانِ انبار/محصولات ===== */
.exp-side .prod-cat-card-head { display: flex; align-items: center; justify-content: space-between; }
.exp-side-edit { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 8px; display: inline-flex; }
.exp-side-edit:hover { color: var(--accent-text); background: var(--header-bg); }
.exp-side-edit .ic { width: 16px; height: 16px; }
.exp-cat-group-title { font-size: 11px; font-weight: 800; color: var(--muted); padding: 10px 8px 4px; }
.exp-cat-item .prod-cat-name { display: inline-flex; align-items: center; gap: 6px; }
.exp-cat-item .prod-cat-name .ic { width: 15px; height: 15px; color: var(--accent-text); flex: none; }
.exp-side-sec { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.exp-side-title { font-size: 12.5px; font-weight: 800; color: var(--text); }
.exp-side .exp-period { flex-wrap: wrap; overflow: visible; padding: 0; gap: 5px; }
.exp-side .exp-period button { font-size: 11.5px; padding: 5px 10px; }
.exp-range { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.exp-range input, .exp-side-field select { height: 38px; width: 100%; box-sizing: border-box; background: var(--header-bg); border: 1px solid transparent; border-radius: 10px; padding: 0 10px; font: inherit; font-size: 12.5px; color: var(--text); text-align: center; cursor: pointer; }
.exp-side-field { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.exp-side-field[hidden] { display: none; }
.exp-side-field select { text-align: start; }
.exp-side-reset { border: 0; background: none; font: inherit; font-size: 12px; font-weight: 700; color: var(--pastel-red-text); cursor: pointer; padding: 4px 0; text-align: start; }
/* نمودار و سهمِ دسته‌ها */
.exp-chart-panel { border: 1px solid var(--border); border-radius: var(--card-radius, 16px); padding: 14px 16px 12px; margin: 4px 0 14px; }
.exp-chart-panel[hidden] { display: none; }
.exp-chart-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 800; margin-bottom: 6px; }
.exp-chart-head b { font-size: 15px; color: var(--pastel-red-text); }
.exp-chart { height: 150px; }
.exp-share { margin-top: 12px; }
.exp-share-meta { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-bottom: 6px; }
.exp-share-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--header-bg); gap: 2px; }
.exp-share-bar i, .exp-share-legend i { display: block; }
.exp-share-bar i.tone-info, .exp-share-legend i.tone-info { background: var(--info); }
.exp-share-bar i.tone-success, .exp-share-legend i.tone-success { background: var(--success); }
.exp-share-bar i.tone-warning, .exp-share-legend i.tone-warning { background: var(--warning); }
.exp-share-bar i.tone-purple, .exp-share-legend i.tone-purple { background: var(--purple); }
.exp-share-bar i.tone-teal, .exp-share-legend i.tone-teal { background: var(--teal); }
.exp-share-bar i.tone-danger, .exp-share-legend i.tone-danger { background: var(--danger); }
.exp-share-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; }
.exp-share-legend button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; font: inherit; font-size: 12px; color: var(--text); cursor: pointer; padding: 2px 0; }
.exp-share-legend button.is-on { font-weight: 800; text-decoration: underline; }
.exp-share-legend i { width: 9px; height: 9px; border-radius: 50%; }
.exp-share-legend b { color: var(--muted); font-weight: 700; }
.exp-day-head { position: static; }
/* کارت‌های پروژه — هم‌شکلِ کارت‌های برنامه */
.proj-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--card-radius, 16px); box-shadow: none; padding: 16px; gap: 10px; transition: border-color .15s, box-shadow .15s; }
.proj-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: var(--card-shadow); }
.proj-card-head b { font-size: 15px; font-weight: 800; }
.proj-nums { gap: 8px; }
.proj-nums span { background: var(--header-bg); border-radius: 12px; padding: 8px 10px; }
.proj-nums b { font-size: 13.5px; font-weight: 800; }
/* پاپ‌آپِ جزئیاتِ پروژه */
.proj-detail-box .proj-d-head { padding: 0 0 12px 34px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.proj-detail-box .proj-d-head h4 { font-size: 17px; }
.proj-d-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.proj-d-info span { background: var(--header-bg); border-radius: 12px; padding: 8px 12px; font-size: 13px; font-weight: 700; }
.proj-tiles { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.proj-tile { border: 0; border-radius: 14px; padding: 12px 14px; background: var(--header-bg); }
.proj-tile b { font-size: 15px; font-weight: 800; }
.proj-tile.is-pos { background: var(--success-soft); }
.proj-tile.is-neg { background: var(--danger-soft); }
.proj-sec { border: 1px solid var(--border); border-radius: 16px; padding: 14px; margin-top: 14px; }
.proj-sec-title { margin-bottom: 10px; }
.proj-table-wrap { border: 0; border-radius: 12px; }
.proj-doc { border: 0; background: var(--header-bg); }
@media (max-width: 900px) {
.exp-chart { height: 120px; }
}
@media (max-width: 700px) {
.inv-filter-bar > input[type="text"]#expSearch { display: none; }
.inv-filter-bar.search-open > input[type="text"]#expSearch { display: block; width: 100% !important; order: 5; flex-basis: 100%; }
}
/* ===== هزینه‌ها دورِ ۳ ===== */
#expStatsRow[hidden], #expPurchaseHost[hidden] { display: none !important; }
.exp-proj-chip { display: inline-flex; align-items: center; gap: 5px; }
.exp-proj-chip .qe-caret { width: 13px; height: 13px; transition: transform .25s ease; }
.exp-proj-chip.is-open .qe-caret { transform: rotate(180deg); }
.exp-proj-row.is-open { margin-top: 8px; margin-bottom: 4px; }
.exp-proj-new { align-self: center; margin-inline-start: 4px; }
.exp-proj-sum { border: 1px solid color-mix(in srgb, var(--purple, #6d3fd6) 30%, var(--border)); background: color-mix(in srgb, var(--purple, #6d3fd6) 5%, var(--surface)); border-radius: 16px; padding: 12px 14px; margin: 10px 0 4px; display: flex; flex-direction: column; gap: 10px; }
.exp-proj-sum[hidden] { display: none; }
.exp-proj-sum-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.exp-proj-sum-head b { font-size: 14.5px; }
.exp-proj-sum-actions { margin-inline-start: auto; display: flex; gap: 14px; }
.exp-proj-sum-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.exp-proj-sum-nums span { background: var(--surface); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.exp-proj-sum-nums small { font-size: 11px; color: var(--muted); }
.exp-proj-sum-nums b { font-size: 13px; }
.exp-proj-sum-nums .is-pos b { color: var(--pastel-green-text); }
.exp-proj-sum-nums .is-neg b { color: var(--pastel-red-text); }
/* نمودارِ ستونیِ دسته‌ها */
.exp-cols { display: flex; align-items: flex-end; gap: 10px; height: 210px; overflow-x: auto; padding: 4px 2px 0; scrollbar-width: thin; }
.exp-cols .dash-chart-empty { width: 100%; align-self: center; }
.exp-col { flex: 1 0 58px; max-width: 96px; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: none; padding: 0; font: inherit; color: var(--text); cursor: pointer; border-radius: 10px; }
.exp-col-val { font-size: 11px; font-weight: 800; color: var(--text); white-space: nowrap; }
.exp-col-track { flex: 1; width: 100%; max-width: 44px; display: flex; align-items: flex-end; background: var(--header-bg); border-radius: 10px; overflow: hidden; }
.exp-col-track i { display: block; width: 100%; border-radius: 10px 10px 4px 4px; transition: height .35s ease; }
.exp-col-track i.tone-info { background: var(--info); } .exp-col-track i.tone-success { background: var(--success); }
.exp-col-track i.tone-warning { background: var(--warning); } .exp-col-track i.tone-purple { background: var(--purple); }
.exp-col-track i.tone-teal { background: var(--teal); } .exp-col-track i.tone-danger { background: var(--danger); }
.exp-col-ic .ic { width: 16px; height: 16px; color: var(--muted); }
.exp-col-name { font-size: 11.5px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-col-pct { font-size: 10.5px; color: var(--muted); }
.exp-col:hover .exp-col-track, .exp-col.is-on .exp-col-track { box-shadow: 0 0 0 2px var(--accent); }
.exp-col.is-on .exp-col-name { color: var(--accent-text); }
.exp-share-bar, .exp-share-legend { display: none !important; }
@media (max-width: 700px) { .exp-cols { height: 180px; gap: 6px; } .exp-col { flex-basis: 52px; } }
#expPanelList[hidden], #expPanelProjects[hidden] { display: none !important; }
/* ===== هزینه‌ها دورِ ۴ ===== */
/* پاپ‌آپ‌های بلند: فیلدها نباید فشرده بشن (فرمِ پروژه و هر فرمِ بلندِ دیگه) */
.form-modal .customer-form { flex-shrink: 0; }
.form-modal .customer-form .field-line > input:not([type=checkbox]):not([type=radio]):not([type=file]),
.form-modal .customer-form .field-line > select { flex-shrink: 0; min-height: 44px; }
.form-modal .customer-form .field-line > textarea { flex-shrink: 0; min-height: 80px; }
#projectFormOverlay .customer-form { row-gap: 14px; }
/* بازه‌ی زمانی بالای کارت */
.exp-period-bar { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 12px; }
.exp-period-bar .exp-period { padding-bottom: 0; }
.exp-period-bar .exp-range { max-width: 360px; }
.exp-period-bar .exp-range[hidden] { display: none; }
.exp-filter-pill { display: inline-flex; align-items: center; gap: 6px; }
.exp-filter-pill span { font-size: 14px; line-height: 1; }
.exp-cat-back { margin-inline-start: auto; margin-inline-end: 12px; border: 0; background: var(--pastel-blue); color: var(--accent-text); font: inherit; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.exp-cat-back[hidden] { display: none; }
/* انتخاب */
.exp-sel { display: inline-flex; align-items: center; cursor: pointer; flex: none; }
.exp-sel input { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
.exp-row { grid-template-columns: auto 40px minmax(0, 1fr) auto; }
.exp-row:not(:has(.exp-sel)) { grid-template-columns: 40px minmax(0, 1fr) auto; }
.exp-row.is-sel, .exp-tile.is-sel { background: var(--pastel-blue); }
#expSelCount.has-sel { color: var(--accent-text); font-weight: 800; }
/* نمایشِ کارتی: سه‌ستونه */
.exp-list.is-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.exp-list.is-cards .exp-day-head { grid-column: 1 / -1; }
.exp-tile { display: flex; flex-direction: column; gap: 5px; border: 1px solid var(--border); border-radius: 14px; padding: 10px 12px; background: var(--surface); cursor: pointer; min-width: 0; transition: border-color .15s, box-shadow .15s; }
.exp-tile:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: var(--card-shadow); }
.exp-tile-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.exp-tile-cat { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--accent-text); background: var(--pastel-blue); border-radius: 999px; padding: 3px 9px; min-width: 0; }
.exp-tile-cat span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-tile-cat .ic { width: 13px; height: 13px; flex: none; }
.exp-tile-amt { font-size: 15px; font-weight: 800; color: var(--pastel-red-text); }
.exp-tile-desc { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-tile-meta { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-tile .exp-proj-badge { align-self: flex-start; }
@media (max-width: 900px) { .exp-list.is-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px) { .exp-list.is-cards { gap: 8px; } .exp-tile { padding: 9px 10px; } }
/* پاپ‌آپِ مشاهده */
.exp-view-box { max-width: 440px; }
.exp-view-head { display: flex; gap: 12px; align-items: center; padding: 4px 0 14px 34px; border-bottom: 1px solid var(--border); }
.exp-view-head .exp-row-ic { width: 48px; height: 48px; border-radius: 14px; }
.exp-view-head .exp-row-ic .ic { width: 24px; height: 24px; }
.exp-view-head > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.exp-view-head small { font-size: 12px; color: var(--muted); }
.exp-view-amt { font-size: 20px; font-weight: 900; color: var(--pastel-red-text); }
.exp-view-words { font-size: 11px !important; }
.exp-view-rows { display: flex; flex-direction: column; margin-top: 6px; }
.exp-view-row { display: flex; justify-content: space-between; gap: 14px; padding: 9px 2px; border-bottom: 1px dashed var(--border); font-size: 13px; }
.exp-view-row span { color: var(--muted); flex: none; }
.exp-view-row b { font-weight: 700; text-align: left; overflow-wrap: anywhere; }
.exp-view-img img { width: 100%; max-height: 260px; object-fit: contain; border-radius: 12px; border: 1px solid var(--border); margin-top: 12px; cursor: zoom-in; background: var(--header-bg); }
.exp-view-img:empty { display: none; }
/* میانبرِ فاکتورِ خرید در صفحه‌ی هزینه‌ها + ستونِ خرید در نمودار */
.exp-top-row .exp-pi-btn { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 14px; border-radius: 12px; font-size: 13px; }
.exp-top-row .exp-pi-btn + #expAddBtn { margin-inline-start: 0; }
.exp-top-row .exp-pi-btn .ic { width: 17px; height: 17px; }
.exp-col-pi .exp-col-track { background: repeating-linear-gradient(45deg, var(--header-bg), var(--header-bg) 4px, transparent 4px, transparent 8px); }
.exp-col-pi .exp-col-track i { background: var(--teal); opacity: .85; }
.exp-col-pi { border-inline-start: 1px dashed var(--border); padding-inline-start: 8px; }
@media (max-width: 640px) { .exp-top-row .exp-pi-btn span { display: none; } .exp-top-row .exp-pi-btn { width: 42px; padding: 0; justify-content: center; } }
#expTabs { display: none !important; }
/* ===== هزینه‌ها دورِ ۵ ===== */
/* رنگِ کادرِ هر هزینه = رنگِ چیپِ دسته‌ش */
.exp-row[class*="exp-tone-"] { border-inline-start: 4px solid transparent; }
.exp-tone-info { --exp-tone: var(--info); --exp-tone-soft: var(--info-soft); }
.exp-tone-success { --exp-tone: var(--success); --exp-tone-soft: var(--success-soft); }
.exp-tone-warning { --exp-tone: var(--warning); --exp-tone-soft: var(--warning-soft); }
.exp-tone-purple { --exp-tone: var(--purple); --exp-tone-soft: var(--purple-soft); }
.exp-tone-teal { --exp-tone: var(--teal); --exp-tone-soft: var(--teal-soft); }
.exp-tone-danger { --exp-tone: var(--danger); --exp-tone-soft: var(--danger-soft); }
.exp-tone-neutral { --exp-tone: var(--neutral, #98a2b3); --exp-tone-soft: var(--neutral-soft); }
.exp-row { border-inline-start-color: var(--exp-tone) !important; }
.exp-row .exp-row-ic { background: var(--exp-tone-soft); color: var(--exp-tone); }
.exp-tile { border-color: color-mix(in srgb, var(--exp-tone) 45%, var(--border)); border-top: 3px solid var(--exp-tone); }
.exp-tile .exp-tile-cat { background: var(--exp-tone-soft); color: var(--exp-tone); }
.exp-row.is-sel, .exp-tile.is-sel { background: var(--exp-tone-soft); box-shadow: inset 0 0 0 2px var(--exp-tone); }
/* پاپ‌آپِ مشاهده: عکسِ کوچیکِ بالای متن‌ها */
.exp-view-img { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.exp-view-img img { width: 84px !important; height: 84px; max-height: none !important; object-fit: cover; border-radius: 12px; border: 1px solid var(--border); margin: 0 !important; cursor: zoom-in; flex: none; }
.exp-view-img small { font-size: 11.5px; color: var(--muted); }
.exp-view-img-ph { width: 84px; height: 84px; border-radius: 12px; background: var(--header-bg); opacity: .7; }
/* موبایل: کارتِ دسته‌ها بسته شروع می‌شه؛ دسته‌ها آیکونیِ کنارِهم؛ انتخاب با نگه‌داشتن (بدونِ تیک) */
@media (max-width: 900px) {
.exp-side > .exp-side-body { display: none !important; }
.exp-side.expanded > .exp-side-body { display: block !important; margin-top: 8px; }
.exp-side .prod-cat-card-head .exp-side-edit { margin-inline-start: auto; }
#expCatSidebar { display: flex; flex-wrap: wrap; gap: 6px; }
#expCatSidebar .exp-cat-group-title { display: none; }
#expCatSidebar .prod-cat-all { flex: 0 0 auto; padding: 6px 12px; border-radius: 999px; margin: 0; font-size: 12px; align-self: center; }
#expCatSidebar .exp-cat-item { flex: 0 0 auto; width: 62px; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; padding: 6px 2px; border-radius: 12px; margin: 0; position: relative; }
#expCatSidebar .exp-cat-item .prod-cat-name { flex-direction: column; gap: 3px; font-size: 10.5px; max-width: 100%; text-align: center; }
#expCatSidebar .exp-cat-item .prod-cat-name .ic { width: 22px; height: 22px; }
#expCatSidebar .exp-cat-item .prod-cat-count { position: absolute; top: 2px; left: 6px; font-size: 9.5px; min-width: 16px; padding: 0 4px; }
#expCatSidebar .exp-cat-item .prod-cat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; }
.exp-sel { display: none !important; }
.exp-row { grid-template-columns: 40px minmax(0, 1fr) auto !important; }
}
/* ===== تابلوی پروژه‌ها، فضای کاریِ پروژه، آمارِ خرید ===== */
#expNormal[hidden], #expAltPanel[hidden], #expPeriodBar[hidden], #expProjRow[hidden] { display: none !important; }
.exp-alt { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.pb-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pb-kpis > div { background: var(--header-bg); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pb-kpis small { font-size: 11.5px; color: var(--muted); }
.pb-kpis b { font-size: 14.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-kpis .is-pos { background: var(--success-soft); } .pb-kpis .is-pos b { color: var(--success); }
.pb-kpis .is-neg { background: var(--danger-soft); } .pb-kpis .is-neg b { color: var(--danger); }
.pb-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pb-toolbar .inv-chip-bar { margin: 0; flex: 1; min-width: 0; }
.pb-new { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; }
.pb-new .ic { width: 16px; height: 16px; }
.pb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.pb-card { display: flex; flex-direction: column; gap: 9px; text-align: start; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--success); border-radius: 16px; padding: 14px; cursor: pointer; transition: box-shadow .15s, border-color .15s, transform .15s; }
.pb-card.st-done { border-top-color: var(--info); } .pb-card.st-canceled { border-top-color: var(--danger); } .pb-card.st-archived { border-top-color: var(--neutral, #98a2b3); }
.pb-card:hover { box-shadow: var(--card-shadow); transform: translateY(-1px); }
.pb-card-head { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.pb-card-head b { font-size: 15px; font-weight: 800; }
.pb-card-sub { font-size: 11.5px; color: var(--muted); }
.pb-card-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pb-card-nums span { background: var(--header-bg); border-radius: 10px; padding: 6px 8px; display: flex; flex-direction: column; gap: 1px; }
.pb-card-nums small { font-size: 10.5px; color: var(--muted); }
.pb-card-nums b { font-size: 13px; }
.pb-card-nums .is-pos b { color: var(--success); } .pb-card-nums .is-neg b { color: var(--danger); }
.pb-budget { display: flex; flex-direction: column; gap: 4px; }
.pb-budget small, .pb-nobudget { font-size: 11px; color: var(--muted); }
.proj-budget-track i.is-warn { background: var(--warning); }
.pb-upsell { display: flex; gap: 16px; align-items: flex-start; border: 1.5px dashed var(--border); border-radius: 16px; padding: 20px; }
.pb-upsell-ic .ic { width: 40px; height: 40px; color: var(--purple, #6d3fd6); }
.pb-upsell p { color: var(--muted); font-size: 13px; line-height: 2; margin: 6px 0 12px; }
/* فضای کاریِ پروژه */
.exp-proj-sum { gap: 12px !important; padding: 14px 16px !important; border-radius: 18px !important; }
.ws-top { display: flex; align-items: center; justify-content: space-between; }
.ws-back { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--accent-text); cursor: pointer; padding: 2px 0; }
.ws-back .ic { width: 16px; height: 16px; }
.ws-top-actions { display: flex; gap: 14px; }
.qe-link.is-danger { color: var(--danger); }
.ws-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ws-head h3 { margin: 0; font-size: 17px; font-weight: 900; }
.ws-head small { font-size: 12px; color: var(--muted); }
.ws-status { height: 34px; border-radius: 999px; border: 0; padding: 0 12px; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; background: var(--success-soft); color: var(--success); }
.ws-status.st-done { background: var(--info-soft); color: var(--info); } .ws-status.st-canceled { background: var(--danger-soft); color: var(--danger); } .ws-status.st-archived { background: var(--neutral-soft); color: var(--muted); }
.ws-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ws-kpis > div { background: var(--surface); border-radius: 12px; padding: 9px 11px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ws-kpis small { font-size: 11px; color: var(--muted); }
.ws-kpis b { font-size: 14px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-kpis .is-pos { background: var(--success-soft); } .ws-kpis .is-pos b { color: var(--success); }
.ws-kpis .is-neg { background: var(--danger-soft); } .ws-kpis .is-neg b { color: var(--danger); }
.ws-budget { display: flex; flex-direction: column; gap: 5px; }
.ws-budget-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.ws-set-budget { align-self: flex-start; }
.ws-actions { display: flex; gap: 8px; }
.ws-actions .btn-save { flex: 2; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; }
.ws-actions .btn-save .ic { width: 16px; height: 16px; }
.ws-actions .btn-clear { flex: 1; min-height: 42px; }
.ws-docs { border-top: 1px dashed var(--border); padding-top: 8px; }
.ws-docs summary { cursor: pointer; font-size: 13px; font-weight: 800; display: flex; align-items: center; gap: 6px; list-style: none; }
.ws-docs summary::-webkit-details-marker { display: none; }
.ws-docs[open] summary { margin-bottom: 8px; }
.ws-docs .proj-doc { background: var(--surface); border: 0; }
/* آمارِ خرید */
.pi-sum-title { font-size: 13px; font-weight: 800; }
.pi-sup { display: flex; flex-direction: column; gap: 6px; }
.pi-sup .exp-bar-track i { background: var(--teal); }
.pi-list { display: flex; flex-direction: column; }
.pi-row { border-inline-start: 4px solid var(--teal) !important; }
.pi-row .exp-row-ic { background: var(--teal-soft); color: var(--teal); }
.pi-row .exp-row-amt { color: var(--text); }
.pi-st { font-weight: 700; } .pi-st.tone-success { color: var(--success); } .pi-st.tone-warning { color: var(--warning); } .pi-st.tone-danger { color: var(--danger); }
.pi-more { align-self: flex-start; }
@media (max-width: 700px) {
.pb-kpis, .ws-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pb-grid { grid-template-columns: 1fr; }
.pb-new span { display: none; }
.ws-head { flex-direction: column; }
}
/* ===== ثبتِ سریع: ردیفِ «برای» (روزانه/پروژه‌ها) — تک‌رنگ ===== */
.qe-for { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin-bottom: 12px; }
.qe-for::-webkit-scrollbar { display: none; }
.qe-for-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 7px 13px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.qe-for-chip .ic { width: 15px; height: 15px; color: var(--muted); }
.qe-for-chip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.qe-for-chip.is-on .ic { color: #fff; }
.qe-for-add { flex: 0 0 auto; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 700; color: var(--accent-text); cursor: pointer; padding: 0 6px; white-space: nowrap; }
#qeProjPanel { display: none !important; }
/* مبلغ: کوچیک‌تر، با جای ثابت برای متنِ تومان (فیلدهای پایین تکون نخورن) */
#quickExpOverlay .pay-amount-wrap input { height: 46px !important; font-size: 18px !important; }
#quickExpOverlay .amount-words, #expenseFormOverlay .amount-words { min-height: 18px !important; margin: 4px 0 0 !important; line-height: 18px; }
#quickExpOverlay .amount-words:empty, #expenseFormOverlay .amount-words:empty { min-height: 18px !important; margin: 4px 0 0 !important; }
/* موبایل: پاپ‌آپ تا بالای کیبورد، با فضای اسکرول که فیلد وسطِ دید بیاد */
@media (max-width: 900px) {
#quickExpOverlay .modal-box, #expenseFormOverlay .modal-box { max-height: calc(var(--vv-height, 100dvh) - 12px) !important; overflow-y: auto; -webkit-overflow-scrolling: touch; scroll-padding: 80px 0; }
html.keyboard-open #quickExpOverlay .modal-box, html.keyboard-open #expenseFormOverlay .modal-box { padding-bottom: 40vh; }
}
/* ===== تابلوی پروژه‌ها: بدونِ آمارِ کلی ===== */
.pb-kpis { display: none !important; }
/* ===== پاپ‌آپِ پروژه: ساده ===== */
.proj-detail-box { max-width: 520px !important; }
.pd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 0 0 12px 34px; border-bottom: 1px solid var(--border); }
.pd-head h4 { margin: 0 0 2px; font-size: 16px; }
.pd-head small { font-size: 12px; color: var(--muted); }
.pd-sums .exp-view-row.is-strong { font-weight: 900; background: var(--header-bg); border-radius: 10px; padding: 9px 10px; border-bottom: 0; margin: 4px 0; }
.pd-sums .exp-view-row.is-pos b { color: var(--success); } .pd-sums .exp-view-row.is-neg b { color: var(--danger); }
.pd-sums small { font-weight: 500; color: var(--muted); font-size: 11px; }
.pd-sec-title { font-size: 13px; font-weight: 800; margin: 16px 0 8px; display: flex; gap: 6px; align-items: baseline; }
.pd-sec-title small { color: var(--muted); font-weight: 500; font-size: 11.5px; }
.pd-exps { display: flex; flex-direction: column; gap: 6px; }
.pd-exp { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--header-bg); border-inline-start: 3px solid var(--exp-tone); }
.pd-exp-ic { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--exp-tone-soft); color: var(--exp-tone); }
.pd-exp-ic .ic { width: 17px; height: 17px; }
.pd-exp-main { display: flex; flex-direction: column; min-width: 0; }
.pd-exp-main b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-exp-main small { font-size: 11px; color: var(--muted); }
.pd-exp-amt { font-weight: 800; font-size: 13px; color: var(--pastel-red-text); white-space: nowrap; }
.pd-actions { margin-top: 16px !important; }
.pd-foot { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 12px; }
/* ===== نمودارِ دسته‌ها: رتبه‌بندیِ افقی ===== */
#expChart { display: flex; flex-direction: column; gap: 4px; height: auto !important; overflow: visible !important; }
.cr-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 48px; gap: 10px; align-items: center; border: 0; background: none; padding: 6px 4px; border-radius: 12px; font: inherit; color: var(--text); cursor: pointer; text-align: start; }
.cr-row:hover, .cr-row.is-on { background: var(--exp-tone-soft); }
.cr-ic { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--exp-tone-soft); color: var(--exp-tone); }
.cr-ic .ic { width: 17px; height: 17px; }
.cr-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cr-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.cr-top b { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-top span { font-weight: 700; white-space: nowrap; }
.cr-track { height: 7px; border-radius: 999px; background: var(--header-bg); overflow: hidden; }
.cr-track i { display: block; height: 100%; border-radius: 999px; background: var(--exp-tone); transition: width .35s ease; }
.cr-pct { font-size: 12px; font-weight: 800; color: var(--muted); text-align: left; }
.cr-pi { border-top: 1px dashed var(--border); border-radius: 0 0 12px 12px; margin-top: 4px; padding-top: 10px; }
/* ===== فرمِ پروژه: جمع‌وجور ===== */
.pf-more { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.pf-more > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 11px 14px; cursor: pointer; font-size: 13px; font-weight: 800; }
.pf-more > summary::-webkit-details-marker { display: none; }
.pf-more > summary small { color: var(--muted); font-weight: 500; font-size: 11.5px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-more > summary .ic { width: 16px; height: 16px; color: var(--muted); transition: transform .2s; }
.pf-more[open] > summary .ic { transform: rotate(180deg); }
.pf-more-body { display: flex; flex-direction: column; gap: 12px; padding: 4px 14px 14px; border-top: 1px dashed var(--border); padding-top: 12px; }
.pf-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pf-two .field-line, .pf-full { min-width: 0; margin: 0; }
.pf-status { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-st { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--text); cursor: pointer; }
.pf-st.is-on.tone-success { background: var(--pastel-green-bg, #e7f6ec); border-color: var(--success); color: var(--success); }
.pf-st.is-on.tone-info { background: var(--pastel-blue-bg, #e8f0fd); border-color: var(--info); color: var(--info); }
.pf-st.is-on.tone-danger { background: var(--pastel-red-bg, #fdecec); border-color: var(--danger); color: var(--danger); }
.pf-st.is-on.tone-neutral { background: var(--header-bg); border-color: var(--text); }
#projectFormOverlay #projCustomer { cursor: pointer; }
#projectFormOverlay .field-with-btn { display: flex; gap: 6px; }
#projectFormOverlay .field-with-btn input { flex: 1; min-width: 0; }
/* ===== دسته‌ی اجباری: لرزش ===== */
@keyframes qeNeed { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
#qeCats.qe-need { animation: qeNeed .4s ease; border-radius: 12px; box-shadow: 0 0 0 2px var(--danger); }
/* ===== پرینتِ پروژه ===== */
.pd-print { display: inline-flex !important; align-items: center; gap: 6px; }
.pd-print .ic { width: 16px; height: 16px; }
@media (max-width: 640px) { .pd-print span { display: none; } }
/* ===== نمودارِ دونات ===== */
#expChart { display: block !important; }
.dn-wrap { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; align-items: center; }
.dn-chart { position: relative; width: 132px; height: 132px; }
.dn-chart svg { width: 100%; height: 100%; transform: scaleX(-1); }
.dn-chart circle { fill: none; stroke-width: 6.2; stroke: var(--exp-tone); cursor: pointer; transition: stroke-width .15s; }
.dn-chart circle.dn-bg { stroke: var(--header-bg); cursor: default; }
.dn-chart circle:hover, .dn-chart circle.is-on { stroke-width: 7.6; }
.dn-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.dn-center small { font-size: 10.5px; color: var(--muted); }
.dn-center b { font-size: 14px; font-weight: 900; }
.dn-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 14px; }
.dn-leg { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto 34px; gap: 7px; align-items: center; border: 0; background: none; font: inherit; color: var(--text); padding: 5px 6px; border-radius: 8px; cursor: pointer; text-align: start; }
.dn-leg:disabled { cursor: default; }
.dn-leg:not(:disabled):hover, .dn-leg.is-on { background: var(--exp-tone-soft); }
.dn-leg i { width: 9px; height: 9px; border-radius: 3px; background: var(--exp-tone); }
.dn-leg span { font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dn-leg b { font-size: 12px; font-weight: 800; white-space: nowrap; }
.dn-leg small { font-size: 11px; color: var(--muted); text-align: left; white-space: nowrap; }
.dn-leg-pi { grid-column: 1 / -1; border-top: 1px dashed var(--border); border-radius: 0; margin-top: 4px; padding-top: 8px; }
.dn-leg-pi i { background: repeating-linear-gradient(45deg, var(--teal), var(--teal) 2px, transparent 2px, transparent 4px); border: 1px solid var(--teal); }
.dn-leg-pi small { width: auto; }
@media (max-width: 640px) {
.dn-wrap { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; }
.dn-chart { width: 104px; height: 104px; }
.dn-center b { font-size: 12px; }
.dn-legend { grid-template-columns: 1fr; }
.dn-leg { padding: 3px 4px; }
}
/* ===== ارسالِ گزارشِ پروژه ===== */
#projectSendOverlay .modal-box { max-width: 420px; }
.ps-preview { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--header-bg); margin-bottom: 14px; }
.ps-preview b { font-size: 14px; }
.ps-preview span { font-size: 12px; color: var(--muted); }
.ps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ps-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--surface); border-radius: 14px; padding: 14px 6px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--text); cursor: pointer; }
.ps-btn[hidden] { display: none; }
.ps-btn .ic { width: 22px; height: 22px; color: var(--muted); }
.ps-btn:hover { border-color: var(--accent); }
.ps-wa .ic { color: #25a35a; } .ps-tg .ic { color: #2a9fd8; }
.ps-msg { min-height: 18px; margin-top: 10px; font-size: 12px; text-align: center; color: var(--success); }
.ps-sheet { position: fixed; left: -10000px; top: 0; width: 720px; background: #fff; color: #141a26; padding: 28px; font-family: Vazirmatn, Tahoma, sans-serif; direction: rtl; font-size: 13px; }
.ps-sh-head { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid #141a26; padding-bottom: 12px; margin-bottom: 14px; }
.ps-sh-head b { display: block; font-size: 19px; } .ps-sh-head small { color: #667085; font-size: 12px; }
.ps-sh-total { text-align: left; } .ps-sh-total b { font-size: 18px; } .ps-sh-total i { font-style: normal; font-size: 12px; color: #667085; }
.ps-sheet table { width: 100%; border-collapse: collapse; }
.ps-sheet th, .ps-sheet td { border: 1px solid #d5d9e0; padding: 7px 9px; text-align: right; }
.ps-sheet th { background: #f2f4f7; } .ps-sheet td.n { text-align: left; direction: ltr; white-space: nowrap; }
.ps-sheet tfoot td { font-weight: 800; background: #f8f9fb; }
/* ===== پاپ‌آپِ پروژه: دکمه‌ها ===== */
.pd-acts { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.pd-acts .pd-add { width: 100%; min-height: 46px; }
.pd-acts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pd-sec-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 12px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; line-height: 1; }
.pd-sec-btn .ic { width: 17px; height: 17px; color: var(--accent-text); flex: 0 0 auto; }
.pd-sec-btn:hover { border-color: var(--accent); background: var(--header-bg); }
.pd-sec-btn[hidden], .pd-sec-btn[style*="display: none"] + .pd-sec-btn { grid-column: 1 / -1; }
/* ===== فرمِ پروژه: دکمه‌های مشتری به سبکِ فاکتور ===== */
#projectFormOverlay .field-with-btn { display: flex; align-items: stretch; gap: 6px; }
#projectFormOverlay .field-with-btn .btn-pick-customer { flex: 0 0 auto; width: 44px; min-height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--biz-accent, var(--accent)); border: 0 !important; border-radius: 10px; color: #fff; cursor: pointer; }
#projectFormOverlay .field-with-btn .btn-pick-customer[hidden] { display: none; }
#projectFormOverlay .field-with-btn .btn-pick-customer .ic { width: 17px; height: 17px; }
#projectFormOverlay #projCustClear { background: var(--header-bg); color: var(--muted); }
/* ===== ثبتِ سریع: ردیفِ پروژه‌ها در دسکتاپ چندخطی ===== */
@media (min-width: 901px) { .qe-for { flex-wrap: wrap; overflow: visible; } }
.qe-for { -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }
/* ===== پاپ‌آپِ ارسال: سه گزینه ===== */
.ps-grid { grid-template-columns: repeat(3, 1fr); }
.ps-btn { gap: 4px; padding: 16px 6px 12px; }
.ps-btn b { font-size: 13px; font-weight: 800; }
.ps-btn small { font-size: 10.5px; color: var(--muted); font-weight: 500; text-align: center; line-height: 1.5; }
.ps-ic { width: 44px; height: 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.ps-ic .ic { width: 21px !important; height: 21px !important; }
.ps-ic.tone-info { background: var(--info-soft, #e8f0fd); color: var(--info); }
.ps-ic.tone-success { background: var(--success-soft, #e7f6ec); color: var(--success); }
.ps-ic.tone-purple { background: var(--purple-soft, #f1ebfd); color: var(--purple); }
.ps-ic .ic { color: inherit !important; }
/* ===== موبایل: دکمه‌های بالای صفحه‌ی هزینه‌ها لازم نیست (دکمه‌ی شناور هست) ===== */
@media (max-width: 900px) { #expensesPageView .exp-top-row { display: none !important; } }
/* ===== تابلوی پروژه‌ها: نوار ابزار + نمایشِ لیستی ===== */
.pb-bar { margin: 4px 0 12px; }
.pb-bar #pbSearch { width: 240px; }
.pb-bar .pb-new { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 10px; }
.pb-bar .pb-new .ic { width: 16px; height: 16px; }
.pb-toolbar { margin-bottom: 4px; }
.pb-list { display: flex; flex-direction: column; gap: 8px; }
.pb-row { display: grid; grid-template-columns: minmax(0, 1.6fr) auto repeat(3, minmax(0, 1fr)); gap: 14px; align-items: center; border: 1px solid var(--border); border-inline-start: 3px solid var(--success); background: var(--surface); border-radius: 14px; padding: 12px 14px; font: inherit; color: var(--text); text-align: start; cursor: pointer; }
.pb-row.st-done { border-inline-start-color: var(--info); } .pb-row.st-canceled { border-inline-start-color: var(--danger); } .pb-row.st-archived { border-inline-start-color: var(--border); }
.pb-row:hover { background: var(--header-bg); }
.pb-row-main { display: flex; flex-direction: column; min-width: 0; }
.pb-row-main b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-row-main small, .pb-row-num small { font-size: 11px; color: var(--muted); }
.pb-row-num { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pb-row-num b { font-size: 13px; font-weight: 800; }
.pb-row-num.is-pos b { color: var(--success); } .pb-row-num.is-neg b { color: var(--danger); }
@media (max-width: 640px) {
.pb-bar #pbSearch { width: 100%; }
.pb-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; }
.pb-row .pb-row-num { grid-row: 2; flex-direction: row; align-items: baseline; gap: 4px; }
.pb-row .pb-row-bud { display: none; }
}
/* ===== دونات: راهنمای کارتی ===== */
.dn-wrap { grid-template-columns: 150px minmax(0, 1fr); }
.dn-chart { width: 150px; height: 150px; }
.dn-center small { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dn-center em { font-style: normal; font-size: 10.5px; color: var(--muted); }
.dn-center.is-focus b { color: var(--accent-text); }
.dn-legend { gap: 8px; }
.dn-leg { position: relative; overflow: hidden; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 8px; align-items: center; border: 1px solid var(--border); background: var(--surface); border-radius: 12px; padding: 8px 10px 10px; transition: border-color .15s, background .15s, transform .15s; }
.dn-leg:not(:disabled):hover, .dn-leg.is-on { border-color: var(--exp-tone); background: var(--exp-tone-soft); transform: translateY(-1px); }
.dn-leg > i:not(.dn-leg-bar) { display: none; }
.dn-leg-ic { width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--exp-tone-soft); color: var(--exp-tone); }
.dn-leg-ic .ic { width: 16px; height: 16px; }
.dn-leg-txt { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.dn-leg-txt span { font-size: 12px; font-weight: 700; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dn-leg-txt b { font-size: 13.5px; font-weight: 900; color: var(--text); }
.dn-leg em { font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--exp-tone); background: var(--exp-tone-soft); border-radius: 999px; padding: 3px 8px; white-space: nowrap; }
.dn-leg-bar { position: absolute; bottom: 0; inset-inline-start: 0; height: 3px; background: var(--exp-tone); border-radius: 0 3px 3px 0; display: block; }
.dn-leg-pi { border-style: dashed; grid-column: 1 / -1; border-top: 1px dashed var(--teal); margin-top: 0; padding-top: 8px; border-radius: 12px; }
@media (max-width: 640px) {
.dn-wrap { grid-template-columns: 1fr; justify-items: center; }
.dn-chart { width: 150px; height: 150px; }
.dn-legend { grid-template-columns: 1fr 1fr; width: 100%; gap: 6px; }
.dn-leg { grid-template-columns: 28px minmax(0, 1fr); padding: 7px 8px 9px; }
.dn-leg-ic { width: 28px; height: 28px; }
.dn-leg em { position: absolute; top: 6px; inset-inline-end: 6px; padding: 1px 6px; font-size: 10.5px; }
.dn-leg-txt span { padding-inline-end: 30px; }
}
/* ===== ستونِ کناری: بخشِ فیلترها لازم نیست ===== */
.exp-side-sec[hidden] { display: none !important; }
/* ===== نمودارِ نواریِ تفکیکِ دسته‌ها (جمع‌وجور) ===== */
.sb-bar { display: flex; gap: 3px; height: 14px; border-radius: 999px; overflow: hidden; background: var(--header-bg); margin: 2px 0 12px; }
.sb-bar i { display: block; min-width: 4px; background: var(--exp-tone); cursor: pointer; transition: opacity .15s; }
.sb-bar.has-sel i:not(.is-on) { opacity: .3; }
.sb-bar i:hover { opacity: .8; }
.sb-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 5px 10px; font: inherit; font-size: 12px; color: var(--text); cursor: pointer; white-space: nowrap; }
.sb-pill:disabled { cursor: default; }
.sb-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--exp-tone); flex: none; }
.sb-pill span { font-weight: 700; }
.sb-pill b { font-weight: 800; }
.sb-pill em { font-style: normal; font-weight: 800; font-size: 11px; color: var(--exp-tone); }
.sb-pill:not(:disabled):hover, .sb-pill.is-on { border-color: var(--exp-tone); background: var(--exp-tone-soft); }
.sb-pill-pi { border-style: dashed; }
@media (max-width: 640px) {
.sb-legend { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -2px; padding: 0 2px 2px; }
.sb-legend::-webkit-scrollbar { display: none; }
.sb-bar { height: 12px; margin-bottom: 10px; }
}
/* ===== پیشرفتِ ساختِ تصویر ===== */
.ps-prog { display: flex; justify-content: space-between; font-size: 12px; color: var(--text); margin-bottom: 6px; }
.ps-prog b { font-weight: 900; color: var(--accent-text); }
.ps-prog-track { height: 6px; border-radius: 999px; background: var(--header-bg); overflow: hidden; }
.ps-prog-track i { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .12s linear; }
/* ===== تابلوی پروژه‌ها مثلِ لیستِ هزینه‌ها ===== */
#pbChips { margin-bottom: 8px; }
.pb-bar { margin: 0 0 10px; }
.pb-bar .pb-new { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 10px; font-size: 12.5px; }
#pbCount { cursor: default; }
.pb-exp-row .exp-row-ic { background: var(--exp-tone-soft); color: var(--exp-tone); }
.pb-exp-row .exp-row-amt { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.pb-st-txt { font-size: 11px; font-weight: 700; color: var(--exp-tone); }
.pb-exp-tile .exp-tile-cat { background: var(--exp-tone-soft); color: var(--exp-tone); }
.pb-tile-n { font-size: 11px; color: var(--muted); white-space: nowrap; }
.pb-bud { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.pb-bud .proj-budget-track { flex: 1; max-width: 160px; }
.pb-bud small { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
@media (max-width: 900px) {
.inv-filter-bar > input[type="text"]#pbSearch { display: none; }
.inv-filter-bar.search-open > input[type="text"]#pbSearch { display: block; width: 100% !important; order: 5; flex-basis: 100%; }
.pb-bar .pb-new span { display: none; }
.pb-bar .pb-new { width: 36px; padding: 0; justify-content: center; }
}
@media (min-width: 901px) { .pb-bar .inv-search-toggle { display: none; } }
/* دکمه‌های «فاکتورِ خرید» و «ثبتِ هزینه» بالای صفحه لازم نیست (دکمه‌ی شناور و میانبر هست) */
#expensesPageView .exp-top-row { display: none !important; }
/* ===== انتقال از وردپرس ===== */
.wpi-box { max-width: 640px !important; }
.wpi-steps { display: flex; gap: 6px; margin: 4px 0 16px; }
.wpi-steps span { flex: 1; text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); padding: 7px 4px; border-radius: 10px; background: var(--header-bg); }
.wpi-steps span.is-on { background: var(--accent); color: #fff; }
.wpi-steps span.is-done { color: var(--success); }
.wpi-check { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 12px 0; cursor: pointer; }
.wpi-check input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.wpi-key { border: 1px dashed var(--border); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.wpi-help summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--accent-text); }
.wpi-help ol { margin: 8px 0 6px; padding-inline-start: 20px; font-size: 12.5px; line-height: 1.9; }
.wpi-help small { font-size: 11.5px; color: var(--muted); }
.wpi-msg { min-height: 20px; font-size: 12.5px; color: var(--danger); margin: 8px 0; display: flex; align-items: center; gap: 8px; }
.wpi-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--accent); animation: pullSpin .8s linear infinite; flex: none; }
.wpi-site { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; background: var(--header-bg); margin-bottom: 12px; }
.wpi-site b { display: block; font-size: 14px; } .wpi-site small { font-size: 11.5px; color: var(--muted); }
.wpi-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.wpi-badges span { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); }
.wpi-sec-title { font-size: 13px; font-weight: 800; margin: 14px 0 8px; }
.wpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.wpi-tile { position: relative; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; cursor: pointer; background: var(--surface); }
.wpi-tile:has(input:checked) { border-color: var(--accent); background: var(--pastel-blue); }
.wpi-tile.is-empty { opacity: .55; cursor: default; }
.wpi-tile input { position: absolute; top: 10px; inset-inline-end: 10px; width: 17px; height: 17px; accent-color: var(--accent); }
.wpi-tile small { font-size: 11.5px; color: var(--muted); font-weight: 700; }
.wpi-tile b { font-size: 20px; font-weight: 900; }
.wpi-tile em { font-style: normal; font-size: 10.5px; color: var(--muted); line-height: 1.5; }
.wpi-note { font-size: 12px; line-height: 1.8; padding: 9px 12px; border-radius: 12px; background: var(--pastel-blue); color: var(--accent-text); margin: 10px 0; }
.wpi-soon { background: var(--warning-soft); color: var(--warning); }
.wpi-samples { display: flex; flex-direction: column; gap: 6px; }
.wpi-sample { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px; border-radius: 12px; border: 1px solid var(--border); }
.wpi-sample img, .wpi-noimg { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--header-bg); display: block; }
.wpi-s-main { display: flex; flex-direction: column; min-width: 0; }
.wpi-s-main b { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpi-s-main small { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpi-s-price { font-size: 12.5px; font-weight: 800; text-align: left; display: flex; flex-direction: column; align-items: flex-end; }
.wpi-s-price s { font-size: 10.5px; color: var(--muted); font-weight: 500; }
.wpi-warn { margin: 0; padding-inline-start: 18px; font-size: 12px; line-height: 1.9; color: var(--text); }
@media (max-width: 640px) { .wpi-grid { grid-template-columns: 1fr 1fr; } }
/* انتقال: تنظیمات و پیشرفت */
.wpi-soon-tag { color: var(--warning) !important; font-weight: 700; }
.wpi-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wpi-opts select, .wpi-opts input { width: 100%; }
.wpi-hint { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; line-height: 1.7; }
.wpi-run { border: 1px solid var(--border); border-radius: 14px; padding: 14px; }
.wpi-run-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 14px; }
.wpi-overall { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 6px; }
.wpi-overall b { font-weight: 900; color: var(--accent-text); }
.wpi-stage { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; padding: 8px 0; border-bottom: 1px dashed var(--border); }
.wpi-stage:last-child { border-bottom: 0; }
.wpi-st-ic { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border); }
.wpi-stage.is-running .wpi-st-ic { border-color: var(--border); border-top-color: var(--accent); animation: pullSpin .8s linear infinite; }
.wpi-stage.is-done .wpi-st-ic { background: var(--success); border-color: var(--success); }
.wpi-stage.is-pending { color: var(--muted); }
.wpi-st-n { font-size: 12px; color: var(--muted); }
.wpi-now { font-size: 11.5px; color: var(--muted); margin-top: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpi-done { padding: 10px 12px; border-radius: 12px; margin-bottom: 10px; font-size: 14px; }
.wpi-done.tone-success { background: var(--success-soft, #e7f6ec); color: var(--success); }
.wpi-done.tone-danger { background: var(--danger-soft); color: var(--danger); }
.wpi-done.tone-warning { background: var(--warning-soft); color: var(--warning); }
.wpi-rep-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.wpi-rep-row span { color: var(--muted); text-align: left; }
.wpi-warn.is-err li { color: var(--danger); }
@media (max-width: 640px) { .wpi-opts { grid-template-columns: 1fr; } }
.wpi-redir { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border); }
.wpi-redir-head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 13.5px; margin-bottom: 6px; }
.wpi-redir-head span { font-size: 12px; color: var(--muted); }
.wpi-redir-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.wpi-redir-acts .btn-clear { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; font-size: 12.5px; text-decoration: none; }
/* ===== ریدایرکت‌ها ===== */
.sf-redir-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.sf-redir-stats > div { border: 1px solid var(--border); border-radius: 12px; padding: 9px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sf-redir-stats b { font-size: 15px; font-weight: 900; }
.sf-redir-stats small { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-redir-stats .is-ok b { color: var(--success); }
.sf-redir-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.rd-box { max-width: 760px !important; }
.rd-tabs { margin-bottom: 14px; }
.rd-add { display: flex; align-items: center; gap: 8px; }
.rd-add input { flex: 1; min-width: 0; height: 42px; border: 1px solid var(--border); border-radius: 10px; padding: 0 10px; font: inherit; font-size: 13px; background: var(--surface); color: var(--text); }
.rd-add .btn-save, .rd-add .btn-clear { flex: 0 0 auto; height: 42px; padding: 0 16px; }
.rd-arrow { color: var(--muted); font-weight: 800; flex: 0 0 auto; }
.rd-tools { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; }
.rd-tools input { flex: 1; }
.rd-count { font-size: 12px; color: var(--muted); white-space: nowrap; }
.rd-list { display: flex; flex-direction: column; max-height: 46vh; overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; }
.rd-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 44px auto; gap: 8px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.rd-row:last-child { border-bottom: 0; }
.rd-row.is-edit { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; background: var(--header-bg); }
.rd-row.is-edit input { height: 36px; border: 1px solid var(--border); border-radius: 8px; padding: 0 8px; font: inherit; font-size: 12.5px; min-width: 0; }
.rd-from, .rd-to { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.rd-from { color: var(--muted); }
.rd-to { font-weight: 700; }
.rd-hits { font-size: 11.5px; color: var(--muted); text-align: center; }
.rd-row-acts { display: inline-flex; gap: 4px; align-items: center; }
.rd-row-acts .btn-save { height: 34px; padding: 0 12px; font-size: 12px; }
.sb-mini.is-danger { color: var(--danger); }
.rd-test-box { margin: 12px 0; }
.rd-ok { color: var(--success); }
.rd-step { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-bottom: 1px dashed var(--border); font-size: 13px; line-height: 1.9; }
.rd-step:last-child { border-bottom: 0; }
.rd-step > div > b { font-size: 14px; display: block; margin-bottom: 2px; }
.rd-step p { margin: 0 0 6px; }
.rd-step-n { width: 28px; height: 28px; border-radius: 50%; background: var(--header-bg); display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: 13px; }
.rd-step.is-done .rd-step-n { background: var(--success); color: #fff; }
.rd-dns { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 12.5px; }
.rd-dns th, .rd-dns td { border: 1px solid var(--border); padding: 7px 9px; text-align: right; }
.rd-dns th { background: var(--header-bg); font-weight: 800; }
@media (max-width: 640px) {
.rd-add { flex-wrap: wrap; } .rd-add input { flex-basis: 100%; } .rd-add .rd-arrow { display: none; }
.rd-row { grid-template-columns: minmax(0, 1fr) auto; }
.rd-row .rd-arrow, .rd-row .rd-hits { display: none; }
.rd-row .rd-to { grid-column: 1; grid-row: 2; }
.rd-row .rd-row-acts { grid-row: 1 / span 2; grid-column: 2; }
.rd-row.is-edit { grid-template-columns: 1fr; }
.sf-redir-stats { grid-template-columns: 1fr 1fr; }
}
#rdTestMsg, #rdDnsMsg { color: var(--text); display: block; line-height: 1.9; }
#rdDnsMsg small { color: var(--muted); }
/* کیف پول: سفارش‌های شارژ با رسید */
.wl-ord-title { font-size: 13px; font-weight: 800; margin: 10px 0 6px; }
.wl-ord { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.wl-ord-main { display: flex; flex-direction: column; min-width: 0; }
.wl-ord-main b { font-size: 13px; }
.wl-ord-main small { font-size: 11.5px; color: var(--muted); }
.wl-ord-st { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.wl-ord-st.tone-warning { background: var(--warning-soft); color: var(--warning); }
.wl-ord-st.tone-success { background: var(--success-soft, #e7f6ec); color: var(--success); }
.wl-ord-st.tone-danger { background: var(--danger-soft); color: var(--danger); }
.wl-ord-st.tone-neutral { background: var(--header-bg); color: var(--muted); }
.wl-ord-acts { display: inline-flex; gap: 6px; }
.wl-ord-acts .btn-ghost { padding: 4px 10px; font-size: 12px; }
.wl-rcpt-box { max-width: 520px !important; }
.wl-rcpt-img { display: flex; justify-content: center; background: var(--header-bg); border-radius: 12px; padding: 8px; }
.wl-rcpt-img img { max-width: 100%; max-height: 70vh; border-radius: 8px; object-fit: contain; }
@media (max-width: 640px) { .wl-ord { grid-template-columns: minmax(0, 1fr) auto; } .wl-ord-acts { grid-column: 1 / -1; } }
/* =====================================================================
فروشگاهِ افزونه‌ها — هم‌خانواده با تمِ اوکرو (روشن/تیره‌ی خودِ پنل)
سربرگ و پاس با گرادیانِ رنگِ اصلی (مثلِ کارت‌های تبلیغاتیِ داشبورد)؛ بقیه کارت‌های سفیدِ پنل
===================================================================== */
.as-store { --as-acc: var(--accent); --as-acc-soft: color-mix(in srgb, var(--accent) 10%, transparent);
--as-gold: #b8860b; --as-gold-soft: #fdf6e3; --as-warn: var(--warning, #b45309); --as-purple: #6d4ed6;
color: var(--text); margin-bottom: 90px; }
.as-store h2, .as-store h3, .as-store h4 { color: var(--text); margin: 0; }
.as-store p { color: var(--muted); margin: 0; line-height: 2; }
.as-btn { font: inherit; font-weight: 800; font-size: 13.5px; border-radius: 12px; padding: 10px 18px; cursor: pointer; border: 1px solid transparent; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; transition: transform .15s, background .15s, border-color .15s, box-shadow .15s; }
.as-btn:active { transform: scale(.98); }
.as-btn:disabled { opacity: .6; cursor: default; }
.as-btn-pri { background: var(--accent); color: #fff; box-shadow: 0 8px 20px -10px var(--accent); }
.as-btn-pri:hover { filter: brightness(1.08); }
.as-btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border); }
.as-btn-ghost:hover { border-color: var(--accent); color: var(--accent-text); }
.as-btn-gold { background: linear-gradient(180deg, #e8c55a, #c99a1e); color: #3a2a00; box-shadow: 0 8px 20px -10px #c99a1e; }
.as-btn-light { background: #fff; color: var(--accent-dark, #081B89); }
.as-btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 10px; }
.as-arrow { font-weight: 400; }
.as-coin { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6c8, #e8b923 60%, #a57a06); box-shadow: 0 0 6px rgba(232, 185, 35, .55); flex: none; }
/* سربرگ: کارتِ گرادیانیِ رنگِ اصلی، مثلِ کارت‌های تبلیغاتیِ داشبورد */
.as-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 28px; align-items: center; padding: 30px 32px; border-radius: 22px; margin-bottom: 18px; position: relative; overflow: hidden;
background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent2, #4F6AFF) 55%, transparent) 0, transparent 55%), linear-gradient(135deg, var(--accent), var(--accent-dark, #081B89)); color: #fff; box-shadow: 0 20px 44px -26px var(--accent); }
.as-hero h2 { color: #fff; font-size: 30px; font-weight: 900; margin-bottom: 8px; line-height: 1.5; }
.as-hero p { color: rgba(255,255,255,.82); font-size: 14px; max-width: 560px; }
.as-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 5px 12px; margin-bottom: 12px; }
.as-eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: #9ff3e3; box-shadow: 0 0 8px #9ff3e3; }
.as-hero-acts { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.as-balance { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,.85); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 12px; padding: 9px 14px; }
.as-balance b { color: #fff; font-size: 15px; }
.as-hero .as-btn-pri { background: #fff; color: var(--accent-dark, #081B89); box-shadow: none; }
.as-orbit { position: relative; height: 200px; border-radius: 20px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); }
.as-ring { position: absolute; inset: 18px 16%; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; animation: asSpin 30s linear infinite; }
.as-ring2 { inset: 42px 27%; border-style: dashed; animation-direction: reverse; animation-duration: 22s; }
.as-orb { position: absolute; display: grid; place-items: center; border-radius: 15px; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(4px); }
.as-orb .ic { width: 22px; height: 22px; }
.as-orb-c { width: 74px; height: 74px; left: calc(50% - 37px); top: calc(50% - 37px); border-radius: 22px; background: #fff; color: var(--accent); box-shadow: 0 12px 30px -10px rgba(0,0,0,.35); }
.as-orb-c .ic { width: 34px; height: 34px; }
.as-orb-a, .as-orb-b { width: 44px; height: 44px; top: calc(50% - 22px); }
.as-orb-a { right: 10%; } .as-orb-b { left: 10%; }
@keyframes asSpin { to { transform: rotate(360deg); } }
/* پاسِ آزمایشی: کارتِ سفید با حلقه‌ی رنگی */
.as-trial { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; padding: 20px 24px; border-radius: 20px; margin-bottom: 8px;
background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); box-shadow: var(--card-shadow); position: relative; overflow: hidden; }
.as-trial:before { content: ""; position: absolute; inset: 0 auto 0 0; width: 40%; background: linear-gradient(90deg, var(--as-acc-soft), transparent); pointer-events: none; }
.as-trial > * { position: relative; }
.as-ringbox { position: relative; width: 104px; height: 104px; }
.as-ringbox svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.as-ringbox .tr-bg { fill: none; stroke: var(--header-bg); stroke-width: 7; }
.as-ringbox .tr-fg { fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round; }
.as-ring-in { position: absolute; inset: 22px; border-radius: 18px; display: grid; place-items: center; background: var(--as-acc-soft); color: var(--accent-text); }
.as-ring-in .ic { width: 26px; height: 26px; }
.as-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; color: var(--accent-text); background: var(--as-acc-soft); border-radius: 999px; padding: 3px 10px; margin-bottom: 6px; }
.as-trial h3 { font-size: 19px; font-weight: 900; margin-bottom: 2px; }
.as-trial p { font-size: 13px; margin-bottom: 12px; }
/* بخش‌ها */
.as-sec { margin-top: 30px; }
.as-sec-head { margin-bottom: 14px; }
.as-kicker { display: block; font-size: 12px; font-weight: 800; color: var(--accent-text); margin-bottom: 2px; }
.as-sec-head h3 { font-size: 20px; font-weight: 900; margin-bottom: 2px; }
.as-sec-head p { font-size: 13px; }
/* پکیج‌ها */
.as-bundles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.as-bundle { position: relative; border-radius: 18px; padding: 18px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--card-shadow); display: flex; flex-direction: column; gap: 14px; transition: transform .18s, box-shadow .18s, border-color .18s; }
.as-bundle:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); }
.as-bundle.tier-pro { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, 0 16px 34px -22px var(--accent); }
.as-bundle.tier-legend { background: linear-gradient(170deg, #fff8e6 0, var(--surface) 70%); border-color: #e2c26b; box-shadow: 0 0 0 1px #e2c26b inset, 0 16px 34px -22px #c99a1e; }
.as-bd-badge { position: absolute; top: -10px; right: 18px; font-size: 11px; font-weight: 900; background: var(--accent); color: #fff; border-radius: 999px; padding: 4px 12px; }
.tier-legend .as-bd-badge { background: linear-gradient(180deg, #e8c55a, #c99a1e); color: #3a2a00; }
.as-bd-top { display: flex; gap: 12px; align-items: flex-start; }
.as-bd-em { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; flex: none; color: #fff; background: linear-gradient(140deg, var(--accent2, #4F6AFF), var(--accent)); box-shadow: 0 10px 22px -12px var(--accent); }
.as-bd-em .ic { width: 24px; height: 24px; }
.tier-legend .as-bd-em { background: linear-gradient(140deg, #f0cf6a, #c99a1e); color: #3a2a00; box-shadow: 0 10px 22px -12px #c99a1e; }
.as-bd-tier { font-size: 11.5px; font-weight: 800; color: var(--accent-text); }
.tier-legend .as-bd-tier { color: var(--as-gold); }
.as-bundle h4 { font-size: 16px; font-weight: 900; margin: 2px 0; }
.as-bundle p { font-size: 12.5px; }
.as-bd-icons { display: flex; gap: 6px; flex-wrap: wrap; }
.as-bd-icons span { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--accent-text); background: var(--as-acc-soft); }
.tier-legend .as-bd-icons span { color: var(--as-gold); background: #fbefcc; }
.as-bd-icons .ic { width: 16px; height: 16px; }
.as-bd-foot { display: flex; flex-direction: column; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
.as-bd-foot .as-btn { justify-content: center; }
.as-bd-price b { font-size: 30px; font-weight: 900; letter-spacing: -.5px; color: var(--text); }
.tier-legend .as-bd-price b { color: var(--as-gold); }
.as-bd-price > span { font-size: 12.5px; color: var(--muted); margin-inline-start: 6px; }
.as-bd-price small { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.9; }
.as-bd-price s { color: var(--muted); }
.as-bd-price em { font-style: normal; color: var(--success); font-weight: 800; }
/* قانونِ سبد */
.as-rule { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text); background: var(--as-acc-soft); border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; }
.as-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
/* کارتِ افزونه */
.as-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.as-card { position: relative; border-radius: 16px; padding: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--card-shadow); display: flex; flex-direction: column; gap: 8px; cursor: pointer; transition: transform .16s, border-color .16s, box-shadow .16s, opacity .2s, filter .2s; min-height: 196px; }
.as-card:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); }
.as-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.as-em { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: var(--accent-text); background: var(--as-acc-soft); }
.as-em .ic { width: 22px; height: 22px; }
.as-card h4 { font-size: 14.5px; font-weight: 900; line-height: 1.7; margin-top: 4px; }
.as-card p { font-size: 12.5px; line-height: 1.9; }
.as-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); cursor: default; }
.as-price { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.as-price b { font-size: 16px; color: var(--text); font-weight: 900; }
.as-price em { font-style: normal; color: var(--success); font-weight: 700; font-size: 11px; }
.as-until { font-size: 11.5px; color: var(--muted); line-height: 1.7; }
.as-check { position: absolute; top: 14px; left: 14px; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--border); display: grid; place-items: center; color: transparent; background: var(--surface); }
.as-check svg { width: 13px; height: 13px; }
.as-pill { font-size: 11px; font-weight: 800; border-radius: 999px; padding: 3px 10px; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
.as-pill.on { color: var(--success); background: var(--success-soft); }
.as-pill.on:before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 25%, transparent); animation: asPulse 1.8s ease-in-out infinite; }
@keyframes asPulse { 50% { box-shadow: 0 0 0 6px transparent; } }
.as-pill.off { color: var(--muted); background: var(--header-bg); }
.as-pill.trial { color: var(--as-purple); background: color-mix(in srgb, var(--as-purple) 12%, transparent); }
.as-pill.warn { color: var(--as-warn); background: var(--warning-soft, #FFFBEB); }
/* انتخاب‌شده */
.as-card.is-sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, 0 14px 30px -20px var(--accent); }
.as-card.is-sel .as-check { background: var(--accent); border-color: var(--accent); color: #fff; }
/* فعال: سبز و زنده */
.as-card.st-on { cursor: default; background: linear-gradient(175deg, color-mix(in srgb, var(--success) 8%, var(--surface)) 0, var(--surface) 70%); border-color: color-mix(in srgb, var(--success) 40%, var(--border)); }
.as-card.st-on .as-em { color: #fff; background: linear-gradient(140deg, #34d399, var(--success)); box-shadow: 0 10px 22px -10px var(--success); }
.as-live { position: absolute; inset: -1px; border-radius: 16px; pointer-events: none; padding: 1.5px;
background: linear-gradient(120deg, transparent 30%, color-mix(in srgb, var(--success) 70%, #fff) 50%, transparent 70%) 0 0 / 250% 100%;
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: asShine 3.5s linear infinite; }
@keyframes asShine { to { background-position: -250% 0; } }
.as-card.st-off { cursor: default; filter: grayscale(.9); opacity: .6; }
.as-card.st-off:hover { opacity: .85; }
.as-card.st-trial { border-style: dashed; border-color: color-mix(in srgb, var(--as-purple) 55%, var(--border)); }
.as-card.st-trial .as-em { color: var(--as-purple); background: color-mix(in srgb, var(--as-purple) 12%, transparent); }
.as-card.st-expiring { cursor: default; border-color: color-mix(in srgb, var(--as-warn) 55%, var(--border)); }
.as-card.st-expiring .as-em { color: var(--as-warn); background: var(--warning-soft, #FFFBEB); }
.as-card.st-locked .as-em { color: var(--muted); background: var(--header-bg); }
.as-need { font-size: 11.5px; color: var(--as-warn); background: var(--warning-soft, #FFFBEB); border-radius: 10px; padding: 7px 9px; line-height: 1.8; }
.as-sw { position: relative; width: 38px; height: 22px; flex: none; cursor: pointer; }
.as-sw input { opacity: 0; width: 0; height: 0; position: absolute; }
.as-sw span { position: absolute; inset: 0; border-radius: 999px; background: var(--border); transition: .2s; }
.as-sw span:after { content: ""; position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: .2s; }
.as-sw input:checked + span { background: var(--success); }
.as-sw input:checked + span:after { right: 19px; }
/* پیامک */
.as-sms #walletSmsWrap { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px; box-shadow: var(--card-shadow); }
/* نوارِ سبد */
.as-cart { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 60; width: min(940px, calc(100% - 32px)); }
.as-cart[hidden] { display: none; }
.as-cart-in { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 20px 50px -18px rgba(17,24,39,.35); color: var(--text); }
.as-cart-sum { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.as-cart-sum b { font-size: 15px; }
.as-cart-sum em { font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--success); background: var(--success-soft); border-radius: 999px; padding: 2px 9px; }
.as-cart-sum s { color: var(--muted); font-size: 12px; }
.as-cart-sum small { color: var(--as-warn, #b45309); font-size: 11.5px; }
.as-cart-nudge { flex: 1; font-size: 12px; color: var(--accent-text); }
/* پنجره‌ها: همون پنجره‌ی پنل */
.as-modal-ov .as-modal { max-width: 460px !important; }
.as-m-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding-left: 40px; }
.as-m-head h4 { font-size: 17px; font-weight: 900; margin: 0; }
.as-m-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--accent2, #4F6AFF), var(--accent)); flex: none; }
.as-m-ic .ic { width: 22px; height: 22px; }
.as-m-text { font-size: 13.5px; color: var(--muted); line-height: 2.1; margin: 0 0 16px; }
.as-m-list { display: flex; flex-direction: column; gap: 2px; background: var(--header-bg); border-radius: 14px; padding: 8px 12px; margin-bottom: 10px; }
.as-m-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; padding: 6px 0; }
.as-m-row span { display: inline-flex; align-items: center; gap: 8px; }
.as-m-row small { color: var(--muted); font-size: 11px; }
.as-m-ri { width: 16px; height: 16px; color: var(--accent-text); }
.as-m-row s { color: var(--muted); } .as-m-row em { font-style: normal; color: var(--success); font-weight: 800; }
.as-m-sum { border-top: 1px dashed var(--border); padding-top: 6px; margin-bottom: 14px; }
.as-m-total b { font-size: 18px; color: var(--accent-text); } .as-m-total small { display: block; text-align: left; }
.as-m-warn { font-size: 12.5px; color: var(--as-warn, #b45309); background: var(--warning-soft, #FFFBEB); border-radius: 12px; padding: 9px 12px; margin-bottom: 14px; }
.as-m-acts { display: flex; gap: 10px; } .as-m-acts .as-btn { flex: 1; justify-content: center; }
.as-m-load { padding: 30px; text-align: center; color: var(--muted); }
.as-success { text-align: center; padding: 10px 0 4px; }
.as-success-ems { display: flex; justify-content: center; gap: 10px; margin-bottom: 16px; }
.as-success-ems span { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, #34d399, var(--success)); box-shadow: 0 10px 22px -10px var(--success); animation: asPop .5s cubic-bezier(.2,.9,.3,1.4) both; }
.as-success-ems span:nth-child(2) { animation-delay: .08s; } .as-success-ems span:nth-child(3) { animation-delay: .16s; } .as-success-ems span:nth-child(4) { animation-delay: .24s; } .as-success-ems span:nth-child(5) { animation-delay: .32s; }
.as-success-ems .ic { width: 24px; height: 24px; }
.as-success h4 { font-size: 20px; font-weight: 900; margin: 6px 0; }
.as-success .as-btn { width: 100%; justify-content: center; }
@keyframes asPop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 1200px) { .as-bundles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .as-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
.as-hero { grid-template-columns: 1fr; gap: 16px; padding: 22px 18px; } .as-orbit { display: none; }
.as-hero h2 { font-size: 24px; }
.as-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.as-bundles { grid-template-columns: 1fr; gap: 12px; padding-top: 8px; }
.as-cart { bottom: calc(var(--mbar-h, 0px) + 10px); }
.as-cart-in { flex-wrap: wrap; } .as-cart-nudge { order: 3; flex-basis: 100%; }
}
@media (max-width: 560px) {
.as-trial { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 18px; }
.as-trial:before { display: none; }
.as-grid { grid-template-columns: 1fr; }
.as-card { min-height: 0; }
.as-cart-in .as-btn-pri { flex: 1; justify-content: center; }
}
/* فروشگاه دور ۲: موجودیِ برجسته، توضیحاتِ پکیج و کارت، پیش‌نیاز، پیامک */
.as-wallet { display: inline-flex; align-items: center; gap: 18px; margin-top: 18px; padding: 14px 16px 14px 14px; border-radius: 18px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(6px); flex-wrap: wrap; }
.as-wallet-l small { display: block; font-size: 12px; color: rgba(255,255,255,.8); }
.as-wallet-v { display: flex; align-items: center; gap: 8px; margin: 2px 0; }
.as-wallet-v b { font-size: 36px; font-weight: 900; color: #fff; line-height: 1.2; letter-spacing: -.5px; }
.as-wallet-v > span:last-child { font-size: 14px; color: rgba(255,255,255,.85); font-weight: 700; }
.as-coin-lg { width: 26px; height: 26px; }
.as-hero .as-wallet .as-btn-pri { background: #fff; color: var(--accent-dark, #081B89); box-shadow: 0 8px 18px -10px rgba(0,0,0,.4); }
.as-hero .as-wallet .as-btn-pri .ic { width: 16px; height: 16px; }
.as-bd-desc { font-size: 12.5px !important; line-height: 2 !important; }
.as-bd-gets { display: flex; flex-direction: column; gap: 8px; background: var(--header-bg); border-radius: 14px; padding: 10px 12px; }
.tier-legend .as-bd-gets { background: #fbf3dc; }
.as-bd-gets-t { font-size: 11.5px; font-weight: 800; color: var(--muted); }
.as-bd-get { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.as-bd-get-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--accent-text); background: var(--surface); }
.tier-legend .as-bd-get-ic { color: var(--as-gold); }
.as-bd-get-ic .ic { width: 15px; height: 15px; }
.as-bd-get b { display: block; font-size: 12.5px; font-weight: 800; color: var(--text); line-height: 1.6; }
.as-bd-get small { display: block; font-size: 11px; color: var(--muted); line-height: 1.7; }
.as-bd-get em { font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--success); background: var(--success-soft); border-radius: 999px; padding: 2px 8px; }
.as-bd-icons { display: none; }
.as-feats { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.as-feats li { display: flex; gap: 7px; align-items: flex-start; font-size: 12px; color: var(--text); line-height: 1.8; }
.as-feats svg { width: 13px; height: 13px; color: var(--success); flex: none; margin-top: 4px; }
.as-need { font-size: 12px !important; color: var(--text) !important; line-height: 1.9 !important; }
.as-need b { display: block; color: var(--as-warn); font-size: 12px; }
.as-pill.auto { color: var(--accent-text); background: var(--as-acc-soft); }
.as-sms-credit { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--card-shadow); margin-bottom: 14px; }
.as-sms-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--accent2, #4F6AFF), var(--accent)); }
.as-sms-ic .ic { width: 24px; height: 24px; }
.as-sms-credit small { display: block; font-size: 12px; color: var(--muted); }
.as-sms-credit b { font-size: 24px; font-weight: 900; } .as-sms-credit b span { font-size: 13px; color: var(--muted); font-weight: 700; }
.as-sms-used { margin-inline-start: auto; font-size: 12px; color: var(--muted); }
.as-sms-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.as-sms-card { position: relative; border-radius: 16px; padding: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--card-shadow); display: flex; flex-direction: column; gap: 8px; }
.as-sms-card.is-best { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, 0 14px 30px -20px var(--accent); }
.as-sms-card h4 { font-size: 16px; font-weight: 900; margin-top: 4px; }
.as-sms-card p { font-size: 12px; }
.as-sms #walletSmsWrap { background: none; border: 0; padding: 0; box-shadow: none; }
@media (max-width: 1200px) { .as-sms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .as-sms-grid { grid-template-columns: 1fr 1fr; } .as-wallet { width: 100%; justify-content: space-between; } .as-wallet-v b { font-size: 30px; } }
/* کارت‌های انتخابِ آزاد هم‌استایلِ پکیج‌ها */
#tokenPackagesWrap .as-card { border-radius: 18px; padding: 18px; gap: 14px; min-height: 0; }
#tokenPackagesWrap .as-card:hover { transform: translateY(-3px); }
#tokenPackagesWrap .as-card h4 { margin-top: 0; font-size: 15px; }
#tokenPackagesWrap .as-card .as-bd-top p { font-size: 12px; line-height: 1.8; }
#tokenPackagesWrap .as-card-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: -4px; }
#tokenPackagesWrap .as-card .as-bd-gets { flex: 1; }
#tokenPackagesWrap .as-card .as-feats li { font-size: 12px; }
#tokenPackagesWrap .as-card .as-need { margin: 0; font-size: 11.5px !important; color: var(--muted) !important; background: none; padding: 0; border: 0; }
#tokenPackagesWrap .as-card-foot { flex-direction: column; align-items: stretch; gap: 12px; padding-top: 12px; margin-top: 0; }
#tokenPackagesWrap .as-card-foot.as-foot-row { flex-direction: row; align-items: center; }
#tokenPackagesWrap .as-card-foot .as-btn { justify-content: center; }
#tokenPackagesWrap .as-card-foot .as-btn svg { width: 14px; height: 14px; }
#tokenPackagesWrap .as-bd-price b { font-size: 26px; }
#tokenPackagesWrap .as-card.st-on .as-bd-em { background: linear-gradient(140deg, #34d399, var(--success)); box-shadow: 0 10px 22px -10px var(--success); }
#tokenPackagesWrap .as-card.st-off .as-bd-em { background: var(--muted); box-shadow: none; }
#tokenPackagesWrap .as-card.st-trial .as-bd-em { background: var(--as-purple); }
#tokenPackagesWrap .as-card.st-expiring .as-bd-em { background: var(--as-warn); }
@media (max-width: 640px) { #tokenPackagesWrap.as-grid { grid-template-columns: 1fr; } }
/* حلقه‌ی پاسِ آزمایشی با عدد */
.as-ringbox { width: 124px; height: 124px; }
.as-ring-num { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 0; }
.as-ring-num b { font-size: 40px; font-weight: 900; line-height: 1; color: var(--accent-text); }
.as-ring-num small { font-size: 11px; font-weight: 700; color: var(--muted); margin-top: 4px; }
/* پاپ‌آپِ خریدِ توکن */
.bt-modal { max-width: 520px; width: calc(100% - 24px); max-height: 92vh; overflow-y: auto; }
.bt-modal .as-m-ic .as-coin { width: 24px; height: 24px; }
.bt-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.bt-step { margin-bottom: 14px; }
.bt-step-t { display: block; font-size: 12.5px; font-weight: 800; color: var(--text); margin-bottom: 8px; }
.bt-pkgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.bt-pkg { position: relative; font-family: inherit; cursor: pointer; text-align: center; border-radius: 14px; padding: 16px 8px 12px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--card-shadow); display: flex; flex-direction: column; align-items: center; gap: 2px; transition: transform .15s, border-color .15s, box-shadow .15s; color: var(--text); }
.bt-pkg:hover { transform: translateY(-2px); box-shadow: var(--card-shadow-hover); }
.bt-pkg b { font-size: 24px; font-weight: 900; line-height: 1.3; }
.bt-pkg-u { font-size: 11.5px; color: var(--muted); font-weight: 700; }
.bt-pkg small { font-size: 11px; color: var(--muted); line-height: 1.7; margin-top: 4px; display: flex; flex-direction: column; }
.bt-pkg small s { opacity: .7; }
.bt-pkg-off { position: absolute; top: -9px; right: 50%; transform: translateX(50%); white-space: nowrap; font-size: 10.5px; font-weight: 900; color: var(--success); background: var(--success-soft); border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); border-radius: 999px; padding: 2px 9px; }
.bt-pkg.is-best .bt-pkg-off { color: #fff; background: var(--success); }
.bt-pkg.is-sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, 0 12px 26px -18px var(--accent); }
.bt-pkg.is-sel b { color: var(--accent-text); }
.bt-qty { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 14px; padding: 4px 14px; background: var(--surface); }
.bt-qty:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.bt-qty input { flex: 1; min-width: 0; border: 0 !important; outline: 0; box-shadow: none !important; background: none; font-family: inherit; font-size: 22px; font-weight: 900; padding: 8px 0; color: var(--text); text-align: right; }
.bt-qty span { font-size: 13px; color: var(--muted); font-weight: 700; }
.bt-hint { display: block; font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.bt-sum { margin: -4px 0 14px; background: var(--header-bg); border-top: 0; border-radius: 14px; padding: 6px 14px; }
.bt-banks { display: flex; flex-direction: column; gap: 8px; }
.bt-bank { font-family: inherit; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); text-align: right; color: var(--text); transition: border-color .15s, box-shadow .15s; }
.bt-bank:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.bt-bank-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border); flex: none; }
.bt-bank.is-sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.bt-bank.is-sel .bt-bank-radio { border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--surface); background: var(--accent); }
.bt-bank-info { display: flex; flex-direction: column; min-width: 0; }
.bt-bank-info b { font-size: 13px; font-weight: 800; }
.bt-bank-info small { font-size: 11.5px; color: var(--muted); }
.bt-bank-num { margin-inline-start: auto; direction: ltr; font-size: 15px; font-weight: 800; letter-spacing: .5px; white-space: nowrap; }
.bt-bank-copy { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--accent-text); background: var(--as-acc-soft, var(--header-bg)); flex: none; }
.bt-bank-copy .ic { width: 16px; height: 16px; }
.bt-drop { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px; border: 1.5px dashed var(--border); border-radius: 14px; color: var(--muted); font-size: 13px; cursor: pointer; background: var(--header-bg); transition: border-color .15s, color .15s; }
.bt-drop:hover { border-color: var(--accent); color: var(--accent-text); }
.bt-drop .ic { width: 20px; height: 20px; }
.bt-preview:not(:empty) { margin-top: 8px; }
.bt-preview img { max-width: 200px; border-radius: 10px; }
.bt-note { width: 100%; margin-top: 8px; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; font-family: inherit; font-size: 13px; background: var(--surface); color: var(--text); }
@media (max-width: 560px) {
.bt-bank { flex-wrap: wrap; }
.bt-bank-num { font-size: 14px; }
.as-ringbox { width: 110px; height: 110px; }
}
/* پکیج‌ها: همه‌ی امکانات با رنگی/کم‌رنگ + کشوی موبایل */
.as-bd-toggle { display: none; }
.as-bd-more { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.as-bd-more .as-bd-gets { flex: 1; }
.as-bd-get.is-no { opacity: .42; filter: grayscale(1); }
.as-bd-get.is-no b { font-weight: 600; text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.as-bd-get i { font-style: normal; font-size: 10.5px; color: var(--muted); }
.as-cart-better { font-family: inherit; cursor: pointer; border: 1px dashed var(--accent); background: var(--as-acc-soft, var(--header-bg)); color: var(--accent-text); font-size: 12px; font-weight: 800; border-radius: 10px; padding: 6px 10px; text-align: right; line-height: 1.8; }
.as-cart-sum small { display: block; }
@media (max-width: 900px) {
.as-bundle { padding: 14px; gap: 10px; }
.as-bd-toggle { display: flex; align-items: center; gap: 8px; width: 100%; font-family: inherit; cursor: pointer; background: var(--header-bg); border: 0; border-radius: 12px; padding: 10px 12px; font-size: 12.5px; font-weight: 800; color: var(--text); }
.tier-legend .as-bd-toggle { background: #fbf3dc; }
.as-bd-toggle span { font-size: 11px; font-weight: 600; color: var(--muted); margin-inline-start: auto; }
.as-bd-toggle svg { width: 16px; height: 16px; transition: transform .2s; flex: none; }
.as-bundle.is-open .as-bd-toggle svg { transform: rotate(180deg); }
.as-bd-more { display: none; }
.as-bundle.is-open .as-bd-more { display: flex; }
.as-bd-more .as-bd-gets-t { display: none; }
.as-bd-foot { flex-direction: row; align-items: center; justify-content: space-between; padding-top: 10px; }
.as-bd-foot .as-btn { flex: none; }
.as-bd-price b { font-size: 24px; }
.as-bd-price small br { display: none; }
}
/* قیمتِ خرید به ارز/طلا: واحد کنارِ فیلد قابلِ انتخابه */
#productCardContent .prod-cur-wrap:has(.prod-cur-select) input { padding-left: 92px !important; }
.prod-cur-wrap:has(.prod-cur-select) .prod-num-suffix { left: 6px; height: 34px; min-width: 78px; padding: 0 10px 0 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--header-bg); color: var(--accent-text); font-weight: 800; }
.prod-cur-wrap:has(.prod-cur-select) .prod-num-suffix:after { content: ""; position: absolute; left: 9px; top: 50%; width: 6px; height: 6px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(-45deg); }
.prod-cur-select { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 78px; height: 34px; opacity: 0; cursor: pointer; font-family: inherit; }
.prod-cur-note:empty { display: none; }
.prod-cur-note { margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: var(--header-bg); font-size: 12px; line-height: 1.8; }
.prod-cur-note span { display: block; font-weight: 800; color: var(--text); }
.prod-cur-note small { display: block; color: var(--muted); font-size: 11px; }
.biz-round-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.biz-round-chips .chip-choice { font-family: inherit; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 700; transition: border-color .15s, background .15s; }
.biz-round-chips .chip-choice:hover { border-color: var(--accent); }
.biz-round-chips .chip-choice.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.biz-round-ex { display: block; margin-top: 6px; font-size: 11.5px; color: var(--muted); }
/* انتخابگرِ واحد فقط رویِ برچسبِ واحد؛ نباید کلِ فیلد رو بپوشونه (روی موبایل استایلِ عمومیِ select عرض رو ۱۰۰٪ می‌کرد) */
.prod-cur-wrap .prod-cur-select { width: 78px !important; min-width: 0 !important; max-width: 78px !important; height: 34px !important; padding: 0 !important; margin: 0 !important; left: 6px !important; right: auto !important; z-index: 2; }
.prod-cur-wrap input { position: relative; z-index: 1; }
.prod-cur-wrap.no-cur .prod-cur-select { display: none; }
.mat-cur-wrap input { padding-left: 92px !important; direction: ltr; text-align: left; }
.prod-cur-wrap:has(.prod-cur-select) .prod-num-suffix { z-index: 1; }
/* کادرِ عکسِ محصول */
.prod-gallery-slot img { object-fit: cover; }
.crop-box { max-width: 460px; width: calc(100% - 24px); }
.crop-box h4 { margin: 0 0 6px; font-size: 17px; font-weight: 900; }
.crop-hint { font-size: 12px; color: var(--muted); line-height: 1.9; margin: 0 0 12px; }
.crop-fit, .crop-ratios { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.crop-ratios span { font-size: 12px; color: var(--muted); margin-inline-end: 4px; }
.crop-fit button, .crop-ratios button { font-family: inherit; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 700; }
.crop-fit button.is-on, .crop-ratios button.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.crop-stage-wrap { display: flex; justify-content: center; background: var(--header-bg); border-radius: 16px; padding: 14px; margin-bottom: 10px; }
.crop-stage { position: relative; width: min(100%, 300px); max-height: 360px; overflow: hidden; border-radius: 12px; background: #fff; cursor: grab; touch-action: none; box-shadow: 0 0 0 2px var(--accent); user-select: none; }
.crop-stage.is-drag { cursor: grabbing; }
.crop-stage.is-contain { cursor: default; }
.crop-stage img { width: 100%; height: 100%; display: block; pointer-events: none; }
.crop-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.55) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.55) 1px, transparent 1px); background-size: 33.333% 33.333%; opacity: 0; transition: opacity .15s; }
.crop-stage.is-drag .crop-grid { opacity: 1; }
.crop-zoom { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; margin-bottom: 14px; }
.crop-zoom input { flex: 1; accent-color: var(--accent); }
.crop-zoom.is-off { opacity: .4; pointer-events: none; }
.crop-acts { display: flex; gap: 8px; }
.crop-acts .btn-save { flex: 1; }
.prod-gallery-slot .gallery-featured-badge { top: 4px; bottom: auto; right: 4px; z-index: 2; }
/* ===== قیمت‌گذاریِ هوشمند (هم‌استایلِ اوکرو) ===== */
.sp-page { display: flex; flex-direction: column; gap: 16px; padding-bottom: 24px; }
.sp-stats { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 12px; }
.sp-stat { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--card-shadow); }
.sp-stat small { display: block; font-size: 12px; color: var(--muted); }
.sp-stat b { font-size: 22px; font-weight: 900; line-height: 1.3; }
.sp-stat b small { display: inline; font-size: 12px; font-weight: 600; }
.sp-stat-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.sp-stat-ic .ic { width: 21px; height: 21px; }
.sp-stat-ic.tone-blue { background: var(--pastel-blue, #e8eefc); color: var(--pastel-blue-text, #2B3EAC); }
.sp-stat-ic.tone-yellow { background: var(--pastel-yellow, #fef3c7); color: var(--pastel-yellow-text, #92400e); }
.sp-stat-ic.tone-purple { background: var(--pastel-purple, #f1eafe); color: var(--pastel-purple-text, #6d28d9); }
.sp-stat-ic.tone-green { background: var(--pastel-green, #e7f8ef); color: var(--pastel-green-text, #047857); }
.sp-guide { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 12px 16px; box-shadow: var(--card-shadow); }
.sp-guide summary { cursor: pointer; font-size: 13.5px; font-weight: 800; display: flex; align-items: center; gap: 8px; list-style: none; color: var(--accent-text); }
.sp-guide summary::-webkit-details-marker { display: none; }
.sp-guide summary .ic { width: 18px; height: 18px; }
.sp-steps { counter-reset: s; list-style: none; padding: 0; margin: 14px 0 6px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sp-steps li { counter-increment: s; position: relative; padding: 12px 12px 12px 12px; border-radius: 12px; background: var(--header-bg); display: flex; flex-direction: column; gap: 4px; }
.sp-steps li:before { content: counter(s); width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 900; display: grid; place-items: center; margin-bottom: 4px; }
.sp-steps b { font-size: 13px; }
.sp-steps span { font-size: 11.5px; color: var(--muted); line-height: 1.8; }
.sp-guide-note { font-size: 11.5px; color: var(--muted); line-height: 1.9; margin: 8px 0 0; }
.sp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.sp-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--card-shadow); padding: 16px; min-width: 0; }
.sp-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.sp-card-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--accent2, #4F6AFF), var(--accent)); flex: none; }
.sp-card-ic .ic { width: 20px; height: 20px; }
.sp-card-tt { flex: 1; min-width: 160px; }
.sp-card-tt h4 { margin: 0; font-size: 15.5px; font-weight: 900; display: flex; align-items: center; gap: 6px; }
.sp-card-tt small { font-size: 11.5px; color: var(--muted); }
.sp-count:not(:empty) { font-size: 11px; font-weight: 800; background: var(--header-bg); color: var(--muted); border-radius: 999px; padding: 1px 8px; }
.sp-card-acts { display: flex; gap: 8px; align-items: center; }
.sp-card-acts .btn-save { white-space: nowrap; }
.sp-xl { position: relative; }
.sp-xl summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); font-size: 12.5px; font-weight: 700; color: var(--text); }
.sp-xl summary::-webkit-details-marker { display: none; }
.sp-xl summary .ic { width: 14px; height: 14px; }
.sp-xl-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 190px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 14px 30px -14px rgba(0,0,0,.3); padding: 6px; display: flex; flex-direction: column; }
.sp-xl-menu a, .sp-xl-menu button { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px; font-size: 12.5px; color: var(--text); text-decoration: none; background: none; border: 0; font-family: inherit; cursor: pointer; text-align: right; }
.sp-xl-menu a:hover, .sp-xl-menu button:hover { background: var(--header-bg); }
.sp-xl-menu .ic { width: 16px; height: 16px; color: var(--muted); }
.sp-list { display: flex; flex-direction: column; }
.sp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 11px 4px; border-bottom: 1px solid var(--border); }
.sp-row:last-child { border-bottom: 0; }
.sp-row-main b { font-size: 13.5px; font-weight: 800; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sp-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.sp-tag { font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 2px 8px; background: var(--header-bg); color: var(--muted); white-space: nowrap; }
.sp-tag.is-cur { background: var(--pastel-yellow, #fef3c7); color: var(--pastel-yellow-text, #92400e); }
.sp-tag.is-profit, .sp-tag.is-sale { background: var(--pastel-green, #e7f8ef); color: var(--pastel-green-text, #047857); }
.sp-tag.is-prod, .sp-tag.is-bom { background: var(--pastel-blue, #e8eefc); color: var(--pastel-blue-text, #2B3EAC); }
.sp-row-val { font-size: 13px; font-weight: 800; white-space: nowrap; }
.sp-pct { font-size: 15px; color: var(--accent-text); }
.sp-row-acts { display: flex; gap: 4px; }
.sp-ibtn { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.sp-ibtn:hover { color: var(--accent-text); border-color: var(--accent); }
.sp-ibtn.is-danger:hover { color: var(--danger, #dc2626); border-color: var(--danger, #dc2626); }
.sp-ibtn .ic { width: 15px; height: 15px; }
.sp-empty { display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; padding: 22px 12px; border: 1.5px dashed var(--border); border-radius: 14px; }
.sp-empty b { font-size: 13.5px; }
.sp-empty span { font-size: 12px; color: var(--muted); line-height: 1.8; }
.sp-frm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.sp-frm { border: 1px solid var(--border); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 4px; background: var(--surface); }
.sp-frm-top { display: flex; align-items: center; gap: 6px; }
.sp-frm-top .sp-row-acts { margin-inline-start: auto; }
.sp-code { font-family: monospace; direction: ltr; font-size: 11.5px; font-weight: 800; background: var(--as-acc-soft, var(--header-bg)); color: var(--accent-text); border-radius: 6px; padding: 2px 7px; }
.sp-frm > b { font-size: 14px; font-weight: 900; margin-top: 4px; }
.sp-frm > small { font-size: 11px; color: var(--muted); }
.sp-frm-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.sp-frm-chain span { font-size: 11.5px; font-weight: 700; background: var(--header-bg); border-radius: 8px; padding: 3px 8px; }
.sp-frm-chain i { font-style: normal; color: var(--muted); font-weight: 900; font-size: 12px; }
.sp-frm-chain em { font-size: 11.5px; color: var(--muted); font-style: normal; }
.sp-prod-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.sp-search { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 200px; height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.sp-search .ic { width: 16px; height: 16px; color: var(--muted); }
.sp-search input { flex: 1; border: 0 !important; outline: 0; background: none; font-family: inherit; font-size: 13px; color: var(--text); box-shadow: none !important; padding: 0 !important; }
.sp-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.sp-chips button { font-family: inherit; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 700; }
.sp-chips button small { color: var(--muted); font-weight: 600; }
.sp-chips button.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.sp-chips button.is-on small { color: rgba(255,255,255,.8); }
.sp-prow { grid-template-columns: minmax(0, 1fr) auto auto; }
.sp-prow-acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.sp-btn { font-family: inherit; cursor: pointer; height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 12px; font-weight: 700; white-space: nowrap; }
.sp-btn .ic { width: 15px; height: 15px; }
.sp-btn.is-pri { background: var(--accent); border-color: var(--accent); color: #fff; }
.sp-apply { display: flex; gap: 6px; }
.sp-apply select { height: 34px; border: 1px solid var(--border); border-radius: 10px; padding: 0 8px; font-family: inherit; font-size: 12px; background: var(--surface); color: var(--text); max-width: 190px; }
@media (max-width: 1100px) { .sp-grid { grid-template-columns: 1fr; } .sp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
.sp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-stat { padding: 12px; } .sp-stat b { font-size: 19px; }
.sp-steps { grid-template-columns: 1fr; }
.sp-card { padding: 14px; border-radius: 16px; }
.sp-card-acts { width: 100%; } .sp-card-acts .btn-save { flex: 1; justify-content: center; }
.sp-prow { grid-template-columns: minmax(0, 1fr) auto; }
.sp-prow-acts { grid-column: 1 / -1; justify-content: stretch; }
.sp-prow-acts .sp-apply { flex: 1; } .sp-prow-acts .sp-apply select { flex: 1; max-width: none; }
.sp-xl-menu { left: auto; right: 0; }
}
.pv-price-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pv-price-cell input { width: 100%; }
.pv-row-fx:empty { display: none; }
.pv-row-fx { font-size: 10.5px; color: var(--pastel-yellow-text, #92400e); font-weight: 700; }
/* لوگوی اوکرو: نسخه‌ی روشن/تیره بر اساسِ تمِ برنامه */
.okro-logo-d { display: none !important; }
html[data-theme="dark"] .okro-logo-l { display: none !important; }
html[data-theme="dark"] .okro-logo-d { display: block !important; }
.main-nav-logo-badge { background: none !important; padding: 0 !important; overflow: hidden; }
.main-nav-logo-badge img { width: 100%; height: 100%; object-fit: contain; }
/* ===== پاپ‌آپِ دسته‌بندیِ هزینه‌ها: لیست دو ستونه ===== */
.exp-cat-list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: start; }
.exp-cat-list .list-empty, .exp-cat-list .exp-icon-pick { grid-column: 1 / -1; }
.exp-cat-row { grid-template-columns: 36px minmax(0, 1fr) !important; row-gap: 6px; padding: 8px !important; }
.exp-cat-row .exp-cat-name { min-width: 0; overflow-wrap: anywhere; }
.exp-cat-acts { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.form-modal .exp-cat-list { max-width: 100%; }
#expCatOverlay .modal-box.form-modal { max-width: 620px; }
/* ===== کادرِ عکس: بدونِ اسکرول (موبایل و دسکتاپ)، قابِ هم‌اندازه با فضای خالی ===== */
.crop-ov { overflow: hidden !important; touch-action: none; }
.crop-box { display: flex !important; flex-direction: column; overflow: hidden !important; max-height: none !important;
height: min(680px, calc(100vh - 24px)); height: min(680px, calc(100dvh - 24px)); width: min(460px, calc(100% - 24px)); }
.crop-box > * { flex: 0 0 auto; }
.crop-box .crop-stage-wrap { flex: 1 1 0; min-height: 0; align-items: center; padding: 10px; margin-bottom: 8px; overflow: hidden; }
.crop-box .crop-stage { width: auto; max-height: none; flex: 0 0 auto; touch-action: none; }
.crop-box .crop-hint { margin-bottom: 8px; }
.crop-box .crop-fit, .crop-box .crop-ratios { margin-bottom: 8px; }
.crop-box .crop-zoom { margin-bottom: 10px; }
@media (max-height: 620px) { .crop-box .crop-hint { display: none; } }
/* عکسِ بندانگشتی بزرگ؛ پایینِ عکس یه نوارِ باریکِ «ویرایشِ کادر» با آیکونِ برش، و ستاره‌ی «شاخص» گوشه‌ی بالا */
.prod-gallery-slot, .prod-gallery-add { width: 116px; height: 116px; }
.prod-gallery-slot img { cursor: pointer; }
.prod-gallery-slot .prod-img-actions { display: flex !important; padding: 0 !important; background: transparent !important; inset: auto 0 0 0 !important; }
.prod-gallery-slot .prod-img-actions .prod-img-crop { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 26px; min-height: 26px; padding: 0 4px !important; font-size: 11px !important; font-weight: 700; border-radius: 0 !important; background: rgba(0,0,0,.6) !important; color: #fff !important; font-family: inherit; white-space: nowrap; }
.prod-gallery-slot .prod-img-crop .ic { width: 13px; height: 13px; flex: none; }
.prod-img-star { position: absolute; top: 5px; right: 5px; z-index: 3; width: 24px; height: 24px; border-radius: 50%; border: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); color: #fff; }
.prod-img-star .ic { width: 13px; height: 13px; }
@media (hover: hover) { .prod-img-star:hover { background: var(--accent); } }
@media (max-width: 420px) { .prod-gallery-slot, .prod-gallery-add { width: 104px; height: 104px; } }
@media (hover: none), (pointer: coarse) { .crop-box .crop-zoom { display: none !important; } }
/* کارتِ کادر: بالا عکس، زیرش یک خط راهنما، بعد ابزارها، و دکمه‌ها با فاصله‌ی واضح پایینِ کارت */
.crop-box h4 { margin-bottom: 10px; }
.crop-box .crop-hint { margin: 0 0 10px; text-align: center; font-size: 12px; line-height: 1.7; }
.crop-box .crop-tools { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: center; margin-bottom: 4px; }
.crop-box .crop-tools .crop-fit, .crop-box .crop-tools .crop-ratios { margin: 0; justify-content: center; }
.crop-box .crop-zoom { margin: 10px 0 0; }
.crop-box .crop-acts { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
@media (max-height: 620px) { .crop-box .crop-hint { display: block !important; } }
.category-picker-field .qe-cats-head > label { font-size: 12.5px; font-weight: 700; color: var(--muted); }
/* کارتِ مشاهده‌ی پروژه: هزینه‌ی قابلِ‌کلیک + ویرایش، رسیدها، تفکیکِ دسته */
.pd-exp { grid-template-columns: 34px minmax(0, 1fr) auto auto; cursor: pointer; }
.pd-exp-edit { width: 30px; height: 30px; }
.pd-has-rc { color: var(--accent-text, var(--accent)); font-weight: 700; }
.pd-receipts { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-bottom: 6px; }
.pd-rc { font-family: inherit; border: 1px solid var(--border); background: var(--surface); border-radius: 12px; padding: 4px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; align-items: stretch; color: var(--text); }
.pd-rc-img { display: block; aspect-ratio: 1; border-radius: 9px; overflow: hidden; background: var(--header-bg); }
.pd-rc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-rc-img .exp-view-img-ph { display: block; width: 100%; height: 100%; }
.pd-rc small { font-size: 11px; font-weight: 800; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-rc-note { font-size: 12px; color: var(--muted); margin: 2px 2px 8px; }
.pd-cats { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.pd-cat { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; background: var(--header-bg); overflow: hidden; font-size: 12.5px; }
.pd-cat span, .pd-cat b { position: relative; z-index: 1; }
.pd-cat small { color: var(--muted); }
.pd-cat i { position: absolute; top: 0; bottom: 0; inset-inline-start: 0; background: var(--accent); opacity: .1; }
/* دیالوگِ ورودی وقتی کیبوردِ موبایل بازه: پاپ‌آپ هیچ‌وقت از بالای صفحه بیرون نمی‌زنه، آیکون جمع می‌شه و محتوا داخلِ خودش اسکرول می‌خوره */
.bf-dlg-ov { padding-top: env(safe-area-inset-top, 0px); }
.bf-dlg { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.bf-dlg-ov.kb-open .bf-dlg-ic { display: none; }
.bf-dlg-ov.kb-open .bf-dlg { padding-top: 16px; border-radius: 18px 18px 0 0; }
.bf-dlg-ov.kb-open .bf-dlg-title { margin-bottom: 0; }
.bf-dlg-ov.kb-open .bf-dlg-acts { flex-direction: row-reverse; }
.bf-dlg-ov.kb-open .bf-dlg-acts button { flex: 1; }
/* ===== فرمِ ثبت/ویرایشِ هزینه: فشرده و یکدست ===== */
.exp-form .exp-gap { margin-top: 12px; }
.exp-form .amount-words { margin-bottom: 0; }
.exp-f { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.exp-in { width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; font-size: 14px; outline: none; -webkit-appearance: none; appearance: none; }
.exp-in:focus, .exp-in:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
textarea.exp-in { min-height: 64px; resize: vertical; line-height: 1.8; }
.exp-in::placeholder { color: var(--muted); opacity: .8; }
.exp-f-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.exp-in-ic, .exp-photo { display: flex; align-items: center; gap: 8px; cursor: pointer; padding-block: 0; }
.exp-in-ic .ic, .exp-photo .ic { width: 18px; height: 18px; color: var(--muted); flex: none; }
.exp-in-ic input { flex: 1; min-width: 0; border: none; background: transparent; font: inherit; font-size: 14px; color: var(--text); outline: none; padding: 0; height: 42px; cursor: pointer; }
.exp-photo { justify-content: center; white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--accent-text, var(--accent)); border-style: dashed; }
.exp-photo .ic { color: currentColor; }
.exp-form .qe-photo-preview:empty { display: none; }
.exp-f-line { display: flex; align-items: center; gap: 10px; }
.exp-f-line[hidden] { display: none; }
.exp-f-l { flex: 0 0 64px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.exp-fsel { flex: 1; min-width: 0; padding-inline-start: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 16px; background-position: left 12px center; cursor: pointer; }
.exp-seg { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.exp-seg button { flex: 1 1 auto; min-height: 38px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.exp-seg button.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.exp-form .exp-more-box { border: 1px dashed var(--border); border-radius: 12px; padding: 0 12px; background: transparent; }
.exp-form .exp-more-box > summary { list-style: none; cursor: pointer; padding: 11px 0; font-size: 13px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; }
.exp-form .exp-more-box > summary::-webkit-details-marker { display: none; }
.exp-form .exp-more-box > summary::before { content: '+'; font-weight: 800; color: var(--accent-text, var(--accent)); }
.exp-form .exp-more-box[open] > summary::before { content: '−'; }
.exp-form .exp-more-box > summary small { font-weight: 500; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-form .exp-more-box > .exp-f { margin: 0 0 12px; }
.exp-form .exp-f-acts { display: flex; gap: 8px; flex-wrap: nowrap !important; margin-top: 14px; }
.exp-form .exp-f-acts .btn-save { flex: 2 1 0 !important; }
.exp-form .exp-f-acts .btn-clear { flex: 1 1 0 !important; }
.exp-form .exp-f-acts .exp-del-ic { flex: 0 0 46px !important; width: 46px; min-height: 46px; }
.exp-del-ic { flex: 0 0 46px; height: 46px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent); background: var(--surface); color: var(--danger); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.exp-del-ic[hidden] { display: none; }
.exp-del-ic .ic { width: 19px; height: 19px; }
@media (max-width: 360px) { .exp-f-l { flex-basis: 54px; } }
/* ===== ثبتِ سریعِ هزینه: همون سبکِ فرمِ هزینه (ورودی‌های قاب‌دار، دکمه به‌جای منوی کشویی) ===== */
#quickExpOverlay .qe-desc { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; font-size: 14px; }
#quickExpOverlay .qe-desc:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
#quickExpOverlay .qe-date { height: 44px; border-radius: 12px; }
#quickExpOverlay .qe-line .qe-date { flex: 1 1 0; width: auto; min-width: 0; }
#quickExpOverlay .qe-line .qe-photo-wrap { flex: 1 1 0; }
#quickExpOverlay .amount-words:empty, #expenseFormOverlay .amount-words:empty { display: none; }
#quickExpOverlay .qe-photo-btn { border-radius: 12px; border-style: dashed !important; justify-content: center !important; color: var(--accent-text, var(--accent)); }
#quickExpOverlay .qe-photo-btn.is-done { border-style: solid !important; }
#quickExpOverlay .qe-choice { margin-top: 10px; }
#quickExpOverlay .qe-choice[hidden] { display: none; }
#quickExpOverlay .qe-extra-2 { margin-top: 10px; }
#quickExpOverlay .qe-notes { margin-top: 10px; }
/* فرمِ هزینه و ثبتِ سریع: با دسته‌های زیاد، برگه از بالای صفحه (زیرِ نوارِ ساعت) بیرون نمی‌زنه؛
خودِ برگه اسکرول می‌خوره و فهرستِ دسته‌ها سقفِ ارتفاع داره */
#expenseFormOverlay > .modal-box, #quickExpOverlay > .modal-box { overflow-y: auto !important; overscroll-behavior: contain; max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px)) !important; }
/* دسته‌ها خودشون اسکرول نمی‌خورن؛ اگه زیاد شدن کلِ برگه اسکرول می‌شه */
#expenseFormOverlay .exp-cat-pick, #quickExpOverlay .exp-cat-pick { max-height: none !important; overflow: visible !important; padding: 2px; }
/* نشانه‌ی «app.css کامل رسید» برای اسکریپتِ بارگذاری در index.html — باید آخرِ فایل بمونه */
:root { --okro-css: 1; }