/* ════════════════════════════════════════════════════════════
   DosTime — Nav Pro (منوی حرفه‌ای)
   هدف: یکدست‌سازی ترکیب رنگ دکمه‌های منو (پایین + هدر)
   - تک‌برند ایندیگو به‌جای رنگین‌کمانی هر تب
   - حالت فعال: پیل گرادیانی با آیکون/لیبل سفید
   - حالت عادی: خاکستری حرفه‌ای با هاور نرم
   - حباب AI هم‌خانواده با برند (بدون صورتی نئونی)
   - سازگار با تم روشن/تیره، RTL و reduced-motion
   ════════════════════════════════════════════════════════════ */

:root,
html[data-theme='light'] {
  --navpro-brand-1: #4f46e5;
  --navpro-brand-2: #7c6fd9;
  --navpro-pill-text: #ffffff;
  --navpro-idle: #8a86a3;
  --navpro-idle-hover: #4c4768;
  --navpro-pill-shadow: 0 8px 20px rgb(79 70 229 / 0.32), inset 0 1px 0 rgb(255 255 255 / 0.22);
  --navpro-ring: 0 0 0 3px rgb(79 70 229 / 0.16);
  --navpro-ai-ring: rgb(255 255 255 / 0.32);
  /* فضای داخلی دکمه (v2): گرادیان سه‌ایستگاهی + کاشی آیکون */
  --navpro-pill-1: #4338ca;
  --navpro-pill-2: #6d5ef0;
  --navpro-pill-3: #a48fff;
  --navpro-tile-bg: rgb(79 70 229 / 0.1);
  --navpro-tile-border: rgb(79 70 229 / 0.2);
  --navpro-tile-icon: #4f46e5;
  --navpro-tile-shine: rgb(255 255 255 / 0.55);
}

html[data-theme='dark'] {
  --navpro-brand-1: #6d5ef0;
  --navpro-brand-2: #8b74f2;
  --navpro-pill-text: #ffffff;
  --navpro-idle: #8f8ca8;
  --navpro-idle-hover: #d6d4e8;
  --navpro-pill-shadow: 0 8px 24px rgb(109 94 240 / 0.45), inset 0 1px 0 rgb(255 255 255 / 0.16);
  --navpro-ring: 0 0 0 3px rgb(139 116 242 / 0.22);
  --navpro-ai-ring: rgb(255 255 255 / 0.22);
  /* فضای داخلی دکمه (v2) در تم تیره */
  --navpro-pill-1: #4c3ed9;
  --navpro-pill-2: #7a63f5;
  --navpro-pill-3: #b3a1ff;
  --navpro-tile-bg: rgb(139 116 242 / 0.14);
  --navpro-tile-border: rgb(139 116 242 / 0.28);
  --navpro-tile-icon: #c0b2ff;
  --navpro-tile-shine: rgb(255 255 255 / 0.08);
}

/* ─── بدنه ناوبری پایین: شیشه‌ای تمیز ─── */
.bottom-nav {
  padding-inline: 6px;
  padding-top: 6px;
  padding-bottom: 6px;
  align-items: stretch;
}

/* ─── آیتم‌های منو: ساختار یکدست ─── */
.bottom-nav a,
.bottom-nav button {
  border: 0;
  background: transparent;
  border-radius: 16px;
  padding-block: 7px 6px;
  min-height: 52px;
  color: var(--navpro-idle);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: -0.1px;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* حذف هاله قدیمی ::before رنگی و جایگزینی با پیل گرادیانی */
.bottom-nav a::before,
.bottom-nav button::before {
  content: '';
  position: absolute;
  inset: 2px 4px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--navpro-brand-1) 0%, var(--navpro-brand-2) 100%);
  box-shadow: var(--navpro-pill-shadow);
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 200ms ease, transform 220ms cubic-bezier(0.34, 1.4, 0.64, 1);
  pointer-events: none;
}

/* خنثی‌سازی رنگ‌های رنگین‌کمانی قبلی هر تب */
.bottom-nav .nav-meds.active::before,
.bottom-nav .nav-calendar.active::before,
.bottom-nav .nav-network.active::before,
.bottom-nav .nav-services.active::before,
.bottom-nav .nav-profile.active::before,
.bottom-nav .nav-ai.active::before {
  background: linear-gradient(135deg, var(--navpro-brand-1) 0%, var(--navpro-brand-2) 100%);
  display: block;
}

.bottom-nav .nav-meds.active,
.bottom-nav .nav-calendar.active,
.bottom-nav .nav-network.active,
.bottom-nav .nav-services.active,
.bottom-nav .nav-profile.active {
  color: var(--navpro-pill-text);
}

/* حالت فعال: پیل نمایان + متن/آیکون سفید */
.bottom-nav a.active,
.bottom-nav button.active {
  color: var(--navpro-pill-text);
  font-weight: 700;
}

