/* ═══════════════════════════════════════════════════════════════════════
   PADCORE — primitiveهای سیستمِ طراحی
   مرجع: docs/ADR/ADR-PADCORE-0027.md · طرح: docs/DESIGN-SYSTEM-PLAN.md (فاز ۲)
   توکن‌ها: public/assets/css/ui-tokens.css (باید زودتر بار شود)

   قراردادِ API عیناً از shadcn/ui ولی روی HTML خالص:
     data-slot="button"  data-variant="…"  data-size="…"
     data-state="open|closed|active|checked"  data-orientation="…"
     aria-invalid="true"  aria-disabled="true"  data-loading

   ⚠ هر سلکتور به `[data-slot]` مقید است، و هیچ صفحهٔ امروزی `data-slot`
   ندارد. پس این فایل روی markupِ موجود بی‌اثر است. تنها استثناها بخشِ
   «قواعدِ سراسری»ِ پایین است که عمدی و تأییدشده‌اند.

   RTL: فقط ویژگی‌های منطقی. هیچ margin/padding-left|right و هیچ
   left|right فیزیکی در این فایل نیست (گیتِ grep در تست).
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   ۰) قواعدِ سراسری — تنها جاهایی که این فایل فراتر از [data-slot] می‌رود
   ═══════════════════════════════════════════════════════════════════════ */

/* ۷.۲ — حلقهٔ فوکوس. امروز ۲۶ تا outline:none در برابرِ ۱ تا focus-visible.
   فرمولِ shadcn: هم مرز عوض شود هم حلقهٔ ۳px با ۵۰٪ شفافیت. قواعدِ
   اختصاصی‌ترِ admin.css/app.css هنوز برنده‌اند؛ پاک‌سازی‌شان کارِ فاز ۳ و ۶. */
:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

/* ۷.۱۱ — انتخابِ متن با رنگِ برند. */
::selection {
    background: var(--selection);
    color: var(--selection-foreground);
}

/* ۹.۴ — محتوای ذاتاً LTR درونِ صفحهٔ RTL: اسلاگ، ایمیل، کد، آدرس. */
[data-ltr] {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: start;
}

/* ۷.۱۱ — پرشِ به محتوا. تا وقتی فوکوس نگیرد دیده نمی‌شود. */
[data-slot="skip-link"] {
    position: fixed;
    inset-block-start: var(--space-2);
    inset-inline-start: var(--space-2);
    z-index: var(--z-toast);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--primary);
    color: var(--primary-foreground);
    font: var(--text-label-weight) var(--text-label) / var(--text-label-lh) var(--font-sans);
    transform: translateY(-200%);
    transition: transform var(--duration-fast) var(--ease-out);
}
[data-slot="skip-link"]:focus-visible { transform: translateY(0); }

/* ═══════════════════════════════════════════════════════════════════════
   ۱) لایهٔ حالت — سه عدد به‌جای توکنِ جدا برای هر حالت (§۶.۲)
   هر عنصرِ تعاملی یک پوششِ currentColor می‌گیرد که فقط شفافیتش عوض می‌شود.
   روی هر رنگِ زمینه کار می‌کند، چون رنگش از خودِ متنِ عنصر می‌آید.
   ═══════════════════════════════════════════════════════════════════════ */
[data-state-layer] {
    position: relative;
    isolation: isolate;
}
[data-state-layer]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: currentColor;
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-standard);
    pointer-events: none;
}
@media (hover: hover) {
    [data-state-layer]:hover:not([disabled]):not([aria-disabled="true"])::after { opacity: var(--state-hover); }
}
[data-state-layer]:active:not([disabled]):not([aria-disabled="true"])::after { opacity: var(--state-press); }
[data-state-layer][data-state="active"]::after,
[data-state-layer][aria-selected="true"]::after,
[data-state-layer][aria-current="page"]::after { opacity: var(--state-selected); }

/* ═══════════════════════════════════════════════════════════════════════
   ۲الف) دکمه
   ═══════════════════════════════════════════════════════════════════════ */
[data-slot="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    flex-shrink: 0;
    inline-size: fit-content;
    block-size: var(--control-base);
    padding-inline: var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: inherit;
    font-family: var(--font-sans);
    font-size: var(--text-label);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard);
}
[data-slot="button"] > svg { inline-size: 16px; block-size: 16px; flex-shrink: 0; }

[data-slot="button"][disabled],
[data-slot="button"][aria-disabled="true"] {
    opacity: var(--state-disabled-opacity);
    pointer-events: none;
    cursor: not-allowed;
}

/* ── variantها ── */
[data-slot="button"][data-variant="default"] {
    background: var(--primary);
    color: var(--primary-foreground);
    box-shadow: var(--shadow-xs);
}
[data-slot="button"][data-variant="secondary"] {
    background: var(--secondary);
    color: var(--secondary-foreground);
}
[data-slot="button"][data-variant="outline"] {
    border-color: var(--border);
    background: var(--card);
    color: var(--foreground);
}
[data-slot="button"][data-variant="ghost"] {
    color: var(--foreground);
}
[data-slot="button"][data-variant="destructive"] {
    background: var(--destructive);
    color: var(--destructive-foreground);
    box-shadow: var(--shadow-xs);
}
/* تنها جایی که رنگ باید عوض شود نه فقط تیره‌تر (§۶.۲ استثنا). */
@media (hover: hover) {
    [data-slot="button"][data-variant="destructive"]:hover:not([disabled]) { background: var(--destructive-hover); }
}
[data-slot="button"][data-variant="link"] {
    block-size: auto;
    padding-inline: 0;
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 4px;
}
/* کنشِ نقطه‌ای و فوری — تنها مصرفِ مسی در دکمه‌ها. */
[data-slot="button"][data-variant="brand"] {
    background: var(--brand-accent);
    color: var(--brand-accent-foreground);
    box-shadow: var(--shadow-xs);
}

