/* 
 * فایل کلاس‌های سودمند تم
 * این فایل شامل کلاس‌های CSS مفید بر اساس متغیرهای تم MudBlazor است
 * با استفاده از این کلاس‌ها، نیاز به تعریف استایل‌های درون‌خطی (inline style) کاهش می‌یابد
 */

/* ================= رنگ‌های متن (Text Colors) ================= */
/* کلاس‌های رنگ متن بر اساس رنگ‌های تم */
.text-primary { color: var(--mud-palette-primary) !important; }
.text-secondary { color: var(--mud-palette-secondary) !important; }
.text-tertiary { color: var(--mud-palette-tertiary) !important; }
.text-info { color: var(--mud-palette-info) !important; }
.text-success { color: var(--mud-palette-success) !important; }
.text-warning { color: var(--mud-palette-warning) !important; }
.text-error { color: var(--mud-palette-error) !important; }
.text-dark { color: var(--mud-palette-dark) !important; }

/* رنگ‌های متن متضاد (Contrast) - مناسب برای استفاده روی پس‌زمینه‌های رنگی */
.text-primary-contrast { color: var(--mud-palette-primary-contrast-text) !important; }
.text-secondary-contrast { color: var(--mud-palette-secondary-contrast-text) !important; }
.text-tertiary-contrast { color: var(--mud-palette-tertiary-contrast-text) !important; }
.text-info-contrast { color: var(--mud-palette-info-contrast-text) !important; }
.text-success-contrast { color: var(--mud-palette-success-contrast-text) !important; }
.text-warning-contrast { color: var(--mud-palette-warning-contrast-text) !important; }
.text-error-contrast { color: var(--mud-palette-error-contrast-text) !important; }
.text-dark-contrast { color: var(--mud-palette-dark-contrast-text) !important; }

/* رنگ‌های متن تیره‌تر و روشن‌تر */
.text-primary-darken { color: var(--mud-palette-primary-darken) !important; }
.text-primary-lighten { color: var(--mud-palette-primary-lighten) !important; }
.text-secondary-darken { color: var(--mud-palette-secondary-darken) !important; }
.text-secondary-lighten { color: var(--mud-palette-secondary-lighten) !important; }

/* ================= رنگ‌های پس‌زمینه (Background Colors) ================= */
/* کلاس‌های رنگ پس‌زمینه بر اساس رنگ‌های تم */
.bg-primary { background-color: var(--mud-palette-primary) !important; }
.bg-secondary { background-color: var(--mud-palette-secondary) !important; }
.bg-tertiary { background-color: var(--mud-palette-tertiary) !important; }
.bg-info { background-color: var(--mud-palette-info) !important; }
.bg-success { background-color: var(--mud-palette-success) !important; }
.bg-warning { background-color: var(--mud-palette-warning) !important; }
.bg-error { background-color: var(--mud-palette-error) !important; }
.bg-dark { background-color: var(--mud-palette-dark) !important; }
.bg-surface { background-color: var(--mud-palette-surface) !important; }
.bg-background { background-color: var(--mud-palette-background) !important; }
.bg-background-gray { background-color: var(--mud-palette-background-gray) !important; }

/* رنگ‌های پس‌زمینه تیره‌تر و روشن‌تر */
.bg-primary-darken { background-color: var(--mud-palette-primary-darken) !important; }
.bg-primary-lighten { background-color: var(--mud-palette-primary-lighten) !important; }
.bg-secondary-darken { background-color: var(--mud-palette-secondary-darken) !important; }
.bg-secondary-lighten { background-color: var(--mud-palette-secondary-lighten) !important; }

/* ================= آیکون‌ها (Icons) ================= */
/* کلاس‌های رنگ برای آیکون‌ها */
.icon-primary-contrast { color: var(--mud-palette-primary-contrast-text) !important; }
.icon-secondary-contrast { color: var(--mud-palette-secondary-contrast-text) !important; }
.icon-tertiary-contrast { color: var(--mud-palette-tertiary-contrast-text) !important; }
.icon-info-contrast { color: var(--mud-palette-info-contrast-text) !important; }
.icon-success-contrast { color: var(--mud-palette-success-contrast-text) !important; }
.icon-warning-contrast { color: var(--mud-palette-warning-contrast-text) !important; }
.icon-error-contrast { color: var(--mud-palette-error-contrast-text) !important; }
.icon-dark-contrast { color: var(--mud-palette-dark-contrast-text) !important; }

