/* ==========================================================================
   SHETAB NEO — Complete UI Redesign
   RTL / WHMCS compatible
   ========================================================================== */

:root{
  --neo-bg:#f4f7fb;
  --neo-surface:#ffffff;
  --neo-surface-2:#f8fafc;
  --neo-ink:#172033;
  --neo-muted:#718096;
  --neo-line:#e7ecf3;
  --neo-primary:#2563eb;
  --neo-primary-2:#06b6d4;
  --neo-primary-soft:#edf5ff;
  --neo-dark:#111827;
  --neo-radius:18px;
  --neo-shadow:0 10px 30px rgba(15,23,42,.055);
  --neo-sidebar:#0b1220;
  --neo-sidebar-2:#111c30;
}

/* ---------- Base ---------- */
html,body{min-height:100%;background:var(--neo-bg)!important}
body.app{
  color:var(--neo-ink)!important;
  font-family:'Vazirmatn',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}
a{transition:color .18s ease,background .18s ease,border-color .18s ease,transform .18s ease}
::selection{background:rgba(37,99,235,.18)}

/* ---------- Left navigation shell ---------- */
aside.nabsbar{
  width:272px!important;
  right:auto!important;
  left:0!important;
  background:linear-gradient(180deg,var(--neo-sidebar) 0%,#0d1728 100%)!important;
  border:0!important;
  box-shadow:12px 0 40px rgba(15,23,42,.12)!important;
  z-index:1030!important;
  padding:0!important;
}
html[dir="rtl"] aside.nabsbar{right:0!important;left:auto!important;box-shadow:-12px 0 40px rgba(15,23,42,.12)!important}

.nabsbar .sidebar-img{
  padding:18px 14px!important;
  height:100%!important;
}
.nabsbar .navbar-brand{
  height:72px;
  margin:0 0 22px!important;
  padding:10px 16px!important;
  justify-content:flex-start!important;
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.075)!important;
  border-radius:16px!important;
  box-shadow:none!important;
}
.nabsbar .navbar-brand:after{
  content:"پنل مشتریان";
  color:#aebbd0;
  font-size:11px;
  margin-right:12px;
  font-weight:500;
}
.nabsbar .navbar-brand-img{
  width:42px!important;height:42px!important;max-height:42px!important;
  object-fit:contain!important;
  filter:none!important;
}
.nabsbar .nab-menu{padding:0!important;margin:0!important;list-style:none!important}
.nabsbar .nab-menu .nabs{margin:4px 0!important;list-style:none!important}
.nabsbar .nab-menu .nab-menu__item{
  min-height:50px;
  display:flex!important;
  align-items:center!important;
  gap:12px;
  padding:0 14px!important;
  border-radius:14px!important;
  color:#9eabc0!important;
  text-decoration:none!important;
  font-size:13px!important;
  font-weight:600!important;
}
.nabsbar .nab-menu .nab-menu__item > i:first-child{
  width:22px;text-align:center;font-size:16px!important;color:#71829b!important;
}
.nabsbar .nab-menu .nab-menu__item .angle{margin-right:auto!important}
.nabsbar .nab-menu .nab-menu__item:hover{
  background:rgba(255,255,255,.055)!important;color:#fff!important;
  transform:translateX(-2px);
}
.nabsbar .nab-menu .nab-menu__item:hover > i:first-child{color:#60a5fa!important}
.nabsbar .nab-menu .nabs.active > .nab-menu__item,
.nabsbar .nab-menu .nab-menu__item.affil{
  background:linear-gradient(90deg,rgba(37,99,235,.20),rgba(6,182,212,.08))!important;
  color:#fff!important;
  border:1px solid rgba(96,165,250,.12)!important;
}
.nabsbar .nab-menu .nab-menu__item.affil > i:first-child,
.nabsbar .nab-menu .nabs.active .nab-menu__item > i:first-child{color:#60a5fa!important}
.nabsbar .nabs-menu{
  padding:5px 12px 6px 0!important;
  margin:0!important;
  border-right:1px solid rgba(148,163,184,.13)!important;
  background:transparent!important;
}
.nabsbar .nabs-menu li{list-style:none!important}
.nabsbar .nabs-menu .nabs-item{
  display:block!important;
  padding:9px 16px!important;
  color:#8090a8!important;
  border-radius:9px!important;
  font-size:12px!important;
  text-decoration:none!important;
}
.nabsbar .nabs-menu .nabs-item:hover{
  background:rgba(255,255,255,.045)!important;color:#e7eef8!important;
}

/* ---------- Main app content ---------- */
.app-content{
  margin-right:272px!important;
  margin-left:0!important;
  min-height:100vh;
  background:var(--neo-bg)!important;
}
html[dir="rtl"] .app-content{margin-right:272px!important;margin-left:0!important}

/* ---------- Top bar ---------- */
header#header.header{
  position:sticky!important;top:0!important;
  min-height:76px!important;
  background:rgba(244,247,251,.86)!important;
  backdrop-filter:blur(18px)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  border:0!important;
  border-bottom:1px solid rgba(226,232,240,.8)!important;
  box-shadow:none!important;
  z-index:900!important;
}
#header .navbar{min-height:76px;padding:12px 0!important}
#header .container-fluid{max-width:1680px}
.header-search-container{max-width:500px!important}
.header-search-input{
  height:46px!important;
  border-radius:14px!important;
  background:#fff!important;
  border:1px solid var(--neo-line)!important;
  box-shadow:0 3px 14px rgba(15,23,42,.035)!important;
  font-size:12px!important;
}
.header-search-input:focus{
  border-color:#93c5fd!important;
  box-shadow:0 0 0 4px rgba(37,99,235,.08)!important;
}
.btn-header-action{
  width:44px!important;height:44px!important;
  border-radius:13px!important;
  border:1px solid var(--neo-line)!important;
  background:#fff!important;
  color:#526174!important;
  box-shadow:0 3px 12px rgba(15,23,42,.04)!important;
}
.btn-header-action:hover{
  color:var(--neo-primary)!important;
  border-color:#c7d8f7!important;
  background:#f8fbff!important;
  transform:translateY(-1px);
}
.badge-count{
  top:-4px!important;right:-4px!important;
  border:3px solid var(--neo-bg)!important;
  background:#ef4444!important;
  box-shadow:none!important;
}

/* User menu in top bar */
.client-menu-container{margin-right:12px}
.client-menu .navbar-nav{gap:5px}
.client-menu .nav-link-custom{
  border-radius:12px!important;
  color:#526174!important;
  font-size:12px!important;
}

.client-menu .nav-link-custom:hover{background:#fff!important;color:var(--neo-primary)!important}
.client-menu .nav-icon-box{
  width:30px;height:30px;border-radius:9px;background:#f1f5f9;color:#64748b;
}
.client-menu .avatar-container{margin-left:6px!important;margin-right:0!important}
.client-menu .client-avatar{width:32px!important;height:32px!important;border-radius:50%!important}
.client-menu .avatar-status-dot{width:8px!important;height:8px!important;background:#22c55e!important;border:2px solid #fff!important;bottom:0!important;left:0!important}

/* ---------- Main content ---------- */
#main-body{padding-top:28px!important;padding-bottom:35px!important}
.primary-content{min-width:0}
#main-body > .container-fluid,
#main-body > .container{max-width:1680px}

/* ---------- Generic cards / panels ---------- */
.card,
.sidebar-card,
.dashboard-panel,
.panel{
  border:1px solid var(--neo-line)!important;
  border-radius:var(--neo-radius)!important;
  background:var(--neo-surface)!important;
  box-shadow:var(--neo-shadow)!important;
}
.card-header{background:transparent!important;border-color:var(--neo-line)!important}
.card-footer{background:transparent!important;border-color:var(--neo-line)!important}
.sidebar-card{overflow:hidden}
.sidebar-card .card-header{padding:16px 18px 11px!important}
.sidebar-card .collapsable-card-body{padding-bottom:8px}
.sidebar-link{
  border-radius:11px!important;
  color:#536174!important;
  font-size:12px!important;
}
.sidebar-link:hover{background:#f3f7fd!important;color:var(--neo-primary)!important}
.sidebar-link.active{
  background:var(--neo-primary-soft)!important;
  color:var(--neo-primary)!important;
}
.sidebar-icon-wrapper{
  width:34px!important;height:34px!important;
  border-radius:10px!important;
  background:#f3f6fa!important;
}
.sidebar-link.active .sidebar-icon-wrapper{
  background:#dceaff!important;
}

/* ---------- Tables ---------- */
.table,.dataTables_wrapper table{
  background:#fff!important;
  border-collapse:separate!important;
  border-spacing:0!important;
}
.table thead th,.dataTables_wrapper thead th{
  background:#f8fafc!important;
  color:#64748b!important;
  border-bottom:1px solid var(--neo-line)!important;
  font-size:11px!important;
  font-weight:700!important;
}
.table td,.table th{border-color:#eef2f6!important}
.table tbody tr:hover{background:#f8fbff!important}
.table-responsive{border-radius:14px}

/* ---------- Forms ---------- */
.form-control,.custom-select,.input-group-text{
  border-color:#e2e8f0!important;
  border-radius:11px!important;
  min-height:44px;
  font-size:12px!important;
}
.form-control:focus,.custom-select:focus{
  border-color:#93c5fd!important;
  box-shadow:0 0 0 4px rgba(37,99,235,.08)!important;
}
.input-group .form-control{border-radius:0 11px 11px 0!important}
.input-group .input-group-prepend .input-group-text{border-radius:11px 0 0 11px!important;background:#f8fafc}

/* ---------- Buttons ---------- */
.btn{
  border-radius:11px!important;
  font-size:12px!important;
  font-weight:600!important;
  padding:.62rem 1rem!important;
}
.btn-primary{
  background:linear-gradient(135deg,#2563eb,#1d4ed8)!important;
  border-color:#2563eb!important;
  box-shadow:0 7px 18px rgba(37,99,235,.18)!important;
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(37,99,235,.22)!important}
.btn-success{background:#10b981!important;border-color:#10b981!important}
.btn-default,.btn-secondary{background:#f3f6fa!important;border-color:#e6ebf2!important;color:#475569!important}

/* ---------- Alerts ---------- */
.alert{border:1px solid transparent!important;border-radius:13px!important;font-size:12px!important}
.alert-success{background:#ecfdf5!important;border-color:#ccefe0!important}
.alert-danger{background:#fff1f2!important;border-color:#ffd8de!important}
.alert-warning{background:#fffbeb!important;border-color:#fde7b0!important}
.alert-info{background:#eff8ff!important;border-color:#cfe8ff!important}

/* ---------- Modals / dropdowns ---------- */
.modal-content{
  border-radius:20px!important;
  border:1px solid var(--neo-line)!important;
  box-shadow:0 30px 80px rgba(15,23,42,.18)!important;
}
.dropdown-menu-custom{
  border:1px solid var(--neo-line)!important;
  background:#fff!important;
  border-radius:16px!important;
  box-shadow:0 18px 50px rgba(15,23,42,.14)!important;
}
.dropdown-item-custom:hover,.dropdown-item-custom.active{background:#f1f6ff!important;color:var(--neo-primary)!important}

/* ---------- Dashboard: asymmetric "command center" ---------- */
.whmcs-dashboard-wrapper{max-width:1680px;margin:0 auto!important}
.neo-dashboard-hero{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:168px;
  margin-bottom:20px;
  padding:28px 32px;
  border-radius:24px;
  background:
    radial-gradient(circle at 15% 20%,rgba(6,182,212,.26),transparent 32%),
    radial-gradient(circle at 85% 0%,rgba(37,99,235,.34),transparent 35%),
    linear-gradient(135deg,#101827,#172a46);
  color:#fff;
  box-shadow:0 18px 45px rgba(15,23,42,.14);
}
.neo-dashboard-hero:after{
  content:"";
  position:absolute;
  width:260px;height:260px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  left:-100px;bottom:-170px;
}
.neo-dashboard-hero h1{font-size:22px;font-weight:800;margin:0 0 7px}
.neo-dashboard-hero p{margin:0;color:#aebed3;font-size:12px}
.neo-hero-actions{display:flex;gap:9px;position:relative;z-index:1}
.neo-hero-action{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 15px;border-radius:12px;
  color:#fff!important;text-decoration:none!important;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.12);
  font-size:11px;font-weight:700;
}
.neo-hero-action.primary{background:#fff;color:#172033!important}
.neo-hero-action:hover{transform:translateY(-2px);background:rgba(255,255,255,.15)}

.stat-cards-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important;
  margin-bottom:16px!important;
}
.stat-card{
  min-height:128px;
  border:1px solid var(--neo-line)!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:var(--neo-shadow)!important;
  padding:20px!important;
}
.stat-card:hover{transform:translateY(-3px)!important;box-shadow:0 16px 35px rgba(15,23,42,.09)!important}
.stat-details .stat-label{color:#8a96a8!important;font-size:10px!important}
.stat-link h4{color:#243044!important;font-size:13px!important}
.stat-badge{font-size:11px!important}
.stat-icon{width:46px!important;height:46px!important;border-radius:13px!important}
.stat-card:nth-child(1){grid-column:span 2;background:linear-gradient(135deg,#f8fbff,#fff)!important}
.stat-card:nth-child(1) .stat-icon{background:#eaf2ff!important;color:#2563eb!important}
.stat-card:nth-child(2) .stat-icon{background:#e8fbf5!important;color:#0f9f74!important}
.stat-card:nth-child(3) .stat-icon{background:#fff0f1!important;color:#e5485d!important}
.stat-card:nth-child(4) .stat-icon{background:#edf8ff!important;color:#0891b2!important}
.stat-card:nth-child(5) .stat-icon{background:#fff8e8!important;color:#d97706!important}
.stat-card:nth-child(6) .stat-icon{background:#f1efff!important;color:#7c3aed!important}

.dashboard-panel{
  padding:20px!important;
  margin-bottom:16px!important;
}
.panel-title{font-size:14px!important;font-weight:800!important;color:#172033!important}
.progress-grid{gap:10px!important}
.progress-item{
  padding:15px!important;
  border:1px solid #edf1f5;
  border-radius:14px;
  background:#fbfcfe;
}
.progress-header{font-size:11px!important;color:#66758a!important}
.progress-track{height:7px!important;background:#edf2f7!important}
.progress-bar{background:linear-gradient(90deg,#2563eb,#06b6d4)!important}

.panel-table{padding:0!important;overflow:hidden}
.panel-table .panel-header{padding:18px 20px!important}
.tickets-table th{background:#f8fafc!important;color:#7a8798!important;font-size:10px!important}
.tickets-table td{font-size:11px!important;padding:14px 16px!important}
.tickets-table tr:hover{background:#f8fbff!important}
.status-badge{background:#eef5ff!important;color:#2563eb!important;border-radius:8px!important}
.btn-primary-custom{border-radius:10px!important;background:#172a46!important}
.btn-action-custom{border-radius:9px!important;background:#f2f5f9!important}

/* ---------- Login / auth ---------- */
.limiter{
  min-height:100vh!important;
  background:
    radial-gradient(circle at 15% 15%,rgba(37,99,235,.12),transparent 30%),
    radial-gradient(circle at 85% 80%,rgba(6,182,212,.10),transparent 28%),
    #f4f7fb!important;
}
.container-login100{min-height:100vh!important;padding:28px!important}
.wrap-login100{
  max-width:1080px!important;
  min-height:620px!important;
  overflow:hidden!important;
  border-radius:28px!important;
  box-shadow:0 25px 70px rgba(15,23,42,.12)!important;
  background:#fff!important;
}
.login100-form{padding:56px!important}
.login100-more{
  background-position:center!important;
  background-size:cover!important;
  position:relative;
}
.login100-more:after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(11,18,32,.78),rgba(37,99,235,.25));
}
.logos img,.logo-img{max-height:58px!important;object-fit:contain}
.login-title{font-size:20px!important;font-weight:800!important;color:#172033!important}
.login100-form .form-control{background:#f8fafc!important}
.login100-form .btn{min-width:110px}

/* ---------- Footer ---------- */
#footer.footer{
  margin-right:272px!important;
  margin-left:0!important;
  border:0!important;
  background:transparent!important;
  color:#94a0b1!important;
  font-size:10px!important;
}
html[dir="rtl"] #footer.footer{margin-right:272px!important;margin-left:0!important}
#footer.footer a{color:#64748b!important;font-weight:700}

/* ---------- Mobile ---------- */
@media (max-width:1199.98px){
  aside.nabsbar{width:245px!important}
  .app-content{margin-right:245px!important}
  html[dir="rtl"] .app-content{margin-right:245px!important}
  #footer.footer{margin-right:245px!important}
  html[dir="rtl"] #footer.footer{margin-right:245px!important}
}
@media (max-width:991.98px){
  aside.nabsbar{width:0!important;overflow:hidden!important}
  .app-content{margin-right:0!important}
  html[dir="rtl"] .app-content{margin-right:0!important}
  #footer.footer{margin-right:0!important}
  html[dir="rtl"] #footer.footer{margin-right:0!important}
  .stat-cards-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .stat-card:nth-child(1){grid-column:span 2}
  .neo-dashboard-hero{padding:24px;min-height:150px}
}
@media (max-width:767.98px){
  #main-body{padding-top:16px!important}
  .header-search-container{display:none!important}
  .neo-dashboard-hero{display:block;padding:22px;margin-bottom:14px}
  .neo-dashboard-hero h1{font-size:18px}
  .neo-hero-actions{margin-top:18px;flex-wrap:wrap}
  .stat-cards-grid{grid-template-columns:1fr 1fr!important;gap:9px!important}
  .stat-card,.stat-card:nth-child(1){grid-column:auto!important;min-height:110px;padding:15px!important}
  .stat-card:nth-child(1){grid-column:span 2!important}
  .dashboard-panel{padding:14px!important}
  .tickets-table{min-width:760px}
}
@media (max-width:420px){
  .stat-cards-grid{grid-template-columns:1fr!important}
  .stat-card:nth-child(1){grid-column:auto!important}
  .neo-dashboard-hero{border-radius:18px}
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

/* ========================================================================== 
   SHETAB NOVA v2 — CRM TYPOGRAPHY + BRAND SIDEBAR
   ========================================================================== */
:root{
  --nova-indigo:#635bff;
  --nova-violet:#8b5cf6;
  --nova-cyan:#06b6d4;
  --nova-pink:#ec4899;
  --nova-emerald:#10b981;
  --nova-amber:#f59e0b;
  --nova-text:#172033;
  --nova-muted:#68758a;
}

/* Larger, more confident typography */
body.app,
body.app input,
body.app button,
body.app select,
body.app textarea{
  font-size:14px!important;
  line-height:1.75!important;
}
body.app .text-muted{font-size:13px!important}
#main-body{font-size:14px!important}
.dashboard-panel{padding:22px!important}
.panel-title{font-size:18px!important;font-weight:800!important;letter-spacing:-.25px}
.stat-card{padding:20px!important;min-height:124px;border-radius:20px!important}
.stat-details .stat-label{font-size:13px!important}
.stat-link h4{font-size:16px!important;font-weight:800!important}
.stat-badge{font-size:13px!important;padding:4px 10px!important}
.stat-icon{width:52px!important;height:52px!important;font-size:20px!important;border-radius:16px!important}
.tickets-table{font-size:14px!important}
.tickets-table th{font-size:13px!important;padding:14px 16px!important}
.tickets-table td{font-size:14px!important;padding:16px!important}
.status-badge{font-size:13px!important;padding:5px 10px!important}
.btn-primary-custom,.btn-action-custom{font-size:13px!important;padding:8px 13px!important}

/* More colorful CRM stat accents */
.stat-card:nth-child(1){border-top:3px solid var(--nova-indigo)!important}
.stat-card:nth-child(2){border-top:3px solid var(--nova-emerald)!important}
.stat-card:nth-child(3){border-top:3px solid var(--nova-pink)!important}
.stat-card:nth-child(4){border-top:3px solid var(--nova-cyan)!important}
.stat-card:nth-child(5){border-top:3px solid var(--nova-amber)!important}
.stat-card:nth-child(6){border-top:3px solid var(--nova-violet)!important}
.icon-primary{background:linear-gradient(135deg,#eef2ff,#e0e7ff)!important;color:var(--nova-indigo)!important}
.icon-success{background:linear-gradient(135deg,#ecfdf5,#d1fae5)!important;color:var(--nova-emerald)!important}
.icon-danger{background:linear-gradient(135deg,#fdf2f8,#fce7f3)!important;color:var(--nova-pink)!important}
.icon-info{background:linear-gradient(135deg,#ecfeff,#cffafe)!important;color:var(--nova-cyan)!important}
.icon-dark{background:linear-gradient(135deg,#fffbeb,#fef3c7)!important;color:var(--nova-amber)!important}
.icon-warning{background:linear-gradient(135deg,#f5f3ff,#ede9fe)!important;color:var(--nova-violet)!important}

/* Brand-first left navigation — stable, no text overlap */
aside.nabsbar{width:292px!important;background:linear-gradient(180deg,#0b1020 0%,#11172b 52%,#0b1020 100%)!important}
html[dir="rtl"] .app-content{margin-right:292px!important}
.nabsbar .sidebar-img{padding:16px!important}
.nabsbar .navbar-brand{
  height:94px!important;
  width:100%!important;
  margin:0 0 20px!important;
  padding:12px 14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-direction:row!important;
  direction:rtl!important;
  gap:12px!important;
  background:linear-gradient(135deg,rgba(99,91,255,.16),rgba(6,182,212,.07))!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:20px!important;
  position:relative!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
.nabsbar .navbar-brand:before,.nabsbar .navbar-brand:after{content:none!important;display:none!important}
.nabsbar .navbar-brand-img{
  width:58px!important;height:58px!important;max-width:58px!important;max-height:58px!important;
  object-fit:contain!important;
  flex:0 0 58px!important;
  order:1!important;
  padding:5px!important;
  border-radius:12px!important;
  background:rgba(37,99,235,.16)!important;
  filter:drop-shadow(0 7px 18px rgba(37,99,235,.35))!important;
}
.nabsbar .navbar-brand-img.logo{display:none!important}
.nabsbar .sidebar-brand-copy{
  order:2!important;
  display:flex!important;
  flex:1 1 auto!important;
  min-width:0!important;
  max-width:calc(100% - 70px)!important;
  flex-direction:column!important;
  gap:3px!important;
  text-align:right!important;
  overflow:hidden!important;
}
.nabsbar .sidebar-brand-copy strong{
  display:block!important;color:#fff!important;font-size:16px!important;line-height:1.5!important;
  font-weight:800!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
.nabsbar .sidebar-brand-copy small{
  display:block!important;color:#9fb0c8!important;font-size:11px!important;line-height:1.6!important;
  font-weight:500!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}

.nabsbar .nab-menu .nab-menu__item{
  min-height:56px!important;
  padding:0 16px!important;
  border-radius:16px!important;
  font-size:14px!important;
  font-weight:700!important;
  gap:13px!important;
}
.nabsbar .nab-menu .nab-menu__item > i:first-child{
  width:25px!important;font-size:18px!important;color:#8794ad!important;
}
.nabsbar .nab-menu .nab-menu__item .angle{font-size:13px!important}
.nabsbar .nab-menu .nabs.active > .nab-menu__item,
.nabsbar .nab-menu .nab-menu__item.affil{
  background:linear-gradient(100deg,rgba(99,91,255,.30),rgba(6,182,212,.13))!important;
  border:1px solid rgba(129,140,248,.20)!important;
  box-shadow:inset 0 0 22px rgba(99,91,255,.07),0 8px 24px rgba(0,0,0,.12)!important;
}
.nabsbar .nab-menu .nab-menu__item:hover{background:rgba(255,255,255,.07)!important;transform:none!important}
.nabsbar .nabs-menu{padding:7px 12px 8px 0!important}
.nabsbar .nabs-menu .nabs-item{font-size:13px!important;padding:10px 17px!important;border-radius:11px!important}

/* Make the sidebar feel like a real CRM navigation */
.nabsbar .nab-menu:before{
  content:"داشبورد مشتری";
  display:block;
  color:#64748b;
  font-size:11px;
  font-weight:800;
  padding:2px 13px 9px;
  letter-spacing:.2px;
}

/* Hide the removed dashboard hero completely if cached/old markup exists */
.neo-dashboard-hero{display:none!important}

@media (max-width:991px){
  html[dir="rtl"] .app-content{margin-right:0!important}
  aside.nabsbar{width:292px!important}
  .nabsbar .navbar-brand{height:86px!important}
  .nabsbar .navbar-brand-img{width:52px!important;height:52px!important;flex-basis:52px!important}
  .nabsbar .sidebar-brand-copy strong{font-size:15px!important}
  .nabsbar .sidebar-brand-copy small{font-size:10px!important}
}
@media (max-width:576px){
  body.app,body.app input,body.app button,body.app select,body.app textarea{font-size:13px!important}
  .panel-title{font-size:16px!important}
  .stat-link h4{font-size:14px!important}
  .stat-card{padding:16px!important}
}
/* ========================================================================== 
   SHETAB NOVA v3 — MODERN CRM PRODUCTS / SERVICES PAGE
   ========================================================================== */
.nova-products-page{direction:rtl;color:#172033;font-family:inherit;padding:4px 0 34px}
.nova-products-toolbar{display:flex;gap:12px;align-items:center;margin:0 0 12px}
.nova-products-search-wrap{position:relative;flex:1;min-width:220px}
.nova-products-search-wrap>i{position:absolute;right:17px;top:50%;transform:translateY(-50%);color:#8a97aa;font-size:15px;pointer-events:none}
.nova-products-search-wrap input{width:100%;height:46px;border:1px solid #e4eaf2;border-radius:14px;background:#fff;padding:0 46px 0 18px;box-shadow:0 3px 14px rgba(30,41,59,.035);font-size:13px;color:#172033;outline:none;transition:.2s}
.nova-products-search-wrap input:focus{border-color:#22b8cf;box-shadow:0 0 0 4px rgba(6,182,212,.08)}
.nova-products-controls{display:flex;gap:10px}
.nova-control-select{height:46px;min-width:160px;border:1px solid #e4eaf2;background:#fff;border-radius:14px;display:flex;align-items:center;gap:9px;padding:0 12px;color:#7b879a;box-shadow:0 3px 14px rgba(30,41,59,.035)}
.nova-control-select i{color:#6c7b91;font-size:13px}
.nova-control-select select{border:0;background:transparent;outline:none;color:#263247;font-family:inherit;font-size:12px;font-weight:700;width:100%;cursor:pointer}
.nova-page-size{min-width:84px;width:84px}
.nova-status-strip{display:flex;justify-content:flex-start;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.nova-status-chip{height:38px;padding:0 10px;border:1px solid #e7edf4;background:#fff;border-radius:12px;display:inline-flex;align-items:center;gap:7px;color:#68758a;font-family:inherit;font-size:11px;font-weight:700;cursor:pointer;transition:.18s;box-shadow:0 2px 9px rgba(30,41,59,.025)}
.nova-status-chip:hover{transform:translateY(-1px);border-color:#cdd8e6;box-shadow:0 5px 15px rgba(30,41,59,.07)}
.nova-status-chip.is-active{background:#0d91ac;border-color:#0d91ac;color:#fff;box-shadow:0 8px 18px rgba(13,145,172,.22)}
.nova-status-chip b{min-width:20px;height:20px;border-radius:7px;background:#f0f3f7;color:#7c899d;display:inline-flex;align-items:center;justify-content:center;font-size:10px}
.nova-status-chip.is-active b{background:rgba(255,255,255,.18);color:#fff}
.nova-status-chip .chip-icon{width:22px;height:22px;border-radius:7px;background:#f1f4f8;color:#64748b;display:inline-flex;align-items:center;justify-content:center;font-size:9px}
.nova-status-chip.is-active .chip-icon{background:rgba(255,255,255,.18);color:#fff}
.nova-status-chip .chip-green{color:#0ca678}.nova-status-chip .chip-orange{color:#f59f00}.nova-status-chip .chip-red{color:#fa5252}.nova-status-chip .chip-slate{color:#64748b}.nova-status-chip .chip-purple{color:#845ef7}
.nova-products-heading{display:flex;align-items:end;justify-content:space-between;margin:4px 0 15px;padding:0 2px}
.nova-eyebrow{font-size:9px;letter-spacing:1.5px;color:#a1adbd;font-weight:800;margin-bottom:2px;direction:ltr;text-align:right}
.nova-products-heading h1{font-size:21px;line-height:1.5;margin:0;font-weight:850;color:#172033}
.nova-result-count{font-size:11px;color:#8490a2;background:#fff;border:1px solid #e8edf3;border-radius:10px;padding:7px 11px}.nova-result-count strong{color:#0d91ac;font-size:13px}
.nova-service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.nova-service-card{background:#fff;border:1px solid #e4eaf1;border-radius:19px;overflow:hidden;box-shadow:0 7px 22px rgba(26,39,58,.045);transition:transform .22s,box-shadow .22s,border-color .22s;min-width:0;animation:novaCardIn .3s ease both}
.nova-service-card:hover{transform:translateY(-3px);border-color:#cfe3e9;box-shadow:0 15px 32px rgba(26,39,58,.09)}
@keyframes novaCardIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.nova-service-card-head{padding:13px 14px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #eef2f6;background:linear-gradient(180deg,#fff 0%,#fbfdfe 100%)}
.nova-service-brand{display:flex;align-items:center;gap:9px;min-width:0}
.nova-service-icon{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#d9f9ff,#baf2fb);color:#0b9db9;display:flex;align-items:center;justify-content:center;flex:0 0 40px;box-shadow:inset 0 0 0 1px rgba(6,182,212,.08)}
.nova-service-icon img{max-width:24px;max-height:24px;object-fit:contain}.nova-service-icon i{font-size:17px}
.nova-service-title{min-width:0;text-align:right}.nova-service-title span{display:block;font-size:8px;color:#9aa6b6;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nova-service-title h3{margin:1px 0 0;font-size:12px;line-height:1.55;color:#1a2435;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.nova-service-status{font-size:9px;font-weight:800;padding:4px 8px;border-radius:999px;white-space:nowrap;background:#e9fbf3;color:#08a26c}.nova-service-status.status-pending{background:#fff5db;color:#d88900}.nova-service-status.status-suspended{background:#fff0f0;color:#e03131}.nova-service-status.status-terminated,.nova-service-status.status-cancelled{background:#f0f2f5;color:#6b7280}
.nova-service-info{display:grid;grid-template-columns:repeat(3,1fr);margin:12px 12px 9px;border:1px solid #e8edf3;border-radius:12px;background:#fbfcfe;overflow:hidden}
.nova-info-item{min-width:0;text-align:center;padding:10px 5px 9px;position:relative}.nova-info-item+.nova-info-item{border-right:1px solid #e8edf3}.nova-info-item i{display:block;font-size:10px;margin-bottom:4px;color:#6d5dfc}.nova-info-item:nth-child(2) i{color:#f59f00}.nova-info-item:nth-child(3) i{color:#11a683}.nova-info-item small{display:block;color:#9aa5b5;font-size:8px;line-height:1.5;white-space:nowrap}.nova-info-item strong{display:block;color:#202b3d;font-size:9px;line-height:1.6;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nova-info-item em{font-style:normal;color:#9ca6b4;font-size:7px;font-weight:500}
.nova-service-alert{margin:0 12px 10px;background:#f8fafc;border-radius:9px;padding:7px 8px;text-align:center;color:#7a8799;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nova-service-alert i{color:#f59f00;margin-left:4px}
.nova-service-footer{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;border-top:1px solid #eef2f6;color:#a0aab8;font-size:8px}.nova-service-footer i{margin-left:4px}.nova-view-service{font-size:9px;font-weight:800;color:#078fae!important;text-decoration:none!important}.nova-view-service i{margin-right:4px;margin-left:0;transition:transform .2s}.nova-view-service:hover i{transform:translateX(-3px)}
.nova-products-empty{text-align:center;padding:65px 20px;background:#fff;border:1px dashed #dce4ed;border-radius:20px}.nova-empty-icon{width:48px;height:48px;border-radius:15px;background:#eefbfe;color:#0d9ab7;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}.nova-products-empty h3{font-size:16px;margin:0 0 4px}.nova-products-empty p{font-size:12px;color:#8a96a8;margin:0}
.nova-pagination{display:flex;justify-content:center;gap:6px;margin-top:18px}.nova-page-btn{width:34px;height:34px;border:1px solid #e3e9f0;background:#fff;color:#667388;border-radius:10px;font-family:inherit;font-size:11px;cursor:pointer}.nova-page-btn:hover:not(:disabled),.nova-page-btn.is-active{background:#0d91ac;border-color:#0d91ac;color:#fff}.nova-page-btn:disabled{opacity:.4;cursor:not-allowed}
@media(max-width:1199px){.nova-service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.nova-products-toolbar{display:block}.nova-products-search-wrap{margin-bottom:9px}.nova-products-controls{display:grid;grid-template-columns:1fr 84px}.nova-control-select{min-width:0}.nova-status-strip{overflow-x:auto;flex-wrap:nowrap;padding-bottom:3px}.nova-status-chip{flex:0 0 auto}.nova-service-grid{grid-template-columns:1fr}.nova-products-heading h1{font-size:18px}.nova-result-count{font-size:10px}}