/* ── اندازه‌ها — ارتفاعِ صریح، نه حاصلِ padding (§۷.۴) ── */
[data-slot="button"][data-size="xs"]   { block-size: var(--control-xs);   padding-inline: var(--space-2); font-size: var(--text-caption); }
[data-slot="button"][data-size="sm"]   { block-size: var(--control-sm);   padding-inline: var(--space-3); }
[data-slot="button"][data-size="lg"]   { block-size: var(--control-lg);   padding-inline: var(--space-5); font-size: var(--text-h3); }
[data-slot="button"][data-size="icon"] { block-size: var(--control-base); inline-size: var(--control-base); padding-inline: 0; }
[data-slot="button"][data-size="icon-sm"] { block-size: var(--control-sm); inline-size: var(--control-sm); padding-inline: 0; }

/* ── ۷.۱۱: حالتِ در حالِ انجام. متن سرِ جایش می‌ماند تا دکمه نپرد. ── */
[data-slot="button"][data-loading] {
    pointer-events: none;
    position: relative;
    color: transparent;
}
[data-slot="button"][data-loading] > * { visibility: hidden; }
[data-slot="button"][data-loading]::before {
    content: "";
    position: absolute;
    inline-size: 16px;
    block-size: 16px;
    border: 2px solid currentColor;
    border-block-start-color: transparent;
    border-radius: var(--radius-pill);
    color: var(--primary-foreground);
    animation: ui-spin 600ms linear infinite;
}
[data-slot="button"][data-variant="outline"][data-loading]::before,
[data-slot="button"][data-variant="ghost"][data-loading]::before,
[data-slot="button"][data-variant="secondary"][data-loading]::before,
[data-slot="button"][data-variant="link"][data-loading]::before { color: var(--foreground); }

@keyframes ui-spin { to { transform: rotate(360deg); } }

/* گروهِ دکمه — شعاعِ داخلی صاف می‌شود، منطقی نه فیزیکی. */
[data-slot="button-group"] { display: inline-flex; }
[data-slot="button-group"] > [data-slot="button"] { border-radius: 0; }
[data-slot="button-group"] > [data-slot="button"]:first-child {
    border-start-start-radius: var(--radius-md);
    border-end-start-radius: var(--radius-md);
}
[data-slot="button-group"] > [data-slot="button"]:last-child {
    border-start-end-radius: var(--radius-md);
    border-end-end-radius: var(--radius-md);
}
[data-slot="button-group"] > [data-slot="button"] + [data-slot="button"] { margin-inline-start: -1px; }

/* ═══════════════════════════════════════════════════════════════════════
   ۲الف) فیلد — label · control · description · error
   ═══════════════════════════════════════════════════════════════════════ */
[data-slot="field"] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
[data-slot="label"] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--foreground);
    font-size: var(--text-label);
    font-weight: var(--text-label-weight);
    line-height: var(--text-label-lh);
}
[data-slot="label"][data-required]::after {
    content: "*";
    color: var(--destructive);
}
[data-slot="field-description"] {
    color: var(--muted-foreground);
    font-size: var(--text-caption);
    line-height: var(--text-caption-lh);
}
[data-slot="field-error"] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--destructive);
    font-size: var(--text-caption);
    line-height: var(--text-caption-lh);
}

[data-slot="input"],
[data-slot="textarea"],
[data-slot="select"] {
    inline-size: 100%;
    min-inline-size: 0;
    block-size: var(--control-base);
    padding-inline: var(--space-3);
    border: 1px solid var(--input);
    border-radius: var(--radius-md);
    background: var(--field-1);
    color: var(--foreground);
    font-family: var(--font-sans);
    font-size: var(--text-label);
    line-height: var(--text-label-lh);
    transition: border-color var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard);
}
[data-slot="textarea"] {
    block-size: auto;
    min-block-size: calc(var(--control-base) * 2);
    padding-block: var(--space-2);
    resize: vertical;
}
[data-slot="select"] { padding-inline-end: var(--space-8); cursor: pointer; }

[data-slot="input"]::placeholder,
[data-slot="textarea"]::placeholder { color: var(--muted-foreground); }

[data-slot="input"]:focus-visible,
[data-slot="textarea"]:focus-visible,
[data-slot="select"]:focus-visible {
    outline: none;
    border-color: var(--ring);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
}

[data-slot="input"][disabled],
[data-slot="textarea"][disabled],
[data-slot="select"][disabled] {
    background: var(--muted);
    color: var(--muted-foreground);
    cursor: not-allowed;
}

