:root {
    --h: 210;
    --s: 70%;
    --l: 50%;
    --c: hsl(var(--h), var(--s), var(--l));
    --cl: hsl(var(--h), var(--s), calc(var(--l) + 15%));
    --cd: hsl(var(--h), var(--s), calc(var(--l) - 15%));
    --bg: linear-gradient(135deg, var(--cl), var(--cd));
    --sb: rgba(0, 0, 0, .4);
    --sb-blur: blur(15px);
 --danger-color: #ef4444;
    /* رنگ متن هوشمند – همیشه خوانا (حداقل کنتراست 4.5:1) */
    --txt: hsl(0, 0%, clamp(12%, 105% - var(--l) * 1.7, 92%));
    --inv: hsl(var(--h), 55%, clamp(75%, var(--l) + 25%, 98%));

    --card: rgba(255, 255, 255, .12);
    --bor: rgba(255, 255, 255, .2);
    --sh: 0 10px 30px rgba(0, 0, 0, .3);
    --hov: 0 20px 40px rgba(0, 0, 0, .4);
    --tr: all .4s cubic-bezier(.25, .8, .25, 1)
}
/* ===== استایل‌های اصلی کارت با چرخش ===== */
/* اضافه کردن به استایل‌های کارت */

.flip-card {
    overflow: hidden;
    border-radius: 16px;
}

.flip-card-front,
.flip-card-back {
    overflow: hidden;
    padding: 20px 15px !important;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* محدود کردن محتوای getExtra */
.flip-card-front .extra-content {
    max-height: 180px;
    overflow-y: auto;
    width: 100%;
    padding: 0 2px;
    margin-top: 8px;
}

/* اسکرول بار برای محتوای اضافی */
.flip-card-front .extra-content::-webkit-scrollbar {
    width: 3px;
}
// اضافه کردن استایل در جاوااسکریپت
const style = document.createElement('style');
style.textContent = `
    /* دکمه جمع کردن سایدبار */
    #sidebarToggleBtn {
        z-index: 999 !important;
        position: fixed !important;
    }

    /* پنل تم */
    #themePanel {
        z-index: 1100 !important;
    }

    /* اطمینان از اینکه پنل تم روی همه چیز باشد */
    #themePanel.open {
        z-index: 1100 !important;
    }
`;
document.head.appendChild(style);
.flip-card-front .extra-content::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
}

.flip-card-front .extra-content::-webkit-scrollbar-thumb {
    background: var(--primary-color, #3b82f6);
    border-radius: 10px;
}
.flip-card-back {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    border-radius: 20px !important;
    padding: 20px 15px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important;
}

.flip-card-front {
    background: var(--card) !important;
    border: 1px solid var(--bor) !important;
    backdrop-filter: blur(12px) !important;
    color: var(--txt) !important;
    z-index: 2 !important;
    transform: rotateY(0deg) !important;
}

.flip-card-back {
    background: linear-gradient(135deg, var(--c), var(--cd)) !important;
    transform: rotateY(180deg) !important;
    color: #fff !important;
    border: 1px solid var(--bor) !important;
    backdrop-filter: blur(15px) !important;
    z-index: 1 !important;
}

.flip-card:hover {
    transform: translateY(-10px) scale(1.02) !important;
    box-shadow: var(--hov) !important;
}

/* ===== محتوای getExtra - بدون اسکرول ===== */
.flip-card-front .extra-content {
    width: 100% !important;
    padding: 4px 0 !important;
    margin-top: 4px !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
    max-height: none !important;
}

/* ===== حذف اسکرول بار ===== */
.flip-card-front .extra-content::-webkit-scrollbar {
    display: none !important;
}

.flip-card-front .extra-content {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

/* ===== فونت‌ها - اندازه عادی ===== */
.flip-card-front h5 {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    margin-bottom: 6px !important;
}

.flip-card-front h3 {
    font-size: 2rem !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
}

.flip-card-front p.small {
    font-size: 0.8rem !important;
    margin-top: 4px !important;
    margin-bottom: 4px !important;
    opacity: 0.8 !important;
}

.flip-card-front .badge {
    font-size: 0.65rem !important;
    padding: 3px 10px !important;
}

.flip-card-front i {
    font-size: 2.2rem !important;
    margin-bottom: 8px !important;
}

/* ===== دکمه‌های پشت کارت ===== */
.flip-card-back .btn-back {
    display: inline-block !important;
    padding: 10px 20px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    min-width: 120px !important;
    margin: 6px auto !important;
    width: 85% !important;
    border: none !important;
}

.flip-card-back .btn-back.view {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
}

.flip-card-back .btn-back.view:hover {
    background: rgba(255, 255, 255, 0.35) !important;
    transform: translateY(-3px) scale(1.05) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
}

.flip-card-back .btn-back.add {
    background: rgba(255, 255, 255, 0.15) !important;  /* ← مثل مشاهده */
    color: white !important;  /* ← مثل مشاهده */
    border: 2px solid rgba(255, 255, 255, 0.25) !important;
}

.flip-card-back .btn-back.add:hover {
    background: rgba(255, 255, 255, 0.3) !important;  /* ← مثل مشاهده */
      transform: translateY(-3px) scale(1.05) !important;
}

/* ===== ریسپانسیو ===== */
@media (max-width: 768px) {
    .flip-card {
        min-height: 250px !important;
    }

    .flip-card-front h5 {
        font-size: 1rem !important;
    }

    .flip-card-front h3 {
        font-size: 1.7rem !important;
    }

    .flip-card-front p.small {
        font-size: 0.75rem !important;
    }

    .flip-card-front i {
        font-size: 1.8rem !important;
    }

    .flip-card-back .btn-back {
        padding: 8px 14px !important;
        font-size: 0.8rem !important;
        min-width: 80px !important;
    }
}

@media (max-width: 576px) {
    .flip-card {
        min-height: 220px !important;
    }

    .flip-card-front h5 {
        font-size: 0.9rem !important;
    }

    .flip-card-front h3 {
        font-size: 1.4rem !important;
    }

    .flip-card-front p.small {
        font-size: 0.7rem !important;
    }

    .flip-card-front i {
        font-size: 1.5rem !important;
    }
}
/* حل مشکل z-index و backdrop در مودال‌ها */
.modal-backdrop {
    z-index: 1050 !important;
}

.modal {
    z-index: 1060 !important;
}

body.modal-open {
    overflow: hidden;
    padding-right: 0 !important;
}
/* حالت سیاه و سفید (BW Mode) – متن همیشه سفید و خوانا */
/* حالت سیاه و سفید (BW Mode) – اعمال نوردهی یکنواخت در کل صفحه */
body.bw-mode {
    /* بازنشانی کامل متغیرهای HSL */
    --h: 0;           /* حذف رنگ */
    --s: 0%;          /* حذف اشباع */
    --l: 15%;         /* نوردهی تیره و یکنواخت - کل صفحه */

    /* بازتعریف رنگ‌ها با مقادیر جدید */
    --c: hsl(var(--h), var(--s), var(--l));
    --cl: hsl(var(--h), var(--s), calc(var(--l) + 12%));
    --cd: hsl(var(--h), var(--s), calc(var(--l) - 8%));
    --bg: linear-gradient(135deg, var(--cl), var(--cd));

    /* متن‌ها - کنتراست بالا */
    --txt: #ffffff !important;
    --inv: #f0f0f0 !important;

    /* المنت‌های شیشه‌ای */
    --card: rgba(30, 30, 30, 0.85);
    --bor: rgba(255, 255, 255, 0.2);
    --sb: rgba(10, 10, 10, 0.92);
    --sb-blur: blur(12px);

    /* سایه‌ها */
    --sh: 0 10px 30px rgba(0, 0, 0, 0.6);
    --hov: 0 20px 40px rgba(0, 0, 0, 0.7);
}

/* اطمینان از اعمال به تمام المان‌ها */
body.bw-mode,
body.bw-mode *,
body.bw-mode *::before,
body.bw-mode *::after {
    transition: all 0.3s ease;
}

/* اصلاح کارت‌های شیشه‌ای */
body.bw-mode .flip-card-front,
body.bw-mode .form-container,
body.bw-mode .chart-container,
body.bw-mode .quick-actions-box {
    background: rgba(25, 25, 25, 0.92) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* اصلاح سایدبار */
body.bw-mode nav.sidebar::before {
    background: rgba(8, 8, 8, 0.95) !important;
    backdrop-filter: blur(15px) !important;
}

body.bw-mode .sidebar .nav-link {
    background: rgba(35, 35, 35, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #f5f5f5 !important;
}

body.bw-mode .sidebar .nav-link:hover,
body.bw-mode .sidebar .nav-link.active {
    background: rgba(55, 55, 55, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    transform: translateX(-8px);
}

/* اصلاح دکمه‌ها - حذف رنگ‌ها */
body.bw-mode .btn {
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    background: rgba(40, 40, 40, 0.7) !important;
    color: #f0f0f0 !important;
}

body.bw-mode .btn:hover {
    background: rgba(60, 60, 60, 0.85) !important;
    transform: translateY(-2px);
}

body.bw-mode .btn-primary,
body.bw-mode .btn-success,
body.bw-mode .btn-warning,
body.bw-mode .btn-danger {
    background: rgba(50, 50, 50, 0.8) !important;
    color: #ffffff !important;
}

body.bw-mode .btn-primary:hover {
    background: rgba(70, 70, 70, 0.9) !important;
}

/* اصلاح مودال‌ها */
body.bw-mode .modal-content {
    background: linear-gradient(135deg, #1a1a1a, #0d0d0d) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

body.bw-mode .modal-header,
body.bw-mode .modal-footer {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* اصلاح فیلدهای فرم */
body.bw-mode .form-control,
body.bw-mode .form-select {
    background: rgba(30, 30, 30, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

body.bw-mode .form-control:focus,
body.bw-mode .form-select:focus {
    background: rgba(45, 45, 45, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1) !important;
}

body.bw-mode .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* اصلاح ویجت چت */
body.bw-mode #chatWidget {
    background: rgba(15, 15, 15, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

body.bw-mode .chat-sidebar {
    background: rgba(0, 0, 0, 0.5) !important;
}

body.bw-mode .chat-messages {
    background: rgba(10, 10, 10, 0.6) !important;
}

body.bw-mode .message.received .message-content {
    background: rgba(40, 40, 40, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #f0f0f0 !important;
}

body.bw-mode .message.sent .message-content {
    background: rgba(60, 60, 60, 0.95) !important;
    color: #ffffff !important;
}

body.bw-mode .chat-user-item {
    background: rgba(30, 30, 30, 0.7) !important;
}

body.bw-mode .chat-user-item:hover,
body.bw-mode .chat-user-item.active {
    background: rgba(55, 55, 55, 0.85) !important;
}

body.bw-mode #chatMessageInput {
    background: rgba(35, 35, 35, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

/* اصلاح دراپ‌داون‌ها */
body.bw-mode .dropdown-menu {
    background: rgba(20, 20, 20, 0.98) !important;
    backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

body.bw-mode .dropdown-item {
    color: #f0f0f0 !important;
}

body.bw-mode .dropdown-item:hover {
    background: rgba(60, 60, 60, 0.8) !important;
}

/* اصلاح نوتیفیکیشن‌ها */
body.bw-mode #notificationDropdown {
    background: rgba(15, 15, 15, 0.96) !important;
    backdrop-filter: blur(20px) !important;
}

body.bw-mode .notification-item {
    background: rgba(30, 30, 30, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

body.bw-mode .notification-item:hover {
    background: rgba(50, 50, 50, 0.9) !important;
}

/* اصلاح Badge‌ها */
body.bw-mode .badge {
    background: rgba(80, 80, 80, 0.9) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* اصلاح دکمه Back */
body.bw-mode .btn-back {
    background: rgba(35, 35, 35, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #f0f0f0 !important;
}

body.bw-mode .btn-back:hover {
    background: rgba(55, 55, 55, 0.9) !important;
    color: #ffffff !important;
}

/* اصلاح آژیرها */
body.bw-mode .alert {
    background: rgba(30, 30, 30, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

body.bw-mode .alert-success {
    color: #b8e6b8 !important;
}

body.bw-mode .alert-danger {
    color: #ffb3b3 !important;
}

/* اصلاح اسکرول‌بار */
body.bw-mode ::-webkit-scrollbar-track {
    background: rgba(20, 20, 20, 0.5) !important;
}

body.bw-mode ::-webkit-scrollbar-thumb {
    background: rgba(100, 100, 100, 0.6) !important;
}

body.bw-mode ::-webkit-scrollbar-thumb:hover {
    background: rgba(120, 120, 120, 0.8) !important;
}

/* اصلاح منوی دایره‌ای */
body.bw-mode .user-circle-btn,
body.bw-mode #themeToggleBtn,
body.bw-mode .notification-circle-btn {
    background: rgba(30, 30, 30, 0.9) !important;
    border: 2px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5) !important;
}

body.bw-mode .user-circle-btn:hover,
body.bw-mode #themeToggleBtn:hover,
body.bw-mode .notification-circle-btn:hover {
    background: rgba(50, 50, 50, 0.95) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7) !important;
}

/* اطمینان از خوانایی متن */
body.bw-mode,
body.bw-mode .text-muted,
body.bw-mode .form-text,
body.bw-mode .message-time {
    color: #d0d0d0 !important;
}

body.bw-mode h1,
body.bw-mode h2,
body.bw-mode h3,
body.bw-mode h4,
body.bw-mode h5,
body.bw-mode h6,
body.bw-mode .fw-bold,
body.bw-mode .fw-semibold {
    color: #ffffff !important;
}

/* تضمین خوانایی در حالت‌های خیلی روشن یا خیلی تیره (اختیاری اما توصیه می‌شود) */
@media (prefers-color-scheme: light) {
    :root {
        --txt: hsl(0, 0%, clamp(8%, 100% - var(--l) * 1.6, 88%));
    }
}

*, *::before, *::after {
    box-sizing: border-box
}

html, body {
    height: 100%;
    overflow-y: auto
}

body {
    font-family: Vazir, sans-serif;
    background: var(--bg);
    color: var(--txt);
    transition: var(--tr);
    min-height: 100vh;
    display: flex;
    flex-direction: column
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(.95)
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(-30px)
    }
    100% {
        opacity: 1;
        transform: translateX(0)
    }
}

@keyframes bounceIn {
    0%, 20%, 40%, 60%, 80%, 100% {
        transition-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }
    20% {
        transform: scale3d(1.1, 1.1, 1.1)
    }
    40% {
        transform: scale3d(.9, .9, .9)
    }
    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03)
    }
    80% {
        transform: scale3d(.97, .97, .97)
    }
    100% {
        opacity: 1;
        transform: scale3d(1, 1, 1)
    }
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 15px rgba(59, 130, 246, .5)
    }
    50% {
        box-shadow: 0 0 35px rgba(59, 130, 246, .9)
    }
}

@keyframes rotate {
    from {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1
    }
    50% {
        opacity: .5
    }
}

.animate-in {
    animation: fadeInUp .8s ease-out forwards;
    opacity: 0
}

.animate-in.delay-1 {
    animation-delay: .1s
}

.animate-in.delay-2 {
    animation-delay: .2s
}

.animate-in.delay-3 {
    animation-delay: .3s
}

.animate-in.delay-4 {
    animation-delay: .4s
}

.sidebar .nav-link {
    opacity: 0;
    animation: slideInRight .6s ease-out forwards
}

.sidebar .nav-link:nth-child(n+1) {
    animation-delay: calc(.1s * (n - 1))
}


.navbar-brand {
    animation: rotate 12s linear infinite
}

.flip-card {
    background: 0;
    perspective: 1200px;
    height: 300px;
    cursor: pointer;
    transition: var(--tr);
    will-change: transform
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform .7s cubic-bezier(.23, 1, .32, 1);
    transform-style: preserve-3d;
    border-radius: 20px;
    box-shadow: var(--sh)
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg)
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 20px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.flip-card-front {
    background: var(--card);
    border: 1px solid var(--bor);
    backdrop-filter: blur(12px);
    color: var(--txt)
}

.flip-card-back {
    background: linear-gradient(135deg, var(--c), var(--cd));
    transform: rotateY(180deg);
    color: #fff;
    border: 1px solid var(--bor);
    backdrop-filter: blur(15px)
}

.flip-card:hover {
    transform: translateY(-15px) scale(1.03);
    box-shadow: var(--hov)
}

.quick-actions-box {
    background: rgba(255, 255, 255, .15);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50px;
    padding: 1.2rem 1.8rem;
    width: 85%;
    margin: 0 auto 1.5rem;
    text-align: center;
    box-shadow: 0 8px 25px rgba(0, 0, 0, .3);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: .5px
}

.btn-back {
    width: 85%;
    padding: .75rem 1rem;
    border-radius: 30px;
    font-weight: 600;
    margin: .5rem auto;
    display: block;
    text-align: center;
    text-decoration: none;
    color: var(--txt);
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid var(--bor);
    backdrop-filter: blur(10px);
    transition: var(--tr);
}

.btn-back:hover {
    background: var(--c);
    color: #fff;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .4);
}

.btn-back.add {
    border: 1px solid var(--bor);
}

.btn-back.view {
    border: 1px solid var(--bor);
}

/* دراپ‌داون شیشه‌ای */
.dropdown-menu.glass-effect {
    background: rgba(15, 20, 35, 0.65) !important;
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    padding: 12px 0;
}

.dropdown-menu.glass-effect .dropdown-item,
.dropdown-menu.glass-effect .dropdown-header {
    color: #ffffff !important;
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.dropdown-menu.glass-effect .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    border-radius: 10px;
    margin: 4px 12px;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dropdown-menu.glass-effect .dropdown-header {
    color: #e0e7ff !important;
    font-weight: 700;
    font-size: 0.95rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.dropdown-menu.glass-effect .dropdown-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    margin: 10px 0;
}

/* سایدبار */
.sidebar .nav-link {
    position: relative;
    display: block;
    width: 80%;
    margin: 6px auto !important;
    padding: 8px 20px !important;
    font-size: 0.9rem;
    color: #ffffff !important;
    transition: all 0.3s ease;
    overflow: hidden;
    z-index: 0;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 50px !important;
    text-align: center;
}

.sidebar .nav-item {
    margin: 6px 0 !important;
}

.sidebar .nav-link::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08));
    opacity: 0.6;
    transition: all 0.35s ease;
}

.sidebar .nav-link > * {
    position: relative;
    z-index: 1;
}

.sidebar .nav-link:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.38) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 255, 255, 0.15);
    transform: translateY(-2px) scale(1.02);
    color: #ffffff !important;
}

.sidebar .nav-link:hover::before {
    opacity: 1;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.12));
    transform: scale(1.02);
}

.sidebar .nav-link.active {
    background: rgba(255, 255, 255, 0.26) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 25px rgba(255, 255, 255, 0.18);
    color: #ffffff !important;
}

.sidebar .nav-link.active::before {
    opacity: 1;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.16));
}

.sidebar .nav-link:hover i {
    transform: scale(1.08);
    filter: brightness(1.25);
    transition: transform 0.25s ease, filter 0.25s ease;
}

/* دکمه‌ها */
.dropdown .btn-outline-light {
    border-radius: 50px !important;
    padding: 12px 20px !important;
    margin: 0 16px 12px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    backdrop-filter: blur(8px);
    transition: all 0.35s ease;
    font-weight: 500;
}

.dropdown .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.38) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.btn-danger {
    border-radius: 50px !important;
    padding: 14px 20px !important;
    margin: 0 16px 16px;
    background: rgba(220, 53, 69, 0.15) !important;
    border: 1px solid rgba(220, 53, 69, 0.4) !important;
    backdrop-filter: blur(8px);
    font-weight: 600;
    transition: all 0.35s ease;
    color: #ff6b6b !important;
}

.btn-danger:hover {
    background: rgba(220, 53, 69, 0.28) !important;
    border: 1px solid rgba(220, 53, 69, 0.7) !important;
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(220, 53, 69, 0.35);
    color: #ffffff !important;
}

.btn {
    border-radius: 50px !important;
    padding: 10px 20px !important;
    font-weight: 500;
    transition: all 0.35s ease;
    backdrop-filter: blur(6px);
    border: 1px solid transparent;
}

.btn-primary {
    background: rgba(13, 110, 253, 0.18);
    border: 1px solid rgba(13, 110, 253, 0.35);
    color: #8bb9ff;
}

.btn-primary:hover {
    background: rgba(13, 110, 253, 0.3);
    border: 1px solid rgba(13, 110, 253, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(13, 110, 253, 0.25);
    color: #ffffff;
}

.btn-success {
    background: rgba(25, 135, 84, 0.18);
    border: 1px solid rgba(25, 135, 84, 0.35);
    color: #8bf0c0;
}

.btn-success:hover {
    background: rgba(25, 135, 84, 0.3);
    border: 1px solid rgba(25, 135, 84, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(25, 135, 84, 0.25);
    color: #ffffff;
}

.btn-warning {
    background: rgba(255, 193, 7, 0.18);
    border: 1px solid rgba(255, 193, 7, 0.35);
    color: #ffe08b;
}

.btn-warning:hover {
    background: rgba(255, 193, 7, 0.3);
    border: 1px solid rgba(255, 193, 7, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(255, 193, 7, 0.25);
    color: #ffffff;
}

.btn-sm {
    padding: 8px 16px !important;
    font-size: 0.875rem;
}

/* اسکرول‌بار */
.sidebar .sidebar-content {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .3) transparent;
    padding: 0 !important;
    margin: 0 !important;
    text-align: right !important;
}

.sidebar .sidebar-content::-webkit-scrollbar {
    width: 8px;
}

.sidebar .sidebar-content::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
}

.sidebar .sidebar-content::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.15));
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: all .3s ease;
}

.sidebar .sidebar-content::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.25));
    background-clip: padding-box;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