/* ================= کادرها (Borders) ================= */
/* کلاس‌های رنگ حاشیه بر اساس رنگ‌های تم */
.border-primary { border-color: var(--mud-palette-primary) !important; }
.border-secondary { border-color: var(--mud-palette-secondary) !important; }
.border-tertiary { border-color: var(--mud-palette-tertiary) !important; }
.border-info { border-color: var(--mud-palette-info) !important; }
.border-success { border-color: var(--mud-palette-success) !important; }
.border-warning { border-color: var(--mud-palette-warning) !important; }
.border-error { border-color: var(--mud-palette-error) !important; }
.border-dark { border-color: var(--mud-palette-dark) !important; }

/* ================= پالت‌های رنگی جدید ================= */

/* پالت قهوه‌ای/طلایی */
.bg-brown-1 { background-color: #855C19 !important; }
.bg-brown-2 { background-color: #C58826 !important; }
.bg-brown-3 { background-color: #FDBA4D !important; }
.bg-brown-4 { background-color: #FED28B !important; }
.bg-brown-5 { background-color: #FFE9C7 !important; }
.bg-brown-6 { background-color: #FFF3E0 !important; }
.bg-brown-7 { background-color: #FFF9F0 !important; }

.text-brown-1 { color: #855C19 !important; }
.text-brown-2 { color: #C58826 !important; }
.text-brown-3 { color: #FDBA4D !important; }
.text-brown-4 { color: #FED28B !important; }
.text-brown-5 { color: #FFE9C7 !important; }
.text-brown-6 { color: #FFF3E0 !important; }
.text-brown-7 { color: #FFF9F0 !important; }

/* پالت آبی */
.bg-blue-1 { background-color: #0255B1 !important; }
.bg-blue-2 { background-color: #0372ED !important; }
.bg-blue-3 { background-color: #4DA1FD !important; }
.bg-blue-4 { background-color: #95C7FE !important; }
.bg-blue-5 { background-color: #C3DFFE !important; }
.bg-blue-6 { background-color: #E5F1FF !important; }
.bg-blue-7 { background-color: #F5F9FF !important; }

.text-blue-1 { color: #0255B1 !important; }
.text-blue-2 { color: #0372ED !important; }
.text-blue-3 { color: #4DA1FD !important; }
.text-blue-4 { color: #95C7FE !important; }
.text-blue-5 { color: #C3DFFE !important; }
.text-blue-6 { color: #E5F1FF !important; }
.text-blue-7 { color: #F5F9FF !important; }

/* پالت قرمز */
.bg-red-1 { background-color: #831313 !important; }
.bg-red-2 { background-color: #B61F1F !important; }
.bg-red-3 { background-color: #E33B3B !important; }
.bg-red-4 { background-color: #EB7070 !important; }
.bg-red-5 { background-color: #F4B3B3 !important; }
.bg-red-6 { background-color: #FBE4E4 !important; }
.bg-red-7 { background-color: #FEF6F6 !important; }

.text-red-1 { color: #831313 !important; }
.text-red-2 { color: #B61F1F !important; }
.text-red-3 { color: #E33B3B !important; }
.text-red-4 { color: #EB7070 !important; }
.text-red-5 { color: #F4B3B3 !important; }
.text-red-6 { color: #FBE4E4 !important; }
.text-red-7 { color: #FEF6F6 !important; }

/* پالت سبز */
.bg-green-1 { background-color: #058F53 !important; }
.bg-green-2 { background-color: #10B023 !important; }
.bg-green-3 { background-color: #27CB3A !important; }
.bg-green-4 { background-color: #63E372 !important; }
.bg-green-5 { background-color: #A9EFB1 !important; }
.bg-green-6 { background-color: #CDF9D2 !important; }
.bg-green-7 { background-color: #E6FFE9 !important; }

.text-green-1 { color: #058F53 !important; }
.text-green-2 { color: #10B023 !important; }
.text-green-3 { color: #27CB3A !important; }
.text-green-4 { color: #63E372 !important; }
.text-green-5 { color: #A9EFB1 !important; }
.text-green-6 { color: #CDF9D2 !important; }
.text-green-7 { color: #E6FFE9 !important; }

/* پالت زرد */
.bg-yellow-1 { background-color: #967B02 !important; }
.bg-yellow-2 { background-color: #DBAF00 !important; }
.bg-yellow-3 { background-color: #FDD112 !important; }
.bg-yellow-4 { background-color: #FDDD4F !important; }
.bg-yellow-5 { background-color: #FDE781 !important; }
.bg-yellow-6 { background-color: #FEF1B8 !important; }
.bg-yellow-7 { background-color: #FFFAE6 !important; }

.text-yellow-1 { color: #967B02 !important; }
.text-yellow-2 { color: #DBAF00 !important; }
.text-yellow-3 { color: #FDD112 !important; }
.text-yellow-4 { color: #FDDD4F !important; }
.text-yellow-5 { color: #FDE781 !important; }
.text-yellow-6 { color: #FEF1B8 !important; }
.text-yellow-7 { color: #FFFAE6 !important; }

/* پالت بنفش */
.bg-purple-1 { background-color: #120175 !important; }
.bg-purple-2 { background-color: #220BA8 !important; }
.bg-purple-3 { background-color: #3538E7 !important; }
.bg-purple-4 { background-color: #6466ED !important; }
.bg-purple-5 { background-color: #9B9CF3 !important; }
.bg-purple-6 { background-color: #C8C9F9 !important; }
.bg-purple-7 { background-color: #EDEDFD !important; }

.text-purple-1 { color: #120175 !important; }
.text-purple-2 { color: #220BA8 !important; }
.text-purple-3 { color: #3538E7 !important; }
.text-purple-4 { color: #6466ED !important; }
.text-purple-5 { color: #9B9CF3 !important; }
.text-purple-6 { color: #C8C9F9 !important; }
.text-purple-7 { color: #EDEDFD !important; }

/* پالت خاکستری */
.bg-gray-1 { background-color: #262626 !important; }
.bg-gray-2 { background-color: #404040 !important; }
.bg-gray-3 { background-color: #595959 !important; }
.bg-gray-4 { background-color: #7D7D7D !important; }
.bg-gray-5 { background-color: #A3A3A3 !important; }
.bg-gray-6 { background-color: #D4D4D4 !important; }
.bg-gray-7 { background-color: #EDEDED !important; }
.bg-gray-8 { background-color: #FFFFFF !important; }

.text-gray-1 { color: #262626 !important; }
.text-gray-2 { color: #404040 !important; }
.text-gray-3 { color: #595959 !important; }
.text-gray-4 { color: #7D7D7D !important; }
.text-gray-5 { color: #A3A3A3 !important; }
.text-gray-6 { color: #D4D4D4 !important; }
.text-gray-7 { color: #EDEDED !important; }
.text-gray-8 { color: #FFFFFF !important; }

/* رنگ‌های دقیق از تصویر */

/* Error Colors */
.bg-error-main { background-color: #B61F1F !important; }
.bg-error-light-1 { background-color: #B41A1A !important; }
.bg-error-light-2 { background-color: #EB7070 !important; }
.bg-error-light-3 { background-color: #FBE4E4 !important; }

.text-error-main { color: #B61F1F !important; }
.text-error-light-1 { color: #B41A1A !important; }
.text-error-light-2 { color: #EB7070 !important; }
.text-error-light-3 { color: #FBE4E4 !important; }

/* Warning Colors */
.bg-warning-main { background-color: #DBAF00 !important; }
.bg-warning-light-1 { background-color: #FDD112 !important; }
.bg-warning-light-2 { background-color: #FDE781 !important; }
.bg-warning-light-3 { background-color: #FEF1B8 !important; }

.text-warning-main { color: #DBAF00 !important; }
.text-warning-light-1 { color: #FDD112 !important; }
.text-warning-light-2 { color: #FDE781 !important; }
.text-warning-light-3 { color: #FEF1B8 !important; }

/* Info Colors */
.bg-info-main { background-color: #0255B1 !important; }
.bg-info-light-1 { background-color: #3538E7 !important; }
.bg-info-light-2 { background-color: #9B9CF3 !important; }
.bg-info-light-3 { background-color: #C8C9F9 !important; }

.text-info-main { color: #0255B1 !important; }
.text-info-light-1 { color: #3538E7 !important; }
.text-info-light-2 { color: #9B9CF3 !important; }
.text-info-light-3 { color: #C8C9F9 !important; }

/* Success Colors */
.bg-success-main { background-color: #058F53 !important; }
.bg-success-light-1 { background-color: #10B023 !important; }
.bg-success-light-2 { background-color: #63E372 !important; }
.bg-success-light-3 { background-color: #CDF9D2 !important; }

.text-success-main { color: #058F53 !important; }
.text-success-light-1 { color: #10B023 !important; }
.text-success-light-2 { color: #63E372 !important; }
.text-success-light-3 { color: #CDF9D2 !important; }

/* ================= سایه‌ها (Shadows) ================= */
/* کلاس‌های سایه بر اساس سایه‌های تم */
.shadow-xs { box-shadow: var(--mud-elevation-0) !important; }
.shadow-sm { box-shadow: var(--mud-elevation-1) !important; }
.shadow-md { box-shadow: var(--mud-elevation-2) !important; }
.shadow-lg { box-shadow: var(--mud-elevation-4) !important; }
.shadow-xl { box-shadow: var(--mud-elevation-8) !important; }
.shadow-xxl { box-shadow: var(--mud-elevation-16) !important; }
.shadow-xxxl { box-shadow: var(--mud-elevation-24) !important; }

/* ================= گوشه‌های گرد (Border Radius) ================= */
/* کلاس‌های گوشه‌های گرد بر اساس مقادیر تم */
.rounded-xs { border-radius: var(--mud-default-borderradius) !important; }
.rounded-sm { border-radius: calc(var(--mud-default-borderradius) * 2) !important; }
.rounded-md { border-radius: calc(var(--mud-default-borderradius) * 3) !important; }
.rounded-lg { border-radius: 15px !important; }
.rounded-xl { border-radius: calc(var(--mud-default-borderradius) * 6) !important; }
.rounded-xxl { border-radius: calc(var(--mud-default-borderradius) * 8) !important; }
.rounded-circle { border-radius: 50% !important; }

/* ================= کلاس‌های داشبورد (Dashboard Classes) ================= */
/* کلاس‌های مخصوص کارت‌های داشبورد */
.dashboard-card-top {
    border-radius: 15px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: var(--mud-palette-surface) !important;
}

.dashboard-card-bottom {
    border-radius: 20px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: var(--mud-palette-surface) !important;
}

/* افکت هاور برای کارت‌های داشبورد */
.dashboard-card-top:hover, .dashboard-card-bottom:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(var(--mud-palette-primary-rgb), 0.2) !important;
}

/* کلاس حاشیه برای کارت‌های داشبورد */
.border-card {
    border: 1px solid rgba(var(--mud-palette-primary-rgb), 0.15);
    transition: border-color 0.3s ease;
}

.border-card:hover {
    border-color: rgba(var(--mud-palette-primary-rgb), 0.4);
}

/* ================= ترکیب‌های کاربردی ================= */
/* کلاس‌های ترکیبی برای موارد پرکاربرد */
.primary-container {
    background-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-contrast-text) !important;
    border-radius: var(--mud-default-borderradius);
}

.secondary-container {
    background-color: var(--mud-palette-secondary) !important;
    color: var(--mud-palette-secondary-contrast-text) !important;
    border-radius: var(--mud-default-borderradius);
}

.success-container {
    background-color: var(--mud-palette-success) !important;
    color: var(--mud-palette-success-contrast-text) !important;
    border-radius: var(--mud-default-borderradius);
}

.error-container {
    background-color: var(--mud-palette-error) !important;
    color: var(--mud-palette-error-contrast-text) !important;
    border-radius: var(--mud-default-borderradius);
}

.warning-container {
    background-color: var(--mud-palette-warning) !important;
    color: var(--mud-palette-warning-contrast-text) !important;
    border-radius: var(--mud-default-borderradius);
}

/* ================= انیمیشن‌ها (Animations) ================= */
/* کلاس‌های انیمیشن پرکاربرد */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(var(--mud-palette-primary-rgb), 0.2) !important;
}

.hover-shadow {
    transition: box-shadow 0.3s ease;
}

.hover-shadow:hover {
    box-shadow: 0 6px 12px rgba(var(--mud-palette-primary-rgb), 0.15) !important;
}

/* ================= کاربردهای خاص ================= */
/* کلاس‌های سفارشی برای موارد خاص */
.card-header-icon {
    margin-right: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.stat-card-icon-container {
    border-radius: 8px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 7px;
}

/* ================= پاسخگویی (Responsive) ================= */
/* کلاس‌های مرتبط با طراحی واکنش‌گرا */
@media (min-width: 600px) {
    .stat-card-icon-container {
        width: 56px;
        height: 56px;
    }
}