/* ۷.۳ — نامعتبری با ARIA، نه با کلاسِ موردی. برای screen reader هم معنادار. */
[data-slot="input"][aria-invalid="true"],
[data-slot="textarea"][aria-invalid="true"],
[data-slot="select"][aria-invalid="true"] { border-color: var(--destructive); }
[data-slot="input"][aria-invalid="true"]:focus-visible,
[data-slot="textarea"][aria-invalid="true"]:focus-visible,
[data-slot="select"][aria-invalid="true"]:focus-visible {
    border-color: var(--destructive);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--destructive) 20%, transparent);
}

/* ── checkbox · radio · switch ── */
[data-slot="checkbox"],
[data-slot="radio"] {
    appearance: none;
    flex-shrink: 0;
    inline-size: 18px;
    block-size: 18px;
    margin: 0;
    border: 1px solid var(--input);
    background: var(--field-1);
    cursor: pointer;
    display: inline-grid;
    place-content: center;
    transition: background-color var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard);
}
[data-slot="checkbox"] { border-radius: var(--radius-sm); }
[data-slot="radio"]    { border-radius: var(--radius-pill); }

[data-slot="checkbox"]:checked,
[data-slot="radio"]:checked { background: var(--primary); border-color: var(--primary); }

[data-slot="checkbox"]:checked::after {
    content: "";
    inline-size: 10px;
    block-size: 6px;
    border: 2px solid var(--primary-foreground);
    border-block-start: none;
    border-inline-end: none;
    transform: rotate(-45deg) translateY(-1px);
}
[data-slot="radio"]:checked::after {
    content: "";
    inline-size: 8px;
    block-size: 8px;
    border-radius: var(--radius-pill);
    background: var(--primary-foreground);
}
[data-slot="checkbox"][disabled],
[data-slot="radio"][disabled] { opacity: var(--state-disabled-opacity); cursor: not-allowed; }

[data-slot="switch"] {
    appearance: none;
    flex-shrink: 0;
    inline-size: 36px;
    block-size: 20px;
    margin: 0;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--n-300);
    cursor: pointer;
    position: relative;
    transition: background-color var(--duration-base) var(--ease-standard);
}
[data-slot="switch"]::after {
    content: "";
    position: absolute;
    inset-block-start: 2px;
    inset-inline-start: 2px;
    inline-size: 16px;
    block-size: 16px;
    border-radius: var(--radius-pill);
    background: var(--n-0);
    box-shadow: var(--shadow-xs);
    transition: translate var(--duration-base) var(--ease-standard);
}
[data-slot="switch"]:checked { background: var(--primary); }
/* منطقی، نه فیزیکی: در RTL خودش برعکس می‌لغزد. */
[data-slot="switch"]:checked::after { translate: 16px 0; }
[dir="rtl"] [data-slot="switch"]:checked::after { translate: -16px 0; }
[data-slot="switch"][disabled] { opacity: var(--state-disabled-opacity); cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════════════════
   ۲الف) کارت — مرزمحور، نه سایه‌محور (§۷.۱)
   ═══════════════════════════════════════════════════════════════════════ */
[data-slot="card"] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--layer-1);
    color: var(--card-foreground);
    box-shadow: var(--shadow-xs);
}
[data-slot="card"][data-variant="flat"]     { box-shadow: none; }
[data-slot="card"][data-variant="elevated"] { box-shadow: var(--shadow-md); }
[data-slot="card"][data-size="sm"] { padding: var(--space-4); gap: var(--space-3); }

[data-slot="card-header"] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}
[data-slot="card-title"] {
    margin: 0;
    font-size: var(--text-h3);
    font-weight: var(--text-h3-weight);
    line-height: var(--text-h3-lh);
    color: var(--foreground);
}
[data-slot="card-description"] {
    margin: 0;
    font-size: var(--text-caption);
    line-height: var(--text-caption-lh);
    color: var(--muted-foreground);
}
[data-slot="card-content"] { flex: 1; min-inline-size: 0; }
[data-slot="card-footer"] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--border-subtle-1);
}

/* ═══════════════════════════════════════════════════════════════════════
   ۲الف) badge و chip — تنها جایی که کپسول مجاز است (بندِ ۳ ADR-0027)
   ═══════════════════════════════════════════════════════════════════════ */
[data-slot="badge"] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding-inline: var(--space-2);
    padding-block: 2px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: var(--secondary);
    color: var(--secondary-foreground);
    font-size: var(--text-caption);
    font-weight: 500;
    line-height: var(--text-caption-lh);
    white-space: nowrap;
}
[data-slot="badge"] > svg { inline-size: 12px; block-size: 12px; }
[data-slot="badge"][data-variant="default"]     { background: var(--primary); color: var(--primary-foreground); }
[data-slot="badge"][data-variant="outline"]     { background: transparent; border-color: var(--border); color: var(--foreground); }
[data-slot="badge"][data-variant="success"]     { background: var(--success-muted); color: var(--success); }
[data-slot="badge"][data-variant="warning"]     { background: var(--warning-muted); color: var(--warning); }
[data-slot="badge"][data-variant="destructive"] { background: var(--destructive-muted); color: var(--destructive); }
[data-slot="badge"][data-variant="brand"]       { background: var(--brand-accent-muted); color: var(--brand-accent); }

