:root{--brand-navy:#2a3042;--brand-gold:#C7A245;--card-bg:#fff;--card-radius:16px;--shadow-soft:0 8px 24px rgba(0,0,0,.06)}


/* فونت عمومی برای همه متن‌ها */
/* فونت پیش‌فرض کل پروژه با اعداد فارسی */
html, body {
  font-family: "Vazirmatn FD", "Vazirmatn", "IRANSans", Tahoma, sans-serif !important;
  direction: rtl;
  text-align: right;
}


/* متن عمومی مشکی + اسکرول‌بار لطیف */
body{color:#111}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:8px}
*::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.3)}

/* Sidebar */
.sidebar{background:var(--brand-navy);border-left:1px solid rgba(255,255,255,.08)}
.sidebar .brand,.sidebar button,.nav-item{color:var(--brand-gold)!important}
.nav-item{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:.75rem;margin-bottom:.25rem;border:1px solid transparent}
.nav-item:hover{background:rgba(255,255,255,.06);border-color:rgba(231,206,140,.25)}
.nav-item.is-active,
.submenu-item.is-active {
  background: linear-gradient(90deg, rgba(231,206,140,.18), rgba(231,206,140,.05));
  color: #fff !important;
  border-color: rgba(231,206,140,.35);
}

/* مطمئن شو که فقط یکی روشن میشه */
.nav-item.is-active .submenu-item.is-active {
  background: none !important;
  color: inherit !important;
  border: none !important;
}

/* بستن سایدبار در دسکتاپ */
.sidebar.force-hide{transform:translateX(100%)!important}
/* دکمه شناور بازکردن سایدبار */
#openSidebarBtn{background:var(--brand-navy);z-index: 10;color:var(--brand-gold);border:1px solid rgba(199,162,69,.3);transition:transform .2s}
#openSidebarBtn:hover{transform:scale(1.05)}

