/* بازطراحی بصری دیالوگ «قالب جدید/ویرایش قالب» (/oa/performance/templates) طبق پروژه‌ی
   Claude Design «Nocturne» — فقط پوسته‌ی MudBlazor عوض شده، هیچ منطق/binding‌ای دست نخورده.

   چرا یک فایل global (نه .razor.css اسکوپ‌شده): MudDialog از طریق MudDialogProvider مشترک در ریشه‌ی
   کل برنامه رندر می‌شود (نگاه کنید Routes.razor)، نه داخل درخت رندرشده‌ی PerfTemplates.razor خودش —
   یعنی اسکوپ Blazor (b-xxxxxx) که .razor.css تولید می‌کند هرگز به عنصر واقعی دیالوگ نمی‌رسد (تست شد،
   getAttribute روی خودِ .mud-dialog همیشه null برمی‌گرداند). این فایل مثل company-selection.css یک
   استایل سراسری است، فقط با کلاس pt-editor محدود می‌شود که تنها روی همین یک MudDialog گذاشته شده.

   توکن‌های زیر محلی به همین دیالوگ‌اند (نه بازنویسی تم سراسری برنامه) و بین روشن/تیره طبق کانونشن
   این ریپو سوییچ می‌شوند: html[data-theme] هم برای صفحات معمولی (AfrandehTheme.apply) و
   html.mud-theme-* هم برای پوشش MudThemeProvider. */

.pt-editor {
    --pt-radius-sm: 4px;
    --pt-radius-md: 8px;
    --pt-radius-lg: 14px;
    --pt-space-2: 6px;
    --pt-space-3: 8px;
    --pt-space-4: 11px;
    --pt-space-6: 17px;

    /* پیش‌فرض: تم روشن (کرم/شنی با اکسنت نارنجی‌سوخته) — دقیقاً طبق اسکرین‌شات‌های ارسالی */
    --pt-surface: #f5ecdc;
    --pt-surface-soft: color-mix(in srgb, #f5ecdc 55%, transparent);
    --pt-text: #2f2a24;
    --pt-divider: color-mix(in srgb, #2f2a24 22%, transparent);
    --pt-accent: #c4651f;
    --pt-tint: #f6e9d4;
    --pt-tint-ink: #a9541a;
    --pt-ok-bg: #e0e7d4;
    --pt-ok-ink: #4d6b39;
    --pt-warn-bg: #f6e5e1;
    --pt-warn-ink: #b1503f;
    --pt-shadow-sm: 0 0 0 1px #d8c6a8;
    --pt-shadow-md: 0 0 0 1px #d8c6a8, 0 6px 18px rgba(47, 42, 36, 0.12);

    background: var(--pt-surface) !important;
    color: var(--pt-text);
    font-family: "Vazirmatn", var(--mud-typography-default-family, sans-serif);
}

html[data-theme="dark"] .pt-editor,
html.mud-theme-dark .pt-editor {
    --pt-surface: #232532;
    --pt-surface-soft: color-mix(in srgb, #232532 55%, transparent);
    --pt-text: #e9e9ed;
    --pt-divider: color-mix(in srgb, #e9e9ed 16%, transparent);
    --pt-accent: #9184d9;
    --pt-tint: #2b2741;
    --pt-tint-ink: #d2cefd;
    --pt-ok-bg: #2b2741;
    --pt-ok-ink: #d2cefd;
    --pt-warn-bg: #3a2c1c;
    --pt-warn-ink: #d68a45;
    --pt-shadow-sm: 0 0 0 1px #3f424d;
    --pt-shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0, 0, 0, 0.55);
}

.pt-editor .mud-dialog-title,
.pt-editor .mud-dialog-content,
.pt-editor .mud-dialog-actions {
    background: transparent;
    color: var(--pt-text);
}

/* — هدر دیالوگ: بج آیکن گرد + عنوان + خط‌جداکننده‌ی محوشونده — */
.pt-editor .pt-header {
    display: flex;
    align-items: center;
    gap: var(--pt-space-3);
    margin-bottom: var(--pt-space-2);
}

.pt-editor .pt-header-rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(to left, transparent, var(--pt-divider) 32px, var(--pt-divider) calc(100% - 32px), transparent);
}

/* — بخش هر دسته (تخصصی/رفتاری/مدیریتی) — */
.pt-editor .pt-section {
    display: flex;
    flex-direction: column;
    gap: var(--pt-space-4);
    background: var(--pt-surface-soft);
    border-radius: var(--pt-radius-lg);
    box-shadow: var(--pt-shadow-sm);
    padding: var(--pt-space-6);
    margin-bottom: var(--pt-space-4);
}

.pt-editor .pt-section-head {
    display: flex;
    align-items: flex-end;
    gap: var(--pt-space-4);
    flex-wrap: wrap;
}

.pt-editor .pt-badge {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: var(--pt-radius-sm);
    background: var(--pt-tint);
    color: var(--pt-tint-ink);
}

.pt-editor .pt-badge .mud-icon-root {
    color: var(--pt-tint-ink);
}

.pt-editor .pt-section-weight {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-size: 12px;
    color: color-mix(in srgb, var(--pt-text) 60%, transparent);
}

.pt-editor .pt-section-weight .pt-tick {
    width: 2px;
    height: 11px;
    border-radius: 1px;
    background: var(--pt-accent);
}

.pt-editor .pt-target-field {
    margin-inline-start: auto;
    width: 104px;
}

/* — کارت هر ردیف شاخص — */
.pt-editor .pt-item-card {
    display: flex;
    flex-direction: column;
    gap: var(--pt-space-3);
    background: var(--pt-surface);
    border-radius: var(--pt-radius-md);
    box-shadow: var(--pt-shadow-sm);
    padding: var(--pt-space-4);
    margin-bottom: var(--pt-space-3);
}

/* — نوار پایین (جمع درصد + انصراف/ذخیره) — */
.pt-editor .pt-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pt-space-4);
    margin-top: var(--pt-space-2);
    padding: var(--pt-space-3) 0;
}

.pt-editor .pt-footer .mud-alert {
    flex: 1;
    min-width: 280px;
    border-radius: var(--pt-radius-md);
    box-shadow: var(--pt-shadow-sm);
}

.pt-editor .pt-footer .mud-alert.mud-alert-filled-success,
.pt-editor .pt-footer .mud-alert.mud-alert-success {
    background-color: var(--pt-ok-bg) !important;
    color: var(--pt-ok-ink) !important;
}

.pt-editor .pt-footer .mud-alert.mud-alert-filled-warning,
.pt-editor .pt-footer .mud-alert.mud-alert-warning {
    background-color: var(--pt-warn-bg) !important;
    color: var(--pt-warn-ink) !important;
}

/* — دکمه‌های متنی (افزودن شاخص/بازه) با رنگ اکسنت محلی — */
.pt-editor .pt-ghost-btn {
    color: var(--pt-accent) !important;
}

/* — ورودی‌ها: radius/border مسطح‌تر، هماهنگ با کارت‌ها — */
.pt-editor .mud-input-outlined-border,
.pt-editor .mud-select-input.mud-input-outlined-border {
    border-radius: var(--pt-radius-md) !important;
    border-color: var(--pt-divider) !important;
}