/* ==========================================================================
   theme.css — نظام الألوان الموحّد للوضعين الفاتح والداكن
   يُحمَّل قبل بقية الأنماط، وكل الملفات الأخرى تستهلك متغيراته.
   ========================================================================== */

:root {
    /* ---------- ألوان الهوية (ثابتة في الوضعين) ----------
       الهوية البصرية الجديدة لبلدية ظفار: بنفسجي عميق لاسم البلدية،
       وفيروزي للرمز. القيمتان مأخوذتان حرفياً من ملف الشعار الرسمي
       (assets/img/dhofar_municipality_logo.svg) فلا تُعدَّلان تقديراً. */
    --brand-purple:       #470D67;
    --brand-purple-light: #5E188A;
    --brand-purple-dark:  #2E0844;
    --brand-teal:         #03CFCB;
    --brand-teal-deep:    #06716F;

    /* ---------- الوضع الفاتح ---------- */
    --primary-color:  #470D67;
    --primary-light:  #5E188A;
    --primary-dark:   #2E0844;
    /* الفيروزي الرسمي فاتح جداً (نص أبيض فوقه 1.95:1) فلا يصلح تعبئةً.
       يُعمَّق هنا ليبلغ 5.83:1، ويبقى اللون الرسمي في --turquoise-light
       حيث يُستخدم خطاً أو تمييزاً على سطح داكن. */
    --turquoise-color:  #06716F;
    --turquoise-light:  #03CFCB;
    --secondary-color: #241733;

    --bg-color:       #f7f5fa;
    --bg-elevated:    #ffffff;
    --bg-subtle:      #efeaf5;
    --card-bg:        rgba(255, 255, 255, 0.85);
    --card-solid:     #ffffff;

    --text-main:      #1b1024;
    /* 4.95:1 فوق أغمق سطح يُكتب عليه (--bg-subtle) */
    --text-muted:     #5c6480;
    --text-inverse:   #ffffff;

    --border-color:   rgba(228, 221, 238, 0.9);
    --border-strong:  #cfc6dc;

    --success-color:  #22c55e;
    --success-text:   #15803d;
    --success-bg:     #f0fdf4;
    --warning-color:  #eab308;
    --warning-text:   #a16207;
    --warning-bg:     #fefce8;
    --danger-color:   #ef4444;
    --danger-text:    #b91c1c;
    --danger-bg:      #fef2f2;
    --info-text:      #06636a;
    --info-bg:        #e9f9f9;

    /* ---------- هوية ورقة التقرير ---------- */
    /* الشاشة تحاكي الشهادة المطبوعة: عناوينها بلون الهوية، ونص أسود،
       وخلفية ورقية — فتخرج الشهادة على الورق بالهوية نفسها. */
    --report-accent:    #470D67;
    --report-accent-bg: rgba(71, 13, 103, 0.07);
    --report-ink:       #181818;
    --report-rule:      rgba(71, 13, 103, 0.28);

    /* شبكة الجداول المطبوعة الطراز (سجل العينات): خطوط ظاهرة وترويسة
       بنفسجية كترويسة `paper-table` في ورقة التقرير `sample-reports.php`. */
    --grid-line:        #a99cbb;
    --grid-line-strong: #7e6f96;
    --grid-head-bg:     #ede6f4;
    --grid-head-ink:    #3a0a55;
    --grid-zebra:       rgba(71, 13, 103, 0.035);

    --sidebar-from:   #2e0844;
    --sidebar-to:     #180322;
    --sidebar-text:   rgba(255, 255, 255, 0.85);

    --shadow-sm:      0 1px 3px rgba(27, 16, 36, 0.07);
    --shadow-md:      0 8px 32px rgba(46, 8, 68, 0.08);
    --shadow-lg:      0 18px 45px rgba(27, 16, 36, 0.12);

    --chart-grid:     rgba(140, 128, 160, 0.22);
    --chart-text:     #4b4560;

    /* ---------- أسطح ثانوية داخل البطاقات (رؤوس الجداول، الصناديق المطوية) ----------
       كانت مكتوبة بألوان ثابتة فاتحة داخل admin.css، فتظهر شرائح بيضاء في الوضع الداكن. */
    --surface-muted:   rgba(239, 234, 245, 0.60);
    --surface-sunken:  rgba(239, 234, 245, 0.40);
    --surface-raised:  rgba(247, 245, 250, 0.55);
    --surface-floating: rgba(255, 255, 255, 0.90);
    --hover-row:       rgba(239, 234, 245, 0.55);
    --track-color:     rgba(228, 221, 238, 0.80);
    --overlay-scrim:   rgba(24, 3, 34, 0.62);

    /* ---------- نصوص فوق أسطح لا تتبع السمة ----------
       --on-dark  : فوق الشريط الجانبي والترويسة الداكنين في الوضعين.
       --on-brand : فوق تعبئة بلون الهوية (يقلب إلى داكن لأن الهوية تُضيء ليلاً).
       --on-fixed : فوق ألوان ثابتة (أحمر الحذف، تدرجات المؤشرات).             */
    --on-dark:    #ffffff;
    --on-brand:   #ffffff;
    --on-fixed:   #ffffff;

    /* لون الهوية عندما يُستخدم نصاً على خلفية الصفحة لا تعبئةً */
    --primary-text: #470D67;
    --turquoise-deep: #045d5c;

    --accent-purple:    #7c3aed;
    --accent-purple-bg: rgba(124, 58, 237, 0.12);

    --glass-shadow: 0 8px 32px rgba(46, 8, 68, 0.08);

    /* الخريطة التوضيحية ونجوم التقييم */
    --map-label:  #1b1024;
    --map-ocean:  #e4f8f8;
    --map-region: #b9efee;
    --map-region-hover: #8ae6e4;
    --map-region-active: #58dbd8;
    --star-off:   #857b95;
    --star-on:    #f59e0b;

    /* ---------- رموز إمكانية الوصول ----------
       --field-border      : حدّ الحقول والأزرار المفرغة — 3:1 على سطح الحقل
                             (WCAG 1.4.11)، بديل --border-color الذي يفصل
                             الأسطح بصرياً فقط ولا يرسم حدود مكوّن.
       --placeholder-color : نص التلميح داخل الحقل — 4.5:1، لا تبهيت.
       --focus-ring        : حلقة التركيز، 3:1 على الخلفية المجاورة.
       --focus-halo        : الهالة الرخوة داخل الحقل عند التركيز بالفأرة.
       --fill-hover-veil   : طبقة تعميق/تفتيح تُوضع فوق تعبئة الأزرار عند
                             المرور. تُعمِّق نهاراً وتُفتِّح ليلاً، فيبقى
                             تباين نص الزر صاعداً في الوضعين.
       --touch-target      : أصغر هدف لمس (44px)؛ و«الكثيف» لأزرار الصفوف
                             على مؤشّر دقيق، ويُرفع إلى 44 على اللمس.       */
    --field-border:      #7f7490;
    --placeholder-color: var(--text-muted);
    --focus-ring:        var(--primary-color);
    --focus-halo:        rgba(71, 13, 103, 0.18);
    --fill-hover-veil:   rgba(0, 0, 0, 0.16);
    --touch-target:       44px;
    --touch-target-dense: 36px;

    /* ---------- الخطوط ----------
       Readex Pro هو الأقرب إلى حروف الشعار الجديد: هندسي مسطّح النهايات
       في العربي واللاتيني معاً. تُقرأ هذه المتغيرات في كل ملفات الأنماط،
       فتغيير العائلة هنا يغيّرها في النظام كله، وملفات الأكسية تغلبها.
       الأرقام والأكواد على IBM Plex Mono لتصطف خانةً تحت خانة.          */
    --font-body:    'Readex Pro', 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif;
    --font-display: var(--font-body);
    --font-data:    'IBM Plex Mono', 'Readex Pro', ui-monospace, monospace;

    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    /* ---------- أسماء بديلة تستخدمها أنماط بوابة المفتشين وصفحة الدخول ---------- */
    --primary:    var(--primary-color);
    --secondary:  var(--turquoise-color);
    --accent:     #f59e0b;
    --success:    var(--success-color);
    --danger:     var(--danger-color);
    --bg-main:    var(--bg-color);
    --bg-card:    var(--card-solid);
    --border:     var(--border-color);

    color-scheme: light;
}