/* Cards */
.card{background:var(--card-bg);border:1px solid #eee;border-radius:var(--card-radius);padding:16px;box-shadow:var(--shadow-soft)}
.card-title{font-weight:800;font-size:1rem;margin-bottom:.5rem;color:#111}

/* Alerts */
.alert{padding:.75rem 1rem;border-radius:.75rem;border:1px solid #eee;color:#111}
.alert-success{background:#ecfdf5;border-color:#a7f3d0}
.alert-error{background:#fef2f2;border-color:#fecaca}
.alert-warn{background:#fffbeb;border-color:#fde68a}

/* Charts */
.kpi-card{display:flex;align-items:center;gap:12px;border-radius:16px;padding:16px;color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.06)}
.kpi-icon{width:44px;height:44px;min-width:44px;border-radius:9999px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.kpi-icon svg{width:22px;height:22px;color:#fff}
.kpi-text{flex:1;text-align:right}
.kpi-title{font-size:.9rem;opacity:.95}
.kpi-value{font-size:1.6rem;font-weight:900;margin-top:.1rem}

.gradient-purple{background:linear-gradient(135deg,#1f4170 0%,#686fbb 100%)} /* کل مشتریان */
.gradient-orange{background:linear-gradient(135deg,#ffb36b 0%,#ff6b6b 100%)} /* تراکنش‌ها */
.gradient-pink{background:linear-gradient(135deg,#ff6aa2 0%,#b56bff 100%)}   /* حضوری */
.gradient-blue{background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%)}   /* آنلاین */




/* === Customers accordion === */
:root{--brand-navy:#2a3042;--brand-gold:#d0d3de;}
.nav-accordion{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:.5rem; padding:.55rem .75rem; border-radius:.75rem;
  color:var(--brand-gold); border:1px solid transparent; background:transparent;
}
.nav-accordion:hover{background:rgba(255,255,255,.06);border-color:rgba(231,206,140,.25)}
.nav-accordion[aria-expanded="true"]{background:linear-gradient(90deg,rgba(231,206,140,.18),rgba(231,206,140,.05));color:#fff!important;border-color:rgba(231,206,140,.35)}
.nav-accordion .chevron{transition:transform .2s ease}
.nav-accordion[aria-expanded="true"] .chevron{transform:rotate(180deg)}
.submenu-item.is-active{background:linear-gradient(90deg,rgba(231,206,140,.18),rgba(231,206,140,.05));border-color:rgba(231,206,140,.35);color:#fff!important}

.submenu{ padding:.25rem .25rem .35rem .25rem; }
.submenu-item{
  display:block; padding:.45rem .75rem; margin:.15rem 0; border-radius:.6rem;
  color:var(--brand-gold); border:1px solid transparent;
  font-size:.925rem;
  padding-right: 22px;
}
.submenu-item:hover{ background:rgba(255,255,255,.06); border-color:rgba(231,206,140,.25); }

/* مطمئن شو متن‌های عمومی صفحه مشکی می‌مانند */
main, .card, .card-title, .alert { color:#111; }




/* کشویی‌ها */
.open-box { box-shadow: 0 8px 24px rgba(0,0,0,.08); }
[data-collapsor] { transition: box-shadow .15s ease; }
[data-collapsor]:hover { box-shadow: 0 4px 12px rgba(0,0,0,.06); }

/* رنگ‌های برند موجودت رو استفاده می‌کنیم */
.text-brand-gold{ color: var(--brand-gold); }
.bg-brand-navy{ background: var(--brand-navy); }

.mb-6.text-center { 
    padding-top: 51px;
}
main.max-w-6xl.mx-auto.px-4.py-6.md\:pr-64.pt-20.md\:pt-6 {
    padding-top: 82px;
}
/* === heeader === */

header.fixed.top-0.left-0.right-0.z-30.bg-white\/90.backdrop-blur.border-b.px-4.h-14.flex.items-center.justify-between.md\:pr-64{z-index:8;height:66px}




/*=== header bar =====*/
:root{
  --sidebar-w:16rem;   /* پهنای سایدبار سمت راست */
  --topbar-h:64px;     /* ارتفاع نوار بالا */
  --gutter:24px;       /* فاصله داخلی صفحه */
}
@media (max-width:767px){
  :root{ --sidebar-w:0px; --topbar-h:56px; --gutter:12px; }
}

/* تاپ‌بار با بلور سبک */
.topbar{ backdrop-filter:saturate(180%) blur(6px); }

/* دکمه آیکونی */
.btn-icon{
  width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center;background:#f8fafc;border:1px solid #e5e7eb;
}

/* Dropdown */
.dropdown{ position:relative }
.dropdown-menu{
  position:absolute; top:calc(100% + .5rem); inset-inline-end:0; min-width:12rem;
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  box-shadow:0 12px 28px rgba(17,24,39,.12); padding:.5rem; display:none; z-index:60;
}
.dropdown.open .dropdown-menu{ display:block }

/* نقطه اعلان با انیمیشن پرپر */
.ping-dot{ position:absolute; top:-2px; left:-2px; width:10px; height:10px; border-radius:9999px; background:#ef4444 }
.ping-dot::after{
  content:""; position:absolute; inset:-6px; border-radius:9999px; border:2px solid rgba(239,68,68,.6);
  animation:ping 1.5s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ping{ 75%,100%{ transform:scale(2); opacity:0 } }

/* یادت نره: به container اصلیت padding-top بده تا زیر نوار نره */
.main-padding-top{ padding-top: calc(var(--topbar-h) + var(--gutter)) !important; }

header.topbar.fixed.top-0.inset-x-0.z-30.bg-white\/90.border-b.border-slate-200\/70 {
    z-index: 8;
}





/* ====== PROFILE WELCOME CARD (exact like screenshot) ====== */

/* خود کارت بیرونی: پدینگ صفر تا لبه‌ها تمیز باشد */
.card.shadow-sm.overflow-hidden{
  padding:0 !important;
  border-radius:18px !important;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
}

/* کانتینر داخلی که کلاس tailwind bg-indigo-50/70 دارد */
.card.shadow-sm.overflow-hidden > .bg-indigo-50\/70,
.card.shadow-sm.overflow-hidden > [class*="bg-indigo-50"]{
  position:relative;
  padding:16px 16px 18px !important;
  border-radius:18px !important;
  background:#d5dafa !important;                 /* بنر بنفش روشن */
  min-height:150px;
}

/* ردیف بالای خوش‌آمد + آواتار */
.card.shadow-sm.overflow-hidden > .bg-indigo-50\/70 .flex.items-center.justify-between{
  align-items:flex-start; /* مطابق عکس، متن کمی بالاتر باشد */
}

/* تیترها */
.card.shadow-sm.overflow-hidden .text-indigo-800{
  color:#3f3dc7 !important;                       /* ! Welcome Back */
  font-weight:800 !important;
  font-size:14px !important;
}
.card.shadow-sm.overflow-hidden .text-indigo-600\/80,
.card.shadow-sm.overflow-hidden .text-indigo-600\2f 80{
  color:#5a67ea !important;                       /* Skote Dashboard */
  font-size:12px !important;
  opacity:1 !important;
}

/* آواتار – بزرگ‌تر، رینگ سفید، سایه، کمی روی بنر سُر بخورد */
.card.shadow-sm.overflow-hidden > .bg-indigo-50\/70 .relative{
  position:relative;
}
.card.shadow-sm.overflow-hidden > .bg-indigo-50\/70 .relative img{
  width:72px; height:72px; border-radius:999px;
  object-fit:cover;
  box-shadow:0 0 0 6px #fff, 0 8px 20px rgba(0,0,0,.12);
  transform: translateY(10px);                    /* مثل عکس کمی پایین‌تر */
}
.license-pulse{
  width:14px;height:14px;border-radius:9999px;background:#10b981;
  position:absolute; right:-6px; bottom:-6px;
  box-shadow:0 0 0 0 rgba(16,185,129,.55);
  animation:pulse 1.8s infinite ease-out;
}
@keyframes pulse{
  0%{transform:scale(.9); box-shadow:0 0 0 0 rgba(16,185,129,.55)}
  70%{transform:scale(1); box-shadow:0 0 0 12px rgba(16,185,129,0)}
  100%{transform:scale(.9); box-shadow:0 0 0 0 rgba(16,185,129,0)}
}

/* سطر آمار سه‌تایی زیر بنر */
.card.shadow-sm.overflow-hidden .grid.grid-cols-3.text-center.mt-4{
  background:#fff;                                /* مثل کارت نمونه، بخش پایین سفید است */
  border-radius:12px;
  margin-top:16px; padding:12px 8px;
}
.card.shadow-sm.overflow-hidden .grid.grid-cols-3 .text-sm.font-bold{
  font-size:15px !important; font-weight:800 !important; color:#111827 !important;
}
.card.shadow-sm.overflow-hidden .grid.grid-cols-3 .text-\[11px\].text-gray-500{
  font-size:12px !important; color:#6b7280 !important;
}

/* فوتر کارت: نام/سمت سمت راست + دکمه آبی View Profile سمت چپ */
.card.shadow-sm.overflow-hidden .flex.items-center.justify-between.mt-4{
  margin-top:14px !important;
}
.card.shadow-sm.overflow-hidden .text-sm.font-bold{
  font-weight:900 !important; color:#111827 !important;
}
.card.shadow-sm.overflow-hidden .text-xs.text-gray-500{
  color:#6b7280 !important; font-size:12px !important;
}

/* دکمه «مشاهده پروفایل» مثل نمونه (آبی گرد با فلش) */
.card.shadow-sm.overflow-hidden .btn-primary{
  background:#4f46e5 !important; color:#fff !important;
  border-radius:10px; padding:8px 12px; font-size:12px; font-weight:800;
  display:inline-flex; align-items:center; gap:6px;
  box-shadow:0 6px 14px rgba(79,70,229,.2);
}
.card.shadow-sm.overflow-hidden .btn-primary:hover{ background:#4338ca !important; }

/* ——— اختیاری: اگر می‌خواهی بنر فقط نیمهٔ بالایی کارت باشد ——— */
/* این حالت بنر را فقط بالا نشان می‌دهد و پایین کارت سفید می‌شود */
.card.shadow-sm.overflow-hidden > .bg-indigo-50\/70::after,
.card.shadow-sm.overflow-hidden > [class*="bg-indigo-50"]::after{
  content:"";
  position:absolute; inset:auto 0 0 0; height:calc(100% - 88px);
  background:#fff; border-bottom-left-radius:18px; border-bottom-right-radius:18px;
  z-index:0;
}
.card.shadow-sm.overflow-hidden > .bg-indigo-50\/70 > *{ position:relative; z-index:1; }
.cart-p {
    width: 40%;
    margin-bottom: 34px;
}

/* روی موبایل (زیر 768px) عرض بشه 100٪ */


#clock, .fa-digits { font-family: "Vazirmatn FD", "Vazirmatn", sans-serif; }

@media (min-width: 768px) {
    .md\:pt-6
 {
        padding-top: 6.5rem !important;
    }
}


img.w-8.h-8.rounded.shadow {
    WIDTH: 50%;
    HEIGHT: 50%;
}

/* کارت/دکمه/ورودی ساده */
.label{display:block;margin-bottom:.35rem;font-size:.85rem;color:#334155}
.input,.select{width:100%;border:1px solid #e5e7eb;border-radius:10px;padding:.55rem .75rem}
.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid #e5e7eb;border-radius:10px;padding:.6rem .9rem}
.btn-primary{background:#0f172a;color:#f5c76a;border-color:#334155}
.btn-primary:hover{background:#111827}
.alert{border-radius:10px;padding:.6rem .8rem}
.alert-error{background:#fee2e2;color:#b91c1c}
.tbl{width:100%;border-collapse:separate;border-spacing:0}
.tbl th,.tbl td{padding:.65rem .7rem;border-bottom:1px solid #e5e7eb;font-size:.9rem}
.badge{display:inline-block;padding:.15rem .45rem;border-radius:999px;font-size:.75rem}
.badge-gold{background:#fef3c7;color:#92400e}
.badge-soft{background:#e2e8f0;color:#334155}
.p-5 .kpi-card{background:#0f172a;color:#fef3c7;border:1px solid rgba(245,199,106,.4);border-radius:14px;padding:14px}
.kpi-label{font-size:.75rem;opacity:.9}
.kpi-value{font-weight:800;font-size:1.4rem}
/* static/jms/css/app.css */
.select-list { max-height: 320px; overflow-y: auto; }
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono','Courier New', monospace;
}
.cart-grid  {
    display: flex !important;
}
.text-xs{ 
    font-family: "Vazirmatn FD", "Vazirmatn", sans-serif;
}
/* فقط هرجا این کلاس بود، ارقام لاتین با شکل فارسی نمایش داده می‌شوند */
.fa-digits {
  font-family: "Vazirmatn FD", "Vazirmatn", IRANSans, Tahoma, sans-serif !important;
}

/* اعداد فارسی فقط جایی که لازم داریم */
.fa-digits,
.kpi-card .kpi-value.fa-digits,
.tbl td.fa-digits,
.tbl th.fa-digits {
  font-family: "Vazirmatn FD","Vazirmatn", "IRANSans", Tahoma, Arial, sans-serif !important;
  direction: rtl;
  unicode-bidi: plaintext;
}



.rounded-2xl.shadow-inner {
    width: 45%;
}