/* =========================================================
   Navexa Professional UI Polish
   مسیر: static/css/navexa-polish.css
   هدف: یکپارچه‌سازی ظاهر کل پروژه، ناوبر slim، کارت/جدول مدرن، ریسپانسیو بهتر
   ========================================================= */

:root{
  --nx-nav-height: 48px;
  --nx-live-nav-height: 48px;
  --nx-page-x: clamp(.75rem, 1.7vw, 1.35rem);
  --nx-page-y: clamp(.75rem, 1.5vw, 1.1rem);
  --nx-surface: rgba(255,255,255,.92);
  --nx-surface-solid: #ffffff;
  --nx-page-bg: #f6f8fc;
  --nx-text-strong: #0f172a;
  --nx-text-soft: #64748b;
  --nx-line: rgba(203,213,225,.72);
  --nx-line-soft: rgba(226,232,240,.92);
  --nx-blue: #2563eb;
  --nx-blue-2: #4f46e5;
  --nx-green: #16a34a;
  --nx-amber: #f59e0b;
  --nx-red: #dc2626;
  --nx-card-radius: 18px;
  --nx-card-radius-sm: 14px;
  --nx-shadow-soft: 0 14px 34px rgba(15,23,42,.075);
  --nx-shadow-hover: 0 18px 48px rgba(15,23,42,.12);
  --nx-ring: 0 0 0 .22rem rgba(37,99,235,.15);
}

html{ scroll-padding-top: calc(var(--nx-live-nav-height) + 18px); }
body{
  background:
    radial-gradient(circle at 18% 0%, rgba(37,99,235,.055), transparent 34rem),
    radial-gradient(circle at 82% 10%, rgba(22,163,74,.04), transparent 30rem),
    var(--nx-page-bg) !important;
  color: var(--nx-text-strong);
  text-rendering: optimizeLegibility;
}

/* ---------- Layout ---------- */
main.main-content{
  margin-top: 0 !important;
  padding-top: calc(var(--nx-live-nav-height) + 10px) !important;
  padding-inline: var(--nx-page-x);
  padding-bottom: 2rem;
}
.page-content,
.container-fluid > .page-content{
  padding-top: var(--nx-page-y) !important;
}
.container,
.container-fluid{
  max-width: 100%;
}

@media (min-width: 1400px){
  main.main-content > .container,
  main.main-content > .container-fluid,
  .nx-hero .container,
  .nx-section .container{
    max-width: 1360px;
  }
}

@media (max-width: 768px){
  main.main-content{
    padding-inline: .65rem;
    padding-top: calc(var(--nx-live-nav-height) + 8px) !important;
  }
}

/* ---------- Navbar: slimmer + no sidebar class bleed ---------- */
.nx-navbar{
  min-height: var(--nx-nav-height) !important;
  padding-top: .18rem !important;
  padding-bottom: .18rem !important;
  background: rgba(255,255,255,.88) !important;
  border-bottom: 1px solid rgba(226,232,240,.9) !important;
  box-shadow: 0 10px 28px rgba(15,23,42,.07) !important;
}
.nx-navbar-shell{ min-height: 38px !important; }
.nx-navbar .nx-brand{
  padding: .1rem .2rem !important;
  gap: .42rem !important;
}
.nx-navbar .nx-brand-mark{
  width: 28px !important;
  height: 28px !important;
  border-radius: 11px !important;
}
.nx-navbar .brand-logo{
  width: 22px;
  height: 22px;
}
.nx-navbar .nx-brand-text,
.nx-navbar .brand_css{
  font-size: 1rem !important;
  line-height: 1 !important;
}
.nx-datetime{
  height: 28px !important;
  padding-inline: .62rem !important;
  font-size: .72rem !important;
}
.nav-search-box{
  width: 38px !important;
  min-height: 31px !important;
  padding: .12rem !important;
}
.nav-search-box.open{ width: min(315px, 40vw) !important; }
.nav-search-icon,
.nav-clear-btn{
  width: 29px !important;
  height: 29px !important;
  font-size: .78rem;
}
.nav-search-input{
  height: 25px !important;
  font-size: .76rem !important;
}
.nx-subscribe-btn{
  min-height: 31px !important;
  padding: .22rem .68rem !important;
  font-size: .76rem !important;
  box-shadow: 0 8px 18px rgba(22,163,74,.17) !important;
}
.nx-user-trigger{
  min-height: 32px !important;
  padding: .12rem .18rem .12rem .48rem !important;
}
.nx-user-avatar,
.nx-menu-avatar,
.nx-guest-icon{
  width: 29px !important;
  height: 29px !important;
  font-size: .82rem;
}
.nx-user-name{ font-size: .72rem !important; }
.nx-plan-pill{ font-size: .6rem !important; }
.nx-user-menu,
.nav-suggest-box{
  box-shadow: 0 24px 60px rgba(15,23,42,.14) !important;
}

