/* ===================================================================
   Zana.Blazor — سیستم طراحی (UI-DESIGN) — متراکم، صفحه‌کلیدمحور، دوجهته
   همه رنگ‌ها و اندازه‌ها توکن هستند؛ در صفحات رنگ hard-code ممنوع.
   =================================================================== */

/* ---------- فونت محلی (OFL — wwwroot/fonts/Vazirmatn-OFL.txt) ---------- */
@font-face { font-family: "Vazirmatn"; src: url("../fonts/Vazirmatn-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("../fonts/Vazirmatn-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("../fonts/Vazirmatn-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* ---------- توکن‌ها: روشن ---------- */
:root {
    --c-primary: #1F4E79;
    --c-primary-fg: #FFFFFF;
    --c-accent: #B8860B;
    --c-accent-fg: #1B1F24;
    --c-on-hero: #FFFFFF; --c-hero-dark: #0B1220;   /* سربرگ رنگی ماژول/میز کار (Z3c): متن روی رنگ ماژول و رنگ تیره ته گرادیان */
    --hero-a: 80%; --hero-b: 50%;                    /* سهم رنگ ماژول در دو سر گرادیان (تیره: کم‌رنگ‌تر) */
    --c-bg: #ECEFF3;
    --c-surface: #FFFFFF;
    --c-surface-2: #F5F7FA;
    --c-border: #C9D1DA;
    --c-text: #1B1F24;
    --c-muted: #5E6B78;
    --c-in: #1E7B34;
    --c-in-soft: #E6F2E9;
    --c-out: #B3261E;
    --c-out-soft: #F8E7E6;
    --c-warn: #C77700;
    --c-warn-soft: #FBEFD9;
    --c-info: #1565C0;
    --c-info-soft: #E3EEFA;
    --c-header: #1F4E79;
    --c-header-fg: #FFFFFF;
    --c-header-muted: #BFD0E2;
    --c-hover: #E4EAF1;
    --c-select: #D6E4F2;
    --c-focus: #1565C0;
    --c-shadow: rgba(20, 30, 45, .18);
    --c-backdrop: rgba(10, 15, 25, .35);
    /* فرم: برچسب و فیلد باید در نگاه اول از هم جدا دیده شوند (اصلاحات UI ۱۴۰۵/۰۷/۱۸) */
    --c-label: #2F3B48;
    --c-input-bg: #FFFFFF;
    /* زمینه فیلد فوکوس‌شده (خواسته کاربر ۱۴۰۵/۰۸/۰۱: «کنترل فکوس شده رنگ زمینه‌اش یکم تغییر کند؛ تم روز و شب به هم نخورد») */
    --c-input-bg-focus: #EEF5FD;
    --c-input-border: #A7B2BF;
    --c-input-border-hover: #7D8A98;

    /* پالت کاشی‌های صفحه شروع (هر گروه منو یک رنگ) */
    --c-tile-1: #2B6CB0; --c-tile-2: #2F855A; --c-tile-3: #B7791F; --c-tile-4: #6B46C1; --c-tile-5: #0E7C86;
    --c-tile-6: #C05621; --c-tile-7: #1F4E79; --c-tile-8: #B83280; --c-tile-9: #4A5568; --c-tile-10: #9B2C2C;
    --c-hero-1: #1F4E79; --c-hero-2: #2B6CB0; --c-hero-fg: #FFFFFF;

    --font: "Vazirmatn", Tahoma, "Segoe UI", sans-serif;
    --fs: 13px;
    --fs-grid: 12.5px;
    --fs-small: 11.5px;
    --fs-title: 16px;
    --row: 26px;
    --field: 28px;
    --pad-x: 6px;
    --radius: 3px;
    --pair-gap: 28px;      /* فاصله یک جفت برچسب+فیلد تا جفت بعدی در FormGrid */
    --label-gap: 8px;      /* فاصله برچسب تا فیلد خودش */
    --form-max: 1200px;    /* سقف عرض FormGrid یک/دوستونه تا در تب پهن کش نیاید */
    --form-max-3: 1560px;
    color-scheme: light;
}

/* ---------- توکن‌ها: تیره (سیستم یا انتخاب کاربر) ---------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --c-primary: #6FA8DC; --c-primary-fg: #0E1620; --c-accent: #E0B84F;
        --c-bg: #15181C; --c-surface: #1F2329; --c-surface-2: #252A31; --c-border: #343A42;
        --c-text: #E6E9ED; --c-muted: #9AA5B1;
        --c-in: #4CC26A; --c-in-soft: #1C2E22; --c-out: #F07167; --c-out-soft: #33201F;
        --c-warn: #E9A23B; --c-warn-soft: #33281A; --c-info: #6FA8DC; --c-info-soft: #1C2836;
        --c-header: #191D22; --c-header-fg: #E6E9ED; --c-header-muted: #8C98A6;
        --c-hover: #2A3038; --c-select: #24364A; --c-focus: #6FA8DC; --c-shadow: rgba(0, 0, 0, .5);
        --c-backdrop: rgba(0, 0, 0, .55);
        --c-label: #C3CCD6; --c-input-bg: #181B20; --c-input-bg-focus: #1C2633; --c-input-border: #4B535E; --c-input-border-hover: #6B7480;
        --c-tile-1: #63A4E8; --c-tile-2: #5CC48A; --c-tile-3: #E0B84F; --c-tile-4: #A78BFA; --c-tile-5: #4FD1C5;
        --c-tile-6: #F6A05A; --c-tile-7: #6FA8DC; --c-tile-8: #F17FB8; --c-tile-9: #A0AEC0; --c-tile-10: #F08080;
        --c-hero-1: #16273A; --c-hero-2: #1F3A57; --c-hero-fg: #E6E9ED;
        --hero-a: 50%; --hero-b: 26%;
        color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --c-primary: #6FA8DC; --c-primary-fg: #0E1620; --c-accent: #E0B84F;
    --c-bg: #15181C; --c-surface: #1F2329; --c-surface-2: #252A31; --c-border: #343A42;
    --c-text: #E6E9ED; --c-muted: #9AA5B1;
    --c-in: #4CC26A; --c-in-soft: #1C2E22; --c-out: #F07167; --c-out-soft: #33201F;
    --c-warn: #E9A23B; --c-warn-soft: #33281A; --c-info: #6FA8DC; --c-info-soft: #1C2836;
    --c-header: #191D22; --c-header-fg: #E6E9ED; --c-header-muted: #8C98A6;
    --c-hover: #2A3038; --c-select: #24364A; --c-focus: #6FA8DC; --c-shadow: rgba(0, 0, 0, .5);
    --c-backdrop: rgba(0, 0, 0, .55);
    --c-label: #C3CCD6; --c-input-bg: #181B20; --c-input-bg-focus: #1C2633; --c-input-border: #4B535E; --c-input-border-hover: #6B7480;
    --c-tile-1: #63A4E8; --c-tile-2: #5CC48A; --c-tile-3: #E0B84F; --c-tile-4: #A78BFA; --c-tile-5: #4FD1C5;
    --c-tile-6: #F6A05A; --c-tile-7: #6FA8DC; --c-tile-8: #F17FB8; --c-tile-9: #A0AEC0; --c-tile-10: #F08080;
    --c-hero-1: #16273A; --c-hero-2: #1F3A57; --c-hero-fg: #E6E9ED;
    --hero-a: 50%; --hero-b: 26%;
    color-scheme: dark;
}
:root[data-font="tahoma"] { --font: Tahoma, "Segoe UI", sans-serif; }

/* ---------- پایه ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    background: var(--c-bg);
    color: var(--c-text);
    font: 400 var(--fs)/1.5 var(--font);
    -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -1px; }
[hidden] { display: none !important; }

.p-num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.p-muted { color: var(--c-muted); }
.p-in { color: var(--c-in); }
.p-out { color: var(--c-out); }
.p-neg { color: var(--c-out); }
.p-kbd {
    display: inline-block; font-size: 10.5px; line-height: 1.3; border: 1px solid currentColor;
    border-radius: 3px; padding: 0 4px; opacity: .75; direction: ltr; unicode-bidi: isolate; white-space: nowrap;
}

/* ---------- دکمه ---------- */
.p-btn {
    height: var(--field); padding-inline: 10px; border: 1px solid var(--c-border); border-radius: var(--radius);
    background: var(--c-surface); cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    white-space: nowrap; user-select: none;
}
.p-btn:hover:not(:disabled) { background: var(--c-hover); }
.p-btn--primary {
    background: linear-gradient(180deg, color-mix(in srgb, var(--c-primary) 86%, #fff) 0%, var(--c-primary) 100%);
    border-color: var(--c-primary); color: var(--c-primary-fg);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--c-primary) 35%, transparent);
}
.p-btn--primary:hover:not(:disabled) {
    /* ویژگی برابر با .p-btn:hover و بعد از آن: زمینه روشن عمومی hover روی دکمه اصلی نمی‌نشیند */
    background: linear-gradient(180deg, color-mix(in srgb, var(--c-primary) 78%, #fff) 0%, color-mix(in srgb, var(--c-primary) 92%, #000) 100%);
    border-color: color-mix(in srgb, var(--c-primary) 85%, #000); color: var(--c-primary-fg);
}
.p-btn--primary:active:not(:disabled) { background: color-mix(in srgb, var(--c-primary) 85%, #000); }
.p-btn--danger { background: var(--c-out); border-color: var(--c-out); color: #fff; }
.p-btn--danger:hover:not(:disabled) { background: var(--c-out); filter: brightness(1.08); }
.p-btn--ghost { border-color: transparent; background: transparent; }
.p-btn--small { height: 22px; padding-inline: 6px; font-size: var(--fs-small); }
.p-btn:disabled { opacity: .45; cursor: not-allowed; }
.p-btn svg { width: 14px; height: 14px; flex: none; }
.p-btn__spin {
    width: 12px; height: 12px; border: 2px solid currentColor; border-inline-end-color: transparent;
    border-radius: 50%; animation: p-spin .7s linear infinite;
}
@keyframes p-spin { to { transform: rotate(360deg); } }

/* ---------- فیلدها ---------- */
.p-field { display: flex; align-items: center; gap: 8px; min-width: 0; }
.p-field--stacked { flex-direction: column; align-items: stretch; gap: 2px; }
.p-label { color: var(--c-label); font-weight: 500; white-space: nowrap; }
.p-label--required::after { content: " *"; color: var(--c-out); }
.p-control { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.p-msg { color: var(--c-out); font-size: var(--fs-small); line-height: 1.3; }
.p-hint { color: var(--c-muted); font-size: var(--fs-small); line-height: 1.3; }
/* توضیح فیلد: پیش‌فرض پنهان؛ با کلیک روی «i» یا تنظیم کاربر «نمایش توضیح فیلدها» (data-field-hints) دیده می‌شود */
.p-hint--field { display: none; }
.p-hint--field.p-hint--open, :root[data-field-hints="on"] .p-hint--field { display: block; }
.p-hint-tip {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 1.15em; height: 1.15em; margin-inline-start: 5px; vertical-align: middle;
    border: 1px solid currentColor; border-radius: 50%; color: var(--c-muted);
    font: italic 600 .78em/1 Georgia, "Times New Roman", serif; cursor: help; user-select: none; opacity: .75;
}
.p-hint-tip:hover, .p-hint-tip--on { color: var(--c-info); opacity: 1; }
:root[data-field-hints="on"] .p-hint-tip { display: none; }
.p-control-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.p-control-row__main { flex: 1; min-width: 0; }
/* چک‌باکس بی‌برچسب: نشانگر درست کنار متن چک‌باکس، نه انتهای ردیف */
.p-control-row__main:has(> .p-check) { flex: 0 1 auto; }

.p-input {
    height: var(--field); width: 100%; min-width: 0; border: 1px solid var(--c-input-border); border-radius: var(--radius);
    background: var(--c-input-bg); padding-inline: var(--pad-x);
    box-shadow: inset 0 1px 2px color-mix(in srgb, var(--c-shadow) 45%, transparent);
    transition: border-color .12s ease;
}
.p-input:hover:not(:disabled):not([readonly]):not(:focus) { border-color: var(--c-input-border-hover); }
.p-input:focus { outline: none; border-color: var(--c-focus); box-shadow: 0 0 0 1px var(--c-focus), 0 0 0 4px color-mix(in srgb, var(--c-focus) 16%, transparent); }
.p-input:focus:not(:disabled):not([readonly]) { background: var(--c-input-bg-focus); }
.p-input:disabled, .p-input[readonly] { background: var(--c-surface-2); color: var(--c-muted); border-color: var(--c-border); box-shadow: none; }
.p-input--invalid, .p-input--invalid:focus { border-color: var(--c-out); box-shadow: 0 0 0 1px var(--c-out); }
.p-input--num { text-align: left; direction: ltr; font-variant-numeric: tabular-nums; }
textarea.p-input { height: auto; min-height: 56px; padding-block: 4px; resize: vertical; }
select.p-input { padding-inline: 4px; }

/* ورودی با پسوند (واحد/قلم) یا دکمه کناری */
.p-affix { display: flex; align-items: stretch; min-width: 0; }
.p-affix .p-input { flex: 1; }
.p-affix__suffix, .p-affix__btn {
    display: inline-flex; align-items: center; padding-inline: 6px; border: 1px solid var(--c-input-border);
    background: var(--c-surface-2); color: var(--c-muted); font-size: var(--fs-small); white-space: nowrap;
}
.p-affix .p-input:not(:last-child) { border-start-end-radius: 0; border-end-end-radius: 0; }
.p-affix__suffix:last-child, .p-affix__btn:last-child { border-start-end-radius: var(--radius); border-end-end-radius: var(--radius); }
.p-affix > :not(:first-child) { margin-inline-start: -1px; }
.p-affix__btn { cursor: pointer; color: var(--c-text); }
.p-affix__btn:hover:not(:disabled) { background: var(--c-hover); color: var(--c-primary); }
.p-affix__btn:disabled { opacity: .45; cursor: not-allowed; }
.p-affix__btn svg { width: 14px; height: 14px; }
/* دسترسی سریع کدینگ کنار فهرست انتخابی (CodingActions): کم‌رنگ تا فرم شلوغ نشود، پررنگ با hover/فوکوس فیلد */
.p-affix > select.p-input { flex: 1; min-width: 0; }
.p-coding { display: flex; align-items: stretch; }
.p-coding .p-dropdown { display: flex; align-items: stretch; }
.p-coding .p-affix__btn { border-start-end-radius: var(--radius); border-end-end-radius: var(--radius); }
.p-coding__btn { color: var(--c-muted); }
.p-affix:hover .p-coding__btn, .p-affix:focus-within .p-coding__btn { color: var(--c-text); }

/* چک‌باکس */
.p-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; white-space: nowrap; }
.p-check input { width: 15px; height: 15px; margin: 0; accent-color: var(--c-primary); cursor: pointer; }
.p-check--disabled { opacity: .5; cursor: not-allowed; }
/* چند چک‌باکس کنار هم در یک خانه FormGrid: <FieldFrame Label="…"><div class="p-checks">…</div></FieldFrame> */
.p-checks { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; min-height: var(--field); }
.p-checks--col { flex-direction: column; align-items: flex-start; gap: 4px; justify-content: center; }
.p-checks .p-field { gap: 0; }
/* درون FormGrid قاب فیلد هر چک‌باکس display:contents می‌شود و .p-control (flex:1; min-width:0) خودش آیتم flex می‌شود؛
   بی این قاعده آیتم‌ها تا صفر جمع و متن‌های nowrap روی هم می‌افتادند. هر چک‌باکس هم‌اندازه متنش و گروه می‌شکند. */
.p-checks > .p-control, .p-checks > .p-field > .p-control { flex: 0 0 auto; min-width: auto; }
.p-checks .p-control-row, .p-checks .p-control-row__main { flex: 0 0 auto; min-width: auto; }
/* چک‌باکس در هر ردیف flex (نوار ابزار، نوار پالایه فهرست، form-actions، ردیف‌های برنامه): قاب فیلد چک‌باکس هرگز از اندازه متنش
   کوچک‌تر نمی‌شود (پیش‌تر .p-field و .p-control با min-width:0 جمع می‌شدند و متن nowrap روی چک‌باکس کناری می‌افتاد؛ مثلاً
   «.list-filters .p-field { flex: 0 1 160px }» برنامه) و میان دو چک‌باکس پشت‌سرهم فاصله هست. (:has ویژگی بیشتری از قاعده‌های برنامه دارد.) */
.p-field:has(> .p-control > .p-check), .p-field:has(> .p-control > .p-control-row > .p-control-row__main > .p-check) { flex: 0 0 auto; }
.p-field:has(> .p-control > .p-check) > .p-control,
.p-field:has(> .p-control > .p-control-row > .p-control-row__main > .p-check) > .p-control { flex: 0 0 auto; min-width: auto; }
.p-control:has(> .p-control-row > .p-control-row__main > .p-check) > .p-control-row,
.p-control-row__main:has(> .p-check) { flex: 0 0 auto; min-width: auto; }
:not(.p-checks) > .p-field:has(> .p-control .p-check) + .p-field:has(> .p-control .p-check) { margin-inline-start: 8px; }

/* نوار خلاصه تب اصلی فرم (SummaryStrip): «برچسب: مقدار» فشرده؛ کلیک = رفتن به تب */
.p-summary { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; padding: 6px 0; }
.p-summary__item { display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 8px; border: 1px solid var(--c-border); border-radius: 12px;
    background: var(--c-surface-2); color: var(--c-text); font: inherit; font-size: var(--fs-small); line-height: 1.5; max-inline-size: 100%; }
button.p-summary__item { cursor: pointer; }
button.p-summary__item:hover { background: var(--c-hover); border-color: var(--c-input-border-hover); }
.p-summary__label { color: var(--c-muted); white-space: nowrap; }
.p-summary__label::after { content: ":"; }
.p-summary__value { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-inline-size: 260px; }

/* ---------- FormGrid: فرم دو/سه‌ستونی فشرده ---------- */
.p-formgrid { display: grid; gap: 6px var(--pair-gap); align-items: start; max-inline-size: var(--form-max); }
.p-formgrid--3 { max-inline-size: var(--form-max-3); }
.p-formgrid--fluid { max-inline-size: none; }
/* ستون برچسب حداکثر تا سهمی از عرض فرم بزرگ می‌شود و برچسب بلند می‌شکند تا ستون کنترل باریک نشود */
.p-formgrid--1 { grid-template-columns: fit-content(42%) minmax(0, 1fr); }
.p-formgrid--2 { grid-template-columns: fit-content(22%) minmax(0, 1fr) fit-content(22%) minmax(0, 1fr); }
.p-formgrid--3 { grid-template-columns: fit-content(15%) minmax(0, 1fr) fit-content(15%) minmax(0, 1fr) fit-content(15%) minmax(0, 1fr); }
/* فقط فرزند مستقیم گرید display:contents؛ فیلد تودرتو (درون FieldFrame، p-checks، جدول) چیدمان عادی خودش را دارد */
.p-formgrid > .p-field { display: contents; }
/* برچسب با حاشیه منفی به فیلد خودش می‌چسبد (--label-gap) و جفت بعدی --pair-gap فاصله دارد */
.p-formgrid .p-label { padding-top: 5px; white-space: normal; overflow-wrap: break-word; }
.p-formgrid > .p-field > .p-label { margin-inline-end: calc(var(--label-gap) - var(--pair-gap)); }
.p-formgrid .p-span-all { grid-column: 2 / -1; }
/* خانه خالی به اندازه یک جفت برچسب+فیلد (به‌جای <span></span> که فقط یک خانه می‌گرفت) */
.p-formgrid > .p-skip { grid-column: span 2; }
.p-formgrid > .p-field--wide > .p-control { grid-column: 2 / -1; }
/* برچسب فیلد تمام‌عرض همیشه از ستون اول ردیف تازه شروع می‌شود (نه وسط ردیف) */
.p-formgrid > .p-field--wide > .p-label { grid-column: 1; }
/* فیلد بدون برچسب (مثل چک‌باکس «مرا به خاطر بسپار») در ستون کنترل می‌نشیند، نه ستون برچسب */
.p-formgrid > .p-field > .p-control:first-child { grid-column: 2 / -1; }
@media (max-width: 640px) {
    .p-formgrid--2, .p-formgrid--3 { grid-template-columns: fit-content(42%) minmax(0, 1fr); }
    .p-formgrid > .p-field--wide > .p-control, .p-formgrid .p-span-all { grid-column: 2; }
    .p-formgrid > .p-skip { display: none; }
}

/* ---------- لیست پیشنهاد (Lookup) ---------- */
.p-popup {
    position: absolute; z-index: 30; top: calc(100% + 2px); inset-inline: 0; background: var(--c-surface);
    border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: 0 6px 18px var(--c-shadow);
    max-height: 260px; overflow: auto;
}
.p-list__item {
    display: flex; justify-content: space-between; gap: 10px; padding: 4px 8px; cursor: pointer; white-space: nowrap;
}
.p-popup .p-list__item > :first-child { overflow: hidden; text-overflow: ellipsis; }
.p-list__item:hover, .p-list__item--active { background: var(--c-select); }
.p-list__detail { color: var(--c-muted); font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; }
.p-list__empty { padding: 6px 8px; color: var(--c-muted); }
.p-list__create { color: var(--c-primary); border-top: 1px solid var(--c-border); }
/* فهرست انتخابی جستجوشو (گام UX.8): نشان هر گزینه (پرچم ارز) و گزینه انتخاب‌شده */
.p-list__item--icon { justify-content: flex-start; }
.p-list__item--icon > span:not(.p-list__detail) { overflow: hidden; text-overflow: ellipsis; }
.p-list__item--icon .p-list__detail { margin-inline-start: auto; }
.p-list__icon { flex: none; display: inline-flex; align-items: center; }
/* پرچم ارز (گام 2.1b): کادر ۱۶×۱۲ با قاب نازک تا پرچم‌های سفید هم دیده شوند */
.p-flag {
    width: 16px; height: 12px; flex: none; display: inline-block; vertical-align: -1px; border-radius: 1px;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-border) 80%, transparent);
}
.p-flag--lg { width: 22px; height: 16.5px; vertical-align: -3px; }
.p-list__item--on { font-weight: 600; }
.p-affix__icon {
    flex: none; display: inline-flex; align-items: center; padding-inline: 4px; background: var(--c-surface-2);
    border: 1px solid var(--c-border); border-inline-end: 0;
    border-start-start-radius: var(--radius); border-end-start-radius: var(--radius);
}
.p-affix__icon + .p-input { border-start-start-radius: 0; border-end-start-radius: 0; }
/* کمبو در جدول‌های متراکم (ردیف‌های گرفتم/دادم): پرچم و دکمه باریک‌تر تا کد ارز کامل جا شود */
.p-affix:has(> .p-input--dense) .p-affix__icon,
.p-affix:has(> .p-input--dense) .p-affix__btn { padding-inline: 2px; }
.p-affix:has(> .p-input--dense) .p-input { padding-inline: 4px; }
.p-affix:has(> .p-input--dense) .p-affix__btn svg { width: 11px; height: 11px; }

/* ---------- تقویم (DateBox) ---------- */
.p-cal { position: absolute; z-index: 30; top: calc(100% + 2px); inset-inline-start: 0; width: 236px; padding: 6px;
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 4px; box-shadow: 0 8px 22px var(--c-shadow); }
.p-cal:focus { outline: none; border-color: var(--c-focus); }
.p-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-bottom: 4px; font-weight: 700; }
.p-cal__nav { width: 24px; height: 22px; border: 0; border-radius: 3px; background: none; cursor: pointer; color: var(--c-text); }
.p-cal__nav:hover { background: var(--c-hover); }
.p-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.p-cal__wd { text-align: center; color: var(--c-muted); font-size: 11px; padding-bottom: 2px; }
.p-cal__day {
    height: 26px; border: 0; border-radius: 3px; background: none; cursor: pointer; color: var(--c-text);
    font-variant-numeric: tabular-nums;
}
.p-cal__day:hover { background: var(--c-hover); }
.p-cal__day--other { color: var(--c-muted); opacity: .55; }
.p-cal__day--today { box-shadow: inset 0 0 0 1px var(--c-accent); }
.p-cal__day--selected { background: var(--c-primary); color: var(--c-primary-fg); }
.p-cal__day--cursor { outline: 2px solid var(--c-focus); outline-offset: -2px; }
.p-cal__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; font-size: var(--fs-small); color: var(--c-muted); }

/* ---------- برچسب وضعیت و مبلغ ---------- */
/* کد QR: همیشه سیاه روی سفید (حتی در پوسته تیره) تا گوشی بخواند */
.p-qr { display: block; background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); image-rendering: pixelated; }

.p-badge {
    display: inline-flex; align-items: center; height: 18px; padding-inline: 7px; border-radius: 9px;
    font-size: 11px; font-weight: 500; white-space: nowrap;
}
.p-badge--ok { background: var(--c-in-soft); color: var(--c-in); }
.p-badge--bad { background: var(--c-out-soft); color: var(--c-out); }
.p-badge--warn { background: var(--c-warn-soft); color: var(--c-warn); }
.p-badge--info { background: var(--c-info-soft); color: var(--c-info); }
.p-badge--neutral { background: var(--c-surface-2); color: var(--c-muted); }
.p-amount { white-space: nowrap; }
.p-amount__unit { color: var(--c-muted); font-size: .9em; margin-inline-start: 3px; }

/* ---------- نوار ابزار و حالت خالی ---------- */
.p-toolbar {
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding-bottom: 6px;
    border-bottom: 2px solid color-mix(in srgb, var(--mc, var(--c-primary)) 28%, var(--c-border)); margin-bottom: 8px;
}
.p-toolbar__title {
    font-size: var(--fs-title); font-weight: 700; margin: 0; margin-inline-end: 8px; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 8px;
}
/* آیکن عنوان صفحه: کاشی رنگی به رنگ ماژول */
.p-toolbar__icon {
    width: 28px; height: 28px; border-radius: 7px; display: inline-grid; place-items: center; flex: none;
    color: var(--mc, var(--c-primary));
    background: linear-gradient(135deg, color-mix(in srgb, var(--mc, var(--c-primary)) 22%, var(--c-surface)), color-mix(in srgb, var(--mc, var(--c-primary)) 8%, var(--c-surface)));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mc, var(--c-primary)) 30%, transparent);
}
.p-toolbar__icon .p-icon { width: 17px; height: 17px; }
.p-toolbar__spacer { flex: 1; }
.p-empty { display: grid; place-items: center; text-align: center; color: var(--c-muted); padding: 32px 16px; }
.p-empty__title { display: block; color: var(--c-text); font-size: 14px; font-weight: 700; margin-bottom: 4px; }

/* ---------- دیالوگ مودال ---------- */
.p-backdrop {
    position: fixed; inset: 0; z-index: 900; background: var(--c-backdrop);
    display: grid; place-items: start center; padding: 12vh 16px 16px;
}
.p-dialog {
    --dc: var(--c-primary); position: relative;
    width: min(420px, 100%); background: var(--c-surface); border: 1px solid var(--c-border); border-top: 3px solid var(--dc);
    border-radius: 6px; box-shadow: 0 16px 44px var(--c-shadow); display: flex; flex-direction: column; max-height: 80vh;
    animation: p-dialog-in .14s ease-out;
}
@keyframes p-dialog-in { from { opacity: 0; transform: translateY(-6px) scale(.985); } }
.p-dialog--wide { width: min(640px, 100%); }
.p-dialog__head {
    display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-weight: 700; font-size: 14px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--dc) 9%, var(--c-surface)), var(--c-surface));
    border-bottom: 1px solid color-mix(in srgb, var(--dc) 18%, var(--c-border)); border-radius: 4px 4px 0 0;
}
.p-dialog__title { flex: 1; min-width: 0; }
.p-dialog__icon {
    width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
    color: var(--dc); background: color-mix(in srgb, var(--dc) 15%, var(--c-surface));
}
.p-dialog__body { padding: 8px 12px 10px; overflow: auto; }
.p-dialog__text { color: var(--c-muted); white-space: pre-line; }
.p-dialog__foot {
    display: flex; justify-content: flex-end; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--c-border);
    background: var(--c-surface-2); border-radius: 0 0 5px 5px;
}
.p-dialog--danger { --dc: var(--c-out); }
.p-dialog--danger .p-dialog__head { color: var(--c-out); }