[data-slot="chip"] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    block-size: var(--control-xs);
    padding-inline: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--card);
    color: var(--foreground);
    font-size: var(--text-caption);
    cursor: pointer;
}
[data-slot="chip"][aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
[data-slot="chip-remove"] {
    display: inline-grid;
    place-content: center;
    inline-size: 14px;
    block-size: 14px;
    border: none;
    border-radius: var(--radius-pill);
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: var(--text-caption);
    line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════════════
   ۲الف) alert — گریدِ آیکن + عنوان + شرح
   ═══════════════════════════════════════════════════════════════════════ */
[data-slot="alert"] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    color: var(--foreground);
    font-size: var(--text-label);
    line-height: var(--text-label-lh);
}
[data-slot="alert"] > svg { inline-size: 18px; block-size: 18px; grid-row: span 2; }
[data-slot="alert-title"]       { font-weight: 700; }
[data-slot="alert-description"] { color: var(--muted-foreground); grid-column-start: 2; }
[data-slot="alert"][data-variant="info"]        { border-color: color-mix(in srgb, var(--primary) 30%, transparent); background: var(--p-50); }
[data-slot="alert"][data-variant="success"]     { border-color: color-mix(in srgb, var(--success) 30%, transparent); background: var(--success-muted); }
[data-slot="alert"][data-variant="warning"]     { border-color: color-mix(in srgb, var(--warning) 30%, transparent); background: var(--warning-muted); }
[data-slot="alert"][data-variant="destructive"] { border-color: color-mix(in srgb, var(--destructive) 30%, transparent); background: var(--destructive-muted); }
[data-slot="alert"][data-variant="info"]        [data-slot="alert-description"],
[data-slot="alert"][data-variant="success"]     [data-slot="alert-description"],
[data-slot="alert"][data-variant="warning"]     [data-slot="alert-description"],
[data-slot="alert"][data-variant="destructive"] [data-slot="alert-description"] { color: inherit; opacity: .85; }

/* ═══════════════════════════════════════════════════════════════════════
   ۲ب) جدول — ارتفاعِ ردیفِ ثابت و hover (۷.۱۱)
   ═══════════════════════════════════════════════════════════════════════ */
[data-slot="table-wrap"] {
    inline-size: 100%;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--layer-1);
}
[data-slot="table"] {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--text-label);
    font-variant-numeric: tabular-nums;
}
[data-slot="table"] thead th {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
    block-size: var(--density-row);
    padding-inline: var(--density-pad-x);
    border-block-end: 1px solid var(--border);
    background: var(--layer-2);
    color: var(--muted-foreground);
    font-size: var(--text-caption);
    font-weight: 500;
    text-align: start;
    white-space: nowrap;
}
[data-slot="table"] tbody td {
    block-size: var(--density-row);
    padding-inline: var(--density-pad-x);
    padding-block: var(--density-pad-y);
    border-block-end: 1px solid var(--border-subtle-2);
    text-align: start;
    vertical-align: middle;
}
[data-slot="table"] tbody tr:last-child td { border-block-end: none; }
@media (hover: hover) {
    [data-slot="table"] tbody tr:hover td { background: var(--accent); }
}
[data-slot="table"] tbody tr[aria-selected="true"] td { background: color-mix(in srgb, var(--primary) 8%, transparent); }
[data-slot="table"] [data-numeric] { text-align: end; }

/* ── شکافِ `.data-table` که پریمیتیو نداشت (نقشهٔ data-table-migration §۲) ──
   این قواعد افزودنی‌اند: تا وقتی ویویی `data-slot="table"` نگرفته باشد به
   چیزی نمی‌خورند، پس گامِ یکِ نقشه بی‌خطر است. */

/* §۲.۶ — کمینهٔ عرض: جدولِ عریض اسکرول می‌خورد، فشرده نمی‌شود. */
[data-slot="table-wrap"] > [data-slot="table"] { min-inline-size: var(--table-min-inline); }

/* §۲.۷ — پلهٔ فشرده ارتفاع و padding را عوض می‌کرد ولی قلم را نه. */
[data-density="compact"] [data-slot="table"] { font-size: var(--text-caption); }

/* §۲.۸ — نرمیِ hover روی `td` می‌نشیند، چون رنگ هم روی `td` می‌آید. */
[data-slot="table"] tbody td { transition: background .15s; }

/* §۲.۲ — عرضِ ستون. `data-col` دست‌نخورده می‌ماند: کلیدِ معناییِ ستون است و
   ویجتِ نمایش/پنهانِ ستون آن را می‌خواند. */
[data-slot="table"] th[data-colw="select"]  { inline-size: 40px; }
[data-slot="table"] th[data-colw="num"]     { inline-size: 72px; text-align: end; }
[data-slot="table"] th[data-colw="actions"] { inline-size: 200px; }

/* §۲.۳ — ردیفِ خالی: پریمیتیو روی هر `td` ارتفاعِ ثابت می‌گذارد و padding را
   له می‌کند، پس سلولِ پیامِ خالی باید ارتفاعش را خودش بگیرد. */
[data-slot="table"] tbody td[data-empty] {
    block-size: auto;
    padding-block: var(--space-10);
    color: var(--muted-foreground);
    text-align: center;
}

/* §۲.۴ — ردیفِ بازشده. `aria-selected` در پریمیتیو معنای «انتخاب» دارد، پس
   «باز بودن» با `aria-expanded` بیان می‌شود. */
