/* ==========================================================================
   سیستم طراحی «سلامت خانواده»
   --------------------------------------------------------------------------
   این فایل بعد از 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); }

/* ---------- رنگ‌های برند ----------
   کلاس‌های brand-* تازه به کانفیگ تیلویند اضافه شده‌اند (قبلاً اصلاً
   تولید نمی‌شدند و عناصرِ صفحه‌ی بارگذاری آزمایش بی‌رنگ می‌ماندند).
   مقدارِ کانفیگ همان توکنِ حالت روشن است؛ اینجا فقط حالت تاریک تنظیم
   می‌شود تا با --blue و --mint در دارک هماهنگ بماند.                    */
.dark .text-brand-blue { color: var(--blue); }
.dark .dark\:text-brand-blue { color: var(--blue); }
.dark .text-brand-green { color: var(--mint); }
.dark .border-brand-blue,
.dark .focus\:border-brand-blue:focus,
.dark .hover\:border-brand-blue:hover,
.dark .dark\:hover\:border-brand-blue:hover { border-color: var(--blue); }
.dark .hover\:text-brand-blue:hover { color: var(--blue); }

/* ---------- خطوط و جداکننده‌ها ---------- */
.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); }


/* ویژگی hidden باید همیشه برنده باشد.
   کلاس‌هایی مثل flex/grid/inline-flex در تیلویند display را ست می‌کنند و
   چون ویژگی‌مندی (specificity) کلاس از [hidden] بیشتر است، عنصری که با
   جاوااسکریپت hidden شده همچنان دیده می‌شد (مثلاً کارت پیش‌نمایش فایل). */
[hidden] { display: none !important; }


/* ==========================================================================
   ۳) دسترسی‌پذیری — حلقه‌ی فوکوس
   --------------------------------------------------------------------------
   قبلاً در 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%; }

/* کاربر: «صفحه به چپ و راست کشیده می‌شود، لق می‌زند» — این محتوا
   سرریز ندارد؛ حسِ کِش‌آمدن از رفتارِ پیش‌فرضِ مرورگر موبایل است که
   وقتی با انگشت افقی می‌کشی، کلِ صفحه را کمی جابه‌جا می‌کند (باونسِ
   الاستیک). overscroll-behavior-x این حرکت را می‌بندد بدون اینکه
   مثل overflow-x:hidden یک ظرفِ اسکرولِ جدید بسازد؛ یعنی
   position:sticky سایدبار دست‌نخورده می‌ماند. */
html, body { overscroll-behavior-x: none; }

/* بندِ ۱.۲۹ — خواسته‌ی تازه‌ی کاربر: «تب‌بار در صفحه‌هایی که اسکرول می‌شود تکون می‌خوره» + «صفحه‌ی خانه افقی تکون می‌خوره، کلاً فیکس باشد، تمام صفحات». فیکسِ قبلی فقط باونسِ افقی (کشیدنِ چپ/راست) را بست; باونسِ عمودی (اسکرولِ سریع تا انتهای بالا/پایینِ صفحه) هم می‌تواند کلِ لیاوتِ ویو‌پورت را لحظه‌ای جابه‌جا کند و هر عنصرِ fixed (مثلِ تب‌بار) را با آن — پس محورِ y را هم می‌بندیم. */
html, body { overscroll-behavior-y: none; }

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

/* کاربر بعد از فیکسِ قبلی: «هنوز از سمت راست که اسکرول می‌کنم تکون
   می‌خوره». آن فیکس فقط باونسِ کلِ صفحه را بست؛ این ردیف‌های خودشان
   یک ظرفِ اسکرولِ جدا هستند (مثل ردیفِ اعضای خانواده در داشبورد،
   overflow-x-auto) و لبه‌ی خودشان را جدا باونس می‌کنند. contain (نه
   none) اسکرولِ خودِ ردیف را دست‌نخورده می‌گذارد، فقط رفتنِ باونس به
   بیرونِ ردیف را می‌بندد. */
.scroll-x,
.overflow-x-auto {
    overscroll-behavior-x: contain;
}

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

