/* وارد کردن فونت‌های استاندارد */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap');

:root {
    --gold-premium: #D4AF37;       /* Luxury Gold */
    --gold-hover: #E3C565;         /* Champagne Gold */
    --gold-dark: #B68A2D;          /* Dark Gold */
    --gold-soft: rgba(212, 175, 55, 0.12); /* Luxury Gold Soft */
    --royal-green: #0F5C4D;        /* Primary Green */
    --royal-dark: #062F28;         /* Dark Green */
    --charcoal-dark: #062F28;
    --charcoal-light: #2A3B31; 
    --bg-light: #F8F9FA;
    --success-soft: #198754;
    --danger-soft: #DC3545;
    --card-dark: #1A2820;
}

/* تعریف گرادیانت ۳ رنگ لوکس پیشنهادی برای عمق‌بخشی به وب‌اپلیکیشن */
.bg-luxury-gradient {
    background: linear-gradient(135deg, #062F28 0%, #0F5C4D 50%, #1A7A63 100%) !important;
}

/* تنظیمات کلی برای زبان فارسی و ساختار راست‌چین */
html, body {
    direction: rtl;
    text-align: right;
    scroll-behavior: smooth;
    font-family: "Vazirmatn", "Segoe UI", Tahoma, sans-serif;
    background-color: var(--bg-light);
    color: var(--charcoal-dark);
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
}

/* استایل‌های هدر و ناوبری */
.bg-royal-green { background-color: var(--royal-green) !important; }
.bg-royal-dark { background-color: var(--royal-dark) !important; }
.bg-charcoal-dark { background-color: var(--charcoal-dark) !important; }
.bg-gold-soft { background-color: var(--gold-soft) !important; }
.text-gold-premium { color: var(--gold-premium) !important; }
.border-gold-premium { border-color: var(--gold-premium) !important; }

/* دکمه‌ها و عناصر تعاملی اختصاصی */
.btn-gold {
    background-color: var(--gold-premium);
    color: var(--charcoal-dark) !important;
    font-weight: 700;
    border: none;
    transition: all 0.2s ease;
}
.btn-gold:hover {
    background-color: var(--gold-hover);
}

/* پالس انیمیشن وضعیت آنلاین چت */
@keyframes pulse-glow {
    0% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.7); }
    70% { box-shadow: 0 0 0 8px rgba(25, 135, 84, 0); }
    100% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); }
}
.live-pulse {
    animation: pulse-glow 2s infinite;
}

/* شخصی‌سازی اسکرول‌بار برای جدول‌های معین مال */
::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}
::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
}
::-webkit-scrollbar-thumb {
    background: var(--gold-premium);
    border-radius: 9999px;
}

/* پدینگ بدنه به خاطر هدر و فوتر فیکس شده */
body {
    padding-top: 64px;
    padding-bottom: 75px;
}

/* استایل چت باکس */
.chat-messages-container {
    height: calc(100vh - 360px);
    overflow-y: auto;
}

/* افکت جابه‌جایی نرم و سایه ملایم روی کارتهای قیمت طلا */
.market-price-item-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(205, 165, 87, 0.3) !important;
}

/* وزن فونت فوق ضخیم برای ارقام قیمتی تراز مالی */
.fw-black {
    font-weight: 900 !important;
}


/* انیمیشن جهش نرم کارت‌های شناور احراز هویت زر */
.animate-slide-up {
    animation: authSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes authSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* پهنای تمام‌عرض برای دکمه‌های فرم صنف */
.w-full {
    width: 100% !important;
}



/* استایل‌های تکمیلی مرحله چهارم - داشبورد و دفتر معین */

/* کلاس انیمیشن چرخش آهسته آیکون رفرش */
@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.animate-spin-slow {
    animation: spin-slow 12s linear infinite;
}

/* استایل کانتینر جدول معین با اسکرول افقی نرم */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}



