/* قواعد وضوح إلزامية، القسم 13.5 من docs/ui.md.
   لا وضع داكن، ولا شفافية على النصوص، ولا تدرّجات خلف النص، ولا ضبابية. */

html, body {
    font-family: 'Cairo', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    background-color: #FAF5EB;
    color: #1A1A1A;
    font-size: 15px;
    line-height: 1.7;
}

/* ممنوع أي ضبابية على أي حاوية */
*, *::before, *::after { backdrop-filter: none !important; }

/* البطاقات بحدّ صريح لا بظل متراكم */
.mud-card, .mud-paper-outlined {
    border: 1px solid #C2C5AA;
    border-radius: 8px;
    background-color: #FFFFFF;
}

/* الجداول: ارتفاع سطر 1.5 وحدّ الأدنى 14px */
.mud-table-cell { font-size: 14px; line-height: 1.5; color: #1A1A1A; }
.mud-table-head .mud-table-cell { font-weight: 600; }

/* مؤشر تركيز ظاهر للتصفّح بلوحة المفاتيح، مطلب WCAG 2.1 AA */
:focus-visible {
    outline: 3px solid #0F4C45;
    outline-offset: 2px;
}

/* الباهت لون صريح مفحوص التباين، لا شفافية */
.mud-text-secondary, .mud-input-helper-text { color: #5A5A4A; }

/* عرض السطر الأقصى للنص المتصل */
.itqan-prose { max-width: 75ch; }

/* التحذير بلون كهرماني مع نص داكن دائمًا */
.mud-alert-filled-warning, .mud-chip-filled.mud-chip-color-warning {
    color: #1A1A1A;
    font-weight: 600;
}

/* رسالة فقد الاتصال بالعربية بدل الشاشة البيضاء، ق-28 */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background-color: rgba(15, 76, 69, 0.55);
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
    align-items: center;
    justify-content: center;
}

#components-reconnect-modal .itqan-reconnect-card {
    background-color: #FFFFFF;
    border: 1px solid #C2C5AA;
    border-radius: 8px;
    padding: 24px 32px;
    text-align: center;
    max-width: 420px;
    font-size: 15px;
    line-height: 1.7;
}

#components-reconnect-modal .itqan-reconnect-failed { display: none; }
#components-reconnect-modal.components-reconnect-failed .itqan-reconnect-rejoining,
#components-reconnect-modal.components-reconnect-rejected .itqan-reconnect-rejoining { display: none; }
#components-reconnect-modal.components-reconnect-failed .itqan-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected .itqan-reconnect-failed { display: block; }

/* ── صفحات الحساب: مقدَّمة من الخادم بلا مكوّنات تفاعلية ── */

.itqan-account-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background-color: #FAF5EB;
}

.itqan-account-card {
    width: 100%;
    max-width: 420px;
    background-color: #FFFFFF;
    border: 1px solid #C2C5AA;
    border-radius: 8px;
    padding: 32px;
}

