/* ==========================================================================
   سیستم طراحی «سلامت خانواده»
   --------------------------------------------------------------------------
   این فایل بعد از tailwind.css بارگذاری می‌شود و سه کار انجام می‌دهد:

   ۱) پل توکن: کلاس‌های خاکستری تیلویند (slate) را به توکن‌های رنگی برند وصل
      می‌کند تا لایت و دارک در همه‌ی صفحات دقیقاً یکی باشد — بدون اینکه لازم
      باشد ۲۷۰۰ کلاس در ۳۵ قالب دستی عوض شود.
   ۲) مقیاس‌های واحد: شعاع گوشه، ارتفاع کنترل‌ها، هدف لمسی، و اجزای دکمه.
   ۳) دسترسی‌پذیری: بازگرداندن حلقه‌ی فوکوس، احترام به prefers-reduced-motion.

   نکته: tailwind.css یک فایل تولیدشده است؛ هیچ‌وقت دستی ویرایشش نکنید.
   تغییرات ظاهریِ سراسری باید همین‌جا نوشته شوند.
   ========================================================================== */


/* ==========================================================================
   ۱) مقیاس‌های پایه
   ========================================================================== */
:root {
    /* شعاع گوشه — تنها چهار مقدار مجاز در کل اپ */
    --r-chip: 0.75rem;   /* 12px — نشان‌ها، تگ‌ها، آیکون‌های کوچک */
    --r-control: 1rem;   /* 16px — دکمه‌ها، اینپوت‌ها، سلکت‌ها */
    --r-card: 1.5rem;    /* 24px — کارت‌ها و پنل‌ها */
    --r-pill: 9999px;    /* دکمه‌های گرد و آواتارها */

    /* ارتفاع کنترل‌ها — حداقل ۴۴px برای لمس روی موبایل */
    --control-h: 3rem;       /* 48px — دکمه و اینپوت استاندارد */
    --control-h-sm: 2.75rem; /* 44px — حداقل مطلق */

    /* مدت انیمیشن‌ها */
    --dur-fast: 150ms;
    --dur-base: 220ms;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}


/* ==========================================================================
   ۲) پل توکن: slate تیلویند → توکن‌های برند
   --------------------------------------------------------------------------
   هر کلاس مستقیماً به متغیری وصل می‌شود که خودش با html.dark عوض می‌شود،
   پس دیگر لازم نیست لایت و دارک جداگانه تنظیم شوند و هر دو حتماً یکی می‌مانند.
   کلاس‌های مربوط به white دست‌نخورده می‌مانند، چون روی هدرهای رنگی به‌عنوان
   متن/پوشش شفاف استفاده می‌شوند و معنی‌شان «سفید» است نه «سطح».
   ========================================================================== */

/* ---------- سطح‌ها (روشن) ---------- */
.bg-slate-50   { background-color: var(--panel-2); }
.bg-slate-50\/50,
.bg-slate-50\/80,
.bg-slate-50\/90 { background-color: var(--panel-2); }
.bg-slate-100  { background-color: var(--panel-3); }
.bg-slate-100\/80 { background-color: var(--panel-3); }
.bg-slate-200  { background-color: var(--border); }
.bg-slate-300  { background-color: var(--border); }

/* ---------- سطح‌ها (تیره) ---------- */
.dark .dark\:bg-slate-800,
.dark .dark\:bg-slate-800\/40,
.dark .dark\:bg-slate-800\/50,
.dark .dark\:bg-slate-800\/60,
.dark .dark\:bg-slate-800\/80 { background-color: var(--panel-2); }

.dark .dark\:bg-slate-900,
.dark .dark\:bg-slate-900\/70,
.dark .dark\:bg-slate-900\/80,
.dark .dark\:bg-slate-900\/95 { background-color: var(--panel); }

.dark .dark\:bg-slate-950,
.dark .dark\:bg-slate-950\/60 { background-color: var(--ink); }

/* شفافیت واقعی برای ظاهر شیشه‌ای، جایی که مرورگر color-mix دارد.
   مرورگرهای قدیمی‌تر خط بالا را نگه می‌دارند و فقط شفافیت را از دست می‌دهند. */
