/* ════════════════════════════════════════════════════════════════════════════
   crm-motion.css — لایهٔ حرکت، پالایش بصری و گالری تم
   ────────────────────────────────────────────────────────────────────────────
   هدف: یکدست‌سازی حرکت و میکروتعامل‌ها روی همان توکن‌های رنگی موجود
   (۱۴ تم با ۴۹ توکن در site.css). این فایل هیچ توکن رنگی جدیدی تعریف نمی‌کند
   و هیچ رنگ ثابتی که با تم‌ها ناسازگار باشد اضافه نمی‌کند — همه از توکن‌های تم
   تغذیه می‌شوند تا در هر ۱۴ تم درست دیده شود.

   قواعد این فایل:
   · فقط افزودنی است؛ هیچ قاعدهٔ موجود site.css را حذف یا بازتعریف نمی‌کند.
   · هیچ @import و هیچ URL ریموت ندارد (الزام محیط بدون CDN).
   · همهٔ حرکت‌ها داخل prefers-reduced-motion محترم‌اند و در حالت reduce خاموش می‌شوند.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── ۱) توکن‌های حرکت ─────────────────────────────────────────────────────────
   یک مقیاس واحد برای همهٔ انیمیشن‌ها. قبلاً ۱۵۷ گذار پراکنده با اعداد جادویی
   (٫12s، ٫18s، ٫28s …) وجود داشت؛ از این پس مقدار جدید از همین مقیاس می‌آید. */
:root {
    --dur-instant: 90ms;
    --dur-fast: 160ms;
    --dur-base: 240ms;
    --dur-slow: 360ms;
    --dur-slower: 520ms;

    --ease-std: cubic-bezier(.2, .7, .3, 1);
    --ease-emphasis: cubic-bezier(.16, 1, .3, 1);
    --ease-exit: cubic-bezier(.4, 0, 1, 1);

    /* گام ورود پلکانی کارت‌ها؛ با nth-child اعمال می‌شود تا نیازی به JS نباشد. */
    --stagger-step: 45ms;
    --lift: -2px;
    --lift-strong: -4px;
}

/* ── ۲) ورود سکشن فعال ────────────────────────────────────────────────────────
   هر مسیر یک سکشن مستقل است؛ ورود نرم باعث می‌شود تغییر صفحه «پرش» نداشته باشد. */