[data-slot="table"] tbody tr[aria-expanded="true"] > td { background: var(--layer-2); }

/* §۲.۵ — سرستونِ مرتب‌سازی با `aria-sort` بیانِ معناییِ خودش را دارد؛ کلاسِ
   `.sortable` در `table/rows` باید بماند چون JS با آن querySelector می‌کند. */
[data-slot="table"] thead th[aria-sort] { cursor: pointer; user-select: none; }
[data-slot="table"] thead th[aria-sort]:hover { color: var(--foreground); }
[data-slot="table"] thead th[aria-sort="ascending"],
[data-slot="table"] thead th[aria-sort="descending"] { color: var(--primary); }
[data-slot="table"] thead th[aria-sort="ascending"]::after  { content: " ▲"; font-size: 9px; }
[data-slot="table"] thead th[aria-sort="descending"]::after { content: " ▼"; font-size: 9px; }

/* §۲.۱ — حالتِ کارتیِ موبایل، اکنون opt-in. در `.data-table` وارونه بود:
   کارتی پیش‌فرضِ ≤۶۴۰px بود و پیچیدن در `.table-responsive` از آن خارج
   می‌کرد، یعنی رفتارِ موبایل به یک wrapper بند بود. اینجا wrapper صریحاً
   `data-mobile="cards"` می‌گیرد. */
@media (max-width: 640px) {
    [data-slot="table-wrap"][data-mobile="cards"] { overflow-x: visible; border: none; background: none; }
    [data-slot="table-wrap"][data-mobile="cards"] > [data-slot="table"] { min-inline-size: 0; }
    [data-slot="table-wrap"][data-mobile="cards"] thead { display: none; }
    [data-slot="table-wrap"][data-mobile="cards"] tbody tr {
        display: block;
        margin-block-end: var(--space-3);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        background: var(--layer-1);
    }
    [data-slot="table-wrap"][data-mobile="cards"] tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        /* ارتفاعِ ثابتِ پریمیتیو نباید سلولِ flex را بگیرد. */
        block-size: auto;
        padding: var(--space-2) var(--space-3);
        border-block-end: 1px solid var(--border-subtle-2);
    }
    [data-slot="table-wrap"][data-mobile="cards"] tbody tr td:last-child { border-block-end: none; }
    /* برچسبِ ستون در حالتِ کارتی سرِ سلول می‌آید؛ `data-label="#"` پنهان
       می‌ماند (همان رفتارِ امروز). */
    [data-slot="table-wrap"][data-mobile="cards"] tbody td[data-label]::before {
        content: attr(data-label);
        flex-shrink: 0;
        color: var(--muted-foreground);
        font-size: var(--text-caption);
        font-weight: 500;
    }
    [data-slot="table-wrap"][data-mobile="cards"] tbody td[data-label="#"]::before { content: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ۲ب) تب — یک پیاده‌سازی به‌جای شش (§۷.۷)
   ═══════════════════════════════════════════════════════════════════════ */
[data-slot="tabs"] { display: flex; flex-direction: column; gap: var(--space-4); }
[data-slot="tabs"][data-orientation="vertical"] { flex-direction: row; }

[data-slot="tabs-list"] {
    display: flex;
    gap: var(--space-1);
    padding: var(--space-1);
    border-radius: var(--radius-lg);
    background: var(--muted);
}
[data-slot="tabs"][data-orientation="vertical"] > [data-slot="tabs-list"] { flex-direction: column; }

[data-slot="tabs-trigger"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    block-size: var(--control-sm);
    padding-inline: var(--space-4);
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--muted-foreground);
    font-family: var(--font-sans);
    font-size: var(--text-label);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard);
}
[data-slot="tabs-trigger"][data-state="active"] {
    background: var(--card);
    color: var(--foreground);
    box-shadow: var(--shadow-xs);
}

/* variantِ خطی — همان API، ظاهرِ زیرخط‌دار. */
[data-slot="tabs-list"][data-variant="line"] {
    padding: 0;
    gap: var(--space-5);
    border-block-end: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
}
[data-slot="tabs-list"][data-variant="line"] [data-slot="tabs-trigger"] {
    border-radius: 0;
    border-block-end: 2px solid transparent;
    padding-inline: 0;
}
[data-slot="tabs-list"][data-variant="line"] [data-slot="tabs-trigger"][data-state="active"] {
    background: transparent;
    box-shadow: none;
    border-block-end-color: var(--primary);
    color: var(--primary);
}

[data-slot="tabs-panel"][hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   ۲ب) dialog — <dialog>ِ بومی، نه بازسازیِ Radix
   ⚠ دامِ top layer: dialog بیرون از درختِ والد رندر می‌شود و dir را به ارث
   نمی‌برد. کامپوننتِ Blade همیشه dir صریح می‌گذارد (§۹.۲).
   ═══════════════════════════════════════════════════════════════════════ */
