/* ═══════════════════════════════════════════════════════════════════════════
AeroFlow — سیستمِ طراحیِ رابطِ وب (نسخهٔ ۲)
⚠️ **هیچ وابستگیِ بیرونی، هیچ CDN.**
این سامانه روی یک شبکهٔ داخلیِ بسته اجرا می‌شود. یک ``
آنجا فقط یک صفحهٔ نیمه‌استایل‌شده می‌سازد — و بدتر، شکستش خاموش است: صفحه بالا
می‌آید، فقط زشت. پس هرچه لازم است اینجاست.
═══ ساختار ═══
۱. توکن‌ها (رنگ، فاصله، شعاع، سایه، تایپوگرافی، چگالی)
۲. پایه و بازنشانی
۳. چیدمان: پوسته، سایدبار، نوارِ بالا
۴. مؤلفه‌ها: دکمه · فرم · انتخابگرِ جست‌وجوشونده · کارت · جدول · نشان ·
کاشی · میله · مودال و کشو · منو · توست · صفحه‌بندی
۵. واکنش‌گرا
۶. چاپ
═══ حالتِ سایدبار و تم روی `` می‌نشینند، نه روی پوستهٔ برنامه ═══
دو دلیل، و هر دو یک خرابیِ واقعی را می‌بندند:
۱. **پیش از اولین رنگ‌آمیزی.** یک اسکریپتِ همگام در `` هر دو را می‌گذارد،
پس کاربرِ تمِ تیره پلکِ سفید نمی‌بیند و سایدبارِ جمع‌شده در بارگذاری باز-و-بسته
نمی‌شود.
۲. **ناوبریِ بهبودیافتهٔ Blazor بدنه را وصله می‌زند.** هر ویژگی‌ای که روی یک
`div` داخلِ بدنه گذاشته شده باشد با اولین ناوبری به مقدارِ سرور برمی‌گردد.
`` تنها عنصری است که چارچوب هرگز دست نمی‌زند.
═══ تمِ روشن پیش‌فرض است ═══
اتاقِ عملیات معمولاً روشن است و مانیتورها کنارِ پنجره. تمِ تیره یک انتخاب است، نه
پیش‌فرض. هر دو با **یک** مجموعه توکن کار می‌کنند: هیچ مؤلفه‌ای رنگِ خام ندارد.
═══════════════════════════════════════════════════════════════════════════ */
/* ── ۱. توکن‌ها ─────────────────────────────────────────────────────────── */
:root {
/* سطوح — از دورترین به نزدیک‌ترین به کاربر */
--bg: #f1f4f8;
--surface: #ffffff;
--surface-2: #f7f9fb;
--surface-3: #eceff4;
--surface-hover: #f2f5f9;
--surface-sunk: #e7ebf1;
--border: #e3e8ee;
--border-strong: #c9d2dd;
/* متن — سه سطح، نه بیشتر. سطحِ چهارم یعنی سلسله‌مراتب دیده نمی‌شود. */
--text: #14202c;
--text-muted: #58667a;
--text-subtle: #8391a5;
/* برند */
--brand: #1c5ce0;
--brand-hover: #164cc0;
--brand-soft: #e9f0fe;
--brand-ring: #c3d7fb;
--brand-text: #ffffff;
/* معنایی — هرکدام یک رنگِ متن و یک پس‌زمینهٔ ملایم */
--ok: #067647;
--ok-soft: #e4f6ed;
--warn: #a55a00;
--warn-soft: #fdf2e2;
--danger: #b42318;
--danger-soft: #fdeceb;
--info: #1c5ce0;
--info-soft: #e9f0fe;
--idle: #64748b;
--idle-soft: #eef1f5;
/* فاصله — مقیاسِ ۴ پیکسلی */
--s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem;
--s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem;
/* شعاع */
--r-sm: 6px; --r-md: 9px; --r-lg: 14px; --r-xl: 18px; --r-full: 999px;
/*
سایه — فقط در تمِ روشن معنا دارد. در تمِ تیره سایه دیده نمی‌شود و کارش را
مرز انجام می‌دهد؛ آنجا این توکن‌ها تقریباً به `none` می‌روند.
*/
--shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
--shadow-md: 0 2px 10px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04);
--shadow-lg: 0 16px 40px rgba(16, 24, 40, .14), 0 4px 10px rgba(16, 24, 40, .06);
/* حلقهٔ فوکوس — یک توکن، تا در کلِ برنامه یکسان باشد */
--ring: 0 0 0 3px rgba(28, 92, 224, .22);
/* تایپوگرافی */
--font: "Vazirmatn", "Segoe UI", Tahoma, "Iranian Sans", sans-serif;
--mono: "Cascadia Mono", Consolas, "Courier New", monospace;
/* چیدمان */
--sidebar-w: 15.5rem;
--sidebar-w-collapsed: 3.5rem;
--topbar-h: 3.25rem;
--content-max: 1680px;
/* چگالیِ گرید — دکمهٔ «فشرده» فقط همین یک توکن را عوض می‌کند */
--row-pad-y: .4375rem;
--transition: 150ms cubic-bezier(.4, 0, .2, 1);
color-scheme: light;
}
/*
تمِ تیره.
⚠️ ترتیب مهم است: انتخابِ صریحِ کاربر (`data-theme`) باید بر `prefers-color-scheme`
غلبه کند، و انتخابِ صریحِ «روشن» هم باید بتواند تمِ سیستمیِ تیره را خنثی کند. برای
همین قاعدهٔ رسانه‌ای با `:not([data-theme="light"])` محافظت می‌شود.
*/
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { color-scheme: dark; }
}
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #0b0e13;
--surface: #141920;
--surface-2: #1a2028;
--surface-3: #212832;
--surface-hover: #1e242e;
--surface-sunk: #0f141a;
--border: #262d38;
--border-strong: #3a4453;
--text: #e7ebf1;
--text-muted: #9aa6b6;
--text-subtle: #6d7a8c;
--brand: #5b90f5;
--brand-hover: #74a2f8;
--brand-soft: #16243d;
--brand-ring: #27406b;
--brand-text: #08111f;
--ok: #41c489; --ok-soft: #0f2820;
--warn: #e2a442; --warn-soft: #2b2114;
--danger: #f4796f; --danger-soft: #2e1614;
--info: #5b90f5; --info-soft: #16243d;
--idle: #8c97a8; --idle-soft: #1d232d;
--shadow-sm: none;
--shadow-md: 0 2px 10px rgba(0, 0, 0, .35);
--shadow-lg: 0 20px 48px rgba(0, 0, 0, .6);
--ring: 0 0 0 3px rgba(91, 144, 245, .3);
}
}
:root[data-theme="dark"] {
--bg: #0b0e13;
--surface: #141920;
--surface-2: #1a2028;
--surface-3: #212832;
--surface-hover: #1e242e;
--surface-sunk: #0f141a;
--border: #262d38;
--border-strong: #3a4453;
--text: #e7ebf1;
--text-muted: #9aa6b6;
--text-subtle: #6d7a8c;
--brand: #5b90f5;
--brand-hover: #74a2f8;
--brand-soft: #16243d;
--brand-ring: #27406b;
--brand-text: #08111f;
--ok: #41c489; --ok-soft: #0f2820;
--warn: #e2a442; --warn-soft: #2b2114;
--danger: #f4796f; --danger-soft: #2e1614;
--info: #5b90f5; --info-soft: #16243d;
--idle: #8c97a8; --idle-soft: #1d232d;
--shadow-sm: none;
--shadow-md: 0 2px 10px rgba(0, 0, 0, .35);
--shadow-lg: 0 20px 48px rgba(0, 0, 0, .6);
--ring: 0 0 0 3px rgba(91, 144, 245, .3);
}
/* حالتِ جمع‌شدهٔ سایدبار — یک توکن عوض می‌شود، بقیهٔ چیدمان خودش دنبال می‌کند. */
:root[data-sidebar="collapsed"] { --sidebar-w: var(--sidebar-w-collapsed); }
/* گریدِ فشرده — همان جدول، ردیف‌های کوتاه‌تر. برای شیفتی که ۸۰۰ ردیف را مرور می‌کند. */
:root[data-density="compact"] { --row-pad-y: .25rem; }
/* ── ۲. پایه ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font);
font-size: 14px;
line-height: 1.65;
/* اعدادِ هم‌عرض: در یک گریدِ عملیاتی، ستونِ عددی که می‌لرزد سخت خوانده می‌شود. */
font-variant-numeric: tabular-nums;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-weight: 650; line-height: 1.35; }
h1 { font-size: 1.3125rem; letter-spacing: -.01em; }
h2 { font-size: .9375rem; }
h3 { font-size: .875rem; }
p { margin: 0 0 var(--s-3); }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
/* حلقهٔ فوکوس فقط برای پیمایشِ صفحه‌کلید — روی کلیکِ ماوس نویزِ بصری است. */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm); }
:focus:not(:focus-visible) { outline: none; }
/*
اعداد، کدها و نشانی‌ها لاتین‌اند و در صفحهٔ RTL باید جهتشان صریح باشد، وگرنه
«OIII → OIMM» یا «14:30» بازچینش می‌شوند و معنایشان عوض می‌شود.
*/
.mono {
font-family: var(--mono);
font-size: .92em;
direction: ltr;
unicode-bidi: isolate;
}
.hint { color: var(--text-muted); font-size: .8125rem; margin: 0 0 var(--s-3); }
.hint:last-child { margin-bottom: 0; }
.muted { color: var(--text-muted); }
.subtle { color: var(--text-subtle); }
/* فقط برای صفحه‌خوان — متنی که باید خوانده شود ولی دیده نشود. */
.sr-only {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* پرشِ مستقیم به محتوا — اولین چیزی که Tab به آن می‌رسد. */
.skip-link {
position: fixed;
top: var(--s-2);
inset-inline-start: var(--s-2);
z-index: 200;
padding: var(--s-2) var(--s-4);
border-radius: var(--r-md);
background: var(--brand);
color: var(--brand-text);
box-shadow: var(--shadow-lg);
transform: translateY(-200%);
transition: transform var(--transition);
}
.skip-link:focus { transform: none; text-decoration: none; }
/* نوارِ لغزشِ نازک — پیش‌فرضِ ویندوز در یک پنل چگال بیش از حد پهن است. */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
background: var(--border-strong);
border: 3px solid transparent;
border-radius: var(--r-full);
background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-subtle); background-clip: content-box; }
/* ── ۳. چیدمان ──────────────────────────────────────────────────────────── */
/*
پوسته: سایدبارِ ثابت + ستونِ محتوا.
grid و نه flex: عرضِ سایدبار یک متغیر است و جمع‌شدنش فقط همان متغیر را عوض
می‌کند — بدونِ اینکه چیزی در ستونِ محتوا لازم باشد بداند.
*/
.app-shell {
display: grid;
grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
min-height: 100vh;
transition: grid-template-columns var(--transition);
}
/* ── سایدبار ──────────────────────────────────────────────────────────── */
.sidebar {
position: sticky;
top: 0;
height: 100vh;
display: flex;
flex-direction: column;
background: var(--surface);
/* در RTL این لبهٔ چپِ سایدبار است — مرزِ بینِ منو و محتوا. */
border-inline-end: 1px solid var(--border);
overflow: hidden;
z-index: 40;
}
.sidebar-head {
display: flex;
align-items: center;
gap: var(--s-3);
height: var(--topbar-h);
padding: 0 var(--s-3);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
text-decoration: none;
color: inherit;
}
.sidebar-head:hover { text-decoration: none; }
/*
نشانِ برنامه — همان لوگوی کلاینتِ دسکتاپ.
⚠️ **هیچ پس‌زمینه، هیچ قاب.** نسخهٔ قبلی یک مربعِ گرادیانی با یک هواپیمای کاغذیِ سفید
بود؛ حالا که تصویرِ واقعی (با پس‌زمینهٔ شفاف) می‌نشیند، هر پس‌زمینه‌ای زیرش لوگو را
داخلِ یک کاشیِ رنگی حبس می‌کند و دیگر شبیهِ آیکونی که کاربر روی دسکتاپ می‌بیند نیست.
خودِ لوگو آبیِ گرادیانی است و روی هر دو تم می‌نشیند، پس نیازی به دو فایل نیست.
*/
.sidebar-logo {
display: grid;
place-items: center;
width: 2rem; height: 2rem;
flex-shrink: 0;
}
.sidebar-logo img {
display: block;
width: 100%; height: 100%;
object-fit: contain;
}
/* نشانِ کوچکِ نوارِ بالای موبایل — کنارِ نامِ برنامه، نه به‌جایش. */
.brand-inline { gap: var(--s-2); }
.sidebar-logo-sm { width: 1.375rem; height: 1.375rem; }
.sidebar-brand { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sidebar-brand strong { font-size: .9375rem; font-weight: 700; letter-spacing: .01em; }
.sidebar-brand span {
font-size: .6875rem;
color: var(--text-subtle);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-nav {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: var(--s-3) var(--s-2);
}
.nav-group { margin-bottom: var(--s-4); }
.nav-group:last-child { margin-bottom: 0; }
.nav-group-label {
padding: 0 var(--s-3) var(--s-2);
font-size: .6875rem;
font-weight: 700;
letter-spacing: .04em;
color: var(--text-subtle);
white-space: nowrap;
}
.nav-item {
position: relative;
display: flex;
align-items: center;
gap: var(--s-3);
padding: var(--s-2) var(--s-3);
margin-bottom: 2px;
border-radius: var(--r-md);
color: var(--text-muted);
font-size: .875rem;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
transition: background var(--transition), color var(--transition);
}
.nav-item:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; }
.nav-item svg { flex-shrink: 0; width: 18px; height: 18px; }
/* `active` را خودِ NavLink می‌گذارد؛ نامش قراردادِ چارچوب است. */
.nav-item.active { background: var(--brand-soft); color: var(--brand); font-weight: 650; }
.nav-item.active::before {
content: "";
position: absolute;
inset-block: 20%;
inset-inline-start: 0;
width: 3px;
border-radius: var(--r-full);
background: var(--brand);
}
.nav-label { overflow: hidden; text-overflow: ellipsis; }
/*
حالتِ جمع‌شده.
برچسب‌ها با `display:none` حذف می‌شوند نه با عرضِ صفر: عرضِ صفر همچنان در محاسبهٔ
چیدمان شرکت می‌کند و آیکون‌ها را از مرکز خارج می‌کند.
*/
:root[data-sidebar="collapsed"] .nav-label,
:root[data-sidebar="collapsed"] .nav-group-label,
:root[data-sidebar="collapsed"] .sidebar-brand,
:root[data-sidebar="collapsed"] .sidebar-foot-label { display: none; }
:root[data-sidebar="collapsed"] .nav-item,
:root[data-sidebar="collapsed"] .sidebar-head { justify-content: center; padding-inline: 0; }
:root[data-sidebar="collapsed"] .nav-item.active::before { display: none; }
/* گروه‌ها در حالتِ جمع‌شده با یک خط از هم جدا می‌شوند — بدونِ برچسب، فاصله کافی نیست. */
:root[data-sidebar="collapsed"] .nav-group + .nav-group {
border-top: 1px solid var(--border);
padding-top: var(--s-3);
}
/*
راهنمای شناور در حالتِ جمع‌شده. `title` بومی هم کار می‌کند ولی نیم‌ثانیه تأخیر
دارد و در یک منوی آیکونی آن تأخیر یعنی کاربر باید حدس بزند.
*/
:root[data-sidebar="collapsed"] .nav-item::after {
content: attr(data-tip);
position: absolute;
inset-inline-end: calc(100% + var(--s-2));
top: 50%;
transform: translateY(-50%);
padding: var(--s-1) var(--s-2);
border-radius: var(--r-sm);
background: var(--text);
color: var(--surface);
font-size: .75rem;
font-weight: 500;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity var(--transition);
z-index: 60;
box-shadow: var(--shadow-md);
}
:root[data-sidebar="collapsed"] .nav-item:hover::after { opacity: 1; }
.sidebar-foot {
padding: var(--s-2);
border-top: 1px solid var(--border);
flex-shrink: 0;
}
/* ── ستونِ محتوا ─────────────────────────────────────────────────────────── */
.app-content { display: flex; flex-direction: column; min-width: 0; }
.topbar {
position: sticky;
top: 0;
z-index: 30;
display: flex;
align-items: center;
gap: var(--s-2);
height: var(--topbar-h);
padding: 0 var(--s-4);
background: color-mix(in srgb, var(--surface) 86%, transparent);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border);
}
.topbar-spacer { margin-inline-start: auto; }
.topbar-sep {
width: 1px;
height: 1.375rem;
background: var(--border);
margin-inline: var(--s-1);
flex-shrink: 0;
}
.app-main {
flex: 1;
padding: var(--s-5);
max-width: var(--content-max);
width: 100%;
}
/* سرِ صفحه */
.page-head {
display: flex;
align-items: flex-start;
gap: var(--s-4);
flex-wrap: wrap;
margin-bottom: var(--s-4);
}
.page-head h1 { margin: 0; }
.page-title { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.page-sub { color: var(--text-muted); font-size: .8125rem; }
.page-actions {
margin-inline-start: auto;
display: flex;
gap: var(--s-2);
flex-wrap: wrap;
align-items: center;
}
/* ── ۴. مؤلفه‌ها ────────────────────────────────────────────────────────── */
/* ── دکمه ────────────────────────────────────────────────────────────────
یک پایهٔ مشترک و چند گونه. اندازهٔ لمسیِ حداقلی (۳۴px) رعایت می‌شود: یک دکمهٔ
کوچک‌ترِ آن، روی نمایشگرِ لمسیِ اتاقِ عملیات قابلِ زدن نیست.
*/
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s-2);
min-height: 2.125rem;
padding: 0 var(--s-4);
border: 1px solid transparent;
border-radius: var(--r-md);
background: none;
color: inherit;
font-family: inherit;
font-size: .875rem;
font-weight: 550;
line-height: 1;
white-space: nowrap;
cursor: pointer;
text-decoration: none;
transition: background var(--transition), border-color var(--transition),
color var(--transition), box-shadow var(--transition);
}
.btn:hover { text-decoration: none; }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:active:not(:disabled) { transform: translateY(.5px); }
.btn:disabled, .btn[aria-disabled="true"], .btn.disabled {
opacity: .5;
cursor: not-allowed;
pointer-events: none;
}
.btn svg { flex-shrink: 0; width: 16px; height: 16px; }
/* اصلی — در هر صفحه **یکی**. دو دکمهٔ اصلی یعنی هیچ‌کدام اصلی نیست. */
.btn-primary { background: var(--brand); color: var(--brand-text); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--brand-hover); }
/* ثانویه — عملِ متعارف */
.btn-secondary {
background: var(--surface);
border-color: var(--border-strong);
color: var(--text);
box-shadow: var(--shadow-sm);
}
.btn-secondary:hover { background: var(--surface-hover); border-color: var(--text-subtle); }
/* خنثی — عملِ کم‌اهمیت، بدونِ وزنِ بصری */
.btn-ghost { color: var(--text-muted); }
.btn-ghost:hover { background: var(--surface-hover); color: var(--text); }
.btn-ghost.active { background: var(--brand-soft); color: var(--brand); }
/* مخرب — رنگ **هشدار** است، نه تأیید. تأییدِ واقعی دومرحله‌ای است. */
.btn-danger {
background: var(--surface);
border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
color: var(--danger);
}
.btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); }
.btn-danger-solid { background: var(--danger); color: #fff; }
.btn-danger-solid:hover { filter: brightness(1.08); }
.btn-sm { min-height: 1.75rem; padding: 0 var(--s-3); font-size: .8125rem; }
.btn-sm svg { width: 14px; height: 14px; }
.btn-icon { padding: 0; width: 2.125rem; }
.btn-icon.btn-sm { width: 1.75rem; }
.btn-block { width: 100%; }
/* گروهِ دکمه — چند عملِ هم‌خانواده که باید یک واحد دیده شوند */
.btn-row { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }
/* اسپینرِ داخلِ دکمه — «کار دارد انجام می‌شود» باید روی همان دکمه دیده شود. */
.spinner {
width: .875rem; height: .875rem;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
animation: spin .6s linear infinite;
flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
}
}
/* ── کنترلِ قطعه‌ای (segmented) ───────────────────────────────────────────
جای‌گزینِ یک `select` وقتی گزینه‌ها کم و همیشه‌مفیدند: هر سه گزینه دیده می‌شوند و
انتخاب یک کلیک است، نه دو.
*/
.segmented {
display: inline-flex;
padding: 2px;
gap: 2px;
border-radius: var(--r-md);
background: var(--surface-3);
border: 1px solid var(--border);
}
.segmented > button {
appearance: none;
border: 0;
background: none;
color: var(--text-muted);
font-family: inherit;
font-size: .8125rem;
font-weight: 550;
padding: .3125rem var(--s-3);
min-height: 1.75rem;
border-radius: calc(var(--r-md) - 2px);
cursor: pointer;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: var(--s-1);
transition: background var(--transition), color var(--transition);
}
.segmented > button:hover { color: var(--text); }
.segmented > button[aria-pressed="true"] {
background: var(--surface);
color: var(--text);
box-shadow: var(--shadow-sm);
}
.segmented > button:focus-visible { outline: none; box-shadow: var(--ring); }
.segmented > button svg { width: 15px; height: 15px; }
.segmented-count {
font-size: .6875rem;
font-weight: 700;
padding: 0 .3125rem;
border-radius: var(--r-full);
background: var(--surface-sunk);
color: var(--text-subtle);
}
.segmented > button[aria-pressed="true"] .segmented-count {
background: var(--brand-soft);
color: var(--brand);
}
/* ── فرم ─────────────────────────────────────────────────────────────────── */
.field { margin-bottom: var(--s-4); }
.field:last-child { margin-bottom: 0; }
.field > label,
.filter > label,
.form-label {
display: block;
margin-bottom: var(--s-1);
color: var(--text-muted);
font-size: .78125rem;
font-weight: 600;
}
.input, select.input, textarea.input {
width: 100%;
min-height: 2.125rem;
padding: .3125rem var(--s-3);
background: var(--surface);
color: var(--text);
border: 1px solid var(--border-strong);
border-radius: var(--r-md);
font-family: inherit;
font-size: .875rem;
transition: border-color var(--transition), box-shadow var(--transition);
}
.input::placeholder { color: var(--text-subtle); }
.input:hover:not(:disabled) { border-color: var(--text-subtle); }
.input:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.input:disabled { background: var(--surface-3); color: var(--text-subtle); cursor: not-allowed; }
/* اعتبارسنجیِ ناموفقِ Blazor این کلاس را روی خودِ ورودی می‌گذارد. */
.input.invalid, .input[aria-invalid="true"] { border-color: var(--danger); }
/*
فلشِ سفارشیِ select — پیش‌فرضِ مرورگر در تمِ تیره تقریباً نامرئی است.
`background-image` یک data-URI است، نه یک فایل: یک درخواستِ شبکهٔ کمتر.
*/
select.input {
appearance: none;
padding-inline-end: var(--s-8);
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2358667a' 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-position: left var(--s-3) center;
background-size: 16px;
}
:root[data-theme="dark"] select.input {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa6b6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) select.input {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa6b6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
}
textarea.input { min-height: 6rem; resize: vertical; line-height: 1.6; }
.validation-message {
display: block;
margin-top: var(--s-1);
color: var(--danger);
font-size: .8125rem;
}
/* چک‌باکس */
.check {
display: inline-flex;
align-items: center;
gap: var(--s-2);
margin-inline-end: var(--s-4);
min-height: 2.125rem;
font-size: .875rem;
cursor: pointer;
user-select: none;
}
.check input { width: 1rem; height: 1rem; accent-color: var(--brand); cursor: pointer; }
/*
کلیدِ روشن/خاموش.
برای مقادیرِ دودوییِ «حالت» (فعال/غیرفعال، SSL، عدالت) — جایی که چک‌باکس بیش از حد
ریز است و حالتش از یک نگاه خوانده نمی‌شود.
*/
.switch {
display: inline-flex;
align-items: center;
gap: var(--s-2);
cursor: pointer;
user-select: none;
font-size: .875rem;
min-height: 2.125rem;
}
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
position: relative;
width: 2.25rem; height: 1.25rem;
flex-shrink: 0;
border-radius: var(--r-full);
background: var(--border-strong);
transition: background var(--transition);
}
.switch-track::after {
content: "";
position: absolute;
top: 2px;
inset-inline-start: 2px;
width: 1rem; height: 1rem;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
transition: transform var(--transition);
}
.switch input:checked + .switch-track { background: var(--brand); }
/* ⚠️ در RTL جهتِ حرکت باید برعکس باشد؛ `translateX` منفی همان است. */
.switch input:checked + .switch-track::after { transform: translateX(-1rem); }
[dir="ltr"] .switch input:checked + .switch-track::after { transform: translateX(1rem); }
.switch input:focus-visible + .switch-track { box-shadow: var(--ring); }
.switch input:disabled + .switch-track { opacity: .5; cursor: not-allowed; }
/* گریدِ فرم — ستون‌هایی که خودشان می‌شکنند، نه flexِ دستی. */
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
gap: var(--s-3) var(--s-4);
align-items: start;
}
.form-grid > .span-2 { grid-column: span 2; }
.form-grid > .span-full { grid-column: 1 / -1; }
@media (max-width: 640px) {
.form-grid > .span-2 { grid-column: span 1; }
}
.form-section + .form-section {
margin-top: var(--s-5);
padding-top: var(--s-5);
border-top: 1px solid var(--border);
}
.form-section > h3 { margin-bottom: var(--s-3); color: var(--text); }
/* نوارِ فیلتر — همان گرید، با نامِ قدیمی که صفحات می‌شناسند. */
.filters {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
gap: var(--s-3) var(--s-4);
align-items: end;
}
.filter { min-width: 0; }
.filter-wide { grid-column: span 2; }
.filter-actions { display: flex; gap: var(--s-2); align-items: end; }
@media (max-width: 640px) { .filter-wide { grid-column: span 1; } }
.input-inline { width: auto; min-width: 6rem; }
/* گروهِ ورودی — برچسبِ چسبیده به فیلد (مثلاً واحد) */
.input-group { display: flex; align-items: stretch; }
.input-group .input { border-start-end-radius: 0; border-end-end-radius: 0; }
.input-group-text {
display: grid; place-items: center;
padding: 0 var(--s-3);
border: 1px solid var(--border-strong);
border-inline-start: none;
border-start-start-radius: 0; border-end-start-radius: 0;
border-start-end-radius: var(--r-md); border-end-end-radius: var(--r-md);
background: var(--surface-3);
color: var(--text-muted);
font-size: .8125rem;
white-space: nowrap;
}
/* ── جست‌وجوی درون‌خطی ────────────────────────────────────────────────────
ورودیِ متن با آیکونِ ذره‌بین و دکمهٔ پاک‌کردن. دکمهٔ پاک‌کردن مهم است: بدونش کاربر
باید متن را دستی انتخاب و حذف کند و در یک نوارِ فیلترِ چندتایی این کار تکرار می‌شود.
*/
.search { position: relative; display: block; }
.search > .input { padding-inline-start: 2.125rem; padding-inline-end: 2rem; }
.search-icon {
position: absolute;
inset-inline-start: var(--s-3);
top: 50%;
transform: translateY(-50%);
color: var(--text-subtle);
pointer-events: none;
width: 15px; height: 15px;
}
.search-clear {
position: absolute;
inset-inline-end: var(--s-1);
top: 50%;
transform: translateY(-50%);
display: grid;
place-items: center;
width: 1.5rem; height: 1.5rem;
border: 0;
border-radius: var(--r-full);
background: none;
color: var(--text-subtle);
cursor: pointer;
}
.search-clear:hover { background: var(--surface-3); color: var(--text); }
/* ── انتخابگرِ جست‌وجوشونده (combobox) ────────────────────────────────────
⚠️ چرا `