/* ==========================================================================
   سربرگِ صفحه — یک ظاهر برای پرونده سلامت، امکانات و تنظیمات
   --------------------------------------------------------------------------
   خواسته‌ی کاربر:
       «فلش برگشت در پرونده سلامت، امکانات و تنظیمات چک کن درست کار کنند و
        از نظر بصری شبیه به هم شود، یه گرادیانت نرم... زیاد جیغ نباشه، حس
        آرامش رو بده، رنگ‌ها پاستیلی باشند... هر بخش هم رنگ متعلق به خود
        را دارد.»

   چرا CSS و نه کلاس‌های تیلویند؟
       رنگِ هر بخش از پایتون می‌آید (record_categories.py) یا از پارامترِ
       قالب. تیلویند کلاس‌ها را با اسکنِ متن می‌سازد، پس هر تُنِ جدید
       نیازمند build دوباره‌ی tailwind.css است و اگر کسی یادش برود، سربرگ
       بی‌رنگ — یعنی متنِ روشن روی زمینه‌ی سفید — رندر می‌شود. اینجا فقط
       یک متغیر عوض می‌شود و هیچ build ای لازم نیست.

   چرا زمینه‌ی روشن و متنِ تیره، نه گرادیانِ پررنگ و متنِ سفید؟
       سربرگ‌های قبلی از تُن ۶۰۰ با متن سفید استفاده می‌کردند. نسبت
       کنتراستِ سفید روی sky-600 حدود ۳٫۸:۱ است — همین حالا هم فقط برای
       متنِ درشت قابل قبول است. «پاستیلی‌تر کردن» یعنی رفتن به ۵۰۰ و ۴۰۰،
       که کنتراست را به ۲٫۵ و ۲٫۰ می‌رساند و عنوان‌ها را عملاً ناخوانا
       می‌کند.
       پس مسیر برعکس شد: زمینه واقعاً پاستیلی (تُنِ رقیق‌شده در سفید) و
       متن تیره. هم آرام است، هم کنتراستش بالای ۱۲:۱ می‌ماند.

   رنگ‌ها با color-mix از یک متغیرِ واحد (--scr-hue) ساخته می‌شوند، پس هر
   تُنِ تازه فقط یک خط است و حالتِ تیره خودبه‌خود درست درمی‌آید.
   ========================================================================== */