.sidebar .sidebar-content:hover::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.20));
    background-clip: padding-box;
}

body.bw-mode .sidebar .sidebar-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.4);
}

body.bw-mode .sidebar .sidebar-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.7);
}

/* لوگو */
.sidebar .sidebar-content a.d-block {
    margin-top: 30px !important;
    display: block;
    text-align: right !important;
}

.chart-container {
    background: var(--card);
    border: 1px solid var(--bor);
    border-radius: 20px;
    padding: 1.5rem;
    backdrop-filter: blur(12px);
    box-shadow: var(--sh);
    height: 320px;
    transition: var(--tr)
}

.chart-container:hover {
    transform: translateY(-8px);
    box-shadow: var(--hov)
}

/* === استایل‌های ویجت چت - نسخه کاملاً اصلاح شده === */
#chatFloatingBtn {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 1000;
}

#chatFloatingBtn .btn {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--c), var(--cd));
    border: none;
    color: white;
    transition: all 0.3s ease;
    box-shadow: var(--sh);
}

#chatFloatingBtn .btn:hover {
    transform: scale(1.1);
    box-shadow: var(--hov);
}

#chatBadge {
    animation: pulse 1.5s infinite
}

#chatWidget {
    position: fixed;
    bottom: 30px;
    left: 30px;
    width: 400px;
    height: 500px;
    background: var(--card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--bor);
    border-radius: 15px;
    box-shadow: var(--hov);
    z-index: 1001;
    display: none;
    overflow: hidden;
    flex-direction: column;
}

#chatWidget.active {
    display: flex !important;
    animation: bounceIn .8s ease-out
}

#chatWidget.minimized {
    height: 70px
}

#chatWidgetHeader {
    background: var(--c);
    color: var(--inv);
    padding: 15px;
    border-bottom: 1px solid var(--bor);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#chatWidgetHeader .btn {
    background: transparent;
    border: none;
    color: var(--inv);
    font-size: 1.2rem;
    padding: 0.25rem 0.5rem;
    transition: var(--tr);
}

#chatWidgetHeader .btn:hover {
    background: rgba(0,0,0,0.1);
    border-radius: 5px;
}

