/* =====================================================================
   tw-supplement.css
   ---------------------------------------------------------------------
   wwwroot/tailwind.css یک خروجی ساخته‌شده (build) است و در مخزن commit شده.
   هر بار در Razor کلاس تازه‌ای استفاده شده ولی «npm run tw:build» اجرا
   نشده، آن کلاس در خروجی نیست و عملاً بی‌اثر می‌ماند. نتیجه‌اش باگ
   «متن دیده نمی‌شود» است (سربرگ صفحه راهنما: متن سفید روی گرادیانی که
   هرگز ساخته نشده بود).

   این فایل همان کلاس‌های جاافتاده را دستی تعریف می‌کند تا سایت بدون
   اجرای npm هم درست دیده شود و اگر بعداً tailwind را build کردید هم
   بی‌خطر باقی بماند (تعریف‌ها با خروجی tailwind یکسان است).
   ===================================================================== */

/* ---------- رنگ متن ---------- */
.text-gray-100 { --tw-text-opacity: 1; color: rgb(243 244 246 / var(--tw-text-opacity)); }
.text-indigo-50 { --tw-text-opacity: 1; color: rgb(238 242 255 / var(--tw-text-opacity)); }
.text-indigo-100 { --tw-text-opacity: 1; color: rgb(224 231 255 / var(--tw-text-opacity)); }
.text-danger { --tw-text-opacity: 1; color: rgb(220 38 38 / var(--tw-text-opacity)); }

/* ---------- پس‌زمینه ---------- */
.bg-gray-900 { --tw-bg-opacity: 1; background-color: rgb(17 24 39 / var(--tw-bg-opacity)); }
.bg-orange-100 { --tw-bg-opacity: 1; background-color: rgb(255 237 213 / var(--tw-bg-opacity)); }
.bg-white\/15 { background-color: rgb(255 255 255 / .15); }
.bg-white\/20 { background-color: rgb(255 255 255 / .2); }
.hover\:bg-white\/25:hover { background-color: rgb(255 255 255 / .25); }

/* ---------- حاشیه ---------- */
.border-amber-300 { --tw-border-opacity: 1; border-color: rgb(252 211 77 / var(--tw-border-opacity)); }

/* ---------- گرادیان (سربرگ صفحه راهنما و کارت‌ها) ---------- */
.from-indigo-700 {
    --tw-gradient-from: #4338ca var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(67, 56, 202, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-indigo-500 { --tw-gradient-to: #6366f1 var(--tw-gradient-to-position); }

/* ---------- اندازه ---------- */
.h-4\.5 { height: 1.125rem; }
.w-4\.5 { width: 1.125rem; }
.min-w-\[200px\] { min-width: 200px; }

/* ---------- فاصله ---------- */
.my-8 { margin-top: 2rem; margin-bottom: 2rem; }
.pb-6 { padding-bottom: 1.5rem; }
.pr-6 { padding-right: 1.5rem; }

.space-y-5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}

.scroll-mt-24 { scroll-margin-top: 6rem; }

/* ---------- فهرست ---------- */
.list-decimal { list-style-type: decimal; }

/* ---------- کنترل‌های فرم ---------- */
.accent-blue-600 { accent-color: #2563eb; }
.accent-red-600 { accent-color: #dc2626; }

/* ---------- بریک‌پوینت lg (فهرست چسبانِ صفحه راهنما) ---------- */
@media (min-width: 1024px) {
    .lg\:sticky { position: sticky; }
    .lg\:top-24 { top: 6rem; }
    .lg\:col-span-3 { grid-column: span 3 / span 3; }
}

/* =====================================================================
   شمارش معکوس مناقصه (کلاس‌های اختصاصی سامانه، نه tailwind)
   ===================================================================== */
.daovi-countdown {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    direction: rtl;
    padding: .3rem .7rem;
    border-radius: .6rem;
    border: 1px solid currentColor;
    font-size: .8rem;
}

/* تایمر مناقصه‌ها قرمز است (درخواست کارفرما): تا وقتی مهلت باز است قرمز
   می‌ماند و در ۳ ساعت آخر پررنگ‌تر و نبض‌دار می‌شود تا به چشم بیاید.
   حالت «بسته شد» خاکستری است تا با تایمر در جریان اشتباه گرفته نشود. */
.daovi-countdown[data-state="live"] { color: #dc2626; background: #fef2f2; border-color: #fca5a5; }
.daovi-countdown[data-state="soon"] {
    color: #fff;
    background: #dc2626;
    border-color: #b91c1c;
    animation: daovi-countdown-pulse 1.4s ease-in-out infinite;
}
.daovi-countdown[data-state="ended"] { color: #64748b; background: #f1f5f9; border-color: #cbd5e1; }

@keyframes daovi-countdown-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .45); }
    50%      { box-shadow: 0 0 0 5px rgba(220, 38, 38, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .daovi-countdown[data-state="soon"] { animation: none; }
}

/* نوار خطای Blazor: تعریف تکراری از اینجا حذف شد.
   سه تعریف موازی (اینجا + MainLayout.razor.css) با هم می‌جنگیدند و
   padding/چیدمان متفاوت می‌دادند. تعریف واحد: wwwroot/mobile-fixes.css */

/* ---------- کلاس‌های افزوده‌شده در همین بازبینی ---------- */
.right-3\.5 { right: .875rem; }
.gap-x-4 { column-gap: 1rem; }
.gap-x-5 { column-gap: 1.25rem; }

@media (min-width: 1280px) {
    .xl\:gap-x-5 { column-gap: 1.25rem; }
}

/* =====================================================================
   کلاس‌های جاافتاده‌ی دیگری که در بازبینی عیب‌یابی پیدا شدند
   (در wwwroot/tailwind.css نبودند و بی‌اثر مانده بودند)
   ===================================================================== */

/* --- نشان تعداد مناقصه‌های باز در ناوبار: بدون این، دایره می‌ترکید --- */
.min-w-\[18px\] { min-width: 18px; }

/* --- فاصله‌ها و اندازه‌هایی که در ناوبار/فرم‌ها استفاده شده --- */
.pr-10 { padding-right: 2.5rem; }
.pl-3 { padding-left: .75rem; }
.py-2\.5 { padding-top: .625rem; padding-bottom: .625rem; }
.w-44 { width: 11rem; }
@media (min-width: 1024px) { .lg\:w-52 { width: 13rem; } }
@media (min-width: 1280px) { .xl\:w-72 { width: 18rem; } }

/* --- ناوبر صفحه‌بندی (Pager): چیدمان موبایل/دسکتاپ بدون این‌ها خراب بود --- */
@media (min-width: 768px) {
    .md\:flex-row-reverse { flex-direction: row-reverse; }
    .md\:pl-24 { padding-left: 6rem; }
}

/* --- تقویم فارسی: روی موبایل از عرض صفحه بیرون می‌زد --- */
.w-\[min\(22rem\,calc\(100vw-2rem\)\)\] { width: min(22rem, calc(100vw - 2rem)); }

/* =====================================================================
   قواعد چاپ سراسری
   ---------------------------------------------------------------------
   دکمه‌های چاپ سامانه سند مستقل می‌سازند و به چاپگر می‌دهند؛ اما اگر
   کاربر خودش Ctrl+P بزند هم خروجی نباید «عکس صفحه» باشد. این بخش همه
   عناصر رابط کاربری (ناوبار، کشوی موبایل، جعبه جست‌وجو، دکمه‌ها، چت
   شناور، نوار خطا و فوتر) را از کاغذ حذف می‌کند.
   ===================================================================== */
@media print {
    nav,
    header,
    footer,
    .dnav,
    .dnav-overlay,
    .daovi-navsearch,
    .pas-chat-widget,
    .pas-chat-frame-wrap,
    #blazor-error-ui,
    .daovi-toast-host,
    .daovi-noprint,
    button,
    .dropdown-menu {
        display: none !important;
    }

    /* نمودارهای canvas روی کاغذ خالی یا تار می‌افتند */
    canvas { display: none !important; }

    html, body {
        background: #fff !important;
        color: #000 !important;
    }

    /* سایه و پس‌زمینه‌های رنگی جوهر را بی‌دلیل مصرف می‌کنند */
    * {
        box-shadow: none !important;
        text-shadow: none !important;
    }

    table { page-break-inside: auto; }
    tr, img { page-break-inside: avoid; }

    a[href]::after { content: ""; }

    @page { size: A4; margin: 14mm 12mm; }
}

/* =====================================================================
   صفحه «دریافت اپلیکیشن» (/download)
   کلاس‌های اختصاصی، مستقل از build تیلویند تا صفحه هیچ‌وقت بی‌استایل نشود.
   ===================================================================== */
.daovi-dl-hero {
    background: linear-gradient(135deg, #4f46e5, #1d4ed8);
    color: #fff;
    border-radius: 1.5rem;
    padding: 2.75rem 1.75rem;
    text-align: center;
}

.daovi-dl-hero h1 { font-size: 1.6rem; font-weight: 900; margin: 0 0 .6rem; }
.daovi-dl-hero p { color: #dbeafe; margin: 0 auto; max-width: 34rem; line-height: 2; }

.daovi-dl-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(255, 255, 255, .18);
    border-radius: 999px;
    padding: .3rem .85rem;
    font-size: .78rem;
    font-weight: 700;
    margin-bottom: 1.1rem;
}

.daovi-dl-cta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.6rem;
    background: #fff;
    color: #4f46e5;
    font-weight: 900;
    border: 0;
    border-radius: .85rem;
    padding: .85rem 2rem;
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;
    transition: transform .15s ease, opacity .15s ease;
}
.daovi-dl-cta:hover { transform: translateY(-2px); }
.daovi-dl-cta:disabled { opacity: .6; cursor: default; transform: none; }

.daovi-dl-note {
    margin-top: 1rem;
    font-size: .82rem;
    color: #e0e7ff;
    line-height: 1.9;
}

.daovi-dl-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
    margin-top: 1.75rem;
}
@media (min-width: 768px) { .daovi-dl-grid { grid-template-columns: repeat(3, 1fr); } }

.daovi-dl-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
}
.daovi-dl-card.is-current { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, .13); }

