/* ============================================================
   Karmand24 – Panel Theme v2
   لایه‌ی جلوه‌های بصری مدرن که روی سیستم طراحی فعلی (شیشه‌ای/نئون)
   بدون تغییر منطق و ساختار صفحات اعمال می‌شود.
   ============================================================ */

@keyframes k24-fade-in {
    /* توجه: این انیمیشن قبلاً از transform استفاده می‌کرد و چون روی خود
       body اعمال می‌شود (خط پایین‌تر)، به‌خاطر animation-fill-mode: both
       یک مقدار transform (هرچند بصری برابر با صفر) برای همیشه روی body
       باقی می‌ماند. طبق مشخصات CSS، هر مقدار transform غیر از none روی یک
       عنصر جد، "containing block" جدیدی برای فرزندان position:fixed آن
       می‌سازد — یعنی دکمه چت/تست‌ها/مودال‌ها به‌جای اینکه نسبت به کل صفحه
       (viewport) ثابت بمانند، نسبت به کل ارتفاع سند موقعیت می‌گرفتند و با
       اسکرول کردن صفحه جابه‌جا می‌شدند. با حذف transform از این انیمیشن و
       استفاده فقط از opacity، همان جلوه محو شدن حفظ می‌شود بدون این باگ. */
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes k24-pop {
    0%   { transform: scale(0.9); opacity: 0; }
    60%  { transform: scale(1.03); opacity: 1; }
    100% { transform: scale(1); }
}
@keyframes k24-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

::selection { background: var(--ice-blue, #38bdf8); color: #fff; }

/* اسکرول‌بار مدرن */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--ice-blue, #38bdf8), var(--neon-purple, #818cf8)); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--rose-gold, #f472b6); }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--ice-blue, #38bdf8);
    outline-offset: 2px;
}

body { animation: k24-fade-in 0.4s ease both; }

/* ---------- کارت‌ها ---------- */
.card, .stat-card, .plan-card, .glass-card, .checkout-box, .info-box, .error-box, .feat-card, .box,
.order-card, .lead-card, .wizard-box, .plan-accordion {
    position: relative;
    isolation: isolate;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.card::before, .stat-card::before, .plan-card::before, .glass-card::before,
.order-card::before, .plan-accordion::before {
    content: "";
    position: absolute; inset: 0 0 auto 0; height: 3px; border-radius: 20px 20px 0 0;
    background: linear-gradient(90deg, var(--ice-blue, #38bdf8), var(--neon-purple, #818cf8), var(--rose-gold, #f472b6));
    opacity: 0; transition: opacity 0.25s ease;
    z-index: 1;
}
.card:hover::before, .stat-card:hover::before, .plan-card:hover::before, .glass-card:hover::before,
.order-card:hover::before, .plan-accordion:hover::before { opacity: 1; }
.card:hover, .stat-card:hover, .glass-card:hover, .order-card:hover {
    box-shadow: 0 12px 32px rgba(56, 189, 248, 0.12), 0 2px 8px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

/* ------------------------------------------------------------
   جمع‌وجورتر و حرفه‌ای‌تر کردن کارت‌ها در تمام صفحات پنل
   ------------------------------------------------------------
   قبلاً هر صفحه (داشبورد، سفارش‌ها، تیکت‌ها، پلن‌ها، تنظیمات حساب و...)
   برای کارت‌های خودش padding و border-radius نسبتاً بزرگ و ثابتی
   داشت (اغلب 20 تا 25px پدینگ و 15px گردی) که باعث می‌شد به‌خصوص در
   موبایل کارت‌ها بی‌دلیل بزرگ و پرفاصله به‌نظر برسند. چون این فایل
   بعد از استایل داخلی هر صفحه لود می‌شود، همین‌جا یک اندازه‌ی یکسان،
   جمع‌وجورتر و حرفه‌ای‌تر برای همه‌ی این کارت‌ها در همه‌ی صفحات تعریف
   می‌شود — فقط فاصله‌ها/گردی تغییر می‌کند، رنگ‌بندی، چیدمان و منطق هر
   صفحه دست‌نخورده می‌ماند. */
.card, .stat-card, .plan-card, .glass-card, .checkout-box, .info-box, .error-box, .feat-card, .box,
.order-card, .lead-card, .wizard-box, .plan-accordion, .subscription-card, .conv-stats-box, .biz-stats-box,
.stat-box, .cf-card, .note-box, .msg-box, .danger-box, .warn-box, .chart-box, .effect-box, .queue-card,
.decision-card, .incident-card, .webhook-box, .embed-box {
    padding: 16px 18px;
    border-radius: 12px;
}
.card h3, .stat-card h3, .plan-card h3, .glass-card h3, .order-card h3, .feat-card h3, .plan-accordion h3,
.decision-card h3, .decision-card h4, .incident-card h3, .incident-card h4 {
    margin-bottom: 6px;
}
.card p, .stat-card p, .plan-card p, .glass-card p, .order-card p, .feat-card p {
    margin-bottom: 10px;
}
.grid { gap: 14px; }
@media (max-width: 768px) {
    .card, .stat-card, .plan-card, .glass-card, .checkout-box, .info-box, .error-box, .feat-card, .box,
    .order-card, .lead-card, .wizard-box, .plan-accordion, .subscription-card, .conv-stats-box, .biz-stats-box,
    .stat-box, .cf-card, .note-box, .msg-box, .danger-box, .warn-box, .chart-box, .effect-box, .queue-card,
    .decision-card, .incident-card, .webhook-box, .embed-box {
        padding: 14px 16px;
        border-radius: 10px;
    }
    .grid { gap: 10px; }
}

/* ---------- دکمه‌ها ---------- */
.btn, .buy-btn, .cta-btn, .login-btn, .cart-btn, button[type="submit"],
.btn-fulfill, .btn-cancel, .btn-delete, .btn-info, .btn-success,
.plan-buy-btn, .lead-card-submit, .header-cta {
    position: relative;
    overflow: hidden;
    transition: transform 0.2s cubic-bezier(.2,.8,.2,1), box-shadow 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
    letter-spacing: 0.2px;
}
.btn:hover, .buy-btn:hover, .cta-btn:hover, .login-btn:hover, .cart-btn:hover, button[type="submit"]:hover,
.btn-fulfill:hover, .btn-cancel:hover, .btn-delete:hover, .btn-info:hover, .btn-success:hover,
.plan-buy-btn:hover, .lead-card-submit:hover, .header-cta:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 8px 20px rgba(56, 189, 248, 0.18);
}
.btn:active, .buy-btn:active, .cta-btn:active, .login-btn:active,
.btn-fulfill:active, .btn-cancel:active, .btn-delete:active {
    transform: translateY(0);
    filter: brightness(0.96);
}
.btn:disabled, .buy-btn:disabled, .btn-delete:disabled { opacity: 0.5; cursor: not-allowed; transform: none; filter: none; box-shadow: none; }

/* ---------- نشان وضعیت (badge) با کادر ظریف برای خوانایی بهتر ---------- */
[class*="status-badge"], .status-badge { border: 1px solid rgba(255,255,255,0.08); letter-spacing: 0.2px; }
body.light-mode [class*="status-badge"], body.light-mode .status-badge { border-color: rgba(0,0,0,0.06); }

/* ---------- ناوبری تب‌ها / منو ---------- */
.tab-link, .tabs a {
    position: relative;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow .2s ease;
}
.tab-link:hover { transform: translateY(-1px); color: var(--ice-blue, #38bdf8); }
.tab-link.active { box-shadow: 0 6px 18px rgba(56,189,248,0.25); }

/* ---------- جداول ---------- */
table { border-spacing: 0; overflow: hidden; }
thead th:first-child { border-top-right-radius: 12px; }
thead th:last-child { border-top-left-radius: 12px; }
tbody tr { transition: background 0.15s ease; }
tbody tr:hover td { background: rgba(56, 189, 248, 0.06); }

/* ---------- ورودی‌ها ---------- */
input, select, textarea {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
input:focus, select:focus, textarea:focus {
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}

/* ---------- نشان‌ها و اعلان‌ها ---------- */
.badge, .badge-success, .badge-error, .badge-info {
    display: inline-flex; align-items: center; gap: 4px;
    font-weight: 700; letter-spacing: 0.2px;
    border-radius: 999px !important;
}
.alert, .notification-banner, .empty, .empty-state {
    animation: k24-fade-in 0.35s ease both;
}

/* ---------- toggle تم ---------- */
.theme-toggle { transition: transform 0.35s ease, border-color 0.2s ease, box-shadow .2s ease; }
.theme-toggle:hover { transform: rotate(15deg) scale(1.05); box-shadow: 0 0 16px rgba(56,189,248,0.3); }

/* ============================================================
   یکپارچه‌سازی دکمه‌های ناوبری هدر در همه‌ی پنل‌ها
   قبلاً هر صفحه (داشبورد، مدیریت ربات، تیکت‌ها، سفارش‌های من، سفارش‌های
   ادمین و...) برای دکمه‌های بالای صفحه از کلاس و استایل جداگانه‌ای استفاده
   می‌کرد (cart-btn / nav-btn / back-link ساده / logout-btn) که ظاهر و
   اندازه‌ی متفاوتی داشتند. چون این فایل بعد از استایل داخلی هر صفحه لود
   می‌شود، همین‌جا یک ظاهر ثابت و یکسان (دکمه‌ی حبه‌ای با حاشیه و هاور آبی)
   برای همه‌ی آن‌ها تعریف می‌شود تا در تمام پنل‌ها کاملاً هماهنگ باشند.
   ============================================================ */
.cart-btn, .nav-btn, .back-link, a.back-link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 18px !important;
    background: var(--glass, rgba(255,255,255,0.05)) !important;
    border: 1px solid var(--border, rgba(255,255,255,0.1)) !important;
    color: var(--text-bright, #fff) !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    font-family: 'Samim', sans-serif;
    font-size: 0.88rem !important;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    transition: 0.25s;
}
.cart-btn:hover, .nav-btn:hover, .back-link:hover, a.back-link:hover {
    border-color: var(--ice-blue, #38bdf8) !important;
    color: var(--ice-blue, #38bdf8) !important;
    background: rgba(56, 189, 248, 0.08) !important;
    transform: translateY(-1px);
}
body.light-mode .cart-btn, body.light-mode .nav-btn, body.light-mode .back-link {
    background: rgba(0,0,0,0.03) !important;
}
.logout-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 18px !important;
    background: rgba(244, 114, 182, 0.1) !important;
    border: 1px solid rgba(244, 114, 182, 0.3) !important;
    color: var(--rose-gold, #f472b6) !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    font-size: 0.88rem !important;
    font-weight: 600;
    white-space: nowrap;
    transition: 0.25s;
}
.logout-btn:hover { background: rgba(244, 114, 182, 0.2) !important; transform: translateY(-1px); }

/* ---------- عدد آمار پنل مدیریت ---------- */
.stat-num { background: linear-gradient(90deg, var(--ice-blue, #38bdf8), var(--neon-purple, #818cf8)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------- اسکلت بارگذاری برای لیست‌های در حال fetch ---------- */
.k24-skeleton {
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.09) 37%, rgba(255,255,255,0.04) 63%);
    background-size: 800px 100%;
    animation: k24-shimmer 1.4s linear infinite;
}

/* ---------- Toast (اعلان شناور جایگزین alert) ---------- */
#k24-toast-stack {
    position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
    z-index: 99999; display: flex; flex-direction: column; gap: 10px; pointer-events: none;
    width: 100%; max-width: 380px; padding: 0 15px;
}
.k24-toast {
    pointer-events: auto;
    display: flex; align-items: center; gap: 10px;
    background: var(--card-bg, rgba(10,10,30,0.9));
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    color: var(--text-bright, #fff);
    padding: 14px 18px; border-radius: 12px;
    font-family: 'Samim', sans-serif; font-size: 0.9rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    backdrop-filter: blur(14px);
    animation: k24-pop 0.35s cubic-bezier(.2,.8,.2,1) both;
    border-inline-start: 3px solid var(--ice-blue, #38bdf8);
}
.k24-toast.success { border-inline-start-color: #10b981; }
.k24-toast.error { border-inline-start-color: #f472b6; }
.k24-toast-icon { font-size: 1.1rem; flex-shrink: 0; }
.k24-toast.k24-leave { animation: k24-toast-out 0.25s ease forwards; }
@keyframes k24-toast-out { to { opacity: 0; transform: translateY(-8px) scale(0.95); } }

@media (max-width: 768px) {
    #k24-toast-stack { top: 12px; }
}

/* نشانگر رنگی پلتفرم پیام‌رسان (جایگزین ایموجی رنگی) */
.platform-dot {
    display: inline-block; width: 10px; height: 10px; border-radius: 50%;
    vertical-align: middle; box-shadow: 0 0 0 3px rgba(255,255,255,0.06);
}

/* ============================================================
   رفع زوم ناخواسته‌ی موبایل (iOS Safari) روی همه‌ی پنل‌ها
   ------------------------------------------------------------
   مرورگر سافاری آیفون وقتی کاربر روی input/select/textarea ای که
   font-size آن کمتر از 16px است لمس/فوکوس می‌کند، به‌صورت خودکار
   کل صفحه را زوم می‌کند (این رفتار ربطی به تگ meta viewport ندارد
   و فقط با تضمین اندازه‌ی حداقل 16px برطرف می‌شود). چون این فایل
   بعد از CSS داخلی هر صفحه لود می‌شود، همین‌جا با !important برای
   همه‌ی صفحات یک‌جا اصلاح می‌شود، بدون نیاز به ویرایش تک‌تک فایل‌ها. */
@media (max-width: 768px) {
    input, select, textarea { font-size: 16px !important; }
}

/* جدول‌هایی که ستون‌های زیادی دارند و روی صفحه‌ی موبایل جا نمی‌شوند:
   به‌جای بهم‌ریختن کل چیدمان، خود جدول اسکرول افقی می‌گیرد. */
@media (max-width: 768px) {
    table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}