/* ══════════════════════════════════════════════════════════════════
   CRM THEME TOKENS  —  یه‌بار تعریف، همه‌جا استفاده
   برای تغییر تم: فقط این مقادیر رو عوض کن
   ══════════════════════════════════════════════════════════════════ */
:root {
  /* Brand */
  --crm-primary:        #6366f1;
  --crm-primary-dark:   #4f46e5;
  --crm-primary-light:  #e0e7ff;
  --crm-brand-blue:     #2d6a9f;
  --crm-brand-navy:     #1e3a5f;

  /* Status */
  --crm-success:        #10b981;
  --crm-success-bg:     #d1fae5;
  --crm-warning:        #f59e0b;
  --crm-warning-bg:     #fef3c7;
  --crm-danger:         #ef4444;
  --crm-danger-dark:    #dc2626;
  --crm-danger-bg:      #fee2e2;
  --crm-info:           #3b82f6;

  /* Neutrals / Slate */
  --crm-surface:        #fff;
  --crm-surface-2:      #f8fafc;
  --crm-surface-3:      #f1f5f9;
  --crm-border:         #e2e8f0;
  --crm-border-dark:    #cbd5e1;
  --crm-text:           #1e293b;
  --crm-text-muted:     #64748b;
  --crm-text-subtle:    #94a3b8;
  --crm-text-dark:      #0f172a;

  /* Hero gradient base */
  --crm-hero-from:      #0f172a;
  --crm-hero-to:        #1e1b4b;

  /* Geometry */
  --crm-radius-card:    16px;
  --crm-radius-sm:      10px;
  --crm-radius-pill:    50px;
  --crm-shadow:         0 1px 8px rgba(0,0,0,.07);
  --crm-shadow-hover:   0 4px 20px rgba(0,0,0,.08);
}

/* ══════════════════════════════════════════════════════════════════
   UTILITY CLASSES  —  جایگزین inline style های تکراری
   ══════════════════════════════════════════════════════════════════ */
.dir-ltr    { direction: ltr !important; }
.dir-rtl    { direction: rtl !important; }
.fs-75      { font-size: .75rem !important; }
.fs-80      { font-size: .8rem  !important; }
.fs-62      { font-size: .62rem !important; }
.text-amber { color: var(--crm-warning)     !important; }
.text-slate { color: var(--crm-text-subtle) !important; }
.text-navy  { color: var(--crm-text-dark)   !important; }

/* ══════════════════════════════════════════════════════════════════
   LAYOUT / MODAL
   ══════════════════════════════════════════════════════════════════ */
/* .modal-lg در همه فرم‌های create/edit یکسان بود — ۶ فایل */
.modal-lg { max-width: 1100px; }

/* ══════════════════════════════════════════════════════════════════
   TABLE
   ══════════════════════════════════════════════════════════════════ */
/* تعریف مشترک hover برای همه جداول — ۱۲ فایل */
.table-hover tbody tr:hover { background-color: var(--crm-surface-2); }

/* ══════════════════════════════════════════════════════════════════
   SELECT2 — RTL overrides  (4–5 فایل تکراری)
   ══════════════════════════════════════════════════════════════════ */
.select2-results__option        { text-align: right !important; direction: rtl; }
.select2-selection__arrow       { left: 3px !important; right: auto !important; }
.select2-container--open .select2-dropdown { direction: rtl; }
.select2-search__field          { direction: rtl; text-align: right; }

/* ══════════════════════════════════════════════════════════════════
   ANIMATIONS  —  keyframes تکراری (۷ + ۵ + ۳ فایل)
   ══════════════════════════════════════════════════════════════════ */
@keyframes crm-spin {
  to { transform: rotate(360deg); }
}
@keyframes crm-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}
@keyframes crm-flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
  20%, 24%, 55%                           { opacity: 0; }
}
.animate-spin    { animation: crm-spin    1s linear infinite; }
.animate-pulse   { animation: crm-pulse   2s ease-in-out infinite; }
.animate-flicker { animation: crm-flicker 3s linear infinite; }

/* ══════════════════════════════════════════════════════════════════
   MINI TOAST  —  toast های محلی (accounts, sms, …)
   ══════════════════════════════════════════════════════════════════ */
.crm-toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(20px);
  background: #1e293b; color: #fff;
  padding: .55rem 1.1rem; border-radius: 999px;
  font-size: .82rem; display: flex; align-items: center; gap: .45rem;
  opacity: 0; transition: opacity .25s, transform .25s;
  z-index: 9999; white-space: nowrap; pointer-events: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
}

