/* =============================================================
   مختبر كاوزا — إضافات CSS لـ v1.6
   - تَضييق عرض الصفحات الداخلية إلى ~90% (مع حدّ أقصى)
   - إصلاح تَداخل أرقام الخطوات مع النصّ
   - حجم ثابت لنوافذ الكاروسيل والمنبثقات
   - تَكبير الشعار في الهيدر بعد الدخول
   - تمييز الرابط النشط في القوائم المنسدلة
   - تَكبير شعار صفحة الدخول
   ============================================================= */

/* ===== (11) تَضييق المحتوى الداخلي ===== */

.main-content > .container {
    max-width: min(1400px, 92%);
    margin-inline: auto;
    padding-inline: 1rem;
}

/* ===== (1) دليل المنهجيات الخارجي بنفس عرض الترسية ===== */
/* الصفحة الخارجية (قبل الدخول) تَستخدم guest-header الذي يَستخدم .container داخل <main>.
   نُحدّد للزائر فقط أن يَكون العرض محدودًا كالترسية. */

.landing-body main.container,
body.landing-body main {
    max-width: min(1200px, 92%) !important;
    margin-inline: auto !important;
}

/* تَخصيص: داخل صفحة الدليل، عناصر التابات يَجب ألا تَتجاوز هذا العرض */
.landing-body .method-tabs,
.landing-body .method-content {
    max-width: 100%;
}

/* ===== (2) إصلاح أرقام الخطوات ===== */

/* المشكلة كانت: الترقيم كـ ::before مع padding-inline-start غير كافٍ.
   الحلّ: زيادة padding في RTL لتَجنُّب التَداخل + ضَبط مكان الترقيم. */

.method-steps {
    counter-reset: step;
    list-style: none;
    padding: 0;
}

.method-step {
    counter-increment: step;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.9rem 1rem;
    /* مساحة كافية على اليمين (في RTL) للترقيم */
    padding-inline-start: 4rem;
    position: relative;
    margin-bottom: 0.6rem;
    min-height: 60px;
}

.method-step::before {
    content: counter(step);
    position: absolute;
    inset-inline-start: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: var(--gold);
    color: var(--navy);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1rem;
    flex-shrink: 0;
}

.method-step .step-title {
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 0.25rem;
    font-size: 0.98rem;
}