/* ==========================================================================
   بریدنِ مطمئنِ هاله‌های تزیینی (باگِ سافاری)
   --------------------------------------------------------------------------
   کاربر با عکس نشان داد: «کنار این دوتا تو سافاری زده بیرون افتضاحه».

   الگوی مقصر در چند کارت تکرار شده بود:

       <div class="relative overflow-hidden rounded-3xl">
           <div class="absolute -right-8 -top-8 blur-2xl"></div>

   یعنی یک هاله‌ی مات که عمداً بیرونِ کادر نشسته و overflow:hidden قرار
   است ببُردش. کروم و فایرفاکس می‌بُرند؛ سافاری ترکیبِ «گوشه‌ی گرد +
   overflow:hidden + فرزندی که filter دارد» را درست نمی‌بُرد و هاله از
   کنارِ کارت می‌زند بیرون.

   ماسک همان بریدن را انجام می‌دهد و سافاری آن را رعایت می‌کند.

   ⚠️ عمداً یک کلاسِ جداست، نه قانونی روی همه‌ی .overflow-hidden ها:
      ماسک برای فرزندانِ position:fixed یک containing block می‌سازد —
      همان چیزی که پنلِ اعلان‌ها را یک‌بار به بالای صفحه پرت کرد. پس
      فقط روی کارت‌هایی گذاشته می‌شود که واقعاً هاله‌ی مات دارند.
   ========================================================================== */
.glow-clip {
    overflow: hidden;
    -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
    mask-image: radial-gradient(#fff, #000);
}

/* تصاویر هیچ‌وقت از ظرفشان بیرون نزنند */
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); }


/* ==========================================================================
   ۱۳) پراگرس‌بارِ دکمه‌ی «یادآوری کنم»
   --------------------------------------------------------------------------
   خواسته‌ی کاربر: بعد از زدنِ دکمه، خودِ دکمه پر شود و تا پرشدن
   دیزیبل بماند (نه یک پراگرس‌بارِ جدا کنارش). عرضِ یک لایه‌ی داخلی از
   ۰ به ۱۰۰٪ در reminder-cooldown.js انیمیت می‌شود؛ اینجا فقط ظاهرش.

   بازخوردِ بعدیِ کاربر دقیق‌تر بود: بدونِ عددِ درصد، فقط دیداری — در
   حالِ شمارش‌معکوس دکمه طوسی باشد و لایه‌ی داخلی ذره‌ذره زرد پرش کند
   تا وقتی به حالتِ فعال برگردد. رنگِ کهرباییِ همیشگیِ دکمه (که با
   currentColor فرقی با حالتِ عادی نداشت) اینجا با override صریح جای
   خودش را به طوسی می‌دهد؛ کلاس‌های Tailwindِ روی خودِ تگ هنوز پایه‌ی
   رنگِ حالتِ فعال‌اند، این قانون‌ها فقط حالتِ is-cooling را می‌پوشانند.
   ========================================================================== */
.reminder-btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.reminder-btn__fill {
    position: absolute;
    inset-inline-start: 0;
    inset-block: 0;
    width: 0%;
    background: #F5B942; /* زرد/کهربایی — همان --amber توکنِ رنگیِ اپ */
    opacity: 0.4;
    pointer-events: none;
    z-index: -1;
    transition: width 0ms linear;
}
.reminder-btn.is-cooling {
    cursor: not-allowed;
    background: #E2E8F0 !important;
    color: #64748B !important;
    border-color: #CBD5E1 !important;
}
html.dark .reminder-btn.is-cooling {
    background: #334155 !important;
    color: #94A3B8 !important;
    border-color: #475569 !important;
}
@media (prefers-reduced-motion: reduce) {
    .reminder-btn__fill { transition: none !important; }
}

/* بندِ ۰.۵۳: دکمه‌ی «تماس»، خارج از بازه‌ی ۹ تا ۲۰، طوسی و غیرفعال
   نشان داده می‌شود — reminder-cooldown.js این کلاس را روی دکمه‌هایی
   با data-channel="call" می‌گذارد/برمی‌دارد (هر دقیقه دوباره چک
   می‌شود تا لبه‌ی ساعت ۹/۲۰ هم بدونِ رفرشِ صفحه رعایت شود). */
.reminder-btn.is-quiet-hours {
    cursor: not-allowed;
    opacity: 0.5;
    background: #E2E8F0 !important;
    color: #64748B !important;
    border-color: #CBD5E1 !important;
}
html.dark .reminder-btn.is-quiet-hours {
    background: #334155 !important;
    color: #94A3B8 !important;
    border-color: #475569 !important;
}

/* ==========================================================================
   ۱۴) چرخِ افقیِ تقویمِ مصرف — چیپِ وسط برجسته می‌شود
   --------------------------------------------------------------------------
   خواسته‌ی کاربر: «یه‌دونه چرخ باشه که وسط سلکت هست». جاوااسکریپتِ
   صفحه‌ی داروها (medication_schedule.html) کلاسِ is-centered را روی
   چیپی می‌گذارد که دقیقاً وسطِ نوار افتاده؛ اینجا فقط ظاهرش.
   ========================================================================== */