.bottom-nav a.active::before,
.bottom-nav button.active::before {
  opacity: 1;
  transform: scale(1);
}

/* آیکون و لیبل همیشه بالای پیل */
.bottom-nav a svg,
.bottom-nav button svg,
.bottom-nav a span:not(.ai-bubble),
.bottom-nav button span:not(.ai-bubble) {
  position: relative;
  z-index: 1;
}

.bottom-nav a svg,
.bottom-nav button svg {
  width: 21px;
  height: 21px;
  stroke-width: 1.9;
  transform: none;
  transition: transform 200ms cubic-bezier(0.34, 1.4, 0.64, 1);
}

.bottom-nav a.active svg,
.bottom-nav button.active svg {
  transform: translateY(-1px);
  animation: none;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.22));
}

/* حذف پالس صورتی تب شبکه در حالت فعال */
.bottom-nav .nav-network.active svg {
  color: inherit;
  animation: none;
}

.bottom-nav .nav-services.active svg {
  color: inherit;
}

/* هاور حرفه‌ای برای آیتم غیرفعال */
.bottom-nav a:not(.active):hover,
.bottom-nav button:not(.active):hover {
  color: var(--navpro-idle-hover);
  background: rgb(124 111 217 / 0.09);
}

html[data-theme='dark'] .bottom-nav a:not(.active):hover,
html[data-theme='dark'] .bottom-nav button:not(.active):hover {
  background: rgb(139 116 242 / 0.12);
}

/* فشردن دکمه */
.bottom-nav a:active svg,
.bottom-nav button:active svg {
  transform: scale(0.9);
}

/* فوکوس صفحه‌کلید قابل مشاهده */
.bottom-nav a:focus-visible,
.bottom-nav button:focus-visible {
  outline: none;
  box-shadow: var(--navpro-ring);
}

/* ─── دکمه AI: هم‌خانواده با برند ─── */
.bottom-nav .nav-ai .ai-bubble {
  width: 34px;
  height: 34px;
  margin-top: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--navpro-brand-1) 0%, var(--navpro-brand-2) 100%);
  box-shadow: inset 0 0 0 1.5px var(--navpro-ai-ring), 0 4px 12px rgb(79 70 229 / 0.35);
  animation: none;
  transition: transform 200ms cubic-bezier(0.34, 1.4, 0.64, 1);
}

.bottom-nav .nav-ai .ai-bubble svg {
  width: 18px;
  height: 18px;
  color: #fff;
  filter: none;
}

.bottom-nav .nav-ai .ai-label {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: currentcolor;
  color: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: -0.1px;
}

.bottom-nav .nav-ai.active .ai-bubble {
  animation: none;
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.45), 0 4px 12px rgb(0 0 0 / 0.25);
}

.bottom-nav .nav-ai:hover .ai-bubble,
.bottom-nav .nav-ai.active .ai-bubble {
  transform: translateY(-1px);
}

/* حالت غیرفعال AI هم مثل بقیه */
.bottom-nav .nav-ai:not(.active):hover {
  background: rgb(124 111 217 / 0.09);
}

/* ─── دکمه‌های هدر (تم، سبد، اعلان، انتخاب فرد) ─── */
.icon-btn {
  border: 1px solid transparent;
  border-radius: 13px;
}

.icon-box {
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: rgb(124 111 217 / 0.1);
  border: 1px solid rgb(124 111 217 / 0.22);
  color: var(--navpro-brand-1);
  box-shadow: 0 2px 8px rgb(79 70 229 / 0.1), inset 0 1px 0 rgb(255 255 255 / 0.5);
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease,
    box-shadow 160ms ease, color 160ms ease;
}

html[data-theme='dark'] .icon-box {
  background: rgb(139 116 242 / 0.12);
  border-color: rgb(139 116 242 / 0.28);
  color: #b7a9ff;
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.3), inset 0 1px 0 rgb(255 255 255 / 0.06);
}

.icon-box:hover {
  background: linear-gradient(135deg, var(--navpro-brand-1) 0%, var(--navpro-brand-2) 100%);
  border-color: transparent;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--navpro-pill-shadow);
}

.icon-box:hover svg {
  color: #fff;
}

.icon-box:active {
  transform: translateY(0) scale(0.96);
}

.icon-box:focus-visible {
  outline: none;
  box-shadow: var(--navpro-ring);
}

/* حالت فعال (مثلاً وقتی پنل اعلان باز است) */
.icon-box.active {
  background: linear-gradient(135deg, var(--navpro-brand-1) 0%, var(--navpro-brand-2) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--navpro-pill-shadow);
}

.icon-box.active svg {
  color: #fff;
}