/* ---------- الوضع الداكن ---------- */
:root[data-theme="dark"] {
    /* البنفسجي يُفتح في الوضع الداكن ليبقى مقروءاً على خلفية غامقة */
    --report-accent:    #c4a0e8;
    --report-accent-bg: rgba(196, 160, 232, 0.10);
    --report-ink:       #ede7f5;
    --report-rule:      rgba(196, 160, 232, 0.30);

    /* الشبكة نفسها في الوضع الداكن: الخط أفتح من الخلفية لا أغمق منها */
    --grid-line:        rgba(196, 160, 232, 0.30);
    --grid-line-strong: rgba(196, 160, 232, 0.48);
    --grid-head-bg:     rgba(94, 24, 138, 0.34);
    --grid-head-ink:    #d6bcf0;
    --grid-zebra:       rgba(196, 160, 232, 0.05);

    --primary-color:  #c4a0e8;
    --primary-light:  #d4b9f0;
    --primary-dark:   #2e0844;
    --turquoise-color:  #03cfcb;
    --turquoise-light:  #6fe9e6;
    --secondary-color: #e6dff0;

    --bg-color:       #120c1b;
    --bg-elevated:    #1b1329;
    --bg-subtle:      #241a38;
    --card-bg:        rgba(27, 19, 41, 0.92);
    --card-solid:     #1b1329;

    --text-main:      #ede7f5;
    --text-muted:     #a79dbc;
    --text-inverse:   #120c1b;

    --border-color:   rgba(167, 157, 188, 0.20);
    --border-strong:  rgba(167, 157, 188, 0.34);

    --success-color:  #34d399;
    --success-text:   #6ee7b7;
    --success-bg:     rgba(52, 211, 153, 0.12);
    --warning-color:  #fbbf24;
    --warning-text:   #fcd34d;
    --warning-bg:     rgba(251, 191, 36, 0.12);
    --danger-color:   #f87171;
    --danger-text:    #fca5a5;
    --danger-bg:      rgba(248, 113, 113, 0.12);
    --info-text:      #6fe9e6;
    --info-bg:        rgba(3, 207, 203, 0.12);

    --sidebar-from:   #1d0430;
    --sidebar-to:     #0d0117;
    --sidebar-text:   rgba(237, 231, 245, 0.86);

    --shadow-sm:      0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md:      0 8px 32px rgba(0, 0, 0, 0.45);
    --shadow-lg:      0 18px 45px rgba(0, 0, 0, 0.55);

    --chart-grid:     rgba(167, 157, 188, 0.18);
    --chart-text:     #a79dbc;

    --surface-muted:   rgba(167, 157, 188, 0.10);
    --surface-sunken:  rgba(167, 157, 188, 0.07);
    --surface-raised:  rgba(167, 157, 188, 0.06);
    --surface-floating: rgba(27, 19, 41, 0.92);
    --hover-row:       rgba(167, 157, 188, 0.09);
    --track-color:     rgba(167, 157, 188, 0.18);
    --overlay-scrim:   rgba(9, 4, 15, 0.72);

    --on-dark:    #ffffff;
    --on-brand:   #180322;
    --on-fixed:   #ffffff;

    --primary-text: #c4a0e8;
    --turquoise-deep: #03cfcb;

    --accent-purple:    #d8b4fe;
    --accent-purple-bg: rgba(216, 180, 254, 0.16);

    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);

    --map-label:  #ede7f5;
    --map-ocean:  #10222b;
    --map-region: #14514f;
    --map-region-hover: #1d726f;
    --map-region-active: #2a8d89;
    --star-off:   #6b6180;
    --star-on:    #fbbf24;

    --field-border:      #75698c;
    --focus-ring:        var(--primary-light);
    --focus-halo:        rgba(196, 160, 232, 0.22);
    --fill-hover-veil:   rgba(255, 255, 255, 0.16);

    color-scheme: dark;
}

