/* ════════════════════════════════════════════════════════════
   DosTime — Theme Clinic (تم کلینیکال)
   الهام از ۶ کیت Figma:
   SkinFirst (آبی رویال + کارت سفید + ناو قرصی) · Si Sehat (تایل‌های
   پاستلی + تب‌بار) · Doctors/Hospital (پاستلی + چیپ علائم) ·
   Healthcare App (وایتال‌کارت + دکمه آبی) · Concept Teal (تیل +
   گیج آنالتیکس + چت) · AI-Based (بنر گرادیانی + FAB میانی + تخصص‌ها)
   لایه نهایی overrides — بدون دست‌کاری فایل‌های قبلی
   ════════════════════════════════════════════════════════════ */

/* ─── روشن: کلینیکال (آبی بیمارستانی) ─── */
:root,
html[data-theme='light'] {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-light: #dbeafe;
  --primary-mid: #60a5fa;

  --accent: #0ea5e9;
  --accent-dark: #0284c7;
  --accent-light: #e0f2fe;

  --teal: #14b8a6;
  --teal-light: #ccfbf1;
  --coral: #f43f5e;
  --coral-light: #ffe4e6;
  --amber: #d97706;
  --amber-light: #fef3c7;
  --violet: #4f46e5;
  --violet-light: #e0e7ff;
  --network: #f43f5e;
  --network-light: #ffe4e6;

  --success: #16a34a;
  --success-bg: #dcfce7;
  --warning: #d97706;
  --warning-bg: #fef3c7;
  --danger: #dc2626;
  --danger-bg: #fee2e2;
  --info: #0284c7;
  --info-bg: #e0f2fe;

  --neutral-50: #f8fafc;
  --neutral-100: #f1f5f9;
  --neutral-200: #e2e8f0;
  --neutral-300: #cbd5e1;
  --neutral-400: #94a3b8;
  --neutral-500: #64748b;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1e293b;
  --neutral-900: #0f172a;

  --bg-page: #edf3fc;
  --bg-card: #ffffff;
  --bg-sidebar: #e3edfb;
  --bg-topbar: rgba(255, 255, 255, 0.9);
  --bg-soft: #dbeafe;
  --bg-elevated: #ffffff;

  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-tertiary: #8ca0b8;

  --border: #d9e6f7;
  --border-strong: #bfdbfe;
  --border-focus: #2563eb;

  --nav-bg: rgba(255, 255, 255, 0.9);

  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 26px;
  --radius-2xl: 30px;

  --shadow-xs: 0 1px 3px rgb(37 99 235 / 0.07);
  --shadow-sm: 0 4px 14px rgb(37 99 235 / 0.08), 0 1px 4px rgb(15 23 42 / 0.05);
  --shadow-md: 0 10px 28px rgb(37 99 235 / 0.12), 0 3px 8px rgb(15 23 42 / 0.06);
  --shadow-lg: 0 18px 44px rgb(37 99 235 / 0.14), 0 6px 16px rgb(15 23 42 / 0.07);
  --shadow-xl: 0 30px 70px rgb(37 99 235 / 0.16), 0 10px 28px rgb(15 23 42 / 0.09);
  --shadow-primary: 0 12px 30px rgb(37 99 235 / 0.38);
  --shadow-accent: 0 10px 26px rgb(14 165 233 / 0.3);

  --glow-primary: 0 0 22px rgb(37 99 235 / 0.3);
  --glow-accent: 0 0 22px rgb(34 211 238 / 0.3);

  --grad-brand: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);
  --grad-primary: linear-gradient(135deg, #1d4ed8 0%, #2563eb 55%, #38bdf8 130%);
  --grad-health: linear-gradient(135deg, #14b8a6 0%, #22c55e 100%);
  --grad-calm: linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%);
  --grad-gold: linear-gradient(135deg, #d97706 0%, #fbbf24 100%);
  --grad-soft: linear-gradient(135deg, #dbeafe 0%, #ccfbf1 55%, #fef3c7 100%);

  /* ناو پرو: آبی کلینیکال (قرص فعال + تایل آیکون) */
  --navpro-brand-1: #2563eb;
  --navpro-brand-2: #38bdf8;
  --navpro-pill-1: #1d4ed8;
  --navpro-pill-2: #2563eb;
  --navpro-pill-3: #38bdf8;
  --navpro-tile-bg: rgb(37 99 235 / 0.09);
  --navpro-tile-border: rgb(37 99 235 / 0.2);
  --navpro-tile-icon: #1d4ed8;
  --navpro-tile-shine: rgb(255 255 255 / 0.6);
}

/* ─── تیره: سرمه‌ای بیمارستانی ─── */
html[data-theme='dark'] {
  --primary: #3b82f6;
  --primary-dark: #2563eb;
  --primary-light: #0f2440;
  --primary-mid: #60a5fa;

  --accent: #22d3ee;
  --accent-dark: #06b6d4;
  --accent-light: #083344;

  --teal: #2dd4bf;
  --teal-light: #06302b;
  --coral: #fb7185;
  --coral-light: #3b0f1c;
  --amber: #fbbf24;
  --amber-light: #3a2a08;
  --violet: #818cf8;
  --violet-light: #1a2150;
  --network: #fb7185;
  --network-light: #3b0f1c;

  --success: #34d399;
  --success-bg: #06302b;
  --warning: #fbbf24;
  --warning-bg: #3a2a08;
  --danger: #f87171;
  --danger-bg: #3b0f1c;
  --info: #38bdf8;
  --info-bg: #0c2f4a;

  --neutral-50: #0a1424;
  --neutral-100: #0e1b31;
  --neutral-200: #14263f;
  --neutral-300: #1d3355;
  --neutral-400: #33507c;
  --neutral-500: #5b7aa3;
  --neutral-600: #8ba6c7;
  --neutral-700: #b9cbe2;
  --neutral-800: #dbe7f6;
  --neutral-900: #f2f7fd;

  --bg-page: #081222;
  --bg-card: linear-gradient(165deg, #0f2140 0%, #0c1a32 60%, #0b172c 100%);
  --bg-sidebar: #0a1730;
  --bg-topbar: rgba(8, 18, 34, 0.88);
  --bg-soft: #14263f;
  --bg-elevated: linear-gradient(165deg, #12264a 0%, #0e1d38 100%);

  --text-primary: #eef4fd;
  --text-secondary: #b9cbe2;
  --text-tertiary: #7d96b8;

  --border: #1b3358;
  --border-strong: #2a4a7c;
  --border-focus: #3b82f6;

  --nav-bg: rgba(8, 18, 34, 0.88);

  --shadow-primary: 0 12px 32px rgb(37 99 235 / 0.45);
  --shadow-accent: 0 10px 28px rgb(34 211 238 / 0.28);
  --glow-primary: 0 0 26px rgb(59 130 246 / 0.45);

  --grad-brand: linear-gradient(135deg, #2563eb 0%, #38bdf8 100%);
  --grad-primary: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 55%, #67e8f9 130%);
  --grad-health: linear-gradient(135deg, #14b8a6 0%, #34d399 100%);
  --grad-calm: linear-gradient(135deg, #0ea5e9 0%, #2dd4bf 100%);
  --grad-gold: linear-gradient(135deg, #f59e0b 0%, #fcd34d 100%);
  --grad-soft: linear-gradient(135deg, #0f2440 0%, #06302b 60%, #3a2a08 100%);

  --navpro-brand-1: #3b82f6;
  --navpro-brand-2: #22d3ee;
  --navpro-pill-1: #1d4ed8;
  --navpro-pill-2: #3b82f6;
  --navpro-pill-3: #67e8f9;
  --navpro-tile-bg: rgb(59 130 246 / 0.13);
  --navpro-tile-border: rgb(59 130 246 / 0.3);
  --navpro-tile-icon: #93c5fd;
  --navpro-tile-shine: rgb(255 255 255 / 0.08);
}

/* ═══ کامپوننت‌ها — به سبک کیت‌های Figma ═══ */

/* دکمه اصلی: آبی گرادیانی تمام‌عرض با سایه آبی (fig1/fig3/fig6) */
.btn-primary,
.btn-gradient {
  background: var(--grad-primary);
  color: #fff;
  border: 0;
  border-radius: 16px;
  box-shadow: var(--shadow-primary), inset 0 1px 0 rgb(255 255 255 / 0.35);
  font-weight: 800;
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}
.btn-primary:hover,
.btn-gradient:hover { filter: brightness(1.07); transform: translateY(-1px); }
.btn-primary:active,
.btn-gradient:active { transform: scale(0.98); }
.btn-primary svg,
.btn-gradient svg { color: #fff; }

/* دکمه ثانویه: outlin آبی قرصی */
.btn-secondary {
  border: 1.5px solid var(--border-strong);
  border-radius: 16px;
  font-weight: 700;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.btn-secondary:hover { border-color: var(--primary); background: var(--primary-light); }
html[data-theme='dark'] .btn-secondary:hover { background: rgb(59 130 246 / 0.12); }

/* کارت: سفید کلینیکال با بوردر و سایه آبی نرم (fig1) */
.card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

/* تایل‌های سریع پاستلی ۴رنگ (fig2: Si Sehat) */
.quick-grid > *:nth-child(4n+1) .quick-card { background: linear-gradient(160deg, #e3efff 0%, #f4f8ff 100%); border-color: #c4dbfb; }
.quick-grid > *:nth-child(4n+2) .quick-card { background: linear-gradient(160deg, #d9f8ef 0%, #f2fdf9 100%); border-color: #b6ecdb; }
.quick-grid > *:nth-child(4n+3) .quick-card { background: linear-gradient(160deg, #ffe9d6 0%, #fff7ef 100%); border-color: #fbd9b8; }
.quick-grid > *:nth-child(4n+4) .quick-card { background: linear-gradient(160deg, #e6e4ff 0%, #f5f4ff 100%); border-color: #cfc9fb; }
.quick-grid .quick-card span:last-child { color: #0f172a; font-weight: 800; }
html[data-theme='dark'] .quick-grid > *:nth-child(4n+1) .quick-card { background: linear-gradient(160deg, #10294f 0%, #0c1d3a 100%); border-color: #1e4a8a; }
html[data-theme='dark'] .quick-grid > *:nth-child(4n+2) .quick-card { background: linear-gradient(160deg, #06302b 0%, #0a1f2e 100%); border-color: #0e5f54; }
html[data-theme='dark'] .quick-grid > *:nth-child(4n+3) .quick-card { background: linear-gradient(160deg, #3a2408 0%, #221809 100%); border-color: #7c4a12; }
html[data-theme='dark'] .quick-grid > *:nth-child(4n+4) .quick-card { background: linear-gradient(160deg, #232058 0%, #141238 100%); border-color: #4540a3; }
html[data-theme='dark'] .quick-grid .quick-card span:last-child { color: #eef4fd; }

/* چیپ انتخاب‌شده: قرص آبی (fig1 date pills / fig3) */
.chip.selected {
  background: var(--grad-primary);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-primary);
}
.chip.selected svg { color: #fff; }

/* اینپوت: فوکوس آبی با رینگ */
.input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgb(37 99 235 / 0.16);
  outline: none;
}

/* سربه‌راه (topbar) کلینیکال */
.topbar { background: var(--bg-topbar); border-bottom: 1px solid var(--border); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.topbar-title { color: var(--text-primary); }
.topbar-title-en { color: var(--text-tertiary); }

/* سربرگ صفحات: تایپوگرافی بولد تیره مثل کیت‌ها */
.page-head h1 { letter-spacing: -0.3px; }
.page-head p { color: var(--text-tertiary); }

/* تب‌های مرکز سلامت: فعال آبی قرصی */
.hh-tab.active {
  background: var(--grad-primary);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-primary);
}
.hh-tab.active .hh-tab-icon { color: #fff !important; }

/* سگمنت‌ها */
.segmented button.active {
  background: var(--grad-primary);
  color: #fff;
  box-shadow: var(--shadow-primary);
}

/* بج‌ها: خواناتر */
.badge.success { font-weight: 800; }
.badge.danger { font-weight: 800; }

/* آیکون‌تایل روی کارت پاستلی: خوانا بماند */
.quick-card .icon-tile { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 3px 8px rgb(15 23 42 / 0.12); }

/* اسکرول‌بار هم‌خانواده */
::-webkit-scrollbar-thumb { background: #b9d2f2; }
html[data-theme='dark'] ::-webkit-scrollbar-thumb { background: #24466f; }

@media (prefers-reduced-motion: reduce) {
  .btn-primary, .btn-gradient, .btn-secondary, .quick-card { transition: none; }
}

/* چیپ‌های ماژول سلامت جدید هم آبی قرصی (یو‌نiform با تم کلینیکال) */
.well-chip.selected,
.well-sev.selected {
  background: var(--grad-primary);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-primary);
}
.well-chip.selected svg { color: #fff; }

/* آواتار آیکن پزشک — بزرگ‌تر و برجسته */
.srv-provider-top { align-items: center; gap: 12px; }
.srv-provider-top .srv-avatar { width: 58px; height: 58px; border-radius: 19px; box-shadow: var(--shadow-sm); }
.srv-provider-top .srv-avatar svg { width: 27px; height: 27px; }

/* کارت کوچک دارو (فقط تب ثبت علائم): زبان hu-card تب‌های ماهانه/روزانه/تحلیل —
   شیشه‌ای خنثی + لهجه‌خط وضعیت (سبز/قرمز/تیل). بدون فیل زرد/نارنجی. جمع‌وجور. */
.drug-card.stacked { position: relative; overflow: hidden; padding: 9px 11px; gap: 6px; border-radius: 16px; border: none;
  background: rgba(255,255,255,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgb(15 23 42 / .08); border-inline-start: 3px solid var(--border-strong); }
.drug-card.stacked::before { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.5), transparent 55%); pointer-events: none; }
.drug-card.stacked .drug-name { font-size: 13px; }
.drug-card.stacked .drug-detail { font-size: 11px; }
.drug-card.stacked .badge { font-size: 10px; }
.drug-card.stacked .btn-sm { height: 28px; min-height: 28px; font-size: 11px; }
.drug-card.stacked.taken { border-inline-start-color: #22c55e; background: linear-gradient(135deg, rgb(34 197 94 / .1), rgba(255,255,255,.72) 65%); }
.drug-card.stacked.missed { border-inline-start-color: #ef4444; background: linear-gradient(135deg, rgb(239 68 68 / .08), rgba(255,255,255,.72) 65%); }
.drug-card.stacked.pending { border-inline-start-color: #14b8a6; background: linear-gradient(135deg, rgb(20 184 166 / .1), rgba(255,255,255,.72) 65%); }
.drug-card.stacked.paused { opacity: .65; }
html[data-theme='dark'] .drug-card.stacked { background: rgba(255,255,255,.045); box-shadow: 0 4px 14px rgb(0 0 0 / .25); }
html[data-theme='dark'] .drug-card.stacked::before { background: linear-gradient(180deg, rgba(255,255,255,.05), transparent 55%); }
html[data-theme='dark'] .drug-card.stacked.taken { border-inline-start-color: #22c55e; background: linear-gradient(135deg, rgb(34 197 94 / .14), rgba(255,255,255,.045) 65%); }
html[data-theme='dark'] .drug-card.stacked.missed { border-inline-start-color: #ef4444; background: linear-gradient(135deg, rgb(239 68 68 / .12), rgba(255,255,255,.045) 65%); }
html[data-theme='dark'] .drug-card.stacked.pending { border-inline-start-color: #14b8a6; background: linear-gradient(135deg, rgb(20 184 166 / .13), rgba(255,255,255,.045) 65%); }