.itqan-account-brand { text-align: center; margin-bottom: 24px; }
.itqan-account-brand h1 { font-size: 1.6rem; font-weight: 700; color: #0F4C45; margin: 0; }
.itqan-account-brand p { font-size: 14px; color: #5A5A4A; margin: 4px 0 0; }

.itqan-account-title { font-size: 1.2rem; font-weight: 600; margin: 0 0 4px; }
.itqan-account-subtitle { font-size: 14px; color: #5A5A4A; margin: 0 0 20px; }
.itqan-account-hint { font-size: 14px; color: #5A5A4A; margin-top: 20px; line-height: 1.6; }
.itqan-account-footer {
    margin-top: 24px; padding-top: 16px; border-top: 1px solid #C2C5AA;
    font-size: 14px; color: #5A5A4A; text-align: center;
}

.itqan-account-error {
    background-color: #FFFFFF;
    border: 1px solid #DC2626;
    border-inline-start: 4px solid #DC2626;
    border-radius: 8px;
    color: #1A1A1A;
    font-size: 15px;
    font-weight: 500;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.itqan-field { margin-bottom: 16px; }
.itqan-field label { display: block; font-size: 15px; font-weight: 500; margin-bottom: 6px; }
.itqan-field input {
    width: 100%;
    box-sizing: border-box;
    font-family: 'Cairo', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    padding: 10px 12px;
    color: #1A1A1A;
    background-color: #FFFFFF;
    border: 1px solid #A8AB96;
    border-radius: 8px;
}
.itqan-field input:focus { border-color: #0F4C45; }

.itqan-field-inline { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
.itqan-field-inline label { font-size: 15px; font-weight: 500; }
.itqan-field-inline input { width: 18px; height: 18px; accent-color: #0F4C45; }

.itqan-button-primary {
    width: 100%;
    font-family: 'Cairo', sans-serif;
    font-size: 15px;
    font-weight: 600;
    padding: 12px 16px;
    color: #FFFFFF;
    background-color: #0F4C45;
    border: 1px solid #0F4C45;
    border-radius: 8px;
    cursor: pointer;
}
.itqan-button-primary:hover { background-color: #0A3530; border-color: #0A3530; }

/* الرابط الذي يظهر كزرّ: نصّه في الوسط ولا خطّ تحته */
a.itqan-button-primary {
    display: block;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
}

/* زرّ نسخ رابط الفعالية: على البنر، فوق صورته، ويُقرأ على الفاتح والداكن */
.itqan-banner-copy {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-start: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 7px 12px;
    color: #0F4C45;
    background-color: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(15, 76, 69, 0.25);
    border-radius: 8px;
    cursor: pointer;
}

.itqan-banner-copy:hover { background-color: #FFFFFF; }

/* على الضيق يبقى الأيقونة وحدها: البنر ضيّق والاسم أولى به */
@media (max-width: 640px) {
    .itqan-banner-copy-text { display: none; }
}

/* كود الاطّلاع على الأرشيف: يُقرأ حرفًا حرفًا ويُنسخ بلا لبس */
.itqan-archive-code {
    display: inline-block;
    margin-top: 6px;
    font-family: ui-monospace, 'Courier New', monospace;
    font-size: 15px;
    letter-spacing: 0.08em;
    word-break: break-all;
    direction: ltr;
    unicode-bidi: isolate;
}

/* ── التحقق الثنائي ── */

.itqan-account-notice {
    background-color: #FFFFFF;
    border: 1px solid #0F4C45;
    border-inline-start: 4px solid #0F4C45;
    border-radius: 8px;
    color: #1A1A1A;
    font-size: 15px;
    font-weight: 500;
    padding: 12px 16px;
    margin-bottom: 16px;
}

.itqan-totp-qr {
    display: block;
    margin: 16px auto;
    border: 1px solid #C2C5AA;
    border-radius: 8px;

    /* الرمز يُمسح من الشاشة، فيبقى حادًّا بلا تنعيم عند التكبير */
    image-rendering: pixelated;
    background-color: #FFFFFF;
}

/* المفتاح والرموز لاتينية، فتُعرض بخط ثابت العرض لا يخلط 0 بـ O */
.itqan-totp-key {
    font-family: Consolas, 'Courier New', monospace;
    font-size: 17px;
    letter-spacing: 1px;
    text-align: center;
    background-color: #F2F3EC;
    border: 1px solid #C2C5AA;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 20px;
}

.itqan-recovery-codes {
    list-style: none;
    margin: 0 0 20px;
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    direction: ltr;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 16px;
    text-align: center;
    background-color: #F2F3EC;
    border: 1px solid #C2C5AA;
    border-radius: 8px;
}


/* ── البنر والهوية البصرية ── */

.itqan-banner {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 1;
    max-height: 220px;
    background-size: cover;
    background-position: center;
    border: 1px solid #C2C5AA;
    border-radius: 8px;
    overflow: hidden;
}

.itqan-banner-compact { aspect-ratio: 4 / 1; max-height: 150px; border: 0; border-radius: 0; }

.itqan-banner-title {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 200px;
    text-align: center;
}

.itqan-banner-name { font-size: 1.6rem; font-weight: 700; line-height: 1.45; }
.itqan-banner-sub { font-size: 15px; font-weight: 500; line-height: 1.5; }

.itqan-banner-logo,
.itqan-banner-logo-image {
    position: absolute;
    top: 50%;
    /* مسافةٌ تُريح الشعار عن طرف البنر: ستّة عشر بكسلًا كانت تُلصقه به */
    inset-inline-end: 32px;
    transform: translateY(-50%);
    width: 96px;
    height: 96px;
    border-radius: 8px;
    background-color: #FFFFFF;
    object-fit: contain;
}

.itqan-banner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0F4C45;
    font-size: 26px;
    font-weight: 700;
}

@media (max-width: 900px) {
    .itqan-banner-title { padding: 0 120px 0 16px; }
    .itqan-banner-name { font-size: 1.2rem; }
    .itqan-banner-logo, .itqan-banner-logo-image { width: 72px; height: 72px; }
}

.itqan-logo-preview {
    width: 96px;
    height: 96px;
    border: 1px solid #C2C5AA;
    border-radius: 8px;
    object-fit: contain;
    background-color: #FFFFFF;
}

.itqan-logo-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0F4C45;
    font-size: 26px;
    font-weight: 700;
}

/* ── شبكة اختيار البنر ── */

.itqan-preset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.itqan-preset {
    position: relative;
    display: block;
    padding: 0;
    border: 2px solid #C2C5AA;
    border-radius: 8px;
    background: none;
    cursor: pointer;
    overflow: hidden;
    font-family: inherit;
}

.itqan-preset-selected { border-color: #0F4C45; }

.itqan-preset-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4 / 1;
    background-size: cover;
    background-position: center;
}

.itqan-preset-label { font-size: 15px; font-weight: 600; }

.itqan-preset-check {
    position: absolute;
    top: 6px;
    inset-inline-start: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #0F4C45;
    color: #FFFFFF;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── الهيكل الإداري والقطاعات ── */

.itqan-structure-group { margin-bottom: 28px; }

.itqan-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1px solid #C2C5AA;
    margin-inline-end: 6px;
    vertical-align: -2px;
}


/* ── الصفحات العامة: مقدَّمة من الخادم بلا مكوّنات تفاعلية ── */

.itqan-public-shell {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    padding: 32px 16px;
    background-color: #FAF5EB;
}

.itqan-public-card {
    width: 100%;
    max-width: 720px;
    background-color: #FFFFFF;
    border: 1px solid #C2C5AA;
    border-radius: 8px;
    padding: 32px;
}

.itqan-public-title { font-size: 1.6rem; font-weight: 700; line-height: 1.45; margin: 0 0 8px; }
.itqan-public-lead { font-size: 15px; line-height: 1.7; margin: 0 0 16px; max-width: 75ch; }
.itqan-public-note { font-size: 15px; line-height: 1.7; color: #5A5A4A; }

/* تحذير حقلٍ أثناء الكتابة: يُقرأ ولا يمنع، واللون ليس وحده المعلومة (ق-33) */
.itqan-field-warning {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.65;
    color: #8A5A12;
}

.itqan-field-warning::before {
    content: "A0";
    margin-inline-end: 6px;
}

/* ترويسة صفحة التسجيل: متوسّطة، واسم الفعالية أكبر من اسم الإجراء */
.itqan-register-head { text-align: center; margin: 0 0 24px; }

.itqan-register-kind {
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.5;
    margin: 0 0 6px;
}

.itqan-register-event {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.45;
    margin: 0;
    color: #7B2233;                 /* عنّابيّ: يقرؤه المتطوّع أوّل ما يفتح */
}

@media (max-width: 640px) {
    .itqan-register-event { font-size: 1.4rem; }
}
.itqan-public-heading { font-size: 1.05rem; font-weight: 600; line-height: 1.45; margin: 24px 0 8px; }
.itqan-public-section { margin-top: 8px; }

.itqan-public-footer {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid #C2C5AA;
    font-size: 14px;
    display: flex;
    gap: 8px;
    justify-content: center;
}

.itqan-public-footer a { color: #0F4C45; font-weight: 500; }

.itqan-public-banner {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 1;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    margin-bottom: 20px;
}

.itqan-public-banner-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 16px;
    text-align: center;
}

.itqan-public-banner-name { font-size: 1.5rem; font-weight: 700; line-height: 1.45; }
.itqan-public-banner-dates { font-size: 15px; font-weight: 500; }

@media (max-width: 640px) {
    .itqan-public-card { padding: 20px; }
    .itqan-public-banner-name { font-size: 1.1rem; }
    .itqan-public-banner-dates { font-size: 14px; }
}

.itqan-public-actions { margin: 24px 0; }
.itqan-public-actions .itqan-button-primary { display: inline-block; width: auto; text-decoration: none; }

.itqan-public-areas { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.itqan-public-areas li {
    font-size: 15px;
    border: 1px solid #C2C5AA;
    border-radius: 8px;
    padding: 6px 12px;
}

/* ── نموذج التسجيل ── */

.itqan-fieldset {
    border: 1px solid #C2C5AA;
    border-radius: 8px;
    padding: 16px;
    margin: 0 0 20px;
}

.itqan-fieldset-inner {
    border: 1px solid #C2C5AA;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 16px 0;
}

.itqan-fieldset legend, .itqan-fieldset-inner legend {
    font-size: 15px;
    font-weight: 600;
    padding: 0 6px;
}

.itqan-fieldset[disabled] { opacity: 1; background-color: #FAF5EB; }

.itqan-field select,
.itqan-field textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: 'Cairo', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    padding: 10px 12px;
    color: #1A1A1A;
    background-color: #FFFFFF;
    border: 1px solid #A8AB96;
    border-radius: 8px;
}

.itqan-help { display: block; font-size: 14px; line-height: 1.5; color: #5A5A4A; margin-top: 4px; }
.itqan-required { color: #DC2626; font-weight: 700; margin-inline-start: 2px; }

.itqan-field-inline label a { color: #0F4C45; font-weight: 600; }

/*
   البشرى تُقرأ بشرى.
   **وكان النجاح والفشل صندوقًا واحدًا** لا يفرّق بينهما إلا لونُ حاشية،
   فيمرّ «أرسلنا رمزًا إلى بريدك» كما يمرّ «الرمز غير صحيح»: يقرؤه المسجّل
   بطرف عينه ويمضي، ثمّ يسأل أين الرمز.

   واللون وحده ليس المعلومة (ق-33): معه علامة صحّ ووزنُ خطّ، فمن لا يميّز
   الألوان يقرأ الفرق أيضًا.
*/
.itqan-account-good,
.itqan-success-banner {
    background-color: #E6EFEE;
    border-color: #0F4C45;
    border-inline-start-width: 6px;
    border-inline-start-color: #0F4C45;
    color: #0A3530;
    font-weight: 600;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.itqan-success-banner {
    border: 1px solid #0F4C45;
    border-radius: 8px;
    font-size: 15px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

.itqan-account-good::before,
.itqan-success-banner::before {
    content: "✓";
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #0F4C45;
    color: #FFFFFF;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
}

/* صفّ زرّين: الأساسي يأخذ ما بقي، والهادئ بعرض نصّه.
   وعند الضيق ينزل الهادئ تحت الأساسي ولا ينضغط عليه */
.itqan-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: stretch;
}

.itqan-form-actions .itqan-button-primary { flex: 1 1 200px; width: auto; }

/* الزرّ الهادئ: فعلٌ ثانوي لا يزاحم الأساسي، وحدُّه ظاهر فلا يُقرأ نصًّا */
.itqan-button-quiet {
    font-family: 'Cairo', sans-serif;
    font-size: 15px;
    font-weight: 600;
    padding: 12px 20px;
    color: #0F4C45;
    background-color: #FFFFFF;
    border: 1px solid #0F4C45;
    border-radius: 8px;
    cursor: pointer;
}

.itqan-button-quiet:hover { background-color: #E6EFEE; }

/* سطرٌ يقود إلى أوّل خانة، فيفصله عنها فراغٌ يُقرأ */
.itqan-form-lead { margin-bottom: 20px; }

.itqan-form-privacy { margin-top: 16px; }

/* رابط اختيار الباقة: فعلٌ على البطاقة، لا نصٌّ يُقرأ ويُترك */
.itqan-landing-plan-pick {
    display: inline-block;
    margin-top: 12px;
    font-size: 14px;
    font-weight: 700;
    color: #0F4C45;
    text-decoration: none;
    border-bottom: 2px solid #C2622B;
    padding-bottom: 2px;
}

.itqan-landing-plan-pick:hover { color: #C2622B; }

/* نموذج الصفحة التعريفية: بعرضٍ يُقرأ لا بعرض القسم كلِّه */
.itqan-landing-form { max-width: 640px; margin-top: 20px; }
.itqan-landing-form .itqan-field label { color: #1A1A1A; }

/* الحقل الخفي: خارج الشاشة لا معطّل ولا مخفي بالكامل، فالروبوت يملؤه والإنسان لا يراه */
.itqan-honeypot {
    position: absolute;
    inset-inline-start: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ── صندوق الطلبات ولوحة المسار ── */

.itqan-bulk-bar { border-color: #0F4C45; border-width: 2px; }

.itqan-stat { text-align: center; }
.itqan-stat .mud-typography-h4 { font-weight: 700; color: #0F4C45; }
.itqan-stat-alert { border-color: #DC2626; border-width: 2px; }
.itqan-stat-alert .mud-typography-h4 { color: #DC2626; }

.itqan-plain-list { list-style: none; padding: 0; margin: 0; }
.itqan-plain-list li { font-size: 15px; line-height: 1.7; }

/* الملاحظة الداخلية بحدّ جانبي يميّزها عمّا يصل المتطوّع */
.itqan-internal-note {
    border-inline-start: 3px solid #C2C5AA;
    padding-inline-start: 8px;
    color: #5A5A4A;
}

/* ── لوح الإسناد ── */

.itqan-board-list { max-height: 62vh; overflow-y: auto; }

.itqan-board-summary { font-size: 15px; font-weight: 500; }
.itqan-short { color: #DC2626; font-weight: 600; }

.itqan-candidate-row,
.itqan-assigned-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 4px;
    border-bottom: 1px solid #C2C5AA;
}

.itqan-candidate-row:last-child, .itqan-assigned-row:last-child { border-bottom: 0; }

/* قائمة الورديّات: زرٌّ لكل وردية، يعمل بلوحة المفاتيح بلا شيفرة (ق-33) */
.itqan-shift-list { list-style: none; margin: 0; padding: 0; }

.itqan-shift-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid #C2C5AA;

    /* حدّ جانبي شفاف يحجز مكانه، فلا يقفز السطر عند الاختيار */
    border-inline-start: 4px solid transparent;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    color: #1A1A1A;
    text-align: start;
    cursor: pointer;
}

.itqan-shift-button:hover { background: #F2F3EC; }

/* المختار: لون **وحدّ سميك**، فلا يقع التمييز على اللون وحده (ق-33) */
.itqan-shift-button[aria-current="true"] {
    background: #E8EFEA;
    border-inline-start-color: #0F4C45;
    font-weight: 600;
}

.itqan-shift-main { display: flex; flex-direction: column; gap: 2px; }
.itqan-shift-activity { font-weight: 600; }
.itqan-shift-when { font-size: 14px; color: #5A5A4A; }
.itqan-shift-where { font-size: 14px; color: #5A5A4A; }

.itqan-shift-count { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.itqan-shift-headcount { font-weight: 600; }

/* نص القالب في الجدول: سطر واحد بلا كسر التخطيط */
.itqan-template-body { font-size: 14px; line-height: 1.5; color: #5A5A4A; }

/* ── بوابة المتطوّع: جوّال أولًا، بلا مكوّنات تفاعلية ── */

.itqan-portal-shell { min-height: 100vh; background-color: #FAF5EB; }

.itqan-portal-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
    background-color: #0F4C45;
    color: #FFFFFF;
}

.itqan-portal-brand { font-size: 1.1rem; font-weight: 700; }
.itqan-portal-nav { display: flex; gap: 16px; flex-wrap: wrap; flex: 1; }
.itqan-portal-nav a { color: #FFFFFF; font-size: 15px; font-weight: 500; }
.itqan-portal-exit button {
    background: none;
    border: 1px solid #FFFFFF;
    border-radius: 8px;
    color: #FFFFFF;
    font-family: 'Cairo', sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 6px 12px;
    cursor: pointer;
}

.itqan-portal-main { max-width: 720px; margin: 0 auto; padding: 16px; }
.itqan-portal-title { font-size: 1.4rem; font-weight: 700; line-height: 1.45; margin: 8px 0 4px; }
.itqan-portal-sub { font-size: 15px; color: #5A5A4A; margin: 0 0 16px; }

.itqan-portal-card {
    background-color: #FFFFFF;
    border: 1px solid #C2C5AA;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.itqan-portal-heading { font-size: 1.05rem; font-weight: 600; line-height: 1.45; margin: 0 0 12px; }
.itqan-portal-qr { text-align: center; }
.itqan-portal-qr img { max-width: 100%; height: auto; }

.itqan-portal-next-activity { font-size: 1.2rem; font-weight: 600; margin: 0 0 4px; }
.itqan-portal-next-time { font-size: 1.05rem; font-weight: 600; color: #0F4C45; margin: 0 0 8px; }

.itqan-portal-badge {
    display: inline-block;
    background-color: #E6EFEE;
    border: 1px solid #0F4C45;
    border-radius: 8px;
    color: #0F4C45;
    font-size: 14px;
    font-weight: 600;
    padding: 4px 10px;
}

.itqan-portal-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.itqan-portal-table th, .itqan-portal-table td {
    text-align: start;
    padding: 8px 6px;
    border-bottom: 1px solid #C2C5AA;
    line-height: 1.5;
}
.itqan-portal-table thead th { font-weight: 600; }
.itqan-row-muted td { color: #5A5A4A; }

.itqan-portal-footer {
    padding: 16px;
    text-align: center;
    font-size: 14px;
    border-top: 1px solid #C2C5AA;
}
.itqan-portal-footer a { color: #0F4C45; font-weight: 500; }

.itqan-portal-grid-skills {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
}

.itqan-portal-check { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.itqan-portal-check input { width: 20px; height: 20px; accent-color: #0F4C45; }

.itqan-availability-scroll { overflow-x: auto; }
.itqan-availability-grid { border-collapse: collapse; font-size: 14px; min-width: 100%; }
.itqan-availability-grid th, .itqan-availability-grid td {
    border: 1px solid #C2C5AA;
    padding: 8px;
    text-align: center;
    white-space: nowrap;
}
.itqan-availability-grid td .itqan-portal-check { justify-content: center; }

.itqan-button-danger {
    font-family: 'Cairo', sans-serif;
    font-size: 15px;
    font-weight: 600;
    padding: 10px 16px;
    color: #FFFFFF;
    background-color: #DC2626;
    border: 1px solid #DC2626;
    border-radius: 8px;
    cursor: pointer;
}

.d-block { display: block; }
.mt-3 { margin-top: 12px; }

/* ── الأجندة العامة ── */
/* صفحة ثابتة بلا تفاعلية: الفلاتر روابط، والطيّ عنصر details أصلي.
   تُفتح على هاتف في قاعة بشبكة ضعيفة، فلا جافاسكربت في مسارها. */

.itqan-agenda-notice {
    font-size: 14px;
    line-height: 1.7;
    color: #5A5A4A;
    margin: 0 0 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.itqan-agenda-actions { margin-bottom: 20px; }
.itqan-agenda-actions .itqan-button-primary {
    display: inline-block;
    width: auto;
    text-decoration: none;
}

.itqan-agenda-filters {
    border: 1px solid #C2C5AA;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
}

.itqan-agenda-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}

.itqan-agenda-filter-row + .itqan-agenda-filter-row { border-top: 1px solid #E4E6D8; }

.itqan-agenda-filter-label {
    font-size: 14px;
    font-weight: 600;
    min-width: 88px;
}

.itqan-agenda-pill {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    padding: 4px 12px;
    border: 1px solid #C2C5AA;
    border-radius: 999px;
    color: #1A1A1A;
    text-decoration: none;
    background-color: #FFFFFF;
}

.itqan-agenda-pill:hover { border-color: #0F4C45; }

.itqan-agenda-pill-on {
    background-color: #0F4C45;
    border-color: #0F4C45;
    color: #FFFFFF;
}

.itqan-agenda-count { font-size: 13px; font-weight: 600; }

.itqan-agenda-slot {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 12px 0;
    border-top: 1px solid #E4E6D8;
}

.itqan-agenda-time {
    flex: 0 0 64px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.7;
    color: #0F4C45;
    padding-top: 2px;
}

/* الجلسات المتوازية جنبًا إلى جنب: القارئ يقرّر أيّها يحضر */
.itqan-agenda-parallel {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.itqan-agenda-item {
    border: 1px solid #C2C5AA;
    border-radius: 8px;
    padding: 12px 16px;
    background-color: #FFFFFF;
}

.itqan-agenda-code {
    font-size: 13px;
    font-weight: 600;
    color: #5A5A4A;
    display: inline-block;
}

.itqan-agenda-item-title { font-size: 15px; font-weight: 600; line-height: 1.5; margin: 2px 0; }
.itqan-agenda-title-en { font-size: 14px; line-height: 1.5; color: #5A5A4A; margin: 0 0 4px; }

.itqan-agenda-meta {
    font-size: 14px;
    line-height: 1.7;
    color: #5A5A4A;
    margin: 0 0 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.itqan-agenda-tags { margin: 6px 0; display: flex; flex-wrap: wrap; gap: 6px; }

.itqan-agenda-tag {
    font-size: 13px;
    font-weight: 500;
    padding: 2px 10px;
    border: 1px solid #C2C5AA;
    border-radius: 999px;
}

.itqan-agenda-papers { margin-top: 8px; }
.itqan-agenda-papers summary { font-size: 14px; font-weight: 600; cursor: pointer; padding: 4px 0; }
.itqan-agenda-papers ol { margin: 4px 0 0; padding-inline-start: 20px; }
.itqan-agenda-papers li { font-size: 14px; line-height: 1.7; margin-bottom: 6px; }

.itqan-agenda-paper-title { font-weight: 500; display: block; }
.itqan-agenda-authors { font-size: 14px; color: #5A5A4A; }

@media (max-width: 640px) {
    .itqan-agenda-slot { flex-direction: column; gap: 4px; }
    .itqan-agenda-time { flex: none; }
    .itqan-agenda-filter-label { min-width: 100%; }
}

/* ── شاشات البرنامج في الإدارة ── */
.itqan-error-list { margin: 4px 0 0; padding-inline-start: 20px; font-size: 14px; line-height: 1.7; }
.itqan-author-field { max-width: 260px; }

/* ── تقويم حجز الموارد ── */
/* شريط أفقي لكل مورد. النافذة من 06:00 إلى 23:59، والمواضع بالنسبة المئوية
   حتى يعمل التخطيط في RTL بلا حساب اتجاه: inset-inline-start يتولّى ذلك. */

.itqan-day-picker { max-width: 180px; }
.itqan-kind-picker { max-width: 200px; }

.itqan-calendar {
    overflow-x: auto;
    padding-bottom: 8px;
}

.itqan-calendar-hours,
.itqan-calendar-row {
    display: flex;
    align-items: stretch;
    min-inline-size: 720px;
}

.itqan-calendar-rowhead {
    flex: 0 0 160px;
    padding: 8px 12px;
    border-inline-end: 1px solid #C2C5AA;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.itqan-calendar-name { font-size: 14px; font-weight: 600; line-height: 1.5; }
.itqan-calendar-turnover { font-size: 13px; color: #5A5A4A; }

.itqan-calendar-hours { position: relative; height: 24px; }

.itqan-calendar-hour {
    position: absolute;
    font-size: 13px;
    font-weight: 500;
    color: #5A5A4A;
    transform: translateX(50%);
}

.itqan-calendar-hours .itqan-calendar-rowhead { border-inline-end: none; }

.itqan-calendar-row { border-top: 1px solid #E4E6D8; }

.itqan-calendar-track {
    position: relative;
    flex: 1 1 auto;
    min-height: 52px;
    background-color: #FFFFFF;
}

.itqan-calendar-gridline {
    position: absolute;
    inset-block: 0;
    inline-size: 1px;
    background-color: #EDEFE2;
}

.itqan-calendar-booking,
.itqan-calendar-turnover-bar {
    position: absolute;
    inset-block: 6px;
    border-radius: 6px;
}

.itqan-calendar-booking {
    background-color: #E6EFEE;
    border: 1px solid #0F4C45;
    overflow: hidden;
}

/* زمن التهيئة ليس حجزًا لكنه ليس فراغًا: يُرسم مخطّطًا لا مصمتًا */
.itqan-calendar-turnover-bar {
    background-color: #F4D58D;
    border: 1px dashed #A64E1F;
    inset-block: 14px;
}

.itqan-calendar-button {
    all: unset;
    display: flex;
    flex-direction: column;
    gap: 2px;
    inline-size: 100%;
    block-size: 100%;
    padding: 4px 8px;
    cursor: pointer;
    box-sizing: border-box;
}

.itqan-calendar-button:focus-visible { outline: 2px solid #0F4C45; outline-offset: -2px; }

.itqan-calendar-booking-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.itqan-calendar-booking-time { font-size: 13px; color: #5A5A4A; line-height: 1.4; }

@media (max-width: 640px) {
    .itqan-calendar-rowhead { flex-basis: 110px; }
}

/* ── لوحة البلاغات ── */
/* المتأخر يُميَّز بخلفية وحدّ جانبي، لا بلون نصّ وحده: التمييز باللون
   فقط يسقط على من لا يميّز الألوان (ق-33). */

.itqan-incident-overdue {
    background-color: #FDECEC !important;
    box-shadow: inset 4px 0 0 0 #DC2626;
}

.itqan-incident-title { font-size: 14px; font-weight: 600; line-height: 1.5; }
.itqan-incident-meta {
    font-size: 13px;
    color: #5A5A4A;
    line-height: 1.5;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.itqan-incident-late { font-weight: 700; color: #DC2626; }

/* ── إشغال المناطق ── */
/* الحالة تُقرأ من الحدّ والخلفية والنص معًا، لا من اللون وحده (ق-33). */

.itqan-zones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.itqan-zone {
    border: 1px solid #C2C5AA;
    border-radius: 8px;
    padding: 12px 16px;
    background-color: #FFFFFF;
}

.itqan-zone-alarm {
    border-color: #A64E1F;
    border-inline-start: 4px solid #A64E1F;
    background-color: #FDF6E9;
}

.itqan-zone-full {
    border-color: #DC2626;
    border-inline-start: 4px solid #DC2626;
    background-color: #FDECEC;
}

.itqan-zone-name { font-size: 14px; font-weight: 600; line-height: 1.5; }

.itqan-zone-count {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.3;
}

.itqan-zone-capacity { font-size: 15px; font-weight: 500; color: #5A5A4A; }

.itqan-zone-state {
    font-size: 13px;
    font-weight: 500;
    color: #5A5A4A;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

/* ── شاشة التشغيل الحيّة (ق-42) ── */
/* تُقرأ من مسافة في غرفة تحكّم مظلمة نسبيًا: السطر الحالي كبير،
   والعدّاد أكبر، وكل ما عداهما ثانوي. */

.itqan-control { background-color: #FFFFFF; }

.itqan-cue-now {
    border: 1px solid #0F4C45;
    border-inline-start: 6px solid #0F4C45;
    border-radius: 8px;
    padding: 16px 20px;
    background-color: #E6EFEE;
}

.itqan-cue-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #0F4C45;
}

.itqan-cue-title { font-size: 1.6rem; font-weight: 700; line-height: 1.35; margin: 2px 0 6px; }

.itqan-cue-meta {
    font-size: 15px;
    line-height: 1.6;
    color: #5A5A4A;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.itqan-cue-countdown {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    margin-top: 8px;
}

.itqan-cue-tech {
    font-size: 15px;
    font-weight: 600;
    color: #A64E1F;
    margin-top: 8px;
}

.itqan-cue-script {
    font-size: 15px;
    line-height: 1.7;
    margin: 8px 0 0;
    max-width: 75ch;
}

.itqan-cue-next {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    padding: 10px 20px;
    margin-top: 8px;
    border: 1px solid #C2C5AA;
    border-radius: 8px;
}

.itqan-cue-next-title { font-size: 1.05rem; font-weight: 600; line-height: 1.4; }

.itqan-cue-row-standby {
    background-color: #F4D58D !important;
    box-shadow: inset 4px 0 0 0 #A64E1F;
}

.itqan-cue-row-done { color: #5A5A4A; }
.itqan-cue-row-skipped { color: #5A5A4A; text-decoration: line-through; }

@media (max-width: 640px) {
    .itqan-cue-title { font-size: 1.25rem; }
    .itqan-cue-countdown { font-size: 1.8rem; }
}

/* ── نشرة اليوم في البوابة ── */
/* التغييرات أولًا وبعلامة بصرية: المتطوّع يقرأ النشرة على جوّاله وهو يمشي،
   وسطر «تغيّر الوقت» أهم من كل ما تحته. */

.itqan-brief-changes {
    border: 1px solid #A64E1F;
    border-inline-start: 4px solid #A64E1F;
    border-radius: 8px;
    background-color: #FDF6E9;
    padding: 10px 16px;
    margin-bottom: 12px;
    font-size: 15px;
    line-height: 1.7;
    font-weight: 500;
}

/* ── معاينة قالب الشهادة ── */
/* المواضع بالنسبة المئوية من أبعاد الصفحة الحقيقية، فما يُرى هنا هو ما يُطبع.
   حساب الوحدات في مكانين يضمن اختلافهما بعد أول تعديل. */

.itqan-cert-frame {
    position: relative;
    max-inline-size: 100%;
    margin-inline: auto;
    border: 1px solid #C2C5AA;
    border-radius: 4px;
    background-color: #FFFFFF;
    background-image:
        repeating-linear-gradient(to right, #F2F3EA 0 1px, transparent 1px 10%),
        repeating-linear-gradient(to bottom, #F2F3EA 0 1px, transparent 1px 10%);
    overflow: hidden;
}

.itqan-cert-box {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #A8AB96;
    background-color: rgba(255, 255, 255, 0.5);
    line-height: 1.3;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;

    /* العنصر زرٌّ الآن، فتُلغى زخارف الزرّ الافتراضية ويُورَّث الخط */
    padding: 0;
    font: inherit;
    color: inherit;
}

.itqan-cert-box:hover { border-color: #0F4C45; }

.itqan-cert-box-active {
    border: 2px solid #0F4C45;
    background-color: #E6EFEE;
}

.itqan-cert-box > span {
    inline-size: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── صفحة التحقّق من الشهادة ── */
.itqan-verify-card { margin-top: 16px; }

.itqan-verify-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 16px;
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
}

.itqan-verify-list dt { font-weight: 600; color: #5A5A4A; }
.itqan-verify-list dd { margin: 0; }

.itqan-cert-signature {
    max-block-size: 48px;
    max-inline-size: 160px;
    border: 1px solid #C2C5AA;
    border-radius: 4px;
    background-color: #FFFFFF;
}

@media (max-width: 640px) {
    .itqan-verify-list { grid-template-columns: 1fr; gap: 2px 0; }
    .itqan-verify-list dd { margin-bottom: 8px; }
}

/* ── سجلّ التغييرات ── */
.itqan-audit-changes {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.itqan-audit-changes li { display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; }

.itqan-audit-field { font-weight: 600; color: #5A5A4A; }
.itqan-audit-before { color: #5A5A4A; text-decoration: line-through; }
.itqan-audit-after { font-weight: 500; }

/* ── غرفة التجهيز في البوابة ── */
.itqan-slides-late {
    background-color: #FDECEC;
    border: 1px solid #DC2626;
    border-inline-start: 4px solid #DC2626;
    color: #1A1A1A;
    font-weight: 600;
}

/* منطقة العمليات التي لا رجعة عنها: حدّ أحمر يميّزها عن بقية الإعدادات */
.itqan-danger-zone {
    border-color: #DC2626;
    border-inline-start-width: 4px;
}

/* لوحة القيادة: البند الملحّ يُميَّز بحافّة لا بلون خلفية وحده (ق-33) */
.itqan-attention-urgent {
    border-inline-start: 4px solid #DC2626;
}

.mud-chip.itqan-attention-count {
    min-width: 2.5rem;
    justify-content: center;
    font-variant-numeric: tabular-nums;

    /* .mud-chip.mud-chip-size-small يفرض 12px، والحدّ الأدنى المقرّر 14px.
       فالمحدِّد مطابقٌ له في الوزن ليغلبه بترتيب الملفّات لا بـ !important */
    font-size: 0.9375rem;
}

/* ق-51: رمز فئة الاعتماد. اللون يُقرأ من بعيد قبل النص، والنص لا ينزل
   عن أربع عشرة نقطة (حدّ الحجم الأدنى) ولو صغر الرمز */
.itqan-class-chip {
    display: inline-block;
    min-width: 3.5rem;
    padding: 0.15rem 0.6rem;
    border-radius: 0.35rem;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.03em;
}

/* ق-35: علامة المزوّد على صفحة العميل. خافتة لا مزاحِمة، ولا تنزل عن
   الحدّ الأدنى لحجم الخط */
.itqan-public-vendor {
    margin-top: 2.5rem;
    padding-top: 1rem;
    border-top: 1px solid #E6E6E6;
    color: #6B6B6B;
    font-size: 14px;
    text-align: center;
}

/* ── تنقّل شاشات الفعالية ──
   روابطُ لا تبويبات: تبلغها لوحة المفاتيح، وتُفتح في لسانٍ جديد (ق-33).

   **والأقسام تلتفّ على أسطر ولا تمرّر أفقيًّا.** كانت في شريطٍ واحد
   يمرّر، والأقسام خمسة وعشرون: فنصفها خلف الحافة لا يُرى. وصاحب المنصّة
   قال «لم أرَ أيّ تسجيل للضيوف» وكان أمامه، خلف الحافة.

   وشريطُ التمرير الرقيق لم يكن يكفي: ظهورُ خيطٍ رمادي ليس كظهور البند،
   ومن لا يعرف أنّ ثمّ ما بعده لا يمرّره. فصار كلُّه ظاهرًا معًا. */
.itqan-event-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.35rem;
    margin-top: 1rem;
    background: #F2EDE3;
    border-radius: 8px;
}

.itqan-event-nav-item {
    flex: 0 0 auto;
    /* الحشو الأفقي 0.7 لا 0.9: الفرق يجعل الخمسة والعشرين تسع سطرين من
       1200 بكسل فصاعدًا بدل ثلاثة. والارتفاع كما هو، فهدف اللمس لا ينقص */
    padding: 0.45rem 0.7rem;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.5;
    color: #1A1A1A;
    text-decoration: none;
    white-space: nowrap;
}

.itqan-event-nav-item:hover { background: #E4DCCB; }

/* القسم الحاليّ: لونٌ ووزنٌ معًا، فاللون وحده لا يكفي (ق-33) */
.itqan-event-nav-current {
    background: #0F4C45;
    color: #FFFFFF;
    font-weight: 600;
}

.itqan-event-nav-current:hover { background: #0F4C45; }

/* ══════════════ واجهة الموقع العامّة ══════════════ */

/* وضعٌ فاتح وحده، وألوان الثيم نفسها لا ألوان ثانية:
   #0F4C45 الأساس، و#FAF5EB الخلفية، و#A64E1F الثانوي. */

.itqan-landing {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
}

.itqan-landing-inner {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ── الشريط العلوي ── */

.itqan-landing-bar {
    background-color: #FFFFFF;
    border-bottom: 1px solid #C2C5AA;
}

.itqan-landing-bar-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.itqan-landing-brand { text-decoration: none; display: flex; align-items: baseline; gap: 10px; }
.itqan-landing-brand-name { font-size: 1.25rem; font-weight: 700; color: #0F4C45; }
.itqan-landing-brand-tag { font-size: 14px; color: #5A5A4A; }

.itqan-landing-signin {
    font-size: 15px;
    font-weight: 600;
    color: #0F4C45;
    text-decoration: none;
    padding: 8px 16px;
    border: 1px solid #0F4C45;
    border-radius: 8px;
    white-space: nowrap;
}

.itqan-landing-signin:hover { background-color: #E6EFEE; }

/* ── الواجهة ── */

.itqan-landing-hero { padding: 64px 0 56px; background-color: #FAF5EB; }

.itqan-landing-promise {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.35;
    color: #0F4C45;
    margin: 0 0 16px;
}

.itqan-landing-lead {
    font-size: 19px;
    font-weight: 600;
    line-height: 1.8;
    margin: 0;
    max-width: 68ch;
    color: #1A1A1A;
}

.itqan-landing-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.itqan-landing-cta .itqan-button-primary { width: auto; display: inline-block; }

.itqan-landing-secondary {
    font-size: 15px;
    font-weight: 600;
    color: #0F4C45;
    text-decoration: none;
    padding: 12px 16px;
    border: 1px solid #0F4C45;
    border-radius: 8px;
}

.itqan-landing-secondary:hover { background-color: #E6EFEE; }

/* ── الأقسام ── */

.itqan-landing-section { padding: 56px 0; }
.itqan-landing-band { padding: 56px 0; background-color: #FAF5EB; }

.itqan-landing-h2 {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.45;
    margin: 0 0 20px;
    color: #0F4C45;
}

.itqan-landing-h3 { font-size: 1.05rem; font-weight: 600; line-height: 1.45; margin: 0 0 8px; }
.itqan-landing-body { font-size: 15px; line-height: 1.7; margin: 0 0 12px; max-width: 75ch; }
.itqan-landing-emphasis { font-weight: 600; }

.itqan-landing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.itqan-landing-card {
    background-color: #FFFFFF;
    border: 1px solid #C2C5AA;
    border-radius: 8px;
    padding: 20px;
}

.itqan-landing-card .itqan-landing-body { margin-bottom: 0; }

.itqan-landing-points { margin: 0; padding-inline-start: 22px; }
.itqan-landing-points li { font-size: 15px; line-height: 1.8; margin-bottom: 10px; max-width: 75ch; }

.itqan-landing-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.itqan-landing-plan {
    background-color: #FFFFFF;
    border: 1px solid #C2C5AA;
    border-radius: 8px;
    padding: 18px;
}

.itqan-landing-plan-limit { font-size: 14px; line-height: 1.7; color: #5A5A4A; margin: 0; }

/* ── التذييل ── */

.itqan-landing-footer {
    margin-top: auto;
    padding: 28px 20px;
    border-top: 1px solid #C2C5AA;
    background-color: #FFFFFF;
    text-align: center;
}

.itqan-landing-vendor { font-size: 14px; color: #5A5A4A; margin: 0 0 10px; }
.itqan-landing-links { display: flex; gap: 8px; justify-content: center; font-size: 14px; }
.itqan-landing-links a { color: #0F4C45; font-weight: 500; }

@media (max-width: 640px) {
    .itqan-landing-hero { padding: 40px 0 36px; }
    .itqan-landing-promise { font-size: 1.8rem; }

    /* والترتيب يبقى على الضيق: التفصيل أصغر من الوعد لا أكبر منه */
    .itqan-landing-lead { font-size: 16px; }
    .itqan-landing-scope { font-size: 15px; }
    .itqan-landing-section, .itqan-landing-band { padding: 40px 0; }
    .itqan-landing-brand-tag { display: none; }
}

/* ══════════════ واجهة الموقع: أقسام متباينة ══════════════
   الصفحة تُقرأ فصولًا لا لوحًا واحدًا: فاتحٌ ثمّ بيجٌ ثمّ داكن. والداكن
   هنا خلفيةُ قسمٍ في صفحةٍ تعريفية، لا وضعًا داكنًا للتطبيق: لا مبدّل
   ولا تفضيل نظام، والألوان مثبّتة ومفحوصة التباين.
   ولونٌ مرافق واحد (#C2622B) للتمييز، وهو الثانوي في ثيم المنتج. */

.itqan-landing-dark {
    background-color: #0B3B36;
    color: #F3F7F6;
}

.itqan-landing-dark .itqan-landing-h2 { color: #FFFFFF; }
.itqan-landing-dark .itqan-landing-body,
.itqan-landing-dark .itqan-landing-points li { color: #DDE8E6; }

/* ── الواجهة: وعدٌ ولوحة جنبًا إلى جنب ── */

.itqan-landing-hero.itqan-landing-dark .itqan-landing-promise { color: #FFFFFF; }
.itqan-landing-hero.itqan-landing-dark .itqan-landing-lead { color: #E6EFEE; }

.itqan-landing-note {
    margin: 14px 0 0;
    font-size: 15px;
    font-weight: 600;
    color: #F0B27A;
}

/* تفصيل الوعد: أخفّ وزنًا وأهدأ لونًا من السطر الذي فوقه، فيُقرأ تابعًا له */
.itqan-landing-scope {
    margin-top: 12px;
    font-size: 16px;
    font-weight: 400;
}

.itqan-landing-hero.itqan-landing-dark .itqan-landing-scope { color: #C9DAD7; }

/* وما يترتّب على الموقع: ليس نداءً ثانيًا، فلا يأخذ لون النداء ولا وزنه */
.itqan-landing-note-soft {
    margin-top: 8px;
    font-weight: 400;
    color: #DDE8E6;
}

.itqan-landing-cta-main,
.itqan-landing-cta-ghost {
    display: inline-block;
    font-family: 'Cairo', sans-serif;
    font-size: 15px;
    font-weight: 700;
    padding: 13px 22px;
    border-radius: 8px;
    text-decoration: none;
}

/*
    **والزرّان المتجاوران بعرضٍ واحد.** عرضٌ يتبع طول النصّ يجعل «كيف يعمل»
    نصفَ جاره، فيُقرأ الثاني تابعًا لا خيارًا ثانيًا. والحدُّ أدنى لا ثابت:
    نصٌّ أطول يمدّه ولا يُقصّ، وعلى شاشة 375px يبقى الزرّ داخلها.
*/
.itqan-landing-cta > .itqan-landing-cta-main,
.itqan-landing-cta > .itqan-landing-cta-ghost {
    min-width: 208px;
    text-align: center;
}

.itqan-landing-cta-main {
    background-color: #C2622B;
    border: 1px solid #C2622B;
    color: #FFFFFF;
}

.itqan-landing-cta-main:hover { background-color: #A64E1F; border-color: #A64E1F; }

.itqan-landing-cta-ghost {
    background-color: transparent;
    border: 1px solid #8FB5B0;
    color: #FFFFFF;
}

.itqan-landing-cta-ghost:hover { background-color: rgba(255, 255, 255, 0.10); }

/* القسم الفاتح يستعمل الزرّين بألوان الثيم لا بألوان الداكن */
.itqan-landing-contact .itqan-landing-cta-ghost { border-color: #0F4C45; color: #0F4C45; }
.itqan-landing-contact .itqan-landing-cta-ghost:hover { background-color: #E6EFEE; }

/* ── جواب المشكلة: سطرٌ يُقرأ قبل غيره ── */

.itqan-landing-answer {
    margin: 20px 0 0;
    padding: 16px 18px;
    background-color: #FFFFFF;
    border: 1px solid #0F4C45;
    border-inline-start: 6px solid #C2622B;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.8;
    max-width: 75ch;
}

/* ── أيقونات البطاقات ── */

.itqan-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 12px;
    border-radius: 10px;
    background-color: #E6EFEE;
    color: #0F4C45;
}

.itqan-landing-card:nth-child(3n+2) .itqan-card-icon {
    background-color: #F5E9E2;
    color: #A64E1F;
}

/* ── الباقات في قسمٍ فاتح ── */

.itqan-landing-plan { border-top: 4px solid #C2622B; }


/* ══════════════ تصحيحات الواجهة بعد المراجعة ══════════════ */

/* الاسم في الشريط كان أصغر من أن يُرى: هو أول ما تقع عليه العين */
.itqan-landing-brand-name { font-size: 1.9rem; font-weight: 700; }
.itqan-landing-brand-tag { font-size: 15px; }

/* زرّ «كيف يعمل» بلونٍ مخالف لا شفافًا بحدّ:
   اثنان متجاوران بلا تمييز يجعلان القارئ يتردّد أيّهما يضغط */
.itqan-landing-cta-ghost {
    background-color: #F3F7F6;
    border-color: #F3F7F6;
    color: #0B3B36;
}

.itqan-landing-cta-ghost:hover { background-color: #FFFFFF; border-color: #FFFFFF; }

/* ── قسم «لماذا إتقان» ── */

/* بنودٌ فردية العدد في شبكة عمودين: الأخير يملأ السطر بدل أن يترك ثقبًا
   بجانبه يُقرأ نقصًا */
.itqan-landing-why > .itqan-why-item:last-child:nth-child(odd) { grid-column: 1 / -1; }

.itqan-landing-why {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 22px;
}

/* حدٌّ نحاسيّ على جانب البدء: يفصل الفقرات الطويلة بلا صندوقٍ ثقيل */
.itqan-why-item {
    padding: 2px 18px 2px 0;
    border-inline-start: 4px solid #C2622B;
    padding-inline-start: 18px;
}

.itqan-why-item .itqan-landing-h3 { color: #0F4C45; margin-bottom: 10px; }
.itqan-why-item .itqan-landing-body { margin-bottom: 0; max-width: 68ch; }

/* ══════════════ نافذة اختيار اللون ══════════════
   **كانت تُقصّ من جانبها.** تُفتح معلَّقةً بوسط الحقل، والحقل عرضُه 220
   والنافذة أعرض منه، فيخرج نصفها خارج الشاشة على النوافذ الضيّقة. فصارت
   تُعلَّق ببداية الحقل (Origin.BottomRight في اتجاهٍ من اليمين)، ولها حدٌّ
   أعلى للعرض فلا تتجاوز الشاشة. */

.mud-picker-color-popover, .mud-popover .mud-picker-content {
    max-width: calc(100vw - 32px);
    overflow: visible;
}

/* والمنتقي نفسه لا يتجاوز عرض الشاشة مهما ضاقت */
.mud-picker-color-content, .mud-picker-color-view {
    max-width: calc(100vw - 32px);
}

/* ── قسم المشكلة: عمودان يملآن العرض ──
   والحدّ على السطر باقٍ داخل كلّ عمود: الملء بالأعمدة لا بمدّ السطر. */

.itqan-landing-problem {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 8px 40px;
}

.itqan-landing-problem .itqan-landing-body { margin-bottom: 0; max-width: 62ch; }

.itqan-landing-answer { max-width: none; }

/* الواجهة بعد نزع اللوحة: النصّ لا يعبر الشاشة كلَّها */
.itqan-landing-hero .itqan-landing-lead { max-width: 72ch; }