/* ══════════════════════════════════════════════════════════════════
   DROP-ZONE / FILE UPLOAD COMPONENT  (3 فایل یکسان)
   ══════════════════════════════════════════════════════════════════ */
.drop-zone {
  border: 2px dashed var(--crm-border-dark);
  border-radius: var(--crm-radius-card);
  padding: 2.5rem 1rem; text-align: center;
  cursor: pointer; transition: border-color .2s, background .2s;
  background: var(--crm-surface-3);
}
.drop-zone.dragover,
.drop-zone:hover      { border-color: var(--crm-primary); background: var(--crm-primary-light); }
.drop-icon            { font-size: 2.5rem; color: var(--crm-text-subtle); margin-bottom: .5rem; }
.drop-label           { font-size: .95rem; font-weight: 600; color: var(--crm-text); }
.drop-sub             { font-size: .78rem; color: var(--crm-text-subtle); margin-top: .25rem; }
.drop-file-name       { font-size: .8rem; color: var(--crm-primary); margin-top: .4rem; font-weight: 500; }

.prog-wrap  { height: 6px; border-radius: 3px; background: var(--crm-border); overflow: hidden; margin-top: .75rem; }
.prog-fill  { height: 100%; border-radius: 3px; background: var(--crm-primary); width: 0; transition: width .3s; }
.loading-txt { font-size: .8rem; color: var(--crm-text-muted); margin-top: .35rem; }

