/* هدر و ناوبری سایت عمومی — نوار هدر، برند، لینک‌های ناوبری، دراپ‌دان، کشوی موبایل، پشت‌زمینهٔ کشو و کلید همبرگر؛ وابسته به dentival-tokens.css که پیش از این فایل بارگذاری می‌شود */

/* ---------- هدر: سطح تخت با مرز ظریف، بدون شیشه‌ای‌سازی ---------- */
.site-header {
  /* دو متغیر محلی تا کاهش ارتفاع هنگام اسکرول از یک جا کنترل شود؛ --header-h سراسری دست‌نخورده می‌ماند چون تکیه‌گاه چسبندگی بخش‌های دیگر است */
  --header-pad: var(--sp-3);
  --header-min: var(--header-h);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border-subtle);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  transition: box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.site-header.is-scrolled {
  --header-pad: var(--sp-1);
  --header-min: var(--sp-12);
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

.site-header .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--header-pad) 0;
  gap: var(--sp-4);
  min-height: var(--header-min);
  transition: padding var(--dur-base) var(--ease-out),
    min-height var(--dur-base) var(--ease-out);
}

/* تکیه‌گاه موقعیت‌دهی برای پنل شناور دراپ‌دان */
.site-header .inner { position: relative; }

/* نشان برند هم یک پله کوچک می‌شود وگرنه ارتفاع کم‌شده را پر می‌کند */
.site-header.is-scrolled .brand-mark {
  width: 1.75rem;
  height: 1.75rem;
}

.site-header.is-scrolled .brand-text {
  font-size: var(--fs-lg);
}

.brand-mark,
.brand-text {
  transition: width var(--dur-base) var(--ease-out),
    height var(--dur-base) var(--ease-out),
    font-size var(--dur-base) var(--ease-out);
}

/* گروه کنش نوار هدر (شروع رایگان و همبرگر) — بیرون از .site-nav است تا با منوی بسته هم دیده شود، پس نسخهٔ دوم CTA درون منو حذف شد */
.nav-bar-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

/* ---------- برند ---------- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xl);
  color: var(--color-text-strong);
  flex-shrink: 0;
}

.brand:hover { color: var(--color-brand-ink); }

/* نشان برند: لوگوی اختصاصی SVG؛ بدون آیکون کلیشه‌ای دندان */
.brand-mark {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-brand);
}

.brand-mark svg,
.brand-logo {
  display: block;
  width: 100%;
  height: 100%;
}

.brand-text {
  letter-spacing: var(--ls-tight);
  line-height: 1;
}

/* ---------- ناوبری افقی ---------- */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.nav-links a {
  color: var(--color-text);
  font-weight: var(--fw-medium);
  font-size: var(--fs-md);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md);
  transition: color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}

.nav-links a.active {
  color: var(--color-brand-ink);
  background: var(--color-brand-subtle);
}

.nav-links a:hover {
  color: var(--color-brand-ink);
  background: var(--color-surface-sunken);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.nav-login {
  color: var(--color-text) !important;
  font-weight: var(--fw-medium) !important;
  font-size: var(--fs-md) !important;
  padding: var(--sp-2) var(--sp-3);
}

.nav-login-icon {
  margin-inline-end: var(--sp-1);
  font-size: 0.85em;
}

.nav-cta {
  padding: var(--sp-2) var(--sp-5) !important;
  font-size: var(--fs-md) !important;
  white-space: nowrap;
}

/* ---------- منوی بازشو ناوبری ---------- */
.nav-item-group { position: relative; }

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out);
}

.nav-dropdown-toggle:hover {
  color: var(--color-brand-ink);
  background: var(--color-surface-sunken);
}

.nav-dropdown-toggle.active {
  color: var(--color-brand-ink);
  background: var(--color-brand-subtle);
}

.nav-dropdown-caret {
  font-size: 0.65rem;
  transition: transform var(--dur-fast) var(--ease-out);
}

.nav-dropdown-toggle[aria-expanded='true'] .nav-dropdown-caret {
  transform: rotate(180deg);
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + var(--sp-2));
  right: 0;
  min-width: 12rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  z-index: var(--z-dropdown);
}

.nav-dropdown[hidden] { display: none; }

