/* ==========================================================================
   portfolio-theme.css — Royal/Gold theme applied app-wide.
   Originally scoped to ملف الإنجاز, now promoted to the global identity.

   Mechanism:
     • :root re-declares the design tokens (--primary, --bg, --border, …)
       with the royal palette. Every rule across the app that reads
       those tokens automatically picks up the new look.
     • Element-specific rules below override hardcoded RGBA values
       (badges) and add the gold-leaf accents on portfolio elements.
   ========================================================================== */

:root {
    /* ---------- raw palette ---------- */
    /* ══ البترولي — اعتُمد في ١٨ أغسطس ٢٠٢٦ ══
       كان كحليّاً ملكيّاً (‎#0F2C5C‎). واختار المعلّم البتروليَّ من ستِّ
       لوحاتٍ عُرضت عليه مقيسةً. والاسمُ `pf-royal` بقي كما هو: تبديلُه
       يلمس ثمانيةً وعشرين موضعاً بلا فائدة، والمعنى في قيمته لا في حرفه. */
    --pf-royal:        #0A3F4A;   /* البترولي — لونُ الهُويّة */
    --pf-royal-light:  #14606F;

    /* ══ سُلَّمُ لون الهُويّة ══
       أربعةٌ وثمانون لوناً كانت مكتوبةً صريحاً في التدرّجات والحبر، فلا
       يتبع شيءٌ منها رمزاً. وقد عضَّنا هذا مرّتين في يومٍ واحد (١٨ أغسطس):
       حبرُ الذهبيّ اختفى في الوضع الداكن، ومربّعاتُ «الصف» بقيت بيضاءَ فيه
       — كلاهما لأنّ لوناً كُتب صريحاً فلم يتبع المظهر.

       فصارت درجاتُ الكحليّ رموزاً: تبديلُ هذه الأسطر وحدَها يقلب هُويّة
       التطبيق كلَّها. والمعاني الثلاثةُ مفصولةٌ عمداً — كانت مخلوطةً في
       لونٍ واحد:

         `--primary`       السطحُ الأساسيُّ (يقلبه الوضعُ الداكن)
         `--primary-mid`   أعلى التدرّج — رفعةٌ تُعطي التجسيم
         `--primary-lift`  رفعةٌ أخفُّ في تدرّجاتٍ أهدأ
         `--primary-deep`  أسفلُ التدرّج — غَورٌ يُثبّت
         `--ink-fixed`     حبرٌ داكنٌ على سطحٍ فاتحٍ **لا يتبع المظهر**
                           (الأبيضُ والبيجُ الصريحان) — فلا يجوز أن يتبدّل
         `--on-gold`       حبرٌ على الذهبيّ — والذهبيُّ لا يتبدّل، فكذلك حبرُه

       والأخيران يحرسهما `tools/check-fixed-surfaces.mjs`. */
    /* ودرجاتُ التدرّج مُعايَرةٌ على سقفِ سطوعٍ واحد: أفتحُ درجةٍ يمرّ عليها
       نصٌّ (‎--primary-mid‎، وهي قمّةُ كلِّ تدرّجات الأبطال) لا تتجاوز
       ‎0.0698‎. كانت ‎#116373‎ عند ‎0.1057‎، فرسب عليها الذهبيُّ ‎3.61‎
       والأبيضُ الشفّافُ ‎4.12‎–‎4.41‎ في ثمانيةِ مواضع. وهي القيمُ نفسُها في
       الوضع الداكن — فالتدرّجُ واحدٌ في المظهرين كما هو لونُ الهُويّة. */
    --primary-mid:     #105260;
    --primary-lift:    #104E5B;
    --primary-deep:    #05262D;
    --ink-fixed:       #0A3F4A;
    --on-gold:         #0A3F4A;
    --pf-gold:         #C9A961;   /* الذهبي الفاخر */
    --pf-gold-light:   #E8D9A8;
    --pf-ivory:        #F8F6F0;   /* العاج */
    --pf-charcoal:     #2C2C2A;   /* الأسود الراقي */
    --pf-gray:         #6B6B68;
    --pf-white:        #FFFFFF;

    /* ---------- override the app-wide design tokens ---------- */
    --primary:         var(--pf-royal);
    --primary-light:   var(--pf-royal-light);
    --primary-dark:    var(--pf-royal);
    --accent:          var(--pf-gold);
    --bg:              var(--pf-ivory);
    --surface:         var(--pf-white);
    --surface-alt:     var(--pf-ivory);
    --text:            var(--pf-charcoal);
    --text-muted:      var(--pf-gray);
    --border:          var(--pf-gold-light);
    --border-strong:   var(--pf-gold);
}

body {
    background: var(--pf-ivory);
}

/* ==========================================================================
   Headings inside the portfolio
   ========================================================================== */
#view-portfolio h1,
#view-portfolio h2,
#view-portfolio h3,
#view-portfolio h4 {
    color: var(--pf-royal);
    font-family: inherit;
}

