/* ============================================================
   Path: src/RichRich.Web/wwwroot/css/portal.css
   Session: PORTAL-1
   LastModified: 2026-08-11
   Module: Web — system portal (entry point) styling
   ============================================================
   🆕 NEW FILE — PORTAL-1

   بوّابة الأنظمة على "/" — نقطة الدخول قبل لوحة التحكّم.

   ⚠️ كلّ الألوان من متغيّرات themes.css (--p / --card-bg / --t1 …) فتتبدّل
      تلقائيّاً مع الثيمات الأربعة والوضع الليليّ. ولا قيمة لونٍ ثابتة إلّا
      حيث لا متغيّرَ لها (ظلال rgba).

   ⚠️ والبطاقة المعطَّلة تبقى **مقروءة**: تُخفَّض العتامة ولا تُموَّه.
      المستخدم يجب أن يعرف ماذا يفقد ليطلب الصلاحية — وهو الغرض من
      إظهارها بدل إخفائها (قرار طه).

   ⚠️ ولا scoped CSS (.razor.css) — لا يعمل في هذا المشروع، فكلّ CSS
      يذهب إلى wwwroot/css العالميّ. وكلّ تعديلٍ يحتاج رفع ?v= في App.razor.
   ============================================================ */

/* 🔴 PORTAL-1-HF1: كان max-width: 1100px + margin: 0 auto — ولا يُوسّط.
   السبب: .main-content في layout.css هو **flex column**، فالطفل يُقيَّد
   عرضُه ولا يُوسَّط (‏margin auto أفقيّاً بلا أثرٍ على محور التقاطع في
   flex-direction: column). ومع RTL يلتصق يميناً — وهو ما ظهر: بطاقةٌ
   واحدة في الصفّ ومساحةٌ فارغة بعرض الشاشة.

   🔑 والحلّ width: 100% لا إزالة max-width: التوسيط يحتاج عرضاً كاملاً
     أوّلاً ثمّ margin auto على المحتوى الداخليّ. وبلا width تأخذ الحاوية
     عرض محتواها فتبقى الشبكة على عمودٍ واحد.

   ⚠️ ولا صفحةَ أخرى في المشروع تستعمل max-width — كلّها تمتدّ على العرض
     الكامل. فسقف 1100px نفسه كان اختياراً منّي، وأُبقيه لأنّ بطاقاتٍ
     بعرض 2560px شاشةٍ عريضة تصير أشرطةً لا بطاقات. */
/* ═══════════ تخطيط البوّابة (NAV-CTX-1-HF2) ═══════════
   بلا شريطٍ جانبيّ — رأسٌ خاصّ ومحتوًى يملأ الشاشة.
   ⚠️ كلّ الألوان من themes.css فتتبدّل مع الثيمات الأربعة والوضع الليليّ. */

.portal-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--body-bg);
}

/* 🔴 NAV-CTX-1-HF3 (بلاغ طه): كانت الأدوات تظهر أقصى **يمين** الشاشة في
   العربيّة. السبب justify-content: space-between مع عنصرين — يدفع الثاني
   إلى الطرف المنطقيّ، وهو يمينُ الشاشة في RTL.

   🔑 والحلّ margin-inline-start: auto — وهو ما يفعله TopBar في layout.css:93
     حرفيّاً (‏.tb-right). منطقيٌّ يعكس مع الاتّجاه: يساراً في العربيّة
     ويميناً في الإنجليزيّة.

   ⚠️ ولا اعتمادٌ على space-between: يعمل بالطرفين لا بالاتّجاه، فيصحّ
     مصادفةً في LTR ويخطئ في RTL. */
.portal-topbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    background: var(--tb-bg);
    border-bottom: 1px solid var(--tb-bdr);
}

.portal-topbar-actions {
    /* يدفع الكتلة إلى نهاية السطر منطقيّاً — نفس نهج .tb-right. */
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 6px;

    /* ⚠️ ولا position: relative هنا: UserMenu يلفّ نفسه بـ.drop-wrap
       (‏position: relative في layout.css:147)، فالتمركز مكفولٌ داخله.
       وإضافةُ سياقٍ ثانٍ في الأب تُنشئ مرجعاً غير مقصود.

       والقائمة كانت تُقطع في الصورة لأنّها فتحت عند الحافة اليمنى —
       أثرُ space-between لا عطبٌ في التمركز. فالإصلاح واحد. */
}