/* تعریف انیمیشن جابه‌جایی و ورود ملایم اسلایدهای کاروسل دارایی */
.carousel-slide-fade {
    animation: slideFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* هماهنگ‌سازی فونت و اندازه هدر و سلول‌های جدول جهت ایجاد یکپارچگی */
.table-moein td {
    font-size: 11.5px !important;
    padding: 10px 8px !important;
    border-color: rgba(0, 0, 0, 0.05) !important;
}


/* --- بخش بهینه‌سازی خوانایی و اسکرول عمودی جدول --- */
.table-responsive-custom {
    max-height: 420px; /* محدودیت ارتفاع باکس جدول معین در حالت عادی */
    overflow-y: auto !important;
    overflow-x: auto !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    position: relative;
    background-color: #ffffff;
}

/* رنگ‌آمیزی یک‌درمیان سطرها (Zebra Striping) برای دنبال کردن آسان‌تر */
.table-moein tbody tr:nth-of-type(even) {
    background-color: rgba(248, 249, 250, 0.85) !important;
}
.table-moein tbody tr:nth-of-type(odd) {
    background-color: #ffffff !important;
}

/* هاور سطرها */
.table-moein tbody tr:hover {
    background-color: rgba(205, 165, 87, 0.08) !important;
}


/* استایل هوشمند تمام‌صفحه برای جدول معین */
.rotated-fullscreen-active {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;  /* پر کردن کامل عرض صفحه */
    height: 100vh !important; /* پر کردن کامل ارتفاع صفحه */
    z-index: 2100 !important;
    background-color: #ffffff !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    padding: 20px !important;
    max-height: none !important;
    overflow: auto !important; /* فعال‌سازی اسکرول روان */
}

/* اعمال چرخش ۹۰ درجه فقط و فقط زمانی که صفحه در حالت عمودی (پرتره) است */
@media (orientation: portrait) {
    .rotated-fullscreen-active {
        top: 50% !important;
        left: 50% !important;
        width: 100vh !important;  /* عرض جدول معادل ارتفاع فیزیکی صفحه گوشی می‌شود */
        height: 100vw !important; /* ارتفاع جدول معادل عرض فیزیکی صفحه گوشی می‌شود */
        transform: translate(-50%, -50%) rotate(90deg) !important; /* چرخش جهت خوانایی افقی */
        transform-origin: center center !important;
    }
}

/* افزایش خوانایی هدرها */
.table-moein th {
    font-size: 11px !important;
    font-weight: 700 !important;
    background-color: var(--royal-green) !important;
    color: #ffffff !important;
    padding: 12px 6px !important;
}

/* دکمه‌های ناوبری صفحه‌بندی */
.page-link-custom {
    color: var(--charcoal-dark);
    border-color: rgba(0, 0, 0, 0.08);
    font-size: 11px;
    padding: 5px 10px;
    border-radius: 6px;
    text-decoration: none;
}
.page-item-custom.active .page-link-custom {
    background-color: var(--gold-premium) !important;
    border-color: var(--gold-premium) !important;
    color: var(--charcoal-dark) !important;
    font-weight: bold;
}
.page-item-custom.disabled .page-link-custom {
    opacity: 0.5;
    pointer-events: none;
}

/* پدینگ پس‌زمینه کارت‌های وضعیت طلبکار/بدهکار */
.bg-green-soft-20 {
    background-color: rgba(25, 135, 84, 0.08) !important;
}

.bg-red-soft-20 {
    background-color: rgba(220, 53, 69, 0.08) !important;
}


/* کلاس اختصاصی برای خوانایی و زیبایی اعداد با فونت هماهنگ وزیرمتن */
.font-digit {
    font-family: "Vazirmatn", "Segoe UI", Tahoma, sans-serif !important;
}

.carousel-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50% !important;
    background-color: rgba(0, 0, 0, 0.15) !important; /* رنگ دات غیرفعال خاکستری */
    cursor: pointer;
    transition: all 0.3s ease;
}

/* دات فعال به شکل کپسول طلایی کشیده */
.carousel-dot.active-dot {
    width: 18px !important;
    height: 8px !important;
    border-radius: 4px !important;
    background-color: #CDA557 !important; /* رنگ طلایی ثابت برای نمایش قطعی */
}