.chat-sidebar {
    width: auto !important; /* عرض خودکار بر اساس محتوا */
    min-width: 200px; /* حداقل عرض */
    max-width: 45%; /* حداکثر عرض نسبت به کل ویجت */
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    border-left: 1px solid var(--bor);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chat-main {
    flex: 1; /* بقیه فضا رو بگیره */
    min-width: 0; /* جلوگیری از سرریز */
    display: flex;
    flex-direction: column;
    overflow: hidden;
     width: 65% !important;
}

.chat-messages {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: calc(100% - 120px);
}

.chat-input-area {
    padding: 15px;
    background: rgba(30, 41, 59, 0.8);
    border-top: 1px solid var(--bor);
    display: flex;
    gap: 10px;
    height: 70px;
}

.chat-input-area .form-control {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid var(--bor) !important;
    color: var(--txt) !important;
    border-radius: 10px !important;
}

.chat-input-area .btn {
    border-radius: 10px !important;
}

.total-unread {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ef4444;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

/* === استایل‌های داخلی ویجت چت - اصلاح شده === */
.chat-user-item {
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 12px;
    border-bottom: 1px solid var(--bor);
    color: var(--txt);
    margin: 0;
}

.chat-user-item:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

.chat-user-item.active {
    background: rgba(59, 130, 246, 0.2) !important;
    border-right: 3px solid var(--c);
}

.chat-user-item.has-unread {
    border-right: 3px solid #ef4444;
}

.user-avatar {
    background: var(--c) !important;
    color: white !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.message {
    margin-bottom: 1rem;
    display: flex;
}

.message.sent {
    justify-content: flex-end;
}

.message.received {
    justify-content: flex-start;
}

.message-content {
    max-width: 70%;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    position: relative;
    /* اضافه کردن این خطوط برای حل مشکل متن طولانی */
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0; /* برای کمک به کنترل overflow */
}

.message.sent .message-content {
    background: linear-gradient(135deg, var(--c), var(--cd));
    color: white;
}

.message.received .message-content {
    background: rgba(255, 255, 255, 0.1);
    color: var(--txt);
    border: 1px solid var(--bor);
}

.message-time {
    font-size: 0.7rem;
    opacity: 0.7;
    margin-top: 0.25rem;
    text-align: left;
}

.typing {
    padding: 0.5rem;
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
    font-size: 0.9rem;
}

.online-dot {
    border: 2px solid var(--card);
}

/* اسکرول بار سفارشی برای چت */
.chat-messages::-webkit-scrollbar,
.chat-sidebar::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-track,
.chat-sidebar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb,
.chat-sidebar::-webkit-scrollbar-thumb {
    background: var(--c);
    border-radius: 3px;
    opacity: 0.6;
}

.chat-messages::-webkit-scrollbar-thumb:hover,
.chat-sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--c);
    opacity: 0.8;
}

/* === استایل‌های ضروری برای جستجو === */
#searchUserInput {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid var(--bor) !important;
    color: var(--txt) !important;
    border-radius: 10px !important;
}

#searchUserInput::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

#chatUserList {
    overflow-y: auto;
    flex: 1;
}

#chatUserList .chat-user-item {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 15px;
}
#chatUserList .chat-user-item .user-info {
    flex: 1;
    min-width: 0;
}
#chatUserList .chat-user-item .user-info h6 {
    margin: 0 0 4px 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--txt);
    white-space: normal !important;
    word-break: keep-all !important; /* جلوگیری از شکستن کلمات فارسی */
    line-height: 1.3;
    display: block;
    width: auto !important;
}
#chatUserList .chat-user-item .user-info small,
#chatUserList .chat-user-item .user-info .text-muted {
    white-space: normal !important;
    display: block;
    width: auto !important;
}

/* حذف هرگونه محدودیت عرض */
.chat-user-item .flex-grow-1,
.chat-user-item .min-width-0 {
    min-width: auto !important;
    overflow: visible !important;
}

/* برای نام‌های خیلی بلند */
.chat-user-item .d-flex.align-items-center.gap-3 {
    min-width: max-content !important;
}

/* ریسپانسیو */
@media (max-width: 768px) {
    .chat-sidebar {
        min-width: 200px;
        max-width: 100%;
        position: absolute;
        left: -100%;
        transition: left 0.3s ease;
        z-index: 10;
        width: 280px !important;
    }

    .chat-sidebar.show {
        left: 0;
    }

    .chat-main {
        width: 100%;
    }
}
#chatUserList .chat-user-item:last-child {
    border-bottom: none;
}
/* ====================== اصلاح باکس نوشتن پیام و متن‌های ویجت ====================== */
/* ====================== استایل‌های ویجت چت - نسخه نهایی ====================== */

/* دکمه شناور چت */
#chatFloatingBtn {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 1000;
}

#chatFloatingBtn .btn {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--c), var(--cd));
    border: none;
    color: white;
    transition: all 0.3s ease;
    box-shadow: var(--sh);
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

#chatFloatingBtn .btn:hover {
    transform: scale(1.1);
    box-shadow: var(--hov);
}

#chatFloatingBtn .btn i {
    font-size: 1.5rem;
}

#chatBadge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ef4444;
    color: white;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    animation: pulse 1.5s infinite;
}

/* ویجت چت اصلی */
#chatWidget {
    position: fixed;
    bottom: 30px;
    left: 30px;
    width: 400px;
    height: 550px;
    background: var(--card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--bor);
    border-radius: 20px;
    box-shadow: var(--hov);
    z-index: 1001;
    display: none;
    overflow: hidden;
    flex-direction: column;
    transition: all 0.3s ease;
     width: 500px !important;
}

#chatWidget.active {
    display: flex !important;
    animation: bounceIn 0.6s ease-out;
}

#chatWidget.minimized {
    height: 70px;
}

/* هدر ویجت چت */
#chatWidgetHeader {
    background: linear-gradient(135deg, var(--c), var(--cd));
    color: var(--inv);
    padding: 15px 20px;
    border-bottom: 1px solid var(--bor);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}

#chatWidgetHeader h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

#chatWidgetHeader .btn {
    background: transparent;
    border: none;
    color: var(--inv);
    font-size: 1.2rem;
    padding: 0.25rem 0.5rem;
    transition: var(--tr);
}

#chatWidgetHeader .btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
}

/* ساختار دو قسمتی چت */
.chat-layout {
    display: flex;
    flex: 1;
    overflow: hidden;
    height: calc(100% - 60px);
}

/* سایدبار لیست کاربران */
.chat-sidebar {
    width: 40%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    border-left: 1px solid var(--bor);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* بخش اصلی چت */
.chat-main {
    width: 60%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* جستجو در لیست کاربران */
.chat-search {
    padding: 12px;
    border-bottom: 1px solid var(--bor);
    flex-shrink: 0;
}

#searchUserInput {
    width: 100%;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid var(--bor) !important;
    border-radius: 25px !important;
    color: var(--txt) !important;
    padding: 10px 15px !important;
    font-size: 0.85rem !important;
}

#searchUserInput::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

#searchUserInput:focus {
    outline: none;
    border-color: var(--c) !important;
    background: rgba(255, 255, 255, 0.15) !important;
}

/* لیست کاربران */
#chatUserList {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.chat-user-item {
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 12px;
    border-radius: 12px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid transparent;
}

.chat-user-item:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    transform: translateX(-3px);
}

.chat-user-item.active {
    background: rgba(59, 130, 246, 0.25) !important;
    border-color: rgba(59, 130, 246, 0.5);
}

.chat-user-item.has-unread {
    border-right: 3px solid #ef4444;
}

.user-avatar {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, var(--c), var(--cd)) !important;
    border-radius: 50%;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.user-info {
    flex: 1;
    min-width: 0;
}

.user-info h6 {
    margin: 0 0 4px 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--txt);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-info small {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-unread-badge {
    background: #ef4444;
    color: white;
    border-radius: 50%;
    min-width: 20px;
    height: 20px;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    font-weight: bold;
}

/* بخش نمایش پیام‌ها */
.chat-messages-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* هدر کاربر جاری */
.current-chat-header {
    padding: 12px 15px;
    border-bottom: 1px solid var(--bor);
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.current-chat-header .user-avatar {
    width: 36px;
    height: 36px;
    font-size: 1rem;
}

.current-chat-header h6 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--txt);
}

.online-dot {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    display: inline-block;
    margin-left: 6px;
    border: 1px solid var(--card);
}

/* منطقه پیام‌ها */
.chat-messages {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: rgba(0, 0, 0, 0.1);
}

/* پیام‌ها */
.message {
    display: flex;
    margin-bottom: 4px;
}

.message.sent {
    justify-content: flex-end;
}

.message.received {
    justify-content: flex-start;
}

/* حباب پیام */
.message-content {
    max-width: 75%;
    padding: 10px 16px;
    border-radius: 18px;
    position: relative;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

.message.sent .message-content {
    background: linear-gradient(135deg, var(--c), var(--cd));
    color: white;
    border-bottom-right-radius: 6px;
}

.message.received .message-content {
    background: rgba(255, 255, 255, 0.12);
    color: var(--txt);
    border: 1px solid var(--bor);
    border-bottom-left-radius: 6px;
}

/* اسم فرستنده با دو نقطه */
.message-sender {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 4px;
    display: inline-block;
}

.message-sender::after {
    content: ': ';
    display: inline;
    font-weight: 600;
}

.message.received .message-sender {
    color: rgba(255, 255, 255, 0.9);
}

.message.sent .message-sender {
    color: rgba(255, 255, 255, 0.85);
}

/* متن پیام */
.message-text {
    font-size: 0.9rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

/* زمان پیام */
.message-time {
    font-size: 0.65rem;
    opacity: 0.7;
    margin-top: 4px;
    text-align: left;
}

/* وضعیت تایپ */
.typing {
    padding: 8px 15px;
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

.typing::before {
    content: '';
    width: 20px;
    height: 20px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><circle cx="12" cy="12" r="2"><animate attributeName="r" values="2;4;2" dur="0.8s" repeatCount="indefinite" begin="0s"/></circle><circle cx="12" cy="12" r="2"><animate attributeName="r" values="2;4;2" dur="0.8s" repeatCount="indefinite" begin="0.2s"/></circle><circle cx="12" cy="12" r="2"><animate attributeName="r" values="2;4;2" dur="0.8s" repeatCount="indefinite" begin="0.4s"/></circle></svg>') no-repeat center;
    background-size: contain;
    opacity: 0.8;
}

/* باکس نوشتن پیام */
#chatSendForm {
    padding: 12px 15px;
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid var(--bor);
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
}

#chatMessageInput {
    flex: 1;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 25px;
    color: white;
    font-size: 0.9rem;
    padding: 12px 18px;
    font-family: Vazir, sans-serif;
    transition: all 0.3s ease;
}

#chatMessageInput:focus {
    outline: none;
    border-color: var(--c);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

#chatMessageInput::placeholder {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
}

#widgetAttachBtn {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 40px !important;
    padding: 14px 20px !important;
    color: white !important;
    cursor: pointer !important;
}

#widgetAttachBtn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

#chatSendForm button[type="submit"] {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border: none;
    border-radius: 25px;
    padding: 10px 24px;
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.3s ease;
    cursor: pointer;
}

#chatSendForm button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4);
}

/* اسکرول بار */
.chat-messages::-webkit-scrollbar,
#chatUserList::-webkit-scrollbar {
    width: 5px;
}

.chat-messages::-webkit-scrollbar-track,
#chatUserList::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb,
#chatUserList::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover,
#chatUserList::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* رسپانسیو */
@media (max-width: 768px) {
    #chatWidget {
        width: calc(100% - 30px);
        left: 15px;
        bottom: 15px;
        height: 80vh;
        max-height: 600px;
    }

    .chat-sidebar {
        width: 100%;
        position: absolute;
        left: -100%;
        transition: left 0.3s ease;
        z-index: 10;
        background: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(20px);
    }

    .chat-sidebar.show {
        left: 0;
    }

    .chat-main {
        width: 100%;
    }

    .message-content {
        max-width: 85%;
    }
}

@media (max-width: 480px) {
    #chatFloatingBtn .btn {
        width: 50px;
        height: 50px;
    }

    #chatFloatingBtn .btn i {
        font-size: 1.3rem;
    }

    .message-content {
        max-width: 90%;
        padding: 8px 14px;
    }

    .message-text {
        font-size: 0.85rem;
    }
}

/* تم روشن */
body.light-theme .chat-messages {
    background: rgba(0, 0, 0, 0.03);
}

body.light-theme #chatMessageInput {
    color: #1e293b;
    background: rgba(0, 0, 0, 0.05);
}

body.light-theme .message.received .message-content {
    background: rgba(0, 0, 0, 0.06);
    color: #1e293b;
}