[data-slot="dialog"] {
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--popover);
    color: var(--popover-foreground);
    box-shadow: var(--shadow-lg);
    font-family: var(--font-sans);
    font-size: var(--text-body);
    inline-size: min(calc(100vw - var(--space-8)), 480px);
    max-block-size: calc(100dvh - var(--space-11));
}
[data-slot="dialog"][data-size="lg"] { inline-size: min(calc(100vw - var(--space-8)), 720px); }
[data-slot="dialog"][data-size="sm"] { inline-size: min(calc(100vw - var(--space-8)), 360px); }
[data-slot="dialog"]::backdrop {
    background: color-mix(in srgb, var(--p-900) 55%, transparent);
    backdrop-filter: blur(2px);
}
[data-slot="dialog"][open] { animation: ui-dialog-in var(--duration-base) var(--ease-out); }
@keyframes ui-dialog-in {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: none; }
}
[data-slot="dialog-header"] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-5) var(--space-3);
}
[data-slot="dialog-title"] {
    margin: 0;
    font-size: var(--text-h2);
    font-weight: var(--text-h2-weight);
    line-height: var(--text-h2-lh);
}
[data-slot="dialog-body"]   { padding-inline: var(--space-5); overflow-y: auto; }
[data-slot="dialog-footer"] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5) var(--space-5);
}

/* ═══════════════════════════════════════════════════════════════════════
   ۲ب) sheet / drawer — یک پیاده‌سازی به‌جای چهار. روی همان <dialog>.
   ═══════════════════════════════════════════════════════════════════════ */
[data-slot="sheet"] {
    padding: 0;
    border: none;
    background: var(--popover);
    color: var(--popover-foreground);
    box-shadow: var(--shadow-lg);
    font-family: var(--font-sans);
    font-size: var(--text-body);
    max-block-size: 100dvh;
    max-inline-size: 100vw;
}
[data-slot="sheet"]::backdrop { background: color-mix(in srgb, var(--p-900) 55%, transparent); }
[data-slot="sheet"][data-side="inline-end"],
[data-slot="sheet"][data-side="inline-start"] {
    block-size: 100dvh;
    inline-size: min(calc(100vw - var(--space-11)), 360px);
    margin-block: 0;
}
[data-slot="sheet"][data-side="inline-end"]   { margin-inline: auto 0; border-start-start-radius: var(--radius-xl); border-end-start-radius: var(--radius-xl); }
[data-slot="sheet"][data-side="inline-start"] { margin-inline: 0 auto; border-start-end-radius: var(--radius-xl); border-end-end-radius: var(--radius-xl); }
[data-slot="sheet"][data-side="block-end"] {
    inline-size: 100vw;
    margin-block: auto 0;
    border-start-start-radius: var(--radius-2xl);
    border-start-end-radius: var(--radius-2xl);
}
[data-slot="sheet-body"] { padding: var(--space-5); overflow-y: auto; }

/* ═══════════════════════════════════════════════════════════════════════
   ۲ب) منوی کشویی — صفتِ popoverِ بومی
   ═══════════════════════════════════════════════════════════════════════ */
[data-slot="menu"] {
    min-inline-size: 180px;
    padding: var(--space-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--popover);
    color: var(--popover-foreground);
    box-shadow: var(--shadow-md);
    font-family: var(--font-sans);
    font-size: var(--text-label);
}
[data-slot="menu"]:popover-open { animation: ui-menu-in var(--duration-fast) var(--ease-out); }
@keyframes ui-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

[data-slot="menu-item"] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    inline-size: 100%;
    block-size: var(--control-sm);
    padding-inline: var(--space-3);
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}
[data-slot="menu-item"] > svg { inline-size: 16px; block-size: 16px; }
[data-slot="menu-item"][data-variant="destructive"] { color: var(--destructive); }
[data-slot="menu-separator"] {
    block-size: 1px;
    margin-block: var(--space-1);
    background: var(--border);
}
[data-slot="menu-label"] {
    padding: var(--space-2) var(--space-3) var(--space-1);
    color: var(--muted-foreground);
    font-size: var(--text-caption);
}

/* ═══════════════════════════════════════════════════════════════════════
   ۲ب) toast
   ═══════════════════════════════════════════════════════════════════════ */
[data-slot="toaster"] {
    position: fixed;
    inset-block-end: var(--space-5);
    inset-inline-start: var(--space-5);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    pointer-events: none;
}
[data-slot="toast"] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-inline-size: 240px;
    max-inline-size: 420px;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--popover);
    color: var(--popover-foreground);
    box-shadow: var(--shadow-md);
    font-size: var(--text-label);
    pointer-events: auto;
    animation: ui-toast-in var(--duration-base) var(--ease-out);
}
@keyframes ui-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
[data-slot="toast"][data-variant="success"]     { border-color: var(--success); }
[data-slot="toast"][data-variant="destructive"] { border-color: var(--destructive); }
[data-slot="toast"][data-variant="warning"]     { border-color: var(--warning); }

/* ═══════════════════════════════════════════════════════════════════════
   ۲ج) skeleton · empty-state · progress · separator · avatar · tooltip ·
       pagination · stat-card
   ═══════════════════════════════════════════════════════════════════════ */
[data-slot="skeleton"] {
    display: block;
    block-size: 1em;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--muted) 25%, var(--secondary) 37%, var(--muted) 63%);
    background-size: 400% 100%;
    animation: ui-shimmer 1400ms ease infinite;
}
@keyframes ui-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
[data-slot="skeleton"][data-shape="circle"] { border-radius: var(--radius-pill); }
[data-slot="skeleton"][data-shape="card"]   { block-size: 120px; border-radius: var(--radius-xl); }