.scr-header {
    --scr-hue: var(--blue);

    /* روشن: تُن را در سفید رقیق می‌کنیم */
    --scr-from: color-mix(in srgb, var(--scr-hue) 15%, #fff);
    --scr-via:  color-mix(in srgb, var(--scr-hue) 9%,  #fff);
    --scr-to:   color-mix(in srgb, var(--scr-hue) 5%,  #fff);
    --scr-line: color-mix(in srgb, var(--scr-hue) 20%, transparent);
    --scr-accent: color-mix(in srgb, var(--scr-hue) 80%, #0B1622);
    --scr-chip: #fff;

    position: relative;
    overflow: hidden;
    border-radius: var(--r-card, 1.5rem);
    padding: 1rem;
    border: 1px solid var(--scr-line);
    /* ⚠️ هاله‌ها لایه‌ی *پس‌زمینه‌ی خودِ سربرگ*اند، نه عنصرِ جدا.
       قبلاً دو <span> با position:absolute و filter: blur(40px) بیرون از
       کادر می‌نشستند و overflow:hidden قرار بود ببُردشان. سافاری آن
       ترکیب را — گوشه‌ی گرد + overflow:hidden + فرزندی با filter —
       درست نمی‌بُرد و هاله از کنارِ کارت می‌زد بیرون؛ دقیقاً همان چیزی
       که کاربر با «کنار این دوتا تو سافاری زده بیرون» نشان داد.
       گرادیانِ شعاعی همیشه با border-radius بریده می‌شود، در هر مرورگر
       — و یک لایه‌ی رنگ به‌جای دو عنصر و دو بلور هم ارزان‌تر است.

       موقعیت‌ها برای صفحه‌ی راست‌به‌چپ نوشته شده‌اند (کلِ اپ dir=rtl
       است)؛ اگر روزی چپ‌به‌راست شد، بخشِ [dir="ltr"] پایین قرینه‌شان
       می‌کند. */
    background-image:
        radial-gradient(7rem 7rem at 6% -14%,
            color-mix(in srgb, var(--scr-hue) 26%, transparent) 0%,
            transparent 72%),
        radial-gradient(7rem 7rem at 97% 118%,
            color-mix(in srgb, var(--scr-hue) 14%, transparent) 0%,
            transparent 72%),
        linear-gradient(135deg,
            var(--scr-from) 0%, var(--scr-via) 55%, var(--scr-to) 100%);
    color: var(--text);
    /* سایه عمداً خیلی ملایم است؛ سایه‌ی رنگیِ پررنگ دقیقاً همان چیزی بود
       که سربرگ‌های قبلی را «جیغ» می‌کرد. */
    box-shadow: 0 8px 24px -18px color-mix(in srgb, var(--scr-hue) 55%, transparent);

    /* ⚠️ اندازه‌ها بر اساس عرضِ *خودِ سربرگ* تصمیم گرفته می‌شوند، نه
       عرضِ صفحه.

       با @media، سربرگی که داخل یک ستونِ باریک نشسته بود همچنان فکر
       می‌کرد جا دارد: برچسبِ «افزودن فرزند» را کامل نشان می‌داد و
       عنوانِ «کودک من» را تا یک حرف کوچک می‌کرد. عنوانِ صفحه هیچ‌وقت
       نباید قربانیِ برچسبِ یک دکمه شود. */
    container-type: inline-size;
}

@container (min-width: 480px) {
    .scr-header { padding: 1.25rem; }
}

/* حالت تیره: همان تُن، این بار در سطحِ تیره حل می‌شود */
html.dark .scr-header {
    --scr-from: color-mix(in srgb, var(--scr-hue) 18%, var(--panel));
    --scr-via:  color-mix(in srgb, var(--scr-hue) 11%, var(--panel));
    --scr-to:   color-mix(in srgb, var(--scr-hue) 6%,  var(--panel));
    --scr-line: color-mix(in srgb, var(--scr-hue) 26%, transparent);
    --scr-accent: color-mix(in srgb, var(--scr-hue) 62%, #fff);
    --scr-chip: color-mix(in srgb, var(--scr-hue) 16%, var(--panel));
}

/* قرینه‌ی هاله‌ها برای صفحه‌ی چپ‌به‌راست */
[dir="ltr"] .scr-header {
    background-image:
        radial-gradient(7rem 7rem at 94% -14%,
            color-mix(in srgb, var(--scr-hue) 26%, transparent) 0%,
            transparent 72%),
        radial-gradient(7rem 7rem at 3% 118%,
            color-mix(in srgb, var(--scr-hue) 14%, transparent) 0%,
            transparent 72%),
        linear-gradient(135deg,
            var(--scr-from) 0%, var(--scr-via) 55%, var(--scr-to) 100%);
}

.scr-header__row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ---------- دکمه‌ی بازگشت و دکمه‌ی کنش ---------- */
.scr-header__btn {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    background: var(--scr-chip);
    border: 1px solid var(--scr-line);
    color: var(--scr-accent);
    transition: background-color var(--dur-fast, 150ms) ease,
                transform var(--dur-fast, 150ms) ease;
    cursor: pointer;
}
.scr-header__btn:hover {
    background: color-mix(in srgb, var(--scr-hue) 12%, var(--scr-chip));
}
.scr-header__btn:active { transform: scale(0.95); }
.scr-header__btn .material-icons { font-size: 1.25rem; }

.scr-header__icon {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    background: var(--scr-chip);
    border: 1px solid var(--scr-line);
    color: var(--scr-accent);
}
.scr-header__icon .material-icons { font-size: 1.25rem; }

/* ---------- متن ---------- */
.scr-header__text { min-width: 0; flex: 1 1 auto; }

.scr-header__title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.scr-header__subtitle {
    font-size: 0.6875rem;
    color: var(--muted);
    margin: 0.125rem 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@container (min-width: 480px) {
    .scr-header__title { font-size: 1rem; }
    .scr-header__subtitle { font-size: 0.75rem; }
}

/* ---------- دکمه‌ی کنشِ سمت چپ ---------- */
.scr-header__action {
    flex: 0 1 auto;
    min-width: 2.5rem;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    border-radius: 1rem;
    background: var(--scr-accent);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    transition: opacity var(--dur-fast, 150ms) ease,
                transform var(--dur-fast, 150ms) ease;
}
html.dark .scr-header__action { color: var(--ink); }
.scr-header__action:hover { opacity: 0.9; }
.scr-header__action:active { transform: scale(0.95); }
.scr-header__action .material-icons { font-size: 1rem; }
.scr-header__action-label {
    display: none;
    white-space: nowrap;
}
@container (min-width: 480px) {
    .scr-header__action { padding: 0 1rem; }
    .scr-header__action-label { display: inline; }
}

/* نگه‌دارنده‌ی تقارن وقتی دکمه‌ی کنش نداریم */
.scr-header__spacer { flex: 0 0 auto; width: 2.5rem; }

/* ---------- خانه‌ی محتوای اضافی (مثلاً دکمه‌ی «افزودن فرزند») ---------- */
.scr-header__extra {
    position: relative;
    z-index: 1;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--scr-line);
}

/* ==========================================================================
   تُن‌ها — هر بخش رنگِ خودش را نگه می‌دارد
   ========================================================================== */
.scr-header[data-tone="sky"]     { --scr-hue: #0EA5E9; }
.scr-header[data-tone="cyan"]    { --scr-hue: #06B6D4; }
.scr-header[data-tone="blue"]    { --scr-hue: #2557C7; }
.scr-header[data-tone="indigo"]  { --scr-hue: #6366F1; }
.scr-header[data-tone="violet"]  { --scr-hue: #8B5CF6; }
.scr-header[data-tone="purple"]  { --scr-hue: #A855F7; }
.scr-header[data-tone="teal"]    { --scr-hue: #14B8A6; }
.scr-header[data-tone="emerald"] { --scr-hue: #10B981; }
.scr-header[data-tone="green"]   { --scr-hue: #22C55E; }
.scr-header[data-tone="amber"]   { --scr-hue: #F59E0B; }
.scr-header[data-tone="orange"]  { --scr-hue: #F97316; }
.scr-header[data-tone="rose"]    { --scr-hue: #F43F5E; }
.scr-header[data-tone="pink"]    { --scr-hue: #EC4899; }
.scr-header[data-tone="fuchsia"] { --scr-hue: #D946EF; }
.scr-header[data-tone="slate"]   { --scr-hue: #64748B; }
.scr-header[data-tone="red"]     { --scr-hue: #EF4444; }

@media (prefers-reduced-motion: reduce) {
    .scr-header__btn,
    .scr-header__action { transition: none; }
}