/** * SPE Components — کیت اجزای طراحی مشترک بازاربان (سیستم طراحی واحد) * * هدف: همه دکمه/فرم(ورود اطلاعات)/جدول/فهرست/کارت/بج از یک کیت توکن‌محور * تغذیه شوند؛ یک‌بار تعریف، همه‌جا استفاده. ماژول جدید فقط این کلاس‌ها را به کار * می‌برد و خودکار با قالب هماهنگ می‌شود. * * قرارداد استفاده: محتوای ماژول را داخل یک ریشه `.spe-ui` بگذارید: *

… اجزا …

* این اسکوپ عمدی است — کلاس‌هایی مثل .spe-card/.spe-status در کد قدیمی معنای * دیگری دارند؛ پیشوند `.spe-ui` تضمین می‌کند چیزی از صفحات موجود نشکند. * * توکن‌ها: رنگ/شعاع/فونت تم‌پذیر از `:root` می‌آید (SPE_Theme::inject روی فرانت * و ادمین). این فایل هیچ توکن سراسری را بازتعریف نمی‌کند؛ همهٔ مقادیر از * `SPE_Theme` می‌آیند و هر var() فال‌بک امن دارد تا بدون تزریق هم نشکند. * * کنترل‌های کامپوننتی صفحه «ظاهر و قالب» (همگی فقط روی همین اسکوپ اثر دارند): * • تراکم جدول → کلاس spe-density-compact|comfy (روی body یا روی خود .spe-ui) * • سبک خطوط جدول → spe-tbl-striped|plain * • سبک کادر ورودی → spe-field-filled|underline * هر کلاس هم روی (حالت ذخیره‌شده) و هم روی خود .spe-ui (پیش‌نمایش زنده) * کار می‌کند؛ از همین رو هر مودیفایر دو سلکتور دارد. * * تله‌های رعایت‌شده: (۱) بدون transition روی خواص توکن‌محور ارث‌بری‌شده، * (۲) کلاس حالت = is-* نه .sel، (۳) آیکن ۱em. * * @package ServicePricingEngine * @since 15.217.0 * @version 15.269.56 */ /* ═══════════════ ریشه اسکوپ (توکن‌ها فقط از SPE_Theme) ═══════════════ */ .spe-ui{ color:var(--spe-text); font-size:var(--spe-fsize,15px); font-family:var(--spe-font,system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif); } .spe-ui *,.spe-ui *::before,.spe-ui *::after{box-sizing:border-box} /* تراکم جدول (روی body یا روی .spe-ui) */ .spe-density-compact .spe-ui,.spe-ui.spe-density-compact{--spe-tbl-py:6px} .spe-density-comfy .spe-ui,.spe-ui.spe-density-comfy{--spe-tbl-py:15px} /* ═══════════════ دکمه‌ها (.spe-btn*) ═══════════════ */ .spe-ui .spe-btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--spe-btn-gap,7px); font-family:inherit; font-size:var(--spe-fs-base,13px); font-weight:var(--spe-fw-md,600); line-height:1; cursor:pointer; padding:0 var(--spe-btn-px,16px); height:var(--spe-btn-h,var(--spe-field-h,40px)); border-radius:var(--spe-radius,12px); border:1px solid transparent; background:var(--spe-surface); color:var(--spe-text); transition:filter .15s, box-shadow .15s; /* فقط خواص غیر توکن‌محور */ text-decoration:none; } .spe-ui .spe-btn:hover{filter:brightness(.96)} .spe-ui .spe-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--spe-focus-ring,var(--spe-accent-soft,#eef0fe))} .spe-ui .spe-btn:active:not([disabled]):not(.is-disabled){filter:brightness(.92)} .spe-ui .spe-btn .ic,.spe-ui .spe-btn svg{width:1em; height:1em; flex:0 0 auto} .spe-ui .spe-btn svg,.spe-ui .spe-btn .spe-ico{fill:none; stroke:currentColor} /* قرارداد APPEARANCE-ICON-MANAGEMENT/r1: آیکن دکمهٔ دارای نوشته رنگ مستقل ندارد. */ .spe-ui .spe-btn:not(.spe-btn-icon):not(.spe-btn-ico) .spe-ico-wrap, .spe-ui .spe-btn:not(.spe-btn-icon):not(.spe-btn-ico) .spe-ico, .spe-ui .spe-btn:not(.spe-btn-icon):not(.spe-btn-ico) svg{color:inherit!important} /* پر رنگ — فقط دکمه متنی؛ دکمه آیکن تنها outline می‌ماند */ .spe-ui .spe-btn-primary:not(.spe-btn-icon):not(.spe-btn-ico){background:var(--spe-primary,#ef4056); color:#fff; border-color:var(--spe-primary,#ef4056)} .spe-ui .spe-btn-primary:not(.spe-btn-icon):not(.spe-btn-ico):hover{background:var(--spe-primary-dark,#d6304a); filter:none} .spe-ui .spe-btn-accent:not(.spe-btn-icon):not(.spe-btn-ico){background:var(--spe-accent,#6366f1); color:#fff; border-color:var(--spe-accent,#6366f1)} .spe-ui .spe-btn-accent:not(.spe-btn-icon):not(.spe-btn-ico):hover{background:var(--spe-accent-dark,#4f46e5); filter:none} .spe-ui .spe-btn-admin:not(.spe-btn-icon):not(.spe-btn-ico){background:var(--spe-btn-admin,var(--spe-accent,#6366f1)); color:#fff; border-color:var(--spe-btn-admin,var(--spe-accent,#6366f1))} .spe-ui .spe-btn-admin:not(.spe-btn-icon):not(.spe-btn-ico):hover{background:var(--spe-btn-admin-dark,var(--spe-accent-dark,#4f46e5)); filter:none} /* مرکّبِ تیره روی پرکنندهٔ روشن: سفید روی --spe-success تنها ۱٫۷۴ بود، --spe-text روی همان ۵٫۶۶ می‌دهد. رنگِ برند دست‌نخورده می‌ماند. */ .spe-ui .spe-btn-success:not(.spe-btn-icon):not(.spe-btn-ico){background:var(--spe-success,#16a34a); color:var(--spe-text); border-color:var(--spe-success,#16a34a)} .spe-ui .spe-btn-danger:not(.spe-btn-icon):not(.spe-btn-ico){background:var(--spe-danger,#dc2626); color:#fff; border-color:var(--spe-danger,#dc2626)} .spe-ui .spe-btn-ghost{background:transparent; color:var(--spe-text-2); border-color:var(--spe-border-strong)} .spe-ui .spe-btn-ghost:hover{background:var(--spe-surface-2); filter:none} .spe-ui .spe-btn-link{background:none; border:none; color:var(--spe-accent,#6366f1); padding:0 6px; height:auto} .spe-ui .spe-btn-link:hover{text-decoration:underline; filter:none} .spe-ui .spe-btn[disabled],.spe-ui .spe-btn.is-disabled{opacity:.5; cursor:not-allowed; filter:none} .spe-ui .spe-btn.is-loading{opacity:.72;cursor:wait;pointer-events:none} .spe-ui .spe-btn-sm{height:var(--spe-btn-h-sm,32px); font-size:var(--spe-fs-sm,12px); padding:0 var(--spe-space-3,12px)} .spe-ui .spe-btn-lg{height:var(--spe-btn-h-lg,48px); font-size:var(--spe-fs-md,15px); padding:0 var(--spe-space-5,20px)} /* آیکن تنها — رنگ‌ها از توکن قالب (--spe-icon-*) */ .spe-ui .spe-btn-icon,.spe-ui .spe-btn-ico{ width:34px; height:34px; padding:0; line-height:0; border-radius:var(--spe-radius-sm,8px); color:var(--spe-icon-btn-color,var(--spe-text-2)); border:1px solid var(--spe-icon-btn-border,var(--spe-border-strong)); background:var(--spe-icon-btn-bg,var(--spe-surface)); } .spe-ui .spe-btn-icon:hover,.spe-ui .spe-btn-ico:hover{ color:var(--spe-icon-btn-hover-color,var(--spe-btn-admin)); border-color:var(--spe-icon-btn-hover-border,var(--spe-btn-admin)); background:var(--spe-icon-btn-hover-bg,var(--spe-surface-2)); filter:none; } /* حذف آیکن‌تنها — خنثی (بدون قرمز) */ .spe-ui .spe-btn-icon.is-danger,.spe-ui .spe-btn-ico.spe-btn-danger, .spe-ui .spe-btn-icon.spe-btn-danger,.spe-ui .spe-btn-ico.is-danger{ color:var(--spe-icon-del-color,var(--spe-icon-btn-color,var(--spe-text-2))); border-color:var(--spe-icon-del-border,var(--spe-icon-btn-border,var(--spe-border-strong))); background:var(--spe-icon-btn-bg,var(--spe-surface)); } .spe-ui .spe-btn-icon.is-danger:hover,.spe-ui .spe-btn-ico.spe-btn-danger:hover, .spe-ui .spe-btn-icon.spe-btn-danger:hover,.spe-ui .spe-btn-ico.is-danger:hover{ color:var(--spe-icon-del-hover-color,var(--spe-icon-btn-hover-color,var(--spe-btn-admin))); border-color:var(--spe-icon-del-hover-border,var(--spe-icon-btn-hover-border,var(--spe-btn-admin))); background:var(--spe-icon-del-hover-bg,var(--spe-icon-btn-hover-bg,var(--spe-surface-2))); filter:none; } .spe-ui .spe-btn-icon.spe-btn-accent,.spe-ui .spe-btn-ico.spe-btn-accent{ color:var(--spe-icon-accent-color,var(--spe-accent)); border-color:var(--spe-icon-accent-border,var(--spe-accent-soft)); background:var(--spe-icon-btn-bg,var(--spe-surface)); } .spe-ui .spe-btn-icon.spe-btn-accent:hover,.spe-ui .spe-btn-ico.spe-btn-accent:hover{ color:var(--spe-icon-accent-color,var(--spe-accent)); border-color:var(--spe-icon-accent-color,var(--spe-accent)); background:var(--spe-icon-accent-hover-bg,var(--spe-accent-soft)); filter:none; } .spe-ui .spe-btn-icon.spe-btn-primary,.spe-ui .spe-btn-ico.spe-btn-primary{ color:var(--spe-icon-primary-color,var(--spe-primary)); border-color:var(--spe-icon-primary-border,var(--spe-primary-light)); background:var(--spe-icon-btn-bg,var(--spe-surface)); } .spe-ui .spe-btn-icon.spe-btn-primary:hover,.spe-ui .spe-btn-ico.spe-btn-primary:hover{ color:var(--spe-icon-primary-color,var(--spe-primary)); border-color:var(--spe-icon-primary-color,var(--spe-primary)); background:var(--spe-icon-primary-hover-bg,var(--spe-primary-light)); filter:none; } .spe-ui .spe-btn-icon.spe-btn-admin,.spe-ui .spe-btn-ico.spe-btn-admin{ color:var(--spe-btn-admin,var(--spe-accent)); border-color:var(--spe-btn-admin-soft,var(--spe-accent-soft)); background:var(--spe-icon-btn-bg,var(--spe-surface)); } .spe-ui .spe-btn-icon.spe-btn-admin:hover,.spe-ui .spe-btn-ico.spe-btn-admin:hover{ color:var(--spe-btn-admin,var(--spe-accent)); border-color:var(--spe-btn-admin,var(--spe-accent)); background:var(--spe-btn-admin-soft,var(--spe-accent-soft)); filter:none; } /* ═══════════════ ورود اطلاعات / فرم (.spe-field …) ═══════════════ */ .spe-ui .spe-form{display:grid; gap:16px} /* شبکهٔ ۱۲ ستونی: هر فیلد عرض خودش را با .spe-field--* اعلام می‌کند. پیش‌فرضِ هر فرزند «نصف» است، پس ردیف‌های دوستونیِ قبلی بی‌تغییر می‌مانند. */ .spe-ui .spe-form-row{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:14px} .spe-ui .spe-form-row > *{grid-column:span 6} .spe-ui .spe-form-row > .spe-field--full{grid-column:span 12} .spe-ui .spe-form-row > .spe-field--two-thirds{grid-column:span 8} .spe-ui .spe-form-row > .spe-field--half{grid-column:span 6} .spe-ui .spe-form-row > .spe-field--third{grid-column:span 4} .spe-ui .spe-form-row > .spe-field--quarter{grid-column:span 3} .spe-ui .spe-field{display:flex; flex-direction:column; gap:6px} .spe-ui .spe-label{font-size:12.5px; font-weight:700; color:var(--spe-text)} .spe-ui .spe-label .req{color:var(--spe-danger,#dc2626); margin-inline-start:3px} .spe-ui .spe-input,.spe-ui .spe-select,.spe-ui .spe-textarea{ font-family:inherit; font-size:13.5px; color:var(--spe-text); height:var(--spe-field-h,40px); padding:0 12px; background:var(--spe-surface); border:1px solid var(--spe-border-strong); border-radius:var(--spe-radius-sm,8px); width:100%; outline:none; transition:border-color .15s, box-shadow .15s; } .spe-ui .spe-textarea{height:auto; min-height:90px; padding:10px 12px; resize:vertical; line-height:1.8} .spe-ui .spe-input:focus,.spe-ui .spe-select:focus,.spe-ui .spe-textarea:focus{ border-color:var(--spe-accent,#6366f1); box-shadow:0 0 0 3px var(--spe-accent-soft,#eef0fe); } .spe-ui .spe-input::placeholder{color:var(--spe-text-3)} .spe-ui .spe-hint{font-size:11.5px; color:var(--spe-text-3)} .spe-ui .spe-field.is-error .spe-input,.spe-ui .spe-field.is-error .spe-select{border-color:var(--spe-danger,#dc2626); box-shadow:0 0 0 3px var(--spe-danger-bg)} .spe-ui .spe-err{font-size:11.5px; color:var(--spe-danger,#dc2626)} .spe-ui .spe-check{display:inline-flex; align-items:center; gap:8px; font-size:13px; cursor:pointer} .spe-ui .spe-check input{width:17px; height:17px; accent-color:var(--spe-accent,#6366f1)} .spe-ui .spe-switch{position:relative; width:42px; height:24px; flex:0 0 auto; display:inline-block} .spe-ui .spe-switch input{opacity:0; width:100%; height:100%; margin:0; cursor:pointer} .spe-ui .spe-switch .track{position:absolute; inset:0; background:var(--spe-border-strong); border-radius:999px; transition:background .15s} .spe-ui .spe-switch .track::after{content:""; position:absolute; inset-block:3px; inset-inline-start:3px; width:18px; height:18px; background:#fff; border-radius:50%; transition:inset-inline-start .15s} .spe-ui .spe-switch input:checked + .track{background:var(--spe-accent,#6366f1)} .spe-ui .spe-switch input:checked + .track::after{inset-inline-start:21px} /* ردیف تنظیم روشن/خاموش (برچسب + spe-switch) — فرم‌های تنظیمات */ .spe-ui .spe-toggle-row{display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--spe-border)} .spe-ui .spe-toggle-row:last-child{border-bottom:0} .spe-ui .spe-toggle-row .lbl{flex:1; font-size:13px} .spe-ui .spe-toggle-row .lbl small{display:block; color:var(--spe-text-3); font-size:11.5px; margin-top:2px; font-weight:400} /* بخش کارتیِ فرم‌های بلند — SPE_Form_UI::section() */ .spe-ui .spe-form-section{ border:1px solid var(--spe-border); border-radius:var(--spe-radius,12px); background:var(--spe-surface); padding:var(--spe-space-4,16px); } .spe-ui .spe-form-section + .spe-form-section{margin-top:var(--spe-space-4,16px)} .spe-ui .spe-form-section-head{margin:0 0 var(--spe-space-3,12px)} .spe-ui .spe-form-section-title{margin:0; font-size:13.5px; font-weight:800; color:var(--spe-text)} .spe-ui .spe-form-section-sub{margin:2px 0 0; font-size:11.5px; color:var(--spe-text-3); font-weight:400} .spe-ui .spe-form-section-body{display:grid; gap:var(--spe-space-4,16px)} /* استان ← شهر — دو کشویی وابسته (SPE_Form_UI::region()) */ .spe-region-field{display:grid; grid-template-columns:1fr 1fr; gap:var(--spe-space-2,8px)} .spe-region-field .spe-select{width:100%} @media (max-width:520px){ .spe-region-field{grid-template-columns:1fr} } /* میان‌بُرهای نوع‌دار: رنگ، آیکن، فایل */ .spe-ui .spe-color-field,.spe-ui .spe-icon-field{display:inline-flex; align-items:center; min-height:var(--spe-field-h,40px)} .spe-ui .spe-file{ font-family:inherit; font-size:13px; color:var(--spe-text); padding:var(--spe-space-2,8px); width:100%; background:var(--spe-surface); border:1px dashed var(--spe-border-strong); border-radius:var(--spe-radius-sm,8px); cursor:pointer; } .spe-ui .spe-file:focus-visible{outline:2px solid var(--spe-accent,#6366f1); outline-offset:2px} /* سبک کادر ورودی: outline(پیش‌فرض) | filled | underline */ .spe-field-filled .spe-ui .spe-input,.spe-field-filled .spe-ui .spe-select,.spe-field-filled .spe-ui .spe-textarea, .spe-ui.spe-field-filled .spe-input,.spe-ui.spe-field-filled .spe-select,.spe-ui.spe-field-filled .spe-textarea{ background:var(--spe-surface-2); border-color:transparent; } .spe-field-filled .spe-ui .spe-input:focus,.spe-ui.spe-field-filled .spe-input:focus, .spe-field-filled .spe-ui .spe-select:focus,.spe-ui.spe-field-filled .spe-select:focus, .spe-field-filled .spe-ui .spe-textarea:focus,.spe-ui.spe-field-filled .spe-textarea:focus{ background:var(--spe-surface); border-color:var(--spe-accent,#6366f1); } .spe-field-underline .spe-ui .spe-input,.spe-field-underline .spe-ui .spe-select,.spe-field-underline .spe-ui .spe-textarea, .spe-ui.spe-field-underline .spe-input,.spe-ui.spe-field-underline .spe-select,.spe-ui.spe-field-underline .spe-textarea{ background:transparent; border:0; border-bottom:1.5px solid var(--spe-border-strong); border-radius:0; padding-inline:2px; } .spe-field-underline .spe-ui .spe-input:focus,.spe-ui.spe-field-underline .spe-input:focus, .spe-field-underline .spe-ui .spe-select:focus,.spe-ui.spe-field-underline .spe-select:focus, .spe-field-underline .spe-ui .spe-textarea:focus,.spe-ui.spe-field-underline .spe-textarea:focus{ border-bottom-color:var(--spe-accent,#6366f1); box-shadow:0 1px 0 0 var(--spe-accent,#6366f1); } /* ═══════════════ کارت + جدول (.spe-card / .spe-table) ═══════════════ */ .spe-ui .spe-card{background:var(--spe-surface); border:1px solid var(--spe-border); border-radius:var(--spe-radius,12px); box-shadow:0 1px 3px rgba(0,0,0,.06); overflow:hidden} .spe-ui .spe-card-head{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; border-bottom:1px solid var(--spe-border)} .spe-ui .spe-card-head h3{margin:0; font-size:14px; font-weight:700; color:var(--spe-text)} .spe-ui .spe-table{width:100%; border-collapse:collapse; font-size:13px; color:var(--spe-text)} .spe-ui .spe-table th,.spe-ui .spe-table td{padding:var(--spe-tbl-py) 14px; text-align:right} .spe-ui .spe-table thead th{background:var(--spe-surface-2); color:var(--spe-text-2); font-weight:700; font-size:12px; border-bottom:1px solid var(--spe-border-strong)} .spe-ui .spe-table tbody tr{border-bottom:1px solid var(--spe-border)} .spe-ui .spe-table tbody tr:hover{background:var(--spe-accent-soft,#eef0fe)} .spe-ui .spe-table .num{font-variant-numeric:tabular-nums} .spe-ui .spe-table .col-act{text-align:left; white-space:nowrap} /* سبک خطوط جدول: lines(پیش‌فرض) | striped | plain */ .spe-tbl-striped .spe-ui .spe-table tbody tr:nth-child(2n),.spe-ui.spe-tbl-striped .spe-table tbody tr:nth-child(2n){background:var(--spe-surface-2)} .spe-tbl-striped .spe-ui .spe-table tbody tr,.spe-ui.spe-tbl-striped .spe-table tbody tr{border-bottom:0} .spe-tbl-plain .spe-ui .spe-table tbody tr,.spe-ui.spe-tbl-plain .spe-table tbody tr{border-bottom:0} /* ═══════════════ وضعیت / چیپ / بج نوع ═══════════════ */ .spe-ui .spe-status{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:999px; line-height:1.6} .spe-ui .spe-status .dot{width:7px; height:7px; border-radius:50%} /* مرکّبِ خوانا: رنگِ سمنتیک روی پس‌زمینهٔ نرمِ خودش کنتراستِ کافی ندارد (success ۱٫۶۴ و danger ۳٫۰۹ در برابرِ حداقلِ ۴٫۵ برای متنِ ۱۱٫۵ پیکسل). آمیختنِ ۳۵٪ رنگ با --spe-text هر چهار حالت را به بالای ۴٫۵ می‌برد و برخلافِ #b45309 و #0369a1 پیشین، رنگِ سفارشیِ مشتری را هم دنبال می‌کند. نقطهٔ رنگی (.dot) پررنگ می‌ماند تا هویتِ رنگی حفظ شود. */ .spe-ui .spe-status.is-paid{background:var(--spe-success-bg); color:color-mix(in srgb,var(--spe-success) 35%,var(--spe-text))} .spe-ui .spe-status.is-paid .dot{background:var(--spe-success,#16a34a)} .spe-ui .spe-status.is-pending{background:var(--spe-warn-bg); color:color-mix(in srgb,var(--spe-warn) 35%,var(--spe-text))} .spe-ui .spe-status.is-pending .dot{background:var(--spe-warn,#f59e0b)} .spe-ui .spe-status.is-cancel{background:var(--spe-danger-bg); color:color-mix(in srgb,var(--spe-danger) 35%,var(--spe-text))} .spe-ui .spe-status.is-cancel .dot{background:var(--spe-danger,#dc2626)} .spe-ui .spe-status.is-info{background:var(--spe-info-bg); color:color-mix(in srgb,var(--spe-info) 35%,var(--spe-text))} .spe-ui .spe-status.is-info .dot{background:var(--spe-info,#0ea5e9)} .spe-ui .spe-status.is-off{background:var(--spe-surface-2); color:var(--spe-text-2)} .spe-ui .spe-status.is-off .dot{background:var(--spe-text-3)} .spe-ui .spe-chip{display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:5px 12px; border-radius:999px; background:var(--spe-surface); border:1px solid var(--spe-border-strong); color:var(--spe-text-2); cursor:pointer} .spe-ui .spe-chip.is-active{background:var(--spe-accent,#6366f1); border-color:var(--spe-accent,#6366f1); color:#fff; font-weight:700} /* پیل اولویت (کم/عادی/فوری) — مکمل .spe-status برای سطوح اهمیت غیر مرحله‌ای */ .spe-ui .spe-priority{display:inline-flex; align-items:center; font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:6px} .spe-ui .spe-priority.is-low{background:var(--spe-surface-2); color:var(--spe-text-2)} .spe-ui .spe-priority.is-normal{background:var(--spe-info-bg); color:color-mix(in srgb,var(--spe-info) 35%,var(--spe-text))} .spe-ui .spe-priority.is-high{background:var(--spe-danger-bg); color:color-mix(in srgb,var(--spe-danger) 35%,var(--spe-text))} .spe-ui .spe-tbadge{display:inline-flex; align-items:center; font-size:11px; font-weight:700; padding:3px 10px; border-radius:6px; color:#fff} .spe-ui .spe-tbadge.t-product{background:var(--spe-type-product,#3b82f6)} /* سبزِ خدمت تیره‌تر است: --spe-text تنها ۳٫۸۷ می‌دهد، پس مرکّب یک پله تیره‌تر می‌شود تا ۴٫۷۷ شود. کلیدواژهٔ black است نه هگز، تا شمارشِ verify-css-tokens دست‌نخورده بماند. */ .spe-ui .spe-tbadge.t-service{background:var(--spe-type-service,#10b981); color:color-mix(in srgb,var(--spe-text) 80%,black)} .spe-ui .spe-tbadge.t-file{background:var(--spe-type-file,#8b5cf6)} .spe-ui .spe-tbadge.t-package{background:var(--spe-type-package,#f59e0b); color:var(--spe-text)} /* ═══════════════ فهرست (.spe-list) ═══════════════ */ .spe-ui .spe-list{display:flex; flex-direction:column; background:var(--spe-surface); border:1px solid var(--spe-border); border-radius:var(--spe-radius,12px); overflow:hidden} .spe-ui .spe-list-item{display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--spe-border)} .spe-ui .spe-list-item:last-child{border-bottom:0} .spe-ui .spe-list-item:hover{background:var(--spe-surface-2)} .spe-ui .spe-list-item .li-ic{width:38px; height:38px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; border-radius:var(--spe-radius-sm,8px); background:var(--spe-accent-soft,#eef0fe); color:var(--spe-accent,#6366f1)} .spe-ui .spe-list-item .li-ic .ic,.spe-ui .spe-list-item .li-ic svg{width:18px; height:18px} .spe-ui .spe-list-item .li-main{flex:1; min-width:0} .spe-ui .spe-list-item .li-title{font-size:13.5px; font-weight:700; margin:0; color:var(--spe-text)} .spe-ui .spe-list-item .li-meta{font-size:11.5px; color:var(--spe-text-3); margin:2px 0 0} .spe-ui .spe-list-item .li-act{flex:0 0 auto; display:flex; gap:6px; align-items:center} /* ═══════════════ کارت بخش فهرست (.spe-cat-section) + نوار ابزار (.spe-toolbar) ═══════════════ */ .spe-ui .spe-cat-section{background:var(--spe-surface); border:1px solid var(--spe-border-strong); border-radius:var(--spe-radius,12px); padding:var(--spe-space-4,16px)} .spe-ui .spe-cat-section__head{display:flex; align-items:center; justify-content:space-between; gap:var(--spe-space-3,12px); flex-wrap:wrap; margin:0 0 var(--spe-space-4,16px)} .spe-ui .spe-sec-title{margin:0; font-size:var(--spe-fs-lg,15px); font-weight:var(--spe-fw-lg,700); font-style:var(--spe-style-lg,normal); color:var(--spe-color-lg,var(--spe-text)); font-family:var(--spe-font)!important; display:flex; align-items:center; gap:8px} .spe-ui .spe-shiva-cnt{background:var(--spe-accent-soft); color:var(--spe-accent-dark); border-radius:999px; font-size:var(--spe-fs-sm,12px); font-weight:700; padding:1px 9px} .spe-ui .spe-toolbar{display:flex; gap:var(--spe-space-2,8px); flex-wrap:wrap; align-items:center; margin:0 0 var(--spe-space-4,16px)} .spe-ui .spe-toolbar .spe-select{min-width:170px; width:auto} .spe-ui .spe-toolbar .spe-input{flex:1; min-width:200px} /* ریزواکنش‌گرایی */ @media (max-width:640px){ .spe-ui .spe-form-row > *{grid-column:span 12} } /* ═══════════════ تب‌ها (.spe-tabs) ═══════════════ */ .spe-ui .spe-tabs{display:flex; flex-wrap:wrap; gap:var(--spe-space-2,8px); margin-bottom:var(--spe-space-4,16px)} .spe-ui .spe-tab{ display:inline-flex; align-items:center; gap:var(--spe-space-2,8px); padding:var(--spe-space-2,8px) var(--spe-space-4,16px); border:1px solid var(--spe-border-strong); border-radius:var(--spe-radius-sm,8px); background:var(--spe-surface); color:var(--spe-text-2); font-size:var(--spe-fs-base,13px); font-weight:600; text-decoration:none; cursor:pointer; font-family:var(--spe-font); line-height:1.4; transition:background .15s,border-color .15s,color .15s; } .spe-ui .spe-tab:hover{border-color:var(--spe-accent); color:var(--spe-text)} .spe-ui .spe-tab.is-active,.spe-ui .spe-tab.active{ background:var(--spe-accent); border-color:var(--spe-accent); color:#fff; font-weight:700; box-shadow:0 2px 8px rgba(99,102,241,.22); } .spe-ui .spe-tab-panel{display:none} .spe-ui .spe-tab-panel.is-active,.spe-ui .spe-tab-panel.active{display:block} /* ═══════════════ KPI (.spe-stat) ═══════════════ */ .spe-ui .spe-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--spe-space-3,12px); margin-bottom:var(--spe-space-4,16px)} .spe-ui .spe-stat{ background:var(--spe-surface); border:1px solid var(--spe-border); border-radius:var(--spe-radius,12px); padding:var(--spe-space-4,16px); position:relative; overflow:hidden; } .spe-ui .spe-stat::before{content:""; position:absolute; inset-block:0; inset-inline-start:0; width:5px; background:var(--spe-accent)} .spe-ui .spe-stat .num{font-size:var(--spe-fs-xl,22px); font-weight:800; font-style:var(--spe-style-xl,normal); line-height:1.2; color:var(--spe-color-xl,var(--spe-text)); font-variant-numeric:tabular-nums} .spe-ui .spe-stat .lbl{font-size:var(--spe-fs-sm,12px); font-weight:var(--spe-fw-sm,400); font-style:var(--spe-style-sm,normal); color:var(--spe-color-sm,var(--spe-text-2)); margin-top:3px} .spe-ui .spe-stat.is-success::before{background:var(--spe-success)} .spe-ui .spe-stat.is-success .num{color:var(--spe-success)} .spe-ui .spe-stat.is-warn::before{background:var(--spe-warn)} .spe-ui .spe-stat.is-info::before{background:var(--spe-info)} /* ═══════════════ حالت خالی (.spe-empty) ═══════════════ */ .spe-ui .spe-empty{ text-align:center; padding:var(--spe-space-8,32px) var(--spe-space-5,20px); background:var(--spe-surface); border:1px dashed var(--spe-border-strong); border-radius:var(--spe-radius,12px); color:var(--spe-text-2); } .spe-ui .spe-empty .spe-empty-title{font-size:var(--spe-fs-md,15px); font-weight:var(--spe-fw-md,700); font-style:var(--spe-style-md,normal); color:var(--spe-color-md,var(--spe-text)); margin:0 0 var(--spe-space-1,4px)} .spe-ui .spe-empty .spe-empty-sub{font-size:var(--spe-fs-sm,12px); font-weight:var(--spe-fw-sm,400); font-style:var(--spe-style-sm,normal); color:var(--spe-color-sm,var(--spe-text-2)); margin:0 0 var(--spe-space-4,16px)} .spe-ui .spe-empty .spe-empty-ico{width:48px; height:48px; margin:0 auto var(--spe-space-2,8px); color:var(--spe-text-3)} /* ═══════════════ Toast (.spe-toast-area / .spe-toast) ═══════════════ */ .spe-toast-area{ position:fixed; inset-block-end:var(--spe-space-5,20px); inset-inline-start:var(--spe-space-5,20px); display:flex; flex-direction:column; gap:var(--spe-space-2,8px); z-index:100001; pointer-events:none; } .spe-toast-area .spe-toast{pointer-events:auto} .spe-toast-area .spe-toast{ display:flex; align-items:center; gap:var(--spe-space-2,8px); background:var(--spe-text); color:#fff; padding:var(--spe-space-3,12px) var(--spe-space-4,16px); border-radius:var(--spe-radius-sm,8px); box-shadow:var(--spe-shadow-pop); font-size:var(--spe-fs-base,13px); font-family:var(--spe-font); } .spe-toast-area .spe-toast.is-success{background:var(--spe-success); color:var(--spe-text)} .spe-toast-area .spe-toast.is-danger{background:var(--spe-danger)} .spe-toast-area .spe-toast.is-info{background:var(--spe-info); color:var(--spe-text)} .spe-toast-area .spe-toast-undo{ background:rgba(255,255,255,.2); border:0; color:#fff; border-radius:var(--spe-radius-sm,8px); padding:2px 10px; cursor:pointer; font:inherit; margin-inline-start:auto; } /* ═══════════════ مودال (.spe-overlay / .spe-modal) ═══════════════ */ /* هم descendant (.spe-ui .spe-overlay) و هم همان گره (.spe-ui.spe-overlay) — مودال‌های ریشه‌ای بیرون wrap */ .spe-ui .spe-overlay, .spe-ui.spe-overlay{ position:fixed; inset:0; background:rgba(12,12,12,.45); display:flex; align-items:center; justify-content:center; z-index:100000; padding:var(--spe-space-4,16px); } /* display:flex بالا ویژگی HTML [hidden] را خنثی می‌کند — بدون این، کشو/مودال هنگام لود صفحه باز می‌ماند */ .spe-ui .spe-overlay[hidden], .spe-ui.spe-overlay[hidden]{ display:none !important; } .spe-ui .spe-modal{ background:var(--spe-surface); border-radius:var(--spe-radius-lg,16px); width:min(560px,100%); max-height:90vh; overflow:auto; box-shadow:var(--spe-shadow-pop); } .spe-ui .spe-modal-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--spe-space-3,12px); padding:var(--spe-space-4,16px) var(--spe-space-5,20px); border-bottom:1px solid var(--spe-border); } .spe-ui .spe-modal-head h3{margin:0; font-size:var(--spe-fs-md,15px); font-weight:var(--spe-fw-md,700); font-style:var(--spe-style-md,normal); color:var(--spe-color-md,var(--spe-text)); font-family:var(--spe-font)} .spe-ui .spe-modal-x{border:0; background:none; font-size:18px; cursor:pointer; color:var(--spe-text-2); line-height:1} .spe-ui .spe-modal-body{padding:var(--spe-space-5,20px)} .spe-ui .spe-modal-foot{ display:flex; gap:var(--spe-space-2,8px); justify-content:flex-start; padding:var(--spe-space-4,16px) var(--spe-space-5,20px); border-top:1px solid var(--spe-border); } /* ── مودال تب‌بندی‌شده (.spe-modal.is-tabbed) — هد/تب/فوتر ثابت، فقط پنل‌ها اسکرول می‌خورند ── */ .spe-ui .spe-modal.is-tabbed{ width:min(720px,100%); max-height:min(88vh,760px); display:flex; flex-direction:column; overflow:hidden; } .spe-ui .spe-modal-tabbed-body{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:hidden; } .spe-ui .spe-modal-tabbed-body > .spe-tabs{ flex:0 0 auto; margin:0; padding:var(--spe-space-3,12px) var(--spe-space-5,20px) 0; border-bottom:1px solid var(--spe-border); flex-wrap:nowrap; overflow-x:auto; } .spe-ui .spe-modal-tabbed-body > .spe-tabs .spe-tab-btn{border-radius:9px 9px 0 0; margin-bottom:-1px; white-space:nowrap} .spe-ui .spe-modal-panels{flex:1 1 auto; min-height:0; overflow:auto; padding:var(--spe-space-5,20px)} .spe-ui .spe-modal-panels .spe-tab-content{display:none; flex-direction:column; gap:var(--spe-space-4,16px)} .spe-ui .spe-modal-panels .spe-tab-content.active{display:flex} /* ═══════════════ کشو (.spe-drawer) ═══════════════ */ .spe-ui .spe-drawer{ position:fixed; inset-block:0; inset-inline-end:0; width:min(440px,100%); background:var(--spe-surface); box-shadow:var(--spe-shadow-pop); overflow:auto; z-index:100000; } .spe-ui .spe-drawer-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--spe-space-3,12px); padding:var(--spe-space-4,16px) var(--spe-space-5,20px); border-bottom:1px solid var(--spe-border); position:sticky; top:0; background:var(--spe-surface); z-index:1; } .spe-ui .spe-drawer-head h3{margin:0; font-size:var(--spe-fs-md,15px); font-weight:var(--spe-fw-md,700); font-style:var(--spe-style-md,normal); color:var(--spe-color-md,var(--spe-text)); font-family:var(--spe-font)} .spe-ui .spe-drawer-body{padding:var(--spe-space-5,20px)} .spe-ui .spe-drawer-foot{ display:flex; gap:var(--spe-space-2,8px); justify-content:flex-start; padding:var(--spe-space-4,16px) var(--spe-space-5,20px); border-top:1px solid var(--spe-border); position:sticky; bottom:0; background:var(--spe-surface); } /* ═══════════════ اکشن‌های فرم ═══════════════ */ .spe-ui .spe-form-actions{display:flex; flex-wrap:wrap; gap:var(--spe-space-2,8px); align-items:center; margin-top:var(--spe-space-2,8px)} /* ═══════════════ کانبان مشترک (.spe-kanban) — مینیمال ═══════════════ */ .spe-kanban { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; font-family: var(--spe-font); } .spe-kb-col { flex: 0 0 188px; background: var(--spe-surface-2); border-radius: 8px; padding: 6px; } .spe-kb-col-head { padding: 7px 8px; margin: -6px -6px 6px; border-radius: 8px 8px 0 0; color: var(--spe-surface, #fff); background: var(--col-color, var(--spe-accent)); display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 11px; font-weight: 600; line-height: 1.3; } .spe-kb-col-head .name { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .spe-kb-col-head .meta, .spe-kb-col-head .spe-kb-count { font-size: 10px; font-weight: 500; opacity: .88; flex-shrink: 0; } .spe-kb-list { min-height: 48px; display: flex; flex-direction: column; gap: 5px; } .spe-kb-list.over { background: color-mix(in srgb, var(--spe-info) 6%, transparent); border-radius: 6px; } .spe-kb-list.is-empty::before { content: attr(data-empty-msg, 'موردی نیست'); display: block; color: var(--spe-text-3); font-size: 10px; text-align: center; padding: 12px 4px; } .spe-kb-card, .spe-pkb-card, .spe-tk-kb-card { display: flex; flex-direction: column; gap: 3px; background: var(--spe-surface); border: 1px solid var(--spe-border); border-radius: 6px; padding: 7px 8px; cursor: pointer; box-shadow: none; font-size: 11px; line-height: 1.4; } .spe-kb-card.dragging, .spe-pkb-card.dragging, .spe-tk-kb-card.dragging { opacity: .55; } .spe-kb-card-title, .spe-pkb-card-title, .spe-tk-kb-card-subject { font-size: 12px; font-weight: 600; color: var(--spe-text); margin: 0; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .spe-kb-card-meta { color: var(--spe-text-3); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .spe-kb-card-meta.is-warn { color: var(--spe-danger); } .spe-kanban .spe-kb-card-contact, .spe-kanban .spe-kb-card-foot, .spe-kanban .spe-tk-kb-card-preview, .spe-kanban .spe-tk-kb-card-dep, .spe-kanban .spe-pkb-card-prog { display: none; } /* برچسب روی کارتِ کاریز دیده می‌شود — پیش‌تر پنهان بود چون چیزی رندر نمی‌شد. اندازهٔ فشرده تا تراکمِ کارت به‌هم نخورد. */ .spe-kanban .spe-kb-card-tags { margin-top: 4px; } .spe-kanban .spe-kb-card-tags .spe-tag-badge { font-size: 10px; padding: 0 6px; max-width: 100%; } .spe-kb-card-time { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; padding-top: 4px; border-top: 1px solid color-mix(in srgb, var(--spe-border) 70%, transparent); font-size: 10px; } .spe-kb-chip { display: inline-block; padding: 0 5px; border-radius: 4px; font-weight: 500; font-size: 9px; line-height: 1.6; background: color-mix(in srgb, var(--chip-color, var(--spe-accent)) 10%, transparent); color: var(--chip-color, var(--spe-text-2)); } .spe-kb-date { color: var(--spe-text-3); font-size: 9px; direction: ltr; text-align: left; flex: 0 0 auto; } .spe-kb-card-tags { display: flex; flex-wrap: wrap; gap: 3px; } .spe-kb-tag { font-size: 9px; padding: 0 5px; border-radius: 4px; background: var(--spe-surface-2); color: var(--spe-text-2); border: none; } .spe-kb-tag-more { opacity: .7; } .spe-tk-kb-card-head { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin: 0; } .spe-tk-kb-card-num { font-size: 10px; font-weight: 500; color: var(--spe-text-3); text-decoration: none; } .spe-tk-kb-card-customer { font-size: 10px; color: var(--spe-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .spe-tk-kb-card-customer strong { font-weight: 500; } .spe-kb-status-colors { display: grid; /* ۲۸۰px نه ۲۰۰: کنترل مشترکِ رنگ سه جزء دارد (سواچ + کدِ رنگ + پاک‌کردن)، نه یک مربعِ ۲.۵rem. با ۲۰۰px جعبهٔ کدِ رنگ له می‌شد. */ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--spe-space-3, 12px); margin: var(--spe-space-3, 12px) 0; } .spe-kb-status-colors label, .spe-kb-status-colors .spe-kb-status-color { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; } /* رنگ وضعیت — کنترل مشترک SpePicker (هرگز input[type=color]). هر سلول: سواچ + کدِ رنگ + پاک‌کردن، و بعد برچسبِ وضعیت. */ .spe-kb-status-colors .spe-color-field { flex: 1 1 auto; min-width: 0; } .spe-kb-status-colors .eb-color-w { display: flex; align-items: center; gap: var(--spe-space-2, 8px); width: 100%; } .spe-kb-status-colors .eb-color-w .eb-color-sw, .spe-kb-status-colors .eb-color-w .eb-ic { box-sizing: border-box; width: 32px; height: 32px; flex: 0 0 auto; border-radius: var(--spe-radius-sm, 6px); border: 1px solid var(--spe-border); } .spe-kb-status-colors .eb-color-w input.eb-color-hx { box-sizing: border-box; flex: 1 1 auto; width: auto; min-width: 0; height: 32px; padding: 0 8px; direction: ltr; text-align: left; } /* فلش‌های RTL-safe — جایگزین ‹› که در bidi فارسی/لاتین معکوس می‌شوند */ .spe-chevron, .spe-flow-sep, .spe-bc-sep { direction: ltr; unicode-bidi: isolate; display: inline-block; font-weight: 700; line-height: 1; } /* ═══════════════ تب‌های سراسری فرم‌ها (body.spe-app) ═══════════════ منبع واحد بصری — nav-tab، spe-tab-btn، spe-subtabs و زیرناوبری هاب‌ها. */ body.spe-app:not(.spe-builder-hub) :is( .spe-tabs, .nav-tab-wrapper, h2.nav-tab-wrapper, .spe-tabs-nav, .spe-subtabs, .spe-config-sub, .spe-shop-sub, .spe-ops-sub, .spe-delivery-sub, .spe-retain-sub, .spe-retain-kb-subnav .spe-retain-sub, .spe-task-tabs, .spe-deals-view-tabs, .spe-deals-mode-seg ) { display: flex; flex-wrap: wrap; gap: var(--spe-space-2, 8px); margin: 0 0 var(--spe-space-4, 16px); padding: 0; border: none; border-bottom: none; line-height: inherit; font-size: inherit; font-weight: inherit; overflow-x: auto; } body.spe-app:not(.spe-builder-hub) :is( .spe-tab, .spe-tab-btn, .nav-tab, .spe-subtabs a, .spe-config-sub a, .spe-shop-sub a, .spe-ops-sub a, .spe-delivery-sub a, .spe-retain-sub a, .spe-task-tab, .spe-deals-view-tabs a, .spe-deals-mode-seg .spe-tab-btn ) { display: inline-flex; align-items: center; gap: var(--spe-space-2, 8px); padding: var(--spe-space-2, 8px) var(--spe-space-4, 16px); border: 1px solid var(--spe-border-strong, #c3c4c7); border-radius: var(--spe-radius-sm, 8px); background: var(--spe-surface, #fff); color: var(--spe-text-2, #5f6368); font-family: var(--spe-font) !important; font-size: var(--spe-fs-base, 13px); font-weight: 600; line-height: 1.4; text-decoration: none; cursor: pointer; white-space: nowrap; float: none; margin: 0; box-shadow: none; transition: background .15s, border-color .15s, color .15s; } body.spe-app:not(.spe-builder-hub) :is( .spe-tab:hover, .spe-tab-btn:hover, .nav-tab:hover, .spe-subtabs a:hover, .spe-config-sub a:not(.on):hover, .spe-shop-sub a:not(.on):hover, .spe-ops-sub a:not(.on):hover, .spe-delivery-sub a:not(.on):hover, .spe-retain-sub a:not(.on):hover, .spe-task-tab:not(.on):hover, .spe-deals-view-tabs a:not(.active):hover, .spe-deals-mode-seg .spe-tab-btn:not(.active):hover ) { border-color: var(--spe-accent, #6366f1); color: var(--spe-text, #0c0c0c); background: var(--spe-surface, #fff); transform: none; } body.spe-app:not(.spe-builder-hub) :is( .spe-tab.is-active, .spe-tab.active, .spe-tab-btn.active, .nav-tab.nav-tab-active, .nav-tab-active, .spe-subtabs a.active, .spe-subtabs a.on, .spe-config-sub a.on, .spe-shop-sub a.on, .spe-ops-sub a.on, .spe-delivery-sub a.on, .spe-retain-sub a.on, .spe-task-tab.on, .spe-deals-view-tabs a.active ) { background: var(--spe-accent, #6366f1); border-color: var(--spe-accent, #6366f1); color: #fff; font-weight: 700; box-shadow: 0 2px 8px color-mix(in srgb, var(--spe-accent, #6366f1) 22%, transparent); } body.spe-app:not(.spe-builder-hub) :is( .spe-tab-panel, .spe-tab-content, .spe-cat-panel ) { display: none; } body.spe-app:not(.spe-builder-hub) :is( .spe-tab-panel.is-active, .spe-tab-panel.active, .spe-tab-content.active, .spe-cat-panel.active ) { display: block; } /* غلبه بر nav-tab پیش‌فرض وردپرس */ body.spe-app .nav-tab-wrapper .nav-tab { float: none; margin: 0; border-bottom: 1px solid var(--spe-border-strong, #c3c4c7); } body.spe-app .nav-tab-wrapper .nav-tab-active, body.spe-app .nav-tab-wrapper .nav-tab.nav-tab-active { background: var(--spe-accent, #6366f1) !important; border-color: var(--spe-accent, #6366f1) !important; color: #fff !important; } /* فروشگاه‌ساز (bzb-wrap): تب‌های داخلی استایل underline خود را دارند — در قوانین pill سراسری بالا نیستند */ body.spe-app .bzb-wrap .bzb-tabs { display: flex; flex-wrap: nowrap; gap: 5px; margin: 0 0 20px; padding: 0; border: none; border-bottom: 2px solid #e2e8f0; overflow-x: auto; scrollbar-width: none; } body.spe-app .bzb-wrap .bzb-tabs .bzb-tab { display: flex; align-items: center; gap: 5px; padding: 10px 14px; border: none; border-bottom: 2.5px solid transparent; border-radius: 0; margin: 0 0 -2px; background: transparent; box-shadow: none; color: #64748b; font-family: var(--spe-font) !important; font-size: 13px; font-weight: 600; white-space: nowrap; } body.spe-app .bzb-wrap .bzb-tabs .bzb-tab:hover { color: #185FA5; background: transparent; border-color: transparent; transform: none; } body.spe-app .bzb-wrap .bzb-tabs .bzb-tab.active { color: #185FA5; background: transparent; border-bottom-color: #185FA5; box-shadow: none; font-weight: 600; } /* ── فیلد عددی کوتاه + چیپ واحد (.spe-num-unit) ───────────────────────────── برای درصد/موجودی/وزن و هر عدد کوچک: ورودی هم‌اندازهٔ محتوا + واحد چسبیده. جایگزین ورودی تمام‌عرض برای اعداد دو-سه‌رقمی. */ .spe-ui .spe-num-unit{ display:inline-flex; align-items:stretch; height:var(--spe-field-h,40px); border:1px solid var(--spe-border-strong); border-radius:var(--spe-radius-sm); overflow:hidden; background:var(--spe-surface); } .spe-ui .spe-num-unit .spe-input{ width:6rem; height:100%; border:0; border-radius:0; box-shadow:none; text-align:center; direction:ltr; background:transparent; } .spe-ui .spe-num-unit .spe-input:focus{ outline:none; background:var(--spe-accent-soft); } .spe-ui .spe-num-unit-suffix{ display:inline-flex; align-items:center; padding:0 var(--spe-space-2,8px); background:var(--spe-surface-3); color:var(--spe-text-2); font-size:var(--spe-fs-xs,12px); border-inline-start:1px solid var(--spe-border); white-space:nowrap; }