.nav-dropdown a {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md);
  font-size: var(--fs-md);
  color: var(--color-text);
}


.nav-dropdown a:hover {
  background: var(--color-surface-sunken);
  color: var(--color-brand-ink);
}

/* خروج از حساب یک کنش مخرب است و باید از پیوندهای ناوبری جدا و با رنگ هشدار دیده شود */
.nav-account-logout {
  margin-top: var(--sp-1);
  border-top: 1px solid var(--color-border-subtle);
  color: var(--color-danger-ink) !important;
}

.nav-account-logout i {
  margin-inline-end: var(--sp-1);
  color: var(--color-danger);
}

.nav-account-logout:hover,
.nav-account-logout:focus-visible {
  color: var(--color-danger-ink) !important;
  background: var(--color-danger-surface) !important;
}

.nav-account-logout:hover i,
.nav-account-logout:focus-visible i {
  color: var(--color-danger-ink);
}

/* ---------- زیرمنوی غنی سخت‌افزار: تصویر + نام + ریزتوضیح ---------- */
/* پهنای بیشتر از دراپ‌دان ساده چون هر ردیف تصویر و دو خط متن دارد */
.nav-dropdown-rich {
  min-width: 22rem;
  padding: var(--sp-2);
  gap: var(--sp-1);
}

.nav-hw-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2);
  border-radius: var(--radius-md);
  color: var(--color-text);
}

.nav-hw-item:hover {
  background: var(--color-surface-sunken);
}

/* اندازهٔ ثابت تا ردیف‌ها با تصویرهای متفاوت نلرزند */
.nav-hw-thumb {
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-size: 1.1rem;
}

.nav-hw-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nav-hw-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.nav-hw-name {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: inherit;
}

/* ریزتوضیح یک‌خطی می‌ماند تا ارتفاع منو ثابت بماند */
.nav-hw-tagline {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-hw-item:hover .nav-hw-name {
  color: var(--color-brand-ink);
}

/* لینک «همهٔ سخت‌افزارها» با جداکننده از ردیف‌های محصول تفکیک می‌شود */
.nav-dropdown-all {
  margin-top: var(--sp-1);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-brand);
  text-align: center;
}

/* ---------- انتخاب مجموعهٔ کاری در منوی حساب ---------- */
/* با چند مجموعه، کاربر پیش از ورود می‌بیند کدام فضای کاری فعال است و می‌تواند مجموعهٔ دیگری را باز کند */
.nav-clinic-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--sp-1);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--color-border-subtle);
}

.nav-clinic-label {
  margin: 0;
  padding-inline: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
}