@supports (background: color-mix(in srgb, red 50%, transparent)) {
    .bg-slate-50\/50  { background-color: color-mix(in srgb, var(--panel-2) 50%, transparent); }
    .bg-slate-50\/80  { background-color: color-mix(in srgb, var(--panel-2) 80%, transparent); }
    .bg-slate-50\/90  { background-color: color-mix(in srgb, var(--panel-2) 90%, transparent); }
    .bg-slate-100\/80 { background-color: color-mix(in srgb, var(--panel-3) 80%, transparent); }

    .dark .dark\:bg-slate-800\/40 { background-color: color-mix(in srgb, var(--panel-2) 40%, transparent); }
    .dark .dark\:bg-slate-800\/50 { background-color: color-mix(in srgb, var(--panel-2) 50%, transparent); }
    .dark .dark\:bg-slate-800\/60 { background-color: color-mix(in srgb, var(--panel-2) 60%, transparent); }
    .dark .dark\:bg-slate-800\/80 { background-color: color-mix(in srgb, var(--panel-2) 80%, transparent); }

    .dark .dark\:bg-slate-900\/70 { background-color: color-mix(in srgb, var(--panel) 70%, transparent); }
    .dark .dark\:bg-slate-900\/80 { background-color: color-mix(in srgb, var(--panel) 80%, transparent); }
    .dark .dark\:bg-slate-900\/95 { background-color: color-mix(in srgb, var(--panel) 95%, transparent); }
}

/* ---------- متن ----------
   نسبت تضاد: --text روی --panel در هر دو تم بالای ۱۲:۱ و --muted بالای ۵:۱
   است؛ در حالی که slate-400 روی سفید فقط ۲.۸:۱ بود و رد می‌شد.            */
.text-slate-900,
.text-slate-800,
.text-slate-700 { color: var(--text); }
.text-slate-600,
.text-slate-500,
.text-slate-400 { color: var(--muted); }

.dark .dark\:text-slate-100,
.dark .dark\:text-slate-200 { color: var(--text); }
.dark .dark\:text-slate-300,
.dark .dark\:text-slate-400,
.dark .dark\:text-slate-500 { color: var(--muted); }

/* ---------- خطوط و جداکننده‌ها ---------- */
.border-slate-100,
.border-slate-200,
.border-slate-200\/50,
.border-slate-200\/60,
.border-slate-200\/70,
.border-slate-200\/80 { border-color: var(--border); }

.dark .dark\:border-slate-700,
.dark .dark\:border-slate-700\/50,
.dark .dark\:border-slate-700\/60,
.dark .dark\:border-slate-700\/80,
.dark .dark\:border-slate-800,
.dark .dark\:border-slate-800\/80,
.dark .dark\:border-slate-900 { border-color: var(--border); }

.divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border); }
.dark .dark\:divide-slate-800 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border); }


/* ==========================================================================
   ۳) دسترسی‌پذیری — حلقه‌ی فوکوس
   --------------------------------------------------------------------------
   قبلاً در base.html روی * و *:focus نوشته شده بود outline:none !important که
   ناوبری با کیبورد را کاملاً کور می‌کرد. اینجا هایلایت لمسی موبایل حذف می‌ماند
   (که هدف اصلی آن قانون بود) ولی فوکوس کیبورد برمی‌گردد.
   focus-visible فقط وقتی فعال می‌شود که کاربر با کیبورد حرکت کند، نه با ماوس.
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--blue) !important;
    outline-offset: 2px !important;
    border-radius: var(--r-chip);
}

/* فوکوس داخل فیلدها: علاوه بر حلقه، خود فیلد هم برجسته شود */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    border-color: var(--blue) !important;
}


/* ==========================================================================
   ۴) هدف لمسی حداقل ۴۴×۴۴
   --------------------------------------------------------------------------
   دکمه‌های آیکونیِ کوچک (۳۲ و ۳۶ پیکسل) از نظر بصری کوچک می‌مانند ولی ناحیه‌ی
   قابل لمسشان به ۴۴px گسترش پیدا می‌کند. با کلاس tap-44 روی خود دکمه.
   ========================================================================== */
.tap-44 { position: relative; }
.tap-44::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: max(100%, 2.75rem);
    height: max(100%, 2.75rem);
}