.result-card    { border-radius: var(--crm-radius-sm); padding: 1rem 1.2rem; margin-top: 1rem; font-size: .85rem; }
.result-success { background: var(--crm-success-bg); border: 1px solid #6ee7b7; color: #065f46; }
.result-error   { background: var(--crm-danger-bg);  border: 1px solid #fca5a5; color: #991b1b; }

/* ══════════════════════════════════════════════════════════════════
   PAGE HERO BASE  —  همه صفحات یه hero banner دارن (۱۵ فایل)
   کافیه فقط gradient رو override کنن
   ══════════════════════════════════════════════════════════════════ */
.page-hero {
  background-color: #07080f;
  background-image: linear-gradient(135deg,
      rgba(var(--crm-primary-rgb), .04)  0%,
      rgba(var(--crm-primary-rgb), .38) 52%,
      rgba(var(--crm-primary-rgb), .95) 100%
  );
  border-radius: var(--crm-radius-card); padding: 1.4rem 1.6rem 1.2rem;
  margin-bottom: 1.5rem; position: relative; overflow: hidden; color: #fff;
}
.page-hero-title { font-size: 1.25rem; font-weight: 700; margin-bottom: .15rem; }
.page-hero-sub   { font-size: .82rem; opacity: .75; }
.page-hero::before {
  content: ''; position: absolute; width: 260px; height: 260px;
  border-radius: 50%; opacity: .07; background: #fff;
  top: -80px; left: -60px; pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════
   KPI / DASHBOARD CARDS  (5 فایل)
   ══════════════════════════════════════════════════════════════════ */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: .75rem; }
.kpi-card {
  background: var(--crm-surface); border: 1px solid var(--crm-border);
  border-radius: var(--crm-radius-sm); padding: .9rem 1rem;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  box-shadow: var(--crm-shadow); transition: box-shadow .2s;
}
.kpi-card:hover { box-shadow: var(--crm-shadow-hover); }
.kpi-icon { font-size: 1.6rem; margin-bottom: .3rem; }
.kpi-val  { font-size: 1.35rem; font-weight: 700; color: var(--crm-text); line-height: 1; }
.kpi-lbl  { font-size: .72rem; color: var(--crm-text-muted); margin-top: .2rem; }

/* ══════════════════════════════════════════════════════════════════
   SECTION TITLE  (3–7 فایل)
   ══════════════════════════════════════════════════════════════════ */
.sec-title {
  font-size: .72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--crm-text-subtle);
  margin-bottom: .6rem; padding-bottom: .3rem;
  border-bottom: 1px solid var(--crm-border);
}

/* ══════════════════════════════════════════════════════════════════
   BADGE / RANK  (3 فایل)
   ══════════════════════════════════════════════════════════════════ */
.rank-gold   { color: #d97706; }
.rank-silver { color: #64748b; }
.rank-bronze { color: #92400e; }

/* ══════════════════════════════════════════════════════════════════
   MODAL CONTENT radius  (3 فایل)
   ══════════════════════════════════════════════════════════════════ */
.modal-content { border-radius: var(--crm-radius-card); border: none; }

/* ══════════════════════════════════════════════════════════════════
   ACCOUNTS HERO  (4 فایل accounts/*)
   ══════════════════════════════════════════════════════════════════ */
.acc-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 55%, #4f46e5 100%);
  border-radius: var(--crm-radius-card); padding: 1.4rem 1.6rem 1.2rem;
  margin-bottom: 1.5rem; position: relative; overflow: hidden; color: #fff;
}
.acc-hero::before {
  content: ''; position: absolute; width: 200px; height: 200px;
  border-radius: 50%; opacity: .07; background: #fff;
  top: -60px; left: -50px; pointer-events: none;
}
.acc-hero-title { font-size: 1.2rem; font-weight: 700; }
.acc-hero-sub   { font-size: .8rem; opacity: .7; margin-top: .15rem; }

/* ══════════════════════════════════════════════════════════════════
   ADMIN / SALE HOME  (admin/home, sale/home, supersale/home)
   ══════════════════════════════════════════════════════════════════ */
.adm-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 55%, #4f46e5 100%);
  border-radius: var(--crm-radius-card); padding: 1.5rem 1.8rem;
  margin-bottom: 1.5rem; position: relative; overflow: hidden; color: #fff;
}
.adm-hero::before {
  content: ''; position: absolute; width: 260px; height: 260px;
  border-radius: 50%; opacity: .07; background: #fff;
  top: -80px; left: -60px; pointer-events: none;
}
.adm-hero-title { font-size: 1.4rem; font-weight: 700; margin-bottom: .3rem; }
.adm-hero-sub   { font-size: .85rem; opacity: .75; }
.adm-hero-btn   {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25);
  color: #fff; padding: .45rem 1rem; border-radius: var(--crm-radius-sm);
  font-size: .82rem; font-weight: 500; text-decoration: none;
  margin-top: .8rem; transition: background .2s;
}
.adm-hero-btn:hover  { background: rgba(255,255,255,.25); color: #fff; }
.adm-card      { background: var(--crm-surface); border: 1px solid var(--crm-border); border-radius: var(--crm-radius-sm); overflow: hidden; margin-bottom: 1rem; }
.adm-card-head { padding: .75rem 1rem; background: var(--crm-surface-3); border-bottom: 1px solid var(--crm-border); font-size: .8rem; font-weight: 600; color: var(--crm-text-muted); }
.adm-card-body { padding: .75rem 1rem; }

/* ══════════════════════════════════════════════════════════════════ */

@font-face {
    font-family:"sans";
    src: url("../fonts/IRANSansWeb.eot");
    src: url("../fonts/IRANSansWeb.eot?#iefix")format("embedded-opentype"),
    url("../fonts/IRANSansWeb.woff") format("woff"),
    url("../fonts/IRANSansWeb.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
body{
    font-family: 'sans','tahoma';
}
.pointer{
    cursor: pointer;
}
/*loading*/
.loader {
   margin: 100px auto;
   font-size: 25px;
   width: 1em;
   height: 1em;
   border-radius: 50%;
   position: relative;
   text-indent: -9999em;
   -webkit-animation: load5 1.1s infinite ease;
   animation: load5 1.1s infinite ease;
   -webkit-transform: translateZ(0);
   -ms-transform: translateZ(0);
   transform: translateZ(0);
    position: absolute;
    left: 50%;
    top:100px;
    display: none;
    z-index: 10000;
           }



@-webkit-keyframes load5 {
    0%,
    100% {
        box-shadow: 0em -2.6em 0em 0em #b31e22, 1.8em -1.8em 0 0em rgba(179,30,34, 0.2), 2.5em 0em 0 0em rgba(179,30,34, 0.2), 1.75em 1.75em 0 0em rgba(179,30,34, 0.2), 0em 2.5em 0 0em rgba(179,30,34, 0.2), -1.8em 1.8em 0 0em rgba(179,30,34, 0.2), -2.6em 0em 0 0em rgba(179,30,34, 0.5), -1.8em -1.8em 0 0em rgba(179,30,34, 0.7);
    }
    12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(179,30,34, 0.7), 1.8em -1.8em 0 0em #b31e22, 2.5em 0em 0 0em rgba(179,30,34, 0.2), 1.75em 1.75em 0 0em rgba(179,30,34, 0.2), 0em 2.5em 0 0em rgba(179,30,34, 0.2), -1.8em 1.8em 0 0em rgba(179,30,34, 0.2), -2.6em 0em 0 0em rgba(179,30,34, 0.2), -1.8em -1.8em 0 0em rgba(179,30,34, 0.5);
    }
    25% {
        box-shadow: 0em -2.6em 0em 0em rgba(179,30,34, 0.5), 1.8em -1.8em 0 0em rgba(179,30,34, 0.7), 2.5em 0em 0 0em #b31e22, 1.75em 1.75em 0 0em rgba(179,30,34, 0.2), 0em 2.5em 0 0em rgba(179,30,34, 0.2), -1.8em 1.8em 0 0em rgba(179,30,34, 0.2), -2.6em 0em 0 0em rgba(179,30,34, 0.2), -1.8em -1.8em 0 0em rgba(179,30,34, 0.2);
    }
    37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(179,30,34, 0.2), 1.8em -1.8em 0 0em rgba(179,30,34, 0.5), 2.5em 0em 0 0em rgba(179,30,34, 0.7), 1.75em 1.75em 0 0em #b31e22, 0em 2.5em 0 0em rgba(179,30,34, 0.2), -1.8em 1.8em 0 0em rgba(179,30,34, 0.2), -2.6em 0em 0 0em rgba(179,30,34, 0.2), -1.8em -1.8em 0 0em rgba(179,30,34, 0.2);
    }
    50% {
        box-shadow: 0em -2.6em 0em 0em rgba(179,30,34, 0.2), 1.8em -1.8em 0 0em rgba(179,30,34, 0.2), 2.5em 0em 0 0em rgba(179,30,34, 0.5), 1.75em 1.75em 0 0em rgba(179,30,34, 0.7), 0em 2.5em 0 0em #b31e22, -1.8em 1.8em 0 0em rgba(179,30,34, 0.2), -2.6em 0em 0 0em rgba(179,30,34, 0.2), -1.8em -1.8em 0 0em rgba(179,30,34, 0.2);
    }
    62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(179,30,34, 0.2), 1.8em -1.8em 0 0em rgba(179,30,34, 0.2), 2.5em 0em 0 0em rgba(179,30,34, 0.2), 1.75em 1.75em 0 0em rgba(179,30,34, 0.5), 0em 2.5em 0 0em rgba(179,30,34, 0.7), -1.8em 1.8em 0 0em #b31e22, -2.6em 0em 0 0em rgba(179,30,34, 0.2), -1.8em -1.8em 0 0em rgba(179,30,34, 0.2);
    }
    75% {
        box-shadow: 0em -2.6em 0em 0em rgba(179,30,34, 0.2), 1.8em -1.8em 0 0em rgba(179,30,34, 0.2), 2.5em 0em 0 0em rgba(179,30,34, 0.2), 1.75em 1.75em 0 0em rgba(179,30,34, 0.2), 0em 2.5em 0 0em rgba(179,30,34, 0.5), -1.8em 1.8em 0 0em rgba(179,30,34, 0.7), -2.6em 0em 0 0em #b31e22, -1.8em -1.8em 0 0em rgba(179,30,34, 0.2);
    }
    87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(179,30,34, 0.2), 1.8em -1.8em 0 0em rgba(179,30,34, 0.2), 2.5em 0em 0 0em rgba(179,30,34, 0.2), 1.75em 1.75em 0 0em rgba(179,30,34, 0.2), 0em 2.5em 0 0em rgba(179,30,34, 0.2), -1.8em 1.8em 0 0em rgba(179,30,34, 0.5), -2.6em 0em 0 0em rgba(179,30,34, 0.7), -1.8em -1.8em 0 0em #b31e22;
    }
}
@keyframes load5 {
    0%,
    100% {
        box-shadow: 0em -2.6em 0em 0em #b31e22, 1.8em -1.8em 0 0em rgba(179,30,34, 0.2), 2.5em 0em 0 0em rgba(179,30,34, 0.2), 1.75em 1.75em 0 0em rgba(179,30,34, 0.2), 0em 2.5em 0 0em rgba(179,30,34, 0.2), -1.8em 1.8em 0 0em rgba(179,30,34, 0.2), -2.6em 0em 0 0em rgba(179,30,34, 0.5), -1.8em -1.8em 0 0em rgba(179,30,34, 0.7);
    }
    12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(179,30,34, 0.7), 1.8em -1.8em 0 0em #b31e22, 2.5em 0em 0 0em rgba(179,30,34, 0.2), 1.75em 1.75em 0 0em rgba(179,30,34, 0.2), 0em 2.5em 0 0em rgba(179,30,34, 0.2), -1.8em 1.8em 0 0em rgba(179,30,34, 0.2), -2.6em 0em 0 0em rgba(179,30,34, 0.2), -1.8em -1.8em 0 0em rgba(179,30,34, 0.5);
    }
    25% {
        box-shadow: 0em -2.6em 0em 0em rgba(179,30,34, 0.5), 1.8em -1.8em 0 0em rgba(179,30,34, 0.7), 2.5em 0em 0 0em #b31e22, 1.75em 1.75em 0 0em rgba(179,30,34, 0.2), 0em 2.5em 0 0em rgba(179,30,34, 0.2), -1.8em 1.8em 0 0em rgba(179,30,34, 0.2), -2.6em 0em 0 0em rgba(179,30,34, 0.2), -1.8em -1.8em 0 0em rgba(179,30,34, 0.2);
    }
    37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(179,30,34, 0.2), 1.8em -1.8em 0 0em rgba(179,30,34, 0.5), 2.5em 0em 0 0em rgba(179,30,34, 0.7), 1.75em 1.75em 0 0em #b31e22, 0em 2.5em 0 0em rgba(179,30,34, 0.2), -1.8em 1.8em 0 0em rgba(179,30,34, 0.2), -2.6em 0em 0 0em rgba(179,30,34, 0.2), -1.8em -1.8em 0 0em rgba(179,30,34, 0.2);
    }
    50% {
        box-shadow: 0em -2.6em 0em 0em rgba(179,30,34, 0.2), 1.8em -1.8em 0 0em rgba(179,30,34, 0.2), 2.5em 0em 0 0em rgba(179,30,34, 0.5), 1.75em 1.75em 0 0em rgba(179,30,34, 0.7), 0em 2.5em 0 0em #b31e22, -1.8em 1.8em 0 0em rgba(179,30,34, 0.2), -2.6em 0em 0 0em rgba(179,30,34, 0.2), -1.8em -1.8em 0 0em rgba(179,30,34, 0.2);
    }
    62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(179,30,34, 0.2), 1.8em -1.8em 0 0em rgba(179,30,34, 0.2), 2.5em 0em 0 0em rgba(179,30,34, 0.2), 1.75em 1.75em 0 0em rgba(179,30,34, 0.5), 0em 2.5em 0 0em rgba(179,30,34, 0.7), -1.8em 1.8em 0 0em #b31e22, -2.6em 0em 0 0em rgba(179,30,34, 0.2), -1.8em -1.8em 0 0em rgba(179,30,34, 0.2);
    }
    75% {
        box-shadow: 0em -2.6em 0em 0em rgba(179,30,34, 0.2), 1.8em -1.8em 0 0em rgba(179,30,34, 0.2), 2.5em 0em 0 0em rgba(179,30,34, 0.2), 1.75em 1.75em 0 0em rgba(179,30,34, 0.2), 0em 2.5em 0 0em rgba(179,30,34, 0.5), -1.8em 1.8em 0 0em rgba(179,30,34, 0.7), -2.6em 0em 0 0em #b31e22, -1.8em -1.8em 0 0em rgba(179,30,34, 0.2);
    }
    87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(179,30,34, 0.2), 1.8em -1.8em 0 0em rgba(179,30,34, 0.2), 2.5em 0em 0 0em rgba(179,30,34, 0.2), 1.75em 1.75em 0 0em rgba(179,30,34, 0.2), 0em 2.5em 0 0em rgba(179,30,34, 0.2), -1.8em 1.8em 0 0em rgba(179,30,34, 0.5), -2.6em 0em 0 0em rgba(179,30,34, 0.7), -1.8em -1.8em 0 0em #b31e22;
    }
}


