/* ============================================
   نُزه - Nuzha App
   المتغيرات والأساسيات
   variables.css
   ============================================ */

/* --- CSS Variables --- */
:root {
    /* المتصفّح يرسم عناصره بنفسه: زرّ «اختيار ملف»، وأيقونة التقويم
       في حقل التاريخ، وقائمة الاختيار المنسدلة، وأشرطة التمرير. وهو
       يرسمها فاتحة ما لم يُخبَر أن الصفحة داكنة — فيظهر زرٌّ أبيض
       ناصع وشريطٌ رمادي وسط لوحة خضراء داكنة، ويبدو الحقل مكسوراً.
       وسطرٌ واحد يُصلحها كلّها في الموقع واللوحتين معاً. */
    color-scheme: dark;

    /* الألوان الأساسية */
    --color-bg-dark: #1a3a2a;
    --color-bg-darker: #0f2a1a;
    --color-bg-card: #1e3d2d;
    --color-bg-card-alt: var(--veil-85);
    --color-bg-input: var(--tint-008);
    /* التذييل أغمق من الصفحة درجةً: يُقال «انتهت» قبل أن يُقرأ فيه
       حرف. ولا يُعاد استعمال ‎--color-bg-darker‎ لأنه لون الصفحة
       نفسها، فيختفي الفرق. */
    --color-footer-bg: #0a1f13;
    /* قاع تدرّج الصفحة. كان ‎#0d2215‎ مكتوباً بيده في ‎body‎، وهو
       بتثبيت الخلفية يغطّي الشاشة كلّها، فيصبّ أخضرَ داكناً على
       الورق الفاتح. */
    --color-bg-deep: #0d2215;
    /* سطحٌ شبه معتم يعلو المحتوى: الشريط السفلي ولوحة الخريطة.
       كان ‎rgba(15, 42, 26, …)‎ مكتوباً بيده، فيبقى أخضرَ داكناً فوق
       الورق الفاتح ويُقرأ قطعةً من سمةٍ أخرى. */
    --scrim-92: rgba(15, 42, 26, 0.92);
    --scrim-97: rgba(15, 42, 26, 0.97);

    /* حُجُب الهوية: تدرّجاتٌ تُغمِّق ما تحتها بلون البطاقة الأخضر.
       على الورق تُفتِّح بلون الرمل بدل أن تُغمِّق بالأخضر. */
    --veil-30: rgba(30, 61, 45, 0.30);
    --veil-40: rgba(30, 61, 45, 0.40);
    --veil-50: rgba(30, 61, 45, 0.50);
    --veil-85: rgba(30, 61, 45, 0.85);

    /* طبقات السطح: كانت مكتوبة rgba(255,255,255,…) في سبعة وستّين
       موضعاً. وهي على خلفية داكنة تفتيحٌ لطيف، وعلى ورقٍ فاتح بيضاءُ
       على بيضاء فتختفي البطاقة والشريحة والحقل معاً.
       فصارت رموزاً تنقلب مع السمة: تفتيحٌ في الداكنة، وتغميقٌ في
       الفاتحة، والشفافية نفسها في الاثنتين. */
    --tint-001: rgba(255, 255, 255, 0.01);
    --tint-0015: rgba(255, 255, 255, 0.015);
    --tint-002: rgba(255, 255, 255, 0.02);
    --tint-025: rgba(255, 255, 255, 0.025);
    --tint-003: rgba(255, 255, 255, 0.03);
    --tint-004: rgba(255, 255, 255, 0.04);
    --tint-005: rgba(255, 255, 255, 0.05);
    --tint-006: rgba(255, 255, 255, 0.06);
    --tint-007: rgba(255, 255, 255, 0.07);
    --tint-008: rgba(255, 255, 255, 0.08);
    --tint-010: rgba(255, 255, 255, 0.10);
    --tint-012: rgba(255, 255, 255, 0.12);
    --tint-015: rgba(255, 255, 255, 0.15);

    /* الألوان الذهبية */
    --color-gold: #c9a84c;
    --color-gold-light: #d4b85c;
    --color-gold-dark: #a88a3a;
    --color-gold-bg: rgba(201, 168, 76, 0.15);
    --color-gold-border: rgba(201, 168, 76, 0.3);

    /* حدود خافتة، ذهبيّة لا بيضاء.
       كانت ثمانية وعشرون حدّاً بـ rgba(255,255,255,…): بيضاء فوق خلفية
       خضراء داكنة، فتُقرأ خطوطاً بيضاء دخيلة لا حدوداً ناعمة — أظهرها
       ما ظهر في صفحة التسجيل حول كل حقل.
       والذهبيّ من لون الهوية نفسه، فيغيب في الخلفية ويظهر عند الحاجة. */
    --line-faint:  rgba(201, 168, 76, 0.10);      /* فاصل بالكاد يُرى */
    --line-soft:   rgba(201, 168, 76, 0.16);      /* حدّ بطاقة */
    --line-strong: rgba(201, 168, 76, 0.24);      /* حدّ حقل إدخال */

    /* ألوان النص */
    --color-text-primary: #ffffff;
    --color-text-secondary: rgba(255, 255, 255, 0.7);
    --color-text-muted: rgba(255, 255, 255, 0.5);
    --color-text-gold: var(--color-gold);
    --color-text: var(--color-text-primary);      /* اسم مختصر مستخدم في المكوّنات */

    /* ألوان خاصة */
    --color-star: #f5c518;
    --color-danger: #ff6b6b;
    --color-warning: #f1c40f;
    --color-success: #4caf50;
    --color-overlay: rgba(0, 0, 0, 0.45);
    --color-overlay-heavy: rgba(0, 0, 0, 0.6);

    /* الحدود */
    --border-radius-sm: 8px;
    --border-radius-md: 14px;
    --border-radius-lg: 20px;
    --border-radius-xl: 25px;
    --border-radius-pill: 50px;
    --border-radius-full: 50px;                   /* مرادف لـ pill */

    /* الظلال */
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.3);
    --shadow-btn: 0 2px 10px rgba(201, 168, 76, 0.3);
    --shadow-nav: 0 -4px 20px rgba(0, 0, 0, 0.4);

    /* الخطوط */
    --font-family: 'Cairo', 'Tajawal', sans-serif;
    --font-size-xs: 0.65rem;
    --font-size-sm: 0.75rem;
    --font-size-md: 0.85rem;
    --font-size-base: 0.95rem;
    --font-size-lg: 1.1rem;
    --font-size-xl: 1.3rem;
    --font-size-xxl: 1.6rem;

    /* المسافات */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-xxl: 24px;

    /* الأبعاد */
    --app-max-width: 430px;
    --navbar-height: 65px;
    /* ارتفاع الترويسة: مصدر واحد للحقيقة، تقرأه الخريطة لتضع بطاقتها تحته */
    --header-height: 100px;
    --status-bar-height: 44px;
}