/* ==========================================================================
   ۵) اجزای دکمه
   --------------------------------------------------------------------------
   یک مقیاس، یک شعاع، یک ارتفاع. رنگ‌ها فقط از توکن.
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--control-h);
    padding-inline: 1.25rem;
    border-radius: var(--r-control);
    border: 1px solid transparent;
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--dur-base) var(--ease),
                color var(--dur-base) var(--ease),
                border-color var(--dur-base) var(--ease),
                transform var(--dur-fast) var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn-block { width: 100%; }

.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 12px 24px -14px var(--blue); }
.btn-primary:hover { background: var(--blue-deep); }

.btn-success { background: var(--mint); color: #fff; box-shadow: 0 12px 24px -14px var(--mint); }
.btn-success:hover { filter: brightness(0.94); }

.btn-danger { background: var(--red); color: #fff; box-shadow: 0 12px 24px -14px var(--red); }
.btn-danger:hover { filter: brightness(0.94); }

.btn-secondary {
    background: var(--panel);
    color: var(--text);
    border-color: var(--border);
}
.btn-secondary:hover { background: var(--panel-2); }

.btn-ghost { background: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--panel-2); color: var(--text); }

.btn:disabled,
.btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }


/* ==========================================================================
   ۶) وضعیت «در حال انجام» برای دکمه‌ها
   --------------------------------------------------------------------------
   موتور سراسری در base.html این کلاس را روی هر دکمه‌ای که کاری شروع کرده
   می‌گذارد: ارسال فرم، رفتن به صفحه‌ی دیگر، یا درخواست fetch.
   ========================================================================== */
.is-busy {
    pointer-events: none;
    opacity: 0.75;
    cursor: progress;
}

.ds-spinner {
    display: inline-block;
    width: 1.05em;
    height: 1.05em;
    flex: none;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: ds-spin 0.6s linear infinite;
    vertical-align: -0.15em;
}

@keyframes ds-spin { to { transform: rotate(360deg); } }

/* نوار باریک بالای صفحه هنگام رفتن به صفحه‌ی بعد */
#ds-progress {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    height: 3px;
    width: 0;
    background: var(--blue);
    z-index: 10000;
    transition: width 0.3s var(--ease), opacity 0.3s ease;
    pointer-events: none;
}


/* ==========================================================================
   ۷) اعلان‌ها (Toast) — با توکن، نه هگز ثابت
   ========================================================================== */
.custom-toast {
    border-radius: var(--r-control) !important;
    font-weight: 700;
    font-size: 0.8125rem;
}
.custom-toast.success { background-color: var(--mint) !important; }
.custom-toast.error   { background-color: var(--red) !important; }
.custom-toast.info    { background-color: var(--blue) !important; }
.custom-toast.warning { background-color: var(--amber) !important; }
.custom-toast.debug   { background-color: var(--muted) !important; }


/* ==========================================================================
   ۸) ریسپانسیو و ایمنی چیدمان
   ========================================================================== */
/* هیچ صفحه‌ای نباید افقی اسکرول بخورد.
   عمداً از overflow-x:hidden روی html/body استفاده نمی‌شود: آن قانون
   body را به یک ظرف اسکرول تبدیل می‌کند و position:sticky سایدبار دسکتاپ
   را می‌شکند. به‌جایش جلوی سرریزِ خودِ عناصر گرفته می‌شود. */
html, body { max-width: 100%; }

/* جدول‌ها و بلوک‌های پهن داخل ظرف خودشان اسکرول شوند، نه کل صفحه */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* اسکرول افقیِ اسلایدرها بدون نوار زشت */
.scrollbar-none { scrollbar-width: none; -ms-overflow-style: none; }
.scrollbar-none::-webkit-scrollbar { display: none; }

/* تصاویر هیچ‌وقت از ظرفشان بیرون نزنند */
img, svg, video { max-width: 100%; height: auto; }

/* روی تبلت، شبکه‌های دوستونی موبایل خیلی کشیده نشوند */
@media (min-width: 768px) and (max-width: 1023px) {
    .tablet-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ==========================================================================
   ۹) احترام به تنظیم «کاهش حرکت» سیستم‌عامل
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    /* اسپینر باید بچرخد وگرنه معنی‌اش را از دست می‌دهد */
    .ds-spinner { animation-duration: 0.8s !important; animation-iteration-count: infinite !important; }
}