.method-step .step-desc {
    color: var(--ink);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ===== (3+4) نَوافذ منبثقة بحجم ثابت ===== */

/* رابط فَتح الـ tutorial في أعلى تاب المنهجية */
.tutorial-launch {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, var(--navy) 0%, #28709E 100%);
    color: white;
    padding: 0.6rem 1.1rem;
    border-radius: 8px;
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    margin-bottom: 1rem;
}

.tutorial-launch:hover {
    background: linear-gradient(135deg, #28709E 0%, var(--navy) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(28, 63, 96, 0.25);
}

.tutorial-launch i {
    font-size: 1.1rem;
    color: var(--gold-light);
}

/* النافذة المنبثقة للـ tutorial */
.tutorial-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tutorial-modal[hidden] { display: none; }

.tutorial-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(2px);
}

/* الحاوية: حجم ثابت لا يَتغيّر بين الشَّرائح */
.tutorial-window {
    position: relative;
    background: white;
    width: min(720px, 92vw);
    /* حجم ثابت! */
    height: min(640px, 92vh);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tutorial-header {
    background: linear-gradient(135deg, var(--navy) 0%, #28709E 100%);
    color: white;
    padding: 1rem 1.4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.tutorial-header h3 {
    margin: 0;
    color: white;
    font-size: 1.1rem;
}

.tutorial-close {
    background: rgba(255, 255, 255, 0.12);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tutorial-close:hover { background: rgba(255, 255, 255, 0.22); }

.tutorial-body {
    flex: 1;
    overflow-y: auto;
    /* لا سكرول أفقي */
    overflow-x: hidden;
    position: relative;
}

.tutorial-slide {
    padding: 1.5rem 1.4rem;
    min-height: 100%;
    box-sizing: border-box;
    /* مهم: مَنع توسيع المُحتوى لحجم النافذة */
    width: 100%;
    max-width: 100%;
}

.tutorial-slide.hidden { display: none; }

.tutorial-slide h4 {
    color: var(--navy);
    margin: 0 0 0.8rem;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.tutorial-slide .ts-meta {
    font-size: 0.7rem;
    color: var(--gold);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.4rem;
}

.tutorial-slide p {
    color: var(--ink);
    font-size: 0.92rem;
    line-height: 1.7;
    margin: 0 0 0.8rem;
}

.tutorial-slide ol, .tutorial-slide ul {
    color: var(--ink);
    font-size: 0.9rem;
    line-height: 1.75;
}

.tutorial-slide .ts-illustration {
    background: #FAFBFD;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
    text-align: center;
}

.tutorial-slide .ts-illustration svg {
    max-width: 100%;
    height: auto;
}

.tutorial-footer {
    padding: 0.8rem 1.4rem;
    border-top: 1px solid var(--border);
    background: var(--lighter);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.tutorial-dots {
    display: flex;
    gap: 0.4rem;
}

.tutorial-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border);
    border: none;
    cursor: pointer;
    transition: all 0.15s;
}
.tutorial-dot.active { background: var(--gold); transform: scale(1.2); }

.tutorial-nav {
    background: white;
    border: 1px solid var(--border);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--navy);
    font-size: 0.95rem;
}
.tutorial-nav:hover:not(:disabled) {
    background: var(--gold);
    color: var(--navy);
    border-color: var(--gold);
}
.tutorial-nav:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ===== (4) إصلاح حجم نافذة "عن المختبر" — ثابت ===== */

.about-lab-window {
    /* تَأكيد حجم ثابت */
    width: min(960px, 94vw) !important;
    height: min(720px, 92vh) !important;
    max-height: 92vh !important;
}

.about-lab-body {
    flex: 1;
    min-height: 0; /* مَنع toolbar bug */
    overflow-y: auto;
    overflow-x: hidden;
}

/* ===== (5) شعار صفحة الدخول أكبر ===== */

.login-card .login-logo,
.login-brand svg {
    width: 156px !important;
    height: 156px !important;
    margin-bottom: 1rem !important;
}

.login-card h1 {
    font-size: 1.8rem !important;
}

/* ===== (9) شعار الهيدر أكبر مع فصل عن قائمة الـ navbar ===== */

.navbar-brand .brand-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
    color: inherit;
    /* عزل بصري عن باقي القائمة */
    border-inline-end: 1px solid rgba(255, 255, 255, 0.12);
    padding-inline-end: 1.1rem;
    margin-inline-end: 0.6rem;
}

.navbar-brand .brand-logo {
    width: 62px !important;
    height: 62px !important;
    flex-shrink: 0;
}

.navbar-brand .brand-text {
    display: flex;
    flex-direction: column;
}

.navbar-brand .brand-name {
    font-size: 1.45rem !important;
    font-weight: 800;
    color: var(--white);
    line-height: 1.1;
}

.navbar-brand .brand-sub {
    font-size: 0.7rem;
    color: var(--gold-light);
    letter-spacing: 0.05em;
    font-family: 'Cinzel', serif;
}

.navbar-brand .brand-madayn-inline {
    display: inline-flex;
    align-items: center;
    padding-inline-start: 0.85rem;
    margin-inline-start: 0.2rem;
    border-inline-start: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--gold-light);
    font-weight: 800;
    font-size: 1.1rem;
}

/* ===== (12) تمييز الرابط النشط في القوائم المنسدلة ===== */

.nav-dropdown-menu a.is-active {
    background: linear-gradient(90deg, rgba(193, 148, 71, 0.18) 0%, rgba(193, 148, 71, 0.08) 100%) !important;
    color: var(--navy) !important;
    font-weight: 800;
    position: relative;
    border-inline-start: 3px solid var(--gold);
}

.nav-dropdown-menu a.is-active i.bi {
    color: var(--gold) !important;
}

.nav-dropdown-menu a.is-active::after {
    content: '◀';
    font-size: 0.6rem;
    color: var(--gold);
    margin-inline-start: auto;
}

/* وكذلك على عناصر القائمة العلوية المباشِرة (non-dropdown) */
.navbar-menu > li > a.is-active-top {
    background: rgba(193, 148, 71, 0.18);
    color: var(--white) !important;
    border-bottom: 2px solid var(--gold);
}

/* ===== (15) إصلاح ظهور رموز (?) — تَحسين بصري ===== */

.help-icon-small {
    width: 18px;
    height: 18px;
    font-size: 0.65rem;
    border: 1px solid var(--muted);
    color: var(--muted);
    background: white;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    margin-inline-start: 0.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    vertical-align: middle;
    flex-shrink: 0;
}

.help-icon-small:hover {
    border-color: var(--navy);
    background: var(--navy);
    color: white;
}

/* ===== شارات إدارة الحالة (في الميتاداتا) ===== */

.case-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    background: white;
    border: 1px solid var(--border);
    border-radius: 99px;
    font-size: 0.78rem;
    color: var(--ink);
}

.case-meta-pill.efqm-pill {
    background: linear-gradient(90deg, #EFF6FF 0%, #DBEAFE 100%);
    border-color: #3B82F6;
    color: #1E40AF;
    font-weight: 700;
}

.case-meta-pill i { color: var(--muted); }
.case-meta-pill.efqm-pill i { color: #3B82F6; }