/*read more*/
.read-more-state {
    display: none;
}

.read-more-target {
    opacity: 0;
    max-height: 0;
    font-size: 0;
    transition: .25s ease;
}

.read-more-state:checked ~ .read-more-wrap .read-more-target {
    opacity: 1;
    font-size: inherit;
    max-height: 999em;
}

.read-more-state ~ .read-more-trigger:before {
    content: 'Show more';
}

.read-more-state:checked ~ .read-more-trigger:before {
    content: 'Show less';
}

.read-more-trigger {
    cursor: pointer;
    display: inline-block;
    padding: 0 .5em;
    color: #666;
    font-size: .9em;
    line-height: 2;
    border: 1px solid #ddd;
    border-radius: .25em;
}


a,a:visited,a:hover,a:active{
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    position:relative;
    transition:0.5s color ease;
    color:#1b1e21;
}
a:hover{
    color:#d73444;
}
.mobileFont7{
    font-size: 0.7rem;
}
.mobileFont5{
    font-size: 0.5rem;
}

/* ══════════════════════════════════════════════════════════════════
   CRM UI COMPONENTS — کامپوننت‌های مشترک فرم، دکمه، badge
   ══════════════════════════════════════════════════════════════════ */

@keyframes crm-shake {
    0%,100%{transform:translateX(0)}
    20%{transform:translateX(-6px)}
    40%{transform:translateX(6px)}
    60%{transform:translateX(-4px)}
    80%{transform:translateX(4px)}
}

