/* ==========================================================================
   زیَسمون — تم «آبی گرم»
   File: assets/css/custom.css
   --------------------------------------------------------------------------
   ترتیب لود (مهم):
     bootstrap.rtl.min.css → bootstrap-icons → vazirmatn → theme-dark.css → custom.css
   این فایل فقط لایه‌ی ظاهر را عوض می‌کند؛ هیچ id یا کلاسی که JS/PHP به آن
   وابسته است حذف یا تغییر نام نمی‌دهد.

   فهرست:
     0. فونت‌ها
     1. توکن‌های طراحی (روشن / تاریک)
     2. نگاشت توکن‌ها به متغیرهای Bootstrap
     3. پایه: body، تایپوگرافی، انتخاب، فوکوس، اسکرول‌بار
     4. سطوح: کارت‌ها، مدال، دراپ‌داون، لیست
     5. دکمه‌ها
     6. فرم‌ها
     7. نشان‌ها، هشدارها، پیشرفت، ناوبری
     8. آیکون‌ها (Bootstrap Icons با استایل یکپارچه)
     9. الگوهای جدید (هدر صفحه، بخش «امروز»، دونات بودجه، ...)
    10. رفع ناسازگاری‌های کد فعلی
   ========================================================================== */


/* ==========================================================================
   0. فونت‌ها
   استعداد (OFL) به‌صورت self-host: CDNهای خارجی در ایران ناپایدارند و فونت تیتر
   نباید به آن‌ها گره بخورد. فایل‌ها Variable هستند (۱۰۰ تا ۹۰۰) — یک فایل برای
   همه‌ی وزن‌ها، حجم کمتر. وزیرمتن همان CDN فعلی پروژه می‌ماند.
   ========================================================================== */