/* --- Reset & Base Styles --- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

/* الصفحة كلّها بتدرّج الحاوية نفسه.
   كانت الحاوية تحمل تدرّجاً أفتح والجسم لوناً مصمتاً أغمق، فيظهر على
   الشاشات الأعرض من الحاوية شريطان داكنان بحافّة حادّة — 80px من كل
   جهة على 1440px — يبدوان إطاراً مقصوداً حول الموقع وليسا كذلك.
   وتطابُق الخلفيتين يجعل الحدّ يختفي في كل عرض بلا استثناء. */
body {
    font-family: var(--font-family);
    background-color: var(--color-bg-darker);
    background-image: linear-gradient(175deg,
        var(--color-bg-dark) 0%, var(--color-bg-darker) 60%, var(--color-bg-deep) 100%);
    background-attachment: fixed;
    color: var(--color-text-primary);
    /* الاتجاه من ‎<html dir>‎ لا من هنا: تثبيته rtl يجعل الإنجليزية
       تُرسَم من اليمين، فتنقلب علامات الترقيم وتخرج الأرقام مقلوبة. */
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    text-decoration: none;
    color: inherit;
}

ul, ol {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

button {
    border: none;
    outline: none;
    cursor: pointer;
    font-family: inherit;
    background: none;
}

input, textarea {
    border: none;
    outline: none;
    font-family: inherit;
}

/* لا نخفي مؤشر التركيز؛ نزيله بصرياً فقط عندما يوجد بديل واضح */
:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--color-gold-light);
    outline-offset: 2px;
}

/* القوائم المنسدلة: نافذتها يرسمها نظام التشغيل لا الصفحة، فلا
   يكفي تلوين العنصر نفسه. كانت تفتح بيضاء على أبيض فلا تُقرأ
   خياراتها إطلاقاً.
   color-scheme يخبر المتصفّح أن يرسم القائمة بألوان الوضع الداكن،
   وتلوين option يضبط ما لا يضبطه في متصفّحات أخرى. */
select {
    color-scheme: dark;
}

select option,
select optgroup {
    background-color: #12301f;
    color: #ffffff;
}