/* ==========================================================================
   ۱۰) تضاد رنگ دکمه‌های موجود
   --------------------------------------------------------------------------
   جایی که متن سفید روی رنگ روشن نشسته، نسبت تضاد زیر حد استاندارد (۴.۵:۱)
   بود. به‌جای عوض کردن هویت رنگی، فقط یک پله تیره‌تر می‌شود؛ چشم تفاوت را
   تقریباً نمی‌بیند ولی متن خوانا می‌شود.

   انتخابگرهای ترکیبی (.bg-x.text-white) باعث می‌شوند نشان‌ها و تگ‌هایی که
   همین پس‌زمینه را با متن تیره دارند دست‌نخورده بمانند.

   اعداد اندازه‌گیری‌شده (متن سفید روی رنگ):
     emerald-600 3.77 → emerald-700 5.48
     amber-500   2.15 → amber-700   5.02
     rose-500    3.67 → rose-600    4.70
     teal-600    3.74 → teal-800    5.47
   ========================================================================== */

.bg-emerald-500.text-white,
.bg-emerald-600.text-white { background-color: #047857; }
.text-white.hover\:bg-emerald-700:hover,
.bg-emerald-700.text-white { background-color: #065F46; }

.bg-amber-500.text-white,
.bg-amber-600.text-white { background-color: #B45309; }
.text-white.hover\:bg-amber-600:hover { background-color: #92400E; }

.bg-rose-500.text-white  { background-color: #E11D48; }
.text-white.hover\:bg-rose-600:hover { background-color: #BE123C; }

.bg-teal-600.text-white  { background-color: #0F766E; }

/* گرادیان‌ها: همان یک پله تیره‌تر برای استاپ‌های روشن */
.text-white.from-amber-500 { --tw-gradient-from: #B45309 var(--tw-gradient-from-position); }
.text-white.to-orange-500  { --tw-gradient-to: #C2410C var(--tw-gradient-to-position); }
.text-white.from-teal-600  { --tw-gradient-from: #0F766E var(--tw-gradient-from-position); }
.text-white.to-cyan-600    { --tw-gradient-to: #0E7490 var(--tw-gradient-to-position); }
.text-white.from-pink-500  { --tw-gradient-from: #DB2777 var(--tw-gradient-from-position); }


/* ==========================================================================
   ۱۱) رنگ متن روی دکمه‌های اجزای .btn در تم تیره
   --------------------------------------------------------------------------
   توکن‌های تیره عمداً روشن‌اند تا روی پس‌زمینه‌ی تیره خوانا باشند؛ همان رنگ
   روشن با متن سفید فاجعه است (مثلاً mint تیره با سفید فقط ۱.۹۲:۱). پس روی
   دکمه‌های پُررنگِ تم تیره، متن تیره می‌نشیند — اندازه‌گیری‌شده:
   آبی ۴.۸۲ ، سبز ۹.۷۶ ، قرمز ۵.۵۳ ، کهربایی ۱۰.۶۳
   ========================================================================== */
:root { --on-accent: #FFFFFF; }
html.dark { --on-accent: #0A121F; }

.btn-primary,
.btn-success,
.btn-danger { color: var(--on-accent); }

/* در تم روشن، سبزِ توکن برای متن سفید کم‌تضاد است؛ برای پُرکردن دکمه یک
   پله تیره‌تر استفاده می‌شود (۵.۳۵:۱). در تم تیره همان mint می‌ماند چون
   متنش تیره است. */
.btn-success { background: #0A7A54; }
html.dark .btn-success { background: var(--mint); }


/* ==========================================================================
   ۱۲) یکسان‌سازی شعاع گوشه‌های خارج از مقیاس
   --------------------------------------------------------------------------
   در قالب‌ها چهار مقدار پراکنده استفاده شده بود (۴px, ۶px, ۸px کنار مقیاس
   اصلی). همه به «شعاع چیپ» می‌رسند تا در کل اپ فقط چهار شعاع وجود داشته
   باشد: چیپ ۱۲، کنترل ۱۶، کارت ۲۴، و قرصی.
   ========================================================================== */
.rounded    { border-radius: var(--r-chip); }
.rounded-sm { border-radius: var(--r-chip); }
.rounded-md { border-radius: var(--r-chip); }
.rounded-lg { border-radius: var(--r-chip); }