@font-face {
    font-family: 'Estedad';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('../fonts/estedad/estedad-arabic-wght-normal.woff2') format('woff2-variations'),
         url('../fonts/estedad/estedad-arabic-wght-normal.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
    font-family: 'Estedad';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('../fonts/estedad/estedad-latin-wght-normal.woff2') format('woff2-variations'),
         url('../fonts/estedad/estedad-latin-wght-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ==========================================================================
   1. توکن‌های طراحی
   ========================================================================== */
:root {
    /* — برند — آبی فقط برای اکشن و نقطه‌ی تمرکز، نه پس‌زمینه */
    --zs-blue:          #2E7BC4;   /* دکمه‌ی پر، آیکون فعال، نوار پیشرفت */
    --zs-blue-hover:    #256AAD;   /* hover دکمه — ۱۰٪ تیره‌تر، قابل تشخیص */
    --zs-blue-press:    #1E5A94;
    --zs-blue-text:     #256AAD;   /* لینک و متن ریز آبی: کنتراست 5.2:1 روی کرم (AA) */
    --zs-blue-tint:     #E8F0F8;   /* پس‌زمینه‌ی ملایم آیتم فعال */
    --zs-blue-ring:     rgba(46, 123, 196, .18);
    --zs-ink:           #0F2E4A;   /* تیترها و اعداد مهم */

    /* — مکمل گرم — */
    --zs-terracotta:        #C97B5E;  /* فقط سطح بزرگ/آیکون؛ متن سفید رویش AA نمی‌شود */
    --zs-terracotta-strong: #A85C40;  /* دکمه‌ی پر تراکوتا با متن سفید (4.9:1) */
    --zs-terracotta-text:   #9A5238;
    --zs-terracotta-tint:   #F6E7E0;
    --zs-saffron:           #E7A857;  /* نشان «متوسط» — از هویت قبلی حفظ شد */
    --zs-saffron-tint:      #FBF0DC;
    --zs-saffron-text:      #7A5212;

    /* — وضعیت — */
    --zs-sage:          #7A8B7A;   /* موفقیت/تأیید (سطح و آیکون) */
    --zs-sage-strong:   #5E705E;   /* دکمه‌ی موفقیت با متن سفید (5.3:1) */
    --zs-sage-text:     #4A5A4A;
    --zs-sage-tint:     #E9EEE7;
    --zs-danger:        #B4493B;   /* قرمز گرم؛ فقط خطا و حذف */
    --zs-danger-tint:   #F7E3DF;
    --zs-info:          #5B7A8C;   /* آبی-خاکستری خنثی برای «اطلاعات/پزشکی» تا با برند رقابت نکند */
    --zs-info-tint:     #E7EDF0;

    /* — سطوح و متن — */
    --zs-bg:            #F8F5F0;   /* کرم گرم؛ جایگزین خاکستری-آبی #f4f6f9 */
    --zs-surface:       #FDFBF7;   /* کارت */
    --zs-surface-2:     #F3EEE6;   /* سطح فرورفته: input-group، ردیف‌های داخلی */
    --zs-surface-3:     #EDE6DB;   /* ریل نوار پیشرفت */
    --zs-border:        rgba(46, 123, 196, .12);
    --zs-border-warm:   #E6DED2;   /* جداکننده‌های داخلی — آبی در مقیاس ریز «سرد» دیده می‌شد */
    --zs-text:          #1F2A37;
    --zs-text-2:        #5A6675;
    --zs-text-3:        #8A93A0;   /* فقط متن غیرضروری (placeholder، آیکون غیرفعال) */

    /* — شکل و عمق — */
    --zs-radius-sm: 10px;
    --zs-radius:    14px;
    --zs-radius-lg: 20px;
    --zs-radius-xl: 28px;
    --zs-shadow-hover: 0 10px 28px -12px rgba(15, 46, 74, .22);
    --zs-shadow-pop:   0 18px 48px -18px rgba(15, 46, 74, .30);

    /* — تایپوگرافی — */
    --zs-font-ui:      'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --zs-font-display: 'Estedad', 'Vazirmatn', system-ui, sans-serif;
    --zs-fs-display: clamp(1.9rem, 1.2rem + 3.2vw, 3.2rem);
    --zs-fs-h1:      clamp(1.55rem, 1.2rem + 1.6vw, 2.2rem);
    --zs-fs-h2:      clamp(1.35rem, 1.1rem + 1.1vw, 1.8rem);
    --zs-fs-h3:      clamp(1.2rem, 1.05rem + .7vw, 1.5rem);
    --zs-fs-h4:      clamp(1.1rem, 1rem + .45vw, 1.3rem);
    --zs-fs-h5:      clamp(1.02rem, .97rem + .25vw, 1.12rem);
    --zs-fs-h6:      1rem;
    --zs-fs-body:    clamp(.94rem, .9rem + .15vw, 1rem);
    --zs-lh:         1.8;
    --zs-lh-tight:   1.45;

    --zs-ease: cubic-bezier(.2, .7, .2, 1);

    /* متغیرهای قدیمی پروژه — به توکن جدید وصل شدند تا استایل‌های درون‌خطی
       فعلی (dashboard.php و navbar.php) خودکار هم‌رنگ شوند */
    --app-font: var(--zs-font-ui);
    --primary-color: var(--zs-blue);
    --primary-dark: var(--zs-ink);
    --hospital-bag-color: var(--zs-blue);
    --accent-saffron: var(--zs-saffron);
    --accent-saffron-tint: var(--zs-saffron-tint);
    --accent-rose: var(--zs-terracotta);        /* رز صورتی کنار تراکوتا ناهماهنگ بود */
    --accent-rose-tint: var(--zs-terracotta-tint);
    --fetal-box-bg: var(--zs-surface-2);
    --fetal-box-text: var(--zs-ink);
    --fetal-box-accent: var(--zs-blue-text);
}

/* تاریک: همان منطق، با پس‌زمینه‌ی قهوه‌ای-زغالی به‌جای سرمه‌ای، تا «گرم» بماند */
[data-bs-theme="dark"] {
    --zs-blue:        #4A91D6;
    --zs-blue-hover:  #6CA6DD;
    --zs-blue-press:  #3A80C4;
    --zs-blue-text:   #7FB2E4;
    --zs-blue-tint:   rgba(74, 145, 214, .16);
    --zs-blue-ring:   rgba(74, 145, 214, .30);
    --zs-ink:         #EDE7DD;

    --zs-terracotta-text: #E3A58C;
    --zs-terracotta-tint: rgba(201, 123, 94, .16);
    --zs-saffron-text:    #EFC27F;
    --zs-saffron-tint:    rgba(231, 168, 87, .15);
    --zs-sage-text:       #A9BBA9;
    --zs-sage-tint:       rgba(122, 139, 122, .20);
    --zs-danger:          #E07A6B;
    --zs-danger-tint:     rgba(180, 73, 59, .20);
    --zs-info:            #93AFBF;
    --zs-info-tint:       rgba(91, 122, 140, .20);

    --zs-bg:          #17181B;
    --zs-surface:     #1F2124;
    --zs-surface-2:   #272A2E;
    --zs-surface-3:   #32363B;
    --zs-border:      rgba(237, 231, 221, .09);
    --zs-border-warm: #34373C;
    --zs-text:        #E9E5DE;
    --zs-text-2:      #A7A39C;
    --zs-text-3:      #7A7771;
    --zs-shadow-hover: 0 10px 28px -12px rgba(0, 0, 0, .6);
    --zs-shadow-pop:   0 18px 48px -18px rgba(0, 0, 0, .7);
    --fetal-box-bg:   var(--zs-surface-2);
}


/* ==========================================================================
   2. نگاشت به Bootstrap — با این کار کلاس‌های موجود (btn-primary، text-muted،
   bg-*-subtle و ...) بدون تغییر HTML رنگ جدید می‌گیرند.
   ========================================================================== */
:root,
[data-bs-theme="light"] {
    --bs-body-font-family: var(--zs-font-ui);
    --bs-body-font-size: var(--zs-fs-body);
    --bs-body-line-height: var(--zs-lh);
    --bs-body-bg: var(--zs-bg);
    --bs-body-bg-rgb: 248, 245, 240;
    --bs-body-color: var(--zs-text);
    --bs-emphasis-color: var(--zs-ink);
    --bs-secondary-color: var(--zs-text-2);
    --bs-tertiary-bg: var(--zs-surface-2);
    --bs-border-color: var(--zs-border-warm);
    --bs-border-radius: var(--zs-radius-sm);
    --bs-border-radius-lg: var(--zs-radius);
    --bs-border-radius-xl: var(--zs-radius-lg);
    --bs-border-radius-xxl: var(--zs-radius-xl);
    --bs-heading-color: var(--zs-ink);
    --bs-link-color: var(--zs-blue-text);
    --bs-link-color-rgb: 37, 106, 173;
    --bs-link-hover-color: var(--zs-blue-press);
    --bs-link-hover-color-rgb: 30, 90, 148;
    --bs-focus-ring-color: var(--zs-blue-ring);

    --bs-primary: #2E7BC4;
    --bs-primary-rgb: 46, 123, 196;
    --bs-primary-bg-subtle: var(--zs-blue-tint);
    --bs-primary-border-subtle: #C6DAEE;
    --bs-primary-text-emphasis: var(--zs-blue-press);

    --bs-success: #5E705E;
    --bs-success-rgb: 94, 112, 94;
    --bs-success-bg-subtle: var(--zs-sage-tint);
    --bs-success-border-subtle: #CBD5C8;
    --bs-success-text-emphasis: var(--zs-sage-text);

    --bs-warning: #C97B5E;              /* هشدار دوستانه = تراکوتا */
    --bs-warning-rgb: 201, 123, 94;
    --bs-warning-bg-subtle: var(--zs-terracotta-tint);
    --bs-warning-border-subtle: #EBCBBE;
    --bs-warning-text-emphasis: var(--zs-terracotta-text);

    --bs-danger: #B4493B;
    --bs-danger-rgb: 180, 73, 59;
    --bs-danger-bg-subtle: var(--zs-danger-tint);
    --bs-danger-border-subtle: #EBC3BC;
    --bs-danger-text-emphasis: #8E3528;

    --bs-info: #5B7A8C;
    --bs-info-rgb: 91, 122, 140;
    --bs-info-bg-subtle: var(--zs-info-tint);
    --bs-info-border-subtle: #CCD8DF;
    --bs-info-text-emphasis: #3F5968;

    --bs-light: #F3EEE6;
    --bs-light-rgb: 243, 238, 230;
    --bs-secondary: #5A6675;
    --bs-secondary-rgb: 90, 102, 117;
    --bs-light-bg-subtle: var(--zs-surface-2);
    --bs-secondary-bg-subtle: var(--zs-surface-2);
    --bs-secondary-text-emphasis: var(--zs-text-2);
}

[data-bs-theme="dark"] {
    --bs-body-bg: var(--zs-bg);
    --bs-body-bg-rgb: 23, 24, 27;
    --bs-body-color: var(--zs-text);
    --bs-emphasis-color: var(--zs-ink);
    --bs-secondary-color: var(--zs-text-2);
    --bs-tertiary-bg: var(--zs-surface-2);
    --bs-border-color: var(--zs-border-warm);
    --bs-heading-color: var(--zs-ink);
    --bs-link-color: var(--zs-blue-text);
    --bs-link-color-rgb: 127, 178, 228;
    --bs-link-hover-color: #A3C8EC;
    --bs-primary: #4A91D6;
    --bs-primary-rgb: 74, 145, 214;
    --bs-primary-bg-subtle: var(--zs-blue-tint);
    --bs-primary-border-subtle: rgba(74, 145, 214, .35);
    --bs-primary-text-emphasis: var(--zs-blue-text);
    --bs-success-bg-subtle: var(--zs-sage-tint);
    --bs-success-border-subtle: rgba(122, 139, 122, .4);
    --bs-success-text-emphasis: var(--zs-sage-text);
    --bs-warning-bg-subtle: var(--zs-terracotta-tint);
    --bs-warning-border-subtle: rgba(201, 123, 94, .4);
    --bs-warning-text-emphasis: var(--zs-terracotta-text);
    --bs-danger-bg-subtle: var(--zs-danger-tint);
    --bs-danger-text-emphasis: var(--zs-danger);
    --bs-info-bg-subtle: var(--zs-info-tint);
    --bs-info-border-subtle: rgba(91, 122, 140, .4);
    --bs-info-text-emphasis: var(--zs-info);
    --bs-light-bg-subtle: var(--zs-surface-2);
}


/* ==========================================================================
   3. پایه
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; }

/* body بدون !important تا padding-bottom و display:flex صفحات فعلی سالم بماند.
   رنگ پس‌زمینه‌ی تاریک را theme-dark.css با !important می‌گذارد؛ پایین‌تر
   همان را با توکن گرم بازنویسی کرده‌ایم. */
body {
    font-family: var(--zs-font-ui);
    font-size: var(--zs-fs-body);
    line-height: var(--zs-lh);
    color: var(--zs-text);
    background: var(--zs-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
[data-bs-theme="dark"] body {
    background: var(--zs-bg) !important;
    color: var(--zs-text) !important;
}

/* تیترها: استعداد با وزن ۶۰۰–۷۰۰. line-height کوتاه‌تر از متن، چون تیتر
   چندخطی با ۱.۸ از هم می‌پاشد. letter-spacing منفی ملایم (فقط روی Estedad
   که اتصال حروفش با فاصله‌ی منفی کوچک نمی‌شکند؛ روی متن بدنه ممنوع). */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
.navbar-brand, .modal-title, .offcanvas-title, .zs-display {
    font-family: var(--zs-font-display);
    color: var(--zs-ink);
    line-height: var(--zs-lh-tight);
    letter-spacing: -0.012em;
}
h1, .h1 { font-size: var(--zs-fs-h1); font-weight: 700; }
h2, .h2 { font-size: var(--zs-fs-h2); font-weight: 700; }
h3, .h3 { font-size: var(--zs-fs-h3); font-weight: 700; }
h4, .h4 { font-size: var(--zs-fs-h4); font-weight: 650; }
h5, .h5 { font-size: var(--zs-fs-h5); font-weight: 600; }
h6, .h6 { font-size: var(--zs-fs-h6); font-weight: 600; }
/* fw-bold روی تیترها در کد فعلی زیاد است؛ ۷۰۰ استعداد کافی است، ۸۰۰ نه */
h1.fw-bold, h2.fw-bold, h3.fw-bold, h4.fw-bold, h5.fw-bold, h6.fw-bold { font-weight: 700 !important; }

p { line-height: var(--zs-lh); }
small, .small { line-height: 1.7; }
strong, b { font-weight: 600; }

/* ارقام جدول/آمار هم‌عرض تا اعداد زیر هم نلرزند */
.zs-num, table { font-variant-numeric: tabular-nums; }

a { text-underline-offset: .25em; text-decoration-thickness: 1px; }

::selection { background: rgba(46, 123, 196, .20); color: var(--zs-ink); }

/* حلقه‌ی فوکوس فقط برای کیبورد — کاربر لمسی حلقه‌ی مزاحم نمی‌بیند */
:focus-visible {
    outline: 2px solid var(--zs-blue);
    outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* اسکرول‌بار: نازک، گرم، در hover پررنگ‌تر (فقط دسکتاپ اهمیت دارد) */
* { scrollbar-width: thin; scrollbar-color: #D6CCBE transparent; }
[data-bs-theme="dark"] * { scrollbar-color: #45484E transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: #D6CCBE;
    border-radius: 99px;
    border: 2px solid var(--zs-bg);
}
::-webkit-scrollbar-thumb:hover { background: #BFB2A0; }
[data-bs-theme="dark"] ::-webkit-scrollbar-thumb { background: #45484E; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}


/* ==========================================================================
   4. سطوح
   ========================================================================== */

/* bg-white در کد فعلی روی تقریباً همه‌ی کارت‌ها هست؛ به‌جای عوض کردن ده‌ها
   فایل، معنایش را «سطح کارت» می‌کنیم (سفید خالص کنار کرم، لکه می‌شود). */
.bg-white { background-color: var(--zs-surface) !important; }
.bg-light { background-color: var(--zs-surface-2) !important; }
.bg-light-subtle { background-color: var(--zs-surface-2) !important; }
[data-bs-theme="dark"] .bg-white { background-color: var(--zs-surface) !important; }
[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .bg-light-subtle { background-color: var(--zs-surface-2) !important; }

.text-dark { color: var(--zs-text) !important; }
.text-muted, .text-secondary { color: var(--zs-text-2) !important; }
.text-primary { color: var(--zs-blue-text) !important; }
.text-success { color: var(--zs-sage-text) !important; }
.text-warning { color: var(--zs-terracotta) !important; }
.text-danger { color: var(--zs-danger) !important; }
.text-info { color: var(--zs-info) !important; }
[data-bs-theme="dark"] .text-dark { color: var(--zs-text) !important; }
[data-bs-theme="dark"] .text-muted { color: var(--zs-text-2) !important; }

/* — کارت —
   مرز ۱px به‌جای سایه: سایه‌ی تکراری روی ده کارت «نویز» می‌سازد و هیچ کارتی
   برجسته نمی‌شود. سایه فقط برای کارت‌های قابل‌کلیک، در hover (بازخورد لمسی). */
.card {
    --bs-card-bg: var(--zs-surface);
    --bs-card-border-color: var(--zs-border);
    --bs-card-border-radius: var(--zs-radius-lg);
    --bs-card-inner-border-radius: calc(var(--zs-radius-lg) - 1px);
    --bs-card-cap-bg: transparent;
    --bs-card-color: var(--zs-text);
    background-color: var(--zs-surface);
}
.card-custom,
.card-custom.border-0:not([class*="border-accent-"]),
.card.border-0:not([class*="border-accent-"]):not(.bg-transparent) {
    border: 1px solid var(--zs-border) !important;
}
/* کارت‌های دارای نوار اولویت: فقط سه ضلع دیگر را رنگ می‌کنیم تا نوار ۴px
   (از استایل dashboard.php) دست نخورد */
.card-custom[class*="border-accent-"] {
    border-block: 1px solid var(--zs-border) !important;
    border-inline-end: 1px solid var(--zs-border) !important;
}
.card-custom,
.card.shadow-sm,
.card-custom.shadow-sm {
    border-radius: var(--zs-radius-lg);
    box-shadow: none !important;
    transition: border-color .2s var(--zs-ease), box-shadow .2s var(--zs-ease), transform .2s var(--zs-ease);
}
[data-bs-theme="dark"] .card-custom,
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .item-card,
[data-bs-theme="dark"] .gift-card {
    background-color: var(--zs-surface) !important;
    color: var(--zs-text) !important;
    box-shadow: none !important;
}

/* رنگ‌های وضعیت روی مرز کارت (کد فعلی: border-primary روی فیلتر فعال و ...) */
.card-custom.border-primary        { border-color: var(--zs-blue) !important; box-shadow: 0 0 0 3px var(--zs-blue-ring) !important; }
.card-custom.border-success        { border-color: var(--zs-sage) !important; }
.card-custom.border-warning        { border-color: var(--zs-terracotta) !important; }
.card-custom.border-success-subtle { border-color: var(--bs-success-border-subtle) !important; }
.card-custom.border-outgrown       { border-color: #7FA9B3 !important; }

/* فقط کارت‌های تعاملی سایه‌ی hover می‌گیرند */
.stat-card-link:hover,
.item-card-col > .card:hover,
.gift-card:hover,
.smart-plan-task:hover,
.zs-card-link:hover {
    transform: translateY(-2px);
    box-shadow: var(--zs-shadow-hover) !important;
    border-color: rgba(46, 123, 196, .28) !important;
}
@media (hover: none) {
    .stat-card-link:hover, .item-card-col > .card:hover, .gift-card:hover,
    .smart-plan-task:hover, .zs-card-link:hover { transform: none; box-shadow: none !important; }
}

.card-header, .card-footer {
    background: transparent;
    border-color: var(--zs-border-warm);
}
[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .card-footer {
    background-color: transparent !important;
    border-color: var(--zs-border-warm) !important;
    color: var(--zs-text) !important;
}

/* جعبه‌های داخلی کارت (rounded-4 border) — مرز گرم و ملایم */
.border, .border-top, .border-bottom, .border-start, .border-end {
    border-color: var(--zs-border-warm) !important;
}
.border-primary { border-color: var(--zs-blue) !important; }
.border-success { border-color: var(--zs-sage) !important; }
.border-warning { border-color: var(--zs-terracotta) !important; }
.border-danger  { border-color: var(--zs-danger) !important; }
.border-info    { border-color: var(--zs-info) !important; }
.border-primary-subtle { border-color: var(--bs-primary-border-subtle) !important; }
.border-success-subtle { border-color: var(--bs-success-border-subtle) !important; }
.border-warning-subtle { border-color: var(--bs-warning-border-subtle) !important; }
.border-danger-subtle  { border-color: var(--bs-danger-border-subtle) !important; }
.border-info-subtle    { border-color: var(--bs-info-border-subtle) !important; }
[data-bs-theme="dark"] .border, [data-bs-theme="dark"] .border-top,
[data-bs-theme="dark"] .border-bottom, [data-bs-theme="dark"] .border-start,
[data-bs-theme="dark"] .border-end { border-color: var(--zs-border-warm) !important; }

.shadow-sm { box-shadow: 0 1px 2px rgba(15, 46, 74, .05) !important; }
.shadow    { box-shadow: var(--zs-shadow-hover) !important; }
.shadow-lg { box-shadow: var(--zs-shadow-pop) !important; }
.rounded-4 { border-radius: var(--zs-radius) !important; }
.rounded-3 { border-radius: var(--zs-radius-sm) !important; }

/* — مدال: سطح بالاتر → تنها جایی که سایه‌ی عمیق معنا دارد — */
.modal {
    --bs-modal-bg: var(--zs-surface);
    --bs-modal-border-radius: var(--zs-radius-lg);
    --bs-modal-border-color: var(--zs-border);
    --bs-modal-header-border-color: var(--zs-border-warm);
    --bs-modal-footer-border-color: var(--zs-border-warm);
}
.modal-content { box-shadow: var(--zs-shadow-pop); }
.modal-backdrop { --bs-backdrop-bg: #1B1611; --bs-backdrop-opacity: .45; }
[data-bs-theme="dark"] .modal-content { background-color: var(--zs-surface); color: var(--zs-text); }
/* مدال‌ها روی موبایل مثل bottom-sheet: دست به پایین صفحه نزدیک‌تر است */
@media (max-width: 575.98px) {
    .modal-dialog-centered { align-items: flex-end; min-height: 100%; margin: 0; }
    .modal-dialog-centered .modal-content {
        border-radius: var(--zs-radius-lg) var(--zs-radius-lg) 0 0 !important;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .modal.fade .modal-dialog-centered { transform: translateY(40px); }
    .modal.show .modal-dialog-centered { transform: none; }
}

.offcanvas { --bs-offcanvas-bg: var(--zs-surface); --bs-offcanvas-border-color: var(--zs-border-warm); }
.offcanvas-bottom { border-radius: var(--zs-radius-lg) var(--zs-radius-lg) 0 0; }

/* — دراپ‌داون — */
.dropdown-menu {
    --bs-dropdown-bg: var(--zs-surface);
    --bs-dropdown-border-color: var(--zs-border);
    --bs-dropdown-border-radius: var(--zs-radius);
    --bs-dropdown-link-color: var(--zs-text);
    --bs-dropdown-link-hover-bg: var(--zs-surface-2);
    --bs-dropdown-link-hover-color: var(--zs-ink);
    --bs-dropdown-link-active-bg: var(--zs-blue-tint);
    --bs-dropdown-link-active-color: var(--zs-blue-press);
    --bs-dropdown-divider-bg: var(--zs-border-warm);
    padding: .4rem;
    border: 1px solid var(--zs-border) !important;
}
.dropdown-item { border-radius: var(--zs-radius-sm); }
[data-bs-theme="dark"] .dropdown-menu { background-color: var(--zs-surface); border-color: var(--zs-border) !important; }
[data-bs-theme="dark"] .dropdown-item { color: var(--zs-text); }
[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus { background-color: var(--zs-surface-2); color: var(--zs-ink); }

/* — لیست — */
.list-group {
    --bs-list-group-bg: var(--zs-surface);
    --bs-list-group-border-color: var(--zs-border-warm);
    --bs-list-group-color: var(--zs-text);
    --bs-list-group-action-hover-bg: var(--zs-surface-2);
}
[data-bs-theme="dark"] .list-group-item {
    background-color: var(--zs-surface);
    color: var(--zs-text);
    border-color: var(--zs-border-warm);
}

/* — جدول: فقط خطوط افقی، هدر کم‌رنگ — */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--zs-text);
    --bs-table-border-color: var(--zs-border-warm);
    --bs-table-striped-bg: var(--zs-surface-2);
    --bs-table-hover-bg: var(--zs-surface-2);
}
.table > thead th {
    font-weight: 500;
    font-size: .8rem;
    color: var(--zs-text-2);
    border-bottom-width: 1px;
}

/* — Toast — (showToast رنگ را با bg-{type} و متن سفید می‌دهد؛
   تراکوتای روشن با متن سفید AA نمی‌شود → نسخه‌ی تیره) */
.toast { --bs-toast-border-radius: var(--zs-radius); font-family: var(--zs-font-ui); }
.toast.bg-warning { background-color: var(--zs-terracotta-strong) !important; }
.toast.bg-info    { background-color: #3F5968 !important; }


/* ==========================================================================
   5. دکمه‌ها
   سه نقش: پر آبی (اکشن اصلی — یکی در هر نما)، خطی آبی (اکشن دوم)،
   تراکوتا (اکشن جانبی/دوستانه). بقیه خنثی.
   ========================================================================== */
.btn {
    --bs-btn-font-family: var(--zs-font-ui);
    --bs-btn-font-weight: 500;
    --bs-btn-border-radius: var(--zs-radius-sm);
    --bs-btn-padding-y: .55rem;
    --bs-btn-padding-x: 1.1rem;
    --bs-btn-focus-box-shadow: 0 0 0 .2rem var(--zs-blue-ring);
    line-height: 1.6;
    transition: background-color .18s var(--zs-ease), border-color .18s var(--zs-ease),
                color .18s var(--zs-ease), transform .12s var(--zs-ease);
}
.btn:active { transform: scale(.98); }
.btn.fw-bold { font-weight: 600 !important; }  /* ۷۰۰ وزیرمتن روی دکمه زمخت است */
.btn-sm { --bs-btn-padding-y: .32rem; --bs-btn-padding-x: .8rem; --bs-btn-font-size: .84rem; }
.btn-lg { --bs-btn-padding-y: .8rem; --bs-btn-padding-x: 1.5rem; --bs-btn-font-size: 1.05rem; --bs-btn-border-radius: var(--zs-radius); }
/* هدف لمسی حداقل ۴۴px در موبایل (WCAG 2.5.5) */
@media (pointer: coarse) {
    .btn:not(.btn-sm):not(.btn-link):not(.badge) { min-height: 44px; }
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--zs-blue);
    --bs-btn-border-color: var(--zs-blue);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--zs-blue-hover);
    --bs-btn-hover-border-color: var(--zs-blue-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--zs-blue-press);
    --bs-btn-active-border-color: var(--zs-blue-press);
    --bs-btn-disabled-bg: var(--zs-blue);
    --bs-btn-disabled-border-color: var(--zs-blue);
    font-weight: 600;
}
/* shadow-sm روی دکمه‌ی اصلی کد فعلی: سایه‌ی رنگی نرم به‌جای خاکستری */
.btn-primary.shadow-sm { box-shadow: 0 6px 16px -8px rgba(46, 123, 196, .55) !important; }

.btn-outline-primary {
    --bs-btn-color: var(--zs-blue-text);
    --bs-btn-border-color: rgba(46, 123, 196, .45);
    --bs-btn-hover-color: var(--zs-blue-press);
    --bs-btn-hover-bg: var(--zs-blue-tint);
    --bs-btn-hover-border-color: var(--zs-blue);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--zs-blue);
    --bs-btn-active-border-color: var(--zs-blue);
    background-color: transparent;
}
/* چرا hover پر نمی‌شود؟ در لیست ۲۴ کارتی، هر حرکت موس یک بلوک آبی
   روشن می‌کرد؛ پس‌زمینه‌ی ملایم همان بازخورد را بدون فریاد می‌دهد. */

.btn-accent,
.btn-warning {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--zs-terracotta-strong);
    --bs-btn-border-color: var(--zs-terracotta-strong);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #95503A;
    --bs-btn-hover-border-color: #95503A;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #844632;
    --bs-btn-active-border-color: #844632;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--zs-terracotta);
    --bs-btn-disabled-border-color: var(--zs-terracotta);
}
.btn-accent-soft,
.btn-outline-warning {
    --bs-btn-color: var(--zs-terracotta-text);
    --bs-btn-bg: var(--zs-terracotta-tint);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--zs-terracotta-strong);
    --bs-btn-hover-border-color: var(--zs-terracotta-strong);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #844632;
    --bs-btn-active-border-color: #844632;
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--zs-sage-strong);
    --bs-btn-border-color: var(--zs-sage-strong);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #526352;
    --bs-btn-hover-border-color: #526352;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #465546;
    --bs-btn-active-border-color: #465546;
}
.btn-outline-success {
    --bs-btn-color: var(--zs-sage-text);
    --bs-btn-border-color: var(--bs-success-border-subtle);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--zs-sage-strong);
    --bs-btn-hover-border-color: var(--zs-sage-strong);
}

.btn-danger {
    --bs-btn-bg: var(--zs-danger);
    --bs-btn-border-color: var(--zs-danger);
    --bs-btn-hover-bg: #9C3C30;
    --bs-btn-hover-border-color: #9C3C30;
    --bs-btn-active-bg: #863326;
}
.btn-outline-danger {
    --bs-btn-color: var(--zs-danger);
    --bs-btn-border-color: var(--bs-danger-border-subtle);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--zs-danger);
    --bs-btn-hover-border-color: var(--zs-danger);
}

/* خنثی‌ها: برای «انصراف»، toggle خرید، کنترل تعداد */
.btn-light,
.btn-ghost {
    --bs-btn-color: var(--zs-text);
    --bs-btn-bg: var(--zs-surface-2);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--zs-ink);
    --bs-btn-hover-bg: var(--zs-surface-3);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: var(--zs-surface-3);
    --bs-btn-active-border-color: transparent;
}
.btn-outline-secondary {
    --bs-btn-color: var(--zs-text-2);
    --bs-btn-border-color: var(--zs-border-warm);
    --bs-btn-hover-color: var(--zs-ink);
    --bs-btn-hover-bg: var(--zs-surface-2);
    --bs-btn-hover-border-color: #D6CCBE;
    --bs-btn-active-color: var(--zs-ink);
    --bs-btn-active-bg: var(--zs-surface-3);
    --bs-btn-active-border-color: #D6CCBE;
}
.btn-link {
    --bs-btn-color: var(--zs-blue-text);
    --bs-btn-hover-color: var(--zs-blue-press);
    font-weight: 500;
    text-decoration: none;
}
[data-bs-theme="dark"] .btn-light {
    --bs-btn-color: var(--zs-text);
    --bs-btn-bg: var(--zs-surface-2);
    --bs-btn-hover-bg: var(--zs-surface-3);
}

/* دکمه‌ی ساک بیمارستان (header.php): گرادیان حذف — رنگ تخت برند */
.btn-hospital-mode {
    background: var(--zs-blue);
    color: #fff;
    border: none;
    font-weight: 600;
}
.btn-hospital-mode:hover { background: var(--zs-blue-hover); color: #fff; filter: none; }

/* دکمه‌ی شناور افزودن (dashboard.php) — تخت، سایه‌ی رنگی نرم */
.fab-add-item {
    background: var(--zs-blue) !important;
    box-shadow: 0 10px 24px -8px rgba(46, 123, 196, .6) !important;
    border-radius: 18px !important;   /* squircle: از دایره‌ی پیش‌فرض متمایز و راحت‌تر برای شست */
}
.fab-add-item:hover { background: var(--zs-blue-hover) !important; }


/* ==========================================================================
   6. فرم‌ها
   ========================================================================== */
.form-control,
.form-select {
    --bs-border-color: var(--zs-border-warm);
    background-color: #FFFDF9;
    border-color: var(--zs-border-warm);
    border-radius: var(--zs-radius-sm);
    color: var(--zs-text);
    padding: .6rem .9rem;
    line-height: 1.6;
    transition: border-color .18s var(--zs-ease), box-shadow .18s var(--zs-ease), background-color .18s;
}
.form-control-sm, .form-select-sm { padding: .35rem .7rem; }
.form-control:hover:not(:focus):not(:disabled),
.form-select:hover:not(:focus):not(:disabled) { border-color: #D6CCBE; }
.form-control:focus,
.form-select:focus {
    background-color: #fff;
    border-color: var(--zs-blue);
    box-shadow: 0 0 0 4px var(--zs-blue-ring);
    color: var(--zs-text);
}
.form-control::placeholder { color: var(--zs-text-3); opacity: 1; }
.form-control:disabled, .form-control[readonly] { background-color: var(--zs-surface-2); }
.form-label { font-weight: 500; color: var(--zs-text); margin-bottom: .4rem; }
.form-label.fw-bold { font-weight: 600 !important; }
.form-text { color: var(--zs-text-2); }

/* input-group: پیشوند آیکونی هم‌رنگ فیلد، نه خاکستری سرد bg-light */
.input-group-text {
    background-color: var(--zs-surface-2) !important;
    border-color: var(--zs-border-warm);
    color: var(--zs-text-2);
}
.input-group:focus-within .input-group-text { color: var(--zs-blue); border-color: var(--zs-blue); }
.input-group:focus-within .form-control:focus { box-shadow: none; }
.input-group:focus-within {
    border-radius: var(--zs-radius-sm);
    box-shadow: 0 0 0 4px var(--zs-blue-ring);
}

.form-check-input {
    border-color: #CFC4B4;
    background-color: #FFFDF9;
}
.form-check-input:checked { background-color: var(--zs-blue); border-color: var(--zs-blue); }
.form-check-input:focus { border-color: var(--zs-blue); box-shadow: 0 0 0 4px var(--zs-blue-ring); }
.form-switch .form-check-input { width: 2.4em; }

.form-range::-webkit-slider-thumb { background: var(--zs-blue); }
.form-range::-moz-range-thumb { background: var(--zs-blue); }

.was-validated .form-control:invalid, .form-control.is-invalid { border-color: var(--zs-danger); }
.invalid-feedback { color: var(--zs-danger); }

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: var(--zs-surface-2);
    border-color: var(--zs-border-warm);
    color: var(--zs-text);
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: var(--zs-surface-2);
    border-color: var(--zs-blue);
    color: var(--zs-text);
}
[data-bs-theme="dark"] .form-check-input { background-color: var(--zs-surface-2); border-color: #55585E; }
[data-bs-theme="dark"] .form-check-input:checked { background-color: var(--zs-blue); border-color: var(--zs-blue); }


/* ==========================================================================
   7. نشان‌ها، هشدارها، پیشرفت، ناوبری
   ========================================================================== */
.badge {
    font-family: var(--zs-font-ui);
    font-weight: 500;
    letter-spacing: 0;
    padding: .38em .75em;
    line-height: 1.3;
}
.badge.bg-primary { background-color: var(--zs-blue) !important; }
.badge.bg-light { background-color: var(--zs-surface-2) !important; color: var(--zs-text-2) !important; }
.badge-priority-must_have    { background-color: var(--zs-terracotta-tint) !important; color: var(--zs-terracotta-text) !important; }
.badge-priority-nice_to_have { background-color: var(--zs-saffron-tint) !important; color: var(--zs-saffron-text) !important; }
.badge-priority-luxury       { background-color: var(--zs-blue-tint) !important; color: var(--zs-blue-press) !important; }
[data-bs-theme="dark"] .badge-priority-luxury { color: var(--zs-blue-text) !important; }
/* چرا نشان‌های اولویت کم‌رنگ شدند؟ در کارت‌ها نشان «ضروری» پررنگ‌تر از
   دکمه‌ی خرید دیده می‌شد؛ حالا نوار کناری رنگ را حمل می‌کند و نشان فقط برچسب است. */
.badge-outgrown { background-color: #E3EEF0 !important; color: #3E6A74 !important; }
[data-bs-theme="dark"] .badge-outgrown { background-color: rgba(127, 169, 179, .18) !important; color: #A9CBD3 !important; }

.alert {
    --bs-alert-border-radius: var(--zs-radius);
    --bs-alert-padding-y: .9rem;
    --bs-alert-padding-x: 1.1rem;
    line-height: 1.75;
}
.alert-primary { --bs-alert-bg: var(--zs-blue-tint); --bs-alert-color: var(--zs-ink); --bs-alert-border-color: transparent; }
.alert-info    { --bs-alert-bg: var(--zs-info-tint); --bs-alert-color: #33505F; --bs-alert-border-color: transparent; }
.alert-warning { --bs-alert-bg: var(--zs-terracotta-tint); --bs-alert-color: #6E3A26; --bs-alert-border-color: transparent; }
.alert-success { --bs-alert-bg: var(--zs-sage-tint); --bs-alert-color: #3C4A3C; --bs-alert-border-color: transparent; }
.alert-danger  { --bs-alert-bg: var(--zs-danger-tint); --bs-alert-color: #7A2D22; --bs-alert-border-color: transparent; }
.alert-light   { --bs-alert-bg: var(--zs-surface-2); --bs-alert-color: var(--zs-text); --bs-alert-border-color: var(--zs-border-warm); }
/* کلاس غیراستاندارد کد فعلی (dashboard: alert-primary-subtle) */
.alert-primary-subtle { background: var(--zs-blue-tint); color: var(--zs-ink); }
[data-bs-theme="dark"] .alert-primary,
[data-bs-theme="dark"] .alert-info,
[data-bs-theme="dark"] .alert-warning,
[data-bs-theme="dark"] .alert-success,
[data-bs-theme="dark"] .alert-danger { --bs-alert-color: var(--zs-text); }
[data-bs-theme="dark"] .alert-light { background-color: var(--zs-surface-2); color: var(--zs-text); border-color: var(--zs-border-warm); }

.progress, .progress-stacked {
    --bs-progress-bg: var(--zs-surface-3);
    --bs-progress-bar-bg: var(--zs-blue);
    --bs-progress-border-radius: 99px;
    --bs-progress-height: .6rem;
    overflow: hidden;
}
.progress-bar { border-radius: 99px; transition: width .6s var(--zs-ease); }
.progress-bar.bg-success { background-color: var(--zs-sage) !important; }
.progress-bar.bg-info    { background-color: var(--zs-info) !important; }
.progress-bar.bg-danger  { background-color: var(--zs-terracotta-strong) !important; }

.bg-primary { background-color: var(--zs-blue) !important; }
.bg-success { background-color: var(--zs-sage-strong) !important; }
.bg-warning { background-color: var(--zs-terracotta) !important; }
.bg-danger  { background-color: var(--zs-danger) !important; }
.bg-info    { background-color: var(--zs-info) !important; }
.bg-primary-subtle { background-color: var(--zs-blue-tint) !important; }
.bg-success-subtle { background-color: var(--zs-sage-tint) !important; }
.bg-warning-subtle { background-color: var(--zs-terracotta-tint) !important; }
.bg-danger-subtle  { background-color: var(--zs-danger-tint) !important; }
.bg-info-subtle    { background-color: var(--zs-info-tint) !important; }
.text-primary-emphasis { color: var(--bs-primary-text-emphasis) !important; }
.text-success-emphasis { color: var(--zs-sage-text) !important; }
.text-warning-emphasis { color: var(--zs-terracotta-text) !important; }
.text-info-emphasis    { color: var(--bs-info-text-emphasis) !important; }

/* — Nav pills (فیلترهای صفحه هدایا) — segmented control به‌جای بلوک آبی — */
.nav-pills {
    --bs-nav-pills-border-radius: 99px;
    --bs-nav-pills-link-active-bg: var(--zs-surface);
    --bs-nav-pills-link-active-color: var(--zs-ink);
    --bs-nav-link-color: var(--zs-text-2);
    --bs-nav-link-hover-color: var(--zs-ink);
    --bs-nav-link-font-weight: 500;
    background: var(--zs-surface-2);
    padding: .25rem;
    border-radius: 99px;
    gap: .15rem;
}
.nav-pills .nav-link { padding: .4rem 1rem; font-size: .9rem; }
.nav-pills .nav-link.active { box-shadow: 0 1px 3px rgba(15, 46, 74, .12); font-weight: 600; }

.pagination {
    --bs-pagination-color: var(--zs-text-2);
    --bs-pagination-bg: transparent;
    --bs-pagination-border-color: transparent;
    --bs-pagination-hover-bg: var(--zs-surface-2);
    --bs-pagination-hover-color: var(--zs-ink);
    --bs-pagination-hover-border-color: transparent;
    --bs-pagination-active-bg: var(--zs-blue);
    --bs-pagination-active-border-color: var(--zs-blue);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem var(--zs-blue-ring);
    gap: .25rem;
}
.pagination .page-link { border-radius: var(--zs-radius-sm) !important; min-width: 2.4rem; text-align: center; }

/* — Navbar (navbar.php): نیمه‌شفاف روی کرم، بدون سایه — */
.navbar.bg-white {
    background-color: rgba(248, 245, 240, .86) !important;
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    backdrop-filter: saturate(1.4) blur(12px);
    box-shadow: none !important;
    border-bottom: 1px solid var(--zs-border-warm) !important;
}
[data-bs-theme="dark"] .navbar.bg-white { background-color: rgba(23, 24, 27, .86) !important; }
.navbar-brand { font-weight: 700; color: var(--zs-ink) !important; letter-spacing: -.02em; }
.navbar-brand .bg-primary { background-color: var(--zs-blue) !important; box-shadow: none !important; border-radius: 11px !important; }
.navbar .nav-link { font-weight: 500 !important; }
.navbar .nav-link.nav-current {
    background: var(--zs-blue-tint) !important;
    color: var(--zs-blue-press) !important;
}
.navbar .nav-link:not(.nav-current):hover { background: var(--zs-surface-2) !important; color: var(--zs-ink) !important; }
[data-bs-theme="dark"] .navbar .nav-link.nav-current { color: var(--zs-blue-text) !important; }
[data-bs-theme="dark"] .navbar .nav-link:not(.nav-current):hover { background: var(--zs-surface-2) !important; }
.sync-chip.synced { background: var(--zs-sage-tint) !important; color: var(--zs-sage-text) !important; }
.sync-chip.pending { color: var(--zs-blue-text) !important; border-color: rgba(46, 123, 196, .45) !important; }
.sync-chip.pending:hover { background: var(--zs-blue-tint) !important; color: var(--zs-blue-press) !important; }

/* — نوار پایین موبایل (bottom_nav.php) — آیتم فعال با «قرص» پشت آیکون،
   نه فقط تغییر رنگ؛ برای کاربر کم‌بینا/رنگ‌بین قابل تشخیص‌تر است */
.bottom-nav {
    background: rgba(253, 251, 247, .94) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--zs-border-warm) !important;
    box-shadow: none !important;
}
[data-bs-theme="dark"] .bottom-nav { background: rgba(31, 33, 36, .94) !important; }
.bn-item { color: var(--zs-text-3) !important; font-weight: 500 !important; gap: 3px !important; }
.bn-item i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 1.9rem;
    border-radius: 99px;
    transition: background-color .2s var(--zs-ease);
}
.bn-item.active { color: var(--zs-blue-press) !important; font-weight: 600 !important; }
.bn-item.active i { background: var(--zs-blue-tint); color: var(--zs-blue); }
[data-bs-theme="dark"] .bn-item.active { color: var(--zs-blue-text) !important; }

/* — Footer (footer.php) — */
footer.bg-white { background: transparent !important; border-color: var(--zs-border-warm) !important; }


/* ==========================================================================
   8. آیکون‌ها — Bootstrap Icons، یکپارچه
   مشکل قبلی: هر کارت یک رنگ Bootstrap (primary/success/info/warning) روی
   دایره‌ی رنگی داشت → رنگین‌کمان بی‌معنا. حالا ظرف آیکون یک شکل دارد
   (squircle ۱۲px) و رنگ فقط معنای وضعیت را حمل می‌کند.
   ========================================================================== */
.bi { line-height: 1; vertical-align: -.125em; }
.btn .bi, .badge .bi, .nav-link .bi, .dropdown-item .bi { vertical-align: -.1em; }

/* ظرف‌های آیکون موجود در dashboard (rounded-circle + bg-*-subtle + 40/42/48px) */
.card-custom .rounded-circle[class*="-subtle"],
.card-custom .rounded-4[class*="-subtle"][style*="48px"] {
    border-radius: 12px !important;
}

/* ظرف آیکون استاندارد جدید */
.zs-icon {
    --zs-icon-size: 2.5rem;
    width: var(--zs-icon-size);
    height: var(--zs-icon-size);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--zs-surface-2);
    color: var(--zs-text-2);
    font-size: calc(var(--zs-icon-size) * .45);
}
.zs-icon--sm { --zs-icon-size: 2rem; border-radius: 10px; }
.zs-icon--lg { --zs-icon-size: 3.25rem; border-radius: 16px; }
.zs-icon--blue  { background: var(--zs-blue-tint); color: var(--zs-blue); }
.zs-icon--terra { background: var(--zs-terracotta-tint); color: var(--zs-terracotta-text); }
.zs-icon--sage  { background: var(--zs-sage-tint); color: var(--zs-sage-text); }
.zs-icon--saffron { background: var(--zs-saffron-tint); color: var(--zs-saffron-text); }
.zs-icon--solid { background: var(--zs-blue); color: #fff; }


/* ==========================================================================
   9. الگوهای جدید (با کلاس‌های zs-*)
   ========================================================================== */

/* — ظرف صفحه — */
.zs-page { padding-block: clamp(1rem, .6rem + 2vw, 2rem); }

/* — عنوان بالای بخش: متن کوچک رنگی + تیتر — */
.zs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--zs-terracotta-text);
    margin-bottom: .35rem;
}
.zs-eyebrow::before {
    content: "";
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--zs-terracotta);
}
.zs-section-title {
    font-family: var(--zs-font-display);
    font-size: var(--zs-fs-h4);
    font-weight: 700;
    color: var(--zs-ink);
    margin: 0;
}
.zs-lead { color: var(--zs-text-2); font-size: clamp(.95rem, .9rem + .3vw, 1.08rem); line-height: 1.9; }

/* — زیامو (ماسکوت): ارتفاع در خود تگ، عرض از نسبت تصویر — */
.zs-ziamo { display: block; width: auto; max-width: 100%; height: auto; margin-inline: auto; }
.zs-ziamo--side { margin: 0; flex-shrink: 0; }

/* — هدر صفحه‌های داخلی (جایگزین header-section گرادیانی) —
   روی کرم می‌نشیند، تیتر تیره؛ آبی فقط در لینک بازگشت. گرادیان تمام‌عرض
   آبی کل توجه را می‌گرفت و محتوای اصلی (لیست) را پایین هل می‌داد. */
.zs-page-head {
    padding: clamp(1.25rem, 1rem + 2vw, 2.5rem) 0 clamp(1rem, .8rem + 1vw, 1.5rem);
}
.zs-page-head .zs-back {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .88rem;
    font-weight: 500;
    color: var(--zs-blue-text);
    text-decoration: none;
    margin-bottom: .75rem;
    padding: .3rem .75rem .3rem .5rem;
    margin-inline-start: -.5rem;
    border-radius: 99px;
}
.zs-page-head .zs-back:hover { background: var(--zs-blue-tint); }
.zs-page-head h1 { margin-bottom: .35rem; }
.zs-page-head p { color: var(--zs-text-2); margin: 0; max-width: 38rem; }

/* — سطح ساده (جایگزین کارت برای جعبه‌های داخلی) — */
.zs-surface {
    background: var(--zs-surface);
    border: 1px solid var(--zs-border);
    border-radius: var(--zs-radius-lg);
}
.zs-inset {
    background: var(--zs-surface-2);
    border-radius: var(--zs-radius);
}

/* — آمار درون‌خطی (جایگزین ۴ کارت آماری جدا) —
   یک نوار با جداکننده به‌جای چهار جعبه‌ی هم‌شکل: چشم عددها را پشت سر هم
   می‌خواند و ۳ مرز/سایه‌ی اضافه حذف می‌شود. */
.zs-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
}
@media (min-width: 768px) { .zs-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.zs-stat {
    display: block;
    padding: .9rem 1rem;
    text-decoration: none;
    color: inherit;
    border-radius: var(--zs-radius);
    transition: background-color .18s var(--zs-ease);
}
a.zs-stat:hover { background: var(--zs-surface-2); color: inherit; }
.zs-stat.is-active { background: var(--zs-blue-tint); }
.zs-stat__label { display: flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--zs-text-2); }
.zs-stat__value {
    font-family: var(--zs-font-display);
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
    font-weight: 700;
    color: var(--zs-ink);
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}
.zs-stat__value small { font-family: var(--zs-font-ui); font-size: .78rem; font-weight: 400; color: var(--zs-text-2); }
.zs-dot { width: .5rem; height: .5rem; border-radius: 50%; display: inline-block; background: var(--zs-text-3); }
.zs-dot--blue { background: var(--zs-blue); }
.zs-dot--sage { background: var(--zs-sage); }
.zs-dot--terra { background: var(--zs-terracotta); }
.zs-dot--ink { background: var(--zs-ink); }

/* — بخش «امروز چه کاری انجام دهم؟» — تنها بلوک با پس‌زمینه‌ی تیره در صفحه:
   تضاد بالا = اولین جایی که چشم می‌نشیند. رنگ جوهری (ink) به‌جای آبی برند،
   تا دکمه‌ی آبی داخلش هنوز «اکشن» خوانده شود. */
.zs-today {
    position: relative;
    overflow: hidden;
    background: var(--zs-ink);
    color: #E9EFF5;
    border-radius: var(--zs-radius-xl);
    padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
    isolation: isolate;
}
.zs-today::after {           /* هاله‌ی گرم ملایم، نه گرادیان رنگی */
    content: "";
    position: absolute;
    inset-inline-start: -20%;
    top: -60%;
    width: 60%;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(201, 123, 94, .28), transparent 65%);
    z-index: -1;
    pointer-events: none;
}
.zs-today h2, .zs-today h3 { color: #fff; }
.zs-today .zs-eyebrow { color: #F0C2AF; }
.zs-today .zs-eyebrow::before { background: #F0C2AF; }
.zs-today .zs-muted { color: rgba(233, 239, 245, .72); }
.zs-today .btn-primary { --bs-btn-bg: #fff; --bs-btn-color: #0F2E4A; --bs-btn-border-color: #fff;
    --bs-btn-hover-bg: #E8F0F8; --bs-btn-hover-color: #0F2E4A; --bs-btn-hover-border-color: #E8F0F8;
    --bs-btn-active-bg: #D5E4F3; --bs-btn-active-color: #0F2E4A; }
[data-bs-theme="dark"] .zs-today { background: #1E3550; }
/* محتوای PHP موجود داخل بخش تیره (renderNoDatePrompt و ...) */
.zs-today .text-muted, .zs-today .small.text-muted { color: rgba(233, 239, 245, .72) !important; }
.zs-today .text-dark, .zs-today strong { color: #fff !important; }
.zs-today .btn-outline-primary { --bs-btn-color: #fff; --bs-btn-border-color: rgba(255,255,255,.35); --bs-btn-hover-bg: rgba(255,255,255,.12); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #fff; }

.zs-task {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    padding: .9rem 1rem;
    border-radius: var(--zs-radius);
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .08);
    color: inherit;
    text-decoration: none;
    transition: background-color .18s var(--zs-ease);
}
.zs-task:hover { background: rgba(255, 255, 255, .12); color: inherit; }
.zs-task__num {
    flex-shrink: 0;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--zs-font-display);
    font-weight: 700;
    font-size: .9rem;
    background: rgba(255, 255, 255, .12);
    color: #fff;
}
.zs-task.is-first .zs-task__num { background: var(--zs-blue); }
.zs-task__title { font-weight: 600; color: #fff; display: block; line-height: 1.6; }
.zs-task__why { font-size: .82rem; color: rgba(233, 239, 245, .7); line-height: 1.7; }
.zs-tag {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .72rem;
    font-weight: 500;
    padding: .1rem .5rem;
    border-radius: 99px;
    background: rgba(240, 194, 175, .16);
    color: #F0C2AF;
    white-space: nowrap;
}
.zs-tag--danger { background: rgba(224, 122, 107, .2); color: #F3B0A5; }

/* — حلقه‌ی پیشرفت (آمادگی) — */
.zs-ring {
    --value: 0;
    --size: 5.5rem;
    --track: var(--zs-surface-3);
    --fill: var(--zs-blue);
    width: var(--size);
    height: var(--size);
    flex-shrink: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(closest-side, var(--zs-surface) 76%, transparent 77% 100%),
        conic-gradient(var(--fill) calc(var(--value) * 1%), var(--track) 0);
}
.zs-ring__label {
    font-family: var(--zs-font-display);
    font-weight: 700;
    font-size: calc(var(--size) * .24);
    color: var(--zs-ink);
    font-variant-numeric: tabular-nums;
}

/* — دونات بودجه (سه رنگ: خرج‌شده آبی، باقی سبز، اضافه‌خرج تراکوتا) — */
.zs-donut {
    --size: 9.5rem;
    width: var(--size);
    height: var(--size);
    flex-shrink: 0;
    border-radius: 50%;
    position: relative;
    display: grid;
    place-items: center;
    /* --donut را JS (یا نمونه‌ی ایستا) با conic-gradient پر می‌کند */
    background:
        radial-gradient(closest-side, var(--zs-surface) 70%, transparent 71% 100%),
        var(--donut, conic-gradient(var(--zs-surface-3) 0 100%));
}
.zs-donut__center { text-align: center; line-height: 1.3; }
.zs-donut__value {
    display: block;
    font-family: var(--zs-font-display);
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--zs-ink);
    font-variant-numeric: tabular-nums;
}
.zs-donut__caption { font-size: .72rem; color: var(--zs-text-2); }
.zs-legend { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.zs-legend li { display: flex; align-items: center; gap: .5rem; font-size: .86rem; }
.zs-legend .zs-legend__val { margin-inline-start: auto; font-weight: 600; color: var(--zs-ink); font-variant-numeric: tabular-nums; }
.zs-swatch { width: .7rem; height: .7rem; border-radius: 4px; flex-shrink: 0; }

/* نوار هر دسته */
.zs-bar-row { padding-block: .55rem; border-top: 1px solid var(--zs-border-warm); }
.zs-bar-row:first-child { border-top: 0; }
.zs-bar-row .progress { --bs-progress-height: .4rem; }
.zs-bar-row.is-over .progress-bar { background-color: var(--zs-terracotta-strong) !important; }
.zs-bar-row.is-over .zs-bar-amount { color: var(--zs-terracotta-text); font-weight: 600; }
.zs-bar-amount { font-size: .8rem; color: var(--zs-text-2); font-variant-numeric: tabular-nums; }

/* — آیتم چک‌لیست بزرگ (ساک بیمارستان) — هدف لمسی ۵۲px، مناسب روز زایمان
   که دست‌ها مشغول و ذهن خسته است */
.zs-check {
    display: flex;
    align-items: center;
    gap: .9rem;
    min-height: 52px;
    padding: .7rem 1.1rem;
    cursor: pointer;
    border-top: 1px solid var(--zs-border-warm);
    transition: background-color .15s var(--zs-ease);
}
.zs-check:first-child { border-top: 0; }
.zs-check:hover { background: var(--zs-surface-2); }
.zs-check .form-check-input { width: 1.45em; height: 1.45em; margin: 0; flex-shrink: 0; border-radius: 8px; }
.zs-check .form-check-input:checked { background-color: var(--zs-sage-strong); border-color: var(--zs-sage-strong); }
.zs-check label { cursor: pointer; flex-grow: 1; line-height: 1.7; }
.completed-item { text-decoration: line-through; text-decoration-color: rgba(90, 102, 117, .5); color: var(--zs-text-3) !important; }

/* — بخش‌بندی گروه (عنوان + شمارنده) — */
.zs-group-head {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 1rem 1.1rem .8rem;
}
.zs-group-head h2, .zs-group-head h3 { font-size: 1.02rem; margin: 0; }
.zs-count {
    margin-inline-start: auto;
    font-size: .78rem;
    color: var(--zs-text-2);
    background: var(--zs-surface-2);
    padding: .15rem .6rem;
    border-radius: 99px;
    font-variant-numeric: tabular-nums;
}

/* — نوار چسبان پیشرفت پایین صفحه (ساک بیمارستان) — */
.zs-sticky-progress {
    position: sticky;
    top: .75rem;
    z-index: 10;
}

/* — کارت هدیه — */
.zs-gift { display: flex; flex-direction: column; height: 100%; padding: 1.1rem; }
.zs-gift__media {
    display: flex;
    gap: .4rem;
    margin: -.2rem 0 .8rem;
    overflow-x: auto;
}
.zs-gift__media img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.zs-gift__meta { font-size: .82rem; color: var(--zs-text-2); line-height: 1.8; }
.zs-gift__foot {
    margin-top: auto;
    padding-top: .8rem;
    border-top: 1px dashed var(--zs-border-warm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.is-reserved {
    background-color: var(--zs-surface-2) !important;
    border-style: dashed !important;
    opacity: 1 !important;           /* opacity کل کارت کنتراست متن را زیر AA می‌برد */
}
.is-reserved h6, .is-reserved .zs-gift__title { color: var(--zs-text-2) !important; }

/* — Share box — */
.share-box {
    background: var(--zs-surface) !important;
    border: 1px solid var(--zs-border);
    border-radius: var(--zs-radius-lg) !important;
    box-shadow: none !important;
}
[data-bs-theme="dark"] .share-box { background: var(--zs-surface) !important; }

/* — اسکلتون (gift_registry.php) — */
.skeleton { background: linear-gradient(90deg, var(--zs-surface-2) 25%, var(--zs-surface-3) 37%, var(--zs-surface-2) 63%) !important; background-size: 400% 100% !important; }
.skeleton-card { background: var(--zs-surface) !important; border: 1px solid var(--zs-border) !important; box-shadow: none !important; }

/* — لندینگ — */
.zs-hero { padding-block: clamp(2rem, 1rem + 5vw, 5rem) clamp(1.5rem, 1rem + 3vw, 3.5rem); }
.zs-hero__title {
    font-family: var(--zs-font-display);
    font-size: var(--zs-fs-display);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.025em;
    color: var(--zs-ink);
    margin-bottom: 1rem;
}
.zs-hero__title em {
    font-style: normal;
    color: var(--zs-blue);
    position: relative;
    white-space: nowrap;
}
.zs-hero__title em::after {      /* خط زیر دست‌کشیده با رنگ تراکوتا */
    content: "";
    position: absolute;
    inset-inline: -.1em;
    bottom: .02em;
    height: .22em;
    background: var(--zs-terracotta);
    opacity: .28;
    border-radius: 99px;
    z-index: -1;
}
.zs-brandmark {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--zs-font-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--zs-ink);
    text-decoration: none;
}
.zs-brandmark img { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; }

/* شبکه‌ی نامتقارن ویژگی‌ها: یک کارت بزرگ (ویژگی اصلی) + دو کارت کوچک.
   اندازه‌ی نابرابر ترتیب اهمیت را بدون کلمه می‌گوید. */
.zs-bento {
    display: grid;
    gap: .9rem;
    grid-template-columns: 1fr;
}
@media (min-width: 768px) {
    .zs-bento {
        grid-template-columns: 1.35fr 1fr;
        grid-template-rows: auto auto;
    }
    .zs-bento > :first-child { grid-row: span 2; }
}
.zs-feature {
    position: relative;
    overflow: hidden;
    padding: clamp(1.2rem, 1rem + 1vw, 1.8rem);
    border-radius: var(--zs-radius-xl);
    background: var(--zs-surface);
    border: 1px solid var(--zs-border);
}
.zs-feature h3 { font-size: var(--zs-fs-h4); margin: .9rem 0 .35rem; }
.zs-feature p { color: var(--zs-text-2); margin: 0; font-size: .92rem; }
.zs-feature--hero { background: var(--zs-blue-tint); border-color: transparent; }
.zs-feature--terra { background: var(--zs-terracotta-tint); border-color: transparent; }
.zs-feature__visual {
    margin-top: 1.25rem;
    background: var(--zs-surface);
    border-radius: var(--zs-radius-lg);
    padding: 1rem;
    box-shadow: 0 12px 30px -18px rgba(15, 46, 74, .35);
}

.zs-trust {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.1rem 1.25rem;
    border-radius: var(--zs-radius-lg);
    background: var(--zs-sage-tint);
}
.zs-trust h3 { font-size: 1rem; margin: 0 0 .25rem; }
.zs-trust p { margin: 0; font-size: .88rem; color: var(--zs-text-2); }

/* — ورود — */
.zs-auth {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 1.5rem 1rem;
}
.zs-auth__card {
    width: 100%;
    max-width: 420px;
    padding: clamp(1.4rem, 1rem + 2vw, 2.2rem);
    border-radius: var(--zs-radius-xl);
    background: var(--zs-surface);
    border: 1px solid var(--zs-border);
}
.zs-divider-text {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .82rem;
    color: var(--zs-text-2);
}
.zs-divider-text::before, .zs-divider-text::after { content: ""; flex: 1; height: 1px; background: var(--zs-border-warm); }


/* ==========================================================================
   10. رفع ناسازگاری‌های کد فعلی
   ========================================================================== */

/* dashboard.php کلاس opacity-70 می‌دهد که در Bootstrap 5.3 وجود ندارد
   (فقط 25/50/75/100) → کارت خریداری‌شده عملاً کم‌رنگ نمی‌شد. */
.opacity-70 { opacity: .72 !important; }
.opacity-70:hover { opacity: 1 !important; }

/* fs-7 و fs-8 در gift_registry/hospital_mode استفاده شده ولی تعریف نشده بود */
.fs-7 { font-size: .875rem !important; }
.fs-8 { font-size: .75rem !important; }

/* letter-spacing-2 در navbar.php (کد سینک) تعریف نشده بود */
.letter-spacing-2 { letter-spacing: .12em; font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; }

/* گرادیان‌های آبی هدرهای قدیمی — اگر هنوز کلاس header-section در صفحه‌ای
   مانده باشد، تخت و کرم می‌شود (نسخه‌ی کامل: .zs-page-head) */
.header-section {
    background: transparent !important;
    color: var(--zs-text) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.header-section .back-link { color: var(--zs-blue-text) !important; }
.stats-card, .progress-card {
    margin-top: 0 !important;
    background: var(--zs-surface) !important;
    border: 1px solid var(--zs-border) !important;
    box-shadow: none !important;
    border-radius: var(--zs-radius-lg) !important;
}
.category-card { border: 1px solid var(--zs-border) !important; box-shadow: none !important; border-radius: var(--zs-radius-lg) !important; overflow: hidden; }
.category-header { background: transparent !important; border-bottom: 1px solid var(--zs-border-warm) !important; font-family: var(--zs-font-display); font-weight: 600 !important; }
.reset-btn { color: var(--zs-terracotta-text) !important; text-decoration: none !important; font-weight: 500; background: none; border: 0; padding: 0; cursor: pointer; }
.reset-btn:hover { text-decoration: underline !important; }

/* جعبه‌ی اندازه‌ی جنین: گرادیان آبی → سطح کرم تیره‌تر */
.fetal-size-box { background: var(--zs-surface-2) !important; color: var(--zs-ink) !important; border-radius: var(--zs-radius) !important; }

/* کارت چسبان اطلاعات نوزاد هنگام اسکرول کمی سایه بگیرد تا از محتوای زیرش جدا شود */
.sticky-baby-info { box-shadow: 0 8px 20px -16px rgba(15, 46, 74, .4) !important; }


/* ==========================================================================
   11. پنل مدیریت (includes/admin_auth.php و admin/*)
   ابزار داخلی است: خوانایی جدول‌ها و تشخیص سریع وضعیت مهم‌تر از تزئین.
   نوار بالا جوهری است تا ادمین هیچ‌وقت پنل را با اپ کاربران اشتباه نگیرد.
   ========================================================================== */
.admin-shell { display: flex; align-items: flex-start; min-height: 100vh; }
.admin-main { flex: 1 1 auto; min-width: 0; }               /* min-width: جدول پهن، صفحه را بیرون نزند */
.admin-content { max-width: 1400px; margin-inline: auto; padding: 1.5rem 1rem 3rem; }
@media (min-width: 992px) { .admin-content { padding-inline: 2rem; } }

/* نوار بالای موبایل */
.admin-top {
    position: sticky; top: 0; z-index: 1020;
    display: flex; align-items: center; gap: .25rem;
    padding: .4rem .75rem;
    background: var(--zs-ink); color: #E9EFF5;
}
.admin-top__toggle { position: relative; color: #fff; font-size: 1.5rem; line-height: 1; padding: .25rem .4rem; }
.admin-top__toggle:hover { color: #fff; }
.admin-top__dot { position: absolute; top: .3rem; inset-inline-end: .3rem; width: 9px; height: 9px; border-radius: 50%; background: var(--bs-danger); }

/* منوی کناری */
.admin-side {
    background: var(--zs-ink); color: #E9EFF5;
    --bs-offcanvas-width: 260px;
    --bs-offcanvas-bg: var(--zs-ink);
    --bs-offcanvas-color: #E9EFF5;
}
@media (min-width: 992px) {
    .admin-side {
        flex: 0 0 240px; width: 240px;
        position: sticky; top: 0; height: 100vh; overflow-y: auto;
        scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent;
    }
    .admin-side .offcanvas-body { min-height: 100%; padding: 1.25rem .75rem 1rem; }
    .admin-side.offcanvas-lg { background-color: var(--zs-ink) !important; }   /* بوت‌استرپ در lg شفافش می‌کند */
    [data-bs-theme="dark"] .admin-side.offcanvas-lg { background-color: #1E3550 !important; }
}
[data-bs-theme="dark"] .admin-side, [data-bs-theme="dark"] .admin-top { background: #1E3550; --bs-offcanvas-bg: #1E3550; }
.admin-side__brand { font-family: var(--zs-font-display); font-weight: 700; color: #fff; white-space: nowrap; }
.admin-side .offcanvas-body > .admin-side__brand { padding: 0 .75rem 1rem; font-size: 1.05rem; }
.admin-side__nav { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.admin-side__group {
    margin: .85rem .75rem .3rem;
    font-size: .72rem; font-weight: 600; letter-spacing: .02em;
    color: rgba(233, 239, 245, .45);
}
.admin-side a {
    display: flex; align-items: center; gap: .6rem;
    padding: .45rem .75rem;
    border-radius: 10px;
    color: rgba(233, 239, 245, .78);
    text-decoration: none;
    font-size: .9rem;
    transition: background-color .15s var(--zs-ease), color .15s var(--zs-ease);
}
.admin-side a .bi { font-size: 1.05rem; width: 1.25rem; text-align: center; }
.admin-side a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.admin-side a.active { color: var(--zs-ink); background: #fff; font-weight: 600; }
.admin-side__foot {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    margin-top: 1.25rem; padding: .85rem .75rem 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: .85rem; color: rgba(233, 239, 245, .7);
}
.admin-side__foot a { padding: .3rem .6rem; gap: .35rem; font-size: .85rem; }

.card-admin {
    background: var(--zs-surface);
    border: 1px solid var(--zs-border) !important;
    border-radius: var(--zs-radius-lg);
    box-shadow: none;
}
.card-admin.border-warning { border-color: var(--zs-border) !important; border-inline-start: 4px solid var(--zs-terracotta) !important; }

/* هدر جدول‌ها: table-light بوت‌استرپ خاکستری-آبی است */
.table-light, .table > thead.table-light th {
    --bs-table-bg: var(--zs-surface-2);
    --bs-table-color: var(--zs-text-2);
    --bs-table-border-color: var(--zs-border-warm);
}
.card-admin .table { margin-bottom: 0; font-size: .875rem; }
.card-admin .table > :not(caption) > * > * { padding: .7rem .9rem; }

/* کارت آمار داشبورد ادمین */
.zs-kpi { display: flex; flex-direction: column; gap: .35rem; height: 100%; padding: 1rem 1.1rem; }
.zs-kpi__head { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--zs-text-2); }
.zs-kpi__value { font-family: var(--zs-font-display); font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); font-weight: 700; color: var(--zs-ink); line-height: 1.3; }
.zs-kpi__hint { font-size: .74rem; color: var(--zs-text-2); line-height: 1.6; }
.zs-kpi--alert { border-color: var(--bs-danger-border-subtle) !important; background: var(--zs-danger-tint); }

/* نمودار میله‌ای افقی ثبت‌نام‌ها */
.zs-hbar { display: grid; grid-template-columns: 7.5rem 1fr 2.5rem; align-items: center; gap: .75rem; padding: .35rem 0; font-size: .85rem; }
.zs-hbar + .zs-hbar { border-top: 1px solid var(--zs-border-warm); }
.zs-hbar__track { height: .6rem; background: var(--zs-surface-3); border-radius: 99px; overflow: hidden; }
.zs-hbar__fill { height: 100%; background: var(--zs-blue); border-radius: 99px; }
.zs-hbar__val { text-align: end; font-weight: 600; color: var(--zs-ink); }

/* صفحه‌ی ورود ادمین و ساخت اولین ادمین */
.zs-admin-auth { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 1.5rem 1rem; background: var(--zs-ink); }
.zs-admin-auth .zs-auth__card { border-color: transparent; }

/* ══════════════════════════════════════════════════════════════════
   ۱۲. مجله — فهرست و صفحه‌ی مطلب
   ─────────────────────────────────────────────────────────────────
   کارت‌ها تصویر مربع دارند (ورودی ادمین هم مربع است) و همه‌ی متن‌ها
   با ارتفاع ثابت بریده می‌شوند تا شبکه ناهموار نشود؛ در فهرستی که
   قرار است سریع اسکن شود، هم‌ترازی از کامل‌بودن متن مهم‌تر است.
   ══════════════════════════════════════════════════════════════════ */

.zs-mag-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}

.zs-mag-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--zs-surface);
    border: 1px solid var(--zs-border);
    border-radius: var(--zs-radius);
    text-decoration: none;
    color: inherit;
    transition: box-shadow .18s ease, transform .18s ease;
}
.zs-mag-card:hover {
    box-shadow: var(--zs-shadow-hover, 0 6px 20px rgba(15, 46, 74, .08));
    transform: translateY(-2px);
    color: inherit;
}

/* نسبت ۱:۱ با aspect-ratio، تا کارت بی‌تصویر هم جای خالی یکسان بگیرد */
.zs-mag-card__media {
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    background: var(--zs-surface-2);
}
.zs-mag-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zs-mag-card__media .zs-icon { font-size: 1.6rem; color: var(--zs-text-3); }

.zs-mag-card__body { display: flex; flex-direction: column; gap: .5rem; padding: .85rem .95rem 1rem; }
.zs-mag-card__meta { display: flex; flex-wrap: wrap; gap: .35rem; }
.zs-mag-card__title {
    margin: 0;
    font-family: var(--zs-font-display);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.7;
    color: var(--zs-ink);
    /* دو خط، بقیه با «…» — عنوان بلند نباید ارتفاع کارت را بشکند */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.zs-mag-card__excerpt {
    margin: 0;
    font-size: .82rem;
    line-height: 1.85;
    color: var(--zs-text-2);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* برچسب دوره آبی کم‌رنگ، برچسب موضوع گرم — تا در یک نگاه از هم جدا شوند */
/* !important و مقادیر کامل عمدی‌اند: این برچسب‌ها کلاس‌های سودمند
   بوت‌استرپ (bg-*-subtle) را هم دارند تا اگر custom.css نرسید باز هم
   پس‌زمینه داشته باشند؛ آن کلاس‌ها خودشان !important دارند. */
.zs-badge-stage,
.zs-badge-topic {
    display: inline-block;
    font-weight: 600;
    font-size: .68rem;
    line-height: 1.4;
    padding: .35em .7em;
    border-radius: 999px !important;
}
.zs-badge-stage {
    background: var(--zs-blue-tint) !important;
    color: var(--zs-blue-text) !important;
}
.zs-badge-topic {
    background: var(--zs-terracotta-tint) !important;
    color: var(--zs-terracotta-text) !important;
}

/* فیلترها: چیپ، نه دکمه — انتخاب‌کردنشان بی‌هزینه به نظر برسد */
.zs-filter {
    display: inline-block;
    line-height: 1.4;
    /* surface روی پس‌زمینه‌ی کرم تقریباً ناپیدا بود؛ surface-2 گرم‌تر و
       یک پله تیره‌تر است تا چیپ واقعاً دیده شود. */
    background: var(--zs-surface-2);
    border: 1px solid var(--zs-border-warm);
    color: var(--zs-text-2);
    font-weight: 600;
    font-size: .78rem;
    padding: .45em .9em;
    border-radius: 99px;
    text-decoration: none;
    transition: background-color .15s, color .15s, border-color .15s;
}
.zs-filter:hover { border-color: var(--zs-blue-ring); color: var(--zs-blue-text); }
.zs-filter.is-active { background: var(--zs-blue); border-color: var(--zs-blue); color: #fff; }
.zs-filter--soft { font-weight: 500; }

/* ── صفحه‌ی مطلب ───────────────────────────────────────────────── */

.zs-article__cover {
    width: 100%;
    max-width: 22rem;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--zs-radius);
    margin-bottom: 1.25rem;
}

/* متن مطلب: اندازه‌ی مطالعه‌ای بزرگ‌تر از رابط کاربری */
.zs-article__body { font-size: 1.02rem; line-height: 2.05; color: var(--zs-text); }
.zs-article__body h2 {
    font-family: var(--zs-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--zs-ink);
    margin: 2rem 0 .75rem;
}
.zs-article__body h3 {
    font-family: var(--zs-font-display);
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--zs-ink);
    margin: 1.5rem 0 .6rem;
}
.zs-article__body p { margin: 0 0 1.1rem; }
.zs-article__body ul { margin: 0 0 1.1rem; padding-inline-start: 1.25rem; }
.zs-article__body li { margin-bottom: .45rem; }
.zs-article__body blockquote {
    margin: 0 0 1.25rem;
    padding: .9rem 1.1rem;
    background: var(--zs-terracotta-tint);
    border-inline-start: 3px solid var(--zs-terracotta);
    border-radius: var(--zs-radius-sm);
    color: var(--zs-terracotta-text);
}
.zs-article__body a { color: var(--zs-blue-text); }

/* حالت تاریک: فقط سطوحی که توکن ندارند */
[data-bs-theme="dark"] .zs-mag-card__media { background: rgba(255, 255, 255, .04); }

/* روی گوشی کارتِ عمودی با تصویر مربعِ تمام‌عرض یعنی اسکرول بی‌پایان برای
   شش مطلب. پس در عرض کم کارت افقی می‌شود: تصویر کوچک کنار متن. */
@media (max-width: 575.98px) {
    .zs-mag-grid { gap: .75rem; grid-template-columns: 1fr; }
    .zs-mag-card { flex-direction: row; }
    .zs-mag-card__media { flex: 0 0 5.5rem; align-self: flex-start; }
    .zs-mag-card__body { padding: .7rem .85rem; gap: .4rem; }
    .zs-mag-card__title { font-size: .95rem; }
    .zs-mag-card__excerpt { -webkit-line-clamp: 1; }
}

/* شبکه‌ی جمع‌وجور برای «بخوان بعدی» داخل ستون باریک صفحه‌ی مطلب */
.zs-mag-grid--sm { grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr)); }

/* سه‌ستونیِ ثابت برای کارت «خواندنی‌های این ماه» در داشبورد —
   auto-fill در ظرف پهن، ستون‌های خالی می‌ساخت. */
.zs-mag-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 575.98px) { .zs-mag-grid--3 { grid-template-columns: 1fr; } }

/* دکمه‌ی «نمایش کامل مطلب» انتهای کارت — نشانه‌ی صریحِ اینکه کارت باز می‌شود */
.zs-mag-card__more {
    align-self: flex-start;
    margin-top: .1rem;
    display: inline-flex; align-items: center;
    font-size: .76rem; font-weight: 600;
    color: var(--zs-blue-text);
    background: var(--zs-blue-tint);
    padding: .45em .9em;
    border-radius: 999px;
    transition: background-color .15s ease, color .15s ease;
}
.zs-mag-card:hover .zs-mag-card__more { background: var(--zs-blue); color: #fff; }

/* ══════════════════════════════════════════════════════════════════
   ۱۳. مجله — پنل دعوت مهمان
   نسخه‌ی مهمان باید در یک نگاه از نسخه‌ی کاربرِ واردشده جدا باشد و
   بگوید با ثبت‌نام چه چیزی عوض می‌شود. سمت راست توضیح، سمت چپ یک
   نمای شماتیک از همان بخش شخصی (نه محتوای واقعی، تا ادعای نادرست نشود).
   ══════════════════════════════════════════════════════════════════ */

.zs-mag-invite {
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    gap: 1.75rem;
    align-items: center;
    padding: 1.6rem 1.75rem;
    background: linear-gradient(180deg, var(--zs-surface) 0%, var(--zs-surface-2) 100%);
    border: 1px solid var(--zs-blue-ring);
    border-radius: var(--zs-radius-lg);
}

.zs-mag-invite h2 { font-family: var(--zs-font-display); color: var(--zs-ink); }

/* مراحل: عدد در دایره، بدون شماره‌گذاری پیش‌فرض مرورگر */
.zs-mag-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.zs-mag-steps li {
    display: flex; align-items: center; gap: .6rem;
    font-size: .9rem; font-weight: 500; color: var(--zs-text);
}
.zs-mag-steps li span {
    flex: 0 0 1.6rem; height: 1.6rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--zs-blue-tint); color: var(--zs-blue-text);
    font-size: .78rem; font-weight: 700;
}

/* نمای شماتیک: فقط شکل، بدون متن جعلی از مطالب */
.zs-mag-invite__peek {
    padding: 1rem;
    background: var(--zs-surface);
    border: 1px solid var(--zs-border);
    border-radius: var(--zs-radius);
    box-shadow: 0 10px 28px -18px rgba(15, 46, 74, .25);
}
.zs-peek-head {
    font-family: var(--zs-font-display);
    font-size: .92rem; font-weight: 700; color: var(--zs-ink);
    margin-bottom: .75rem;
}
.zs-peek-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .55rem; }
.zs-peek-row:last-child { margin-bottom: 0; }
.zs-peek-chip {
    flex: 0 0 auto;
    font-size: .68rem; font-weight: 600;
    padding: .3em .7em; border-radius: 999px;
    background: var(--zs-blue-tint); color: var(--zs-blue-text);
}
.zs-peek-row:nth-child(3) .zs-peek-chip { background: var(--zs-terracotta-tint); color: var(--zs-terracotta-text); }
.zs-peek-row:nth-child(4) .zs-peek-chip { background: var(--zs-sage-tint); color: var(--zs-sage-text); }
/* خطوط خاکستری = جای متن مطلب، عمداً بدون کلمه */
.zs-peek-row i { flex: 1; height: .5rem; border-radius: 99px; background: var(--zs-surface-3); }

@media (max-width: 767.98px) {
    .zs-mag-invite { grid-template-columns: 1fr; padding: 1.25rem; gap: 1.25rem; }
    .zs-mag-invite__peek { order: -1; }
}

/* ==========================================================================
   14. پیام پایان اشتراک (includes/subscription_notice.php)
   ========================================================================== */

.zs-sub-notice {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin: 0 0 1.25rem;
    padding: 1rem 1.15rem;
    background: var(--zs-surface-2, #F3EEE6);
    border: 1px solid var(--zs-border-warm, #E6DED2);
    border-radius: 14px;
}

.zs-sub-notice__icon { flex: 0 0 auto; }

.zs-sub-notice__title {
    font-weight: 700;
    margin-bottom: .35rem;
}

.zs-sub-notice__text {
    margin-bottom: .5rem;
    line-height: 1.9;
}

.zs-sub-notice__soon {
    margin-bottom: 0;
    font-size: .875rem;
    color: var(--bs-secondary-color, #6c757d);
}

@media (max-width: 575.98px) {
    .zs-sub-notice { padding: .9rem 1rem; gap: .75rem; }
    .zs-sub-notice__icon { --zs-icon-size: 2rem; border-radius: 10px; }
}

/* ==========================================================================
   15. لینک صفحه‌های ثابت پایین صفحه (includes/site_links.php)
   ========================================================================== */

.zs-site-links {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: .35rem 1.1rem; margin-bottom: .6rem;
    font-size: .85rem;
}
.zs-site-links a { color: var(--zs-text-muted, #5A6675); text-decoration: none; }
.zs-site-links a:hover { color: var(--zs-blue-text, #256AAD); text-decoration: underline; }

/* ── تصویر جنین در هفته‌ی جاری (بالای مجله؛ includes/fetal_weeks.php) ── */
.zs-fetal-week {
    background: var(--zs-surface);
    border: 1px solid var(--zs-border);
    border-radius: var(--zs-radius-lg);
    padding: .9rem;
    scroll-margin-top: 90px; /* لینک magazine#this-week زیر نوار چسبان نرود */
}
.zs-fetal-week__badge {
    display: inline-block; font-size: .8rem; padding: .2rem .75rem; border-radius: 999px;
    background: var(--zs-blue-tint); color: var(--zs-blue-text);
}
.zs-fetal-week__img {
    display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
    border-radius: var(--zs-radius); background: var(--zs-surface-2); object-fit: cover;
}
.zs-fetal-week__text { margin: .75rem 0 0; line-height: 1.9; }
.zs-fetal-week__note { font-size: .72rem; color: var(--zs-text-3); margin-top: .35rem; }
/* تصویر جنین عمق‌دار (assets/js/fetal-depth.js): بوم WebGL روی همان تصویر */
.zs-depth { position: relative; border-radius: var(--zs-radius); overflow: hidden; touch-action: pan-y; }
.zs-depth > img { border-radius: 0; }
.zs-depth__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.zs-depth.is-depth .zs-depth__canvas { opacity: 1; }
/* نوار زیر تصویر هفته: اندازه‌ها + جزئیات بازشونده */
.zs-fetal-facts { margin-top: .6rem; border: 1px solid var(--zs-border); border-radius: var(--zs-radius, 12px); background: var(--zs-surface-2, var(--zs-surface)); }
.zs-fetal-facts > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; padding: .6rem .85rem; font-size: .88rem; }
.zs-fetal-facts > summary::-webkit-details-marker { display: none; }
.zs-fetal-facts__week { font-weight: 700; color: var(--zs-blue); }
.zs-fetal-facts__item { color: var(--zs-text-2); white-space: nowrap; }
.zs-fetal-facts__item .bi { margin-inline-end: .3rem; }
.zs-fetal-facts__more { margin-inline-start: auto; color: var(--zs-blue); font-size: .82rem; white-space: nowrap; }
.zs-fetal-facts__more .bi { margin-inline-start: .3rem; display: inline-block; transition: transform .2s; }
.zs-fetal-facts[open] .zs-fetal-facts__more .bi { transform: rotate(180deg); }
.zs-fetal-facts__body { padding: 0 .85rem .8rem; border-top: 1px dashed var(--zs-border); }
.zs-fetal-facts__body ul { margin: .7rem 0 .5rem; padding-inline-start: 1.1rem; line-height: 1.95; font-size: .9rem; }
.zs-fetal-facts__hint { font-size: .75rem; color: var(--zs-text-3); margin-bottom: .55rem; }
.zs-fetal-facts__warn { display: flex; gap: .5rem; align-items: flex-start; font-size: .75rem; line-height: 1.8; color: var(--zs-text-2);
    background: var(--zs-saffron-tint, #fdf6e3); border-radius: 8px; padding: .55rem .7rem; }
.zs-fetal-facts__warn .bi { color: var(--zs-saffron, #c9962b); margin-top: .2rem; flex-shrink: 0; }
.zs-fetal-week__collapsed { display: none; }
.zs-fetal-week.is-hidden { padding: .6rem .9rem; }
.zs-fetal-week.is-hidden .zs-fetal-week__full { display: none; }
.zs-fetal-week.is-hidden .zs-fetal-week__collapsed { display: inline-block; }

/* ==========================================================================
   16. امکانات پولی (includes/pass.php): کادر قفل زیامو، نشان «اشتراک»،
       قدم‌های قفل و کارت «زیامو حساب کرد»
   ========================================================================== */

.zs-paywall__head { display: flex; gap: 1rem; align-items: center; }
.zs-paywall__head .zs-ziamo { height: 120px; margin: 0; flex-shrink: 0; }
.zs-paywall__zi { color: var(--zs-ink); line-height: 1.9; }
.zs-paywall summary { cursor: pointer; }
.zs-paywall__list { list-style: none; padding: 0; display: grid; gap: .5rem; }
.zs-paywall__list li { display: flex; gap: .5rem; align-items: flex-start; line-height: 1.8; }
.zs-paywall__list .bi { color: var(--zs-blue-text); margin-top: .2rem; flex-shrink: 0; }
@media (max-width: 575.98px) {
    .zs-paywall__head .zs-ziamo { height: 96px; }
}

.zs-paid-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--zs-saffron-tint);
    color: var(--zs-saffron-text);
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
}

/* جای قدم‌ها و بخش‌های قفل: خط‌چین آرام، نه هشدار */
.zs-locked-teaser {
    display: flex;
    gap: .65rem;
    align-items: center;
    height: 100%;
    padding: .8rem 1rem;
    border: 1px dashed var(--zs-border-warm);
    border-radius: var(--zs-radius, 12px);
    background: var(--zs-surface-2);
    color: var(--zs-text-2);
    font-size: .88rem;
    line-height: 1.8;
    text-decoration: none;
}
a.zs-locked-teaser:hover { color: var(--zs-ink); border-color: var(--zs-blue); }
.zs-locked-teaser .bi-lock-fill { color: var(--zs-saffron); flex-shrink: 0; }

/* «زیامو حساب کرد»: خریدهایی که با «فعلاً نخر» عقب افتاده‌اند */
.zs-savings__amount { font-family: var(--zs-font-display); font-weight: 700; font-size: 1.35rem; color: var(--zs-ink); font-variant-numeric: tabular-nums; }
.zs-savings__list { list-style: none; padding: 0; margin: .5rem 0 0; }
.zs-savings__list li { display: flex; justify-content: space-between; gap: .75rem; padding: .35rem 0; border-bottom: 1px solid var(--zs-border-warm); font-size: .88rem; }
.zs-savings__list li:last-child { border-bottom: 0; }

/* ==========================================================================
   17. حالت اپ اندروید (TWA کافه‌بازار) — includes/header.php کلاس zs-app را می‌گذارد
   ========================================================================== */
.zs-app .zs-web-only { display: none !important; }