/* ردیف دو‌خطی است: نام مجموعه و زیرِ آن پلن یا نشانهٔ فضای کاری فعلی */
.nav-clinic-row {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.nav-clinic-name {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-clinic-note {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* مجموعهٔ فعال با پشت‌زمینه و رنگ برند مشخص می‌شود، نه فقط با متن */
.nav-clinic-row.is-current {
  background: var(--color-brand-subtle);
}

.nav-clinic-row.is-current .nav-clinic-name,
.nav-clinic-row.is-current .nav-clinic-note {
  color: var(--color-brand-ink);
}

/* ---------- کلید همبرگر ---------- */
.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  padding: 0;
}

.nav-toggle-bar {
  display: block;
  width: 1.1rem;
  height: 2px;
  background: var(--color-text-strong);
  border-radius: 2px;
}

/* ---------- پشت‌زمینهٔ کشو ---------- */
/* قفل اسکرول هنگام باز بودن کشو — روی ریشه اعمال می‌شود چون اسکرول‌کنندهٔ سند است؛ body در برخی موتورها نادیده گرفته می‌شود */
html.nav-drawer-open,
html.nav-drawer-open body {
  overflow: hidden;
}

/* هنگام باز بودن کشو هدر بالاتر از پوشش می‌نشیند؛ وگرنه بافت انباشتِ sticky باعث می‌شد پوشش روی کل کشو بیفتد و لمس‌ها را بخورد و منوی موبایل بی‌استفاده شود */
html.nav-drawer-open .site-header {
  z-index: var(--z-modal);
}

/* پشت‌زمینهٔ کشو — فقط وقتی منو باز است دیده می‌شود */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: var(--color-overlay-media);
  z-index: var(--z-overlay);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.nav-backdrop[hidden] { display: none; }
.nav-backdrop.is-visible { opacity: 1; }

/* روی دسکتاپ کشو و پشت‌زمینه بی‌معنی‌اند */
@media (min-width: 981px) {
  .nav-backdrop { display: none !important; }
}

/* ناوبری فشرده در بازهٔ لپ‌تاپ (۹۸۱ تا ۱۱۸۰px): فقط فاصله‌ها کم می‌شوند تا منوی افقی از لبه بیرون نزند و اسکرول افقی نسازد، بی‌آنکه به همبرگر بیفتد */
@media (min-width: 981px) and (max-width: 1180px) {
  .site-header .inner { gap: var(--sp-3); }
  .site-nav { gap: var(--sp-3); }
  .nav-links a,
  .nav-dropdown-toggle { padding-inline: var(--sp-2); }
  .nav-actions { gap: var(--sp-2); }
  .nav-login { padding-inline: var(--sp-2); }
  .nav-cta { padding-inline: var(--sp-3) !important; }
}

/* کشوی ناوبری موبایل — تمام‌قد از راست با پشت‌زمینهٔ تیره (جایگزین پنل کوتاه زیر هدر که با منوی بلند اسکرول صفحه را می‌دزدید) */
@media (max-width: 980px) {
  .site-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(20rem, 88vw);
    max-width: 88vw;
    background: var(--color-surface);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--sp-2);
    padding: calc(var(--header-h) + var(--sp-4)) var(--sp-4) var(--sp-6);
    border-inline-start: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* بالاتر از هدر و دراپ‌دان می‌نشیند تا کشو روی همه‌چیز بیاید */
    z-index: var(--z-modal);
    /* با transform جابه‌جا می‌شود تا انیمیشن روی لایهٔ ترکیب اجرا شود، نه با بازچینش */
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--dur-base) var(--ease-out),
      visibility var(--dur-base) var(--ease-out);
  }

  .site-nav.open {
    transform: translateX(0);
    visibility: visible;
  }

  .nav-links { flex-direction: column; align-items: stretch; gap: var(--sp-1); }
  .nav-links a { padding: var(--sp-3) var(--sp-3); font-size: var(--fs-base); }

  .nav-actions {
    flex-direction: column;
    align-items: stretch;
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--color-border-subtle);
  }

  .nav-login { text-align: center; }
  .nav-toggle { display: inline-flex; }

  /* زیرمنو در کشو آکاردئونی است: جای پنل شناور، درجا باز می‌شود */
  .nav-item-group { width: 100%; }

  .nav-dropdown-toggle {
    width: 100%;
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-3);
    font-size: var(--fs-base);
  }

  .nav-dropdown {
    position: static;
    inset: auto;
    min-width: 0;
    width: 100%;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0 0 var(--sp-2);
    margin-inline-start: var(--sp-3);
    border-inline-start: 2px solid var(--color-border-subtle);
  }

  .nav-hw-tagline { display: none; }

  /* در کشوی باریک نام بلند مجموعه بریده نمی‌شود بلکه در دو خط می‌نشیند */
  .nav-clinic-name { white-space: normal; }
}

/* روی صفحه‌های باریک فقط نشان برند، CTA و همبرگر جا می‌شوند */
@media (max-width: 460px) {
  .site-header .brand-text { display: none; }
  .site-header .inner { gap: var(--sp-2); }
  /* گروه کنش در این عرض کوچک می‌شود؛ با flex-shrink:0 دکمه‌ها پهن‌تر از صفحه می‌شدند و همبرگر بیرون لبه می‌افتاد و منو بی‌دسترس بود */
  .nav-bar-actions { flex-shrink: 1; min-width: 0; gap: var(--sp-1); }
  .nav-cta {
    padding: var(--sp-2) var(--sp-3) !important;
    font-size: var(--fs-sm) !important;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  /* همبرگر آخرین چیزی است که کوچک می‌شود؛ اندازهٔ لمسی‌اش ثابت می‌مانَد */
  .nav-toggle { flex-shrink: 0; }
}