@media (max-width: 768px){
  .nx-navbar{ padding-left: .55rem !important; }
  .nav-search-box.open{
    top: calc(var(--nx-live-nav-height) + 8px) !important;
    right: calc(var(--nx-collapsed, 60px) + .65rem) !important;
    left: .65rem !important;
    width: auto !important;
  }
  .nav-suggest-box{
    top: calc(var(--nx-live-nav-height) + 54px) !important;
    right: calc(var(--nx-collapsed, 60px) + .65rem) !important;
    left: .65rem !important;
  }
}

/* ---------- Common SaaS surfaces ---------- */
.card,
.nx-card,
.fm-shell,
.fm-panel,
.fm-filter-card,
.fm-kpi-card,
.ms-card,
.ms-panel,
.tech-card,
.wt-card,
.article-card,
.nx-preview-card,
.dynamic-table-area,
.fm-skeleton-table{
  border: 1px solid var(--nx-line-soft) !important;
  border-radius: var(--nx-card-radius) !important;
  background: var(--nx-surface) !important;
  box-shadow: var(--nx-shadow-soft) !important;
  backdrop-filter: blur(10px);
}
.card:hover,
.nx-card:hover,
.fm-kpi-card:hover,
.ms-card:hover,
.tech-card:hover,
.wt-card:hover,
.article-card:hover{
  box-shadow: var(--nx-shadow-hover) !important;
}