body.light-theme .chat-user-item {
    background: rgba(0, 0, 0, 0.03);
}

body.light-theme .chat-user-item:hover {
    background: rgba(0, 0, 0, 0.08);
}

/* حالت سیاه و سفید */
body.bw-mode .chat-messages {
    background: rgba(0, 0, 0, 0.2);
}

body.bw-mode .message.received .message-content {
    background: rgba(50, 50, 50, 0.5);
}

/* انیمیشن‌ها */
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.1);
    }
}
/* دکمه پیوست فایل */
#widgetAttachBtn {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 20px !important;
    padding: 10px 12px !important;
    color: white !important;
    cursor: pointer !important;
}

/* متن پیام‌ها - بزرگتر و خواناتر */
.message-text {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
}

.message-time {
    font-size: 0.65rem !important;
    margin-top: 6px !important;
}

.message-sender {
    font-size: 0.75rem !important;
    margin-bottom: 5px !important;
}

/* حباب پیام‌ها - کمی بزرگتر */
.message-content {
    padding: 10px 16px !important;
}

/* نام کاربر در لیست - خواناتر */
.chat-user-item h6 {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
}

.chat-user-item .text-muted {
    font-size: 0.7rem !important;
}

/* جستجو */
#searchUserInput {
    font-size: 0.85rem !important;
    padding: 10px 12px !important;
}

/* متن تایپ کردن */
.typing {
    font-size: 0.75rem !important;
    padding: 8px 15px !important;
}

/* اسکرول بهتر */
.chat-messages {
    padding: 15px !important;
    gap: 12px !important;
}

/* تم روشن - تنظیمات متن */
body.light-theme #chatMessageInput {
    color: #1e293b !important;
}

body.light-theme #chatMessageInput::placeholder {
    color: rgba(0, 0, 0, 0.5) !important;
}

body.light-theme .message-text {
    color: inherit !important;
}

.preset-color {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: var(--tr);
}

.preset-color:hover {
    transform: scale(1.1);
}

.preset-color.active {
    border-color: #fff;
    transform: scale(1.2);
}

/* سایدبار اصلی */
nav.sidebar {
    width: 240px;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    flex-direction: column;
    box-shadow: var(--sh);
    border-left: 1px solid var(--bor)
}

nav.sidebar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--sb);
    backdrop-filter: var(--sb-blur);
    z-index: -1
}

nav.sidebar .sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem 1rem
}

.sidebar .nav-link {
    padding: .7rem 1rem;
    border-radius: 12px;
    transition: var(--tr);
    color: var(--txt)
}

.sidebar .nav-link:hover, .sidebar .nav-link.active {
    color: #fff !important;
    transform: translateX(-8px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, .4);
    background: rgba(255, 255, 255, .15)
}

main.content {
    margin-right: 240px;
    padding: 2rem
}

/* استایل‌های فرم‌ها */
.form-container {
    max-width: 800px;
    margin: 0 auto;
    background: var(--card);
    border: 1px solid var(--bor);
    border-radius: 20px;
    padding: 2rem;
    backdrop-filter: blur(12px);
    box-shadow: var(--sh);
    transition: var(--tr);
}

.form-container:hover {
    transform: translateY(-5px);
    box-shadow: var(--hov);
}

.form-control, .form-select {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid var(--bor) !important;
    border-radius: 12px !important;
    color: var(--txt) !important;
    padding: 0.75rem 1rem !important;
    transition: var(--tr);
}

.form-control:focus, .form-select:focus {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: var(--c) !important;
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25) !important;
    color: var(--txt) !important;
}

.form-label {
    color: var(--txt);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.form-text {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.875rem;
}

.alert {
    border-radius: 16px;
    border: 1px solid var(--bor);
    backdrop-filter: blur(10px);
}

.alert-success {
    background: rgba(25, 135, 84, 0.2) !important;
    color: #75b798 !important;
    border-color: rgba(25, 135, 84, 0.3) !important;
}

.alert-danger {
    background: rgba(220, 53, 69, 0.2) !important;
    color: #ea868f !important;
    border-color: rgba(220, 53, 69, 0.3) !important;
}

.qr-img {
    max-width: 280px;
    margin: 20px auto;
    display: block;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    border: 2px solid var(--bor);
}

/* استایل‌های مخصوص کمبو باکس */
.form-select {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid var(--bor) !important;
    border-radius: 12px !important;
    color: var(--txt) !important;
    padding: 0.75rem 1rem !important;
    transition: var(--tr);
    backdrop-filter: blur(10px);
}

/* استایل placeholder */
.form-control::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
    font-family: Vazir, sans-serif !important;
}

/* برای فیلد تلفن */
#phone {
    font-family: Vazir, sans-serif !important;
    direction: ltr !important;
    text-align: left !important;
}

/* رسپانسیو */
@media (max-width: 768px) {
    nav.sidebar {
        right: -100%;
        width: 280px;
        transition: right .4s ease;
        z-index: 1040
    }

    nav.sidebar.active {
        right: 0
    }

    main.content {
        margin-right: 0 !important;
        padding: 1rem
    }

    .flip-card:hover {
        transform: translateY(-8px) scale(1.02)
    }

    .quick-actions-box {
        padding: 1rem 1.5rem;
        font-size: 1rem
    }

    .btn-back {
        padding: .6rem 1rem;
        font-size: .9rem
    }



    #chatWidget {
        width: 95%;
        left: 2.5%;
        bottom: 20px;
        height: 80vh;
    }

    .chat-sidebar {
        width: 100%;
        border-left: none;
        border-bottom: 1px solid var(--bor);
    }

    .chat-main {
        width: 100%;
    }



    .form-container {
        margin: 1rem;
        padding: 1.5rem;
    }

    .content {
        padding: 1rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important
    }
}


/* ====================== دکمه و پنل تم — نسخه نهایی و تضمینی ====================== */
/* ==== منوی کاربری دایره‌ای — دقیقاً مثل دکمه تم (نسخه نهایی و بدون تداخل) ==== */
#topLeftUserMenu {
    position: fixed !important;
    top: 22px !important;
    left: 22px !important;
    z-index: 1100 !important;
}

.user-circle-btn {
    width: 56px !important;
    height: 56px !important;
    background: linear-gradient(135deg,
    hsla(var(--h), var(--s), calc(var(--l) + 15%), 0.45),
    hsla(var(--h), var(--s), calc(var(--l) - 10%), 0.55)
    ) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    border: 2px solid hsla(var(--h), var(--s), calc(var(--l) + 30%), 0.5) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6) !important;
    transition: all 0.4s ease !important;
    position: relative;
    overflow: hidden;
}

.user-circle-btn:hover {
    transform: translateY(-4px) scale(1.08) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.7),
    0 0 40px hsla(var(--h), var(--s), 70%, 0.45) !important;
}

.user-avatar-circle {
    width: 52px;
    height: 52px;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.6rem;
    border: 2px solid rgba(255,255,255,0.3);
}

.chevron-small {
    position: absolute;
    bottom: 4px;
    right: 6px;
    font-size: 0.75rem;
    background: rgba(0,0,0,0.4);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s ease;
}

.chevron-small.rotated {
    transform: rotate(180deg);
}

/* وقتی منو بازه — افکت هاله */
.user-circle-btn.active {
    box-shadow: 0 0 35px hsla(var(--h), var(--s), 70%, 0.65) !important;
    transform: scale(1.05);
}

/* دراپ‌داون منو */
#userDropdown {
    display: none;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    pointer-events: none;
}

#userDropdown.show {
    display: block !important;
    opacity: 1 !important;
    transform: translateY(8px) !important;
    pointer-events: all;
}

/* ====================== دکمه تم + پنل تم — نسخه نهایی و ۱۰۰٪ بدون تداخل ====================== */
#themeToggleBtn {
    position: fixed !important;
    top: 22px !important;
    right: 280px !important;           /* بالا راست — دقیقاً مثل منوی کاربری */
    z-index: 1100 !important;
    width: 56px !important;
    height: 56px !important;
    background: linear-gradient(135deg,
    hsla(var(--h), var(--s), calc(var(--l) + 15%), 0.45),
    hsla(var(--h), var(--s), calc(var(--l) - 10%), 0.55)
    ) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    border: 2px solid hsla(var(--h), var(--s), calc(var(--l) + 30%), 0.5) !important;
    border-radius: 50% !important;
    color: white !important;
    font-size: 1.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6) !important;
    transition: all 0.4s ease !important;
    cursor: pointer;
}

#themeToggleBtn:hover {
    transform: translateY(-4px) scale(1.08) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.7),
    0 0 40px hsla(var(--h), var(--s), 70%, 0.45) !important;
}

#themeToggleBtn:active {
    transform: translateY(-2px) scale(1.05);
}

/* پنل تم — دقیقاً مثل قبل ولی با z-index بالاتر */
#themePanel {
    position: fixed !important;
    top: 90px !important;
    right: 22px !important;
    z-index: 1099 !important;           /* فقط یکم پایین‌تر از دکمه‌ها */
    width: 340px !important;
    background: linear-gradient(135deg,
    hsla(var(--h), var(--s), calc(var(--l) + 10%), 0.42),
    hsla(var(--h), var(--s), calc(var(--l) - 10%), 0.52)
    ) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    border: 2px solid hsla(var(--h), var(--s), calc(var(--l) + 30%), 0.5) !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7) !important;
    padding: 1.8rem 1.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

#themePanel.open {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* وقتی تم بازه، یه هاله هم بده */
#themeToggleBtn.active,
#themeToggleBtn[aria-expanded="true"] {
    box-shadow: 0 0 35px hsla(var(--h), var(--s), 70%, 0.65) !important;
    transform: scale(1.05);
}

/* ====================== منوی کاربری دایره‌ای — نسخه نهایی و ۱۰۰٪ درست ====================== */
#topLeftUserMenu {
    position: fixed !important;
    top: 22px !important;
    left: 22px !important;
    z-index: 1100 !important;
}

#userMenuToggle {
    cursor: pointer;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg,
    hsla(var(--h), var(--s), calc(var(--l) + 15%), 0.45),
    hsla(var(--h), var(--s), calc(var(--l) - 10%), 0.55)
    );
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 2px solid hsla(var(--h), var(--s), calc(var(--l) + 30%), 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
    transition: all 0.4s ease;
    position: relative;
}

#userMenuToggle:hover {
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 20px 50px rgba(0,0,0,0.7), 0 0 40px hsla(var(--h), var(--s), 70%, 0.5);
}

.user-avatar-circle {
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.8rem;
    border: 2px solid rgba(255,255,255,0.3);
    backdrop-filter: blur(10px);
}

.chevron-small {
    position: absolute;
    bottom: 4px;
    right: 6px;
    font-size: 0.75rem;
    background: rgba(0,0,0,0.4);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s ease;
}

.chevron-small.rotated {
    transform: rotate(180deg);
}

#userMenuToggle.active {
    box-shadow: 0 0 40px hsla(var(--h), var(--s), 70%, 0.7);
    transform: scale(1.06);
}

/* منوی دراپ‌داون — دقیقاً زیر دکمه و چسبیده به چپ */
#userDropdown {
    position: fixed !important;
    top: 90px !important;
    left: 22px !important;
    width: 320px !important;
    background: linear-gradient(135deg,
    hsla(var(--h), var(--s), calc(var(--l) + 10%), 0.45),
    hsla(var(--h), var(--s), calc(var(--l) - 10%), 0.55)
    ) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    border: 2px solid hsla(var(--h), var(--s), calc(var(--l) + 30%), 0.5) !important;
    border-radius: 24px !important;
    box-shadow: 0 25px 70px rgba(0,0,0,0.7) !important;
    padding: 1.8rem 1.5rem !important;
    z-index: 1099 !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    pointer-events: none;
}

#userDropdown.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: all !important;
}

/* ====================== استایل‌های مودال تنظیمات کارت‌ها ====================== */

/* استایل برای تنظیمات کارت‌ها */
.card-toggle-item {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s;
}

.card-toggle-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.card-toggle-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .toggle-slider {
    background-color: #3b82f6;
}

input:checked + .toggle-slider:before {
    transform: translateX(24px);
}

/* استایل مودال تنظیمات کارت‌ها */
#cardSettingsModal .modal-dialog {
    max-width: 500px;
}