.daovi-dl-card-head {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .35rem;
}
.daovi-dl-card-head i { color: #4f46e5; font-size: 1.35rem; }
.daovi-dl-card-head b { font-size: 1.02rem; color: #111827; }

.daovi-dl-current-tag {
    margin-inline-start: auto;
    background: #eef2ff;
    color: #4338ca;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    padding: .18rem .55rem;
}

.daovi-dl-card ol {
    margin: .9rem 0 0;
    padding-inline-start: 1.15rem;
    list-style: decimal;
    color: #374151;
    font-size: .86rem;
    line-height: 2.1;
}

.daovi-dl-card .daovi-dl-sub { color: #6b7280; font-size: .8rem; line-height: 1.9; }

.daovi-dl-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: 1rem;
    background: #eef2ff;
    color: #4338ca;
    font-weight: 700;
    font-size: .85rem;
    border-radius: .6rem;
    padding: .55rem 1rem;
    text-decoration: none;
}
.daovi-dl-link:hover { background: #e0e7ff; }

.daovi-dl-alert {
    border-radius: .8rem;
    padding: .8rem 1.1rem;
    font-size: .87rem;
    line-height: 1.9;
    margin-top: 1.25rem;
    border: 1px solid transparent;
}
.daovi-dl-alert.ok { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.daovi-dl-alert.warn { background: #fffbeb; color: #92400e; border-color: #fde68a; }

.daovi-dl-features {
    display: grid;
    gap: .9rem;
    grid-template-columns: 1fr;
    margin-top: 1.75rem;
}
@media (min-width: 640px) { .daovi-dl-features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .daovi-dl-features { grid-template-columns: repeat(4, 1fr); } }

.daovi-dl-feature {
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: .9rem;
    padding: 1.05rem;
    text-align: center;
    font-size: .85rem;
    color: #475569;
}
.daovi-dl-feature i { color: #4f46e5; font-size: 1.2rem; display: block; margin-bottom: .5rem; }
.daovi-dl-feature b { display: block; color: #111827; margin-bottom: .25rem; }

/* =====================================================================
   فرم چندمرحله‌ای «درخواست مشاوره و خدمات حقوقی»  (.slf = save-legal form)
   ---------------------------------------------------------------------
   فرم قبلی همه‌ی فیلدها را در یک صفحه‌ی بلند و با چند رنگ مختلف
   (آبی، نیلی، خاکستری، قرمز) نشان می‌داد و شلوغ بود. اینجا:
     • یک رنگ اصلی (نیلی) + خاکستری‌های هم‌رنگ با آن؛ بدون رنگ‌بازی
     • پنج مرحله با دایره‌های بالای فرم (انجام‌شده / فعلی / بعدی)
     • دکمه‌های «قبلی» و «بعدی» پایین فرم
   ===================================================================== */
.slf {
    --slf-bg: #faf9fd;            --slf-bg: oklch(98.4% .005 272);
    --slf-surface: #fefdff;       --slf-surface: oklch(99.6% .002 272);
    --slf-ink: #2b2536;           --slf-ink: oklch(26% .025 272);
    --slf-ink-soft: #5f5a6b;      --slf-ink-soft: oklch(50% .018 272);
    --slf-ink-faint: #7d7989;     --slf-ink-faint: oklch(62% .014 272);
    --slf-line: #e5e2ea;          --slf-line: oklch(91.5% .007 272);
    --slf-line-strong: #d2cfda;   --slf-line-strong: oklch(85% .01 272);
    --slf-accent: #5145d6;        --slf-accent: oklch(51% .19 272);
    --slf-accent-ink: #3c31a0;    --slf-accent-ink: oklch(38% .15 272);
    --slf-accent-wash: #f1efff;   --slf-accent-wash: oklch(96.5% .022 272);
    --slf-danger: #c8382f;        --slf-danger: oklch(55% .185 25);
    --slf-danger-wash: #fdeeec;   --slf-danger-wash: oklch(96% .03 25);
    --slf-ok: #2c8a5c;            --slf-ok: oklch(56% .13 155);
    --slf-ok-wash: #e9f7ef;       --slf-ok-wash: oklch(96% .04 155);
    --slf-ease: cubic-bezier(.22, 1, .36, 1);

    color: var(--slf-ink);
    font-family: inherit;
}

.slf-page { background: var(--slf-bg); min-height: 100vh; }
@supports (min-height: 100dvh) { .slf-page { min-height: 100dvh; } }
.slf-wrap { max-width: 56rem; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }

/* ===== سربرگ فرم ===== */
.slf-head { margin-bottom: 2rem; }
.slf-eyebrow {
    display: block;
    font-size: .75rem;
    letter-spacing: .08em;
    color: var(--slf-ink-faint);
    margin-bottom: .5rem;
}
.slf-head h1 {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.6;
    margin: 0;
    color: var(--slf-ink);
}
@media (min-width: 768px) { .slf-head h1 { font-size: 1.9rem; } }
.slf-head p {
    margin: .6rem 0 0;
    color: var(--slf-ink-soft);
    font-size: .93rem;
    line-height: 1.9;
    max-width: 62ch;
}

/* ===== دایره‌های مرحله ===== */
.slf-steps { position: relative; margin-bottom: 2rem; }
.slf-rail {
    position: absolute;
    top: 1.15rem;
    right: 1.15rem;
    left: 1.15rem;
    height: 2px;
    background: var(--slf-line);
    border-radius: 2px;
    overflow: hidden;
}
.slf-rail span {
    display: block;
    height: 100%;
    background: var(--slf-accent);
    transform-origin: right center;
    transition: transform .45s var(--slf-ease);
}
.slf-steps ol {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: .25rem;
}
.slf-steps ol > li { flex: 1 1 0; min-width: 0; display: flex; }
.slf-step {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    text-align: center;
    cursor: default;
    color: var(--slf-ink-faint);
}
.slf-step[data-clickable="true"] { cursor: pointer; }
.slf-dot {
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    font-weight: 700;
    background: var(--slf-surface);
    border: 2px solid var(--slf-line-strong);
    color: var(--slf-ink-faint);
    transition: transform .25s var(--slf-ease), border-color .25s var(--slf-ease), background-color .25s var(--slf-ease), color .25s var(--slf-ease);
}
.slf-step-label { font-size: .78rem; line-height: 1.5; }

.slf-step[data-state="done"] { color: var(--slf-ink-soft); }
.slf-step[data-state="done"] .slf-dot {
    background: var(--slf-accent);
    border-color: var(--slf-accent);
    color: #fdfdff;
}
.slf-step[data-state="current"] { color: var(--slf-accent-ink); font-weight: 700; }
.slf-step[data-state="current"] .slf-dot {
    border-color: var(--slf-accent);
    color: var(--slf-accent-ink);
    box-shadow: 0 0 0 4px var(--slf-accent-wash);
}
.slf-step[data-clickable="true"]:hover .slf-dot { transform: translateY(-2px); }
.slf-step:focus-visible .slf-dot { outline: 2px solid var(--slf-accent); outline-offset: 3px; }

@media (max-width: 640px) {
    .slf-step-label { display: none; }
    .slf-step[data-state="current"] .slf-step-label { display: block; }
    .slf-dot { width: 2rem; height: 2rem; font-size: .8rem; }
    .slf-rail { top: 1rem; }
}

/* ===== بدنه فرم ===== */
.slf-card {
    background: var(--slf-surface);
    border: 1px solid var(--slf-line);
    border-radius: 1rem;
    padding: 1.75rem;
}
@media (min-width: 768px) { .slf-card { padding: 2.25rem 2.5rem; } }

.slf-panel { animation: slf-in .38s var(--slf-ease) both; }
@keyframes slf-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .slf-panel { animation: none; } }

.slf-panel > h2 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 .35rem;
}
.slf-panel > h2 + p {
    margin: 0 0 1.75rem;
    color: var(--slf-ink-soft);
    font-size: .87rem;
    line-height: 1.9;
}

.slf-block + .slf-block { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--slf-line); }
.slf-block > h3 {
    font-size: .95rem;
    font-weight: 700;
    margin: 0 0 1rem;
    color: var(--slf-ink);
}
.slf-block > h3 .slf-optional { font-weight: 400; font-size: .78rem; color: var(--slf-ink-faint); margin-right: .4rem; }

.slf-grid { display: grid; gap: 1.1rem 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .slf-grid.two { grid-template-columns: 1fr 1fr; } }
.slf-grid .full { grid-column: 1 / -1; }

.slf-field label, .slf-label {
    display: block;
    font-size: .83rem;
    font-weight: 500;
    color: var(--slf-ink-soft);
    margin-bottom: .45rem;
}
.slf-req { color: var(--slf-danger); margin-right: .2rem; }

.slf-input {
    width: 100%;
    padding: .65rem .85rem;
    font: inherit;
    font-size: .92rem;
    color: var(--slf-ink);
    background: var(--slf-surface);
    border: 1px solid var(--slf-line-strong);
    border-radius: .6rem;
    transition: border-color .18s var(--slf-ease), box-shadow .18s var(--slf-ease);
}
.slf-input::placeholder { color: var(--slf-ink-faint); }
.slf-input:hover { border-color: var(--slf-ink-faint); }
.slf-input:focus {
    outline: none;
    border-color: var(--slf-accent);
    box-shadow: 0 0 0 3px var(--slf-accent-wash);
}
.slf-input:disabled { background: var(--slf-bg); color: var(--slf-ink-faint); cursor: not-allowed; }
textarea.slf-input { min-height: 8rem; line-height: 1.9; resize: vertical; }
.slf-hint { margin: .45rem 0 0; font-size: .78rem; color: var(--slf-ink-faint); line-height: 1.8; }

/* ===== انتخاب‌ها: رادیو و چک‌باکس بدون رنگ‌بازی ===== */
.slf-choices { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .slf-choices.two { grid-template-columns: 1fr 1fr; } }

.slf-choice {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .9rem 1rem;
    border: 1px solid var(--slf-line-strong);
    border-radius: .7rem;
    background: var(--slf-surface);
    cursor: pointer;
    transition: border-color .18s var(--slf-ease), background-color .18s var(--slf-ease);
}
.slf-choice:hover { border-color: var(--slf-ink-faint); }
.slf-choice input { accent-color: var(--slf-accent); width: 1.05rem; height: 1.05rem; margin-top: .2rem; flex: none; }
.slf-choice > span { flex: 1 1 auto; min-width: 0; }
.slf-choice b { display: block; font-size: .9rem; font-weight: 700; }
.slf-choice span.slf-choice-hint { display: block; font-size: .78rem; color: var(--slf-ink-faint); margin-top: .3rem; line-height: 1.7; }
.slf-choice[data-selected="true"] { border-color: var(--slf-accent); background: var(--slf-accent-wash); }
.slf-choice.is-locked { cursor: not-allowed; background: var(--slf-bg); color: var(--slf-ink-faint); font-size: .84rem; align-items: center; }

/* فهرست تیک‌دار فشرده (خدمات، روش ارتباط، زیرشاخه‌ها) */
.slf-ticks { display: grid; gap: .35rem .75rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .slf-ticks.two { grid-template-columns: 1fr 1fr; } }
.slf-tick {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .3rem;
    font-size: .88rem;
    color: var(--slf-ink);
    cursor: pointer;
    border-radius: .45rem;
}
.slf-tick:hover { background: var(--slf-bg); }
.slf-tick input { accent-color: var(--slf-accent); width: 1rem; height: 1rem; flex: none; }

/* ===== جعبه مناقصه ===== */
.slf-tender-note {
    margin-top: .85rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .84rem;
    color: var(--slf-accent-ink);
    background: var(--slf-accent-wash);
    border-radius: .6rem;
    padding: .7rem .9rem;
}

/* ===== هشدار ===== */
.slf-alert {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin-bottom: 1.5rem;
    padding: .75rem .9rem;
    border-radius: .6rem;
    font-size: .86rem;
    line-height: 1.8;
    background: var(--slf-danger-wash);
    color: var(--slf-danger);
    border: 1px solid var(--slf-danger);
}

/* ===== مرور نهایی ===== */
.slf-review { display: grid; gap: 0; border: 1px solid var(--slf-line); border-radius: .75rem; overflow: hidden; }
.slf-review-row {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    padding: .7rem 1rem;
    font-size: .87rem;
}
.slf-review-row + .slf-review-row { border-top: 1px solid var(--slf-line); }
.slf-review-row dt { color: var(--slf-ink-faint); min-width: 9rem; margin: 0; }
.slf-review-row dd { margin: 0; font-weight: 500; }

.slf-terms {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin-top: 1.75rem;
    font-size: .85rem;
    line-height: 1.9;
    color: var(--slf-ink-soft);
}
.slf-terms input { accent-color: var(--slf-accent); width: 1.05rem; height: 1.05rem; margin-top: .35rem; flex: none; }
.slf-terms a { color: var(--slf-accent); font-weight: 500; }

/* ===== دکمه‌های قبلی / بعدی ===== */
.slf-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 2.25rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--slf-line);
}
.slf-nav-count { font-size: .78rem; color: var(--slf-ink-faint); }
.slf-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 2.75rem;
    padding: .6rem 1.4rem;
    font: inherit;
    font-size: .9rem;
    font-weight: 700;
    border-radius: .6rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color .18s var(--slf-ease), border-color .18s var(--slf-ease), transform .18s var(--slf-ease), opacity .18s var(--slf-ease);
}
.slf-btn:active { transform: translateY(1px); }
.slf-btn:focus-visible { outline: 2px solid var(--slf-accent); outline-offset: 2px; }
.slf-btn.primary { background: var(--slf-accent); color: #fdfdff; }
.slf-btn.primary:hover { background: var(--slf-accent-ink); }
.slf-btn.ghost { background: var(--slf-surface); border-color: var(--slf-line-strong); color: var(--slf-ink-soft); }
.slf-btn.ghost:hover { border-color: var(--slf-ink-faint); color: var(--slf-ink); }
.slf-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* ===== صفحه موفقیت ===== */
.slf-done { text-align: center; padding: 1rem 0 .5rem; }
.slf-done-mark {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--slf-ok-wash);
    color: var(--slf-ok);
    font-size: 1.4rem;
}
.slf-done h2 { font-size: 1.35rem; font-weight: 800; margin: 0 0 .75rem; }
.slf-done p { color: var(--slf-ink-soft); font-size: .9rem; line-height: 1.9; margin: 0 0 .4rem; }
.slf-done-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 1.75rem; }
.slf-code {
    display: inline-block;
    margin-top: 1.75rem;
    padding: .5rem .9rem;
    border: 1px dashed var(--slf-line-strong);
    border-radius: .5rem;
    font-size: .85rem;
    color: var(--slf-ink-soft);
}
.slf-code b { font-variant-numeric: tabular-nums; color: var(--slf-ink); letter-spacing: .03em; }


