@import url('fonts/iransansx/fontiran.css');
/* ═══════════════════════════════════════════════════════
VIEWPORT STABILITY — رزرو scrollbar-gutter
جلوگیری از شیفت NavMenu/Layout هنگام ناوبری بین صفحات.
═══════════════════════════════════════════════════════ */
html {
overflow-y: scroll; /* fallback برای Safari/iOS */
}
@supports (scrollbar-gutter: stable) {
html {
overflow-y: auto;
scrollbar-gutter: stable;
}
}
/* ═══════════════════════════════════════════════════════
NEO ACCOUNTING — Modern Design System v2.0
═══════════════════════════════════════════════════════ */
/* ─────────────────────────────────────────────────────────
PRIMITIVE COLORS (palette atoms — same in light & dark)
Used to derive semantic tokens below.
───────────────────────────────────────────────────────── */
:root {
/* Indigo (brand) */
--color-indigo-300: #A5B4FC;
--color-indigo-400: #818CF8;
--color-indigo-500: #6366F1;
--color-indigo-600: #4F46E5;
--color-indigo-700: #4338CA;
--color-indigo-900: #312E81;
--color-indigo-950: #1E1B4B;
/* Slate (neutral) */
--color-slate-50: #F8FAFC;
--color-slate-100: #F1F5F9;
--color-slate-200: #E2E8F0;
--color-slate-300: #CBD5E1;
--color-slate-400: #94A3B8;
--color-slate-500: #64748B;
--color-slate-600: #475569;
--color-slate-700: #334155;
--color-slate-800: #1E293B;
--color-slate-900: #0F172A;
/* Semantic primitives */
--color-success-500: #059669;
--color-success-400: #34D399;
--color-warning-500: #D97706;
--color-warning-400: #FBBF24;
--color-danger-500: #DC2626;
--color-danger-400: #F87171;
--color-info-500: #2563EB;
--color-info-400: #60A5FA;
}
:root {
--kendo-font-family: 'IRANSansX', 'Segoe UI', Tahoma, sans-serif;
/* تنها نقطه‌ای که رنگِ برند از پالتِ تلریک گرفته می‌شود. هر رنگِ برندیِ دیگری در این
پروژه از همین یکی مشتق می‌شود، پس عوض‌کردنِ منبعِ رنگ یک ویرایش است نه ۱۷۲ تا.
عمداً در بلوکِ تاریک بازتعریف نمی‌شود: منبع یکی است و تفاوتِ روشن/تاریک در
روشناییِ قفل‌شدهٔ خودِ توکن‌هاست.
🔴 پشتوانهٔ #4F46E5 اجباری است: بدونِ آن اگر فایلِ سواچ بار نشود متغیر تعریف‌نشده
می‌ماند و هر اعلانِ رنگی بی‌اعتبار می‌شود — یعنی پس‌زمینهٔ شفاف و متنِ نامرئی، نه
صرفاً رنگِ اشتباه. با پشتوانه، بدترین حالت همان نیلیِ پیش از نشستِ ۷۸ است. */
--neo-brand: var(--kendo-color-primary, #4F46E5);
/* ── Brand Colors ── */
/* ── رنگِ برند از پالتِ تلریک مشتق می‌شود (نشستِ ۷۸، تصمیمِ مالک ۲۰۲۶-۰۹-۱۳) ──
پیش‌تر این ۱۱ توکن هگزِ ثابت بودند، پس عوض‌کردنِ پالت منو و نوار را تکان نمی‌داد:
دو سامانهٔ رنگِ جدا بودند و هیچ توکنِ --neo-* به هیچ --kendo-* وصل نبود.
🔴 روشنایی عمداً **قفل** است و فقط فام و اشباع از پالت می‌آیند. دلیلش کنترست است:
با L ثابت، نسبتِ «متنِ منو روی پس‌زمینهٔ منو» در هر ۸ پالت تقریباً همان می‌ماند و
دسترس‌پذیری به‌صورتِ ساختاری حفظ می‌شود، نه با امید.
ضریب‌ها ساختگی نیستند: از تبدیلِ همین هگزهای قبلی به OKLCH درآمده‌اند (کامنتِ آخرِ
هر خط مقدارِ پیشین را نگه داشته). ۲۸ توکنِ خنثی/معناییِ دیگر عمداً دست‌نخورده‌اند
چون نسبتِ کنترستشان جداگانه سنجیده و در همین فایل مستند شده.
oklch(from …) نیازِ تازه‌ای بر مرورگر تحمیل نمی‌کند — خودِ فایل‌های سواچِ تلریک
از قبل از همین نحو استفاده می‌کنند. */
--neo-primary: oklch(from var(--neo-brand) 0.5106 c h); /* پیش‌تر #4F46E5 */
--neo-primary-light: oklch(from var(--neo-brand) 0.5854 calc(c * 0.887) h); /* پیش‌تر #6366F1 */
--neo-primary-lighter: oklch(from var(--neo-brand) 0.6801 calc(c * 0.688) h); /* پیش‌تر #818CF8 */
--neo-primary-dark: oklch(from var(--neo-brand) 0.4568 calc(c * 0.933) h); /* پیش‌تر #4338CA */
--neo-primary-bg: oklch(from var(--neo-brand) 0.5106 c h / 0.08); /* پیش‌تر rgba(79,70,229,.08) */
/* ── Sidebar ── */
--neo-sidebar-bg: linear-gradient(180deg, oklch(from var(--neo-brand) 0.2573 calc(c * 0.374) h) 0%, oklch(from var(--neo-brand) 0.3588 calc(c * 0.589) h) 50%, oklch(from var(--neo-brand) 0.2573 calc(c * 0.374) h) 100%); /* پیش‌تر #1E1B4B/#312E81 */
--neo-sidebar-bg-solid: oklch(from var(--neo-brand) 0.2573 calc(c * 0.374) h); /* پیش‌تر #1E1B4B */
--neo-sidebar-active: oklch(from var(--neo-brand) 0.6801 calc(c * 0.688) h / 0.2); /* پیش‌تر rgba(129,140,248,.2) */
--neo-sidebar-hover: rgba(255, 255, 255, 0.08);
--neo-sidebar-text: oklch(from var(--neo-brand) 0.8699 calc(c * 0.270) h); /* پیش‌تر #C7D2FE */
--neo-sidebar-group: oklch(from var(--neo-brand) 0.7853 calc(c * 0.453) h); /* پیش‌تر #A5B4FC */
/* ⚠ شش توکنِ --neo-sidebar-* ِ بالا رنگِ «تیرهٔ برند» می‌مانند (هدرِ پنلِ دستیار و … به آن‌ها وابسته‌اند)؛
از ۲۰۲۶-۰۹-۳۰ خودِ نوارِ کناری و منوی افقی از توکن‌های --neo-nav-* ِ زیر رنگ می‌گیرند. */
/* ── Navigation surfaces (sidebar + horizontal menubar) — طرحِ «الف — سفیدِ تمیز» در حالتِ روز ──
تصمیمِ مالک ۲۰۲۶-۰۹-۳۰ (نشستِ ۱۸۵، #۶۶۴): پس‌زمینهٔ روشنِ خنثی؛ فقط تأکیدها (آیتمِ فعال، خطِ کناری،
آیکنِ سرِ گروه) از پالت پیروی می‌کنند — با همان قاعدهٔ «روشناییِ عددیِ ثابت» تا کنترست در هر ۸ پالت
ساختاری بماند. سنجشِ ماکت در مرورگر (هر ۸ پالت): متن ۱۰٫۳۵:۱ · سرِ گروه ۱۷٫۸۵:۱ · آیتمِ فعال ۷٫۱۲ تا ۸٫۵۳:۱.
مقدارهای حالتِ شب در بلوکِ [data-theme="dark"] عیناً همان رنگ‌های ثابتِ پیش از این تغییرند. */
--neo-nav-bg: #FFFFFF;
--neo-nav-bg-solid: #FFFFFF;
--neo-nav-border: #E2E8F0;
--neo-nav-fg: #334155;
--neo-nav-fg-strong: #0F172A;
--neo-nav-icon: #64748B;
--neo-nav-group-fg: #0F172A;
--neo-nav-group-icon: oklch(from var(--neo-brand) 0.5106 c h);
--neo-nav-group-hover-bg: #F1F5F9;
--neo-nav-group-hover-fg: #0F172A;
--neo-nav-hover-bg: #F1F5F9;
--neo-nav-active-bg: oklch(from var(--neo-brand) 0.95 calc(c * 0.15) h);
--neo-nav-active-fg: oklch(from var(--neo-brand) 0.40 calc(c * 0.85) h);
--neo-nav-active-icon: oklch(from var(--neo-brand) 0.5106 c h);
--neo-nav-home-active-icon: oklch(from var(--neo-brand) 0.5106 c h);
--neo-nav-active-shadow: none;
--neo-nav-bar: oklch(from var(--neo-brand) 0.5106 c h);
--neo-nav-open-bg: #F8FAFC;
--neo-nav-open-head-bg: oklch(from var(--neo-brand) 0.975 calc(c * 0.07) h);
--neo-nav-open-head-fg: oklch(from var(--neo-brand) 0.40 calc(c * 0.85) h);
--neo-nav-open-head-shadow: none;
--neo-nav-open-chevron: oklch(from var(--neo-brand) 0.5106 c h);
--neo-nav-nested-fg: #475569;
--neo-nav-nested-bg: transparent;
--neo-nav-nested-hover-bg: #F1F5F9;
--neo-nav-nested-hover-fg: #0F172A;
--neo-nav-nested-open-fg: oklch(from var(--neo-brand) 0.40 calc(c * 0.85) h);
--neo-nav-child-fg: #334155;
--neo-nav-label: #64748B;
--neo-nav-sublabel: #64748B;
--neo-nav-sublabel-hover: #0F172A;
--neo-nav-sep: #E2E8F0;
--neo-nav-brand-border: #EEF2F7;
--neo-nav-logo-filter: none;
--neo-nav-scroll: rgba(15, 23, 42, 0.15);
--neo-nav-scroll-thumb: rgba(15, 23, 42, 0.18);
--neo-nav-scroll-thumb-hover: rgba(15, 23, 42, 0.28);
--neo-nav-fav-idle: rgba(15, 23, 42, 0.3);
--neo-nav-fav-hover-bg: rgba(15, 23, 42, 0.06);
--neo-nav-star: #D97706;
--neo-menubar-bg: #FFFFFF;
--neo-mb-link-fg: #334155;
--neo-mb-brand-border: #E2E8F0;
/* ── Backgrounds ── */
--neo-bg-page: #F8FAFC;
--neo-bg-card: #FFFFFF;
--neo-bg-elevated: #FFFFFF;
--neo-bg-subtle: #F1F5F9;
/* ── Borders ── */
--neo-border: #E2E8F0;
--neo-border-light: #F1F5F9;
--neo-border-focus: oklch(from var(--neo-brand) 0.6801 calc(c * 0.688) h); /* پیش‌تر #818CF8 */
/* ── Text ── */
--neo-text-primary: #0F172A;
--neo-text-secondary: #475569;
--neo-text-muted: #64748B; /* WCAG AA 4.55:1 — body text. Use --neo-text-muted-soft for icons/disabled-only. */
--neo-text-muted-soft: #94A3B8; /* Slate-400 — only for non-informational decorative use (icons, disabled placeholder). */
--neo-text-inverse: #FFFFFF;
/* ── Semantic Colors ── */
--neo-success: #059669;
--neo-success-bg: #ECFDF5;
--neo-success-border: #A7F3D0;
--neo-warning: #D97706;
--neo-warning-bg: #FFFBEB;
--neo-warning-border: #FDE68A;
--neo-danger: #DC2626;
--neo-danger-bg: #FEF2F2;
--neo-danger-border: #FECACA;
--neo-info: #2563EB;
--neo-info-bg: #EFF6FF;
--neo-info-border: #BFDBFE;
/* متنِ بدنه روی پس‌زمینهٔ همان خانواده — سطحِ ۵۰۰ برای متنِ بلند AA را رد می‌کند
(سنجش ۲۰۲۶-۰۹-۰۲: ۳٫۰۷ تا ۴٫۴۱)؛ این چهار مقدار AA-pass اند. مقدارِ warning عمداً
#B45309 است، نه تیره‌تر: دو مصرف‌کنندهٔ از-قبل-موجود (SubscriptionWarningBanner.razor.css
و BusinessManagement.razor) همین را fallback گرفته بودند — تعریفِ متفاوت ظاهرشان را
عوض می‌کرد. ۴٫۸۴:۱ روی -bg و ۵٫۰۲:۱ روی کارتِ سفید، سنجیده. */
--neo-success-text: #047857;
--neo-warning-text: #B45309;
--neo-danger-text: #B91C1C;
--neo-info-text: #1D4ED8;
/* ── Radius ── */
--neo-radius-xs: 4px;
--neo-radius-sm: 8px;
--neo-radius-md: 12px;
--neo-radius-lg: 16px;
--neo-radius-xl: 20px;
--neo-radius-full: 9999px;
/* ── Shadows ── */
--neo-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
--neo-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
--neo-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
--neo-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
--neo-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
--neo-shadow-glow: 0 0 20px oklch(from var(--neo-brand) 0.5106 c h / 0.15);
--neo-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
/* ── Spacing ── */
--neo-space-1: 0.25rem;
--neo-space-2: 0.5rem;
--neo-space-3: 0.75rem;
--neo-space-4: 1rem;
--neo-space-5: 1.25rem;
--neo-space-6: 1.5rem;
--neo-space-8: 2rem;
/* ── Typography Scale ── */
--neo-font-xs: 0.75rem;
--neo-font-sm: 0.8125rem;
--neo-font-base: 0.875rem;
--neo-font-md: 0.9375rem;
--neo-font-lg: 1.0625rem;
--neo-font-xl: 1.25rem;
--neo-font-2xl: 1.5rem;
--neo-font-3xl: 1.875rem;
--neo-leading-tight: 1.25;
--neo-leading-normal: 1.5;
--neo-leading-relaxed: 1.75;
/* ── Semantic Aliases (used by PublicLayout, shared components) ── */
--neo-bg: var(--neo-bg-page);
--neo-surface: var(--neo-bg-card);
--neo-text: var(--neo-text-primary);
/* N422 (N441) — سطحِ «خاکستریِ کم‌رنگ» ِ حباب‌های گفتگو، پیامِ پشتیبانی، کادرِ بینشِ AI و جعبه‌های پیش‌نمایش.
این دو نام پیش‌تر هیچ‌جا تعریف نشده بودند و ۲۱ مصرف یا به پشتوانهٔ روشنِ ثابت (#f8f9fa/#f0f0f0/#f7f7f7) می‌افتادند یا
به «بی‌پس‌زمینه»؛ در حالتِ شب متنِ روشنِ تم روی همان پشتوانهٔ روشن تقریباً ناخوانا بود (همان علتِ کادرِ «تأیید مجدد»).
روز: همان slate-50 ِ نزدیک به پشتوانه‌های قبلی · شب: بلوکِ [data-theme="dark"]. قفل: NeoThemeSurfaceTokenGuardTests. */
--neo-surface-alt: var(--color-slate-50);
--neo-surface-2: var(--neo-surface-alt);
/* ── Layout ── */
--neo-topbar-height: 56px;
--neo-sidebar-width: 300px;
--neo-sidebar-collapsed-width: 0px;
/* ── Transitions ── */
--neo-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--neo-transition-base: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
--neo-transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
/* ── Typography Weights ── */
--neo-weight-regular: 400;
--neo-weight-medium: 500;
--neo-weight-semibold: 600;
--neo-weight-bold: 700;
/* ── Breakpoints (for JS read-only; @media uses literal px) ── */
--neo-bp-mobile: 768px;
--neo-bp-tablet: 992px;
--neo-bp-desktop: 1280px;
/* ── Z-index Scale ── */
--neo-z-base: 1;
--neo-z-sticky: 100;
--neo-z-sidebar: 200;
--neo-z-dropdown: 500;
/* دستیارِ شناور: بالای محتوا و نوارِ پایینی، اما زیرِ overlay/modal/toast —
تا روی پیام‌های خطا و دیالوگ‌ها ننشیند. */
--neo-z-assistant: 800;
--neo-z-overlay: 900;
--neo-z-modal: 1000;
--neo-z-toast: 1100;
/* ── Focus Ring ── */
--neo-focus-outline: 2px solid var(--neo-border-focus);
--neo-focus-offset: 2px;
color-scheme: light;
}
/* ═══════════════════════════════════════════════════════
GLOBAL RESET & BASE
═══════════════════════════════════════════════════════ */
html,
body,
input,
button,
textarea,
select {
font-family: 'IRANSansX', 'Segoe UI', Tahoma, sans-serif;
}
body {
direction: rtl;
margin: 0;
background: var(--neo-bg-page);
color: var(--neo-text-primary);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
/* ── Telerik Font Override ── */
.k-widget,
.k-input,
.k-button,
.k-grid,
.k-dialog,
.k-notification {
font-family: 'IRANSansX', 'Segoe UI', Tahoma, sans-serif !important;
}
/* ── Telerik RTL Baselines ── */
.k-input-inner,
.k-textbox .k-input-inner,
.k-textarea .k-input-inner,
.k-input > input,
.k-input > textarea {
direction: rtl;
text-align: right;
}
/* ── N444 (G-18 · vouchers-trade-009) — تنها سازوکارِ چپ‌به‌راست: کلاسِ neo-ltr ──
شناسه‌های لاتین/عددی (شمارهٔ همراه و تلفن، ایمیل، کد ملی، کد اقتصادی، شبا، شمارهٔ کارت و حساب، شمارهٔ چک،
شناسهٔ صیادی، نامِ کاربری، رمز، کدِ پیامکی و…) و نمایشِ فقط‌خواندنیِ متنِ لاتین/عدد همین یک کلاس را می‌گیرند.
جای چهار سازوکارِ قبلی را گرفت: صفتِ dir="ltr"، کلاس‌های neo-num-ltr و neo-code-input-row، و style="direction: ltr".
① خودِ کلاس همان اثرِ صفتِ dir="ltr" را دارد (جهت + ایزولهٔ دوجهته، مثلِ قاعدهٔ مرورگر برای [dir]).
② ورودیِ Telerik: قابِ چپ‌به‌راست به‌تنهایی بی‌اثر است — قاعدهٔ بالای همین فایل (.k-input-inner { direction: rtl })
مستقیم روی خودِ می‌نشیند و بر ارث‌بری از قاب می‌چربد (سنجشِ مرورگرِ محلی، N430). پس کلاس روی خودِ
کامپوننت (Class="neo-ltr") یا قابِ گروهِ آن، ورودیِ داخلی را صریحاً چپ‌به‌راست و چپ‌چین می‌کند.
③ تا خانه خالی است راهنمای فارسی (placeholder) مثلِ بقیهٔ فرم راست‌به‌چپ و راست‌چین می‌ماند؛ با اولین نویسه
چپ‌به‌راست می‌شود (همان رفتارِ N430 در «ورود» و «فراموشی رمز»).
قفل: Neo.Web.Tests/Components/LtrFieldGuardTests.cs (bUnit CSS اجرا نمی‌کند؛ این قاعده‌ها قراردادِ متنیِ آن گاردند). */
.neo-ltr {
direction: ltr;
unicode-bidi: isolate;
}
.neo-ltr .k-input-inner,
.k-input-inner.neo-ltr {
direction: ltr;
text-align: left;
}
.neo-ltr .k-input-inner:placeholder-shown,
.k-input-inner.neo-ltr:placeholder-shown {
direction: rtl;
text-align: right;
}
/* Telerik TextBox داخلِ input-group بوت‌استرپ (مثلِ شبا با پیشوندِ IR):
بوت‌استرپ فقط .form-control را flex می‌کند؛ ریشهٔ Telerik یک span.k-input است،
پس بدونِ این قاعده عرضِ پیش‌فرض می‌گیرد و پیشوند به خطِ بعد wrap می‌شود. */
.input-group {
flex-wrap: nowrap;
}
.input-group > .k-input {
flex: 1 1 auto;
width: 1%;
min-width: 0;
}
/* اتصالِ یکپارچهٔ پیشوند (IR) و ورودیِ Telerik — چون input-group اینجا چپ‌به‌راست (neo-ltr)
است ولی bootstrapِ RTL لود شده، گوشه‌های گِرد اشتباه اعمال می‌شوند و مثلِ دو
«زبانهٔ» جدا دیده می‌شوند. گوشه‌های محلِ اتصال را صریحاً صاف می‌کنیم. */
.input-group.neo-ltr > .input-group-text:first-child {
border-top-left-radius: var(--neo-radius-sm, .375rem) !important;
border-bottom-left-radius: var(--neo-radius-sm, .375rem) !important;
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
.input-group.neo-ltr > .k-input:last-child {
border-top-right-radius: var(--neo-radius-sm, .375rem) !important;
border-bottom-right-radius: var(--neo-radius-sm, .375rem) !important;
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
/* ── Placeholder / NullText — lighter than actual input text ── */
.k-input-inner::placeholder,
.k-textbox .k-input-inner::placeholder,
.k-textarea .k-input-inner::placeholder,
.k-input > input::placeholder,
.k-input > textarea::placeholder {
color: var(--neo-text-muted) !important;
opacity: 0.6;
}
.k-chart,
.k-chart > div,
.k-chart-surface {
direction: ltr;
}
.k-grid,
.k-grid .k-grid-header,
.k-grid .k-grid-content,
.k-grid .k-table,
.k-grid .k-grid-table-wrap {
direction: rtl;
}
.k-grid .k-table-th,
.k-grid .k-table-td,
.k-grid .k-cell-inner {
text-align: right;
}
.k-form,
.k-form .k-form-field,
.k-form .k-form-label,
.k-form .k-form-field-wrap,
.k-dialog,
.k-dialog-wrapper,
.k-window,
.k-window-content,
.k-dropdownlist,
.k-dropdownlist .k-input-inner,
.k-combobox,
.k-combobox .k-input-inner,
.k-picker,
.k-picker .k-input-inner,
.k-popup,
.k-list,
.k-list-content,
.k-list-ul,
.k-list-item,
.k-animation-container {
direction: rtl;
}
/* dropdown/picker هم‌رنگِ ورودی‌های متن (سفید) — به‌جای پُرشدنِ طوسیِ پیش‌فرضِ تمِ kendo */
.k-picker-solid,
.k-dropdownlist.k-picker-solid {
background-color: var(--neo-bg-card, #fff) !important;
background-image: none !important;
}
.k-form .k-form-label,
.k-form .k-label,
.k-dialog-title,
.k-dialog-content,
.k-dialog-actions,
.k-dropdownlist .k-input-inner,
.k-combobox .k-input-inner,
.k-list-item,
.k-list-optionlabel {
text-align: right;
}
/* پهنای پنجره‌ها (unify-dialog-width، نشستِ ۱۹۰): پهنا از پله‌های DialogWidth (۴۸۰/۶۰۰/۷۸۰/۹۸۰) درون‌خطی می‌آید؛
این سقف در هر پهنای صفحه پنجره را داخلِ صفحه نگه می‌دارد (پیش‌تر فقط زیرِ ۴۸۰px تمام‌صفحه می‌شد و بینِ ۴۸۱ تا پهنای
پنجره بیرون می‌زد). وسط‌چینی CSS است (flex ِ k-dialog-wrapper / k-centered ِ TelerikWindow) ⇒ سقف آن را جابه‌جا نمی‌کند.
درصد، نه vw (پویشِ s190): .k-dialog-wrapper ۶px باریک‌تر از نماست؛ 100% نسبت به همان پوشش است ⇒ حاشیهٔ متقارن.
گارد: DialogWidthConventionRatchetTests. */
.k-dialog,
.k-window {
max-width: calc(100% - 2rem);
}
/* Backward compatibility */
.neo-rtl-grid,
.neo-rtl-grid .k-grid,
.neo-rtl-grid .k-grid-header,
.neo-rtl-grid .k-grid-content,
.neo-rtl-grid .k-table,
.neo-rtl-grid .k-grid-table-wrap {
direction: rtl;
}
.neo-rtl-grid .k-table-th,
.neo-rtl-grid .k-table-td,
.neo-rtl-grid .k-cell-inner {
text-align: right;
}
/* ── Compact rows (برای Grid هایی که ستون عملیات با چند دکمه دارند) ── */
/* specificity بالاتر از Telerik default با !important برای اطمینان */
.neo-grid-compact .k-table-row .k-table-td {
padding-top: 3px !important;
padding-bottom: 3px !important;
vertical-align: middle !important;
line-height: 1.25 !important;
}
/* ارتفاعِ واقعیِ ردیف از paddingِ داخلیِ .k-cell-inner می‌آید — این را هم فشرده کن */
.neo-grid-compact .k-table-row .k-table-td .k-cell-inner {
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
min-height: 0 !important;
}
/* Override Telerik .k-button padding/height داخل cell ها (دلیل اصلی ارتفاع زیاد) */
.neo-grid-compact .k-table-row .k-table-td .k-button,
.neo-grid-compact .k-table-row .k-table-td .k-button.k-button-sm,
.neo-grid-compact .k-table-row .k-table-td .neo-btn {
min-height: 26px !important;
height: 26px !important;
padding-top: 2px !important;
padding-bottom: 2px !important;
line-height: 1.2 !important;
margin: 0 2px !important;
}
/* جلوگیری از wrap چند دکمه در ستون عملیات */
.neo-grid-compact .k-table-row .k-table-td {
white-space: nowrap;
}
/* ── Account hierarchy row styles ── */
.account-row-group {
background-color: #EFF6FF !important;
border-bottom: 1px solid #BFDBFE;
}
.account-row-kol {
background-color: #F8FAFC !important;
}
/* جستجو: ردیف‌های matchشده در نتیجه‌ی فیلتر — ancestors / descendants عادی می‌مانند */
.account-row-match {
background-color: #FEF3C7 !important;
box-shadow: inset 2px 0 0 #F59E0B;
}
/* ── نشانه‌گذاری وضعیت فاکتور (گزارش خرید + صفحاتِ پرداخت) ── */
/* پرداخت‌شدهٔ کامل — سبز */
.purchase-row-settled {
background-color: #DCFCE7 !important;
box-shadow: inset 3px 0 0 #16A34A;
}
/* تخصیصِ ناقص — آبی */
.purchase-row-partial {
background-color: #DBEAFE !important;
box-shadow: inset 3px 0 0 #3B82F6;
}
/* برگشت از خرید — نارنجی */
.purchase-row-return {
background-color: #FEF3C7 !important;
box-shadow: inset 3px 0 0 #F59E0B;
}
/* منع پرداخت — قرمز + حالت غیرفعال (در صفحاتِ پرداخت، غیرقابلِ انتخاب) */
.purchase-row-blocked {
background-color: #FEE2E2 !important;
box-shadow: inset 3px 0 0 #DC2626;
opacity: .7;
}
/* منع پرداخت در گزارشِ خرید — همان قرمز، ولی بدونِ کم‌رنگیِ غیرفعال (ردیف قابلِ انتخاب می‌ماند) */
.purchase-row-blocked-report {
background-color: #FEE2E2 !important;
box-shadow: inset 3px 0 0 #DC2626;
}
/* ═══════════════════════════════════════════════════════
SCROLLBAR
═══════════════════════════════════════════════════════ */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #CBD5E1;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: #94A3B8;
}
/* ═══════════════════════════════════════════════════════
LINKS & VALIDATION
═══════════════════════════════════════════════════════ */
a,
.btn-link {
color: var(--neo-primary);
text-decoration: none;
transition: color var(--neo-transition-fast);
}
a:hover,
.btn-link:hover {
color: var(--neo-primary-dark);
}
h1:focus:not(:focus-visible) {
outline: none;
}
.valid.modified:not([type=checkbox]) {
outline: 2px solid var(--neo-success);
outline-offset: -1px;
}
.invalid {
outline: 2px solid var(--neo-danger);
outline-offset: -1px;
}
/* ═══════════════════════════════════════════════════════
ACCESSIBILITY — Focus Ring, Skip Link, Reduced Motion
═══════════════════════════════════════════════════════ */
:focus {
outline: none;
}
:focus-visible {
outline: var(--neo-focus-outline);
outline-offset: var(--neo-focus-offset, 2px);
border-radius: var(--neo-radius-xs);
}
/* Suppress mouse-only focus on Telerik components but preserve keyboard focus
ring (WCAG 2.4.7). Replaces the previous blanket :focus-visible removal that
broke keyboard navigation visibility. */
.k-input:focus:not(:focus-visible),
.k-button:focus:not(:focus-visible),
.k-picker:focus:not(:focus-visible) {
outline: none;
}
.neo-skip-link {
position: absolute;
top: -100px;
inset-inline-start: var(--neo-space-2);
z-index: var(--neo-z-toast, 1100);
background: var(--neo-primary);
color: var(--neo-text-inverse);
padding: var(--neo-space-2) var(--neo-space-4);
border-radius: var(--neo-radius-sm);
font-weight: var(--neo-weight-semibold, 600);
font-size: var(--neo-font-sm, 0.875rem);
text-decoration: none;
box-shadow: var(--neo-shadow-lg);
transition: top var(--neo-transition-base);
}
.neo-skip-link:focus,
.neo-skip-link:focus-visible {
top: var(--neo-space-2);
color: var(--neo-text-inverse);
outline: var(--neo-focus-outline);
outline-offset: 2px;
}
#neo-main-content:focus {
outline: none;
}
#neo-main-content:focus-visible {
outline: 2px dashed var(--neo-primary, oklch(from var(--neo-brand) 0.5106 c h));
outline-offset: -6px;
border-radius: var(--neo-radius-sm);
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* ═══════════════════════════════════════════════════════
NEO FORM FIELD — Standardized label/hint/error wrapper
═══════════════════════════════════════════════════════ */
.neo-form-field {
display: flex;
flex-direction: column;
gap: var(--neo-space-1);
margin-bottom: var(--neo-space-2);
}
.neo-form-field-label {
font-size: var(--neo-font-sm);
font-weight: var(--neo-weight-medium, 500);
color: var(--neo-text-primary);
margin-bottom: 0;
}
.neo-form-field-required {
color: var(--neo-danger);
margin-inline-start: 0.15rem;
font-weight: var(--neo-weight-bold, 700);
}
.neo-form-field-hint {
color: var(--neo-text-muted);
font-size: var(--neo-font-xs);
line-height: var(--neo-leading-normal, 1.5);
}
.neo-form-field-error {
color: var(--neo-danger);
font-size: var(--neo-font-xs);
line-height: var(--neo-leading-normal, 1.5);
display: flex;
flex-direction: column;
gap: 2px;
}
/* هشدارِ غیرمسدودکننده زیرِ یک فیلد — «مشکوک است ولی ذخیره را نمی‌بندد».
جایگاهش بینِ hint (خاکستریِ خنثی) و error (قرمزِ مسدودکننده) است، پس رنگِ
کهربایی می‌گیرد و مثل error هم نیست تا کاربر فکر نکند ثبت رد می‌شود.
نخستین مصرف‌کننده: رقمِ کنترلیِ کد ملی در فرمِ «ویرایش شخص» (ردیفِ G06). */
.neo-form-field-warning {
display: block;
color: var(--neo-warning-text, var(--neo-warning));
font-size: var(--neo-font-xs);
line-height: var(--neo-leading-normal, 1.5);
margin-top: 2px;
}
/* ── هم‌ترازیِ دکمه با کنترلِ کناری ───────────────────────────────────────────
مسئله: یک ستونِ فقط-دکمه که با align-items:flex-end به کفِ ردیف می‌چسبد،
وقتی فیلدِ کناری Hint دارد یک خط پایین‌تر می‌افتد — چون کفِ ستون خطِ متنِ
راهنماست، نه خطِ کنترل. پیش از ۲۰۲۶-۰۸-۲۸ این کار پنج‌جور مختلف انجام شده بود
(u-items-end · d-flex align-items-end · align-items:end · margin-top جادویی ·
هیچ‌چیز) و سه‌تایشان غلط بود.
راه‌حل: دکمه داخلِ خودِ فیلد و کنارِ کنترل بنشیند. آن‌وقت هم‌ترازی به ارتفاعِ
برچسب یا راهنما وابسته نیست و با برچسبِ دوخطی هم نمی‌شکند. */
.neo-field-inline-action {
display: flex;
align-items: center;
gap: var(--neo-space-2);
}
/* کنترل فضای باقی‌مانده را می‌گیرد، دکمه به اندازهٔ خودش می‌ماند. */
.neo-field-inline-action > :first-child {
flex: 1 1 auto;
min-width: 0;
}
.neo-field-inline-action > :last-child {
flex: 0 0 auto;
}
/* برای ستونِ فقط-دکمه‌ای که کنارِ یک NeoFormFieldِ بدونِ Hint می‌نشیند:
جبرانِ margin-bottom خودِ فیلد، وگرنه دکمه به همان اندازه پایین‌تر می‌افتد. */
.neo-field-action-end {
display: flex;
align-items: flex-end;
padding-bottom: var(--neo-space-2);
}
.neo-form-field.has-error .k-input,
.neo-form-field.has-error .k-picker,
.neo-form-field.has-error .k-dropdownlist {
border-color: var(--neo-danger) !important;
}
/* ═══════════════════════════════════════════════════════
NEO BOTTOM NAVIGATION (mobile only — < 768px)
═══════════════════════════════════════════════════════ */
.neo-bottom-nav {
display: none;
position: fixed;
bottom: 0;
inset-inline-start: 0;
inset-inline-end: 0;
background: var(--neo-bg-card);
border-top: 1px solid var(--neo-border);
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
z-index: var(--neo-z-sticky, 100);
padding: 4px 0 max(4px, env(safe-area-inset-bottom));
justify-content: space-around;
align-items: stretch;
min-height: 56px;
}
@media (max-width: 767.98px) {
.neo-bottom-nav {
display: flex;
}
/* leave room above bottom-nav so content isn't hidden */
.main-content,
.content,
main.content {
padding-bottom: calc(56px + env(safe-area-inset-bottom)) !important;
}
}
.neo-bottom-nav-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: 6px 4px;
color: var(--neo-text-muted);
text-decoration: none;
font-size: 0.7rem;
font-weight: var(--neo-weight-medium, 500);
transition: color var(--neo-transition-fast), background var(--neo-transition-fast);
border-radius: var(--neo-radius-sm);
min-height: 44px;
}
.neo-bottom-nav-item .k-svg-icon,
.neo-bottom-nav-item svg {
width: 22px;
height: 22px;
}
.neo-bottom-nav-item:hover,
.neo-bottom-nav-item:focus-visible {
color: var(--neo-primary);
background: var(--neo-primary-bg);
}
.neo-bottom-nav-item.active {
color: var(--neo-primary);
background: var(--neo-primary-bg);
}
.neo-bottom-nav-item.active::before {
content: '';
position: absolute;
top: 0;
inset-inline-start: 25%;
inset-inline-end: 25%;
height: 3px;
background: var(--neo-primary);
border-radius: 0 0 var(--neo-radius-sm) var(--neo-radius-sm);
}
.neo-bottom-nav-item {
position: relative;
}
/* ═══════════════════════════════════════════════════════
NEO COMMAND PALETTE (Ctrl+K)
═══════════════════════════════════════════════════════ */
.neo-command-palette-dialog .k-dialog {
border-radius: var(--neo-radius-lg);
overflow: hidden;
}
.neo-command-palette-dialog .k-dialog-titlebar { display: none; }
.neo-command-palette-dialog .k-dialog-content { padding: 0 !important; }
.neo-cp-header {
display: flex;
align-items: center;
gap: var(--neo-space-2);
padding: var(--neo-space-3) var(--neo-space-4);
border-bottom: 1px solid var(--neo-border);
background: var(--neo-bg-card);
}
.neo-cp-header .k-svg-icon { color: var(--neo-text-muted); flex-shrink: 0; }
.neo-cp-search {
flex: 1;
border: 0;
outline: none;
background: transparent;
color: var(--neo-text-primary);
font-size: var(--neo-font-base);
font-family: inherit;
}
.neo-cp-search::placeholder { color: var(--neo-text-muted); }
.neo-cp-kbd,
.neo-cp-footer kbd {
background: var(--neo-bg-subtle);
border: 1px solid var(--neo-border);
border-radius: var(--neo-radius-xs);
padding: 2px 6px;
font-size: var(--neo-font-xs);
color: var(--neo-text-muted);
font-family: 'IRANSansX', monospace;
}
.neo-cp-results {
max-height: 60vh;
overflow-y: auto;
padding: var(--neo-space-2);
}
.neo-cp-empty {
display: flex;
align-items: center;
justify-content: center;
gap: var(--neo-space-2);
color: var(--neo-text-muted);
padding: var(--neo-space-6);
font-size: var(--neo-font-sm);
}
.neo-cp-item {
display: flex;
align-items: center;
gap: var(--neo-space-3);
width: 100%;
padding: var(--neo-space-2) var(--neo-space-3);
border: 0;
background: transparent;
text-align: start;
border-radius: var(--neo-radius-sm);
color: var(--neo-text-primary);
cursor: pointer;
font-family: inherit;
font-size: var(--neo-font-sm);
transition: background var(--neo-transition-fast);
}
.neo-cp-item.selected,
.neo-cp-item:hover,
.neo-cp-item:focus-visible {
background: var(--neo-primary-bg);
color: var(--neo-primary);
}
.neo-cp-item .k-svg-icon {
width: 18px;
height: 18px;
color: var(--neo-text-muted);
flex-shrink: 0;
}
.neo-cp-item.selected .k-svg-icon,
.neo-cp-item:hover .k-svg-icon {
color: var(--neo-primary);
}
.neo-cp-item-title {
font-weight: var(--neo-weight-medium, 500);
flex-shrink: 0;
}
.neo-cp-item-subtitle {
color: var(--neo-text-muted);
font-size: var(--neo-font-xs);
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.neo-cp-item-group {
background: var(--neo-bg-subtle);
color: var(--neo-text-secondary);
font-size: var(--neo-font-xs);
padding: 2px 8px;
border-radius: var(--neo-radius-full);
flex-shrink: 0;
}
.neo-cp-footer {
display: flex;
gap: var(--neo-space-4);
padding: var(--neo-space-2) var(--neo-space-4);
border-top: 1px solid var(--neo-border);
background: var(--neo-bg-subtle);
color: var(--neo-text-muted);
font-size: var(--neo-font-xs);
}
.neo-cp-footer span {
display: inline-flex;
align-items: center;
gap: var(--neo-space-1);
}
/* Topbar trigger button */
.neo-cp-trigger {
display: inline-flex;
align-items: center;
gap: var(--neo-space-2);
background: var(--neo-bg-subtle);
border: 1px solid var(--neo-border);
border-radius: var(--neo-radius-md);
padding: 6px 12px;
color: var(--neo-text-muted);
font-size: var(--neo-font-sm);
cursor: pointer;
transition: all var(--neo-transition-fast);
}
.neo-cp-trigger:hover {
background: var(--neo-primary-bg);
border-color: var(--neo-primary-border);
color: var(--neo-primary);
}
.neo-cp-trigger kbd {
background: var(--neo-bg-card);
border: 1px solid var(--neo-border);
border-radius: var(--neo-radius-xs);
padding: 1px 6px;
font-size: 0.7rem;
font-family: monospace;
}
@media (max-width: 767.98px) {
.neo-cp-trigger-text { display: none; }
}
/* ═══════════════════════════════════════════════════════
MOBILE GRID — Compact mode + horizontal scroll polish
═══════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
/* Reduce inner padding to fit more content */
.neo-rtl-grid .k-grid .k-table-th,
.neo-rtl-grid .k-grid .k-table-td {
padding: 6px 8px !important;
font-size: var(--neo-font-xs);
}
/* Toolbar stacks vertically with tight spacing */
.neo-rtl-grid .k-grid-toolbar {
flex-wrap: wrap;
gap: 4px;
padding: 6px;
}
.neo-rtl-grid .k-grid-toolbar .k-textbox,
.neo-rtl-grid .k-grid-toolbar .neo-grid-title {
flex: 1 1 100%;
min-width: 0;
}
/* Hide toolbar spacer on mobile (let buttons wrap naturally) */
.neo-rtl-grid .k-grid-toolbar .k-toolbar-spacer {
display: none;
}
/* Visual hint: grid content scrolls horizontally */
.neo-rtl-grid .k-grid-content {
scrollbar-width: thin;
}
/* StatCard grids stack tighter */
.neo-stat-grid-4 {
grid-template-columns: repeat(2, 1fr) !important;
gap: var(--neo-space-2) !important;
}
}
@media (max-width: 480px) {
.neo-stat-grid-4 {
grid-template-columns: 1fr !important;
}
/* Page header: title + buttons stack */
.neo-page-header {
flex-direction: column;
align-items: stretch;
gap: var(--neo-space-2);
}
.neo-page-header-toolbar {
flex-wrap: wrap;
justify-content: flex-end;
}
/* Compact buttons */
.neo-page-header-toolbar .neo-btn,
.neo-page-header-toolbar .k-button.neo-btn {
font-size: var(--neo-font-xs);
padding: 6px 10px;
}
}
/* ═══════════════════════════════════════════════════════
NEO SIDE SHEET (drawer for edit-without-navigation)
═══════════════════════════════════════════════════════ */
.neo-side-sheet-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
z-index: var(--neo-z-overlay, 900);
opacity: 0;
pointer-events: none;
transition: opacity var(--neo-transition-base);
}
.neo-side-sheet-backdrop.open {
opacity: 1;
pointer-events: auto;
}
.neo-side-sheet {
position: fixed;
top: 0;
bottom: 0;
inset-inline-start: 0;
width: min(560px, 92vw);
background: var(--neo-bg-card);
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
z-index: var(--neo-z-modal, 1000);
transform: translateX(-100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
overflow: hidden;
}
[dir="rtl"] .neo-side-sheet {
transform: translateX(100%);
}
.neo-side-sheet.open {
transform: translateX(0);
}
.neo-side-sheet-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--neo-space-4);
border-bottom: 1px solid var(--neo-border);
background: var(--neo-bg-elevated);
}
.neo-side-sheet-title {
margin: 0;
font-size: var(--neo-font-lg);
font-weight: var(--neo-weight-semibold, 600);
color: var(--neo-text-primary);
display: flex;
align-items: center;
gap: var(--neo-space-2);
}
.neo-side-sheet-close {
background: transparent;
border: 0;
cursor: pointer;
width: 32px;
height: 32px;
border-radius: var(--neo-radius-sm);
color: var(--neo-text-muted);
display: inline-flex;
align-items: center;
justify-content: center;
transition: background var(--neo-transition-fast);
}
.neo-side-sheet-close:hover,
.neo-side-sheet-close:focus-visible {
background: var(--neo-bg-subtle);
color: var(--neo-text-primary);
}
.neo-side-sheet-body {
flex: 1;
overflow-y: auto;
padding: var(--neo-space-4);
}
.neo-side-sheet-footer {
display: flex;
gap: var(--neo-space-2);
justify-content: flex-end;
padding: var(--neo-space-3) var(--neo-space-4);
border-top: 1px solid var(--neo-border);
background: var(--neo-bg-elevated);
}
@media (max-width: 480px) {
.neo-side-sheet {
width: 100vw;
}
}
.neo-menu-divider {
border: 0;
border-top: 1px solid var(--neo-border);
margin: 4px 0;
}
/* ═══════════════════════════════════════════════════════
MOBILE CARD VIEW — alternative grid layout for very small screens
Use class .neo-cards-on-mobile on a Telerik grid container.
The grid renders as horizontally-stacked rows; on mobile,
each row stacks vertically into a card-like layout.
═══════════════════════════════════════════════════════ */
@media (max-width: 480px) {
.neo-cards-on-mobile .k-grid-header,
.neo-cards-on-mobile .k-filter-row {
display: none !important;
}
.neo-cards-on-mobile .k-grid-content,
.neo-cards-on-mobile .k-grid-table {
overflow: visible !important;
}
.neo-cards-on-mobile .k-grid-table-wrap {
overflow: visible !important;
}
/* ⚠ اندازه‌گیری‌شده روی DOMِ واقعی: بدونِ این سه قاعده عرضِ کارت از
ِ جدول
می‌آمد، یعنی برابرِ عرضِ ستونِ اولِ همان گرید (۱۶۰px در تراز و دفتر کل، ۱۹۰px در
چک‌ها، ۲۸۰px در اشخاص) و مستقل از عرضِ صفحه — کارت روی هر سه عرضِ ۳۶۰/۳۹۰/۴۸۰
یک اندازه می‌شد. جدول با table-layout: fixed عرضش را از colgroup می‌گیرد نه از ظرف،
پس هر سه سطح باید از چیدمانِ table بیرون بیایند و colgroup بی‌اثر شود.
همان الگوی neo-tree-on-mobile پایین‌ترِ همین فایل. */
.neo-cards-on-mobile colgroup {
display: none !important;
}
.neo-cards-on-mobile .k-grid-table {
display: block !important;
width: 100% !important;
table-layout: auto !important;
}
.neo-cards-on-mobile .k-table-tbody {
display: block !important;
width: 100% !important;
}
.neo-cards-on-mobile tr.k-table-row {
display: block !important;
width: 100% !important;
margin-bottom: var(--neo-space-3);
border: 1px solid var(--neo-border) !important;
border-radius: var(--neo-radius-md) !important;
background: var(--neo-bg-card) !important;
box-shadow: var(--neo-shadow-sm);
overflow: hidden;
}
.neo-cards-on-mobile tr.k-table-row.k-selected,
.neo-cards-on-mobile tr.k-table-row:hover {
background: var(--neo-primary-bg) !important;
border-color: var(--neo-primary-border) !important;
}
.neo-cards-on-mobile td.k-table-td {
display: block !important;
/* box-sizing لازم است: بدونش پدینگِ ۲۴px به width: 100% اضافه می‌شد و سلول ۲۳px از
کارتِ خودش عریض‌تر می‌شد؛ کارت overflow: hidden دارد، پس لبهٔ سلولِ «کد» و
دکمه‌های ستونِ «عملیات» بریده می‌شدند (اندازه‌گیری‌شده). */
box-sizing: border-box !important;
width: 100% !important;
text-align: start !important;
padding: 8px 12px !important;
border: 0 !important;
border-bottom: 1px solid var(--neo-border-light) !important;
}
.neo-cards-on-mobile td.k-table-td:last-child {
border-bottom: 0 !important;
}
/* Each cell prefixed with column header via data-title */
.neo-cards-on-mobile td.k-table-td::before {
content: attr(data-title);
display: inline-block;
min-width: 80px;
font-weight: var(--neo-weight-semibold, 600);
color: var(--neo-text-muted);
font-size: var(--neo-font-xs);
margin-inline-end: var(--neo-space-2);
}
/* ستونِ ثابت (Locked، مثلاً «عملیات» ِ اقساط/داشبوردِ وام): تم سلول را sticky و ::before اش را لایهٔ مطلقِ تمام‌خانه می‌کند؛ در کارت
هر دو به جریانِ عادی برمی‌گردند تا برچسب کنارِ دکمه‌ها بنشیند. گارد: LoanGridsLockedActionsTests. */
.neo-cards-on-mobile td.k-grid-content-sticky {
position: static !important;
}
.neo-cards-on-mobile td.k-grid-content-sticky::before {
position: static !important;
width: auto !important;
height: auto !important;
z-index: auto !important;
}
/* G-13 (پنجرهٔ ۱، Q1): کارت‌ها ارتفاعِ ثابتِ گرید را رها می‌کنند. بدونِ این قاعده ارتفاعِ درون‌خطیِ Height می‌ماند و
.k-grid-aria-root ِ تم overflow: hidden است ⇒ فقط ۱–۲ کارتِ اول دیده می‌شد (سنجیده در ۳۹۰×۸۴۴: پایینِ آخرین کارت
GeneralLedger ۸۰۳۸ در برابرِ جعبهٔ ۵۹۵، PersonList ۷۳۴۲/۱۰۰۸). !important لازم است چون Height درون‌خطی است.
قفل: NeoCardsOnMobileGridHeightCssTests. */
.k-grid.neo-cards-on-mobile {
height: auto !important;
}
}
/* Quick View inside SideSheet */
.neo-quickview-header {
display: flex;
align-items: center;
gap: var(--neo-space-3);
padding-bottom: var(--neo-space-4);
border-bottom: 1px solid var(--neo-border);
margin-bottom: var(--neo-space-4);
}
.neo-quickview-avatar {
width: 56px;
height: 56px;
border-radius: var(--neo-radius-full);
background: var(--neo-primary-bg);
color: var(--neo-primary);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.neo-quickview-list {
display: grid;
grid-template-columns: 110px 1fr;
gap: var(--neo-space-2) var(--neo-space-4);
margin: 0;
font-size: var(--neo-font-sm);
}
.neo-quickview-list dt {
color: var(--neo-text-muted);
font-weight: var(--neo-weight-medium, 500);
}
.neo-quickview-list dd {
color: var(--neo-text-primary);
margin: 0;
word-break: break-word;
}
.validation-message {
color: var(--neo-danger);
font-size: 0.8rem;
margin-top: 0.25rem;
}
.blazor-error-boundary {
background: linear-gradient(135deg, #DC2626 0%, #991B1B 100%);
padding: 1rem 1.5rem;
color: white;
border-radius: var(--neo-radius-md);
margin: 1rem;
}
.blazor-error-boundary::after {
content: "An error has occurred.";
}
.darker-border-checkbox.form-check-input {
border-color: #929292;
}
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
color: var(--bs-secondary-color);
text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
text-align: start;
}
/* ═══════════════════════════════════════════════════════
PAGE SHELL & LAYOUT
═══════════════════════════════════════════════════════ */
.neo-page-shell {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1.5rem;
background: var(--neo-bg-page);
min-height: calc(100vh - var(--neo-topbar-height));
animation: neo-fadeIn 0.3s ease-out;
}
@keyframes neo-fadeIn {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ── Page Header ── */
.neo-page-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
gap: 0.75rem;
}
.neo-page-header-top {
width: 100%;
}
.neo-page-header-main {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
gap: 0.75rem;
width: 100%;
}
.neo-page-header-info {
flex: 1;
min-width: 0;
}
.neo-page-header-actions {
display: flex;
align-items: center;
gap: 0.4rem;
flex-wrap: wrap;
}
.neo-page-header-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.neo-page-title {
margin: 0;
font-size: 1.35rem;
font-weight: 800;
color: var(--neo-text-primary);
letter-spacing: -0.01em;
}
.neo-page-subtitle {
margin: 0.2rem 0 0;
font-size: 0.85rem;
color: var(--neo-text-muted);
}
/* ═══════════════════════════════════════════════════════
SURFACE / CARD
═══════════════════════════════════════════════════════ */
.neo-surface {
padding:10px 30px;
background: var(--neo-bg-card);
border: 1px solid var(--neo-border);
border-radius: var(--neo-radius-md);
box-shadow: var(--neo-shadow-card);
overflow: hidden;
transition: box-shadow var(--neo-transition-base);
}
.neo-surface:hover {
box-shadow: var(--neo-shadow-sm);
}
.neo-form-surface {
padding: 1.25rem;
}
/* ── Glass Surface ── */
.neo-glass {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
/* ── Stat Card ── */
.neo-stat-card {
background: var(--neo-bg-card);
border: 1px solid var(--neo-border);
border-radius: var(--neo-radius-md);
padding: 1.25rem;
display: flex;
align-items: flex-start;
gap: 1rem;
transition: all var(--neo-transition-base);
box-shadow: var(--neo-shadow-card);
}
.neo-stat-card:hover {
box-shadow: var(--neo-shadow-md);
transform: translateY(-2px);
}
.neo-stat-icon {
width: 48px;
height: 48px;
border-radius: var(--neo-radius-md);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.neo-stat-icon svg {
width: 24px;
height: 24px;
}
.neo-stat-icon-primary {
background: var(--neo-primary-bg);
color: var(--neo-primary);
}
.neo-stat-icon-success {
background: var(--neo-success-bg);
color: var(--neo-success);
}
.neo-stat-icon-warning {
background: var(--neo-warning-bg);
color: var(--neo-warning);
}
.neo-stat-icon-info {
background: var(--neo-info-bg);
color: var(--neo-info);
}
.neo-stat-icon-danger {
background: var(--neo-danger-bg);
color: var(--neo-danger);
}
.neo-stat-content {
flex: 1;
min-width: 0;
}
.neo-stat-label {
font-size: 0.8rem;
color: var(--neo-text-muted);
font-weight: 500;
margin-bottom: 0.25rem;
}
.neo-stat-value {
font-size: 1.5rem;
font-weight: 800;
color: var(--neo-text-primary);
line-height: 1.2;
letter-spacing: -0.02em;
}
.neo-stat-change {
font-size: 0.75rem;
font-weight: 600;
margin-top: 0.25rem;
display: inline-flex;
align-items: center;
gap: 0.2rem;
padding: 0.15rem 0.5rem;
border-radius: var(--neo-radius-full);
}
.neo-stat-change-up {
background: var(--neo-success-bg);
color: var(--neo-success);
}
.neo-stat-change-down {
background: var(--neo-danger-bg);
color: var(--neo-danger);
}
/* ── Loan Progress Bar (داشبوردِ تسهیلات) ──
⚠ از neo-pages.css:1032-1046 آمده — فایلی که App.razor هرگز لود نمی‌کند. تا پیش از
این، markup در LoanDashboard.razor:151 هر دو کلاس را می‌زد ولی هیچ تعریفی وجود نداشت
⇒ نوار یک فضای ۸ پیکسلیِ کاملاً نامرئی بود و «چند درصد از وام پرداخت شده» فقط به‌صورت
عددِ متنی کنارش دیده می‌شد.
⚠ خطِ `margin-inline-start: auto` تعریفِ اصلی عمداً برداشته شد: در RTL معنایش
margin-right:auto است، یعنی نوار به لبهٔ چپ می‌چسبید و از چپ رشد می‌کرد — برعکسِ
انتظار در صفحهٔ راست‌به‌چپ. حالا از سمتِ راست (شروعِ خط) پر می‌شود.
⚠ رنگِ track از --neo-border-light به --neo-border تغییر کرد: اولی #F1F5F9 است و روی
پس‌زمینهٔ سفیدِ گرید عملاً دیده نمی‌شد. مقدارِ fallbackِ خودِ تعریفِ اصلی (#e2e8f0)
دقیقاً همان --neo-border است، پس این همان رنگی است که نویسنده در نظر داشته. */
.neo-loan-progress-track {
width: 100%;
height: 8px;
background: var(--neo-border);
border-radius: var(--neo-radius-full);
overflow: hidden;
}
.neo-loan-progress-fill {
height: 100%;
border-radius: var(--neo-radius-full);
background: linear-gradient(90deg, var(--neo-primary), var(--neo-primary-lighter));
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ═══════════════════════════════════════════════════════
ACCOUNT TREE (گریدِ سلسله‌مراتبیِ سرفصل حساب‌ها)
گرید همان TelerikGrid است، نه TreeList: کلِ CSSِ گریدِ این پروژه به .k-grid* می‌چسبد و
با TreeList باید یک مجموعهٔ موازی ساخته می‌شد. ساختار از Depth (تورفتگی) و دکمهٔ +/−
می‌آید که صفحه در ستونِ اول رندر می‌کند.
═══════════════════════════════════════════════════════ */
.neo-tree-cell {
display: flex;
align-items: center;
gap: 0.4rem;
min-width: 0;
}
.neo-tree-toggle {
flex-shrink: 0;
width: 18px;
height: 18px;
line-height: 1;
padding: 0;
box-sizing: border-box;
border: 1px solid var(--neo-border);
border-radius: var(--neo-radius-xs);
background: var(--neo-bg-card);
color: var(--neo-text-secondary);
font: inherit;
font-size: 0.8rem;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.neo-tree-toggle:hover {
border-color: var(--neo-primary);
color: var(--neo-primary);
}
/* برگ‌ها دکمه ندارند ولی باید هم‌تراز با گره‌های بازشو بمانند. */
.neo-tree-toggle-spacer {
flex-shrink: 0;
width: 18px;
}
.neo-tree-code {
flex-shrink: 0;
direction: ltr;
font-variant-numeric: tabular-nums;
}
.neo-tree-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* وزن و رنگِ سطوح — همان قصدِ کلاس‌های neo-account-* که تعریفشان در شیتِ لودنشده مانده بود.
تورفتگی دیگر از کلاس نمی‌آید (از Depth می‌آید)، پس فقط وزن و رنگ ماند.
⚠ سطحِ ۲ با --neo-primary-dark نوشته شده نه --neo-primary-hover: دومی در هیچ شیتِ
لودشده‌ای تعریف نشده (تنها تعریفش در neo-design-tokens.css بود که هرگز لود نشد و در N82 حذف شد). */
.neo-tree-l1 { font-weight: 700; color: var(--neo-primary); }
.neo-tree-l2 { font-weight: 600; color: var(--neo-primary-dark); }
.neo-tree-sub { color: var(--neo-text-secondary); }
.neo-account-tree .account-row-subsidiary { background: rgba(5, 150, 105, 0.03); }
/* نشانِ تفصیلیِ مشترک — رابطهٔ تفصیلی-معین چندبه‌چند است. */
.neo-tree-shared {
flex-shrink: 0;
font-size: 0.68rem;
font-weight: 700;
padding: 0.05rem 0.4rem;
border-radius: var(--neo-radius-full);
background: var(--neo-warning-bg);
color: var(--neo-warning);
border: 1px solid var(--neo-warning-border);
cursor: help;
}
/* ── موبایل: فقط ستونِ درخت ──
نمای کارتیِ neo-cards-on-mobile برای این گرید مناسب نیست (ردیف‌ها را عمودی می‌چیند و
ساختارِ درخت را نابود می‌کند). به‌جایش بقیهٔ ستون‌ها پنهان می‌شوند و جزئیاتشان با ضربه
روی ردیف در کشوی پایین باز می‌شود. همان breakpointِ ۴۸۰px که نمای کارتی استفاده می‌کند. */
@media (max-width: 480px) {
/* ⚠ نسخهٔ اولِ این بلوک صفحه را روی موبایل خالی می‌کرد: فقط سلول‌ها display:none
شدند ولی چیدمانِ table دست‌نخورده ماند. عرضِ ستون در Telerik از
می‌آید
نه از td، پس جدول همان ~۹۵۰px عریض باقی ماند و ظرفِ برنده پنجرهٔ ۳۹۰px را روی
ناحیهٔ خالی نگه داشت. راه‌حل همان الگوی جاافتادهٔ neo-cards-on-mobile است:
ردیف باید از چیدمانِ table بیرون بیاید تا colgroup بی‌اثر شود. */
/* کلِ سرستون پنهان می‌شود، نه هر th جدا — همان کاری که نمای کارتی می‌کند. */
.neo-tree-on-mobile .k-grid-header,
.neo-tree-on-mobile .k-filter-row {
display: none !important;
}
/* ظرف‌های Telerik محتوا را می‌بُرند؛ بدونِ این سه، ردیفِ بلوکی دیده نمی‌شود. */
.neo-tree-on-mobile .k-grid-content,
.neo-tree-on-mobile .k-grid-table,
.neo-tree-on-mobile .k-grid-table-wrap {
overflow: visible !important;
}
/* ⚠ اندازه‌گیری روی DOMِ واقعی نشان داد block کردنِ تنهای tr کافی نیست: ردیف عرضِ
صفر می‌گیرد چون tbody هنوز table-row-group است، و جدول با table-layout: fixed
عرضش را از