#cardSettingsModal .modal-content {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
}

#cardSettingsModal .modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.5rem;
}

#cardSettingsModal .modal-body {
    max-height: 60vh;
    overflow-y: auto;
    padding: 1.5rem;
}

#cardSettingsModal .modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem 1.5rem;
}

.card-settings-category {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.card-settings-category h6 {
    color: var(--txt);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* استایل برای دکمه تنظیمات کارت در منو */
#cardSettingsBtn {
    position: relative;
}

#cardSettingsBtn::after {
    content: 'جدید';
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: #10b981;
    color: white;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
}

/* آمار کارت‌ها */
.card-stats {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.category-toggle-btn {
    font-size: 0.8rem;
    padding: 0.25rem 0.75rem;
    margin-top: 0.5rem;
}

/* استایل‌های سفارشی برای کارت‌ها */
.card-icon-large {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.card-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.card-count {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.card-description {
    font-size: 0.875rem;
    opacity: 0.8;
    margin-bottom: 1rem;
}

/* انیمیشن‌های اضافی برای کارت‌ها */
@keyframes cardFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.flip-card:hover .flip-card-front i {
    animation: cardFloat 2s ease-in-out infinite;
}

/* استایل برای کارت‌های غیرفعال */
.card-disabled {
    opacity: 0.5;
    filter: grayscale(50%);
    pointer-events: none;
}

/* استایل برای دسته‌بندی کارت‌ها در مودال */
.category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.category-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.category-buttons {
    display: flex;
    gap: 0.5rem;
}

/* استایل برای وضعیت کارت‌ها */
.card-status {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    margin-left: 0.5rem;
}

.card-status.enabled {
    background-color: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.card-status.disabled {
    background-color: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* استایل برای توضیحات کارت‌ها در مودال */
.card-description-small {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 0.25rem;
}

/* استایل برای آمار کارت‌ها */
.stats-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-weight: 600;
}

.stats-badge-success {
    background-color: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.stats-badge-secondary {
    background-color: rgba(156, 163, 175, 0.2);
    color: #9ca3af;
}

.stats-badge-info {
    background-color: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

/* استایل برای دکمه‌های کنترلی */
.control-button {
    transition: all 0.2s ease;
}

.control-button:hover {
    transform: scale(1.05);
}

.control-button:active {
    transform: scale(0.95);
}

/* استایل برای اسکرول‌بار در مودال */
#cardSettingsModal .modal-body::-webkit-scrollbar {
    width: 6px;
}

#cardSettingsModal .modal-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

#cardSettingsModal .modal-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

#cardSettingsModal .modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* استایل برای کارت‌های داشبورد با تنظیمات کاربر */
.dashboard-card-custom {
    transition: all 0.3s ease;
}

.dashboard-card-custom:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

/* استایل برای نمایش کارت‌های فیلتر شده */
.filtered-cards-count {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 0.5rem;
    text-align: center;
}

/* استایل برای پیام خالی */
.empty-cards-message {
    text-align: center;
    padding: 2rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

/* استایل برای کارت‌های بر اساس نقش */
.role-badge {
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
    border-radius: 8px;
    margin-left: 0.25rem;
    background-color: rgba(99, 102, 241, 0.2);
    color: #6366f1;
}

/* استایل برای کارت‌های پیش‌فرض */
.default-card-indicator {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

/* انیمیشن برای تغییر وضعیت کارت‌ها */
@keyframes cardToggle {
    0% {
        opacity: 0.5;
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.card-toggle-item.toggled {
    animation: cardToggle 0.3s ease-out;
}

/* استایل برای گزینه‌های ذخیره و بازنشانی */
.modal-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* استایل برای اطلاعات کارت در مودال */
.card-info-icon {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    margin-left: 0.25rem;
    cursor: help;
}

/* استایل برای کارت‌های دسته‌بندی شده */
.category-card-list {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

/* استایل برای هدر مودال */
.modal-title-with-icon {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* استایل برای فوتر مودال */
.modal-footer-buttons {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* رسپانسیو برای مودال تنظیمات */
@media (max-width: 576px) {
    #cardSettingsModal .modal-dialog {
        margin: 0.5rem;
    }

    #cardSettingsModal .modal-content {
        border-radius: 15px;
    }

    .category-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .category-buttons {
        width: 100%;
        justify-content: space-between;
    }

    .modal-footer-buttons {
        flex-direction: column;
        gap: 0.5rem;
    }

    .modal-footer-buttons .btn {
        width: 100%;
    }
}

/* استایل برای حالت تاریک مودال */
body.bw-mode #cardSettingsModal .modal-content {
    background: linear-gradient(145deg, rgba(30, 30, 30, 0.95), rgba(15, 15, 15, 0.95));
}

body.bw-mode .card-settings-category {
    background: rgba(255, 255, 255, 0.03);
}

body.bw-mode .card-toggle-item:hover {
    background: rgba(255, 255, 255, 0.02);
}

/* استایل برای کارت‌های با دسترسی محدود */
.restricted-card {
    opacity: 0.7;
    position: relative;
}

.restricted-card::after {
    content: 'محدود';
    position: absolute;
    top: 5px;
    left: 5px;
    font-size: 0.6rem;
    padding: 0.1rem 0.3rem;
    background-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
    border-radius: 4px;
}

/* استایل برای کارت‌های پیشنهادی */
.suggested-card {
    border: 1px solid rgba(16, 185, 129, 0.3);
}

/* استایل برای کارت‌های پرکاربرد */
.popular-card {
    position: relative;
}

.popular-card::before {
    content: 'پرکاربرد';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.6rem;
    padding: 0.1rem 0.5rem;
    background-color: rgba(59, 130, 246, 0.3);
    color: #3b82f6;
    border-radius: 10px;
    white-space: nowrap;
}
/* استایل برای منوی collapsible */
.cursor-pointer {
    cursor: pointer;
}

.transition-all {
    transition: all 0.3s ease;
}

/* چرخش آیکون chevron */
.collapsed .bi-chevron-down {
    transform: rotate(-90deg);
}

/* استایل برای آیکون chevron */
#coachMenuChevron {
    transition: transform 0.3s ease;
    font-size: 0.9rem;
}

/* حذف منوی مدیریت مربی-باشگاه از بخش اصلی (اگر قبلا وجود دارد) */
.nav-item:has(a[href="/admin/coach-clubs"]) {
    display: none;
}

/* استایل برای بخش‌های collapsible */
#coachMenuCollapse,
#coachClubManagementCollapse {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    margin: 0 0.5rem;
    padding: 0.5rem 0;
}

/* استایل برای هدر بخش‌ها */
#coachMenuCollapse + div h6,
.coach-management-section h6 {
    font-size: 0.95rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    border: none !important;
}

/* استایل برای آیتم‌های منوی مربی */
#coachMenuCollapse .nav-link,
#coachClubManagementCollapse .nav-link {
    padding: 0.6rem 1rem;
    border-radius: 8px;
    margin: 0.1rem 0.3rem;
    transition: all 0.2s;
}

#coachMenuCollapse .nav-link:hover,
#coachClubManagementCollapse .nav-link:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(-3px);
}

/* استایل برای badge در هدر */
#coachMenuCollapse + div h6 .badge {
    font-size: 0.6rem;
    padding: 0.2rem 0.5rem;
}
/* در بخش استایل‌ها این موارد را اضافه کنید */

/* آیتم‌های منوی اصلی - مستطیل با گوشه‌های گرد */
.sidebar .nav-link {
    position: relative;
    display: block;
    width: 90% !important;  /* کمی عرض بیشتر */
    margin: 8px auto !important;
    padding: 12px 20px !important;
    font-size: 0.95rem;
    color: #ffffff !important;
    transition: all 0.3s ease;
    overflow: hidden;
    z-index: 0;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px !important;  /* گوشه‌های گرد متوسط */
    text-align: right;
    font-weight: 500;
}

/* آیتم‌های منوی مربی - بیضی */
.coach-menu-items .nav-link {
    padding: 10px 20px !important;
    border-radius: 50px !important;  /* حالت بیضی */
    margin: 6px auto !important;
    width: 85% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* آیتم‌های زیرمجموعه مربی - مستطیل با گوشه‌های کوچک */
.coach-sub-item {
    padding: 8px 20px !important;
    border-radius: 10px !important;  /* گوشه‌های کوچک */
    margin: 4px 15px !important;
    width: calc(100% - 30px) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-right: 3px solid rgba(59, 130, 246, 0.5) !important;
}

/* هدر منوی مربی - حالت خاص */
.coach-menu-header {
    border-radius: 50px !important;
    margin: 10px 5px !important;
    padding: 12px 20px !important;
    background: linear-gradient(135deg,
    rgba(59, 130, 246, 0.2),
    rgba(16, 185, 129, 0.15)
    ) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}
/* اضافه کردن به فایل dashboard.css */
/* ویجت نوتیفیکیشن شناور - مشابه منوی پروفایل */
#topRightNotificationMenu {
    position: fixed !important;
    top: 22px !important;
    left: 90px !important; /* فاصله از منوی کاربری */
    z-index: 1100 !important;
}

.notification-circle-btn {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cl), var(--cd)) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    border: 2px solid hsla(var(--h), var(--s), calc(var(--l) + 25%), 0.5) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6) !important;
    transition: all 0.4s ease !important;
    cursor: pointer;
}


.notification-circle-btn:hover {
    transform: translateY(-4px) scale(1.08) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7),
    0 0 40px hsla(var(--h), var(--s), 70%, 0.45) !important;
}

.notification-avatar-circle {
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.6rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    position: relative;
}

.notification-badge { position: absolute; top: -6px; /* بالای دکمه */ right: -6px; /* سمت راست دکمه */ background: #ef4444; color: #fff; border-radius: 50%; width: 22px; height: 22px; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; font-weight: bold; box-shadow: 0 2px 6px rgba(0,0,0,0.3); }

/* افکت زنگ خوردن برای نوتیفیکیشن جدید */
@keyframes ring {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-15deg); }
    75% { transform: rotate(15deg); }
}

.notification-circle-btn.ringing .notification-avatar-circle i {
    animation: ring 0.5s ease-in-out 3;
    color: #fbbf24;
}

/* دراپ‌داون نوتیفیکیشن */
#notificationDropdown {
    position: fixed !important;
    top: 90px !important;
    left: 22px !important;
    width: 400px !important;
    max-height: 500px !important;
    background: linear-gradient(135deg,
    hsla(var(--h), var(--s), calc(var(--l) + 10%), 0.45),
    hsla(var(--h), var(--s), calc(var(--l) - 10%), 0.55)
    ) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    border: 2px solid hsla(var(--h), var(--s), calc(var(--l) + 30%), 0.5) !important;
    border-radius: 24px !important;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.7) !important;
    z-index: 1099 !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    pointer-events: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#notificationDropdown.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: all !important;
}

/* هدر دراپ‌داون */
.notification-header {
    padding: 1.25rem !important;
    border-bottom: 1px solid hsla(var(--h), var(--s), calc(var(--l) + 30%), 0.3) !important;
    background: rgba(0, 0, 0, 0.2) !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notification-header h5 {
    margin: 0 !important;
    font-size: 1.1rem !important;
    color: white !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.notification-actions {
    display: flex;
    gap: 0.5rem;
}

.notification-actions .btn {
    padding: 0.35rem 0.75rem !important;
    font-size: 0.8rem !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    transition: all 0.3s ease !important;
}

.notification-actions .btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-2px);
}

/* بدنه دراپ‌داون */
.notification-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem !important;
    max-height: 350px !important;
}

/* آیتم‌های نوتیفیکیشن */
.notification-item {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 16px !important;
    padding: 1rem !important;
    margin-bottom: 0.75rem !important;
    transition: all 0.3s ease !important;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    position: relative;
}

.notification-item:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.notification-item.unread {
    border-right: 4px solid #3b82f6 !important;
    background: rgba(59, 130, 246, 0.15) !important;
}

.notification-item.unread::before {
    content: '';
    position: absolute;
    right: -2px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #3b82f6;
    border-radius: 50%;
    animation: blink 1.5s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.notification-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-content h6 {
    margin: 0 0 0.25rem 0 !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: white !important;
}

.notification-content p {
    margin: 0 0 0.5rem 0 !important;
    font-size: 0.85rem !important;
    color: rgba(255, 255, 255, 0.8) !important;
    line-height: 1.4;
}

.notification-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
}