/* ==========================================================================
   Teacher header card — royal gradient
   ========================================================================== */
/* ==========================================================================
   Accordion sections (portfolio-only)
   ========================================================================== */
/* ══ بلا ذهبيّ في ملف الإنجاز ══
   تسعُ بطاقاتٍ بحدٍّ ذهبيٍّ باهتٍ وعشرةُ حدودٍ داخلية تصنع شبكةً ذهبيّةً
   تحيط كلَّ شيء — وهي العلّةُ نفسُها التي حيّدها `theme-white.css` في
   بقيّة التطبيق حين نزع الذهبيَّ عن رمز `--border`. وبقيت هنا لأن هذه
   القواعد تكتب اللونَ صريحاً لا عبر الرمز. (طلبُ المعلّم، ٢٢ أغسطس
   ٢٠٢٦.) فصارت تقرأ الرمزَ كغيرها، فتتبع المظهرَ وتوافق بقيّةَ الشاشات. */
.portfolio-section {
    background: var(--pf-white);
    border: 1px solid var(--border);
    transition: border-color var(--dur-fast) var(--ease),
                box-shadow var(--dur-fast) var(--ease);
}
.portfolio-section:hover {
    border-color: var(--border-strong);
    box-shadow: 0 2px 8px rgba(16, 24, 40, .10);
}
.portfolio-section.is-open {
    border-color: var(--primary);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 16%, transparent);
}
/* ══ وجسمُ القسم أبيضُ لا عاجيّ ══
   كان `--pf-ivory` صريحاً (‎#F8F6F0‎)، فيمتلئ المربّعُ لونـاً دافئاً عند
   فتح القسم بينما ما حولَه أبيض — وهو ما رآه المعلّم ذهبيّاً في
   «الشهادات والرخصة المهنية» (٢٢ أغسطس ٢٠٢٦). وميلُه إلى الدفء ثمانيةُ
   نقاطٍ فقط، فلم يلتقطه مسحُ الذهبيّ أمس — وقد كان يقيس فارقاً أكبر.
   والعلاجُ كعلاج الحدود: يقرأ الرمزَ فيتبع المظهرَ ويوافق بقيّةَ
   الشاشات. و`theme-dark.css` يقلبه بعدُ كما كان. */
.portfolio-section-header:hover {
    background: var(--surface-alt);
}
.portfolio-section-body {
    background: var(--surface-alt);
    border-top: 1px solid var(--border);
}
.portfolio-title {
    color: var(--pf-royal);
}
.portfolio-section.is-open .portfolio-chev {
    color: var(--primary);
}

/* ==========================================================================
   Generic cards (strategies, initiatives, file cards) — applied app-wide
   ========================================================================== */
/* وحدُّ هذه كحدِّ `.card` سواءً — كانت وحدَها ذهبيّةً بين البطاقات، فتُرى
   شاذّةً في التوزيع كما تُرى في ملف الإنجاز. */
.file-card,
.auto-item {
    background: var(--pf-white);
    border: 1px solid var(--border);
    transition: border-color var(--dur-fast) var(--ease);
}
.file-card:hover {
    border-color: var(--border-strong);
}
.file-name {
    color: var(--pf-charcoal);
}

/* ==========================================================================
   Badges — override the hardcoded rgba() values from components.css
   (applied app-wide so the visual identity stays consistent)
   ========================================================================== */
.badge-info {
    background: color-mix(in srgb, var(--pf-royal) 10%, transparent);
    color: var(--pf-royal);
}
.badge-warning {
    background: var(--pf-gold-light);
    color: #6B5416;                /* ‎4.8:1‎ على الذهبيّ الباهت — كان ‎3.34‎ */
}
.badge-muted {
    background: var(--pf-ivory);
    color: var(--pf-charcoal);
    border: 1px solid var(--pf-gold-light);
}
/* badge-success keeps its green for clarity */

/* ==========================================================================
   Buttons (app-wide — royal primary, gold-bordered secondary)
   ========================================================================== */
.btn-primary {
    background: var(--pf-royal);
    border-color: var(--pf-royal);
    color: var(--pf-white);
}
.btn-primary:hover {
    background: var(--pf-royal-light);
    border-color: var(--pf-royal-light);
}
.btn-secondary {
    background: var(--pf-white);
    border-color: var(--pf-gold);
    color: var(--pf-royal);
}
.btn-secondary:hover {
    background: var(--pf-gold-light);
}
.btn-ghost {
    color: var(--pf-royal);
}
.btn-ghost:hover {
    background: var(--pf-gold-light);
    color: var(--pf-royal);
}

/* ==========================================================================
   Tables (portfolio personal section) — gold-trimmed
   ========================================================================== */
#view-portfolio .info-table-compact th,
#view-portfolio .info-table-compact td {
    border-color: var(--border);
}
#view-portfolio .info-table-compact th {
    background: var(--surface-alt);
    color: var(--pf-royal);
}

/* Anchors */
a {
    color: var(--pf-royal);
}
a:hover {
    color: var(--pf-gold);
}