/* استایل سفارشی گزینه‌های پاپ‌آپ انتخاب طرف حساب */
.shop-option {
    background-color: #ffffff !important;
    color: var(--charcoal-dark) !important;
    transition: all 0.2s ease;
    border-color: rgba(0, 0, 0, 0.08) !important;
    text-align: right !important;
}

.shop-option:hover {
    background-color: var(--bg-light) !important;
}

/* حالت فعال گزینه انتخاب شده در پاپ‌آپ */
.shop-option.active {
    border-color: var(--gold-premium) !important;
    background-color: var(--gold-soft) !important;
    color: var(--royal-green) !important;
}


/* شخصی‌سازی بصری گزینه‌های دراپ‌دان سایدبار */
.custom-shop-dropdown .dropdown-item {
    color: rgba(255, 255, 255, 0.85) !important;
    background-color: transparent !important;
}

.custom-shop-dropdown .dropdown-item:hover, 
.custom-shop-dropdown .dropdown-item:focus {
    background-color: var(--gold-soft) !important;
    color: var(--gold-premium) !important;
}

/* رنگ پس‌زمینه گزینه فعال */
.custom-shop-dropdown .dropdown-item.active-item {
    background-color: rgba(212, 175, 55, 0.15) !important;
    color: var(--gold-premium) !important;
    font-weight: bold;
}


/* =========================================================================
   بهینه‌سازی ریسپانسیو برای صفحات نمایش بزرگ (تبلت و لپ‌تاپ)
   ========================================================================= */
@media (min-width: 992px) {
    body {
        padding-bottom: 30px; /* کاهش فاصله پایین به دلیل مخفی شدن نوار ناوبری */
    }

    /* گسترش ستون اصلی برای پر کردن عرض صفحه */
    .dashboard-main-col {
        max-width: 1200px !important;
        margin: 0 auto;
    }

    /* اجبار نمایش همزمان هر دو اسلاید در کنار هم بدون تاثیرپذیری از کدهای جاوااسکریپت موبایل */
    #numerical-slide {
        display: block !important;
        opacity: 1 !important;
        transform: none !important;
    }
    #chart-slide {
        display: flex !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

@media (max-width: 991.98px) {
    /* حفظ ابعاد استاندارد و متمرکز موبایل در صفحات کوچک */
    .dashboard-main-col {
        max-width: 450px;
        margin: 0 auto;
    }
}


/* =========================================================================
   بهینه‌سازی ریسپانسیو برای صفحه معاملات (deals.html)
   ========================================================================= */