.notification-meta small {
    font-size: 0.75rem !important;
    color: rgba(255, 255, 255, 0.6) !important;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.priority-badge {
    font-size: 0.7rem !important;
    padding: 0.2rem 0.5rem !important;
    border-radius: 20px !important;
    font-weight: 500 !important;
}

.priority-badge.low {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #10b981 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.priority-badge.medium {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #f59e0b !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

.priority-badge.high {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

/* فوتر دراپ‌داون */
.notification-footer {
    padding: 1rem 1.25rem !important;
    border-top: 1px solid hsla(var(--h), var(--s), calc(var(--l) + 30%), 0.3) !important;
    background: rgba(0, 0, 0, 0.2) !important;
}

.notification-footer .btn-link {
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none !important;
    padding: 0.25rem 0.5rem !important;
    transition: all 0.3s ease !important;
}

.notification-footer .btn-link:hover {
    color: white !important;
    transform: translateX(-5px);
}

/* اسکرول‌بار سفارشی */
.notification-body::-webkit-scrollbar {
    width: 6px;
}

.notification-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.notification-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.notification-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* رسپانسیو */
@media (max-width: 768px) {
    #topRightNotificationMenu {
        right: 90px !important;
    }

    #notificationDropdown {
        width: 350px !important;
        right: 10px !important;
    }
}

@media (max-width: 576px) {
    #topRightNotificationMenu {
        right: 70px !important;
    }

    .notification-circle-btn {
        width: 48px !important;
        height: 48px !important;
    }

    .notification-avatar-circle {
        width: 44px;
        height: 44px;
        font-size: 1.3rem;
    }

    #notificationDropdown {
        width: 320px !important;
        right: 50% !important;
        transform: translateX(50%) translateY(-20px) !important;
    }

    #notificationDropdown.show {
        transform: translateX(50%) translateY(0) !important;
    }
}

/* استایل‌های نوتیفیکیشن toast */
#notificationToasts {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.notification-toast {
    background: linear-gradient(135deg,
    hsla(var(--h), var(--s), calc(var(--l) + 10%), 0.45),
    hsla(var(--h), var(--s), calc(var(--l) - 10%), 0.55)
    );
    backdrop-filter: blur(20px);
    border: 2px solid hsla(var(--h), var(--s), calc(var(--l) + 30%), 0.5);
    border-radius: 16px;
    padding: 1rem;
    width: 300px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    transform: translateX(-100px);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    cursor: pointer;
}

.notification-toast.show {
    transform: translateX(0);
    opacity: 1;
}

.toast-content {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.toast-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.toast-body {
    flex: 1;
}

.toast-body h6 {
    margin: 0 0 0.25rem 0;
    font-size: 0.9rem;
    color: white;
}

.toast-body p {
    margin: 0 0 0.25rem 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.9);
}

.toast-body small {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
}

.toast-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s;
}

.toast-close:hover {
    color: white;
}
/* Badge‌های راهنما به صورت مستطیل با گوشه‌های گرد */
.sidebar .nav-link .badge,
.sidebar .nav-item .badge,
.navbar .dropdown-toggle .badge {
    display: inline-block !important;
    padding: 0.25rem 0.5rem !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    vertical-align: baseline !important;
    border-radius: 8px !important; /* گوشه‌های گرد متوسط */
    color: #ffffff !important;
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    margin-right: 0.5rem !important;
    min-width: 22px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Badge برای منوی ادمین */
.nav-link[href*="admin"] .badge,
.nav-link[href*="dashboard"] .badge {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
}

/* Badge برای منوی مربی */
.nav-link[href*="coach"] .badge,
#coachMenuCollapse .nav-link .badge {
    background: linear-gradient(135deg, #10b981, #059669) !important;
}

/* Badge برای منوی مدیر سیستم */
.nav-link[href*="system"] .badge,
.nav-link[href*="super"] .badge {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
}

/* Badge برای منوهای جدید */
.nav-link .badge.bg-success {
    background: linear-gradient(135deg, #10b981, #059669) !important;
}

.nav-link .badge.bg-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: #000 !important;
}

.nav-link .badge.bg-info {
    background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
}

.nav-link .badge.bg-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
}

/* انیمیشن برای Badge‌ها */
.sidebar .nav-link .badge {
    animation: badgePulse 2s infinite;
}

@keyframes badgePulse {
    0%, 100% {
        transform: translateY(-50%) scale(1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
    50% {
        transform: translateY(-50%) scale(1.05);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
}

/* Badge در هدر منوهای collapsible */
.coach-menu-header .badge,
.nav-link[data-bs-toggle="collapse"] .badge {
    position: static !important;
    transform: none !important;
    margin-left: auto !important;
    margin-right: 0.5rem !important;
    font-size: 0.65rem !important;
    padding: 0.2rem 0.4rem !important;
}

/* استایل برای Badge در منوی کاربری */
#userDropdown .badge,
.dropdown-menu .badge {
    position: static !important;
    transform: none !important;
    margin-left: 0.5rem !important;
    font-size: 0.65rem !important;
    padding: 0.15rem 0.35rem !important;
    border-radius: 6px !important;
}

/* Badge برای وضعیت آنلاین/آفلاین */
.badge.bg-success[title*="آنلاین"],
.badge.bg-success[title*="online"] {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    width: 10px !important;
    height: 10px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 2px solid #1e293b !important;
}

/* Badge شمارش‌ها در منوها */
.badge-count {
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.5px;
}

/* استایل برای Badge‌های بزرگتر (اعداد دو رقمی) */
.sidebar .nav-link .badge[data-count="2digit"] {
    min-width: 28px !important;
    padding: 0.25rem 0.35rem !important;
    font-size: 0.65rem !important;
}

/* استایل برای Badge‌های با متن طولانی */
.sidebar .nav-link .badge:not(.badge-count) {
    white-space: normal !important;
    line-height: 1.2 !important;
    padding: 0.2rem 0.4rem !important;
    font-size: 0.6rem !important;
    max-width: 60px !important;
    text-align: center !important;
}

/* رسپانسیو برای Badge‌ها */
@media (max-width: 768px) {
    .sidebar .nav-link .badge {
        font-size: 0.65rem !important;
        padding: 0.2rem 0.4rem !important;
        min-width: 20px !important;
        height: 18px !important;
        left: 10px !important;
    }

    .coach-menu-header .badge,
    .nav-link[data-bs-toggle="collapse"] .badge {
        font-size: 0.6rem !important;
        padding: 0.15rem 0.3rem !important;
    }
}

/* استایل برای Badge در حالت تاریک */
body.bw-mode .sidebar .nav-link .badge {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* استایل برای Badge در hover */
.sidebar .nav-link:hover .badge {
    transform: translateY(-50%) scale(1.1) !important;
    transition: transform 0.2s ease !important;
}

/* استایل مخصوص برای منوی نوتیفیکیشن */
#notificationDropdown .badge,
.notification-badge {
    border-radius: 10px !important;
    font-size: 0.75rem !important;
    padding: 0.25rem 0.5rem !important;
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    border: 2px solid #1e293b !important;
}

/* استایل برای Badge در dropdown منوها */
.dropdown-item .badge {
    position: static !important;
    transform: none !important;
    float: left !important;
    margin-right: 0.5rem !important;
    margin-top: 0.15rem !important;
}
/* ====================== رفع مشکل موبایل - ویجت‌ها ====================== */
@media (max-width: 768px) {
    /* بازنشانی همه ویجت‌های fixed */
    #topLeftUserMenu,
    #topRightNotificationMenu,
    #themeToggleBtn,
    #themePanel,
    #userDropdown,
    #notificationDropdown,
    #chatFloatingBtn,
    #chatWidget {
        position: fixed !important;
        z-index: 1100 !important;
    }

    /* چیدمان عمودی ویجت‌ها در سمت راست */
#themeToggleBtn {
    position: fixed !important;
    top: 22px !important;
    left: 160px !important; /* فاصله از اعلان‌ها */
    right: auto !important;
    z-index: 1100 !important;
}

    #topRightNotificationMenu {
        top: 15px !important;
        right: 85px !important;
        left: auto !important;
    }

    /* منوی کاربری در سمت چپ */
    #topLeftUserMenu {
        top: 15px !important;
        left: 15px !important;
        right: auto !important;
    }

    /* پنل‌ها و دراپ‌داون‌ها */
    #themePanel {
        top: 85px !important;
        right: 15px !important;
        left: auto !important;
        width: 300px !important;
        max-width: calc(100% - 30px) !important;
    }

    #userDropdown {
        top: 85px !important;
        left: 15px !important;
        right: auto !important;
        width: 300px !important;
        max-width: calc(100% - 30px) !important;
    }

    #notificationDropdown {
        top: 85px !important;
        right: 15px !important;
        left: auto !important;
        width: 320px !important;
        max-width: calc(100% - 30px) !important;
        max-height: 80vh !important;
    }

    /* ویجت چت */
   #chatFloatingBtn {
       position: fixed !important;
       bottom: 30px !important;
       left: 30px !important;
       z-index: 1000 !important;
   }
   @media (max-width: 768px) {
       #helpMainFloatingBtn {
           bottom: 15px !important;
           left: 80px !important;  /* کنار دکمه چت */
           width: 50px !important;
           height: 50px !important;
       }
   }
    #chatFloatingBtn .btn {
        width: 50px !important;
        height: 50px !important;
    }

    #chatWidget {
        bottom: 15px !important;
        left: 15px !important;
        width: calc(100% - 30px) !important;
        height: 80vh !important;
        max-height: 600px !important;
    }

    /* تنظیم اندازه دکمه‌ها */
    .user-circle-btn,
    .notification-circle-btn,
    #themeToggleBtn {
        width: 48px !important;
        height: 48px !important;
    }

    .user-avatar-circle,
    .notification-avatar-circle {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.4rem !important;
    }

    .notification-badge {
        width: 20px !important;
        height: 20px !important;
        font-size: 0.7rem !important;
        top: -4px !important;
        right: -4px !important;
    }

    /* محتوای دراپ‌داون‌ها */
    .notification-body {
        max-height: 300px !important;
    }

    .notification-item {
        padding: 0.75rem !important;
    }

    .notification-content h6 {
        font-size: 0.85rem !important;
    }

    .notification-content p {
        font-size: 0.75rem !important;
    }

    /* تویست‌های نوتیفیکیشن */
    #notificationToasts {
        left: 10px !important;
        bottom: 10px !important;
    }

    .notification-toast {
        width: 280px !important;
        padding: 0.75rem !important;
    }
}

/* برای صفحه‌های خیلی کوچک */
@media (max-width: 480px) {
    #themeToggleBtn {
        top: 10px !important;
        right: 10px !important;
    }

    #topRightNotificationMenu {
        top: 10px !important;
        right: 70px !important;
    }

    #topLeftUserMenu {
        top: 10px !important;
        left: 10px !important;
    }

    #themePanel,
    #userDropdown,
    #notificationDropdown {
        top: 70px !important;
        width: 280px !important;
    }

    #notificationDropdown {
        max-height: 70vh !important;
    }

    .notification-header {
        padding: 0.75rem 1rem !important;
    }

    .notification-header h5 {
        font-size: 1rem !important;
    }

    .notification-actions .btn {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.7rem !important;
    }

    .notification-body {
        padding: 0.5rem !important;
        max-height: 250px !important;
    }

    .notification-footer {
        padding: 0.75rem 1rem !important;
    }

    /* سایدبار در موبایل */
    nav.sidebar {
        width: 280px !important;
    }

    main.content {
        padding: 0.75rem !important;
    }

    .flip-card {
        height: 250px !important;
    }

    .quick-actions-box {
        width: 95% !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
    }
}

/* افکت محو شدن پس‌زمینه وقتی منو باز است */
@media (max-width: 768px) {
    body.menu-open::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(3px);
        z-index: 1020;
        animation: fadeIn 0.3s ease;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
}