/* ══ ما بقي ذهبيّاً في التطبيق يُحيَّد داخل ملف الإنجاز وحدَه ══
   الوسومُ وزرُّ «حفظ» الثانويّ قواعدُها عامّةٌ تخصّ الشاشات كلَّها، ولم
   يطلب المعلّم نزعَ الذهبيّ منها جميعاً — طلبه من ملف الإنجاز. فتُقيَّد
   بـ`#view-portfolio` ولا تُمسّ خارجَه.

   وحبرُ `.badge-warning` كان ‎#6B5416‎ معايَراً على أرضيّةٍ ذهبيّة، فيُبدَّل
   معها: أرضيّةٌ من الرمز وحبرٌ من الحبر الأساسيّ، فيتبعان المظهرين. */
#view-portfolio .badge-warning {
    background: color-mix(in srgb, var(--primary) 9%, var(--mix-base));
    color: var(--ink-primary);
}
#view-portfolio .badge-muted {
    background: color-mix(in srgb, var(--beige) 32%, var(--mix-base));
    color: var(--ink-primary);
    border: 1px solid var(--border);
}
#view-portfolio .btn-secondary {
    border-color: var(--border-strong);
}
#view-portfolio .btn-secondary:hover,
#view-portfolio .btn-ghost:hover {
    background: color-mix(in srgb, var(--beige) 30%, var(--mix-base));
}

/* ==========================================================================
   Personal info — Government-style ID card
   ========================================================================== */
/* إطارُ البطاقة بلون الهُويّة لا بالذهبيّ. وهذه بطاقةُ الشاشة وحدَها —
   المطبوعةُ يبنيها `print-portfolio.js` بلوحة `print.css`، فلا تتأثّر. */
#view-portfolio .pf-id-card {
    background: var(--pf-white);
    padding: 8px;
    border: 1px solid var(--primary);
    max-width: 720px;
    margin: 0 auto;
}

#view-portfolio .pf-id-inner {
    border: 0.5px solid var(--border-strong);
    padding: 28px;
}

#view-portfolio .pf-id-header {
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--pf-royal);
    margin-bottom: 24px;
}

/* كان ذهبياً: ‎2.25:1‎ على الأبيض — لا يُقرأ. وهو اللونُ الثالثُ الوحيد
   في بطاقةٍ لونُها لونان، ويخرج من الطابعة الأحادية رماديّاً باهتاً يكاد
   يختفي. فصار كحليّاً كالعنوان تحته: ترويسةٌ بلونٍ واحد. */
#view-portfolio .pf-id-country {
    font-size: 12px;
    font-weight: 500;
    color: var(--pf-royal);
    letter-spacing: 0;
    margin-bottom: 8px;
}

#view-portfolio .pf-id-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--pf-royal);
    margin: 0;
    letter-spacing: 0;
}

#view-portfolio .pf-id-subtitle {
    font-size: 10px;
    color: var(--pf-gray);
    margin-top: 4px;
}

#view-portfolio .pf-id-body {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 24px;
    align-items: start;
}

#view-portfolio .pf-id-photo-wrap {
    text-align: center;
}

#view-portfolio .pf-id-photo {
    width: 100px;
    height: 130px;
    border: 1px solid var(--border-strong);
    padding: 4px;
    background: var(--surface-alt);
    overflow: hidden;
}

#view-portfolio .pf-id-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#view-portfolio .pf-id-photo-empty {
    width: 100%;
    height: 100%;
    background: var(--surface-alt);
}

#view-portfolio .pf-id-photo-label {
    font-size: 10px;
    color: var(--pf-gray);
    margin-top: 6px;
    letter-spacing: 0;
}

#view-portfolio .pf-id-table {
    width: 100%;
    border-collapse: collapse;
}

#view-portfolio .pf-id-table tr {
    border-bottom: 0.5px solid var(--border);
}

#view-portfolio .pf-id-table tr:last-child {
    border-bottom: none;
}

#view-portfolio .pf-id-label {
    padding: 10px 0;
    font-size: 12px;
    color: var(--pf-gray);
    letter-spacing: 0;
    width: 35%;
}

#view-portfolio .pf-id-value {
    padding: 10px 0;
    font-size: 13px;
    color: var(--pf-royal);
    font-weight: 500;
}

#view-portfolio .pf-id-value-empty {
    color: #C0C0C0;
}

#view-portfolio .pf-id-footer {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 2px solid var(--primary);
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--pf-gray);
}

@media (max-width: 600px) {
    #view-portfolio .pf-id-body {
        grid-template-columns: 1fr;
        text-align: center;
    }

    #view-portfolio .pf-id-photo-wrap {
        margin: 0 auto;
    }

    #view-portfolio .pf-id-photo {
        margin: 0 auto;
    }

    #view-portfolio .pf-id-table {
        text-align: right;
    }

    #view-portfolio .pf-id-footer {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    #view-portfolio .pf-id-inner {
        padding: 20px 16px;
    }
}