@font-face {
    font-family: 'Vazir-FD';
    src: url('/fonts/Vazir-FD.woff2') format('woff2'), url('/fonts/Vazir-FD.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --rz-text-font-family: 'Vazir-FD', Tahoma, sans-serif;
    --rz-success-dark: #1b5e20;
    --color-profile: #2196f3;
    --color-roles: #4caf50;
    --color-users: #ff9800;
    --color-logout: #f44336;
    --transition-easing: cubic-bezier(0.16, 1, 0.3, 1);
    --transition-duration: 0.25s;
}

html, body {
    font-family: var(--rz-text-font-family);
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    direction: rtl;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent !important;
    /* ✅ بهبود ۲: رندرینگ بهتر فونت با smoothing
       antialiased در Vazir-FD نتیجه‌ی بهتری می‌دهد (مخصوصاً روی macOS/iOS) */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* ✅ بهبود ۳: جلوگیری از اسکیل شدن خودکار متن در iOS landscape */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ✅ بهبود ۴: scroll-behavior باید فقط زمانی smooth باشد که کاربر motion را می‌خواهد.
   روی صفحه‌های طولانی، smooth scroll همیشه می‌تواند باعث jank شود. */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* ✅ بهبود ۵: جلوگیری از overscroll bounce (chain scrolling به parent)
   روی موبایل باعث UX بهتر و جلوگیری از scroll ناخواسته به Radzen dialogs می‌شود */
body {
    overscroll-behavior-y: none;
}

.dashboard-layout-wrapper {
    animation: dashboard-fade-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes dashboard-fade-in {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ✅ بهبود ۶: احترام به prefers-reduced-motion
   کاربرانی که motion را در OS غیرفعال کرده‌اند، نباید انیمیشن ببینند.
   این هم accessibility است و هم جلوگیری از رندر اضافی روی دستگاه‌های ضعیف. */
@media (prefers-reduced-motion: reduce) {
    .dashboard-layout-wrapper {
        animation: none;
    }

    .layout-ready {
        transition: none;
    }

    .header-icon-btn {
        transition: none;
    }

    html {
        scroll-behavior: auto;
    }
}

.layout-loading {
    opacity: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

.layout-ready {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.3s var(--transition-easing);
    overflow: auto !important;
    position: relative !important;
    z-index: auto;
}

/* ✅ بهبود ۷: الگوی مدرن focus-visible به جای outline: none خالص
   - mouse click: outline حذف می‌شود (همان رفتار قبلی)
   - keyboard tab: outline نمایش داده می‌شود (accessibility حفظ می‌شود)
   این هم accessibility 10/10 می‌دهد و هم ظاهر تمیز نگه می‌دارد */
.rz-navigation-item, .rz-button, .header-icon-btn, .rz-menu-item, [role="button"] {
    user-select: none !important;
    -webkit-user-select: none !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    outline: none;
}

    .rz-navigation-item:focus-visible,
    .rz-button:focus-visible,
    .header-icon-btn:focus-visible,
    .rz-menu-item:focus-visible,
    [role="button"]:focus-visible {
        outline: 2px solid var(--rz-primary);
        outline-offset: 2px;
        border-radius: 4px;
    }

.header-icon-btn {
    background-color: rgba(33, 150, 243, 0.1) !important;
    /* ✅ بهبود ۸: حذف box-shadow از transition
       هیچ rule ای box-shadow را تغییر نمی‌دهد، پس transition آن فقط باعث
       عملکرد مضاعف در compositor می‌شد.
       فقط 2 property واقعاً متغیر: background-color و transform */
    transition: background-color var(--transition-duration) var(--transition-easing), transform var(--transition-duration) var(--transition-easing);
}

    .header-icon-btn:hover {
        background-color: rgba(33, 150, 243, 0.18) !important;
        transform: translateY(-1px);
    }

    .header-icon-btn:active {
        transform: translateY(0);
    }

    .header-icon-btn i {
        color: var(--rz-primary) !important;
    }

.rz-navigation-menu [href="profile"] .rz-navigation-item-icon {
    color: var(--color-profile) !important;
}

.rz-navigation-menu [href="application-roles"] .rz-navigation-item-icon {
    color: var(--color-roles) !important;
}

.rz-navigation-menu [href="application-users"] .rz-navigation-item-icon {
    color: var(--color-users) !important;
}

.logout-menu-item .rz-navigation-item-icon {
    color: var(--color-logout) !important;
}

.styled-container {
    display: block;
    width: 100%;
    box-sizing: border-box;
    max-width: var(--container-max-width, 100%);
    padding: var(--container-padding, 0.5rem);
    margin: 0;
    background-color: transparent !important;
    contain: layout paint;
}

    .styled-container.centered {
        margin-left: auto;
        margin-right: auto;
    }

    .styled-container > * {
        max-width: 100%;
        overflow-wrap: break-word;
    }