/* رفع همپوشانی در حالت افقی موبایل */
@media (max-width: 768px) and (orientation: landscape) {
    #chatWidget {
        height: 70vh !important;
    }

    #notificationDropdown {
        max-height: 60vh !important;
    }

    .notification-body {
        max-height: 200px !important;
    }

    .sidebar .nav-link {
        padding: 6px 12px !important;
        font-size: 0.8rem !important;
    }
}
/* ====================== رفع مشکل نمایش نوتیفیکیشن در موبایل ====================== */
@media (max-width: 768px) {
    /* بازنشانی کامل نوتیفیکیشن */
    #notificationDropdown {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) scale(0.9) !important;
        width: 90% !important;
        max-width: 380px !important;
        max-height: 80vh !important;
        margin: 0 !important;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease !important;
        z-index: 9999 !important;
        display: block !important;
    }

    /* وقتی نوتیفیکیشن باز میشه */
    #notificationDropdown.show {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translate(-50%, -50%) scale(1) !important;
        display: block !important;
    }

    /* بدنه نوتیفیکیشن */
    #notificationDropdown .notification-body {
        max-height: 50vh !important;
        overflow-y: auto !important;
        padding: 1rem !important;
    }

    /* آیتم‌های نوتیفیکیشن */
    #notificationDropdown .notification-item {
        padding: 1rem !important;
        margin-bottom: 0.75rem !important;
        border-radius: 16px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }

    /* محتوای نوتیفیکیشن */
    #notificationDropdown .notification-content {
        flex: 1 !important;
        min-width: 0 !important;
    }

    #notificationDropdown .notification-content h6 {
        font-size: 0.95rem !important;
        margin: 0 0 0.5rem 0 !important;
        white-space: normal !important;
    }

    #notificationDropdown .notification-content p {
        font-size: 0.85rem !important;
        margin: 0 0 0.5rem 0 !important;
        white-space: normal !important;
        line-height: 1.5 !important;
        display: block !important;
    }

    /* متا اطلاعات */
    #notificationDropdown .notification-meta {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    #notificationDropdown .notification-meta small {
        font-size: 0.75rem !important;
        white-space: nowrap !important;
    }

    /* هدر */
    #notificationDropdown .notification-header {
        padding: 1.25rem !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    /* فوتر */
    #notificationDropdown .notification-footer {
        padding: 1rem 1.25rem !important;
        text-align: center !important;
    }
}

/* برای صفحه‌های خیلی کوچک */
@media (max-width: 480px) {
    #notificationDropdown {
        width: 95% !important;
        max-width: 340px !important;
        transform: translate(-50%, -50%) scale(0.95) !important;
    }

    #notificationDropdown.show {
        transform: translate(-50%, -50%) scale(1) !important;
    }

    #notificationDropdown .notification-item {
        padding: 0.75rem !important;
    }

    #notificationDropdown .notification-content h6 {
        font-size: 0.9rem !important;
    }

    #notificationDropdown .notification-content p {
        font-size: 0.8rem !important;
    }
    /* استایل دکمه‌های عملیات روی پیام */
    .message-actions {
        position: absolute;
        top: -12px;
        left: 8px;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(8px);
        border-radius: 20px;
        padding: 4px 8px;
        display: flex;
        gap: 8px;
        opacity: 0;
        transition: opacity 0.2s ease;
        z-index: 10;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    /* برای پیام‌های ارسالی (سمت راست) دکمه‌ها در سمت راست نمایش داده می‌شوند */
    .message.sent .message-actions {
        left: auto;
        right: 8px;
    }

    /* هنگام هاور روی پیام، دکمه‌ها نمایش داده می‌شوند */
    .message:hover .message-actions {
        opacity: 1;
    }

    /* استایل هر دکمه */
    .message-actions button {
        background: transparent;
        border: none;
        color: white;
        font-size: 0.75rem;
        cursor: pointer;
        padding: 4px 6px;
        border-radius: 50%;
        transition: all 0.2s ease;
        width: 26px;
        height: 26px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* هاور دکمه‌ها */
    .message-actions button:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: scale(1.1);
    }

    /* رنگ‌های مختلف برای دکمه‌ها (اختیاری) */
    .message-actions .edit-btn:hover {
        background: rgba(59, 130, 246, 0.5);
        color: #60a5fa;
    }

    .message-actions .delete-btn:hover {
        background: rgba(239, 68, 68, 0.5);
        color: #ef4444;
    }

    .message-actions .reply-btn:hover {
        background: rgba(16, 185, 129, 0.5);
        color: #34d399;
    }

    .message-actions .copy-btn:hover {
        background: rgba(245, 158, 11, 0.5);
        color: #fbbf24;
    }

    .message-actions .forward-btn:hover {
        background: rgba(139, 92, 246, 0.5);
        color: #a78bfa;
    }

    /* برای تم روشن */
    .light-theme .message-actions {
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(0, 0, 0, 0.1);
    }

    .light-theme .message-actions button {
        color: #1e293b;
    }

    .light-theme .message-actions button:hover {
        background: rgba(0, 0, 0, 0.1);
    }

    /* استایل پیام حذف شده */
    .deleted-message-wrapper .deleted-message {
        background: rgba(128, 128, 128, 0.1);
        border: 1px dashed rgba(128, 128, 128, 0.3);
        font-style: italic;
    }

    /* استایل پیام پاسخ داده شده */
    .replied-message {
        background: rgba(59, 130, 246, 0.1);
        border-right: 3px solid var(--primary-color);
        padding: 6px 10px;
        border-radius: 8px;
        margin-bottom: 8px;
        font-size: 0.75rem;
    }

    .replied-sender {
        font-weight: bold;
        color: var(--primary-color);
        font-size: 0.7rem;
    }

    .replied-text {
        color: rgba(255, 255, 255, 0.7);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .light-theme .replied-text {
        color: rgba(0, 0, 0, 0.6);
    }

    /* استایل پیوست فایل */
    .attachments {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 8px;
    }

    .attachment-item {
        cursor: pointer;
        transition: transform 0.2s ease;
    }

    .attachment-item:hover {
        transform: translateY(-2px);
    }

    /* استایل ویجت چت */
    #chatWidget {
        position: fixed;
        bottom: 20px;
        left: 20px;
        width: 380px;
        height: 500px;
        background: var(--card-bg);
        backdrop-filter: blur(20px);
        border-radius: 20px;
        border: 2px solid var(--card-border);
        display: none;
        flex-direction: column;
        z-index: 1000;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    }

    #chatWidget.active {
        display: flex;
    }

    #chatWidget.minimized {
        height: 50px;
        overflow: hidden;
    }

    #chatWidgetHeader {
        padding: 12px 15px;
        background: var(--primary-color);
        color: white;
        border-radius: 20px 20px 0 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .chat-sidebar {
        width: 120px;
        background: rgba(0, 0, 0, 0.2);
        border-left: 1px solid var(--card-border);
    }

    .chat-main {
        flex: 1;
    }

    .chat-messages {
        height: 350px;
        overflow-y: auto;
        padding: 15px;
    }

    /* استایل پیام‌ها در ویجت چت */
    .message {
        margin-bottom: 15px;
        display: flex;
    }

    .message.sent {
        justify-content: flex-end;
    }

    .message.received {
        justify-content: flex-start;
    }

    .message-content {
        max-width: 70%;
        padding: 8px 12px;
        border-radius: 15px;
        position: relative;
    }

    .message.sent .message-content {
        background: var(--primary-color);
        color: white;
        border-radius: 15px 15px 0 15px;
    }

    .message.received .message-content {
        background: var(--card-bg);
        border: 1px solid var(--card-border);
        border-radius: 15px 15px 15px 0;
    }

    .message-time {
        font-size: 0.7rem;
        opacity: 0.7;
        margin-top: 4px;
    }

    .message-sender {
        font-size: 0.7rem;
        margin-bottom: 4px;
        color: var(--primary-color);
    }

    /* فرم ارسال پیام */
    #chatSendForm {
        padding: 12px;
        background: rgba(0, 0, 0, 0.03);
        border-top: 1px solid var(--card-border);
    }

    #chatSendForm .d-flex.gap-2 {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    #chatMessageInput {
        flex: 1;
        border-radius: 24px;
        padding: 10px 16px;
        border: 1px solid var(--card-border);
        background: var(--input-bg);
        color: var(--text-color);
        font-size: 0.9rem;
    }

    #chatMessageInput:focus {
        outline: none;
        border-color: var(--primary-color);
        background: var(--input-bg);
    }

    #chatSendForm button[type="submit"] {
        border-radius: 50%;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--primary-color);
        border: none;
        color: white;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }

    #chatSendForm button[type="submit"]:hover {
        transform: scale(1.05);
        filter: brightness(1.1);
    }

    /* دکمه ضمیمه فایل */
    #widgetAttachBtn {
        transition: all 0.2s ease;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    #widgetAttachBtn:hover {
        background: var(--primary-color);
        color: white;
        transform: scale(1.05);
        border-color: transparent;
    }

    /* پیش‌نمایش فایل */
    .preview-item {
        position: relative;
        display: inline-block;
        min-width: 80px;
        text-align: center;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 5px;
        transition: transform 0.2s ease;
    }

    .preview-item:hover {
        transform: scale(1.02);
        background: rgba(255, 255, 255, 0.2);
    }

    .preview-remove {
        position: absolute;
        top: -8px;
        right: -8px;
        background: #ef4444;
        color: white;
        border: none;
        border-radius: 50%;
        width: 22px;
        height: 22px;
        cursor: pointer;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
        z-index: 10;
    }

    .preview-remove:hover {
        background: #dc2626;
        transform: scale(1.1);
    }

}
/* ====================== رفع مشکل دکمه‌های عملیات پیام در حالت BW Mode ====================== */