/* اندازه‌پذیر: لبه‌ها با موس گرفته می‌شوند، سربرگ پنجره را جابه‌جا می‌کند */
.p-dialog--sizable .p-dialog__head { cursor: move; }
.p-dialog--sizable.is-sizing { user-select: none; animation: none; }
.p-dialog--sizable.is-sizing .p-dialog__body { pointer-events: none; }
.p-dialog__btn {
    width: 24px; height: 22px; border: 0; background: none; color: inherit; cursor: pointer; border-radius: 3px;
    display: inline-grid; place-items: center; flex: none;
}
.p-dialog__btn:hover { background: color-mix(in srgb, currentColor 16%, transparent); }
.p-dialog__btn .p-icon { width: 13px; height: 13px; }
/* دکمه × بستن (Esc): کمی پررنگ‌تر، قرمز با hover؛ بی‌عنوان شناور در گوشه بالا */
.p-dialog__close:hover { background: var(--c-out-soft); color: var(--c-out); }
.p-dialog__close--float { position: absolute; inset-block-start: 6px; inset-inline-end: 6px; z-index: 1; color: var(--c-muted); }
/* اندازه دستی کاربر (کشیدن لبه یا چرخ موس) — جا و اندازه را JS روی style می‌گذارد */
.p-dialog--free {
    position: fixed; margin: 0; max-width: none; max-height: none; animation: none;
}
/* تمام‌صفحه (دابل‌کلیک سربرگ یا F11) */
.p-dialog--max {
    position: fixed; inset: 6px; width: auto; height: auto; max-width: none; max-height: none; margin: 0; animation: none;
}
/* در هر دو حالت، بدنه بقیه ارتفاع پنجره را پر می‌کند */
.p-dialog--free .p-dialog__body,
.p-dialog--max .p-dialog__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* محتوای یکپارچه (مثل پیش‌نمایش چاپ که ارتفاع ثابت دارد) هم‌اندازه پنجره می‌شود، نه بیشتر و نه کمتر */
.p-dialog--free .p-dialog__body > :only-child,
.p-dialog--max .p-dialog__body > :only-child { flex: 1 1 auto; min-height: 0; height: auto; }