/* نفس مقاس .ic-btn في layout.css — البوّابة لا تُحمّل قواعدَه. */
.portal-ic-btn {
    background: none;
    border: none;
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: var(--t2);
    font-size: 1.1rem;
    border-radius: 8px;
    transition: color .15s ease, background .15s ease;
}

.portal-ic-btn:hover {
    background: var(--p-light);
    color: var(--p);
}

.portal-main {
    flex: 1 1 auto;
    /* ⚠️ min-height: 0 — بلاه يتمدّد الطفل ويُلغي التمرير في flex column. */
    min-height: 0;
    overflow-y: auto;
}

.portal {
    width: 100%;
    max-width: 1100px;
    margin-inline: auto;
    padding: 32px 20px 48px;
}

/* 🆕 BRANCH-HOME-1-HF1: البطاقات نفسها داخل MainLayout.
   ⚠️ .main-content يضيف padding: 1.1rem سلفاً، فحشوُ .portal العلويّ
     (‏32px) يُنتج فراغاً مضاعفاً في الصدر. ولا يُلغى كلّه: البطاقات تحتاج
     تنفّساً عن حافّة المحتوى. */
.portal-embedded {
    padding-top: 4px;
    padding-inline: 0;
}

/* ─────────── الرأس ─────────── */

.portal-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}

.portal-brand {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--p);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.portal-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--t1);
}

.portal-sub {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--t2);
}

/* ─────────── فاصل القسم ─────────── */

.portal-section {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 28px 0 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--t2);
}

.portal-section::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--card-bdr);
}

.portal-section i {
    color: var(--p);
    font-size: 15px;
}

/* ─────────── الشبكة والبطاقات ─────────── */

/* ⚠️ auto-fill لا auto-fit: مع auto-fit تتمدّد بطاقةٌ واحدة لتشغل الصفّ
   كلّه حين لا يكفي العرض لاثنتين — وبطاقةٌ بعرض 1100px تبدو خطأً. */
.portal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.portal-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 18px 16px;
    min-height: 132px;
    text-align: start;      /* منطقيّ لا يساريّ — يعكس مع RTL تلقائيّاً */
    background: var(--card-bg);
    border: 1px solid var(--card-bdr);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.portal-card:hover:not(:disabled) {
    border-color: var(--p);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .07);
    transform: translateY(-2px);
}

.portal-card:focus-visible {
    outline: 2px solid var(--p);
    outline-offset: 2px;
}

.portal-card-icon {
    font-size: 24px;
    color: var(--p);
    margin-bottom: 4px;
}

.portal-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--t1);
}

.portal-card-desc {
    font-size: 12px;
    line-height: 1.6;
    color: var(--t2);
}

/* ─────────── البطاقة المعطَّلة ─────────── */

.portal-card-off {
    cursor: not-allowed;
    opacity: .55;           /* مقروءة لا مموَّهة — المستخدم يعرف ما يفقد */
    background: var(--body-bg);
}

.portal-card-off:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--card-bdr);
}

.portal-badge {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;  /* منطقيّ — يعكس مع RTL */
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--card-bdr);
    color: var(--t2);
}

/* ─────────── بطاقة الفرع ─────────── */

.portal-card-branch {
    min-height: 96px;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.portal-card-branch .portal-card-icon {
    margin-bottom: 0;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--p-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.portal-card-branch .portal-card-title { flex: 1 1 auto; }

.portal-card-branch .portal-card-desc {
    flex: 0 0 100%;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    color: var(--t3);
}

/* ─────────── حالات ─────────── */

.portal-empty {
    padding: 20px;
    text-align: center;
    font-size: 13px;
    color: var(--t3);
    background: var(--card-bg);
    border: 1px dashed var(--card-bdr);
    border-radius: 12px;
}

.portal-foot {
    margin-top: 28px;
    text-align: center;
}

/* ─────────── الشاشات الضيّقة ─────────── */

@media (max-width: 640px) {
    .portal { padding: 20px 14px 36px; }
    .portal-grid { grid-template-columns: 1fr; }
    .portal-card { min-height: auto; }
}