/* بازنشانی کامل دکمه‌های عملیات پیام در حالت BW Mode */
body.bw-mode .message-actions {
    background: rgba(20, 20, 20, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

body.bw-mode .message-actions button {
    background: transparent !important;
    border: none !important;
    color: #e0e0e0 !important;
    transition: all 0.2s ease !important;
}

body.bw-mode .message-actions button:hover {
    background: rgba(80, 80, 80, 0.7) !important;
    transform: scale(1.1) !important;
    color: #ffffff !important;
}

/* رنگ‌های خاص برای هر دکمه در حالت BW Mode */
body.bw-mode .message-actions .edit-btn:hover {
    background: rgba(59, 130, 246, 0.6) !important;
    color: #93c5fd !important;
}

body.bw-mode .message-actions .delete-btn:hover {
    background: rgba(239, 68, 68, 0.6) !important;
    color: #fca5a5 !important;
}

body.bw-mode .message-actions .reply-btn:hover {
    background: rgba(16, 185, 129, 0.6) !important;
    color: #6ee7b7 !important;
}

body.bw-mode .message-actions .copy-btn:hover {
    background: rgba(245, 158, 11, 0.6) !important;
    color: #fcd34d !important;
}

body.bw-mode .message-actions .forward-btn:hover {
    background: rgba(139, 92, 246, 0.6) !important;
    color: #c4b5fd !important;
}

/* برای تم روشن - اطمینان از عدم تداخل */
body.light-theme.bw-mode .message-actions {
    background: rgba(240, 240, 240, 0.95) !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
}

body.light-theme.bw-mode .message-actions button {
    color: #333333 !important;
}

body.light-theme.bw-mode .message-actions button:hover {
    background: rgba(100, 100, 100, 0.3) !important;
}

/* اطمینان از حذف هرگونه پس‌زمینه سفید در حالت BW Mode */
body.bw-mode .message-actions,
body.bw-mode .message-actions *,
body.bw-mode .message-actions button,
body.bw-mode .message-actions button::before,
body.bw-mode .message-actions button::after {
    background-color: transparent !important;
}

/* استایل کلی دکمه‌های عملیات - اطمینان از یکنواختی */
.message-actions {
    position: absolute;
    top: -12px;
    left: 8px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    border-radius: 20px;
    padding: 4px 8px;
    display: flex;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.message.sent .message-actions {
    left: auto;
    right: 8px;
}

.message:hover .message-actions {
    opacity: 1;
}

.message-actions button {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 50%;
    transition: all 0.2s ease;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.message-actions button:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.message-actions .edit-btn:hover {
    background: rgba(59, 130, 246, 0.6);
    color: #93c5fd;
}

.message-actions .delete-btn:hover {
    background: rgba(239, 68, 68, 0.6);
    color: #fca5a5;
}

.message-actions .reply-btn:hover {
    background: rgba(16, 185, 129, 0.6);
    color: #6ee7b7;
}

.message-actions .copy-btn:hover {
    background: rgba(245, 158, 11, 0.6);
    color: #fcd34d;
}

.message-actions .forward-btn:hover {
    background: rgba(139, 92, 246, 0.6);
    color: #c4b5fd;
}

/* برای تم روشن */
body.light-theme .message-actions {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

body.light-theme .message-actions button {
    color: #1e293b;
}

body.light-theme .message-actions button:hover {
    background: rgba(0, 0, 0, 0.1);
}
/* ====================== همه ویجت‌ها ====================== */

/* ===== حالت عادی (سایدبار باز) ===== */

/* 1. منوی کاربری - بالا چپ */
#topLeftUserMenu {
    position: fixed !important;
    top: 22px !important;
    left: 22px !important;
    z-index: 1100 !important;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

/* 2. اعلان‌ها - کنار منوی کاربری */
#topRightNotificationMenu {
    position: fixed !important;
    top: 22px !important;
    left: 90px !important;
    z-index: 1100 !important;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

/* 3. تنظیمات تم - بالا سمت راست */
#themeToggleBtn {
    position: fixed !important;
    top: 22px !important;
    right: 280px !important;
    left: auto !important;
    z-index: 1100 !important;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

/* 4. راهنما - پایین سمت چپ (کنار چت) */
#helpMainFloatingBtn {
    position: fixed !important;
    bottom: 30px !important;
    left: 105px !important;
    right: auto !important;
    z-index: 1100 !important;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

/* 5. چت - پایین سمت چپ */
#chatFloatingBtn {
    position: fixed !important;
    bottom: 30px !important;
    left: 30px !important;
    z-index: 1100 !important;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

/* 6. دکمه Toggle سایدبار - لبه سایدبار (وسط صفحه) */
.sidebar-toggle-btn {
    position: fixed !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 240px !important;
    z-index: 1100 !important;
    width: 28px !important;
    height: 56px !important;
    background: linear-gradient(135deg,
        hsla(var(--h), var(--s), calc(var(--l) + 15%), 0.45),
        hsla(var(--h), var(--s), calc(var(--l) - 10%), 0.55)
    ) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    border: 2px solid hsla(var(--h), var(--s), calc(var(--l) + 30%), 0.5) !important;
    border-radius: 0 14px 14px 0 !important;
    color: white !important;
    font-size: 1.2rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 4px 0 20px rgba(0,0,0,0.3) !important;
    transition: all 0.4s ease !important;
    cursor: pointer;
    border-left: none !important;
}

.sidebar-toggle-btn:hover {
    transform: translateY(-50%) scale(1.05) !important;
    box-shadow: 4px 0 30px rgba(0,0,0,0.5),
                0 0 20px hsla(var(--h), var(--s), 70%, 0.3) !important;
}

.sidebar-toggle-btn i {
    transition: transform 0.4s ease;
    font-size: 1rem;
}

/* ============================================ */
/* ===== حالت مخفی (سایدبار بسته) ===== */
/* ============================================ */

body.sidebar-hidden nav.sidebar {
    transform: translateX(100%) !important;
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

body.sidebar-hidden main.content {
    margin-right: 0 !important;
    transition: margin-right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

/* دکمه Toggle - به لبه صفحه می‌رود */
body.sidebar-hidden .sidebar-toggle-btn {
    right: 0 !important;
    border-radius: 0 14px 14px 0 !important;
    box-shadow: 4px 0 30px rgba(0,0,0,0.4) !important;
}

body.sidebar-hidden .sidebar-toggle-btn i {
    transform: rotate(180deg);
}

/* ===== همه ویجت‌ها در حالت مخفی - به بالا سمت چپ می‌آیند ===== */

/* 1. منوی کاربری */
body.sidebar-hidden #topLeftUserMenu {
    left: 15px !important;
    top: 22px !important;
}

/* 2. اعلان‌ها */
body.sidebar-hidden #topRightNotificationMenu {
    left: 75px !important;
    top: 22px !important;
}

/* 3. تنظیمات تم - از راست به چپ می‌آید */
body.sidebar-hidden #themeToggleBtn {
    right: auto !important;
    left: 135px !important;
    top: 22px !important;
}

/* 4. راهنما - از پایین به بالا می‌آید */
body.sidebar-hidden #helpMainFloatingBtn {
    bottom: auto !important;
    top: 22px !important;
    left: 195px !important;
    right: auto !important;
}

/* 5. چت - از پایین به بالا می‌آید */
body.sidebar-hidden #chatFloatingBtn {
    bottom: auto !important;
    top: 22px !important;
    left: 255px !important;

}


/* ============================================ */
/* ===== ریسپانسیو موبایل ===== */
/* ============================================ */

@media (max-width: 768px) {
    /* حالت عادی */
    #topLeftUserMenu {
        top: 15px !important;
        left: 15px !important;
    }

    #topRightNotificationMenu {
        top: 15px !important;
        left: 75px !important;
    }

    #themeToggleBtn {
        top: 15px !important;
        right: 15px !important;
        left: auto !important;
        width: 44px !important;
        height: 44px !important;
        font-size: 1.2rem !important;
    }

    #helpMainFloatingBtn {
        bottom: 15px !important;
        left: 80px !important;
        width: 50px !important;
        height: 50px !important;
        font-size: 1.4rem !important;
    }

    #chatFloatingBtn {
        bottom: 15px !important;
        left: 15px !important;
    }

    #chatFloatingBtn .btn {
        width: 50px !important;
        height: 50px !important;
    }

    #chatFloatingBtn .btn i {
        font-size: 1.3rem !important;
    }
/* ===== یکسان‌سازی فونت سایدبار و کارت‌ها ===== */
.sidebar,
.sidebar .nav-link,
.sidebar span,
.sidebar .menu-header,
.sidebar .badge {
    font-family: 'Vazir', 'IRANSans', Tahoma, sans-serif !important;
    font-size: 0.95rem !important;
}

.flip-card-front,
.flip-card-front h5,
.flip-card-front h3,
.flip-card-front .small,
.flip-card-front .extra-content {
    font-family: 'Vazir', 'IRANSans', Tahoma, sans-serif !important;
}

.flip-card-front h5 {
    font-size: 1rem !important;
}

.flip-card-front h3 {
    font-size: 1.5rem !important;
}

.flip-card-front .small {
    font-size: 0.8rem !important;
}
    .sidebar-toggle-btn {
        top: 50% !important;
        right: 0 !important;
        width: 24px !important;
        height: 48px !important;
        font-size: 0.9rem !important;
        border-radius: 0 10px 10px 0 !important;
    }

    /* حالت مخفی در موبایل */
    body.sidebar-hidden #topLeftUserMenu {
        left: 10px !important;
        top: 15px !important;
    }

    body.sidebar-hidden #topRightNotificationMenu {
        left: 60px !important;
        top: 15px !important;
    }

    body.sidebar-hidden #themeToggleBtn {
        right: auto !important;
        left: 110px !important;
        top: 15px !important;
        width: 38px !important;
        height: 38px !important;
    }

    body.sidebar-hidden #helpMainFloatingBtn {
        bottom: auto !important;
        top: 15px !important;
        left: 160px !important;
        width: 38px !important;
        height: 38px !important;
        font-size: 1.2rem !important;
        right: auto !important;
    }

    body.sidebar-hidden #chatFloatingBtn {
        bottom: auto !important;
        top: 15px !important;
        left: 210px !important;
    }

    body.sidebar-hidden #chatFloatingBtn .btn {
        width: 38px !important;
        height: 38px !important;
    }

    body.sidebar-hidden #chatFloatingBtn .btn i {
        font-size: 1rem !important;
    }

    body.sidebar-hidden #chatBadge {
        width: 16px !important;
        height: 16px !important;
        font-size: 0.5rem !important;
    }
}

@media (max-width: 480px) {
    #topLeftUserMenu {
        top: 10px !important;
        left: 10px !important;
    }

    #topRightNotificationMenu {
        top: 10px !important;
        left: 55px !important;
    }

    #themeToggleBtn {
        top: 10px !important;
        right: 10px !important;
        width: 34px !important;
        height: 34px !important;
        font-size: 1rem !important;
    }

    #helpMainFloatingBtn {
        bottom: 10px !important;
        left: 70px !important;
        width: 42px !important;
        height: 42px !important;
        font-size: 1.2rem !important;
    }

    #chatFloatingBtn {
        bottom: 10px !important;
        left: 10px !important;
    }

    #chatFloatingBtn .btn {
        width: 42px !important;
        height: 42px !important;
    }

    #chatFloatingBtn .btn i {
        font-size: 1.1rem !important;
    }

    body.sidebar-hidden #topLeftUserMenu {
        left: 8px !important;
        top: 10px !important;
    }

    body.sidebar-hidden #topRightNotificationMenu {
        left: 48px !important;
        top: 10px !important;
    }

    body.sidebar-hidden #themeToggleBtn {
        right: auto !important;
        left: 88px !important;
        top: 10px !important;
        width: 30px !important;
        height: 30px !important;
    }

    body.sidebar-hidden #helpMainFloatingBtn {
        bottom: auto !important;
        top: 10px !important;
        left: 128px !important;
        width: 32px !important;
        height: 32px !important;
        font-size: 1rem !important;
        right: auto !important;
    }

    body.sidebar-hidden #chatFloatingBtn {
        bottom: auto !important;
        top: 10px !important;
        left: 170px !important;
    }

    body.sidebar-hidden #chatFloatingBtn .btn {
        width: 32px !important;
        height: 32px !important;
    }

    body.sidebar-hidden #chatFloatingBtn .btn i {
        font-size: 0.8rem !important;
    }

    body.sidebar-hidden #chatBadge {
        width: 14px !important;
        height: 14px !important;
        font-size: 0.45rem !important;
        top: -3px !important;
        right: -3px !important;
    }
}
/* ===== یکسان‌سازی رنگ اعداد در کارت‌ها ===== */
.flip-card-front h3 {
    color: var(--txt) !important;
}

.flip-card-front .extra-content [style*="font-weight:700"],
.flip-card-front .extra-content div[style*="font-weight:700"],
.flip-card-front .extra-content span[style*="font-weight:700"] {
    color: var(--txt) !important;
}

/* برای اعداد داخل extra که با استایل inline تعریف شدن */
.flip-card-front .extra-content div > span:first-child,
.flip-card-front .extra-content .fw-bold {
    color: var(--txt) !important;
}
/* ===== کارت‌های سفید - خوانایی کامل ===== */
body.white-cards-mode #cardsContainer .flip-card-front,
body.white-cards-mode #cardsContainer .flip-card-back {
    background: linear-gradient(145deg, #ffffff, #f8fafc) !important;
    border: 1px solid rgba(148, 163, 184, 0.5) !important;
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.12),
                0 0 0 1px rgba(148,163,184,0.3) !important;
    color: #111827 !important;
}

/* همه المان‌های داخل کارت */
body.white-cards-mode #cardsContainer .flip-card-front *,
body.white-cards-mode #cardsContainer .flip-card-back * {
    color: #111827 !important;
}

/* اعداد بزرگ */
body.white-cards-mode #cardsContainer .flip-card-front h3,
body.white-cards-mode #cardsContainer .flip-card-front .fw-bold,
body.white-cards-mode #cardsContainer .flip-card-front [style*="font-weight:700"] {
    color: #0f172a !important;
}

/* متن‌های خاکستری */
body.white-cards-mode #cardsContainer .text-muted,
body.white-cards-mode #cardsContainer [style*="color: rgba"] {
    color: #475569 !important;
}

/* محتوای extra - همه المان‌ها */
body.white-cards-mode #cardsContainer .extra-content * {
    color: #1e293b !important;
}

/* اعداد داخل extra */
body.white-cards-mode #cardsContainer .extra-content [style*="font-weight:700"],
body.white-cards-mode #cardsContainer .extra-content div > span:first-child {
    color: #0f172a !important;
}

/* آیکون‌ها */
body.white-cards-mode #cardsContainer .flip-card-front i {
    color: #1e293b !important;
}

/* توضیحات */
body.white-cards-mode #cardsContainer .flip-card-front p.small {
    color: #334155 !important;
}

/* دکمه‌های پشت کارت در حالت سفید */
body.white-cards-mode #cardsContainer .flip-card-back .btn-back {
    color: #ffffff !important;
}