/* ── Floating icon inside input ── */
.form-floating-label { position: relative; }
.form-floating-label input,
.form-floating-label select { padding-right: 2.5rem; }
.form-floating-label > i {
    position: absolute;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    font-size: .8rem;
    pointer-events: none;
    z-index: 1;
}

/* ── Gradient button ── */
.btn-gradient {
    background: linear-gradient(45deg, var(--crm-primary, #6c5ce7), var(--crm-success, #00b894));
    color: #fff;
    border: none;
}
.btn-gradient:hover { opacity: .88; color: #fff; }

/* ── Progress/loader bar (top of modal, card, etc.) ── */
.loader-bar {
    height: 3px;
    background: linear-gradient(45deg, var(--crm-primary, #6c5ce7), var(--crm-success, #00b894));
    transition: width .4s ease;
}

/* ── ID badge (کد آبشاری شناسه ردیف) ── */
.crm-badge-id {
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    color: #fff;
    border-radius: 2rem;
    padding: .15rem .55rem;
    font-size: .75rem;
    font-weight: 600;
}

/* ── Level badges (طلا / نقره / برنز) ── */
.level-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .15rem .5rem;
    border-radius: 2rem;
    font-size: .7rem;
    font-weight: 700;
}
.level-gold   { background: linear-gradient(135deg,#f59e0b,#fbbf24); color:#fff; }
.level-silver { background: linear-gradient(135deg,#94a3b8,#cbd5e1); color:#fff; }
.level-bronze { background: linear-gradient(135deg,#b45309,#d97706); color:#fff; }

/* ══════════════════════════════════════════════════════════════════
   CRM-LIST — utilities مشترک برای همه صفحات با AJAX table
   استفاده: CrmList class در custom.js + این کلاس‌ها در HTML
   ══════════════════════════════════════════════════════════════════ */

/* ── Filter Bar ── */
.crm-filter-bar {
    background: var(--crm-surface, #fff);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: .5rem;
    padding: 1rem 1.25rem .75rem;
    margin-bottom: 1.25rem;
}
.crm-filter-bar .filter-group { position: relative; }
.crm-filter-bar .filter-group > i {
    position: absolute;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
    pointer-events: none;
    font-size: .8rem;
    z-index: 1;
}
.crm-filter-bar .form-control,
.crm-filter-bar .form-select {
    padding-right: 2rem;
    font-size: .85rem;
    border-radius: .375rem;
}

/* ── Sortable table headers ── */
.crm-sortable th[data-sort] {
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    font-size: .8rem;
    letter-spacing: .03em;
}
.crm-sortable th[data-sort] .sort-icon { margin-right: .25rem; opacity: .35; font-size: .7rem; }
.crm-sortable th[data-sort].sort-active .sort-icon { opacity: 1; color: var(--bs-primary, #6c5ce7); }
.crm-sortable tbody tr { transition: background .12s; }
.crm-sortable td { vertical-align: middle; font-size: .85rem; }

/* ── Skeleton loading ── */
@keyframes crm-skel-wave { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.crm-skeleton {
    background: linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);
    background-size: 200% 100%;
    animation: crm-skel-wave 1.4s infinite;
    border-radius: .25rem;
    display: inline-block;
}

/* ── Table overlay / spinner ── */
.crm-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.6);
    z-index: 10;
    border-radius: .5rem;
    align-items: center;
    justify-content: center;
}
.crm-overlay.show { display: flex; }
.crm-spinner {
    width: 2rem;
    height: 2rem;
    border: 3px solid #dee2e6;
    border-top-color: var(--crm-primary, #6c5ce7);
    border-radius: 50%;
    animation: crm-spin .7s linear infinite;
}

/* ── Pagination ── */
.crm-pagination { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.crm-pagination .page-btn {
    min-width: 2rem;
    height: 2rem;
    border: 1px solid #dee2e6;
    background: #fff;
    border-radius: .375rem;
    font-size: .8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .15s;
    line-height: 1;
}
.crm-pagination .page-btn:hover  { background: var(--crm-primary,#6c5ce7); color:#fff; border-color:var(--crm-primary,#6c5ce7); }
.crm-pagination .page-btn.active { background: var(--crm-primary,#6c5ce7); color:#fff; border-color:var(--crm-primary,#6c5ce7); font-weight:700; }
.crm-pagination .page-btn.disabled { opacity:.4; pointer-events:none; }

/* ── Dark mode adjustments ── */
[data-theme="dark"] .crm-filter-bar { background: var(--crm-surface-2,#2d2d3d); border-color: rgba(255,255,255,.07); }
[data-theme="dark"] .crm-sortable thead th { background: var(--crm-surface-3,#232336); }
[data-theme="dark"] .crm-pagination .page-btn { background: var(--crm-surface-2,#2d2d3d); border-color:#444; color:#ccc; }
[data-theme="dark"] .crm-overlay { background: rgba(30,30,50,.6); }
[data-theme="dark"] .crm-skeleton { background: linear-gradient(90deg,#2a2a3d 25%,#333348 50%,#2a2a3d 75%); background-size:200% 100%; }

/* ══════════════════════════════════════════════════════════════════
   DEVICE TREE PAGE
   ══════════════════════════════════════════════════════════════════ */
.dv-form-card { background:#fff; border-radius:16px; box-shadow:0 1px 8px rgba(0,0,0,.07); overflow:hidden; margin-bottom:1.2rem; }
.dv-form-head { background:linear-gradient(135deg,var(--crm-brand-navy),var(--crm-brand-blue)); padding:.9rem 1.3rem; display:flex; align-items:center; gap:.6rem; }
.dv-form-head h5 { margin:0; color:#fff; font-size:.92rem; font-weight:700; }
.dv-form-body { padding:1.2rem 1.3rem; }
.dv-field-label { font-size:.78rem; font-weight:700; color:#475569; margin-bottom:.3rem; }
.dv-field-input { width:100%; border:1.5px solid #e2e8f0; border-radius:10px; padding:.5rem .85rem; font-size:.875rem; color:#1e293b; background:#f8fafc; transition:border-color .15s; outline:none; height:40px; }
.dv-field-input:focus { border-color:var(--crm-brand-blue); background:#fff; }
.dv-parent-pill { display:inline-flex; align-items:center; gap:.4rem; background:#eff6ff; border:1.5px solid #bfdbfe; border-radius:20px; padding:.25rem .8rem; font-size:.75rem; font-weight:600; color:#1d4ed8; margin-top:.4rem; }
.dv-parent-pill.root { background:#f0fdf4; border-color:#bbf7d0; color:#166534; }
.dv-parent-pill.error { background:#fef2f2; border-color:#fecaca; color:#991b1b; }
.dv-btn-save { background:linear-gradient(135deg,var(--crm-brand-navy),var(--crm-brand-blue)); color:#fff; border:none; border-radius:10px; padding:0 1.4rem; height:40px; font-size:.875rem; font-weight:700; cursor:pointer; transition:opacity .15s; }
.dv-btn-save:hover { opacity:.88; }
.dv-btn-cancel { background:#f1f5f9; color:#64748b; border:1.5px solid #e2e8f0; border-radius:10px; padding:0 1rem; height:40px; font-size:.875rem; cursor:pointer; display:none; }
.dv-btn-reset { background:#fef9c3; color:#854d0e; border:1.5px solid #fde047; border-radius:10px; padding:0 .9rem; height:40px; font-size:.78rem; cursor:pointer; }

.dv-tree-card { background:#fff; border-radius:16px; box-shadow:0 1px 8px rgba(0,0,0,.07); overflow:hidden; }
.dv-tree-head { display:flex; align-items:center; justify-content:space-between; padding:.9rem 1.3rem; border-bottom:1px solid #f1f5f9; }
.dv-tree-head h5 { margin:0; font-size:.92rem; font-weight:700; color:#1e293b; }
.dv-count-badge { background:#dbeafe; color:#1e40af; border-radius:20px; padding:.18rem .75rem; font-size:.74rem; font-weight:700; }
.dv-search-bar { display:flex; align-items:center; gap:.5rem; margin:.75rem 1.3rem; background:#f8fafc; border:1.5px solid #e2e8f0; border-radius:50px; padding:.35rem .9rem; }
.dv-search-bar:focus-within { border-color:var(--crm-brand-blue); }
.dv-search-bar i { color:#94a3b8; font-size:.82rem; }
.dv-search-bar input { border:none; outline:none; background:transparent; flex:1; font-size:.85rem; color:#1e293b; }
.dv-table { width:100%; border-collapse:collapse; direction:rtl; }
.dv-table thead th { background:#f8fafc; font-size:.72rem; font-weight:700; color:#64748b; padding:.55rem .9rem; border-bottom:1.5px solid #e2e8f0; white-space:nowrap; text-align:right; }
.dv-table tbody tr { border-bottom:1px solid #f1f5f9; transition:background .1s; }
.dv-table tbody tr:hover { background:#f8fafc !important; }
.dv-table td { padding:.55rem .9rem; font-size:.855rem; color:#334155; vertical-align:middle; }
.dv-lvl-0 { border-right:3px solid #7c3aed !important; }
.dv-lvl-1 { border-right:3px solid #2563eb !important; background:#fafbff; }
.dv-lvl-2 { border-right:3px solid #0891b2 !important; background:#f7feff; }
.dv-lvl-3 { border-right:3px solid #059669 !important; background:#f7fffe; }
.dv-lvl-deep { border-right:3px solid #9ca3af !important; }
.dv-parent-active { box-shadow:inset 0 0 0 2px #f59e0b !important; background:#fffbeb !important; }
.dv-child-badge { background:#e0f2fe; color:#0c4a6e; border-radius:20px; padding:.1rem .5rem; font-size:.68rem; font-weight:700; margin-right:.3rem; }
.dv-breadcrumb { font-size:.68rem; color:#94a3b8; margin-top:.15rem; }
.dv-tbl-btn { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px; border:none; font-size:.78rem; cursor:pointer; transition:opacity .15s; }
.dv-tbl-btn:hover { opacity:.75; }
.dv-tbl-btn-blue   { background:#dbeafe; color:#1d4ed8; }
.dv-tbl-btn-indigo { background:#ede9fe; color:#5b21b6; }
.dv-tbl-btn-green  { background:#dcfce7; color:#166534; }
.dv-tbl-btn-red    { background:#fee2e2; color:#991b1b; }
.dv-empty { text-align:center; padding:3rem; color:#94a3b8; }
.dv-empty i { font-size:2rem; display:block; margin-bottom:.6rem; opacity:.35; }
.dv-hidden { display:none !important; }

[data-theme="dark"] .dv-form-card,
[data-theme="dark"] .dv-tree-card { background:var(--crm-surface-1,#1e1e2d); }
[data-theme="dark"] .dv-field-input { background:var(--crm-surface-2,#2d2d3d); border-color:#444; color:#e2e8f0; }
[data-theme="dark"] .dv-table thead th { background:var(--crm-surface-2,#2d2d3d); }
[data-theme="dark"] .dv-table tbody tr:hover { background:var(--crm-surface-2,#2d2d3d) !important; }
[data-theme="dark"] .dv-search-bar { background:var(--crm-surface-2,#2d2d3d); border-color:#444; }

.block-content{ padding-bottom: 20px Im !important;}

/* ══ Toggle-Card — چک‌باکس‌های پذیرش (رمز / هزینه) ══════════════════════════ */
.toggle-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: .45rem;
    padding: .65rem .9rem;
    border-radius: .75rem;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    cursor: pointer;
    transition: all .18s;
    user-select: none;
}
.toggle-card input[type="checkbox"] { display: none; }

.toggle-card-switch {
    width: 2.1rem; height: 1.2rem;
    border-radius: 1rem;
    background: #cbd5e1;
    position: relative;
    flex-shrink: 0;
    transition: background .18s;
}
.toggle-card-switch::after {
    content: '';
    position: absolute;
    width: .9rem; height: .9rem;
    border-radius: 50%;
    background: #fff;
    top: .15rem; right: .15rem;
    transition: transform .18s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.toggle-card-text {
    font-size: .8rem;
    font-weight: 600;
    color: #64748b;
    line-height: 1.4;
    flex: 1;
    transition: color .18s;
}
.toggle-card-icon {
    font-size: .95rem;
    flex-shrink: 0;
    opacity: .45;
    transition: opacity .18s;
}

/* checked state */
.toggle-card.is-checked {
    border-color: #fca5a5;
    background: #fff1f2;
}
.toggle-card.is-checked .toggle-card-switch {
    background: #ef4444;
}
.toggle-card.is-checked .toggle-card-switch::after {
    transform: translateX(-0.9rem);
}
.toggle-card.is-checked .toggle-card-text { color: #b91c1c; }
.toggle-card.is-checked .toggle-card-icon { opacity: 1; color: #ef4444; }