@media (min-width: 768px) {
    /* تغییر چیدمان عمودی لیست فاکتورها به ساختار شبکه‌ای ۲ ستونه در تبلت */
    #deals-list-container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

@media (min-width: 1200px) {
    /* تغییر چیدمان لیست فاکتورها به ساختار شبکه‌ای ۳ ستونه در نمایشگرهای بزرگ‌تر (لپ‌تاپ) */
    #deals-list-container {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (min-width: 992px) {
    /* محدود کردن عرض نوار دکمه‌های فیلتر در دسکتاپ جهت حفظ تقارن و جلوگیری از کشیدگی */
    .deals-filter-container {
        max-width: 600px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}


/* =========================================================================
   بهینه‌سازی ریسپانسیو برای پنل مدیریت فروشنده در سایز بزرگ
   ========================================================================= */
@media (min-width: 992px) {
    /* گسترش کادرها و فرم‌های پنل فروشنده در دسکتاپ */
    .seller-main-col {
        max-width: 1000px !important; 
        margin: 0 auto;
    }
}

@media (max-width: 991.98px) {
    /* حفظ ابعاد بهینه در نمایشگرهای موبایل */
    .seller-main-col {
        max-width: 480px;
        margin: 0 auto;
    }
}


/* =========================================================================
   بهینه‌سازی ریسپانسیو صفحه گزارش مشتری در پنل فروشنده
   ========================================================================= */
@media (min-width: 992px) {
    /* گسترش عرض ستون گزارش در تبلت و دسکتاپ */
    .seller-report-col {
        max-width: 1200px !important;
        margin: 0 auto;
    }
}

@media (max-width: 991.98px) {
    /* حفظ ابعاد بهینه و استاندارد موبایل */
    .seller-report-col {
        max-width: 480px;
        margin: 0 auto;
    }
}

/* =========================================================================
   بهینه‌سازی عرض پنل مدیریت ارشد ( admin_dashboard.html )
   ========================================================================= */
@media (min-width: 992px) {
    /* عرض بهینه ۸۰۰ پیکسلی برای کشیده شدن متوازن المان‌های مدیریت بدون به هم ریختگی */
    .admin-dashboard-col {
        max-width: 800px !important;
        margin: 0 auto;
    }
}

@media (max-width: 991.98px) {
    /* حفظ ابعاد بهینه موبایل برای پنل ادمین */
    .admin-dashboard-col {
        max-width: 480px;
        margin: 0 auto;
    }
}

/* =========================================================================
   بهینه‌سازی ریسپانسیو صفحه گزارش فروشنده ادمین ( admin_seller_report.html )
   ========================================================================= */
@media (min-width: 992px) {
    /* گسترش عرض صفحه تا ۸۰۰ پیکسل جهت بهبود خوانایی جدول ممیزی لاگ‌ها */
    .admin-report-col {
        max-width: 800px !important;
        margin: 0 auto;
    }
}

@media (max-width: 991.98px) {
    /* حفظ ابعاد استاندارد موبایل */
    .admin-report-col {
        max-width: 480px;
        margin: 0 auto;
    }
}

/* =========================================================================
   بهینه‌سازی ریسپانسیو صفحه لاگ‌های سیستم در پنل ادمین
   ========================================================================= */
@media (min-width: 992px) {
    /* گسترش عرض ستون اصلی لاگ‌ها در دسکتاپ */
    .admin-logs-col {
        max-width: 1200px !important;
        margin: 0 auto;
    }
}

@media (max-width: 991.98px) {
    /* حفظ ابعاد بهینه و استاندارد موبایل */
    .admin-logs-col {
        max-width: 480px;
        margin: 0 auto;
    }
}

/* =========================================================================
   بهینه‌سازی ریسپانسیو پورتال گفتگوها در پنل ادمین
   ========================================================================= */
@media (min-width: 992px) {
    /* تعریض ستون اصلی مدیریت چت در دسکتاپ */
    .admin-chat-col {
        max-width: 1200px !important;
        margin: 0 auto;
    }

    /* نمایش همیشگی و ثابت لیست پیام‌ها در ستون سمت راست دسکتاپ */
    #chats-list-section {
        display: block !important;
    }

    /* افزایش پویای ارتفاع کانتینر چت‌باکس در لپ‌تاپ جهت راحتی ادمین */
    #active-chat-box-card .chat-messages-container {
        height: 380px !important;
    }

    /* پنهان‌سازی هوشمند کارت خوش‌آمدگویی دسکتاپ پس از کلیک روی یکی از چت‌ها */
    #active-chat-box-card:not(.d-none) ~ #chat-placeholder-card {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    /* ابعاد بهینه و استاندارد موبایل */
    .admin-chat-col {
        max-width: 480px;
        margin: 0 auto;
    }
}

/* =========================================================================
   بهینه‌سازی ریسپانسیو صفحه تنظیمات سیستم در پنل ادمین
   ========================================================================= */
@media (min-width: 992px) {
    /* گسترش عرض ستون اصلی تنظیمات در دسکتاپ */
    .admin-settings-col {
        max-width: 1200px !important;
        margin: 0 auto;
    }
}

@media (max-width: 991.98px) {
    /* حفظ ابعاد استاندارد موبایل */
    .admin-settings-col {
        max-width: 480px;
        margin: 0 auto;
    }
}