.history-day {
    transition: transform .15s ease, box-shadow .15s ease;
}
.history-day.is-centered {
    transform: scale(1.12);
    box-shadow: 0 10px 22px -10px rgba(37, 89, 199, .45);
}
@media (prefers-reduced-motion: reduce) {
    .history-day { transition: none !important; }
    .history-day.is-centered { transform: none; }
}

/* ==========================================================================
   ۱۵) سوییچ‌های «دسترسیِ اشتراک‌گذاری» — جابه‌جاییِ دایره‌ی سفید
   --------------------------------------------------------------------------
   permission-switches.js موقعِ روشن/خاموش‌شدن، متغیرِ --dot-left را
   مستقیماً با JS ست می‌کند (نه صرفاً یک کلاسِ Tailwind) تا این حرکت
   به بیلدِ تازه‌ی tailwind.css وابسته نباشد. این فایل دستی نوشته
   می‌شود و نیازی به build:css ندارد — همیشه بلافاصله اثر می‌کند.
   ========================================================================== */
.switch-box::after {
    left: var(--dot-left, 2px);
    transition: left .15s ease, background-color .15s ease;
}

/* باگِ گزارش‌شده: «انیمیشنِ سویچ چپ‌وراست نمی‌رود، دایره ثابت می‌ماند».
   ریشه: خودِ تمپلیت (access_settings.html) روی همان اسپن یک کلاسِ
   ثابتِ تیلویند هم دارد: after:left-[2px] -- یعنی یک قانونِ CSS با
   همان تخصصِ (۰،۱،۱) قانونِ بالا در tailwind.css. جابه‌جاییِ واقعیِ
   نقطه‌ی سفید نباید به‌کلی به یک جنگِ کشسانیِ بینِ دو فایلِ CSS یا
   به اجرایِ درستِ جاوااسکریپت گره بخورد؛ این قانون با سلکتورِ
   خواهر/برادرِ استاندارد (هماهنگ با همان الگویی که
   peer-checked:bg-emerald-500 از قبل با آن رنگ را عوض می‌کند) یک
   تخصصِ بالاتر (۰،۲،۱) می‌سازد که همیشه برنده است -- کاملاً مستقل
   از ترتیبِ بارگذاریِ فایل‌ها یا اجرایِ JS. */
.js-shared-category-toggle:checked ~ .switch-box::after {
    left: 22px;
}

/* ==========================================================================
   بندِ ۰.۷۱ — فلشِ مشترکِ اکسپندبل‌ها (همان فلشِ ردیفِ «فضای ذخیره‌سازی»
   در پروفایل): آیکونِ chevron_left که در حالتِ بسته به چپ است و با بازشدنِ
   <details> با چرخشِ نرمِ ۳۰۰ میلی‌ثانیه‌ای رو به پایین می‌شود.
   استفاده: <span class="material-icons expand-chevron …">chevron_left</span>
   داخلِ <summary>ِ یک <details>. سلکتورِ «> summary» عمداً فقط به
   <details>ِ مستقیمِ همان summary نگاه می‌کند تا یک details ِ تودرتو فلشِ
   والد را نچرخاند.
   ========================================================================== */
.expand-chevron {
    display: inline-block;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}
details[open] > summary .expand-chevron {
    transform: rotate(-90deg);
}
@media (prefers-reduced-motion: reduce) {
    .expand-chevron { transition: none; }
}

/* ==========================================================
   نامِ انگلیسیِ دارو — بندِ ۰.۷۷
   فونتِ اپ (Shabnam FD) همه‌ی ارقام را فارسی می‌کشد؛ در نامِ لاتین
   «DULOXETINE ۲۰ MG» هم غلط‌انداز است و هم با جعبه‌ی دارو فرق دارد.
   نامِ انگلیسی با فونتِ سیستمی (ارقامِ لاتین) و ایزوله‌ی LTR نمایش
   داده می‌شود؛ overflow-wrap:anywhere تا نام‌هایِ بلندِ بی‌فاصله هم
   رویِ موبایل از کارت بیرون نزنند.
   ========================================================== */
.drug-en {
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    unicode-bidi: isolate;
    overflow-wrap: anywhere;
    letter-spacing: .01em;
}
.drug-title-primary { overflow-wrap: anywhere; }