/* ─── بج اعلان/سبد: قرمز حرفه‌ای خوانا ─── */
.notif-badge {
  top: -4px;
  inset-inline-end: -4px;
  min-width: 17px;
  height: 17px;
  padding-inline: 4px;
  background: linear-gradient(135deg, #ef4455 0%, #d92d4b 100%);
  border: 2px solid var(--bg-card, #fff);
  color: #fff;
  text-shadow: none;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 2px 6px rgb(217 45 75 / 0.45);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.notif-badge:empty {
  display: none;
}

/* ─── احترام به reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .bottom-nav a::before,
  .bottom-nav button::before,
  .bottom-nav a svg,
  .bottom-nav button svg,
  .bottom-nav .nav-ai .ai-bubble,
  .icon-box {
    transition: none;
  }

  .bottom-nav a.active svg,
  .bottom-nav button.active svg {
    animation: none;
  }
}

/* ─── موبایل کوچک: حفظ تناسب پیل ─── */
@media (max-width: 380px) {
  .bottom-nav a,
  .bottom-nav button {
    font-size: 8.5px;
    min-height: 48px;
    border-radius: 13px;
  }

  .bottom-nav a::before,
  .bottom-nav button::before {
    inset: 2px 2px;
    border-radius: 11px;
  }

  .bottom-nav .nav-ai .ai-bubble {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }
}

/* ════════════════════════════════════════════════════════════
   Nav Pro v2 — فضای داخلی دکمه‌های منو (پریمیوم)
   - کاشی آیکون: قاب شیشه‌ای ظریف دور هر آیکون
   - پیل فعال: گرادیان سه‌ایستگاهی + برق شیشه‌ای بالا
   - حباب AI: گرادیان عمیق نیمه‌شب با برق داخلی
   ════════════════════════════════════════════════════════════ */

/* ─── کاشی آیکون تب‌های عادی ─── */
.bottom-nav a > svg {
  box-sizing: content-box;
  width: 20px;
  height: 20px;
  padding: 6px;
  border-radius: 13px;
  background: var(--navpro-tile-bg);
  border: 1px solid var(--navpro-tile-border);
  color: var(--navpro-tile-icon);
  box-shadow: inset 0 1px 0 var(--navpro-tile-shine);
  transition: transform 200ms cubic-bezier(0.34, 1.4, 0.64, 1), background 160ms ease,
    border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.bottom-nav a:not(.active):hover > svg {
  background: rgb(79 70 229 / 0.18);
  border-color: rgb(79 70 229 / 0.34);
  transform: translateY(-1px);
}

/* ─── پیل فعال: گرادیان سه‌ایستگاهی + برق شیشه‌ای ─── */
.bottom-nav a.active::before,
.bottom-nav button.active::before,
.bottom-nav .nav-meds.active::before,
.bottom-nav .nav-calendar.active::before,
.bottom-nav .nav-network.active::before,
.bottom-nav .nav-services.active::before,
.bottom-nav .nav-profile.active::before,
.bottom-nav .nav-ai.active::before {
  background:
    linear-gradient(
      180deg,
      rgb(255 255 255 / 0.32) 0%,
      rgb(255 255 255 / 0.07) 42%,
      rgb(0 0 0 / 0.12) 100%
    ),
    linear-gradient(
      135deg,
      var(--navpro-pill-1) 0%,
      var(--navpro-pill-2) 55%,
      var(--navpro-pill-3) 130%
    );
  box-shadow:
    var(--navpro-pill-shadow),
    inset 0 0 0 1px rgb(255 255 255 / 0.22),
    inset 0 -2px 5px rgb(0 0 0 / 0.14);
}

/* ─── کاشی آیکون در حالت فعال: شیشه سفید روی پیل ─── */
.bottom-nav a.active > svg {
  background: rgb(255 255 255 / 0.2);
  border-color: rgb(255 255 255 / 0.4);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.35),
    0 2px 6px rgb(0 0 0 / 0.18);
}

/* ─── حباب AI: گرادیان عمیق نیمه‌شب + برق داخلی ─── */
.bottom-nav .nav-ai .ai-bubble {
  background:
    linear-gradient(
      180deg,
      rgb(255 255 255 / 0.38) 0%,
      rgb(255 255 255 / 0) 46%
    ),
    linear-gradient(
      135deg,
      #2e1065 0%,
      var(--navpro-pill-2) 58%,
      var(--navpro-pill-3) 135%
    );
  box-shadow:
    inset 0 0 0 1.5px rgb(255 255 255 / 0.35),
    inset 0 -3px 7px rgb(0 0 0 / 0.28),
    0 4px 14px rgb(76 62 217 / 0.5);
}

.bottom-nav .nav-ai.active .ai-bubble {
  box-shadow:
    inset 0 0 0 1.5px rgb(255 255 255 / 0.5),
    inset 0 -3px 7px rgb(0 0 0 / 0.28),
    0 4px 14px rgb(0 0 0 / 0.3);
}

/* ─── موبایل کوچک: کاشی جمع‌وجورتر ─── */
@media (max-width: 380px) {
  .bottom-nav a > svg {
    width: 17px;
    height: 17px;
    padding: 5px;
    border-radius: 11px;
  }
}