.card-header,
.modal-header,
.offcanvas-header{
  background: linear-gradient(135deg, rgba(248,250,252,.96), rgba(255,255,255,.92)) !important;
  border-bottom: 1px solid var(--nx-line-soft) !important;
}
.card-footer,
.modal-footer{
  background: rgba(248,250,252,.76) !important;
  border-top: 1px solid var(--nx-line-soft) !important;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6{
  color: var(--nx-text-strong);
  letter-spacing: -.25px;
}
.text-muted{ color: var(--nx-text-soft) !important; }
a{ text-underline-offset: 3px; }

/* ---------- Buttons and form controls ---------- */
.btn{
  border-radius: 999px !important;
  font-weight: 800 !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary,
.btn-outline-primary:hover{
  background: linear-gradient(135deg, var(--nx-blue), var(--nx-blue-2)) !important;
  border-color: transparent !important;
  box-shadow: 0 12px 26px rgba(37,99,235,.18) !important;
}
.btn-success{
  background: linear-gradient(135deg, #16a34a, #22c55e) !important;
  border-color: transparent !important;
}
.form-control,
.form-select,
.input-group-text{
  border-radius: 14px !important;
  border-color: rgba(203,213,225,.92) !important;
  background-color: rgba(255,255,255,.94) !important;
}
.form-control:focus,
.form-select:focus{
  border-color: rgba(37,99,235,.42) !important;
  box-shadow: var(--nx-ring) !important;
}
.input-group .form-control:not(:first-child),
.input-group .form-select:not(:first-child){ border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group .form-control:not(:last-child),
.input-group .form-select:not(:last-child){ border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }

/* ---------- Tables: fintech dashboard readable ---------- */
.table-responsive,
.dynamic-table-area,
.fm-skeleton-table{
  overflow: auto;
  scrollbar-gutter: stable both-edges;
}
.table{
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(248,250,252,.72);
  --bs-table-hover-bg: rgba(37,99,235,.055);
  color: #1e293b;
  border-color: rgba(226,232,240,.92) !important;
  margin-bottom: 0 !important;
}
.table thead th,
.table th{
  position: sticky;
  top: 0;
  z-index: 3;
  background: linear-gradient(180deg, #f8fafc, #eef4ff) !important;
  color: #334155 !important;
  font-weight: 900 !important;
  border-bottom: 1px solid rgba(203,213,225,.95) !important;
  vertical-align: middle !important;
  white-space: nowrap;
}
.table td,
.table th{
  padding: .62rem .66rem !important;
  vertical-align: middle !important;
}
.table tbody tr{
  transition: background .12s ease, transform .12s ease;
}
.table tbody tr:hover{
  background: rgba(37,99,235,.055) !important;
}
.table td:first-child,
.table th:first-child{
  border-right-color: transparent !important;
}
.table td:last-child,
.table th:last-child{
  border-left-color: transparent !important;
}

/* Tables on small screens: keep data usable */
@media (max-width: 768px){
  .table{ font-size: 11.5px !important; }
  .table td,
  .table th{ padding: .48rem .52rem !important; }
  .table-responsive,
  .dynamic-table-area{
    border-radius: 14px !important;
  }
}

/* ---------- Pills, tabs, badges ---------- */
.nav-tabs,
.nav-pills{
  gap: .4rem;
  border-bottom-color: rgba(226,232,240,.9) !important;
}
.nav-tabs .nav-link,
.nav-pills .nav-link{
  border-radius: 999px !important;
  font-weight: 850;
  color: #475569;
  border: 1px solid transparent !important;
}
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active{
  color: #fff !important;
  background: linear-gradient(135deg, var(--nx-blue), var(--nx-blue-2)) !important;
  box-shadow: 0 12px 26px rgba(37,99,235,.16);
}
.badge{
  border-radius: 999px;
  letter-spacing: -.1px;
}

/* ---------- Alerts, dropdowns, modals ---------- */
.alert{
  border-radius: 16px !important;
  border: 1px solid rgba(226,232,240,.92) !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.055);
}
.dropdown-menu{
  border: 1px solid rgba(226,232,240,.96) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 60px rgba(15,23,42,.14) !important;
}
.dropdown-item{ border-radius: 12px; }
.modal-content,
.offcanvas{
  border: 1px solid rgba(226,232,240,.96) !important;
  border-radius: 22px !important;
  box-shadow: 0 30px 80px rgba(15,23,42,.18) !important;
}

/* ---------- Home refinements ---------- */
.nx-hero{
  border-radius: 0 0 28px 28px;
}
.nx-hero-title{
  letter-spacing: -.7px;
}
.nx-hero-preview{
  border: 1px solid rgba(226,232,240,.92) !important;
  box-shadow: 0 22px 70px rgba(15,23,42,.12) !important;
}
.nx-section{
  padding-block: clamp(2rem, 4vw, 4rem);
}

/* ---------- Better mobile density ---------- */
@media (max-width: 576px){
  :root{ --nx-card-radius: 15px; }
  .card-body{ padding: .9rem !important; }
  h1{ font-size: 1.45rem; }
  h2{ font-size: 1.25rem; }
  .btn-lg{ padding: .55rem .9rem !important; font-size: .88rem !important; }
  .nx-hero-cta .btn{ width: 100%; justify-content: center; }
  .nav-tabs,
  .nav-pills{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: .4rem;
  }
  .nav-tabs .nav-link,
  .nav-pills .nav-link{ white-space: nowrap; }
}

/* ---------- Accessibility ---------- */
:focus-visible{
  outline: 3px solid rgba(37,99,235,.28) !important;
  outline-offset: 2px !important;
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- JS-assisted micro interactions ---------- */
.nx-navbar.is-scrolled{
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 12px 34px rgba(15,23,42,.095) !important;
}
.nx-scrollable-table{ position: relative; }
.nx-scrollable-table.has-horizontal-scroll::after{
  content: "اسکرول افقی";
  position: sticky;
  right: .65rem;
  bottom: .55rem;
  display: inline-flex;
  width: max-content;
  padding: .22rem .55rem;
  margin: .3rem;
  border: 1px solid rgba(203,213,225,.9);
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: #64748b;
  font-size: .68rem;
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(15,23,42,.08);
  pointer-events: none;
}
.nx-scrollable-table.has-horizontal-scroll.is-scrolled-x::after{ opacity: .45; }
.nx-interactive-surface{ transition: transform .16s ease, box-shadow .16s ease; }
.nx-interactive-surface:focus-within{ box-shadow: var(--nx-ring), var(--nx-shadow-hover) !important; }

/* ---------- Unified Navexa tooltips ---------- */
.tooltip .tooltip-inner {
  background: linear-gradient(135deg, #012d67 30%, #123f73 100%) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  line-height: 1.7;
  padding: .15rem .35rem;
  border-radius: .45rem;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .42);
  max-width: 240px;
  text-align: center;
}
.tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before{
  border-top-color: #123f73 !important;
}
.tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before{
  border-bottom-color: #012d67 !important;
}
.tooltip.bs-tooltip-start .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before{
  border-left-color: #123f73 !important;
}
.tooltip.bs-tooltip-end .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before{
  border-right-color: #012d67 !important;
}
.nx-compact-number{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  border-radius: .45rem;
  padding: .02rem .22rem;
  transition: background .16s ease, box-shadow .16s ease;
}
.nx-compact-number:hover,
.nx-compact-number:focus{
  background: rgba(1,45,103,.07);
  box-shadow: inset 0 0 0 1px rgba(1,45,103,.11);
  outline: none;
}

/* Tooltip trigger cursor polish
   Numeric compact values should keep the normal cursor. The browser's `help`
   cursor shows a small question mark beside the pointer and feels noisy in
   data-dense financial tables. */
.nx-compact-number,
.nx-compact-number[data-bs-toggle="tooltip"],
[data-bs-toggle="tooltip"].nx-compact-number,
.nx-kpi-value[data-bs-toggle="tooltip"],
td [data-bs-toggle="tooltip"],
th [data-bs-toggle="tooltip"]{
  cursor: default !important;
}

button[data-bs-toggle="tooltip"],
a[data-bs-toggle="tooltip"],
.btn[data-bs-toggle="tooltip"],
[role="button"][data-bs-toggle="tooltip"]{
  cursor: pointer !important;
}