/* ============================================================
   چله — لایهٔ تم زنده (بنفش · صورتی · فیروزه‌ای · نارنجی)
   روی style.css و workspace.css سوار می‌شود؛ فقط رنگ/سطح/انیمیشن را بازطراحی می‌کند.
   ============================================================ */

/* ---------- پالت روشن ---------- */
:root {
    --pl-primary: #7c3aed;
    --pl-primary-2: #a855f7;
    --pl-primary-dark: #6d28d9;
    --pl-primary-rgb: 124, 58, 237;
    --pl-gradient: linear-gradient(135deg, #7c3aed, #ec4899);

    --pl-accent: #14b8a6;

    --pl-bg: #f4f2fb;
    --pl-surface: #ffffff;
    --pl-text: #2b2440;
    --pl-muted: #8a84a3;
    --pl-border: rgba(124, 58, 237, 0.12);

    --pl-shadow-sm: 0 2px 8px -4px rgba(124, 58, 237, 0.18);
    --pl-shadow: 0 8px 24px -12px rgba(124, 58, 237, 0.22);
    --pl-shadow-lg: 0 18px 40px -16px rgba(124, 58, 237, 0.32);

    --pl-sidebar-bg: linear-gradient(180deg, #7c3aed 0%, #a855f7 52%, #ec4899 100%);
    --pl-sidebar-text: rgba(255, 255, 255, 0.82);
    --pl-sidebar-muted: rgba(255, 255, 255, 0.5);
    --pl-sidebar-hover: rgba(255, 255, 255, 0.14);

    --bs-primary: #7c3aed;
    --bs-primary-rgb: 124, 58, 237;
    --bs-link-color: #7c3aed;
    --bs-link-color-rgb: 124, 58, 237;
    --bs-link-hover-color: #6d28d9;
    --bs-link-hover-color-rgb: 109, 40, 217;

    /* اکسنت‌های چندرنگ چله */
    --ch-pink: #ec4899;
    --ch-orange: #f97316;
    --ch-teal: #14b8a6;
    --ch-yellow: #facc15;
    --ch-blue: #3b82f6;
}

/* ---------- پالت تیره ---------- */
html.dark-mode {
    --chelleh-bg: #131022;
    --pl-bg: #131022;
    --pl-surface: #1d1832;
    --pl-text: #efeaff;
    --pl-muted: #9d95bd;
    --pl-border: rgba(168, 85, 247, 0.18);

    --pl-shadow-sm: 0 2px 8px -4px rgba(0, 0, 0, 0.5);
    --pl-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.55);
    --pl-shadow-lg: 0 18px 40px -16px rgba(0, 0, 0, 0.6);

    --pl-sidebar-bg: linear-gradient(180deg, #241b47 0%, #31175a 55%, #511049 100%);

    --bs-body-bg: #1d1832;
    --bs-body-color: #efeaff;
    --bs-border-color: rgba(168, 85, 247, 0.18);
    --bs-secondary-bg: #2a2145;
    --bs-light: #1d1832;
}
html.dark-mode body { color: var(--pl-text); }
html.dark-mode .app-topbar { background: rgba(29, 24, 50, 0.75); }
html.dark-mode .topbar-search { background: rgba(124, 58, 237, 0.16); }
html.dark-mode .bg-light,
html.dark-mode .table-light { background-color: #2a2145 !important; }
html.dark-mode .table { --bs-table-hover-bg: rgba(124, 58, 237, 0.12); }
html.dark-mode .table thead { background-color: #2a2145; }
html.dark-mode .form-control,
html.dark-mode .form-select,
html.dark-mode .input-group-text { border-color: rgba(168, 85, 247, 0.24); }

/* ---------- بلاب‌های پس‌زمینه ---------- */
.ch-blob {
    position: fixed; border-radius: 50%; filter: blur(90px);
    opacity: 0.26; z-index: 0; pointer-events: none;
    animation: ch-float 16s ease-in-out infinite alternate;
}
.ch-blob-1 { width: 420px; height: 420px; background: #a855f7; top: -140px; right: -120px; }
.ch-blob-2 { width: 360px; height: 360px; background: #ec4899; bottom: -120px; left: 14%; animation-delay: -5s; }
.ch-blob-3 { width: 300px; height: 300px; background: #14b8a6; top: 42%; right: 26%; animation-delay: -9s; }
html.dark-mode .ch-blob { opacity: 0.2; }
@keyframes ch-float { from { transform: translate(0, 0) scale(1); } to { transform: translate(-50px, -36px) scale(1.14); } }

/* محتوا باید روی بلاب‌ها بنشیند (سایدبار/تاپ‌بار موقعیت fixed/sticky خودشان را دارند) */
.app-main { position: relative; z-index: 1; }

/* ---------- سایدبار ---------- */
.ws-rail { background: rgba(0, 0, 0, 0.14); }
.ws-rail-brand { padding: 6px; }
.ws-rail-brand .chelle-logo { width: 100%; height: 100%; }
.ws-rail-item.active { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28); }
.side-link.active { background: rgba(255, 255, 255, 0.2) !important; }
.side-link.active::before { background: var(--ch-yellow) !important; }

/* ---------- کارت‌ها ---------- */
.card {
    border-radius: 20px;
    box-shadow: var(--pl-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--pl-shadow-lg); }
.card-header {
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
}

/* ---------- دکمه‌ها ---------- */
.btn { border-radius: 12px; }
.btn-primary { background-image: var(--pl-gradient); border: 0; }
.btn-primary:hover, .btn-primary:focus { filter: brightness(1.06); background-image: var(--pl-gradient); }
.rounded-pill, .btn.rounded-pill { border-radius: 99px !important; }

/* ---------- متریک‌کارت‌های داشبورد (گرادیانی) ---------- */
.metric-card {
    border-radius: 20px; overflow: hidden; position: relative; color: #fff;
    box-shadow: var(--pl-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.metric-card::after {
    content: ""; position: absolute; width: 130px; height: 130px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.14); top: -54px; right: -36px; pointer-events: none;
}
.metric-card:hover { transform: translateY(-5px); box-shadow: var(--pl-shadow-lg); }
.metric-card .metric-icon,
.metric-card .metric-value,
.metric-card .metric-label,
.metric-card .metric-trend { position: relative; z-index: 1; color: #fff; }
.metric-card .metric-label { opacity: 0.88; }
.metric-card .metric-icon { background: rgba(255, 255, 255, 0.2) !important; color: #fff !important; }
.metric-blue { background: linear-gradient(135deg, #7c3aed, #a855f7); }
.metric-green { background: linear-gradient(135deg, #0d9488, #2dd4bf); }
.metric-orange { background: linear-gradient(135deg, #f97316, #fbbf24); }
.metric-red { background: linear-gradient(135deg, #ec4899, #f472b6); }
.metric-gray { background: linear-gradient(135deg, #3b82f6, #60a5fa); }

/* ---------- اسکرول‌بار ---------- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--pl-primary), var(--ch-pink)); border-radius: 99px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- لوگوی چله ---------- */
.chelle-logo { display: inline-block; line-height: 0; }
.chelle-logo svg { width: 100%; height: 100%; display: block; }
.chelle-logo .mark { fill: url(#chGrad); }
.ws-rail-brand .chelle-logo .mark,
.chelle-logo.on-dark .mark { fill: #fff; }
.logo-float { animation: ch-logofloat 5s ease-in-out infinite; transform-origin: center; }
@keyframes ch-logofloat { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(6deg); } }
.logo-spin { animation: ch-logospin 2.4s cubic-bezier(0.6, 0.1, 0.3, 1) infinite; transform-origin: center; }
@keyframes ch-logospin { 0% { transform: rotate(0) scale(0.9); } 50% { transform: rotate(180deg) scale(1.08); } 100% { transform: rotate(360deg) scale(0.9); } }

/* ---------- لودر تعویض صفحه ---------- */
#chPageLoader {
    position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center;
    background: radial-gradient(circle at 50% 45%, #2a1a52 0%, #17102e 72%);
    opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease;
}
#chPageLoader.show { opacity: 1; visibility: visible; }
.ch-loader-core { position: relative; width: 150px; height: 150px; display: grid; place-items: center; }
.ch-loader-core .r1, .ch-loader-core .r2 { position: absolute; border-radius: 50%; border: 3px solid transparent; }
.ch-loader-core .r1 { width: 150px; height: 150px; border-top-color: #a855f7; border-right-color: #ec4899; animation: ch-spin 1.1s linear infinite; }
.ch-loader-core .r2 { width: 116px; height: 116px; border-bottom-color: #14b8a6; border-left-color: #facc15; animation: ch-spin 1.5s linear infinite reverse; }
@keyframes ch-spin { to { transform: rotate(360deg); } }
.ch-loader-core .chelle-logo { width: 72px; height: 72px; }
.ch-loader-word {
    position: absolute; bottom: -44px; font-weight: 800; letter-spacing: 2px;
    background: linear-gradient(90deg, #a855f7, #ec4899, #14b8a6);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ---------- رفع بقایای رنگ برند قدیمی (کلاس‌های هاردکدشده) ---------- */
.text-primary { color: var(--pl-primary) !important; }
.bg-primary,
.badge.bg-primary { background-color: var(--pl-primary) !important; }
.btn-outline-primary {
    color: var(--pl-primary); border-color: var(--pl-primary);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: var(--pl-primary) !important;
    border-color: var(--pl-primary) !important; color: #fff !important;
}
.form-check-input:checked { background-color: var(--pl-primary); border-color: var(--pl-primary); }
.page-link { color: var(--pl-primary); }
.page-item.active .page-link {
    background-color: var(--pl-primary) !important; border-color: var(--pl-primary) !important;
}
.login-hero { background-image: var(--pl-gradient) !important; }

/* ---------- احترام به کاهش حرکت ---------- */
@media (prefers-reduced-motion: reduce) {
    .ch-blob, .logo-float, .logo-spin,
    .ch-loader-core .r1, .ch-loader-core .r2 { animation: none !important; }
    .card, .metric-card { transition: none !important; }
}