/* ---------- اعلان (Toast) ---------- */
.p-toasts { position: fixed; bottom: 30px; inset-inline-end: 12px; z-index: 1000; display: grid; gap: 6px; }
/* برچسب «نسخه نمایشی» Zana.Blazor (ZanaLicenseNotice) — کوچک، بی مزاحمت، از کلیک عبور می‌کند */
.p-demo {
  position: fixed; bottom: 4px; inset-inline-start: 6px; z-index: 999; pointer-events: none;
  padding: 1px 8px; border-radius: 999px; font-size: var(--fs-small); opacity: .75;
  background: var(--c-warn-soft); color: var(--c-text); border: 1px solid var(--c-warn);
}
@media print { .p-demo { display: none; } }
.p-toast {
    display: flex; gap: 8px; align-items: flex-start; min-width: 240px; max-width: min(380px, calc(100vw - 24px));
    background: var(--c-surface); border: 1px solid var(--c-border); border-inline-start: 4px solid var(--c-info);
    border-radius: 4px; box-shadow: 0 6px 18px var(--c-shadow); padding: 7px 8px 7px 12px; animation: p-toast-in .15s ease-out;
}
.p-toast--success { border-inline-start-color: var(--c-in); }
.p-toast--error { border-inline-start-color: var(--c-out); }
.p-toast--warning { border-inline-start-color: var(--c-warn); }
.p-toast__text { flex: 1; white-space: pre-line; }
.p-toast__close { border: 0; background: none; color: var(--c-muted); cursor: pointer; padding: 0 2px; }
@keyframes p-toast-in { from { opacity: 0; transform: translateY(6px); } }