@keyframes crm-enter-rise {
    from {
        opacity: 0;
        transform: translate3d(0, 10px, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes crm-enter-fade {
    from { opacity: 0; }

    to { opacity: 1; }
}

@keyframes crm-shimmer {
    from { background-position: 200% 0; }

    to { background-position: -200% 0; }
}

@keyframes crm-accent-grow {
    from { transform: scaleX(0); }

    to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: no-preference) {
    /* سکشن فعال هنگام نمایش، یکبار و کوتاه وارد می‌شود. */
    .view-section.is-visible {
        animation: crm-enter-rise var(--dur-slow) var(--ease-emphasis) both;
    }

    /* کارت‌های آماری و ردیف‌های جدول به‌صورت پلکانی وارد می‌شوند.
       فقط ۸ عنصر اول انیمیشن می‌گیرند تا جدول‌های بزرگ کند نشوند. */
    .finance-kpi-grid > *,
    .kpi-grid > *,
    .stat-grid > *,
    .dashboard-grid > * {
        animation: crm-enter-rise var(--dur-slow) var(--ease-emphasis) both;
    }

        .finance-kpi-grid > *:nth-child(1), .kpi-grid > *:nth-child(1), .stat-grid > *:nth-child(1), .dashboard-grid > *:nth-child(1) { animation-delay: calc(var(--stagger-step) * 1); }

        .finance-kpi-grid > *:nth-child(2), .kpi-grid > *:nth-child(2), .stat-grid > *:nth-child(2), .dashboard-grid > *:nth-child(2) { animation-delay: calc(var(--stagger-step) * 2); }

        .finance-kpi-grid > *:nth-child(3), .kpi-grid > *:nth-child(3), .stat-grid > *:nth-child(3), .dashboard-grid > *:nth-child(3) { animation-delay: calc(var(--stagger-step) * 3); }

        .finance-kpi-grid > *:nth-child(4), .kpi-grid > *:nth-child(4), .stat-grid > *:nth-child(4), .dashboard-grid > *:nth-child(4) { animation-delay: calc(var(--stagger-step) * 4); }

        .finance-kpi-grid > *:nth-child(5), .kpi-grid > *:nth-child(5), .stat-grid > *:nth-child(5), .dashboard-grid > *:nth-child(5) { animation-delay: calc(var(--stagger-step) * 5); }

        .finance-kpi-grid > *:nth-child(6), .kpi-grid > *:nth-child(6), .stat-grid > *:nth-child(6), .dashboard-grid > *:nth-child(6) { animation-delay: calc(var(--stagger-step) * 6); }
}

/* ── ۳) میکروتعامل‌ها ─────────────────────────────────────────────────────────
   دکمه‌ها و کارت‌های تعاملی فقط وقتی «قابل کلیک» هستند بازخورد حرکتی می‌دهند. */
.button,
.btn,
.theme-option,
.grid-view-button {
    transition: transform var(--dur-fast) var(--ease-std), box-shadow var(--dur-fast) var(--ease-std), background-color var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .button:hover:not(:disabled),
    .btn:hover:not(:disabled) {
        transform: translateY(var(--lift));
        box-shadow: var(--shadow-md, 0 4px 14px rgba(0, 0, 0, .08));
    }

    /* کارت‌های غیرمودال (پنل‌های یکپارچه) با هاور کمی بلند می‌شوند.
       پنل‌های داخل مودال عمداً از این قاعده مستثنا هستند تا فوکوس جابه‌جا نشود. */
    .finance-kpi:hover,
    .card:hover,
    .kpi-card:hover {
        transform: translateY(var(--lift-strong));
        box-shadow: var(--shadow-lg, 0 14px 34px rgba(0, 0, 0, .12));
    }
}

/* بازخورد فشردن — روی همهٔ دستگاه‌ها (حتی بدون هاور) */
.button:active:not(:disabled),
.btn:active:not(:disabled),
.theme-option:active {
    transform: translateY(0) scale(.985);
    transition-duration: var(--dur-instant);
}

/* ── ۴) فوکوس یکدست ──────────────────────────────────────────────────────────
   از توکن --focus-ring خود تم استفاده می‌شود تا در همهٔ ۱۴ تم درست دیده شود
   (اصل دسترس‌پذیری: فوکوس باید در هر تم قابل تشخیص باشد). */
.button:focus-visible,
.btn:focus-visible,
.theme-option:focus-visible,
.icon-button:focus-visible,
.grid-view-button:focus-visible,
.filter-button:focus-visible,
.table-sort-button:focus-visible,
a:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring, 0 0 0 3px rgba(11, 74, 151, .3));
    border-radius: 10px;
}

/* ── ۵) هاور ردیف جدول ────────────────────────────────────────────────────────
   خوانایی جدول‌های بزرگ را بالا می‌برد (ردیابی سطر در عرض زیاد). */
@media (hover: hover) {
    .crm-table tbody tr {
        transition: background-color var(--dur-fast) var(--ease-std);
    }

        .crm-table tbody tr:hover {
            background: var(--surface-soft, rgba(0, 0, 0, .02));
        }
}

/* ── ۶) Skeleton / حالت بارگذاری ─────────────────────────────────────────────
   به‌جای «پرش» محتوا، اسکلت نرم نمایش داده می‌شود. کلاس عمومی است تا مودال‌ها و
   پنل‌ها بتوانند از آن استفاده کنند. */
.crm-skeleton,
[data-crm-skeleton] {
    border-radius: 10px;
    background-image: linear-gradient(90deg, var(--surface-muted, rgba(0, 0, 0, .05)) 25%, var(--surface-soft, rgba(0, 0, 0, .02)) 37%, var(--surface-muted, rgba(0, 0, 0, .05)) 63%);
    background-size: 200% 100%;
    color: transparent;
    user-select: none;
}

@media (prefers-reduced-motion: no-preference) {
    .crm-skeleton,
    [data-crm-skeleton] {
        animation: crm-shimmer 1.6s linear infinite;
    }
}

/* ── ۷) گالری تم ──────────────────────────────────────────────────────────────
   ۱۴ تم در یک ردیف تخت، برای مقایسه و انتخاب کافی نبود. اکنون شبکهٔ واکنش‌گرا با
   پیش‌نمای بزرگ‌تر و حالت انتخاب مشخص. ساختار Markup دست‌نخورده می‌ماند. */
.theme-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 12px;
}

.theme-option {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--line, rgba(0, 0, 0, .1));
    border-radius: 14px;
    background: var(--surface, transparent);
    cursor: pointer;
    text-align: start;
}

    .theme-option .theme-preview {
        display: block;
        width: 100%;
        height: 54px;
        border-radius: 10px;
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
    }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .theme-option:hover {
        transform: translateY(var(--lift-strong));
        border-color: var(--primary, currentColor);
        box-shadow: var(--shadow-md, 0 4px 14px rgba(0, 0, 0, .08));
    }
}