/* --- Scrollbar Styling --- */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--color-gold-dark);
    border-radius: 10px;
}

/* --- Utility Classes --- */
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.text-gold {
    color: var(--color-gold);
}

.text-muted {
    color: var(--color-text-muted);
}

/* ==================================================================
   السمة الفاتحة
   ==================================================================
   الهوية خضراء ذهبية، فالفاتحة ليست عكس الداكنة بل أختها: رمل فاتح
   بدل الأخضر الغامق، وأخضرُ الهوية نفسه يصير لون النصّ، والذهبيّ
   يغمق قليلاً ليُقرأ على الفاتح (الذهبيّ الفاتح على رمل تباينه دون
   الحدّ المقروء).

   وثلاث حالات لا اثنتان:
     بلا سمة محدّدة  → يتبع الجهاز
     data-theme=light → فاتح مهما كان الجهاز
     data-theme=dark  → داكن مهما كان الجهاز

   والتعريف مكرّر مرّتين عمداً: مرّة تحت استعلام الوسائط ليتبع الجهاز
   من لم يختر، ومرّة تحت السمة الصريحة لتعلو على الجهاز لمن اختار. */

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        color-scheme: light;

        /* الصفحة رمل والبطاقة بيضاء، لا الاثنتان بيضاوين: بطاقةٌ
           بلون صفحتها لا تُرى، وحدُّها وحده لا يكفي لفصلها. */
        --color-bg-dark: #efe7d7;
        --color-bg-darker: #f7f2e8;
        --color-bg-card: #ffffff;
        --color-bg-card-alt: rgba(255, 255, 255, 0.9);
        --color-bg-input: rgba(15, 42, 26, 0.05);
        --color-footer-bg: #e6dcc6;
        --color-bg-deep: #e4dac4;
        --scrim-92: rgba(247, 242, 232, 0.94);
        --scrim-97: rgba(247, 242, 232, 0.97);
        --veil-30: rgba(232, 223, 204, 0.55);
        --veil-40: rgba(232, 223, 204, 0.70);
        --veil-50: rgba(232, 223, 204, 0.80);
        --veil-85: rgba(255, 255, 255, 0.85);
        --tint-001: rgba(15, 42, 26, 0.01);
        --tint-0015: rgba(15, 42, 26, 0.015);
        --tint-002: rgba(15, 42, 26, 0.02);
        --tint-0025: rgba(15, 42, 26, 0.025);
        --tint-003: rgba(15, 42, 26, 0.03);
        --tint-004: rgba(15, 42, 26, 0.04);
        --tint-005: rgba(15, 42, 26, 0.05);
        --tint-006: rgba(15, 42, 26, 0.06);
        --tint-007: rgba(15, 42, 26, 0.07);
        --tint-008: rgba(15, 42, 26, 0.08);
        --tint-010: rgba(15, 42, 26, 0.10);
        --tint-012: rgba(15, 42, 26, 0.12);
        --tint-015: rgba(15, 42, 26, 0.15);

        /* الذهبيّ يغمق على الورق حتى يُقرأ: قيس تباينه على خلفية
           الصفحة فكان 3.59 وهو دون الحدّ المقروء للنصّ العادي،
           فصار 5.12. */
        --color-gold: #7d6320;
        --color-gold-light: #6b5316;
        --color-gold-dark: #5f4a13;
        --color-gold-bg: rgba(154, 123, 40, 0.10);
        --color-gold-border: rgba(154, 123, 40, 0.28);

        --line-faint:  rgba(15, 42, 26, 0.08);
        --line-soft:   rgba(15, 42, 26, 0.14);
        --line-strong: rgba(15, 42, 26, 0.22);

        --color-text-primary: #12301f;
        --color-text-secondary: rgba(18, 48, 31, 0.72);
        --color-text-muted: rgba(18, 48, 31, 0.55);

        --color-overlay: rgba(18, 48, 31, 0.35);
        --color-overlay-heavy: rgba(18, 48, 31, 0.55);
    }

    :root:not([data-theme="dark"]) select option,
    :root:not([data-theme="dark"]) select optgroup {
        background-color: #ffffff;
        color: #12301f;
    }
}