/* ==========================================================================
   ألوان الأدوار
   ألوان الأدوار مشبعة وداكنة (بنّي/أحمر/أزرق غامق) فتختفي على خلفية ليلية.
   تُمرِّر role_color_style() اللونين في سمة style باسمين مستقلين،
   وتختار هذه القواعد بينهما — فيعود الفاتح عند الطباعة أياً كانت سمة الشاشة.
   ========================================================================== */

.role-chip,
.role-note,
.role-note-inline {
    --role-color: var(--role-c-light, #475569);
}

:root[data-theme="dark"] .role-chip,
:root[data-theme="dark"] .role-note,
:root[data-theme="dark"] .role-note-inline {
    --role-color: var(--role-c-dark, #94a6bd);
}

@media print {
    .role-chip,
    .role-note,
    .role-note-inline,
    :root[data-theme="dark"] .role-chip,
    :root[data-theme="dark"] .role-note,
    :root[data-theme="dark"] .role-note-inline {
        --role-color: var(--role-c-light, #475569);
    }
}

/* ==========================================================================
   زر تبديل السمة
   ========================================================================== */

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--touch-target);
    min-width: var(--touch-target);
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-elevated);
    color: var(--text-main);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.theme-toggle:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.theme-toggle:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.theme-toggle i {
    font-size: 15px;
}

/* داخل الشريط الجانبي الداكن */
.sidebar .theme-toggle {
    width: 100%;
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

.sidebar .theme-toggle:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 640px) {
    .theme-toggle-label {
        display: none;
    }

    .theme-toggle {
        padding: 8px 11px;
    }
}

/* ==========================================================================
   إمكانية الوصول: احترام تقليل الحركة
   ========================================================================== */

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

/*
 * حلقة تركيز واضحة لكل العناصر التفاعلية.
 * --focus-ring لون هوية داكن نهاراً وفاتح ليلاً، فيتجاوز 3:1 على خلفية
 * الصفحة والبطاقة في الوضعين (WCAG 1.4.11). والإزاحة تُخرج الحلقة خارج
 * حدود العنصر فلا تختفي فوق زر بلون الهوية نفسه.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: 6px;
}

/*
 * فوق الأسطح الداكنة الثابتة (الشريط الجانبي والترويسة) لا يظهر لون الهوية
 * الداكن، فتُقلب الحلقة إلى أبيض — وهو 21:1 على تدرّج الشريط في كل كساء.
 */
.sidebar a:focus-visible,
.sidebar button:focus-visible,
.sidebar input:focus-visible,
.sidebar select:focus-visible,
.sidebar [tabindex]:focus-visible,
.main-header .user-chip a:focus-visible,
.main-header .user-chip button:focus-visible {
    outline-color: #ffffff;
}

/*
 * رابط تخطي إلى المحتوى لقارئات الشاشة.
 * يُخفى بأسلوب clip لا بالإزاحة خارج الشاشة، لأن الإزاحة تُحدث
 * تمريراً أفقياً في الصفحات ذات الاتجاه من اليمين لليسار.
 */
/*
 * الإخفاء البصري مع بقاء العنصر لقارئات الشاشة.
 * الهامش السالب حُذف لأنه كان يُخرج العنصر بكسل واحد خارج حدود المستند
 * فيُحدث تمريراً أفقياً طفيفاً في الاتجاه من اليمين لليسار؛ وclip-path يكفي للإخفاء.
 */
.skip-link,
.visually-hidden {
    position: absolute !important;
    inset-inline-start: 0;
    top: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link:focus {
    position: fixed !important;
    top: 8px;
    right: 12px;
    width: auto;
    height: auto;
    margin: 0;
    padding: 12px 20px;
    overflow: visible;
    clip: auto;
    clip-path: none;
    z-index: 9999;
    background: var(--primary-color);
    color: #ffffff;
    border-radius: 10px;
    font-weight: 700;
    box-shadow: var(--shadow-lg);
}

/*
 * فئة لحظية أثناء تبديل السمة — تُجبر المتصفح على إعادة حساب الأنماط
 * المشتقة من المتغيرات لكل العناصر الموجودة على الصفحة.
 */
body.theme-switching,
body.theme-switching * {
    transition: none !important;
}

body.theme-switching .card,
body.theme-switching .main-header,
body.theme-switching .data-table,
body.theme-switching .stat-card {
    animation: theme-repaint 0.001s;
}

@keyframes theme-repaint {
    from { opacity: 0.999; }
    to   { opacity: 1; }
}

/* ==========================================================================
   الطباعة — الورق أبيض دائماً
   تُعاد قيم الوضع الفاتح على الجذر، فتطبع كل المكوّنات المشتقة من المتغيرات
   بألوان مقروءة حتى لو كان المستخدم يتصفح في الوضع الداكن.
   ========================================================================== */

@media print {
    :root,
    :root[data-theme="dark"] {
        /* ورقة التقرير وشبكة الجداول تُطبعان بألوان الوضع الفاتح دائماً */
        --report-accent:    #470D67;
        --report-accent-bg: rgba(71, 13, 103, 0.07);
        --report-ink:       #181818;
        --report-rule:      rgba(71, 13, 103, 0.28);

        --grid-line:        #7e6f96;
        --grid-line-strong: #574a6b;
        --grid-head-bg:     #ede6f4;
        --grid-head-ink:    #3a0a55;
        --grid-zebra:       transparent;

        --primary-color:  #470D67;
        --primary-light:  #5E188A;
        --primary-dark:   #2E0844;
        --turquoise-color:  #06716F;
        --turquoise-light:  #03CFCB;
        --turquoise-deep:   #045d5c;
        --secondary-color: #241733;

        --bg-color:       #ffffff;
        --bg-elevated:    #ffffff;
        --bg-subtle:      #f8f6fb;
        --card-bg:        #ffffff;
        --card-solid:     #ffffff;

        --text-main:      #1b1024;
        --text-muted:     #4b4560;
        --text-inverse:   #ffffff;

        --border-color:   #d8d1e2;
        --border-strong:  #a79dbc;

        --success-color:  #16a34a;
        --success-text:   #15803d;
        --success-bg:     #f0fdf4;
        --warning-color:  #eab308;
        --warning-text:   #a16207;
        --warning-bg:     #fefce8;
        --danger-color:   #dc2626;
        --danger-text:    #b91c1c;
        --danger-bg:      #fef2f2;
        --info-text:      #06636a;
        --info-bg:        #e9f9f9;

        --surface-muted:   #efeaf5;
        --surface-sunken:  #f7f5fa;
        --surface-raised:  #f7f5fa;
        --surface-floating: #ffffff;
        --hover-row:       transparent;
        --track-color:     #e4ddee;

        --on-dark:        #ffffff;
        --on-brand:       #ffffff;
        --on-fixed:       #ffffff;
        --primary-text:   #470D67;

        --accent-purple:    #6d28d9;
        --accent-purple-bg: #f5f3ff;

        --chart-grid:     #e4ddee;
        --chart-text:     #3c3550;

        --map-label:      #1b1024;
        --map-ocean:      #e4f8f8;
        --map-region:     #b9efee;
        --star-off:       #857b95;
        --star-on:        #b45309;

        --field-border:      #6b6180;
        --placeholder-color: #4b4560;
        --focus-ring:        #470D67;
        --focus-halo:        transparent;
        --fill-hover-veil:   transparent;

        --shadow-sm: none;
        --shadow-md: none;
        --shadow-lg: none;
        --glass-shadow: none;

        color-scheme: light;
    }
}