[data-slot="empty-state"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-11) var(--space-5);
    text-align: center;
    color: var(--muted-foreground);
}
[data-slot="empty-state"] > svg { inline-size: 40px; block-size: 40px; opacity: .6; }
[data-slot="empty-state-title"] {
    color: var(--foreground);
    font-size: var(--text-h3);
    font-weight: var(--text-h3-weight);
}
[data-slot="empty-state-description"] { font-size: var(--text-label); max-inline-size: 48ch; }

[data-slot="progress"] {
    inline-size: 100%;
    block-size: 6px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--muted);
}
[data-slot="progress-bar"] {
    block-size: 100%;
    border-radius: inherit;
    background: var(--primary);
    transition: inline-size var(--duration-base) var(--ease-standard);
}

[data-slot="separator"] { border: none; background: var(--border); }
[data-slot="separator"][data-orientation="horizontal"] { block-size: 1px; inline-size: 100%; margin-block: var(--space-4); }
[data-slot="separator"][data-orientation="vertical"]   { inline-size: 1px; block-size: 100%; margin-inline: var(--space-3); }

[data-slot="avatar"] {
    display: inline-grid;
    place-content: center;
    flex-shrink: 0;
    inline-size: 36px;
    block-size: 36px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--secondary);
    color: var(--secondary-foreground);
    font-size: var(--text-caption);
    font-weight: 700;
}
[data-slot="avatar"] img { inline-size: 100%; block-size: 100%; object-fit: cover; }
[data-slot="avatar"][data-size="sm"] { inline-size: 28px; block-size: 28px; }
[data-slot="avatar"][data-size="lg"] { inline-size: 48px; block-size: 48px; font-size: var(--text-label); }

/* tooltip — روی popover، پس نه عرضِ والد محدودش می‌کند نه overflow. */
[data-slot="tooltip"] {
    max-inline-size: 32ch;
    padding: var(--space-1) var(--space-2);
    border: none;
    border-radius: var(--radius-sm);
    background: var(--n-900);
    color: var(--n-0);
    font-family: var(--font-sans);
    font-size: var(--text-caption);
    line-height: var(--text-caption-lh);
}

[data-slot="pagination"] { display: flex; align-items: center; gap: var(--space-1); }
[data-slot="pagination-item"] {
    display: inline-grid;
    place-content: center;
    min-inline-size: var(--control-sm);
    block-size: var(--control-sm);
    padding-inline: var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--foreground);
    font-size: var(--text-label);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}
[data-slot="pagination-item"][aria-current="page"] { background: var(--primary); color: var(--primary-foreground); }

/* stat card — آناتومی از Tremor: برچسب، عدد، دلتا. */
[data-slot="stat-card"] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--layer-1);
}
[data-slot="stat-label"] { color: var(--muted-foreground); font-size: var(--text-caption); }
[data-slot="stat-value"] {
    color: var(--foreground);
    font-size: var(--text-display);
    font-weight: var(--text-display-weight);
    line-height: var(--text-display-lh);
    font-variant-numeric: tabular-nums;
}
[data-slot="stat-delta"] { font-size: var(--text-caption); font-variant-numeric: tabular-nums; }
[data-slot="stat-delta"][data-trend="up"]   { color: var(--success); }
[data-slot="stat-delta"][data-trend="down"] { color: var(--destructive); }

/* ═══════════════════════════════════════════════════════════════════════
   ۲ج) آیکن — ۷.۱۱: همه ۱۶px، یک ضخامت، رنگ از currentColor
   ═══════════════════════════════════════════════════════════════════════ */
[data-slot="icon"] {
    inline-size: 16px;
    block-size: 16px;
    flex-shrink: 0;
    stroke: currentColor;
    stroke-width: 1.75;
    fill: none;
}
[data-slot="icon"][data-size="sm"] { inline-size: 14px; block-size: 14px; }
[data-slot="icon"][data-size="lg"] { inline-size: 20px; block-size: 20px; }
/* ۹.۳ — آیکنِ جهت‌دار در RTL آینه می‌شود. */
[dir="rtl"] [data-slot="icon-chevron"] { transform: scaleX(-1); }

/* ═══════════════════════════════════════════════════════════════════════
   ۲د) لایهٔ نازکِ کلاس‌های کمکی — پادزهرِ بازگشتِ style=
   همه مقدارشان را از توکن می‌گیرند. عمداً کوچک می‌ماند: این Tailwind نیست.
   ═══════════════════════════════════════════════════════════════════════ */
.ui-row    { display: flex; align-items: center; }
.ui-col    { display: flex; flex-direction: column; }
.ui-wrap   { flex-wrap: wrap; }
.ui-center { justify-content: center; }
.ui-between{ justify-content: space-between; }
.ui-end    { justify-content: flex-end; }
.ui-start  { align-items: flex-start; }
.ui-grow   { flex: 1; min-inline-size: 0; }
.ui-hidden { display: none !important; }

.ui-gap-1 { gap: var(--space-1); }
.ui-gap-2 { gap: var(--space-2); }
.ui-gap-3 { gap: var(--space-3); }
.ui-gap-4 { gap: var(--space-4); }
.ui-gap-6 { gap: var(--space-6); }

.ui-mb-2 { margin-block-end: var(--space-2); }
.ui-mb-4 { margin-block-end: var(--space-4); }
.ui-mb-6 { margin-block-end: var(--space-6); }
.ui-mt-2 { margin-block-start: var(--space-2); }
.ui-mt-4 { margin-block-start: var(--space-4); }