:root[data-theme="light"] {
    color-scheme: light;

    --color-bg-dark: #efe7d7;
    --color-bg-darker: #f7f2e8;
    --color-bg-card: #ffffff;
    --color-bg-card-alt: rgba(255, 255, 255, 0.9);
    --color-bg-input: rgba(15, 42, 26, 0.05);
    --color-footer-bg: #e6dcc6;
    --color-bg-deep: #e4dac4;
    --scrim-92: rgba(247, 242, 232, 0.94);
    --scrim-97: rgba(247, 242, 232, 0.97);
    --veil-30: rgba(232, 223, 204, 0.55);
    --veil-40: rgba(232, 223, 204, 0.70);
    --veil-50: rgba(232, 223, 204, 0.80);
    --veil-85: rgba(255, 255, 255, 0.85);
    --tint-001: rgba(15, 42, 26, 0.01);
    --tint-0015: rgba(15, 42, 26, 0.015);
    --tint-002: rgba(15, 42, 26, 0.02);
    --tint-0025: rgba(15, 42, 26, 0.025);
    --tint-003: rgba(15, 42, 26, 0.03);
    --tint-004: rgba(15, 42, 26, 0.04);
    --tint-005: rgba(15, 42, 26, 0.05);
    --tint-006: rgba(15, 42, 26, 0.06);
    --tint-007: rgba(15, 42, 26, 0.07);
    --tint-008: rgba(15, 42, 26, 0.08);
    --tint-010: rgba(15, 42, 26, 0.10);
    --tint-012: rgba(15, 42, 26, 0.12);
    --tint-015: rgba(15, 42, 26, 0.15);

    --color-gold: #7d6320;
    --color-gold-light: #6b5316;
    --color-gold-dark: #5f4a13;
    --color-gold-bg: rgba(154, 123, 40, 0.10);
    --color-gold-border: rgba(154, 123, 40, 0.28);

    --line-faint:  rgba(15, 42, 26, 0.08);
    --line-soft:   rgba(15, 42, 26, 0.14);
    --line-strong: rgba(15, 42, 26, 0.22);

    --color-text-primary: #12301f;
    --color-text-secondary: rgba(18, 48, 31, 0.72);
    --color-text-muted: rgba(18, 48, 31, 0.55);

    --color-overlay: rgba(18, 48, 31, 0.35);
    --color-overlay-heavy: rgba(18, 48, 31, 0.55);
}

:root[data-theme="light"] select {
    color-scheme: light;
}

:root[data-theme="light"] select option,
:root[data-theme="light"] select optgroup {
    background-color: #ffffff;
    color: #12301f;
}

/* الزخارف الركنية والخلفية النقشية صُمّمت لخلفية داكنة: على الفاتح
   تصير بقعاً داكنة وسط الورق. تُخفَّت لا تُحذف، فتبقى الهوية. */
:root[data-theme="light"] .islamic-pattern-overlay,
:root[data-theme="light"] .corner-decor { opacity: 0.10; }

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .islamic-pattern-overlay,
    :root:not([data-theme="dark"]) .corner-decor { opacity: 0.10; }
}

/* اتجاه النصّ داخل الفقرة يتبع حروفه، والصندوق لا يتحرّك.
   الصفحة كلّها يمينية، فجملةٌ إنجليزية داخلها تُحاذى إلى اليمين
   وتُقرأ نهايتُها أوّلاً: «© 2026 نُزه All rights reserved to».
   و‎plaintext‎ يجعل كل فقرة تأخذ اتجاهها من أوّل حرف قويّ فيها، فلا
   العربية تتغيّر ولا الإنجليزية تنعكس، ولا يتحرّك موضع العنصر.

   وهي للنثر وحده لا لصفوف التخطيط.

   كانت تشمل ‎li‎ و‎td‎ و‎th‎ و‎label‎ و‎dt‎، وأثرها فيها عطل لا إصلاح:
   ‎plaintext‎ يجعل ‎text-align: start‎ يُحسب من اتجاه السطر نفسه، فصفٌّ
   أوّل حرفٍ قويّ فيه لاتيني — بريدٌ أو رقم — يُحاذى يساراً وحده بين
   إخوته اليمينيين.

   وقد قيس في تذييل الموقع: صفّا «contact@nuzh.site» و«0557517267»
   ملاصقان لليسار وبينهما وبين حافة العمود اليمنى 215 و250 بكسل،
   بينما «مركز المساعدة» و«الخصوصية» ملاصقان لليمين. عمودٌ واحد
   بمحاذاتين. وإلغاء الخاصية وحدها أعاد الأربعة إلى اليمين.

   والقيمة اللاتينية داخل سطرٍ عربي تُعزَل بـ ‎<bdi>‎ لا بقلب السطر
   كلّه، وهي في القوالب أصلاً: ‎<bdi class="ltr-value">‎. */
p, h1, h2, h3, h4, h5, h6,
figcaption, blockquote, dd {
    unicode-bidi: plaintext;
}