/* تم انتخاب‌شده: حلقهٔ برند + تیک گوشه — بدون اتکا به رنگ تنها (دسترس‌پذیری). */
.theme-option[aria-pressed="true"] {
    border-color: var(--primary, currentColor);
    box-shadow: var(--focus-ring, 0 0 0 3px rgba(0, 0, 0, .12));
}

    .theme-option[aria-pressed="true"]::after {
        content: "✓";
        position: absolute;
        inset-block-start: 6px;
        inset-inline-end: 6px;
        display: grid;
        place-items: center;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--primary, #0b4a97);
        color: var(--primary-contrast, #fff);
        font-size: 11px;
        font-weight: 800;
    }

.theme-option {
    position: relative;
}

.theme-option-name {
    font-size: 13px;
}

.theme-option-desc {
    font-size: 11px;
    color: var(--muted, currentColor);
    line-height: 1.7;
}

/* ── ۸) گذار نرم هنگام تعویض تم ───────────────────────────────────────────────
   فقط روی عناصر ساختاری اعمال می‌شود (نه * با !important) تا هزینهٔ رندر نگیرد
   و اگر کلاس هرگز برداشته نشد، صفحه کند نشود. */
body.theme-switching,
body.theme-switching .panel,
body.theme-switching .crm-table,
body.theme-switching .sidebar,
body.theme-switching .button,
body.theme-switching input,
body.theme-switching select,
body.theme-switching textarea {
    transition: background-color var(--dur-base) var(--ease-std), color var(--dur-base) var(--ease-std), border-color var(--dur-base) var(--ease-std);
}

/* ── ۹) نوار پیمایش هم‌خوان با تم ─────────────────────────────────────────────
   در تم‌های تیره، نوار پیش‌فرض روشن مرورگر زننده بود. */
* {
    scrollbar-color: var(--line-strong, rgba(0, 0, 0, .25)) transparent;
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: content-box;
    background-color: var(--line-strong, rgba(0, 0, 0, .25));
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: var(--muted, rgba(0, 0, 0, .4));
    }

/* ── ۱۰) حالت reduce — خاموش‌سازی کامل حرکت ──────────────────────────────────
   کاربرانی که حرکت نمی‌خواهند، هیچ انیمیشنی نمی‌بینند؛ اما فوکوس و خوانایی باقی
   می‌ماند (حذف نمی‌شوند). */
@media (prefers-reduced-motion: reduce) {
    .view-section.is-visible,
    .finance-kpi-grid > *,
    .kpi-grid > *,
    .stat-grid > *,
    .dashboard-grid > *,
    .crm-skeleton,
    [data-crm-skeleton] {
        animation: none !important;
    }

    .button:hover:not(:disabled),
    .btn:hover:not(:disabled),
    .theme-option:hover,
    .finance-kpi:hover,
    .card:hover,
    .kpi-card:hover,
    .button:active:not(:disabled),
    .btn:active:not(:disabled),
    .theme-option:active {
        transform: none !important;
    }

    * {
        scroll-behavior: auto !important;
    }
}

/* ── ۱۱) ارجاع‌ناپذیری چاپ ────────────────────────────────────────────────────
   در خروجی چاپ/PDF، حلقه‌های تعاملی و سایه‌ها نباید چاپ شوند. */
@media print {
    .theme-option[aria-pressed="true"]::after {
        display: none;
    }

    .button,
    .btn,
    .theme-option {
        box-shadow: none !important;
        transform: none !important;
    }
}

/* ── ۱۲) انتخابگرهای تم صفحات ورود/پورتال ────────────────────────────────────
   این دو صفحه از دکمه‌های `[data-theme-choice]` استفاده می‌کنند (نه `.theme-option`).
   برای یکدستی تجربه، همان میکروتعامل و حلقهٔ انتخاب آن‌ها را هم می‌گیرد. */
[data-theme-choice] {
    transition: transform var(--dur-fast) var(--ease-std), box-shadow var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std);
}

    [data-theme-choice]:focus-visible {
        outline: none;
        box-shadow: var(--focus-ring, 0 0 0 3px rgba(11, 74, 151, .3));
    }

    [data-theme-choice][aria-pressed="true"] {
        box-shadow: var(--focus-ring, 0 0 0 3px rgba(0, 0, 0, .14));
    }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    [data-theme-choice]:hover {
        transform: translateY(var(--lift-strong));
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-theme-choice]:hover {
        transform: none !important;
    }
}

/* ── ۱۳) بازخورد بینایی اعتبارسنجی ───────────────────────────────────────────
   مکمل لایهٔ پیام فارسی (crm-validation-fa.js): وقتی کاربر فیلدی را نامعتبر
   رها کند، حاشیه و حلقهٔ danger از توکن خود تم اعمال می‌شود. متن پیام از حباب
   بومی می‌آید، پس بازخورد «فقط رنگ» نیست (دسترس‌پذیری).
   :user-invalid تنها پس از تعامل کاربر فعال می‌شود، پس فرم‌های دست‌نخورده
   قرمز نمی‌شوند. */
input:user-invalid,
select:user-invalid,
textarea:user-invalid {
    border-color: var(--danger, #b01230);
}

    input:user-invalid:focus-visible,
    select:user-invalid:focus-visible,
    textarea:user-invalid:focus-visible {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger, #b01230) 24%, transparent);
    }

/* پشتیبان برای مرورگرهای بدون :user-invalid — فقط وقتی خودِ برنامه کلاس را بگذارد. */
.is-invalid {
    border-color: var(--danger, #b01230);
}