.ui-p-3 { padding: var(--space-3); }
.ui-p-4 { padding: var(--space-4); }
.ui-p-5 { padding: var(--space-5); }

.ui-text-display { font-size: var(--text-display); font-weight: var(--text-display-weight); line-height: var(--text-display-lh); }
.ui-text-h1      { font-size: var(--text-h1);      font-weight: var(--text-h1-weight);      line-height: var(--text-h1-lh); }
.ui-text-h2      { font-size: var(--text-h2);      font-weight: var(--text-h2-weight);      line-height: var(--text-h2-lh); }
.ui-text-h3      { font-size: var(--text-h3);      font-weight: var(--text-h3-weight);      line-height: var(--text-h3-lh); }
.ui-text-body    { font-size: var(--text-body);    line-height: var(--text-body-lh); }
.ui-text-label   { font-size: var(--text-label);   line-height: var(--text-label-lh); }
.ui-text-caption { font-size: var(--text-caption); line-height: var(--text-caption-lh); }

/* فقط دو رنگِ متن (§۷.۶). تأکید با وزن، نه با رنگِ سوم. */
.ui-muted     { color: var(--muted-foreground); }
.ui-strong    { font-weight: 700; }
.ui-truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-numeric   { font-variant-numeric: tabular-nums; }

/* فقط برای screen reader — برچسبی که دیده نمی‌شود ولی خوانده می‌شود. */
.ui-sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   دسترس‌پذیری — حرکت و کنتراستِ بالا
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    [data-slot] { animation: none !important; }
    [data-slot="skeleton"] { animation: none; background: var(--muted); }
}

/* ═══════════════════════════════════════════════════════════════════════
   حالتِ کنتراستِ بالا (`forced-colors`) — گذرِ کاملِ فاز ۷.

   در این حالت سیستم‌عامل رنگِ زمینه، متن و مرز را بازنویسی می‌کند. هر
   چیزی که **فقط** با رنگ معنا می‌داد ناپدید می‌شود: badgeِ آهنگ‌دار،
   ردیفِ انتخاب‌شده، و پوششِ شفافِ hover. پس معنا باید به مرز و outline
   منتقل شود، نه به رنگ.
   ═══════════════════════════════════════════════════════════════════════ */
@media (forced-colors: active) {
    [data-slot="button"],
    [data-slot="card"],
    [data-slot="input"],
    [data-slot="textarea"],
    [data-slot="select"],
    [data-slot="dialog"],
    [data-slot="menu"],
    [data-slot="badge"],
    [data-slot="chip"],
    [data-slot="alert"],
    [data-slot="toast"],
    [data-slot="tooltip"],
    [data-slot="stat-card"],
    [data-slot="empty-state"],
    [data-slot="skip-link"] { border: 1px solid; }

    /* پوششِ شفافِ حالت در این حالت نامرئی است و فقط رنگ را گل‌آلود می‌کند. */
    [data-state-layer]::after { display: none; }

    [data-slot="tabs-trigger"][data-state="active"] { border-block-end: 2px solid; }

    /* حلقهٔ فوکوس باید رنگِ **سیستم** بگیرد، نه `--ring` را که نادیده می‌شود. */
    :focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }

    /* «انتخاب‌شده» و «صفحهٔ جاری» امروز فقط زمینهٔ رنگی دارند. */
    [aria-selected="true"],
    [aria-current="page"],
    [data-state="selected"],
    [data-slot="menu-item"]:hover,
    [data-slot="pagination-item"][aria-current] {
        outline: 2px solid Highlight;
        outline-offset: -2px;
    }

    /* نوارِ پیشرفت و skeleton زمینه‌شان را از دست می‌دهند و به یک مستطیلِ
       خالی تبدیل می‌شوند؛ مرز شکل را نگه می‌دارد. */
    [data-slot="progress"] { border: 1px solid; }
    [data-slot="progress-bar"] { background: Highlight; forced-color-adjust: none; }

    /* جداکننده‌ها با `background` کشیده می‌شوند، پس ناپدید می‌شدند. حالتِ
       عمودیِ `separator` جداگانه می‌آید، وگرنه یک خطِ ۱px عرضِ بی‌زمینه
       می‌مانْد که هیچ‌چیز نشان نمی‌دهد. */
    [data-slot="menu-separator"],
    [data-slot="separator"][data-orientation="horizontal"] {
        border-block-start: 1px solid;
        background: none;
    }
    [data-slot="separator"][data-orientation="vertical"] {
        border-inline-start: 1px solid;
        background: none;
    }

    /* آواتارِ حرف‌اول روی زمینهٔ رنگی نوشته می‌شود. */
    [data-slot="avatar"] { border: 1px solid; }
}

/* مقادیرِ نمونه برای صفحهٔ گالری — تا مرجعِ سیستمِ طراحی خودش style= نداشته باشد.
   در کاربردِ واقعی عرضِ نوارِ پیشرفت از داده می‌آید و همان‌جا درون‌خطی است. */
.ui-skeleton-line-sm { inline-size: 40%; }
.ui-skeleton-line-lg { inline-size: 70%; }
.ui-progress-demo    { inline-size: 64%; }