/* ---------- پنجره شناور (غیرمودال) ---------- */
.p-windows { position: absolute; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.p-window {
    position: absolute; pointer-events: auto; width: min(var(--w, 480px), calc(100% - 16px)); max-height: calc(100% - 16px);
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 5px; box-shadow: 0 10px 32px var(--c-shadow);
    display: flex; flex-direction: column;
}
.p-window--active { border-color: var(--c-primary); }
.p-window__head {
    height: 30px; flex: none; display: flex; align-items: center; gap: 8px; padding-inline: 10px 4px;
    background: var(--c-surface-2); border-bottom: 1px solid var(--c-border); border-radius: 5px 5px 0 0;
    cursor: move; user-select: none; touch-action: none; font-weight: 700;
}
.p-window--active .p-window__head { background: var(--c-primary); color: var(--c-primary-fg); }
.p-window__title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-window__btn { width: 24px; height: 22px; border: 0; background: none; color: inherit; cursor: pointer; border-radius: 3px; }
.p-window__btn:hover { background: color-mix(in srgb, currentColor 18%, transparent); }
.p-window__body { padding: 10px; overflow: auto; min-height: 0; }
.p-window--min .p-window__body { display: none; }
/* اندازه دستی کاربر (کشیدن لبه یا چرخ موس) و تمام‌صفحه — گام UX.9؛ جا و اندازه را JS روی style می‌گذارد */
.p-window--free { max-width: none; max-height: none; }
.p-window--max { inset: 8px; width: auto; height: auto; max-width: none; max-height: none; }
.p-window--free .p-window__body,
.p-window--max .p-window__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.p-window--free .p-window__body > :only-child,
.p-window--max .p-window__body > :only-child { flex: 1 1 auto; min-height: 0; height: auto; }
.p-window.is-sizing { user-select: none; }

/* ---------- آیکن ---------- */
.p-icon { width: 16px; height: 16px; flex: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- جدول متراکم (پایه DataGrid) ---------- */
.p-table-wrap { overflow: auto; border: 1px solid var(--c-border); border-radius: var(--radius); max-width: 100%; }
.p-table { border-collapse: collapse; width: 100%; font-size: var(--fs-grid); }
.p-table th {
    position: sticky; top: 0; z-index: 1; color: var(--c-muted); font-weight: 500;
    background: linear-gradient(180deg, color-mix(in srgb, var(--mc, var(--c-primary)) 7%, var(--c-surface-2)), var(--c-surface-2));
    text-align: start; height: var(--row); padding-inline: 6px; border-bottom: 1px solid var(--c-border); white-space: nowrap;
}
.p-table td { height: var(--row); padding-inline: 6px; border-bottom: 1px solid var(--c-border); white-space: nowrap; }
.p-table th + th, .p-table td + td { border-inline-start: 1px solid var(--c-border); }
.p-table tbody tr:hover { background: var(--c-hover); }
/* ردیف باز شدنی: باز شدن با دوبار کلیک یا Enter (RowKeys) — انتخاب نشدن متن تا دوبار کلیک متن را های‌لایت نکند */
.p-table tbody tr.p-row--click { cursor: pointer; user-select: none; }
.p-table tbody tr.p-row--active { background: var(--c-select); }
.p-table tbody[data-p-rows] tr:focus { outline: 2px solid var(--c-focus); outline-offset: -2px; background: var(--c-select); }
.p-table tbody tr.p-row--off td { color: var(--c-muted); }

/* ابزار حرفه‌ای جدول‌ها (تنظیم نمایش؛ js: gridTools) — تا کاربر کاری نکند هیچ تغییر ظاهری ندارد */
.p-table tr[data-gt-hide] { display: none; }
.p-table[data-gt-on="all"]:not([data-gt-sort="off"]) > thead > tr:last-child > th { cursor: pointer; }
.p-table[data-gt-on] > thead > tr:last-child > th[data-gt-edge] { cursor: col-resize; }
.p-table[data-gt-fixed] th, .p-table[data-gt-fixed] td { overflow: hidden; text-overflow: ellipsis; }
.p-table[data-gt-on="all"] > thead > tr:last-child > th::after {
    content: ""; position: absolute; inset-inline-end: 7px; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; opacity: 0;
    background: currentColor; transition: opacity .12s; pointer-events: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 2.5h13l-5 6v5l-3 1.5v-6.5z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 2.5h13l-5 6v5l-3 1.5v-6.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.p-table[data-gt-on="all"] > thead > tr:last-child > th:hover::after { opacity: .45; }
.p-table > thead > tr:last-child > th[data-gt-filter]::after { opacity: 1; color: var(--mc, var(--c-primary)); }
.p-table > thead > tr:last-child > th[data-gt-sort] { color: var(--c-text); }
.p-table > thead > tr:last-child > th[data-gt-sort]::before {
    position: absolute; inset-inline-end: 21px; top: 50%; transform: translateY(-50%); font-size: 9px; color: var(--mc, var(--c-primary));
}
.p-table > thead > tr:last-child > th[data-gt-sort="asc"]::before { content: "▲"; }
.p-table > thead > tr:last-child > th[data-gt-sort="desc"]::before { content: "▼"; }
.p-gt-pop {
    position: fixed; z-index: 1200; width: 270px; max-height: min(480px, 80vh); overflow: auto; padding: 8px;
    background: var(--c-surface); color: var(--c-text); border: 1px solid var(--c-border); border-radius: 8px;
    box-shadow: 0 10px 28px var(--c-shadow); font-size: var(--fs-small); display: flex; flex-direction: column; gap: 6px;
}
.p-gt-pop__title { font-weight: 700; font-size: var(--fs); border-bottom: 1px solid var(--c-border); padding-bottom: 4px; }
.p-gt-pop__label { color: var(--c-muted); font-weight: 500; margin-top: 2px; }
.p-gt-pop__row { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.p-gt-pop__input {
    flex: 1; min-width: 0; height: 26px; padding-inline: 6px; border: 1px solid var(--c-border); border-radius: var(--radius);
    background: var(--c-surface); color: var(--c-text); font: inherit;
}
.p-gt-pop__input:focus { outline: 2px solid var(--c-focus); outline-offset: -1px; }
.p-gt-pop > .p-gt-pop__input { flex: none; }
.p-gt-pop__input[hidden] { display: none; }
.p-gt-pop__btn {
    flex: 1; height: 26px; padding-inline: 8px; border: 1px solid var(--c-border); border-radius: var(--radius); cursor: pointer;
    background: var(--c-surface-2); color: var(--c-text); font: inherit; white-space: nowrap;
}
.p-gt-pop__btn:hover { background: var(--c-hover); }
.p-gt-pop__btn--on { border-color: var(--mc, var(--c-primary)); color: var(--mc, var(--c-primary)); font-weight: 700; }
.p-gt-pop__btn--primary { background: var(--c-primary); color: var(--c-primary-fg); border-color: var(--c-primary); }
.p-gt-pop__btn--primary:hover { background: color-mix(in srgb, var(--c-primary) 85%, #000); }
.p-gt-pop__list { max-height: 190px; overflow: auto; border: 1px solid var(--c-border); border-radius: var(--radius); padding: 2px; }
.p-gt-pop__check { display: flex; align-items: center; gap: 6px; padding: 2px 4px; border-radius: 3px; cursor: pointer; }
.p-gt-pop__check:hover { background: var(--c-hover); }
.p-gt-pop__check[hidden] { display: none; }
.p-gt-pop__check span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-gt-pop__check small { color: var(--c-muted); }
.p-gt-pop__check--all { border-bottom: 1px solid var(--c-border); font-weight: 500; }
.p-gt-pop__actions { margin-top: 2px; }
.p-gt-pop__foot { justify-content: space-between; border-top: 1px solid var(--c-border); padding-top: 4px; }
.p-gt-pop__link { border: 0; background: none; padding: 2px; color: var(--c-primary); cursor: pointer; font: inherit; }
.p-gt-pop__link:hover { text-decoration: underline; }

/* جعبه‌ابزار جدول‌ها (P16؛ js: tableKit): صفحه‌بندی، ردیف جمع همه ردیف‌ها، انتخاب خانه‌ها مثل اکسل */
.p-table tr[data-tk-page-hide] { display: none; }
.p-table > tfoot[data-tk-agg] td {
    position: sticky; bottom: 0; z-index: 1; height: var(--row); padding-inline: 6px; white-space: nowrap; font-weight: 700;
    background: color-mix(in srgb, var(--mc, var(--c-primary)) 9%, var(--c-surface-2)); color: var(--c-text);
    box-shadow: inset 0 1px 0 var(--c-border), inset 0 2px 0 color-mix(in srgb, var(--mc, var(--c-primary)) 30%, transparent);
}
.p-table > tfoot[data-tk-agg] td + td { border-inline-start: 1px solid var(--c-border); }
.p-table > tfoot[data-tk-agg] td.p-tk-foot__num { text-align: end; }
.p-table > tfoot[data-tk-agg] td.p-tk-foot__num.p-neg { color: var(--c-out); }
.p-table > tfoot[data-tk-agg] td.p-tk-foot__label { color: var(--mc, var(--c-primary)); }
.p-table[data-tk-barin] > tfoot[data-tk-agg] td { bottom: calc(var(--row) + 6px); }
.p-table[data-tk-drag] { user-select: none; cursor: cell; }
.p-table td[data-tk-sel] {
    background: color-mix(in srgb, var(--c-focus) 20%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-focus) 60%, transparent);
}
.p-table tbody tr[data-tk-rowsel] > td { background: color-mix(in srgb, var(--c-focus) 16%, transparent); }
.p-table tbody tr[data-tk-rowsel] > td:first-child { box-shadow: inset 3px 0 0 var(--c-focus); }
[dir="rtl"] .p-table tbody tr[data-tk-rowsel] > td:first-child { box-shadow: inset -3px 0 0 var(--c-focus); }

.p-tk-bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; padding: 4px 2px 0; min-height: calc(var(--row) + 4px);
    color: var(--c-muted); font-size: var(--fs-small); line-height: 1.4;
}
.p-tk-bar--in {
    position: sticky; inset-inline-start: 0; bottom: 0; z-index: 2; flex-wrap: nowrap; overflow: hidden;
    height: calc(var(--row) + 6px); min-height: 0; padding: 2px 6px; background: var(--c-surface); border-top: 1px solid var(--c-border);
}
.p-tk-bar__grow { flex: 1 1 0; min-width: 0; }
.p-tk-bar__count { white-space: nowrap; font-variant-numeric: tabular-nums; }
.p-tk-bar__field { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.p-tk-bar__select {
    height: 22px; padding-inline: 4px; border: 1px solid var(--c-input-border); border-radius: var(--radius);
    background: var(--c-input-bg); color: var(--c-text); font: inherit; cursor: pointer;
}
.p-tk-bar__select:hover { border-color: var(--c-input-border-hover); }
.p-tk-bar__nav { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.p-tk-bar__page { padding-inline: 6px; color: var(--c-text); font-variant-numeric: tabular-nums; }
.p-tk-bar__btn {
    width: 24px; height: 22px; padding: 0; border: 1px solid var(--c-border); border-radius: var(--radius); cursor: pointer;
    background: var(--c-surface); color: var(--c-text); display: inline-flex; align-items: center; justify-content: center; font: inherit;
}
.p-tk-bar__btn:hover:not(:disabled) { background: var(--c-hover); border-color: var(--c-input-border-hover); }
.p-tk-bar__btn:disabled { opacity: .4; cursor: default; }
.p-tk-ico::before {
    content: ""; width: 12px; height: 12px; background: currentColor;
    -webkit-mask: var(--tk-ico) center / contain no-repeat; mask: var(--tk-ico) center / contain no-repeat;
}
/* پیکان‌ها برای چپ‌به‌راست؛ در راست‌به‌چپ قرینه می‌شوند (قبلی به راست، بعدی به چپ) */
.p-tk-ico--prev { --tk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10.5 2.5 5 8l5.5 5.5 1.4-1.4L7.8 8l4.1-4.1z'/%3E%3C/svg%3E"); }
.p-tk-ico--next { --tk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 2.5 11 8l-5.5 5.5-1.4-1.4L8.2 8 4.1 3.9z'/%3E%3C/svg%3E"); }
.p-tk-ico--first { --tk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 2.5h1.8v11H3zM12.5 2.5 7 8l5.5 5.5 1.4-1.4L9.8 8l4.1-4.1z'/%3E%3C/svg%3E"); }
.p-tk-ico--last { --tk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.2 2.5H13v11h-1.8zM3.5 2.5 9 8l-5.5 5.5-1.4-1.4L6.2 8 2.1 3.9z'/%3E%3C/svg%3E"); }
[dir="rtl"] .p-tk-ico::before { transform: scaleX(-1); }
.p-tk-bar__sel {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding-block: 1px; padding-inline: 8px 2px;
    color: var(--c-text); background: var(--c-info-soft); border: 1px solid color-mix(in srgb, var(--c-info) 40%, transparent);
    border-radius: var(--radius); font-variant-numeric: tabular-nums; position: relative;
}
.p-tk-bar__seltext { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-tk-bar__x { width: 18px; height: 18px; border-color: transparent; background: transparent; color: var(--c-muted); }
.p-tk-bar__x::before { content: "×"; font-size: 15px; line-height: 1; }
.p-tk-bar__sel[data-tk-copied]::after {
    content: "✓ " attr(data-tk-copied); position: absolute; inset-inline-end: 0; bottom: calc(100% + 4px); padding: 1px 8px;
    background: var(--c-in); color: var(--c-primary-fg); border-radius: var(--radius); white-space: nowrap; font-weight: 500;
}
/* خروجی جدول (PUX.17): دکمه‌های «Excel» و «چاپ» همه ردیف‌ها در انتهای نوار؛ کار ساخت فایل با زانا ریپورت میزبان است */
.p-tk-bar__exp { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.p-tk-bar__act {
    height: 22px; padding-inline: 6px 8px; border: 1px solid var(--c-border); border-radius: var(--radius); cursor: pointer; gap: 4px;
    background: var(--c-surface); color: var(--c-text); display: inline-flex; align-items: center; font: inherit; white-space: nowrap;
}
.p-tk-bar__act:hover:not(:disabled) { background: var(--c-hover); border-color: var(--c-input-border-hover); }
.p-tk-bar__act:disabled { opacity: .5; cursor: progress; }
.p-tk-bar__act::before {
    content: ""; width: 12px; height: 12px; flex: none; background: var(--tk-act-c, currentColor);
    -webkit-mask: var(--tk-ico) center / contain no-repeat; mask: var(--tk-ico) center / contain no-repeat;
}
.p-tk-act--xls { --tk-act-c: var(--c-in); --tk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 2h12v12H2zm1.5 1.5v2.5h3.5V3.5zm5 0v2.5h4V3.5zm-5 4v2.5h3.5V7.5zm5 0v2.5h4V7.5zm-5 4v1h3.5v-1zm5 0v1h4v-1z'/%3E%3C/svg%3E"); }
.p-tk-act--print { --tk-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 1h8v4H4zM2 6h12a1 1 0 0 1 1 1v5h-3v3H4v-3H1V7a1 1 0 0 1 1-1zm3.5 5v2.5h5V11zM12 7.5a.8.8 0 1 0 0 1.6.8.8 0 0 0 0-1.6z'/%3E%3C/svg%3E"); }
body.p-print .p-tk-bar { display: none; }
body.p-print .p-table > tfoot[data-tk-agg] td { position: static; }

/* خلاصه خطاهای فرم (پاسخ Api) */
.p-errors {
    border: 1px solid var(--c-out); background: var(--c-out-soft); color: var(--c-text); border-radius: var(--radius);
    padding: 6px 8px; margin-block: 6px; font-size: var(--fs-small);
}
.p-errors__title { font-weight: 700; color: var(--c-out); }
.p-errors ul { margin: 2px 0 0; padding-inline-start: 18px; }

/* راهنمای کلیدهای صفحه */
.p-keys { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; color: var(--c-muted); font-size: var(--fs-small); align-items: center; }
.p-table .p-cell--num { text-align: end; }
.p-table .p-cell--wrap { white-space: normal; min-width: 220px; }
.p-table .p-cell--ellipsis { max-width: 420px; overflow: hidden; text-overflow: ellipsis; }

/* ---------- صفحه‌بندی ---------- */
.p-pager { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--c-muted); font-size: var(--fs-small); flex-wrap: wrap; }

/* ---------- تب داخلی ---------- */
/* تب‌های زیاد به سطر بعد می‌روند (نه پیمایش افقی که نوارش روی عنوان‌ها می‌افتاد) */
.p-tabs__bar { display: flex; flex-wrap: wrap; gap: 2px; row-gap: 4px; border-bottom: 1px solid var(--c-border); margin-bottom: 8px; }
.p-tabs__btn {
    height: 28px; padding-inline: 12px; border: 1px solid transparent; border-bottom: 0; border-radius: 4px 4px 0 0;
    background: none; color: var(--c-muted); cursor: pointer; white-space: nowrap; position: relative; top: 1px;
}
.p-tabs__btn:hover { color: var(--c-text); }
.p-tabs__btn--active { background: var(--c-surface); border-color: var(--c-border); color: var(--c-text); font-weight: 500; box-shadow: inset 0 3px 0 var(--mc, var(--c-primary)); }

/* ---------- کاشی عدد ---------- */
.p-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 8px; }
.p-stat { border: 1px solid var(--c-border); border-radius: 6px; padding: 6px 10px; background: var(--c-surface); box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--mc, var(--c-primary)) 35%, transparent); }
.p-stat__title { color: var(--c-muted); font-size: 12px; }
.p-stat__value { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.p-stat--bad .p-stat__value { color: var(--c-out); }

/* ---------- متن کد (Stack trace) ---------- */
.p-code {
    margin: 0; padding: 8px; background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--radius);
    direction: ltr; text-align: left; font: 12px/1.5 Consolas, "Courier New", monospace; white-space: pre-wrap;
    overflow-wrap: anywhere; max-height: 60vh; overflow: auto;
}

/* ---------- متن راهنما (MarkdownView — گام 1.9) ---------- */
.p-md { line-height: 1.9; max-width: 860px; }
.p-md p { margin: 0 0 8px; }
.p-md ul, .p-md ol { margin: 0 0 8px; padding-inline-start: 22px; }
.p-md li { margin-bottom: 2px; }
.p-md hr { border: 0; border-top: 1px solid var(--c-border); margin: 12px 0; }
.p-md__table-wrap { overflow-x: auto; margin: 0 0 10px; }
.p-md__table { border-collapse: collapse; width: 100%; font-size: .95em; line-height: 1.7; }
.p-md__table th, .p-md__table td { border: 1px solid var(--c-border); padding: 4px 8px; text-align: start; vertical-align: top; }
.p-md__table th { background: var(--c-surface-2, rgba(0,0,0,.04)); font-weight: 700; white-space: nowrap; }
.p-md__table tbody tr:nth-child(even) td { background: var(--c-surface-2, rgba(0,0,0,.02)); }
.p-md__code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .9em; background: var(--c-surface-2, rgba(0,0,0,.05)); border: 1px solid var(--c-border); border-radius: 4px; padding: 0 4px; unicode-bidi: isolate; white-space: pre-wrap; }
.p-md__h1 { font-size: 1.35em; margin: 0 0 10px; }
.p-md__h2 { font-size: 1.12em; margin: 16px 0 6px; padding-bottom: 3px; border-bottom: 1px solid var(--c-border); }
.p-md__h3 { font-size: 1em; margin: 12px 0 4px; }
.p-md__note { border-inline-start: 3px solid var(--c-info); background: var(--c-info-soft); padding: 6px 10px; margin: 0 0 8px; border-radius: var(--radius); }
.p-md__note--warn { border-inline-start-color: var(--c-warn); background: var(--c-warn-soft); }
.p-md__link { border: 0; background: none; padding: 0; color: var(--c-primary); text-decoration: underline; cursor: pointer; font: inherit; }
.p-md__link:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 1px; }
.p-md .p-kbd { margin-inline: 2px; }

/* ===================================================================
   منوی آبشاری، منوی درختی و فضای کاری دوسطحی (MenuBar / MenuTree / WorkspaceHost)
   رنگ هر ماژول از متغیر --mc (روی تب ماژول و بخش ماژول) خوانده می‌شود.
   =================================================================== */

/* ---------- نوار منو ---------- */
.p-menubar { display: flex; align-items: stretch; gap: 1px; min-width: 0; }
.p-menubar__top { position: relative; display: flex; }
.p-menubar__btn {
    border: 0; background: none; padding-inline: 9px; margin-block: 3px; border-radius: var(--radius); cursor: pointer;
    white-space: nowrap; color: var(--c-text); display: inline-flex; align-items: center; gap: 5px;
}
.p-menubar__btn:hover:not(:disabled) { background: var(--c-hover); }
.p-menubar__btn:disabled { color: var(--c-muted); cursor: default; }
.p-menubar__top--open > .p-menubar__btn { background: var(--c-select); color: var(--c-primary); }
.p-menubar__top > .p-menu { position: absolute; top: calc(100% + 1px); inset-inline-start: 0; }

/* بازشونده و زیرمنو */
.p-menu {
    min-width: 230px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 4px;
    box-shadow: 0 8px 24px var(--c-shadow); padding: 3px 0; z-index: 60;
}
.p-menu__item { position: relative; }
.p-menu__btn {
    display: flex; align-items: center; gap: 10px; width: 100%; height: 26px; border: 0; background: none;
    padding-inline: 12px 10px; cursor: pointer; text-align: start; white-space: nowrap; color: var(--c-text);
}
.p-menu__btn:disabled { color: var(--c-muted); cursor: default; }
.p-menu__text { flex: 1; }
.p-menu__key { font-size: 10.5px; color: var(--c-muted); direction: ltr; unicode-bidi: isolate; }
.p-menu__arrow { width: 10px; height: 10px; color: var(--c-muted); }
[dir="ltr"] .p-menu__arrow { transform: scaleX(-1); }
.p-menu__item:hover > .p-menu__btn:not(:disabled), .p-menu__item:focus-within > .p-menu__btn { background: var(--c-select); }
.p-menu__btn:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; }
.p-menu__sep { height: 1px; background: var(--c-border); margin: 3px 0; }
.p-menu--sub { display: none; position: absolute; top: -4px; inset-inline-start: 100%; min-width: 210px; z-index: 61; }
.p-menu__item--has:hover > .p-menu--sub, .p-menu__item--has:focus-within > .p-menu--sub { display: block; }

/* ---------- منوی درختی ---------- */
.p-mtree { background: var(--c-surface); overflow: auto; padding-bottom: 12px; }
.p-mtree__group { border-bottom: 1px solid var(--c-border); }
.p-mtree__head {
    display: flex; align-items: center; gap: 6px; width: 100%; height: 28px; border: 0; background: none;
    padding-inline: 10px 8px; cursor: pointer; color: var(--c-muted); font-size: 12px; font-weight: 500; text-align: start;
}
.p-mtree__head:hover { background: var(--c-hover); }
.p-mtree__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-mtree__caret { width: 10px; height: 10px; transition: transform .15s; }
.p-mtree__group--closed .p-mtree__caret { transform: rotate(90deg); }
[dir="ltr"] .p-mtree__group--closed .p-mtree__caret { transform: rotate(-90deg); }
.p-mtree__item, .p-mtree__label {
    display: flex; align-items: center; gap: 6px; width: 100%; min-height: 24px; border: 0; background: none;
    padding-inline: calc(10px + var(--lvl, 1) * 12px) 8px; text-align: start; font-size: 12.5px; color: var(--c-text);
}
.p-mtree__item { cursor: pointer; }
.p-mtree__item:hover:not(:disabled) { background: var(--c-hover); }
.p-mtree__item:disabled { color: var(--c-muted); cursor: default; }
.p-mtree__item--top { padding-inline: 10px 8px; height: 30px; border-bottom: 1px solid var(--c-border); font-weight: 500; }
.p-mtree__label { color: var(--c-muted); font-weight: 500; cursor: default; }
.p-mtree__key { font-size: 10.5px; color: var(--c-muted); direction: ltr; unicode-bidi: isolate; }
.p-mtree__icon { width: 14px; height: 14px; flex: none; color: color-mix(in srgb, var(--mc, var(--c-primary)) 80%, var(--c-muted)); }
.p-mtree__item:disabled .p-mtree__icon { color: var(--c-muted); }
.p-mtree__gicon {
    width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; flex: none; color: var(--mc, var(--c-primary));
    background: color-mix(in srgb, var(--mc, var(--c-primary)) 14%, transparent);
}
.p-mtree__gicon .p-icon { width: 13px; height: 13px; }
.p-mtree__sep { height: 1px; background: var(--c-border); margin: 3px 10px; }

/* ---------- فضای کاری دوسطحی ---------- */
.p-ws { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.p-ws__modules {
    flex: none; display: flex; align-items: flex-end; gap: 2px; padding-inline: 6px; padding-top: 3px; min-height: 30px;
    background: var(--c-surface-2); border-bottom: 1px solid var(--c-border); overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.p-ws__mtab {
    display: flex; align-items: center; gap: 6px; height: 26px; padding-inline: 10px 4px; border: 1px solid transparent; border-bottom: 0;
    border-radius: 4px 4px 0 0; color: var(--c-muted); cursor: pointer; white-space: nowrap; position: relative; top: 1px;
    font-weight: 500; user-select: none;
}
.p-ws__mtab:hover { background: var(--c-hover); color: var(--c-text); }
.p-ws__mtab--on { background: var(--c-surface); border-color: var(--c-border); color: var(--c-text); box-shadow: inset 0 3px 0 var(--mc); }
.p-ws__mtab--desk { padding-inline-end: 10px; }
.p-ws__mtitle { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.p-ws__mdot { width: 8px; height: 8px; border-radius: 2px; background: var(--mc); flex: none; }
.p-ws__x {
    width: 18px; height: 18px; border: 0; border-radius: 3px; background: none; color: var(--c-muted); cursor: pointer;
    display: grid; place-items: center; font-size: 13px; line-height: 1; padding: 0;
}
.p-ws__x:hover { background: var(--c-out-soft); color: var(--c-out); }

.p-ws__desk { flex: 1; min-height: 0; overflow: auto; background: var(--c-bg); padding: 10px 14px 16px; }
.p-ws__module { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--c-surface); }
.p-ws__menubar {
    flex: none; height: 30px; display: flex; align-items: stretch; gap: 2px; padding-inline: 6px;
    border-bottom: 1px solid var(--c-border); background: var(--c-surface); position: relative; z-index: 30;
}
.p-ws__mname {
    display: flex; align-items: center; gap: 6px; padding-inline: 4px 10px; margin-inline-end: 4px; font-weight: 700;
    white-space: nowrap; color: var(--mc); border-inline-end: 1px solid var(--c-border);
}
.p-ws__grow { flex: 1; }
.p-ws__q {
    border: 0; background: none; color: var(--c-muted); cursor: pointer; padding-inline: 8px; margin-block: 3px; white-space: nowrap;
    border-radius: var(--radius); display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
}
.p-ws__q:hover { background: var(--c-hover); color: var(--c-text); }
.p-ws__burger { display: none; }
.p-ws__ftabs {
    flex: none; height: 29px; display: flex; align-items: flex-end; gap: 2px; padding-inline: 6px; padding-top: 3px;
    background: var(--c-bg); border-bottom: 1px solid var(--c-border); overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.p-ws__ftab {
    display: flex; align-items: center; gap: 6px; height: 25px; padding-inline: 10px 4px; border: 1px solid var(--c-border); border-bottom: 0;
    border-radius: 4px 4px 0 0; background: var(--c-surface-2); color: var(--c-muted); cursor: pointer; white-space: nowrap;
    font-size: 12.5px; position: relative; top: 1px; user-select: none; max-width: 260px;
}
.p-ws__ftab:hover { color: var(--c-text); }
.p-ws__ftab--on { background: var(--c-surface); color: var(--c-text); font-weight: 500; box-shadow: inset 0 2px 0 var(--mc); }
.p-ws__ftitle { overflow: hidden; text-overflow: ellipsis; }
.p-ws__ficon { width: 13px; height: 13px; flex: none; opacity: .75; }
.p-ws__ftab--on .p-ws__ficon { color: var(--mc); opacity: 1; }
.p-ws__mbadge {
    width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; flex: none; color: #fff;
    background: linear-gradient(135deg, var(--mc), color-mix(in srgb, var(--mc) 70%, #000));
}
.p-ws__mbadge .p-icon { width: 13px; height: 13px; }
.p-ws__dirty { width: 6px; height: 6px; border-radius: 50%; background: var(--c-warn); flex: none; }
.p-ws__body { flex: 1; min-height: 0; display: flex; position: relative; }
.p-ws__side { width: 220px; flex: none; border-inline-end: 1px solid var(--c-border); }
.p-ws__pages { flex: 1; min-width: 0; min-height: 0; position: relative; }
.p-ws__page { position: absolute; inset: 0; overflow: auto; padding: 8px 14px 16px; background: var(--c-surface); }
.p-ws__back {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; padding: 4px 8px; border-radius: var(--radius);
    background: var(--c-info-soft); color: var(--c-text); font-size: var(--fs-small);
}

/* موبایل: منوی آبشاری پنهان، دکمه «منو» درخت را به‌صورت کشو باز می‌کند */
@media (max-width: 760px) {
    .p-ws__bar, .p-ws__mode, .p-ws__mname { display: none; }
    .p-ws__burger { display: inline-flex; }
    .p-ws__side { position: absolute; inset-block: 0; inset-inline-start: 0; z-index: 35; width: min(280px, 85%); box-shadow: 0 10px 28px var(--c-shadow); }
    .p-ws--tree .p-ws__side { display: none; }
    .p-ws--tree .p-ws__module--drawer .p-ws__side { display: block; }
}

/* ---------- نوار عمودی ماژول‌ها (درخواست حسابنگر وب ۱۴۰۵/۰۷/۲۳): WorkspaceHost VerticalModules / ModulesCollapsible / MenuInRail ----------
   ریشه: p-ws--rail (عمودی)، p-ws--pinned (قفل: همیشه باز، محتوا کنارش)، p-ws--menurail (منوی ماژول داخل نوار).
   نکته‌ها: display بخش ماژول‌ها دست نمی‌خورد و [hidden] صریح تکرار شده؛ نوار absolute نمی‌شود (از ستون باریکش با width بیرون می‌زند)؛
   روی نوار منو overflow نیست؛ جهت‌ها منطقی؛ قاعده‌های «جمع» فقط بدون p-ws--pinned؛ همه فقط بالای ۹۰۰ پیکسل. */
.p-ws__micon { display: grid; place-items: center; width: 18px; height: 18px; flex: none; border-radius: 4px; color: #fff; background: var(--mc); }
.p-ws__micon .p-icon { width: 12px; height: 12px; }
@media (min-width: 901px) {
    .p-ws--rail { --p-rail-min: 2.6rem; --p-rail-w: 14rem; display: grid; grid-template-columns: var(--p-rail-min) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
    .p-ws--rail > * { grid-column: 2; grid-row: 1; min-width: 0; min-height: 0; }
    .p-ws--rail > [hidden] { display: none; }
    .p-ws--rail > .p-ws__modules {
        grid-column: 1; width: var(--p-rail-min); min-height: 0; flex-direction: column; align-items: stretch; gap: 2px; padding: 4px;
        border-bottom: 0; border-inline-end: 1px solid var(--c-border); overflow-x: hidden; overflow-y: auto; z-index: 40;
        transition: width .14s ease, box-shadow .14s ease;
    }
    /* باز شدن روی صفحه: با موس یا فوکوس کیبورد (کلیک موس نوار را باز نگه نمی‌دارد) */
    .p-ws--rail:not(.p-ws--pinned) > .p-ws__modules:hover,
    .p-ws--rail:not(.p-ws--pinned) > .p-ws__modules:has(:focus-visible) { width: var(--p-rail-w); box-shadow: 0 6px 20px var(--c-shadow); }
    .p-ws--pinned { grid-template-columns: var(--p-rail-w) minmax(0, 1fr); }
    .p-ws--pinned > .p-ws__modules { width: var(--p-rail-w); }

    .p-ws--rail .p-ws__mtab {
        flex: none; top: 0; height: 28px; padding-inline: 7px 4px; border: 1px solid transparent; border-radius: var(--radius);
    }
    .p-ws--rail .p-ws__mtab--on { background: var(--c-surface); border-color: var(--c-border); box-shadow: none; }
    .p-ws--rail .p-ws__mtab--on::before {
        content: ""; position: absolute; inset-block: 5px; inset-inline-start: 0; width: 3px; border-radius: 2px; background: var(--mc, var(--c-primary));
    }
    .p-ws--rail .p-ws__mtitle { flex: 1; min-width: 0; max-width: none; }
    /* محتوای میزبان در انتهای نوار (ModuleBarEnd) یک‌خطی */
    .p-ws--rail > .p-ws__modules > :not(.p-ws__mtab):not(.p-ws__rtools):not(.p-ws__rmenu) {
        flex: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }

    .p-ws__rtools { display: flex; flex: none; align-items: center; gap: 2px; padding-bottom: 4px; margin-bottom: 2px; border-bottom: 1px solid var(--c-border); }
    .p-ws__rbtn {
        display: grid; place-items: center; flex: none; width: 26px; height: 24px; padding: 0; border: 0; border-radius: var(--radius);
        background: none; color: var(--c-muted); cursor: pointer;
    }
    .p-ws__rbtn:hover { background: var(--c-hover); color: var(--c-text); }
    .p-ws__rbtn--on { background: var(--c-select); color: var(--c-primary); }
    .p-ws__rbtn .p-icon { width: 14px; height: 14px; }

    .p-ws__rmenu { display: flex; flex: 1 0 auto; flex-direction: column; margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--c-border); }
    .p-ws__rmname {
        display: flex; align-items: center; gap: 6px; padding: 0 4px 6px; font-weight: 700; color: var(--mc);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .p-ws__rmenu .p-mtree { background: transparent; overflow: visible; padding-bottom: 6px; }
    .p-ws__rmenu .p-mtree__group:last-child { border-bottom: 0; }
    .p-ws__rend { display: flex; flex-wrap: wrap; gap: 2px; padding-top: 6px; border-top: 1px solid var(--c-border); }

    /* جمع (فقط بدون قفل): نشان/آیکن ماژول و دکمه قفل */
    .p-ws--rail:not(.p-ws--pinned) > .p-ws__modules:not(:hover):not(:has(:focus-visible)) :is(.p-ws__mtitle, .p-ws__x, .p-ws__rmenu) { display: none; }
    .p-ws--rail:not(.p-ws--pinned) > .p-ws__modules:not(:hover):not(:has(:focus-visible)) .p-ws__rtools > :not(.p-ws__rbtn--pin) { display: none; }
    .p-ws--rail:not(.p-ws--pinned) > .p-ws__modules:not(:hover):not(:has(:focus-visible)) :is(.p-ws__mtab, .p-ws__rtools) { justify-content: center; padding-inline: 0; }

    /* منو داخل نوار: نوار منوی بالا و درخت کناری برداشته می‌شوند */
    .p-ws--menurail .p-ws__menubar, .p-ws--menurail .p-ws__side { display: none; }
}
@media (max-width: 900px) {
    .p-ws__rtools, .p-ws__rmenu, .p-ws__layout { display: none; }
}

/* جا شدن عنوان‌های منوی آبشاری: کوچک شدن خود دکمه‌ها (بی overflow روی نوار تا بازشونده بریده نشود) */
.p-ws__menubar > .p-menubar, .p-ws__menubar > .p-menubar > .p-menubar__top { min-width: 0; }
.p-ws__menubar > .p-menubar > .p-menubar__top > .p-menubar__btn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- هدر جمع‌شونده پوسته میزبان — AutoHideHeader (همان درخواست) ----------
   قاب در جریان گرید می‌ماند (ردیف auto)؛ فقط لبه --p-autohide-edge دیده می‌شود و هدر با transform بالا می‌رود. */
.p-autohide { position: relative; z-index: 70; min-width: 0; }
@media (min-width: 901px) {
    .p-autohide--on { height: var(--p-autohide-edge, 6px); background: var(--c-header); }
    .p-autohide--on > * {
        position: absolute; inset-inline: 0; top: 0; transform: translateY(calc(var(--p-autohide-edge, 6px) - 100%));
        transition: transform .16s ease .25s;
    }
    /* ناحیه حساس کمی پهن‌تر از لبه */
    .p-autohide--on::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 12px; }
    /* دستگیره لبه */
    .p-autohide--on::after {
        content: ""; position: absolute; bottom: 0; inset-inline: 0; z-index: 1; width: 56px; height: 4px; margin-inline: auto;
        border-radius: 0 0 3px 3px; background: color-mix(in srgb, var(--c-header-fg) 45%, transparent); pointer-events: none; transition: opacity .12s;
    }
    .p-autohide--on:hover > *, .p-autohide--on:focus-within > *, .p-autohide--hold > * {
        transform: none; transition-delay: 0s; box-shadow: 0 6px 18px var(--c-shadow);
    }
    .p-autohide--on:hover::after, .p-autohide--on:focus-within::after, .p-autohide--hold::after { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .p-autohide--on > *, .p-ws--rail > .p-ws__modules { transition: none; }
}

/* ---------- ProgressBar ---------- */
.p-progress { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.p-progress__track { flex: 1 1 auto; block-size: 10px; background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; position: relative; }
.p-progress__bar { block-size: 100%; inline-size: 0; background: var(--c-primary); transition: inline-size .4s ease; }
.p-progress--busy .p-progress__bar { inline-size: 30%; position: absolute; animation: p-progress-busy 1.2s ease-in-out infinite; }
.p-progress__text { flex: 0 1 auto; font-size: var(--fs-small); color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-inline-size: 60%; }
.p-progress__percent { font-weight: 600; color: var(--c-text); margin-inline-end: 6px; }
@keyframes p-progress-busy { 0% { inset-inline-start: -30%; } 100% { inset-inline-start: 100%; } }
@media (prefers-reduced-motion: reduce) { .p-progress__bar, .p-progress--busy .p-progress__bar { transition: none; animation: none; } }

/* ---------- SqlConnectionDialog ---------- */
.p-sqlconn__actions { display: flex; gap: 6px; margin: 6px 0; }
.p-sqlconn__save { display: flex; flex-direction: column; gap: 4px; }
.p-sqlconn__status { font-size: var(--fs-small); color: var(--c-muted); margin: 4px 0; }

/* ---------- چاپ (ZanaJs.PrintAsync) ---------- */
body.p-print { background: #fff; color: #000; overflow: visible; block-size: auto; margin: 0; padding: 0; }
body.p-print .p-table-wrap { overflow: visible; max-block-size: none; border: 0; }
body.p-print table { inline-size: 100%; border-collapse: collapse; }
body.p-print thead { display: table-header-group; }
body.p-print tfoot { display: table-footer-group; }
body.p-print tr { break-inside: avoid; }
body.p-print .p-noprint { display: none !important; }
.p-printonly { display: none; }
body.p-print .p-printonly { display: block; }
@media print {
    @page { size: A4; margin: 10mm; }
    .p-noprint { display: none !important; }
}

/* ---------- MultiSelect ---------- */
.p-multisel { position: relative; }
.p-multisel__btn { display: flex; align-items: center; justify-content: space-between; gap: 6px; inline-size: 100%; min-inline-size: 140px; cursor: pointer; text-align: start; }
.p-multisel__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-multisel__popup { min-inline-size: 240px; max-inline-size: 420px; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.p-multisel__search { inline-size: 100%; }
.p-multisel__actions { display: flex; gap: 12px; padding: 2px 4px; }
.p-multisel__link { background: none; border: 0; padding: 0; color: var(--c-primary); cursor: pointer; font: inherit; font-size: var(--fs-small); }
.p-multisel__list { max-block-size: 300px; overflow: auto; }
.p-multisel__group, .p-multisel__item { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: var(--radius); cursor: pointer; }
.p-multisel__group { font-weight: 600; margin-block-start: 4px; }
.p-multisel__item--nested { padding-inline-start: 22px; }
.p-multisel__group:hover, .p-multisel__item:hover { background: var(--c-surface-2); }
.p-dropdown { position: relative; display: inline-flex; }
.p-dropdown__btn { padding-inline: 4px; }
.p-dropdown__menu { min-inline-size: 200px; padding: 4px; display: flex; flex-direction: column; outline: none; z-index: 60; }
.p-dropdown__item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border: 0; background: none; border-radius: var(--radius); cursor: pointer; font: inherit; color: inherit; text-align: start; }
.p-dropdown__item:disabled { opacity: .45; cursor: default; }
.p-dropdown__item--active:not(:disabled) { background: var(--c-surface-2); }
.p-dropdown__icon { inline-size: 16px; display: inline-flex; }
.p-dropdown__text { flex: 1; }
.p-dropdown__sep { block-size: 1px; background: var(--c-border); margin: 4px 2px; }


/* ---------- نمودار (Chart): SVG بی‌کتابخانه؛ رنگ سری‌ها از پالت کاشی‌ها ---------- */
.p-chart { margin: 8px 0; padding: 8px 10px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); }
.p-chart__title { font-weight: 600; margin-block-end: 6px; }
/* ناحیه رسم: SVG کش می‌آید؛ متن، نقطه و ضخامت خط پیکسل واقعی (بی‌کشیدگی در هر پهنا) */
.p-chart__plot { position: relative; block-size: var(--p-chart-h, 220px); padding: 10px 10px 26px 72px; box-sizing: border-box; direction: ltr; }
.p-chart__plot--rtl { padding: 10px 72px 26px 10px; }
.p-chart__area { position: relative; block-size: 100%; }
.p-chart__svg { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; overflow: visible; }
.p-chart__grid { stroke: var(--c-border); stroke-width: 1px; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.p-chart__zero { stroke: var(--c-muted); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.p-chart__axis, .p-chart__label { position: absolute; color: var(--c-muted); font-size: 11px; font-family: var(--font); line-height: 1; white-space: nowrap; pointer-events: none; }
.p-chart__axis { right: calc(100% + 6px); transform: translateY(-50%); text-align: end; }
.p-chart__plot--rtl .p-chart__axis { right: auto; left: calc(100% + 6px); text-align: start; }
.p-chart__plot--rtl .p-chart__axis, .p-chart__plot--rtl .p-chart__label { direction: rtl; }
.p-chart__label { top: calc(100% + 8px); transform: translateX(-50%); }
.p-chart__plot { container-type: inline-size; }
@container (max-width: 960px) { .p-chart__label--odd { display: none; } }
@container (max-width: 520px) { .p-chart__label--q { display: none; } }
.p-chart__line { fill: none; stroke-width: 2px; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.p-chart__svg .p-chart__bar { stroke: var(--c-surface); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.p-chart__dot { position: absolute; inline-size: 8px; block-size: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--p-chart-color, var(--c-primary));
    box-shadow: 0 0 0 2px var(--c-surface); cursor: default; }
.p-chart__dot::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
.p-chart__dot:hover { transform: scale(1.35); }
.p-chart__empty { color: var(--c-muted); padding: 24px; text-align: center; }

/* ---------- نقشه (MapView — PUX.12) ---------- */
.p-map { position: relative; overflow: hidden; direction: ltr; block-size: var(--p-map-h, 420px); background: var(--c-surface-2, var(--c-bg));
    border: 1px solid var(--c-border); border-radius: var(--radius); touch-action: none; user-select: none; cursor: grab; outline: none; }
.p-map:focus-visible { box-shadow: 0 0 0 2px var(--c-focus); }
.p-map:active { cursor: grabbing; }
.p-map__tiles { position: absolute; inset: 0; }
.p-map__tile { position: absolute; left: 0; top: 0; inline-size: 256px; block-size: 256px; opacity: 0; transition: opacity .15s; pointer-events: none; max-width: none; }
.p-map__tile.is-loaded { opacity: 1; }
.p-map__svg { position: absolute; inset: 0; overflow: visible; }
.p-map__path { fill: none; stroke-width: 4; stroke-opacity: .75; stroke-linejoin: round; stroke-linecap: round; stroke: var(--p-map-c); }
.p-map__pin { fill: var(--p-map-c); fill-opacity: .88; stroke: var(--c-surface); stroke-width: 2; cursor: pointer; }
.p-map__pin:hover { fill-opacity: 1; stroke-width: 3; }
.p-map__pin--ring { fill-opacity: .55; stroke: var(--p-map-c); stroke-width: 2; }
.p-map__area { fill: var(--p-map-c); fill-opacity: .14; fill-rule: evenodd; stroke: var(--p-map-c); stroke-width: 2; stroke-opacity: .85;
    stroke-linejoin: round; cursor: pointer; }
.p-map__area:hover { fill-opacity: .24; }
.p-map--editing .p-map__area { cursor: crosshair; }
.p-map--editing { cursor: crosshair; }
.p-map__edit { fill: none; stroke: var(--p-map-c, var(--c-accent)); stroke-width: 3; stroke-dasharray: 6 4; stroke-linejoin: round; pointer-events: none; }
.p-map__edit--area { fill: var(--p-map-c, var(--c-accent)); fill-opacity: .16; }
.p-map__vtx { fill: var(--c-surface); stroke: var(--p-map-c, var(--c-accent)); stroke-width: 3; cursor: move; touch-action: none; }
.p-map__vtx--last { fill: var(--p-map-c, var(--c-accent)); }
.p-map__mid { fill: var(--p-map-c, var(--c-accent)); fill-opacity: .35; stroke: var(--c-surface); stroke-width: 1; cursor: copy; touch-action: none; }
.p-map__cross { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 22px; block-size: 22px; margin: -11px 0 0 -11px;
    pointer-events: none; background: linear-gradient(var(--c-text), var(--c-text)) center / 2px 100% no-repeat,
    linear-gradient(var(--c-text), var(--c-text)) center / 100% 2px no-repeat; opacity: .55; }
.p-map__cross[hidden], .p-map__btn[hidden] { display: none; }
.p-map--primary { --p-map-c: var(--c-primary); }
.p-map--ok { --p-map-c: var(--c-in); }
.p-map--bad { --p-map-c: var(--c-out); }
.p-map--warn { --p-map-c: var(--c-warn); }
.p-map--info { --p-map-c: var(--c-info); }
.p-map--muted { --p-map-c: var(--c-muted); }
.p-map--accent { --p-map-c: var(--c-accent); }
.p-map__tools { position: absolute; inset-block-start: 8px; inset-inline-start: 8px; display: flex; flex-direction: column; gap: 4px; }
.p-map__btn { inline-size: 30px; block-size: 30px; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface);
    color: var(--c-text); font: 600 16px/1 var(--font); cursor: pointer; box-shadow: 0 1px 3px var(--c-shadow); }
.p-map__btn:hover { background: var(--c-hover); }
.p-map__btn:focus-visible { outline: 2px solid var(--c-focus); }
.p-map__attr { position: absolute; inset-block-end: 0; inset-inline-end: 0; padding: 1px 6px; font-size: 10px; color: var(--c-muted);
    background: var(--c-surface); opacity: .85; pointer-events: none; }
.p-map__pop { position: absolute; left: 0; top: 0; min-inline-size: 140px; max-inline-size: 260px; padding: 8px 26px 8px 10px; direction: rtl;
    text-align: start; background: var(--c-surface); color: var(--c-text); border: 1px solid var(--c-border); border-radius: var(--radius);
    box-shadow: 0 2px 8px var(--c-shadow); font-size: var(--fs-small); cursor: auto; user-select: text; }
.p-map__pop[hidden] { display: none; }
.p-map__pop-title { display: block; font-size: var(--fs); margin-block-end: 2px; }
.p-map__pop-note { color: var(--c-muted); }
.p-map__pop-x { position: absolute; inset-block-start: 2px; left: 4px; border: 0; background: none; color: var(--c-muted); font-size: 16px; cursor: pointer; }
.p-chart__legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-block-start: 6px; font-size: var(--fs-small); color: var(--c-muted); }
.p-chart__key { display: inline-flex; align-items: center; gap: 5px; }
.p-chart__swatch { inline-size: 10px; block-size: 10px; border-radius: 2px; display: inline-block; }
.p-chart__c1 { fill: var(--c-tile-1); stroke: var(--c-tile-1); --p-chart-color: var(--c-tile-1); } .p-chart__swatch.p-chart__c1 { background: var(--c-tile-1); }
.p-chart__c2 { fill: var(--c-tile-2); stroke: var(--c-tile-2); --p-chart-color: var(--c-tile-2); } .p-chart__swatch.p-chart__c2 { background: var(--c-tile-2); }
.p-chart__c3 { fill: var(--c-tile-3); stroke: var(--c-tile-3); --p-chart-color: var(--c-tile-3); } .p-chart__swatch.p-chart__c3 { background: var(--c-tile-3); }
.p-chart__c4 { fill: var(--c-tile-4); stroke: var(--c-tile-4); --p-chart-color: var(--c-tile-4); } .p-chart__swatch.p-chart__c4 { background: var(--c-tile-4); }
.p-chart__c5 { fill: var(--c-tile-5); stroke: var(--c-tile-5); --p-chart-color: var(--c-tile-5); } .p-chart__swatch.p-chart__c5 { background: var(--c-tile-5); }
.p-chart__c6 { fill: var(--c-tile-6); stroke: var(--c-tile-6); --p-chart-color: var(--c-tile-6); } .p-chart__swatch.p-chart__c6 { background: var(--c-tile-6); }
.p-chart__c7 { fill: var(--c-tile-7); stroke: var(--c-tile-7); --p-chart-color: var(--c-tile-7); } .p-chart__swatch.p-chart__c7 { background: var(--c-tile-7); }
.p-chart__c8 { fill: var(--c-tile-8); stroke: var(--c-tile-8); --p-chart-color: var(--c-tile-8); } .p-chart__swatch.p-chart__c8 { background: var(--c-tile-8); }
.p-chart__c9 { fill: var(--c-tile-9); stroke: var(--c-tile-9); --p-chart-color: var(--c-tile-9); } .p-chart__swatch.p-chart__c9 { background: var(--c-tile-9); }
.p-chart__c10 { fill: var(--c-tile-10); stroke: var(--c-tile-10); --p-chart-color: var(--c-tile-10); } .p-chart__swatch.p-chart__c10 { background: var(--c-tile-10); }
.p-chart__line.p-chart__c1, .p-chart__line.p-chart__c2, .p-chart__line.p-chart__c3, .p-chart__line.p-chart__c4, .p-chart__line.p-chart__c5,
.p-chart__line.p-chart__c6, .p-chart__line.p-chart__c7, .p-chart__line.p-chart__c8, .p-chart__line.p-chart__c9, .p-chart__line.p-chart__c10 { fill: none; }
.p-chart__svg .p-chart__slice { fill: none; }
.p-chart__svg .p-chart__track { stroke: var(--c-border); }
.p-chart__center { fill: var(--c-text); font-size: 13px; font-weight: 700; font-family: var(--font); }
.p-chart__donut { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* حلقه‌ای جای خودش را در جریان صفحه دارد (نه مطلق مثل ناحیه رسم ستونی/خطی — PUX.13 آن را روی راهنما می‌انداخت) */
.p-chart__svg.p-chart__svg--donut { position: static; inset: auto; flex: none; inline-size: min(var(--p-chart-h, 220px), 100%); block-size: auto; aspect-ratio: 1; overflow: hidden; }
.p-chart__legend--donut { flex-direction: column; flex: 1; min-inline-size: 180px; }
.p-chart__legend--donut b { color: var(--c-text); font-weight: 600; margin-inline-start: 6px; }

/* ---------- منوی راست‌کلیک (ContextMenu) ---------- */
.p-contextmenu { position: fixed; z-index: 80; max-block-size: calc(100vh - 8px); overflow-y: auto; }
.p-contextmenu__title { padding: 4px 8px 6px; font-weight: 600; color: var(--c-muted); font-size: var(--fs-small); border-block-end: 1px solid var(--c-border); margin-block-end: 4px; }

/* ---------- نوارهای افقی تب (پنجره‌ها و ماژول‌ها) ----------
   نوار پیمایش پنهان: در ویندوز (نوار شناور Edge/Chrome) روی عنوان تب‌ها می‌افتاد و آن‌ها را می‌پوشاند.
   پیمایش با چرخ موس (zana-blazor.js)، لمس یا صفحه لمسی؛ تب فعال خودکار در دید می‌آید. نوار تازه: کلاس p-hstrip. */
.p-ws__modules::-webkit-scrollbar, .p-ws__ftabs::-webkit-scrollbar, .p-hstrip::-webkit-scrollbar { display: none; }
.p-hstrip { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }


/* ── پنل راهنمای F1 مشترک (گام Z3a — از حسابنگر وب P15): سمت پایان سطر (چپ در راست‌به‌چپ) کنار فرم؛ تمام‌صفحه با فهرست ── */
.p-help {
    position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 950; width: min(560px, 92vw);
    display: flex; flex-direction: column; background: var(--c-surface); color: var(--c-text);
    border-inline-start: 1px solid var(--c-border); box-shadow: 0 0 28px var(--c-shadow);
}
.p-help--full { width: 100vw; border-inline-start: 0; box-shadow: none; }
.p-help__head {
    display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--c-border);
    background: var(--c-surface-2); color: var(--c-primary);
}
.p-help__title { margin: 0; font-size: var(--fs-title); flex: 1; min-width: 0; color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-help__btn {
    border: 0; background: none; color: var(--c-muted); cursor: pointer; padding: 4px 6px; border-radius: var(--radius);
    display: inline-flex; align-items: center;
}
.p-help__btn:hover, .p-help__btn:focus-visible, .p-help__btn[aria-pressed="true"] { background: var(--c-hover); color: var(--c-text); outline: none; }
.p-help__close:hover { background: var(--c-out-soft); color: var(--c-out); }
.p-help__body { flex: 1; min-height: 0; display: flex; }
.p-help__toc {
    width: 260px; flex: none; overflow: auto; padding: 10px; border-inline-end: 1px solid var(--c-border);
    display: flex; flex-direction: column; gap: 2px; background: var(--c-surface);
}
.p-help:not(.p-help--full) .p-help__toc { width: 200px; }
.p-help__search { margin-bottom: 6px; }
.p-help__chapter { margin: 10px 0 2px; font-size: var(--fs-small); color: var(--c-muted); }
.p-help__topic {
    border: 0; background: none; text-align: start; padding: 4px 8px; border-radius: var(--radius); cursor: pointer;
    color: var(--c-text); font: inherit; display: flex; flex-direction: column; gap: 2px;
}
.p-help__topic:hover, .p-help__topic:focus-visible { background: var(--c-hover); outline: none; }
.p-help__topic--on { background: var(--c-primary); color: var(--c-primary-fg); }
.p-help__snippet { font-size: var(--fs-small); color: var(--c-muted); }
.p-help__topic--on .p-help__snippet { color: inherit; }
.p-help__doc { flex: 1; min-width: 0; overflow: auto; padding: 14px 20px 30px; }
.p-help__doc:focus { outline: none; }
.p-help--full .p-help__doc .p-md { max-width: 900px; margin-inline: auto; }
.p-help__crumb { font-size: var(--fs-small); margin-bottom: 6px; }
.p-help__keys-title { margin-top: 24px; }
.p-help__group { margin: 10px 0 4px; color: var(--c-primary); }
.p-help__table { width: 100%; }
.p-help__key { width: 200px; color: var(--c-muted); white-space: nowrap; }
.p-help__nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 24px; padding-top: 10px; border-top: 1px solid var(--c-border); }
@media (max-width: 720px) {
    .p-help__toc { display: none; }
    .p-help--full .p-help__toc { display: flex; width: 40vw; }
}
@media print { .p-help { display: none; } }

/* ---------- Z3b: کنترل دکمه‌ای (Segmented) ---------- */
.p-seg { display: inline-flex; border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; }
.p-seg--wrap { flex-wrap: wrap; }
.p-seg__btn { border: 0; background: var(--c-surface); color: var(--c-text); height: 24px; padding-inline: 8px; cursor: pointer; font: inherit; font-size: 12px; }
.p-seg__btn + .p-seg__btn { border-inline-start: 1px solid var(--c-border); }
.p-seg__btn:hover:not(:disabled):not(.p-seg__btn--on) { background: var(--c-hover); }
.p-seg__btn--on { background: var(--c-primary); color: var(--c-primary-fg); }
.p-seg__btn:disabled { opacity: .5; cursor: not-allowed; }
.p-seg__btn:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; }

/* ---------- Z3b: جستجوی سراسری (CommandPalette) ---------- */
.p-pal {
    width: min(580px, 100%); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 5px;
    box-shadow: 0 14px 40px var(--c-shadow); overflow: hidden;
}
.p-pal__input {
    border: 0; border-block-end: 1px solid var(--c-border); height: 40px; width: 100%; padding-inline: 12px;
    background: var(--c-surface); color: var(--c-text); font: inherit; font-size: 14px;
}
.p-pal__input:focus { outline: none; }
.p-pal__list { max-height: min(460px, 65vh); overflow: auto; }
.p-pal__group {
    padding: 6px 12px 2px; font-size: 11px; font-weight: 600; color: var(--c-muted); border-block-start: 1px solid var(--c-border); background: var(--c-surface-2);
}
.p-pal__group:first-child { border-block-start: 0; }
.p-pal__item { display: flex; gap: 10px; align-items: center; padding: 6px 12px; cursor: pointer; }
.p-pal__item--active, .p-pal__item:hover { background: var(--c-select); }
.p-pal__item--muted .p-pal__title { color: var(--c-muted); }
.p-pal__dot { width: 8px; height: 8px; border-radius: 2px; background: var(--p-pal-dot, var(--c-primary)); flex: none; }
.p-pal__text { display: flex; flex-direction: column; min-width: 0; }
.p-pal__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-pal__hint { font-size: var(--fs-small); color: var(--c-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-pal__badge { margin-inline-start: auto; color: var(--c-muted); font-size: var(--fs-small); white-space: nowrap; }
.p-pal__empty { padding: 10px 12px; color: var(--c-muted); }
.p-pal__foot { padding: 4px 12px; font-size: 11px; color: var(--c-muted); background: var(--c-surface-2); border-block-start: 1px solid var(--c-border); }

/* ---------- Z3b: تب‌های ماه (MonthTabs) ---------- */
.p-mtab { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.p-mtab__tab {
    height: 26px; padding-inline: 12px; border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text);
    font: inherit; font-size: var(--fs-small); border-radius: 13px; cursor: pointer;
}
.p-mtab__tab:hover { background: var(--c-hover); }
.p-mtab__tab--on, .p-mtab__tab--on:hover { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-primary-fg); font-weight: 500; }
.p-mtab__tab:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 1px; }
.p-mtab__year { margin-inline-start: 3px; font-size: var(--fs-small); opacity: .7; }
.p-mtab__range { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin-inline-start: 8px; }
.p-mtab__range > .p-field { width: 10rem; }

/* ---------- Z3d: دیالوگ نشسته در تب (Modal Docked) — فرم پیچیده همه فضای تب را می‌گیرد، تب «فهرست» بالایش ---------- */
.p-ws__page:has(.p-dock--on) { overflow: hidden; }
.p-ws__page:has(.p-dock__return) { padding-block-start: 44px; }
.p-dock {
    position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; min-height: 0;
    background: var(--c-bg, var(--c-surface));
}
.p-dock[hidden] { display: none; }
.p-dock__bar {
    display: flex; align-items: flex-end; gap: 3px; padding: 6px 10px 0; flex: none;
    background: var(--c-surface-2); border-block-end: 1px solid var(--c-border);
}
.p-dock__tab {
    display: inline-flex; align-items: center; gap: 6px; height: 28px; padding-inline: 12px; max-width: 40%;
    border: 1px solid var(--c-border); border-block-end: 0; border-radius: 6px 6px 0 0;
    background: var(--c-surface-2); color: var(--c-muted); font: inherit; font-size: var(--fs-small); cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.p-dock__tab:hover { background: var(--c-hover); color: var(--c-text); }
.p-dock__tab--on, .p-dock__tab--on:hover {
    background: var(--c-surface); color: var(--c-text); font-weight: 600; cursor: default;
    margin-block-end: -1px; border-block-start: 2px solid var(--c-primary);
}
.p-dock__tab .p-icon { width: 13px; height: 13px; flex: none; }
.p-dock__tab:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; }
.p-dialog.p-dialog--docked {
    flex: 1 1 auto; min-height: 0; width: auto !important; height: auto !important; max-width: none !important; max-height: none !important;
    margin: 0; position: relative; inset: auto; border: 0; border-radius: 0; box-shadow: none; animation: none;
}
.p-dialog--docked .p-dialog__head { border-radius: 0; cursor: default; }
.p-dialog--docked .p-dialog__body { flex: 1 1 auto; min-height: 0; overflow: auto; }
.p-dialog--docked .p-dialog__foot { border-radius: 0; }
.p-dock__return {
    position: absolute; inset-block-start: 6px; inset-inline: 14px; z-index: 30;
    display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 10px;
    background: color-mix(in srgb, var(--c-primary) 10%, var(--c-surface)); border: 1px solid color-mix(in srgb, var(--c-primary) 35%, var(--c-border));
    border-radius: var(--radius);
}
.p-dock__return > .p-icon { color: var(--c-primary); flex: none; }
.p-dock__return-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }

/* ---------- Z5: نمودار حرفه‌ای — کلیک برای جزئیات، راهنمای شناور، ناحیه‌ای، ستونی افقی، دایره‌ای، سری مقایسه ---------- */
.p-chart__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-block-end: 6px; }
.p-chart__head .p-chart__title { flex: 1; min-width: 0; margin: 0; }
.p-chart__kinds .p-seg__btn { height: 22px; font-size: 11px; padding-inline: 6px; }
.p-chart__plot:focus-visible, .p-chart__hbars:focus-visible, .p-chart__donut:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; border-radius: var(--radius); }
.p-chart__plot, .p-chart__hbars, .p-chart__donut { outline: none; }
.p-chart__band { fill: var(--c-select); opacity: .55; }
.p-chart__hit { fill: transparent; stroke: none; }
.p-chart--click .p-chart__hit, .p-chart--click .p-chart__hrow, .p-chart--click .p-chart__slice,
.p-chart--click .p-chart__legend--donut .p-chart__key { cursor: pointer; }
.p-chart__fill { stroke: none; fill-opacity: .18; }
.p-chart__line--dashed { stroke-dasharray: 6 4; }
.p-chart__svg .p-chart__bar--ghost { fill-opacity: .38; }
.p-chart__bar { transition: fill-opacity .12s; }
.p-chart__dot--on { transform: scale(1.45); }
.p-chart__dot--ghost { background: var(--c-surface); border: 2px solid var(--p-chart-color, var(--c-primary)); box-sizing: border-box; }
.p-chart__label--on { color: var(--c-text); font-weight: 700; }
.p-chart__vlabel { position: absolute; transform: translate(-50%, -125%); font-size: 10px; color: var(--c-muted); white-space: nowrap; pointer-events: none; font-family: var(--font); }
.p-chart__vlabel--neg { transform: translate(-50%, 25%); }
.p-chart__tip {
    position: absolute; top: 0; z-index: 3; transform: translateX(8px); min-inline-size: 140px; max-inline-size: 260px; direction: rtl;
    padding: 6px 8px; background: var(--c-surface); color: var(--c-text); border: 1px solid var(--c-border); border-radius: var(--radius);
    box-shadow: 0 4px 14px var(--c-shadow); font-size: var(--fs-small); pointer-events: none; display: grid; gap: 3px;
}
.p-chart__tip--left { transform: translateX(calc(-100% - 8px)); }
.p-chart__plot:not(.p-chart__plot--rtl) .p-chart__tip { direction: ltr; }
.p-chart__tip-row { display: flex; align-items: center; gap: 6px; }
.p-chart__tip-name { flex: 1; color: var(--c-muted); }
.p-chart__tip-val { font-weight: 600; font-variant-numeric: tabular-nums; }
.p-chart__tip-hint { color: var(--c-primary); font-size: 10.5px; }
.p-chart__key--btn { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; padding: 1px 4px; border-radius: 3px; }
.p-chart__key--btn:hover { background: var(--c-hover); color: var(--c-text); }
.p-chart__key--btn:focus-visible { outline: 2px solid var(--c-focus); }
.p-chart__key--off { opacity: .45; text-decoration: line-through; }
.p-chart__swatch--ghost { opacity: .45; }
.p-chart__key--on { color: var(--c-text); background: var(--c-select); border-radius: 3px; }
.p-chart__svg .p-chart__slice { transition: stroke-width .12s, opacity .12s; }
.p-chart__svg .p-chart__slice--on { opacity: .85; }
/* ستونی افقی: ردیف = برچسب | نوار | مقدار */
.p-chart__hbars { display: grid; gap: 2px; max-block-size: var(--p-chart-hmax, 320px); overflow: auto; padding: 2px; }
.p-chart__hrow { display: grid; grid-template-columns: minmax(80px, 28%) 1fr auto; align-items: center; gap: 8px; padding: 2px 4px; border-radius: 3px; }
.p-chart__hrow:hover, .p-chart__hrow--on { background: var(--c-select); }
.p-chart__hlabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-small); }
.p-chart__htrack { position: relative; display: flex; flex-direction: column; gap: 2px; block-size: 100%; min-block-size: 14px; justify-content: center; }
.p-chart__hbar { position: relative; display: block; block-size: 10px; border-radius: 2px; background: var(--p-chart-color, var(--c-primary)); min-inline-size: 0; }
.p-chart__hbar--ghost { opacity: .4; }
.p-chart__hzero { position: absolute; inset-block: 0; inline-size: 1px; background: var(--c-muted); }
.p-chart__hval { display: grid; text-align: end; font-size: var(--fs-small); font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-chart__hval--ghost { color: var(--c-muted); }

/* ---------- Z3c: نوار وضعیت پوسته (StatusBar) ---------- */
.p-sb {
    background: var(--c-surface-2); border-top: 1px solid var(--c-border); display: flex; align-items: center; gap: 14px;
    padding-inline: 10px; font-size: 11.5px; color: var(--c-muted); white-space: nowrap; overflow: hidden; min-block-size: 22px;
}
.p-sb b { font-weight: 500; color: var(--c-text); }
.p-sb__grow { flex: 1; }
.p-sb__conn { display: inline-flex; align-items: center; }
.p-sb__dot { display: inline-block; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--c-muted); margin-inline-end: 5px; }
.p-sb__conn--online .p-sb__dot { background: var(--c-in); }
.p-sb__conn--offline { color: var(--c-out); }
.p-sb__conn--offline .p-sb__dot { background: var(--c-out); }
.p-sb__act { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: 0 4px; border-radius: var(--radius); }
.p-sb__act:hover { background: var(--c-hover); }
.p-sb__act:focus-visible { outline: 2px solid var(--c-focus); }

/* ---------- Z3c: قاب منوی کاربر (UserMenuPanel) ---------- */
.p-pop {
    position: absolute; inset-block-start: 34px; inset-inline-end: 0; inline-size: 310px; z-index: 950; background: var(--c-surface); color: var(--c-text);
    border: 1px solid var(--c-border); border-radius: 5px; box-shadow: 0 10px 28px var(--c-shadow); padding: 10px; display: grid; gap: 8px;
    max-block-size: calc(100vh - 60px); overflow: auto;
}
.p-pop__user { display: flex; flex-direction: column; }
.p-pop__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.p-pop__row--wrap { flex-wrap: wrap; justify-content: flex-start; }
.p-pop__row--stack { flex-direction: column; align-items: stretch; gap: 4px; }
.p-pop__row--stack .p-seg { align-self: flex-start; }
.p-pop__sep { border: 0; border-top: 1px solid var(--c-border); margin: 0; inline-size: 100%; }

/* ---------- Z3c: سربرگ پوسته (ShellHeader) — ۴۰px، رنگ از --c-header ---------- */
.p-hd {
    background: var(--c-header); color: var(--c-header-fg); display: flex; align-items: center; gap: 8px;
    padding-inline: 8px; min-inline-size: 0; position: relative; z-index: 50; block-size: 40px;
}
.p-hd__brand { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-weight: 700; }
.p-hd__logo {
    inline-size: 24px; block-size: 24px; border-radius: 4px; background: var(--c-accent); color: var(--c-accent-fg);
    display: grid; place-items: center; font-weight: 700; font-size: 13px; direction: ltr;
}
.p-hd__sep { inline-size: 1px; block-size: 22px; background: color-mix(in srgb, var(--c-header-fg) 25%, transparent); }
.p-hd__ctx {
    block-size: 28px; border: 0; border-radius: var(--radius); background: transparent; color: var(--c-header-muted);
    display: inline-flex; align-items: center; gap: 5px; padding-inline: 6px; cursor: pointer; white-space: nowrap; font: inherit; font-size: 12px; min-inline-size: 0;
}
.p-hd__ctx b { color: var(--c-header-fg); font-weight: 500; }
.p-hd__ctx:hover { background: color-mix(in srgb, var(--c-header-fg) 14%, transparent); }
.p-hd__ctx .p-icon { inline-size: 14px; block-size: 14px; }
.p-hd__chip { display: inline-flex; align-items: center; gap: 4px; color: var(--c-header-muted); font-size: 12px; white-space: nowrap; }
.p-hd__chip b { color: var(--c-header-fg); font-weight: 500; }
.p-hd__caret { inline-size: 12px; block-size: 12px; }
.p-hd .p-hd__ctx .p-hd__caret { inline-size: 12px; block-size: 12px; }
.p-hd__badge { padding: 0 6px; border-radius: 9px; background: var(--c-warn); color: var(--c-accent-fg); font-size: 11px; font-weight: 500; }
.p-hd__grow { flex: 1; min-inline-size: 0; }
.p-hd__search {
    block-size: 26px; min-inline-size: 220px; border: 1px solid color-mix(in srgb, var(--c-header-fg) 30%, transparent);
    background: color-mix(in srgb, var(--c-header-fg) 8%, transparent); color: var(--c-header-muted); font: inherit;
    border-radius: var(--radius); padding-inline: 8px; display: flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap;
}
.p-hd__search-text { flex: 1; text-align: start; }
.p-hd__btn {
    position: relative; block-size: 28px; min-inline-size: 28px; padding-inline: 6px; border: 0; border-radius: var(--radius); background: transparent;
    color: var(--c-header-fg); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; white-space: nowrap; font: inherit;
}
.p-hd__btn:hover { background: color-mix(in srgb, var(--c-header-fg) 14%, transparent); }
.p-hd__btn:focus-visible, .p-hd__ctx:focus-visible, .p-hd__search:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }
.p-hd__btn--on { color: var(--c-accent); }
.p-hd__count {
    position: absolute; inset-block-start: 1px; inset-inline-start: 1px; min-inline-size: 15px; block-size: 15px; border-radius: 8px; background: var(--c-out);
    color: #fff; font-size: 10px; line-height: 15px; text-align: center; padding-inline: 3px;
}
.p-hd__user-wrap { position: relative; }
.p-hd__user { max-inline-size: 220px; }
.p-hd__user-name { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .p-hd__ctx-opt, .p-hd__search-text, .p-hd__user-name { display: none; } .p-hd__search { min-inline-size: 0; } }

/* ---------- Z3c: کاشی‌ها و خانه ماژول (ModuleHomeView) — همه رنگ‌ها از --mc (رنگ ماژول) و توکن‌های روشن/تیره ---------- */
.p-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.p-tile {
    display: flex; gap: 10px; align-items: flex-start; padding: 10px; border: 1px solid var(--c-border); border-radius: 10px;
    background: var(--c-surface); color: var(--c-text); text-align: start; cursor: pointer; box-shadow: inset 0 3px 0 var(--mc);
    transition: transform .15s ease, box-shadow .15s ease;
}
.p-tile:hover:not(:disabled), .p-tile:focus-visible {
    transform: translateY(-2px); border-color: color-mix(in srgb, var(--mc) 45%, var(--c-border));
    box-shadow: inset 0 3px 0 var(--mc), 0 6px 16px color-mix(in srgb, var(--mc) 18%, var(--c-shadow));
}
.p-tile__icon {
    width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex: none; color: var(--c-on-hero);
    background: linear-gradient(135deg, color-mix(in srgb, var(--mc) var(--hero-a), var(--c-hero-dark)), color-mix(in srgb, var(--mc) var(--hero-b), var(--c-hero-dark)));
}
.p-tile--planned .p-tile__icon { color: var(--mc); background: color-mix(in srgb, var(--mc) 14%, transparent); }
.p-tile__icon .p-icon { width: 18px; height: 18px; }
.p-tile__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; align-items: flex-start; }
.p-tile__title { font-weight: 700; }
.p-tile__desc { font-size: var(--fs-small); color: var(--c-muted); }
.p-tile--planned { opacity: .6; }
@media (prefers-reduced-motion: reduce) { .p-tile { transition: none; } }

.p-mh { display: flex; flex-direction: column; gap: 10px; padding-bottom: 8px; }
.p-mh__hero {
    position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 18px 20px; border-radius: 12px; color: var(--c-on-hero); isolation: isolate;
    background:
        radial-gradient(circle at 10% -30%, color-mix(in srgb, var(--c-on-hero) 13%, transparent) 0 110px, transparent 111px),
        radial-gradient(circle at 1% 115%, color-mix(in srgb, var(--c-on-hero) 8%, transparent) 0 70px, transparent 71px),
        radial-gradient(circle at 24% 120%, color-mix(in srgb, var(--c-on-hero) 6%, transparent) 0 26px, transparent 27px),
        linear-gradient(135deg, color-mix(in srgb, var(--mc) var(--hero-a), var(--c-hero-dark)), color-mix(in srgb, var(--mc) var(--hero-b), var(--c-hero-dark)));
    box-shadow: 0 6px 18px color-mix(in srgb, var(--mc) 20%, transparent);
}
.p-mh__badge {
    width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; flex: none;
    background: color-mix(in srgb, var(--c-on-hero) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-on-hero) 22%, transparent);
}
.p-mh__badge .p-icon { width: 30px; height: 30px; stroke-width: 1.3; }
.p-mh__intro { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 4px; }
.p-mh__title { margin: 0; font-size: 21px; font-weight: 700; }
.p-mh__desc { margin: 0; color: color-mix(in srgb, var(--c-on-hero) 86%, transparent); }
.p-mh__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; font-size: var(--fs-small); color: color-mix(in srgb, var(--c-on-hero) 78%, transparent); }
.p-mh__meta span { display: inline-flex; align-items: center; gap: 5px; }
.p-mh__meta .p-icon { width: 13px; height: 13px; }
.p-mh__stats { display: flex; gap: 8px; }
.p-mh__stat {
    min-width: 76px; padding: 8px 12px; border-radius: 10px; text-align: center; display: flex; flex-direction: column; gap: 2px;
    background: color-mix(in srgb, var(--c-on-hero) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-on-hero) 16%, transparent);
}
.p-mh__stat b { font-size: 20px; line-height: 1.1; }
.p-mh__stat span { font-size: var(--fs-small); color: color-mix(in srgb, var(--c-on-hero) 80%, transparent); }

.p-mh__section { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 13px; font-weight: 700; color: var(--c-text); }
.p-mh__section > .p-icon { width: 15px; height: 15px; color: var(--mc); }
.p-mh__hint { font-weight: 400; color: var(--c-muted); font-size: var(--fs-small); margin-inline-start: 6px; }

.p-mh__quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.p-mh__qtile {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--c-border); border-radius: 10px;
    background: var(--c-surface); color: var(--c-text); font: inherit; text-align: start; cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.p-mh__qtile:hover, .p-mh__qtile:focus-visible {
    transform: translateY(-2px); border-color: color-mix(in srgb, var(--mc) 55%, var(--c-border));
    box-shadow: 0 6px 16px color-mix(in srgb, var(--mc) 16%, var(--c-shadow));
}
.p-mh__qicon {
    width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; color: var(--c-on-hero);
    background: linear-gradient(135deg, color-mix(in srgb, var(--mc) var(--hero-a), var(--c-hero-dark)), color-mix(in srgb, var(--mc) var(--hero-b), var(--c-hero-dark)));
}
.p-mh__qicon .p-icon { width: 18px; height: 18px; }
.p-mh__qtitle { flex: 1; min-width: 0; font-weight: 500; }
.p-mh__go { width: 14px; height: 14px; color: var(--mc); opacity: 0; transform: translateX(4px); transition: opacity .15s, transform .15s; }
[dir="ltr"] .p-mh__go { transform: translateX(-4px); }
.p-mh__qtile:hover .p-mh__go, .p-mh__qtile:focus-visible .p-mh__go { opacity: 1; transform: none; }

.p-mh__recent { display: flex; flex-wrap: wrap; gap: 6px; }
.p-mh__chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font: inherit; font-size: 12.5px; cursor: pointer;
    border: 1px solid var(--c-border); background: var(--c-surface-2); color: var(--c-text);
}
.p-mh__chip .p-icon { width: 13px; height: 13px; color: var(--mc); }
.p-mh__chip:hover { border-color: color-mix(in srgb, var(--mc) 50%, var(--c-border)); background: color-mix(in srgb, var(--mc) 9%, var(--c-surface)); }

.p-mh__groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; align-items: start; }
.p-mh__group {
    border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-surface); overflow: hidden; min-width: 0;
    box-shadow: inset 0 3px 0 var(--mc); animation: p-mh-in .35s ease both; animation-delay: calc(var(--gi, 1) * 40ms);
}
.p-mh__ghead {
    display: flex; align-items: center; gap: 8px; padding: 10px 12px 8px;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--mc) 9%, var(--c-surface)), var(--c-surface));
    border-bottom: 1px solid color-mix(in srgb, var(--mc) 14%, var(--c-border));
}
.p-mh__gicon {
    width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; color: var(--mc);
    background: color-mix(in srgb, var(--mc) 15%, transparent);
}
.p-mh__gicon .p-icon { width: 16px; height: 16px; }
.p-mh__gtitle { flex: 1; min-width: 0; font-weight: 700; }
.p-mh__gcount {
    min-width: 22px; padding: 0 7px; border-radius: 999px; font-size: 11px; line-height: 18px; text-align: center;
    color: var(--mc); background: color-mix(in srgb, var(--mc) 12%, transparent);
}
.p-mh__links { display: flex; flex-direction: column; padding: 4px; }
.p-mh__link {
    display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; padding: 6px 8px; border-radius: 6px;
    font: inherit; text-align: start; color: var(--c-text); cursor: pointer; transition: background .12s, color .12s;
}
.p-mh__link:hover:not(:disabled), .p-mh__link:focus-visible { background: color-mix(in srgb, var(--mc) 10%, transparent); color: var(--mc); }
.p-mh__link:disabled { color: var(--c-muted); cursor: default; }
.p-mh__licon { width: 15px; height: 15px; flex: none; color: color-mix(in srgb, var(--mc) 80%, var(--c-muted)); }
.p-mh__ltitle { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@keyframes p-mh-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .p-mh__group { animation: none; }
    .p-mh__qtile, .p-mh__go { transition: none; }
}

.p-tile:disabled { cursor: default; }
.p-mh__link--planned .p-mh__ltitle { color: var(--c-muted); }
.p-mh__link--web { font-weight: 500; }
.p-mh__planned {
    display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 10px;
    border: 1px dashed color-mix(in srgb, var(--mc) 50%, var(--c-border)); background: color-mix(in srgb, var(--mc) 6%, var(--c-surface));
}
.p-mh__planned > .p-icon { width: 22px; height: 22px; color: var(--mc); flex: none; }
.p-mh__planned p { margin: 4px 0 0; }
@media (max-width: 600px) { .p-mh__hero { padding: 14px; } .p-mh__stats { width: 100%; } .p-mh__stat { flex: 1; } }