/* =====================================================================
   کلاس‌های تیلویندی که در خروجی build نبودند (بازبینی ریسپانسیو)
   ---------------------------------------------------------------------
   اینها در Razor استفاده شده‌اند ولی در wwwroot/tailwind.css تولید
   نشده بودند، پس عملاً بی‌اثر بودند و چیدمان چند صفحه را می‌شکستند.
   بعد از اجرای «npm run tw:build» این بخش بی‌ضرر و تکراری می‌شود.
   ===================================================================== */
.flex-column { flex-direction: column; }
.gap-x-6 { -moz-column-gap: 1.5rem; column-gap: 1.5rem; }
.max-w-5xl { max-width: 64rem; }
.max-h-\[24rem\] { max-height: 24rem; }
.ml-8 { margin-left: 2rem; }
.mr-8 { margin-right: 2rem; }
.mt-9 { margin-top: 2.25rem; }
.mt-10 { margin-top: 2.5rem; }
.my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.pl-12 { padding-left: 3rem; }
.w-1\/2 { width: 50%; }
.w-2\/3 { width: 66.666667%; }
.space-y-8 > :not([hidden]) ~ :not([hidden]) { margin-top: 2rem; margin-bottom: 0; }
.bg-slate-50 { background-color: #f8fafc; }
.bg-slate-100 { background-color: #f1f5f9; }
.bg-gray-50\/60 { background-color: rgb(249 250 251 / .6); }
.border-dashed { border-style: dashed; }
.border-white { border-color: #fff; }
.cursor-default { cursor: default; }
.opacity-80 { opacity: .8; }
.underline { text-decoration-line: underline; }
.text-blue-400 { color: #60a5fa; }
.text-fuchsia-600 { color: #c026d3; }
.text-indigo-900 { color: #312e81; }
.text-slate-200 { color: #e2e8f0; }
.text-slate-800 { color: #1e293b; }
.disabled\:opacity-30:disabled { opacity: .3; }
.group:hover .group-hover\:text-indigo-700 { color: #4338ca; }
.hover\:bg-white\/10:hover { background-color: rgb(255 255 255 / .1); }
.hover\:text-amber-900:hover { color: #78350f; }

@media (min-width: 768px) {
    .md\:items-start { align-items: flex-start; }
    .md\:p-6 { padding: 1.5rem; }
    .md\:p-10 { padding: 2.5rem; }
    .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
}

/* =====================================================================
   اسکلت بارگذاری (Components/Shared/DataState.razor)
   ---------------------------------------------------------------------
   جای پیام «داده‌ای نیست» را در فاصله‌ی بین رندر اول و رسیدن داده‌ها
   می‌گیرد. عمداً CSS خالص است، نه انیمیشن جاوااسکریپتی: اسکلت باید
   حتی وقتی مدار SignalR هنوز وصل نشده هم حرکت داشته باشد.
   ===================================================================== */
.ds-sk {
    background: linear-gradient(90deg, #eef1f5 25%, #e2e6ec 37%, #eef1f5 63%);
    background-size: 400% 100%;
    animation: ds-sk-shine 1.3s ease-in-out infinite;
}

@keyframes ds-sk-shine {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .ds-sk { animation: none; background: #eef1f5; }
}


/* =====================================================================
   ۱) دسترس‌پذیری: sr-only و «پرش به محتوا»
   ---------------------------------------------------------------------
   کلاس sr-only در کل سامانه صفر مورد استفاده داشت، در حالی که ده‌ها دکمه
   فقط آیکن دارند. حالا a11y.js خودکار برای این دکمه‌ها هم aria-label
   می‌گذارد و هم یک <span class="sr-only"> — پس این کلاس واقعاً لازم است.

   نکته‌ی مهم: sr-only متن را «حذف» نمی‌کند، فقط از دید پنهانش می‌کند.
   display:none یا visibility:hidden اشتباه رایجی است که متن را از
   اسکرین‌ریدر هم پنهان می‌کند و کل هدف را از بین می‌برد.
   ===================================================================== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* نسخه‌ای که با فوکوس دیدنی می‌شود (برای لینک‌های میان‌بر) */
.not-sr-only,
.focus\:not-sr-only:focus {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ---------- پرش به محتوا (Components/Layout/MainLayout.razor) ---------- */
.skip-link {
    position: fixed;
    top: 0;
    right: 0;
    z-index: var(--z-toast);
    transform: translateY(-140%);
    background: #4f46e5;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    padding: 10px 20px;
    border-bottom-left-radius: 10px;
    box-shadow: 0 6px 18px -4px rgb(15 23 42 / .45);
    transition: transform .16s ease-out;
    text-decoration: none;
}

.skip-link:focus,
.skip-link:focus-visible {
    transform: translateY(0);
    outline: 3px solid #fbbf24;
    outline-offset: -3px;
}

/* ---------- حلقه فوکوس دیدنی ----------
   Tailwind preflight حلقه‌ی پیش‌فرض مرورگر را برمی‌دارد و سامانه هیچ‌جا
   جایگزینی برایش نگذاشته بود؛ یعنی کاربر کیبورد نمی‌دانست کجاست. */
:focus-visible {
    outline: 2px solid #4f46e5;
    outline-offset: 2px;
}

.daovi-modal-open {
    overflow: hidden;
}

/* محتوای اصلی هرگز نباید حلقه‌ی فوکوس بگیرد (فقط هدف پرش است) */
#main-content:focus {
    outline: none;
}

/* =====================================================================
   ۲) کلاس‌های رنگ پویا — bg-@(ColorKey)-50 و خانواده‌اش
   ---------------------------------------------------------------------
   Tailwind فایل‌ها را متنی اسکن می‌کند، پس «bg-@(h.ColorKey)-50» را یک
   رشته‌ی بی‌معنی می‌بیند و هیچ‌وقت در خروجی نمی‌آورد. نتیجه: کارت جلسات
   داشبورد (موکل، وکیل و مدیر) کاملاً بی‌رنگ رندر می‌شد.

   راه اصلی، safelist در tailwind.config.js است که اضافه شد. این بلوک
   همان کلاس‌ها را برای وقتی که npm run tw:build اجرا نشده تضمین می‌کند.
   شش رنگ مجاز ColorKey (Data/Entities.cs) در شِیدهای ۵۰ تا ۸۰۰.
   ===================================================================== */
.bg-red-50 { --tw-bg-opacity: 1; background-color: rgb(254 242 242 / var(--tw-bg-opacity)); }
.text-red-50 { --tw-text-opacity: 1; color: rgb(254 242 242 / var(--tw-text-opacity)); }
.border-red-50 { --tw-border-opacity: 1; border-color: rgb(254 242 242 / var(--tw-border-opacity)); }
.bg-red-100 { --tw-bg-opacity: 1; background-color: rgb(254 226 226 / var(--tw-bg-opacity)); }
.text-red-100 { --tw-text-opacity: 1; color: rgb(254 226 226 / var(--tw-text-opacity)); }
.border-red-100 { --tw-border-opacity: 1; border-color: rgb(254 226 226 / var(--tw-border-opacity)); }
.bg-red-200 { --tw-bg-opacity: 1; background-color: rgb(254 202 202 / var(--tw-bg-opacity)); }
.text-red-200 { --tw-text-opacity: 1; color: rgb(254 202 202 / var(--tw-text-opacity)); }
.border-red-200 { --tw-border-opacity: 1; border-color: rgb(254 202 202 / var(--tw-border-opacity)); }
.bg-red-500 { --tw-bg-opacity: 1; background-color: rgb(239 68 68 / var(--tw-bg-opacity)); }
.text-red-500 { --tw-text-opacity: 1; color: rgb(239 68 68 / var(--tw-text-opacity)); }
.border-red-500 { --tw-border-opacity: 1; border-color: rgb(239 68 68 / var(--tw-border-opacity)); }
.bg-red-600 { --tw-bg-opacity: 1; background-color: rgb(220 38 38 / var(--tw-bg-opacity)); }
.text-red-600 { --tw-text-opacity: 1; color: rgb(220 38 38 / var(--tw-text-opacity)); }
.border-red-600 { --tw-border-opacity: 1; border-color: rgb(220 38 38 / var(--tw-border-opacity)); }
.bg-red-700 { --tw-bg-opacity: 1; background-color: rgb(185 28 28 / var(--tw-bg-opacity)); }
.text-red-700 { --tw-text-opacity: 1; color: rgb(185 28 28 / var(--tw-text-opacity)); }
.border-red-700 { --tw-border-opacity: 1; border-color: rgb(185 28 28 / var(--tw-border-opacity)); }
.bg-red-800 { --tw-bg-opacity: 1; background-color: rgb(153 27 27 / var(--tw-bg-opacity)); }
.text-red-800 { --tw-text-opacity: 1; color: rgb(153 27 27 / var(--tw-text-opacity)); }
.border-red-800 { --tw-border-opacity: 1; border-color: rgb(153 27 27 / var(--tw-border-opacity)); }
.bg-indigo-50 { --tw-bg-opacity: 1; background-color: rgb(238 242 255 / var(--tw-bg-opacity)); }
.text-indigo-50 { --tw-text-opacity: 1; color: rgb(238 242 255 / var(--tw-text-opacity)); }
.border-indigo-50 { --tw-border-opacity: 1; border-color: rgb(238 242 255 / var(--tw-border-opacity)); }
.bg-indigo-100 { --tw-bg-opacity: 1; background-color: rgb(224 231 255 / var(--tw-bg-opacity)); }
.text-indigo-100 { --tw-text-opacity: 1; color: rgb(224 231 255 / var(--tw-text-opacity)); }
.border-indigo-100 { --tw-border-opacity: 1; border-color: rgb(224 231 255 / var(--tw-border-opacity)); }
.bg-indigo-200 { --tw-bg-opacity: 1; background-color: rgb(199 210 254 / var(--tw-bg-opacity)); }
.text-indigo-200 { --tw-text-opacity: 1; color: rgb(199 210 254 / var(--tw-text-opacity)); }
.border-indigo-200 { --tw-border-opacity: 1; border-color: rgb(199 210 254 / var(--tw-border-opacity)); }
.bg-indigo-500 { --tw-bg-opacity: 1; background-color: rgb(99 102 241 / var(--tw-bg-opacity)); }
.text-indigo-500 { --tw-text-opacity: 1; color: rgb(99 102 241 / var(--tw-text-opacity)); }
.border-indigo-500 { --tw-border-opacity: 1; border-color: rgb(99 102 241 / var(--tw-border-opacity)); }
.bg-indigo-600 { --tw-bg-opacity: 1; background-color: rgb(79 70 229 / var(--tw-bg-opacity)); }
.text-indigo-600 { --tw-text-opacity: 1; color: rgb(79 70 229 / var(--tw-text-opacity)); }
.border-indigo-600 { --tw-border-opacity: 1; border-color: rgb(79 70 229 / var(--tw-border-opacity)); }
.bg-indigo-700 { --tw-bg-opacity: 1; background-color: rgb(67 56 202 / var(--tw-bg-opacity)); }
.text-indigo-700 { --tw-text-opacity: 1; color: rgb(67 56 202 / var(--tw-text-opacity)); }
.border-indigo-700 { --tw-border-opacity: 1; border-color: rgb(67 56 202 / var(--tw-border-opacity)); }
.bg-indigo-800 { --tw-bg-opacity: 1; background-color: rgb(55 48 163 / var(--tw-bg-opacity)); }
.text-indigo-800 { --tw-text-opacity: 1; color: rgb(55 48 163 / var(--tw-text-opacity)); }
.border-indigo-800 { --tw-border-opacity: 1; border-color: rgb(55 48 163 / var(--tw-border-opacity)); }
.bg-green-50 { --tw-bg-opacity: 1; background-color: rgb(240 253 244 / var(--tw-bg-opacity)); }
.text-green-50 { --tw-text-opacity: 1; color: rgb(240 253 244 / var(--tw-text-opacity)); }
.border-green-50 { --tw-border-opacity: 1; border-color: rgb(240 253 244 / var(--tw-border-opacity)); }
.bg-green-100 { --tw-bg-opacity: 1; background-color: rgb(220 252 231 / var(--tw-bg-opacity)); }
.text-green-100 { --tw-text-opacity: 1; color: rgb(220 252 231 / var(--tw-text-opacity)); }
.border-green-100 { --tw-border-opacity: 1; border-color: rgb(220 252 231 / var(--tw-border-opacity)); }
.bg-green-200 { --tw-bg-opacity: 1; background-color: rgb(187 247 208 / var(--tw-bg-opacity)); }
.text-green-200 { --tw-text-opacity: 1; color: rgb(187 247 208 / var(--tw-text-opacity)); }
.border-green-200 { --tw-border-opacity: 1; border-color: rgb(187 247 208 / var(--tw-border-opacity)); }
.bg-green-500 { --tw-bg-opacity: 1; background-color: rgb(34 197 94 / var(--tw-bg-opacity)); }
.text-green-500 { --tw-text-opacity: 1; color: rgb(34 197 94 / var(--tw-text-opacity)); }
.border-green-500 { --tw-border-opacity: 1; border-color: rgb(34 197 94 / var(--tw-border-opacity)); }
.bg-green-600 { --tw-bg-opacity: 1; background-color: rgb(22 163 74 / var(--tw-bg-opacity)); }
.text-green-600 { --tw-text-opacity: 1; color: rgb(22 163 74 / var(--tw-text-opacity)); }
.border-green-600 { --tw-border-opacity: 1; border-color: rgb(22 163 74 / var(--tw-border-opacity)); }
.bg-green-700 { --tw-bg-opacity: 1; background-color: rgb(21 128 61 / var(--tw-bg-opacity)); }
.text-green-700 { --tw-text-opacity: 1; color: rgb(21 128 61 / var(--tw-text-opacity)); }
.border-green-700 { --tw-border-opacity: 1; border-color: rgb(21 128 61 / var(--tw-border-opacity)); }
.bg-green-800 { --tw-bg-opacity: 1; background-color: rgb(22 101 52 / var(--tw-bg-opacity)); }
.text-green-800 { --tw-text-opacity: 1; color: rgb(22 101 52 / var(--tw-text-opacity)); }
.border-green-800 { --tw-border-opacity: 1; border-color: rgb(22 101 52 / var(--tw-border-opacity)); }
.bg-blue-50 { --tw-bg-opacity: 1; background-color: rgb(239 246 255 / var(--tw-bg-opacity)); }
.text-blue-50 { --tw-text-opacity: 1; color: rgb(239 246 255 / var(--tw-text-opacity)); }
.border-blue-50 { --tw-border-opacity: 1; border-color: rgb(239 246 255 / var(--tw-border-opacity)); }
.bg-blue-100 { --tw-bg-opacity: 1; background-color: rgb(219 234 254 / var(--tw-bg-opacity)); }
.text-blue-100 { --tw-text-opacity: 1; color: rgb(219 234 254 / var(--tw-text-opacity)); }
.border-blue-100 { --tw-border-opacity: 1; border-color: rgb(219 234 254 / var(--tw-border-opacity)); }
.bg-blue-200 { --tw-bg-opacity: 1; background-color: rgb(191 219 254 / var(--tw-bg-opacity)); }
.text-blue-200 { --tw-text-opacity: 1; color: rgb(191 219 254 / var(--tw-text-opacity)); }
.border-blue-200 { --tw-border-opacity: 1; border-color: rgb(191 219 254 / var(--tw-border-opacity)); }
.bg-blue-500 { --tw-bg-opacity: 1; background-color: rgb(59 130 246 / var(--tw-bg-opacity)); }
.text-blue-500 { --tw-text-opacity: 1; color: rgb(59 130 246 / var(--tw-text-opacity)); }
.border-blue-500 { --tw-border-opacity: 1; border-color: rgb(59 130 246 / var(--tw-border-opacity)); }
.bg-blue-600 { --tw-bg-opacity: 1; background-color: rgb(37 99 235 / var(--tw-bg-opacity)); }
.text-blue-600 { --tw-text-opacity: 1; color: rgb(37 99 235 / var(--tw-text-opacity)); }
.border-blue-600 { --tw-border-opacity: 1; border-color: rgb(37 99 235 / var(--tw-border-opacity)); }
.bg-blue-700 { --tw-bg-opacity: 1; background-color: rgb(29 78 216 / var(--tw-bg-opacity)); }
.text-blue-700 { --tw-text-opacity: 1; color: rgb(29 78 216 / var(--tw-text-opacity)); }
.border-blue-700 { --tw-border-opacity: 1; border-color: rgb(29 78 216 / var(--tw-border-opacity)); }
.bg-blue-800 { --tw-bg-opacity: 1; background-color: rgb(30 64 175 / var(--tw-bg-opacity)); }
.text-blue-800 { --tw-text-opacity: 1; color: rgb(30 64 175 / var(--tw-text-opacity)); }
.border-blue-800 { --tw-border-opacity: 1; border-color: rgb(30 64 175 / var(--tw-border-opacity)); }
.bg-amber-50 { --tw-bg-opacity: 1; background-color: rgb(255 251 235 / var(--tw-bg-opacity)); }
.text-amber-50 { --tw-text-opacity: 1; color: rgb(255 251 235 / var(--tw-text-opacity)); }
.border-amber-50 { --tw-border-opacity: 1; border-color: rgb(255 251 235 / var(--tw-border-opacity)); }
.bg-amber-100 { --tw-bg-opacity: 1; background-color: rgb(254 243 199 / var(--tw-bg-opacity)); }
.text-amber-100 { --tw-text-opacity: 1; color: rgb(254 243 199 / var(--tw-text-opacity)); }
.border-amber-100 { --tw-border-opacity: 1; border-color: rgb(254 243 199 / var(--tw-border-opacity)); }
.bg-amber-200 { --tw-bg-opacity: 1; background-color: rgb(253 230 138 / var(--tw-bg-opacity)); }
.text-amber-200 { --tw-text-opacity: 1; color: rgb(253 230 138 / var(--tw-text-opacity)); }
.border-amber-200 { --tw-border-opacity: 1; border-color: rgb(253 230 138 / var(--tw-border-opacity)); }
.bg-amber-500 { --tw-bg-opacity: 1; background-color: rgb(245 158 11 / var(--tw-bg-opacity)); }
.text-amber-500 { --tw-text-opacity: 1; color: rgb(245 158 11 / var(--tw-text-opacity)); }
.border-amber-500 { --tw-border-opacity: 1; border-color: rgb(245 158 11 / var(--tw-border-opacity)); }
.bg-amber-600 { --tw-bg-opacity: 1; background-color: rgb(217 119 6 / var(--tw-bg-opacity)); }
.text-amber-600 { --tw-text-opacity: 1; color: rgb(217 119 6 / var(--tw-text-opacity)); }
.border-amber-600 { --tw-border-opacity: 1; border-color: rgb(217 119 6 / var(--tw-border-opacity)); }
.bg-amber-700 { --tw-bg-opacity: 1; background-color: rgb(180 83 9 / var(--tw-bg-opacity)); }
.text-amber-700 { --tw-text-opacity: 1; color: rgb(180 83 9 / var(--tw-text-opacity)); }
.border-amber-700 { --tw-border-opacity: 1; border-color: rgb(180 83 9 / var(--tw-border-opacity)); }
.bg-amber-800 { --tw-bg-opacity: 1; background-color: rgb(146 64 14 / var(--tw-bg-opacity)); }
.text-amber-800 { --tw-text-opacity: 1; color: rgb(146 64 14 / var(--tw-text-opacity)); }
.border-amber-800 { --tw-border-opacity: 1; border-color: rgb(146 64 14 / var(--tw-border-opacity)); }
.bg-purple-50 { --tw-bg-opacity: 1; background-color: rgb(250 245 255 / var(--tw-bg-opacity)); }
.text-purple-50 { --tw-text-opacity: 1; color: rgb(250 245 255 / var(--tw-text-opacity)); }
.border-purple-50 { --tw-border-opacity: 1; border-color: rgb(250 245 255 / var(--tw-border-opacity)); }
.bg-purple-100 { --tw-bg-opacity: 1; background-color: rgb(243 232 255 / var(--tw-bg-opacity)); }
.text-purple-100 { --tw-text-opacity: 1; color: rgb(243 232 255 / var(--tw-text-opacity)); }
.border-purple-100 { --tw-border-opacity: 1; border-color: rgb(243 232 255 / var(--tw-border-opacity)); }
.bg-purple-200 { --tw-bg-opacity: 1; background-color: rgb(233 213 255 / var(--tw-bg-opacity)); }
.text-purple-200 { --tw-text-opacity: 1; color: rgb(233 213 255 / var(--tw-text-opacity)); }
.border-purple-200 { --tw-border-opacity: 1; border-color: rgb(233 213 255 / var(--tw-border-opacity)); }
.bg-purple-500 { --tw-bg-opacity: 1; background-color: rgb(168 85 247 / var(--tw-bg-opacity)); }
.text-purple-500 { --tw-text-opacity: 1; color: rgb(168 85 247 / var(--tw-text-opacity)); }
.border-purple-500 { --tw-border-opacity: 1; border-color: rgb(168 85 247 / var(--tw-border-opacity)); }
.bg-purple-600 { --tw-bg-opacity: 1; background-color: rgb(147 51 234 / var(--tw-bg-opacity)); }
.text-purple-600 { --tw-text-opacity: 1; color: rgb(147 51 234 / var(--tw-text-opacity)); }
.border-purple-600 { --tw-border-opacity: 1; border-color: rgb(147 51 234 / var(--tw-border-opacity)); }
.bg-purple-700 { --tw-bg-opacity: 1; background-color: rgb(126 34 206 / var(--tw-bg-opacity)); }
.text-purple-700 { --tw-text-opacity: 1; color: rgb(126 34 206 / var(--tw-text-opacity)); }
.border-purple-700 { --tw-border-opacity: 1; border-color: rgb(126 34 206 / var(--tw-border-opacity)); }
.bg-purple-800 { --tw-bg-opacity: 1; background-color: rgb(107 33 168 / var(--tw-bg-opacity)); }
.text-purple-800 { --tw-text-opacity: 1; color: rgb(107 33 168 / var(--tw-text-opacity)); }
.border-purple-800 { --tw-border-opacity: 1; border-color: rgb(107 33 168 / var(--tw-border-opacity)); }

/* ---------- توکن‌های تازه (tailwind.config.js → theme.extend) ---------- */
.leading-fa { line-height: 1.9; }
.leading-fa-tight { line-height: 1.7; }
.rounded-field { border-radius: .5rem; }
.rounded-card { border-radius: .75rem; }
.rounded-panel { border-radius: 1rem; }
.shadow-card { box-shadow: 0 1px 2px 0 rgb(15 23 42/.04), 0 1px 3px 0 rgb(15 23 42/.06); }
.shadow-raised { box-shadow: 0 4px 12px -2px rgb(15 23 42/.10); }
.bg-indigo-50\/70 { background-color: rgb(238 242 255 / .7); }

/* =====================================================================
   ۳) واژه‌نامه حقوقی شناور (ردیف ۲۵)
   ---------------------------------------------------------------------
   دو چیز: دکمه و پنل شناور که glossary.js می‌سازد، و واژه‌ی درون‌متنی
   که کامپوننت Components/Shared/Term.razor رندر می‌کند.
   استایل اینجاست (نه در tailwind) چون هیچ‌کدام از این کلاس‌ها ابزارِ
   تیلویند نیستند و به build آن وابسته نمی‌مانند.
   ===================================================================== */
.pas-gl-launcher {
    position: fixed; inset-inline-start: 1rem; bottom: 1rem; z-index: var(--z-chat);
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .55rem .9rem; border-radius: 9999px;
    background: #fff; color: #3730a3; font-weight: 700; font-size: .8125rem;
    border: 1px solid #c7d2fe; box-shadow: 0 4px 12px -2px rgb(15 23 42 / .12);
    cursor: pointer; transition: background .15s, border-color .15s;
}
.pas-gl-launcher:hover, .pas-gl-launcher.is-open { background: #eef2ff; border-color: #818cf8; }
.pas-gl-launcher:focus-visible { outline: 3px solid #4f46e5; outline-offset: 2px; }
@media (max-width: 640px) { .pas-gl-launcher-text { display: none; } }

.pas-gl-panel {
    position: fixed; inset-inline-start: 1rem; bottom: 4.25rem; z-index: var(--z-chat);
    width: min(24rem, calc(100vw - 2rem)); max-height: min(28rem, 70vh);
    display: flex; flex-direction: column; overflow: hidden;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 1rem;
    box-shadow: 0 20px 40px -12px rgb(15 23 42 / .28); direction: rtl;
}
.pas-gl-panel[hidden] { display: none; }
.pas-gl-head { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1rem; border-bottom: 1px solid #f1f5f9; }
.pas-gl-title { font-weight: 800; font-size: .9375rem; color: #1e293b; }
.pas-gl-title i { color: #4f46e5; margin-inline-end: .35rem; }
.pas-gl-close { width: 2rem; height: 2rem; border-radius: .5rem; color: #94a3b8; background: transparent; border: 0; cursor: pointer; }
.pas-gl-close:hover { background: #f1f5f9; color: #475569; }
.pas-gl-search { padding: .75rem 1rem .25rem; }
.pas-gl-search input {
    width: 100%; padding: .5rem .75rem; font-size: .8125rem;
    border: 1px solid #e2e8f0; border-radius: .5rem; background: #f8fafc;
}
.pas-gl-search input:focus { outline: none; border-color: #818cf8; background: #fff; }
.pas-gl-count { padding: .35rem 1rem 0; margin: 0; font-size: .6875rem; color: #94a3b8; }
.pas-gl-list { padding: .5rem 1rem 1rem; overflow-y: auto; }
.pas-gl-group { margin: .85rem 0 .4rem; font-size: .6875rem; font-weight: 800; color: #6366f1; }
.pas-gl-list dl { margin: 0; }
.pas-gl-item { padding: .55rem 0; border-bottom: 1px dashed #f1f5f9; }
.pas-gl-item dt { font-weight: 700; font-size: .8125rem; color: #1e293b; display: flex; align-items: center; gap: .4rem; }
.pas-gl-item dd { margin: .25rem 0 0; font-size: .78125rem; color: #64748b; line-height: 1.85; }
.pas-gl-badge { font-size: .625rem; font-weight: 700; color: #047857; background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 9999px; padding: 0 .4rem; }
.pas-gl-empty { font-size: .78125rem; color: #64748b; line-height: 1.9; padding: 1rem 0; }
.pas-gl-foot { margin: 0; padding: .6rem 1rem; font-size: .6875rem; color: #94a3b8; border-top: 1px solid #f1f5f9; background: #f8fafc; }

/* ---------- واژه درون‌متنی (Term.razor) ---------- */
.pas-term-wrap { position: relative; display: inline-block; }
.pas-term {
    background: transparent; border: 0; padding: 0; font: inherit; color: inherit;
    cursor: help; border-bottom: 1px dotted #6366f1; text-decoration: none;
}
.pas-term:hover { color: #4338ca; border-bottom-style: solid; }
.pas-term:focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; border-radius: .125rem; }
.pas-term-tip {
    position: absolute; z-index: var(--z-sticky); inset-inline-start: 0; top: calc(100% + .35rem);
    width: min(18rem, 78vw); display: block; padding: .7rem .85rem;
    background: #1e293b; color: #f8fafc; border-radius: .625rem;
    font-size: .78125rem; line-height: 1.85; font-weight: 400;
    box-shadow: 0 12px 28px -8px rgb(15 23 42 / .45); text-align: start;
}
.pas-term-tip-word { display: block; font-weight: 800; color: #c7d2fe; margin-bottom: .2rem; }
.pas-term-tip-text { display: block; }
.pas-term-tip-close {
    position: absolute; inset-inline-end: .35rem; top: .3rem;
    width: 1.5rem; height: 1.5rem; border: 0; border-radius: .375rem;
    background: transparent; color: #94a3b8; cursor: pointer; font-size: .6875rem;
}
.pas-term-tip-close:hover { background: rgb(255 255 255 / .12); color: #fff; }


/* =====================================================================
   چرخنده نظرات موکلین (صفحه اصلی)
   ---------------------------------------------------------------------
   یک نظر در هر لحظه، در یک خط. جابه‌جایی با daoviRotator در site.js.
   اگر جاوااسکریپت اجرا نشود، قاعده‌ی اول کار می‌کند و همان نظر نخست
   دیده می‌شود — بخش هیچ‌وقت خالی نمی‌ماند.
   ===================================================================== */
.daovi-quote-track { position: relative; }
.daovi-quotes .daovi-quote { display: none; }
.daovi-quotes .daovi-quote:first-child { display: block; }

.daovi-quotes.is-js .daovi-quote { display: none; }
.daovi-quotes.is-js .daovi-quote.is-active {
    display: block;
    animation: daovi-quote-in .42s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes daovi-quote-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

.daovi-quote-nav {
    display: flex; align-items: center; justify-content: center;
    gap: 14px; margin-top: 22px;
}

.daovi-quote-arrow {
    width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid #e2e8f0; background: #fff; color: #64748b;
    display: grid; place-items: center; cursor: pointer;
    font-size: 12px; transition: border-color .18s ease, color .18s ease;
}
.daovi-quote-arrow:hover { border-color: #93b4ff; color: #2e6bff; }

.daovi-quote-dots { display: inline-flex; align-items: center; gap: 7px; }

.daovi-dot {
    width: 9px; height: 9px; padding: 0; border: 0; border-radius: 99px;
    background: #cbd5e1; cursor: pointer;
    transition: width .22s ease, background .22s ease;
}
.daovi-dot.is-active { width: 26px; background: #2e6bff; }

@media (prefers-reduced-motion: reduce) {
    .daovi-quotes.is-js .daovi-quote.is-active { animation: none; }
    .daovi-quote-arrow, .daovi-dot { transition: none; }
}

/* =====================================================================
   لایه‌بندی (z-index) — باگ «دکمهٔ تهیه پیش‌نویس روی فهرست پرونده»
   ---------------------------------------------------------------------
   در صفحهٔ «قالب اسناد» فهرست بازشدهٔ انتخابگر پرونده زیر دکمهٔ سبز
   «تهیه پیش‌نویس» می‌رفت و متن دکمه روی ردیف اول پرونده دیده می‌شد.
   علتش استایل نبود، خروجی build بود: خود Razor کلاس z-40 را داشت ولی در
   wwwroot/tailwind.css فقط z-10 و z-50 ساخته شده بود، یعنی z-40 هیچ
   اثری نداشت و فهرست بدون لایه می‌ماند.

   پس هم کلاس‌های جاافتادهٔ z-* تعریف می‌شوند، هم انتخابگرها یک کلاس
   اختصاصی می‌گیرند تا حتی اگر tailwind دوباره build شد، فهرست همیشه
   بالای دکمه‌ها و با پس‌زمینهٔ مات بماند.
   ===================================================================== */
.z-0 { z-index: 0; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }

/* پوشش انتخابگرها (پرونده و کاربر): همیشه بالای دکمه‌های پایین فرم */
.dv-picker { position: relative; z-index: var(--z-drawer); }

.dv-picker-menu {
    position: absolute;
    z-index: var(--z-drawer);
    background-color: #fff;      /* مات: هیچ دکمه‌ای از زیرش دیده نشود */
    inset-inline: 0;
}

/* =====================================================================
   ۱۴) کلاس‌های جاافتاده‌ی چیدمان و ریسپانسیو — دسته‌ی «نمای دسکتاپ»
   ---------------------------------------------------------------------
   ریشه‌ی باگ «ناوبار همیشه حالت موبایل است»:
   SiteNavbar برای سوئیچ دسکتاپ/موبایل از xl:flex و xl:hidden استفاده
   می‌کند، ولی این دو کلاس در wwwroot/tailwind.css ساخته‌شده وجود ندارند
   (اسم‌شان از داخل C# می‌آید — DesktopCls/MobileCls — و آخرین build هم
   پیش از آن تغییر گرفته شده). نتیجه: منوی افقی «hidden» می‌ماند و ابزار
   موبایل (همبرگری، زنگ، راهنما) در هر عرضی دیده می‌شود؛ یعنی همان
   چیزی که در اسکرین‌شات دسکتاپ دیده شد.

   بقیه‌ی کلاس‌های این بخش هم به همین دلیل جاافتاده بودند (بعد از آخرین
   npm run tw:build نوشته شده‌اند). تعریف‌ها عیناً همان خروجی Tailwind
   است، پس اگر بعداً build اجرا شود تضادی پیش نمی‌آید.
   نقاط شکست: sm=640 md=768 lg=1024 xl=1280
   ===================================================================== */

/* ---------- نمایش و تراز ---------- */
.inline-grid { display: inline-grid; }
.items-stretch { align-items: stretch; }
.justify-start { justify-content: flex-start; }
.whitespace-normal { white-space: normal; }

/* ---------- عرض و ارتفاع ---------- */
.w-1\/3 { width: 33.333333%; }
.w-1\/4 { width: 25%; }
.w-5\/6 { width: 83.333333%; }
.w-32 { width: 8rem; }
.h-3\.5 { height: 0.875rem; }
.h-40 { height: 10rem; }
.h-48 { height: 12rem; }
.h-max { height: -moz-max-content; height: max-content; }
.max-h-56 { max-height: 14rem; }
.max-w-xs { max-width: 20rem; }

/* هدف لمس ۴۴px — پرکاربردترین کلاس جاافتاده (بیش از ۱۰۰ بار) */
.min-h-\[44px\] { min-height: 44px; }
.min-w-\[44px\] { min-width: 44px; }
.min-h-\[60vh\] { min-height: 60vh; }
.max-h-\[85vh\] { max-height: 85vh; }
.min-w-\[220px\] { min-width: 220px; }
.min-w-\[620px\] { min-width: 620px; }
.min-w-\[680px\] { min-width: 680px; }
.max-w-\[260px\] { max-width: 260px; }
.max-w-\[320px\] { max-width: 320px; }

/* ---------- فاصله ---------- */
.p-2\.5 { padding: 0.625rem; }
.px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
.mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; }
.gap-x-2 { -moz-column-gap: 0.5rem; column-gap: 0.5rem; }
.gap-y-3 { row-gap: 0.75rem; }

.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}

/* ---------- شبکه ---------- */
.col-span-2 { grid-column: span 2 / span 2; }

/* ---------- ۶۴۰px و بالاتر ---------- */
@media (min-width: 640px) {
    .sm\:inline-block { display: inline-block; }
    .sm\:items-center { align-items: center; }
    .sm\:items-start { align-items: flex-start; }
    .sm\:items-end { align-items: flex-end; }
    .sm\:justify-between { justify-content: space-between; }
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sm\:col-span-2 { grid-column: span 2 / span 2; }
    .sm\:p-5 { padding: 1.25rem; }
    .sm\:p-6 { padding: 1.5rem; }
}

/* ---------- ۷۶۸px و بالاتر ---------- */
@media (min-width: 768px) {
    .md\:col-span-1 { grid-column: span 1 / span 1; }
    .md\:p-5 { padding: 1.25rem; }
    .md\:p-7 { padding: 1.75rem; }
    .md\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
}

/* ---------- ۱۰۲۴px و بالاتر ---------- */
@media (min-width: 1024px) {
    .lg\:flex-col { flex-direction: column; }
    .lg\:order-1 { order: 1; }
    .lg\:order-2 { order: 2; }
}

/* ---------- ۱۲۸۰px و بالاتر: سوئیچ اصلی ناوبار ---------- */
@media (min-width: 1280px) {
    .xl\:flex { display: flex; }
    .xl\:hidden { display: none; }
    .xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =====================================================================
   نارنجی پنل «درخواست اصلاح وکالت‌نامه / قرارداد حق‌الوکاله»
   ---------------------------------------------------------------------
   باگ: دکمه «ارسال درخواست اصلاح به وکیل» دیده نمی‌شد.
   علت: کلاس bg-orange-600 و hover:bg-orange-700 در tailwind.css ساخته‌شده
   وجود ندارد (این خروجی پیش‌تر build شده و orange در safelist نبود). پس
   دکمه پس‌زمینه نمی‌گرفت و متن سفیدش روی زمینه‌ی روشن پنل ناپدید می‌شد —
   همان باگ «متن سفید روی گرادیان ساخته‌نشده» بالای این فایل.
   مقادیر دقیقاً برابر پالت رسمی Tailwind است، پس build بعدی چیزی را
   خراب نمی‌کند. (orange به safelist در tailwind.config.js هم اضافه شد.)
   ===================================================================== */
.bg-orange-600 { --tw-bg-opacity: 1; background-color: rgb(234 88 12 / var(--tw-bg-opacity)); }
.hover\:bg-orange-700:hover { --tw-bg-opacity: 1; background-color: rgb(194 65 12 / var(--tw-bg-opacity)); }
.border-orange-300 { --tw-border-opacity: 1; border-color: rgb(253 186 116 / var(--tw-border-opacity)); }
.border-orange-400 { --tw-border-opacity: 1; border-color: rgb(251 146 60 / var(--tw-border-opacity)); }
.text-orange-900 { --tw-text-opacity: 1; color: rgb(124 45 18 / var(--tw-text-opacity)); }
.accent-orange-600 { accent-color: #ea580c; }