:root {
    /* ===== الهوية البصرية الرسمية لجمعية الإحسان للخدمات الاجتماعية ===== */
    /* الألوان أدناه مستخرجة حرفيًا من ملف الهوية (لوحة الألوان الرسمية) */
    --brand-primary: #f18927;
    --brand-primary-dark: #cf6028;
    --brand-secondary: #91877d;
    --brand-accent: #575650;
    --brand-background: #f9f4ee;
    --brand-text: #575650;
    --brand-muted: #afa5a2;

    /* مشتقة من ألوان الهوية أعلاه لأغراض واجهة الاستخدام فقط (ليست ألوانًا رسمية جديدة) */
    --brand-primary-light: #fbe1c8;
    --brand-surface: #ffffff;
    --brand-border: #d9d2ca;

    /* ألوان وظيفية عامة (خطأ/نجاح/تنبيه) - لا توجد ضمن ملف الهوية، فاعتُمدت قيم نظام قياسية */
    --brand-danger: #b42318;
    --brand-danger-bg: #fef2f2;
    --brand-danger-border: #fecaca;
    --brand-success: #15803d;
    --brand-warning: #b45309;

    /* الخطوط الرسمية: 29LT Kaff للعناوين، 29LT Azer للنصوص (كما في دليل الهوية) - كلاهما يدعم العربية واللاتينية */
    --brand-font-heading: Ehsan, "Segoe UI", Tahoma, Arial, sans-serif;
    --brand-font-ar: Ehsan, "Segoe UI", Tahoma, Arial, sans-serif;
    --brand-font-en: Ehsan, "Segoe UI", Tahoma, Arial, sans-serif;

    --radius: 12px;
}

@font-face {
    font-family: Ehsan;
    src: url("../fonts/EHSAN2_0.TTF");
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: Ehsan;
    src: url("../fonts/EHSAN3_0.TTF");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: Ehsan;
    src: url("../fonts/EHSAN1.TTF");
    font-weight: 600;
    font-display: swap;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    background: var(--brand-background);
    color: var(--brand-text);
    font-family: var(--brand-font-ar);
}

body {
    direction: rtl;
}

/* جدول kerning بملفَّي EHSAN3_0/EHSAN1 (وزن 400/600) معطوب: يُدخل فراغًا داخل أرقام عشرية وإيميلات ("10 0.000"). */
body,
input,
textarea,
select,
button {
    font-kerning: none;
    font-feature-settings: "kern" 0;
}

a {
    color: var(--brand-primary);
}

.site-header {
    background: var(--brand-surface);
    border-bottom: 1px solid var(--brand-border);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.site-header__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--brand-font-heading);
    font-weight: 500;
    font-size: 18px;
    color: var(--brand-text);
}

.site-header__logo {
    display: block;
    height: 32px;
    width: auto;
}

.site-header__user {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.site-header__user-name {
    font-weight: 700;
}

.site-header__user-role {
    color: var(--brand-muted);
    background: var(--brand-background);
    border: 1px solid var(--brand-border);
    border-radius: 999px;
    padding: 3px 10px;
}

.site-header__profile-link {
    color: var(--brand-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--brand-border);
}

.site-header__profile-link:hover {
    background: var(--brand-background);
}

.site-header__logout-form {
    margin: 0;
}

/* لون مقصود محليًا بـ#44423e (لا var(--brand-text)) -- رمادي محايد أغمق قليلًا من
   --brand-text المشترك، لتمييزه بوضوح تام عن عائلة البرتقالي (.btn-secondary/.btn-warning
   أدناه) دون المساس بأي استخدام آخر لـ--brand-text بامتداد الملف. */
.btn-logout {
    border: 1px solid var(--brand-border);
    background: var(--brand-surface);
    color: #44423e;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
}

.btn-logout:hover {
    background: var(--brand-background);
}

.btn-logout::before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-inline-end: 6px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2344423e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H5a1 1 0 00-1 1v12a1 1 0 001 1h3'/%3E%3Cpath d='M9.5 10h7.5m0 0l-3-3m3 3l-3 3'/%3E%3C/svg%3E");
}

.site-main {
    max-width: 960px;
    margin: 0 auto;
    padding: 32px 20px 60px;
}

.hero {
    text-align: center;
    margin-bottom: 24px;
}

.hero h1 {
    margin: 0 0 8px;
    font-size: 26px;
    font-family: var(--brand-font-heading);
    font-weight: 500;
}

.hero__status {
    color: var(--brand-primary);
    font-weight: 700;
    margin: 0;
}

.notice {
    background: var(--brand-background);
    border: 1px solid var(--brand-border);
    color: var(--brand-text);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 28px;
    font-size: 14px;
    line-height: 1.7;
}

.modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
}

.module-card {
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius);
    padding: 20px 14px;
    text-align: center;
    font-weight: 600;
    color: var(--brand-text);
}

.health-link {
    text-align: center;
    margin-top: 32px;
    font-weight: 700;
}

.health-link a {
    text-decoration: none;
}

.health-link a:hover {
    text-decoration: underline;
}

.error-page {
    text-align: center;
    padding: 60px 20px;
}

.error-page h1 {
    font-size: 64px;
    margin: 0 0 12px;
    font-family: var(--brand-font-heading);
    font-weight: 500;
    color: var(--brand-primary);
}

.site-footer {
    text-align: center;
    color: var(--brand-muted);
    font-size: 13px;
    padding: 20px;
    border-top: 1px solid var(--brand-border);
}

.auth-body {
    display: flex;
    min-height: 100%;
}

.auth-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.login-page {
    width: 100%;
    max-width: 380px;
}

.login-card {
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius);
    padding: 28px 24px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
}

.login-card__logo {
    display: block;
    height: 72px;
    width: auto;
    margin: 0 auto 16px;
}

.login-card__brand {
    margin: 0 0 4px;
    font-size: 16px;
    font-family: var(--brand-font-heading);
    font-weight: 500;
    color: var(--brand-secondary);
    text-align: center;
}

.login-card__title {
    margin: 0 0 20px;
    font-size: 22px;
    font-family: var(--brand-font-heading);
    font-weight: 500;
    color: var(--brand-text);
    text-align: center;
}

.login-error {
    background: var(--brand-danger-bg);
    border: 1px solid var(--brand-danger-border);
    color: var(--brand-danger);
    border-radius: var(--radius);
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 13px;
}

.login-form .field {
    margin-bottom: 16px;
}

.login-form label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
}

.login-form input[type="email"],
.login-form input[type="password"],
.login-form input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--brand-border);
    border-radius: 8px;
    font-size: 14px;
    background: var(--brand-surface);
    color: var(--brand-text);
}

.login-form input:focus {
    outline: 2px solid var(--brand-primary);
    outline-offset: 1px;
}

.password-field {
    display: flex;
    gap: 8px;
}

.password-field input {
    flex: 1;
}

.password-toggle {
    border: 1px solid var(--brand-border);
    background: var(--brand-surface);
    border-radius: 8px;
    padding: 0 12px;
    font-size: 12px;
    white-space: nowrap;
}

.password-toggle:hover {
    background: var(--brand-background);
}

.btn-primary {
    background: var(--brand-primary);
    color: #fff;
    border: 1px solid var(--brand-primary);
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 700;
    width: 100%;
}

.btn-primary:hover {
    background: var(--brand-primary-dark);
    border-color: var(--brand-primary-dark);
    opacity: 1;
}

/* ===================== تسجيل الدخول -- تخطيط منقسم بملء الشاشة (2026-09-20) =====================
   خاص حصرًا بـcs/login.blade.php وcs/portal/login.blade.php -- classes جديدة كليًا (auth-split*،
   auth-form*)، صفر تعديل على .login-page/.login-card/.login-form القديمة (لا تزال تُستخدَم حرفيًا
   بصفحات OTP وتغيير كلمة المرور، خارج نطاق هذا التغيير). .auth-main--split مُفعَّلة فقط بصفحتَي
   الدخول عبر @section('mainClass', ...) بنفس آلية @yield('mainClass') الموجودة أصلاً بالتخطيطات
   الأخرى -- الافتراضي (.auth-main بلا هذا الصنف) يبقى كما هو تمامًا لبقية صفحات هذا التخطيط. */
.auth-main--split {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
}

.auth-split {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

.auth-split__form {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-surface);
    padding: 40px 24px;
}

.auth-split__form-inner {
    width: 100%;
    max-width: 380px;
}

.auth-split__logo {
    display: block;
    height: 52px;
    width: auto;
    margin: 0 0 28px;
}

.auth-split__heading {
    margin: 0 0 8px;
    font-size: 26px;
    font-weight: 700;
    font-family: var(--brand-font-heading);
    color: var(--brand-text);
}

.auth-split__subheading {
    margin: 0 0 28px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--brand-muted);
}

.auth-form__field {
    margin-bottom: 22px;
}

.auth-form__field label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-text);
}

.auth-form__field input[type="text"],
.auth-form__field input[type="email"],
.auth-form__field input[type="password"] {
    width: 100%;
    border: none;
    border-bottom: 2px solid var(--brand-border);
    border-radius: 0;
    background: transparent;
    padding: 8px 2px;
    font-size: 15px;
    color: var(--brand-text);
    transition: border-color 160ms ease;
}

.auth-form__field input:focus {
    outline: none;
    border-bottom-color: var(--brand-primary);
}

.auth-form__field .password-field {
    border-bottom: 2px solid var(--brand-border);
    transition: border-color 160ms ease;
}

.auth-form__field .password-field:focus-within {
    border-bottom-color: var(--brand-primary);
}

.auth-form__field .password-field input {
    border-bottom: none;
}

.auth-form__field .password-toggle {
    border: none;
    background: transparent;
    color: var(--brand-muted);
}

.auth-form__submit {
    margin-top: 8px;
    border-radius: var(--radius);
}

.auth-whatsapp-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 16px;
    border-radius: var(--radius);
    background: var(--brand-primary-light);
    color: var(--brand-primary-dark);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: box-shadow 160ms ease;
}

.auth-whatsapp-btn:hover {
    box-shadow: inset 0 0 0 1px var(--brand-primary);
}

.auth-whatsapp-btn__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.auth-split__footnote {
    margin: 28px 0 0;
    font-size: 12px;
    color: var(--brand-muted);
    text-align: center;
    opacity: 0.8;
}

.auth-split__panel {
    position: relative;
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-primary);
    overflow: hidden;
    padding: 40px;
}

.auth-split__blob {
    position: absolute;
    display: block;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.09);
}

.auth-split__blob--one {
    width: 340px;
    height: 340px;
    top: -110px;
    inset-inline-end: -110px;
}

.auth-split__blob--two {
    width: 260px;
    height: 260px;
    bottom: -90px;
    inset-inline-start: -90px;
    border-color: rgba(255, 255, 255, 0.07);
}

.auth-split__panel-content {
    position: relative;
    z-index: 1;
    max-width: 380px;
    text-align: center;
    color: #fff;
}

.auth-split__panel-content h2 {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    font-family: var(--brand-font-heading);
}

.auth-split__divider {
    display: block;
    width: 48px;
    height: 3px;
    margin: 18px auto;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 999px;
}

.auth-split__panel-content p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 900px) {
    .auth-split {
        flex-direction: column;
        min-height: auto;
    }

    .auth-split__panel {
        min-height: 180px;
        padding: 32px 20px;
    }

    .auth-split__form {
        padding: 40px 20px;
    }
}

@media (max-width: 600px) {
    .site-main {
        padding: 20px 14px 40px;
    }

    .hero h1 {
        font-size: 22px;
    }

    .site-header {
        padding: 14px 16px;
    }
}

/* ============================================================
   هيكل النظام الرئيسي - Sidebar / Topbar / لوحة المعلومات
   ============================================================ */

:root {
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 76px;
}

.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    min-height: 100vh;
    transition: grid-template-columns 0.2s ease;
}

.app-shell--guest {
    grid-template-columns: 1fr;
}

.app-shell--collapsed {
    grid-template-columns: var(--sidebar-collapsed-width) 1fr;
}

.sidebar {
    background: var(--brand-surface);
    border-inline-end: 1px solid var(--brand-border);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-y: auto;
}

.sidebar-header {
    padding: 18px 16px;
    border-bottom: 1px solid var(--brand-border);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
}

.sidebar-header__logo {
    height: 34px;
    width: auto;
    max-width: 100%;
}

.app-shell--collapsed .sidebar-header__logo {
    height: 26px;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 10px;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--brand-text);
    font-family: inherit;
    font-size: 14px;
    text-decoration: none;
    text-align: right;
    cursor: pointer;
    width: 100%;
}

a.sidebar-item:hover {
    background: var(--brand-background);
}

.sidebar-item__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.sidebar-item__label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-item--active {
    background: var(--brand-primary-light);
    color: var(--brand-primary-dark);
    font-weight: 700;
}

.sidebar-item--disabled {
    color: var(--brand-muted);
    cursor: not-allowed;
}

.sidebar-item--disabled:hover {
    background: transparent;
}

.sidebar-badge {
    font-size: 11px;
    background: var(--brand-background);
    color: var(--brand-muted);
    border: 1px solid var(--brand-border);
    border-radius: 999px;
    padding: 2px 8px;
    flex-shrink: 0;
}

.app-shell--collapsed .sidebar-item__label,
.app-shell--collapsed .sidebar-badge {
    display: none;
}

.app-shell--collapsed .sidebar-item {
    justify-content: center;
}

/* ===== هوية حساب منصة دعم الجمعيات -- بالشريط العلوي topbar__user، مثل
   القائمة الداخلية بالضبط (layouts/cs.blade.php)، لا بالقائمة الجانبية؛ القائمة
   الجانبية هنا للتنقل فقط. الاسم يحتفظ باسم الصنف sidebar-portal-user__name رغم
   انتقال مكانه، تفاديًا لأي تغيير غير ضروري بامتداد CSS مشترك بين القسمين. ===== */
.sidebar-portal-user__name {
    font-size: 14px;
    font-weight: 700;
    color: var(--brand-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar__user form {
    margin: 0;
}

.main-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
}

.topbar {
    background: var(--brand-surface);
    border-bottom: 1px solid var(--brand-border);
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.topbar__toggle {
    border: 1px solid var(--brand-border);
    background: var(--brand-surface);
    border-radius: 8px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-text);
    cursor: pointer;
    flex-shrink: 0;
}

.topbar__toggle:hover {
    background: var(--brand-background);
}

.topbar__toggle svg {
    width: 20px;
    height: 20px;
}

.topbar__brand {
    display: flex;
    align-items: center;
}

.topbar__logo {
    height: 28px;
    width: auto;
}

.topbar__title {
    font-family: var(--brand-font-heading);
    font-weight: 500;
    font-size: 18px;
    margin: 0;
    flex: 1;
    color: var(--brand-text);
}

.topbar__user {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    flex-shrink: 0;
}

.main-content {
    flex: 1;
    padding: 24px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

/* صفحات بجداول كثيفة الأعمدة (مثل قائمة الجمعيات) تحتاج استغلال عرض الشاشة
   كاملًا بدل حدّ 1200px العام - الحاوية تمتد لعرض عمود المحتوى بالكامل
   (شبكة .app-shell أصلًا تحجز عرض الشريط الجانبي)، ويبقى padding العادي
   هامشًا بصريًا كافيًا يمينًا ويسارًا. */
.main-content--wide {
    max-width: none;
}

.mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(30, 26, 20, 0.45);
    z-index: 40;
}

.mobile-overlay--visible {
    display: block;
}

/* ===================== لوحة المعلومات (إعادة تصميم 2026-09-20) ===================== */

/* شريط الترحيب: تدرّج برتقالي بمتغيّرَي العلامة الموجودَين فعليًا (لا لون جديد)، عريض بعرض main-content--wide
   كاملًا. ثلاث مناطق: صندوق التاريخ، نص الترحيب، بطاقة المستخدم -- تلتف بحرية على شاشة ضيقة. */
.dashboard-hero {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
    border-radius: var(--radius);
    padding: 20px 24px;
    margin-bottom: 20px;
    color: #fff;
}

.dashboard-hero__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 84px;
    padding: 10px 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.16);
}

.dashboard-hero__date-weekday {
    font-size: 12px;
    font-weight: 600;
}

.dashboard-hero__date-day {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
}

.dashboard-hero__date-month {
    font-size: 11px;
    opacity: 0.9;
}

.dashboard-hero__text {
    flex: 1;
    min-width: 200px;
}

.dashboard-hero__text h2 {
    font-family: var(--brand-font-heading);
    font-weight: 500;
    margin: 0 0 4px;
    font-size: 22px;
    color: #fff;
}

.dashboard-hero__text p {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
}

.dashboard-hero__user {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}

.dashboard-hero__user-name {
    font-weight: 700;
}

.dashboard-hero__user-role {
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
}

/* 4 بطاقات KPI -- كل بطاقة <a> حقيقي كامل، نفس لغة .stat-card السابقة (أُزيلت) بحدّ hover إضافي
   بما أنها أصبحت روابط فعلية الآن. */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.kpi-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius);
    padding: 18px;
    color: inherit;
    text-decoration: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.kpi-card:hover {
    border-color: var(--brand-primary);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.kpi-card__icon {
    width: 26px;
    height: 26px;
    color: var(--brand-primary);
}

.kpi-card__value {
    font-size: 26px;
    font-weight: 700;
    color: var(--brand-text);
    line-height: 1.2;
}

.kpi-card__label {
    font-size: 13px;
    color: var(--brand-muted);
}

/* مؤشر مُفعَّل (نطاق القائمة الحالي) -- نفس نمط .nav-card--active بالضبط. */
.kpi-card--active {
    border-width: 2px;
    border-color: var(--brand-primary);
}

.kpi-card--active .kpi-card__icon {
    color: var(--brand-primary-dark);
}

.kpi-card--active .kpi-card__value {
    color: var(--brand-primary-dark);
}

/* 3 بطاقات رسوم بيانية -- بلا Chart.js أو أي مكتبة خارجية: دونات SVG محسوب بالخادم (stroke-dasharray)
   وأعمدة أفقية بـHTML/CSS خالص (عرض inline محسوب بالخادم) -- صفر جافاسكربت، متوافق تمامًا مع
   script-src 'self' لأنه لا يوجد سكربت من الأساس. */
.dashboard-charts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.chart-card {
    display: flex;
    flex-direction: column;
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius);
    padding: 18px;
    color: inherit;
    text-decoration: none;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.chart-card:hover {
    border-color: var(--brand-primary);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.chart-card__title {
    font-family: var(--brand-font-heading);
    font-weight: 500;
    font-size: 15px;
    margin: 0 0 14px;
    color: var(--brand-text);
}

.donut-chart {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto 14px;
}

.donut-chart__svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.donut-chart__track {
    fill: none;
    stroke: var(--brand-background);
    stroke-width: 18;
}

.donut-chart__segment {
    fill: none;
    stroke-width: 18;
    stroke-linecap: butt;
}

.donut-chart__segment--complete { stroke: var(--brand-success); }
.donut-chart__segment--partial { stroke: var(--brand-primary); }
.donut-chart__segment--low { stroke: var(--brand-danger); }

.donut-chart__center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.donut-chart__center-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--brand-text);
    line-height: 1.2;
}

.donut-chart__center-label {
    font-size: 12px;
    color: var(--brand-muted);
}

.chart-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: var(--brand-text);
}

.chart-legend__dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-inline-end: 6px;
}

.chart-legend__dot--complete { background: var(--brand-success); }
.chart-legend__dot--partial { background: var(--brand-primary); }
.chart-legend__dot--low { background: var(--brand-danger); }

.bar-chart {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bar-chart__row {
    display: grid;
    grid-template-columns: 1fr 2fr auto;
    align-items: center;
    gap: 8px;
}

.bar-chart__label {
    font-size: 12px;
    color: var(--brand-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bar-chart__track {
    display: block;
    height: 10px;
    border-radius: 999px;
    background: var(--brand-background);
    overflow: hidden;
}

.bar-chart__fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--brand-primary);
}

.bar-chart__value {
    font-size: 12px;
    font-weight: 700;
    color: var(--brand-text);
    min-width: 24px;
    text-align: left;
}

.dashboard-note {
    font-size: 13px;
    color: var(--brand-muted);
    margin: 4px 0 0;
}

@media (max-width: 1200px) {
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-charts {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .dashboard-hero {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-hero__user {
        align-items: flex-start;
    }

    .kpi-grid {
        grid-template-columns: 1fr;
    }
}

.dashboard-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 24px;
}

.dashboard-panel {
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius);
    padding: 20px;
}

.dashboard-panel--status {
    grid-column: 1 / -1;
}

.dashboard-panel__title {
    font-family: var(--brand-font-heading);
    font-weight: 500;
    font-size: 16px;
    margin: 0 0 14px;
    color: var(--brand-text);
}

.empty-state {
    color: var(--brand-muted);
    font-size: 14px;
    text-align: center;
    padding: 24px 0;
    margin: 0;
}

.dashboard-table-wrap {
    overflow-x: auto;
}

.dashboard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.dashboard-table th,
.dashboard-table td {
    text-align: right;
    padding: 8px 10px;
    border-bottom: 1px solid var(--brand-border);
    white-space: nowrap;
}

.dashboard-table th {
    color: var(--brand-muted);
    font-weight: 600;
}

.system-status-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

.system-status-list li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: var(--brand-muted);
}

.system-status-list__value {
    font-weight: 700;
    color: var(--brand-text);
    font-size: 14px;
}

/* ===================== استجابة الشاشات ===================== */

@media (max-width: 1024px) {
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-panels {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .app-shell,
    .app-shell--collapsed {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        width: min(300px, 85vw);
        min-height: 100vh;
        transform: translateX(100%);
        transition: transform 0.2s ease;
        z-index: 50;
        box-shadow: -8px 0 24px rgba(16, 24, 40, 0.12);
    }

    .sidebar--open {
        transform: translateX(0);
    }

    .app-shell--collapsed .sidebar-item__label,
    .app-shell--collapsed .sidebar-badge {
        display: inline;
    }

    .app-shell--collapsed .sidebar-item {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .main-content {
        padding: 16px;
    }

    .topbar {
        padding: 10px 14px;
    }

    .topbar__title {
        font-size: 16px;
    }

    /* الاسم والدور يدفعان الشريط خارج عرض الجوال (390px) -- يبقى الملف الشخصي وتسجيل الخروج فقط. */
    .topbar__user .site-header__user-name,
    .topbar__user .site-header__user-role {
        display: none;
    }
}

/* ============================================================
   وحدة الجمعيات - القائمة / النموذج / التفاصيل
   ============================================================ */

.btn-primary--auto {
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* تباين نص/أيقونة أزرار الإجراء الرئيسية المحدَّدة فقط (إضافة جمعية/عملية دعم/
   مستخدم، إنشاء محادثة) - .page-actions a أدناه (لِلروابط الثانوية مثل "إلغاء")
   لها تخصيصية أعلى من .btn-primary فتفرض لون الرابط البرتقالي على نص هذه
   الأزرار فيصبح برتقاليًا على خلفية برتقالية. فئة إضافية مخصوصة بدلًا من تعديل
   .page-actions a أو .btn-primary نفسها لتفادي التأثير على أي رابط أو زر آخر. */
.btn-primary--contrast:link,
.btn-primary--contrast:visited,
.btn-primary--contrast:hover,
.btn-primary--contrast:focus-visible,
.btn-primary--contrast:active {
    color: #373632;
    text-decoration: none;
}

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.page-header h2 {
    font-family: var(--brand-font-heading);
    font-weight: 500;
    font-size: 20px;
    margin: 0 0 4px;
    color: var(--brand-text);
}

.page-header p {
    color: var(--brand-muted);
    margin: 0;
    font-size: 14px;
}

.page-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.page-actions a {
    color: var(--brand-primary);
    text-decoration: none;
    font-size: 14px;
}

.page-actions a:hover {
    text-decoration: underline;
}

.filters-bar {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 16px;
}

.filters-bar .form-group {
    margin-bottom: 0;
    min-width: 180px;
}

.filters-bar .form-group--actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.filters-bar .form-group--actions a {
    color: var(--brand-primary);
    font-size: 13px;
    text-decoration: none;
}

.filters-bar .form-group--actions a:hover {
    text-decoration: underline;
}

.results-count {
    color: var(--brand-muted);
    font-size: 13px;
    margin: 0 0 12px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.coordinates-fields {
    grid-template-columns: repeat(2, 1fr);
}

/* قسم النموذج الموحَّد - رأس برتقالي ثابت ثم محتوى بخلفية عادية. الرأس يستخدم
   --brand-primary-dark (الأغمق بين درجتَي البرتقالي المتاحتين، لا درجة جديدة)
   مع نص أبيض لأفضل تباين ممكن ضمن ألوان الهوية الحالية. overflow:hidden يقصّ
   زوايا الرأس المربعة على استدارة القسم نفسه بلا حاجة لتكرار border-radius.
   مستخدَم في جميع نماذج الإضافة/التعديل (جمعيات، عمليات دعم، أنواع دعم،
   مستخدمون، إدارة، ملف شخصي، حذف نهائي) كمكوّن واحد مشترك بدلًا من تصميم
   مختلف لكل صفحة. */
.form-section {
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius);
    margin: 0 0 20px;
    overflow: hidden;
}

.form-section__header {
    background: var(--brand-primary-dark);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.form-section__title {
    font-family: var(--brand-font-heading);
    font-weight: 500;
    font-size: 15px;
    color: #fff;
    margin: 0;
}

/* زر قفل/فتح قسم بيانات مفرد، داخل رأس القسم نفسه (شاشة تعديل الجمعية) -- مصغَّر
   عمدًا عن .btn-secondary العادي لأنه يجاور عنوان القسم لا يقف بمفرده. */
.section-lock-toggle {
    flex: none;
    background: var(--brand-surface);
    color: var(--brand-primary-dark);
    border: 1px solid var(--brand-surface);
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.section-lock-toggle:hover {
    background: var(--brand-primary-light);
}

.form-subsection + .form-subsection {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--brand-border);
}

.form-section__body {
    padding: 18px 20px;
}

.form-note {
    color: var(--brand-muted);
    font-size: 13px;
    margin: 0 0 14px;
}

.form-section__subtitle {
    font-family: var(--brand-font-heading);
    font-weight: 500;
    font-size: 14px;
    color: var(--brand-secondary);
    margin: 18px 0 10px;
    padding-top: 12px;
    border-top: 1px solid var(--brand-border);
}

.form-section__subtitle:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.form-group {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-text);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--brand-border);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    background: var(--brand-surface);
    color: var(--brand-text);
}

.form-group textarea {
    resize: vertical;
    min-height: 90px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: 2px solid var(--brand-primary);
    outline-offset: 1px;
}

.form-group--error input,
.form-group--error select,
.form-group--error textarea {
    border-color: var(--brand-danger);
}

/* حقل التاريخ الأصلي (input[type=date]) - قاعدة أساسية عامة على مستوى الصفحة
   كلها (لا فقط .form-group) لأن حقول التاريخ تظهر أيضًا في أشرطة فلاتر
   التقارير/سجل التدقيق. تبقى هذه القاعدة كخط أساس (fallback) يعمل حتى بلا
   JavaScript: تضبط اتجاه الحقل نفسه على LTR (منطق العرض الداخلي للمتصفح فقط،
   لا اتجاه الصفحة) مع إبقاء محاذاته بصريًا لليمين. لوحدها لا تكفي لإصلاح خلل
   انعكاس حروف Placeholder الفارغ - انظر الكتلة التالية (.date-input-wrap). */
input[type="date"] {
    direction: ltr;
    text-align: right;
}

/* الإصلاح الفعلي لانعكاس حروف تلميح التاريخ الفارغ ("سنة/شهر/يوم" تظهر
   "ةنس/رهش/موي"). السبب: نص Placeholder الداخلي لحقل input[type=date] يُرسَم
   عبر Shadow DOM خاص بمحرك Chromium/Edge (::-webkit-datetime-edit-*) ولا نص
   HTML فعلي يمكن التحكم باتجاهه؛ ضبط اتجاه الصندوق الخارجي (direction:ltr في
   القاعدة أعلاه) لا يصلح ترتيب الحروف الداخلي لهذا الـShadow DOM. الحل: عند
   إفراغ الحقل (تُضيف date-input.js في app.js صنف date-input-wrap--empty على
   الغلاف) نُخفي نص Placeholder الداخلي بالشفافية فقط (بلا display:none حتى لا
   تتأثر أيقونة التقويم أو إمكانية الاستخدام) ونعرض بدلًا منه نصًا حقيقيًا غير
   مقلوب أبدًا "سنة / شهر / يوم" فوقه مباشرة. عند اختيار تاريخ فعلي يُزال هذا
   الصنف تلقائيًا فيعود العرض الطبيعي للقيمة المختارة - لا تأثير على القيمة أو
   صيغة الإرسال YYYY-MM-DD ولا على منتقي التاريخ (Calendar Picker). */
.date-input-wrap {
    position: relative;
    display: block;
    width: 100%;
}

.date-input-wrap input[type="date"] {
    width: 100%;
}

.date-input-wrap--empty input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    color: transparent;
}

.date-input-placeholder {
    position: absolute;
    inset-inline-start: 28px;
    inset-inline-end: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--brand-muted);
    font-size: 14px;
    font-family: inherit;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    pointer-events: none;
    display: none;
}

.date-input-wrap--empty .date-input-placeholder {
    display: block;
}

.field-error {
    color: var(--brand-danger);
    font-size: 12px;
    margin: 0;
}

/* بطاقات اختيار نطاق استهداف الإعلان (عام/مخصَّص) - بديل بصري لأزرار Radio العادية بنفس فكرة
   .yn-toggle (زوجا أزرار نعم/لا بملفات البوابة) لكن كبطاقة أعرض تتّسع لعنوان ووصف. الـinput
   Radio يبقى حقيقيًا وفعّالًا بالـDOM (مخفيًا بصريًا فقط عبر position:absolute + opacity:0،
   لا display:none) حتى يبقى قابلاً للتركيز ولوحة المفاتيح ويستمر بإطلاق حدث change الذي تعتمد
   عليه cs-announcements.js لإظهار/إخفاء قائمة الجمعيات - لم يتغيّر أي شيء بذلك الملف. */
.scope-card-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.scope-card {
    display: block;
    position: relative;
    cursor: pointer;
}

.scope-card__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.scope-card__face {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--brand-border);
    border-radius: 10px;
    background: var(--brand-surface);
    transition: border-color 160ms ease, background-color 160ms ease;
}

.scope-card:hover .scope-card__face {
    border-color: var(--brand-secondary);
}

.scope-card__dot {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid var(--brand-border);
    background: var(--brand-surface);
    color: transparent;
    transition: border-color 160ms ease, background-color 160ms ease;
}

.scope-card__check {
    width: 12px;
    height: 12px;
}

.scope-card__title {
    display: block;
    font-weight: 600;
    color: var(--brand-text);
    transition: color 160ms ease;
}

.scope-card__desc {
    display: block;
    font-size: 13px;
    color: var(--brand-muted);
    margin-top: 2px;
}

.scope-card__input:checked + .scope-card__face {
    border-color: var(--brand-primary);
    background: var(--brand-primary-light);
}

.scope-card__input:checked + .scope-card__face .scope-card__dot {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    color: #fff;
}

.scope-card__input:checked + .scope-card__face .scope-card__title {
    color: var(--brand-primary-dark);
    font-weight: 700;
}

.scope-card__input:focus-visible + .scope-card__face {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

/* منتقي الجمعيات المستهدَفة (بحث + Checkboxes حقيقية) - بديل عن <select multiple> عند اختيار نطاق
   "مخصَّص" بشاشة إضافة إعلان. الـCheckbox هنا يبقى مرئيًا وأصليًا (بعكس بطاقات نطاق الاستهداف
   أعلاه) لأن تحديدًا متعددًا فعليًا يحتاج رؤية الحالة الكاملة للقائمة دومًا، لا رمز check يختفي فور
   الاختيار. :has() تحسين تدريجي لتلوين الصف كاملًا (نفس أسلوب .sd-choice:has(input:checked) و
   .rg-check:has(:checked) المستخدَم مسبقًا بأقسام أخرى) - بلا دعم :has() يبقى الصف أبيض عاديًا،
   والـCheckbox والتحديد الفعلي يعملان بلا أي تأثر. cs-announcements.js يتولى الفلترة/العدّاد فقط -
   لا شيء هنا يعتمد على JavaScript ليعمل التحديد نفسه. */
.association-picker__search {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--brand-border);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    background: var(--brand-surface);
    color: var(--brand-text);
    margin-bottom: 8px;
}

.association-picker__search:focus {
    outline: 2px solid var(--brand-primary);
    outline-offset: 1px;
}

.association-picker__count {
    font-size: 13px;
    color: var(--brand-muted);
    margin: 0 0 8px;
}

.association-picker__list {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--brand-border);
    border-radius: 10px;
    background: var(--brand-surface);
}

.association-picker__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--brand-border);
    cursor: pointer;
    transition: background-color 120ms ease;
}

.association-picker__row:last-child {
    border-bottom: none;
}

.association-picker__row:hover {
    background: var(--brand-background);
}

.association-picker__row:has(input:checked) {
    background: var(--brand-primary-light);
}

.association-picker__row input[type="checkbox"] {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    accent-color: var(--brand-primary);
}

.association-picker__name {
    flex: 1;
    font-size: 14px;
    color: var(--brand-text);
}

.association-picker__row input:checked ~ .association-picker__name {
    font-weight: 700;
    color: var(--brand-primary-dark);
}

.association-picker__number {
    font-size: 13px;
    color: var(--brand-muted);
    direction: ltr;
}

/* Combobox قابل للبحث - تحسين تدريجي لعنصر select عادي (انظر combobox.js).
   .combobox__native-select تُضاف فقط من JavaScript بعد نجاح التحسين، فيبقى
   الـselect الأصلي ظاهرًا وصالحًا للاستخدام كاملًا عند تعطيل JavaScript. */
.combobox {
    position: relative;
}

.combobox__native-select {
    display: none;
}

.combobox__listbox {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    margin: 0;
    padding: 4px;
    list-style: none;
    max-height: 240px;
    overflow-y: auto;
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.combobox__option {
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 14px;
    color: var(--brand-text);
    cursor: pointer;
}

.combobox__option:hover,
.combobox__option--active {
    background: var(--brand-background);
}

.combobox__option--selected {
    font-weight: 700;
    color: var(--brand-primary-dark);
}

.combobox__option--empty {
    color: var(--brand-muted);
    cursor: default;
}

.combobox__option--empty:hover {
    background: none;
}

.required-mark {
    color: var(--brand-danger);
}

.table-responsive {
    overflow-x: auto;
    border: 1px solid var(--brand-border);
    border-radius: var(--radius);
    background: var(--brand-surface);
    /* شريط تمرير أفقي مرئي دومًا (لا يعتمد على hover/auto-hide) - أنظمة مثل
       macOS تخفي شريط التمرير الافتراضي حتى التمرير الفعلي، فيصعب على مستخدم
       ماوس عادي اكتشافه؛ تخصيص ::-webkit-scrollbar يحوّله لشريط كلاسيكي ظاهر دومًا. */
    scrollbar-width: auto;
}

.table-responsive::-webkit-scrollbar {
    height: 14px;
}

.table-responsive::-webkit-scrollbar-track {
    background: var(--brand-background);
}

.table-responsive::-webkit-scrollbar-thumb {
    background: var(--brand-muted);
    border-radius: 7px;
    border: 3px solid var(--brand-background);
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: var(--brand-primary);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    white-space: nowrap;
}

.data-table th,
.data-table td {
    text-align: right;
    padding: 8px 10px;
    border-bottom: 1px solid var(--brand-border);
}

/* عمود تفاصيل سجل التدقيق - محتوى متغيّر الطول (metadata مختصرة)، يُسمح له
   بالالتفاف بخلاف white-space: nowrap الافتراضي في .data-table. */
.audit-log-details {
    white-space: normal;
    max-width: 320px;
    font-size: 12.5px;
    color: var(--brand-muted);
}

/* عمود "الكميات" في قائمة أنواع الدعم - محتوى متغيّر الطول (حقل واحد أو
   حقلان)، بعرض محدود بدلًا من white-space: nowrap الافتراضي في .data-table. */
.support-type-quantity-cell {
    white-space: normal;
    max-width: 220px;
    color: var(--brand-muted);
}

/* عمود "اكتمال البيانات" - النسبة الرئيسية أحيانًا تنكسر بمنتصف الرقم في
   متصفحات قليلة (رقم + علامة "٪" داخل سياق RTL). عزلها كصندوق inline-block
   بمنع نقاط الالتفاف الداخلية هذه؛ سطر "(مع الفروع: ..٪)" يبقى يلتف بشكل طبيعي
   عبر <br> الصريح في القالب. */
.completeness-cell {
    min-width: 90px;
}

.completeness-percent {
    display: inline-block;
    white-space: nowrap;
}

.data-table th {
    color: var(--brand-muted);
    font-weight: 600;
    background: var(--brand-background);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.data-table a {
    color: var(--brand-primary);
    text-decoration: none;
}

.data-table a:hover {
    text-decoration: underline;
}

/* شعار مصغّر لصفوف قوائم الجمعيات (index.php/branches.php) - مربع صغير ثابت
   الحجم فلا يوسّع الصف بلا داعٍ، Placeholder بصري بسيط عند عدم وجود شعار. */
.assoc-thumb {
    display: block;
    width: 32px;
    height: 32px;
    border: 1px solid var(--brand-border);
    border-radius: 6px;
    background: var(--brand-background);
    object-fit: contain;
}

.assoc-thumb--empty {
    box-sizing: border-box;
}

.status-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
}

.status-badge--active {
    background: #eaf6ee;
    color: var(--brand-success);
    border-color: #cfe9d7;
}

.status-badge--inactive {
    background: var(--brand-background);
    color: var(--brand-muted);
    border-color: var(--brand-border);
}

.status-badge--archived {
    background: #f3ecec;
    color: var(--brand-danger);
    border-color: #e6d5d5;
    margin-inline-start: 6px;
}

/* حالة عملية الدعم الثلاثية (allocated/ready_for_pickup/received) -- نفس بنية .status-badge أعلاه،
   بثلاث ألوان دلالية: محايد بانتظار التسليم، برتقالي بانتظار الاستلام، أخضر عند الاكتمال. */
.status-badge--allocated {
    background: var(--brand-background);
    color: var(--brand-muted);
    border-color: var(--brand-border);
}

.status-badge--ready {
    background: var(--brand-primary-light);
    color: var(--brand-warning);
    border-color: #f3d9b1;
}

.status-badge--received {
    background: #eaf6ee;
    color: var(--brand-success);
    border-color: #cfe9d7;
}

/* تنبيه يحتاج انتباه الموظف فورًا (اختلاف كمية نموذج 2 مثلًا) -- أحمر مصمت، أوضح من --archived. */
.status-badge--danger {
    background: var(--brand-danger);
    color: #fff;
    border-color: var(--brand-danger);
    margin-inline-start: 6px;
}

/* سؤال "تقييم من 1 إلى 5" باستبيان الرضا (البوابة) -- خمسة أزرار راديو كبيرة متساوية تملأ عرض الجوال. */
.rating-scale {
    border: 0;
    padding: 0;
    margin: 0;
}

.rating-scale legend {
    font-weight: 600;
    margin-bottom: 8px;
}

.rating-scale__options {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.rating-scale__option {
    position: relative;
    display: block;
    cursor: pointer;
}

.rating-scale__option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.rating-scale__option span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border: 1px solid var(--brand-border);
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    background: var(--brand-surface);
}

.rating-scale__option input:checked + span {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

.rating-scale__option input:focus-visible + span {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.rating-scale__hint {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--brand-muted);
    margin-top: 4px;
}

/* صف متأخر (أُرسل وتجاوز مهلته بلا إجابة) بقوائم المتابعة -- خلفية حمراء فاتحة وشريط أحمر بأول خلية. */
.data-table tr.row-overdue td {
    background: #fdecea;
}

.data-table tr.row-overdue td:first-child {
    border-inline-start: 4px solid var(--brand-danger);
    font-weight: 700;
}

.pagination {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.pagination a,
.pagination__current,
.pagination__disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: 8px;
    font-size: 13px;
    text-decoration: none;
    border: 1px solid var(--brand-border);
    color: var(--brand-text);
}

.pagination a:hover {
    background: var(--brand-background);
}

.pagination__current {
    background: var(--brand-primary);
    color: #fff;
    border-color: var(--brand-primary);
    font-weight: 700;
}

.pagination__disabled {
    color: var(--brand-muted);
    cursor: not-allowed;
    opacity: 0.6;
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.detail-section {
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin-bottom: 20px;
}

.association-logo-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 140px;
    margin-bottom: 16px;
    border: 1px solid var(--brand-border);
    border-radius: var(--radius);
    background: var(--brand-background);
    overflow: hidden;
}

.association-logo-preview__image {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.association-logo-preview--empty {
    color: var(--brand-muted);
    font-size: 12px;
}

.association-file-form {
    margin-top: 12px;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-item__label {
    font-size: 12px;
    color: var(--brand-muted);
}

.detail-item__value {
    font-size: 14px;
    color: var(--brand-text);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.detail-item__hijri {
    font-weight: 400;
    color: var(--brand-muted);
    font-size: 13px;
}

.detail-notes {
    white-space: pre-line;
    line-height: 1.8;
    color: var(--brand-text);
    margin: 0;
}

.flash-message {
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 14px;
}

.flash-message--success {
    background: #eaf6ee;
    border: 1px solid #cfe9d7;
    color: var(--brand-success);
}

@media (max-width: 900px) {
    .form-grid,
    .details-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .filters-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .filters-bar .form-group {
        min-width: 0;
    }

    .page-header {
        flex-direction: column;
    }
}

/* ============================================================
   تعديل الجمعية / إدارة المسؤولين / الأرشفة
   ============================================================ */

.tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--brand-border);
    margin-bottom: 16px;
}

.tab {
    display: inline-block;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.tab:hover {
    color: var(--brand-text);
}

.tab--active {
    color: var(--brand-primary-dark);
    border-bottom-color: var(--brand-primary);
}

.tab--disabled {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--brand-muted);
    cursor: not-allowed;
}

/* بطاقات التنقّل بين شاشات "الدعم" الثلاث (عمليات الدعم/أنواع الدعم/التوزيعات) -- بديل شريط .tabs
   أعلاه لهذا التنقّل تحديدًا (شريط نطاق القائمة الحالية/الأرشيف يبقى .tabs كما هو). نفس بنية
   .scope-card (بطاقات "نطاق الاستهداف" بالإعلانات) لكن روابط <a> حقيقية لا حقول راديو، وحالة نشطة
   عبر .nav-card--active بدل :checked. */
.page-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand-muted);
    text-decoration: none;
    margin-bottom: 10px;
}

.page-back-link:hover {
    color: var(--brand-text);
}

.page-back-link svg {
    width: 14px;
    height: 14px;
}

.nav-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.nav-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--brand-border);
    border-radius: var(--radius);
    background: var(--brand-surface);
    color: inherit;
    text-decoration: none;
    transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.nav-card:hover {
    border-color: var(--brand-secondary);
    transform: translateY(-2px);
}

.nav-card__icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--brand-background);
    color: var(--brand-muted);
}

.nav-card__icon svg {
    width: 17px;
    height: 17px;
}

.nav-card__title {
    display: block;
    font-weight: 600;
    color: var(--brand-text);
}

.nav-card__desc {
    display: block;
    font-size: 12px;
    color: var(--brand-muted);
    margin-top: 2px;
}

.nav-card--active {
    border-width: 2px;
    border-color: var(--brand-primary);
}

.nav-card--active .nav-card__icon {
    background: var(--brand-primary-light);
    color: var(--brand-primary-dark);
}

.nav-card--active .nav-card__title {
    color: var(--brand-primary-dark);
    font-weight: 700;
}

@media (max-width: 640px) {
    .nav-cards {
        grid-template-columns: 1fr;
    }
}

/* تبويبات مراحل مشروع أقوات (المستوى الأول، رأس صفحة التوزيعة وكل صفحات مراحلها) -- التبويب
   المفتوح بـ--active، والبقية روابط بـ--link، والمرحلة غير المبنية span معطَّل بـbadge "قريبًا"،
   بنفس منطق .sidebar-item--disabled بمنصة دعم الجمعيات. سطر واحد يتمرّر أفقيًا داخل حاويته فقط
   (لا يلتف ولا يوسّع الصفحة على الجوال). */
.stage-bar {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    margin-bottom: 16px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.stage-bar__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--brand-border);
    flex-shrink: 0;
    white-space: nowrap;
}

.stage-bar__item--link {
    background: var(--brand-surface);
    color: var(--brand-text);
    text-decoration: none;
}

.stage-bar__item--link:hover {
    border-color: var(--brand-primary);
}

.stage-bar__check {
    color: var(--brand-success);
    font-weight: 700;
}

.stage-bar__badge.stage-bar__badge--current {
    background: var(--brand-primary);
    color: #fff;
}

/* التبويبات الفرعية داخل مرحلة (المستوى الثاني) -- نفس .tabs/.tab بالضبط، سطر واحد يتمرّر أفقيًا
   داخل حاويته، مع مكان لرقم "ينتظر إجراء" (.unread-badge) بجانب العنوان. */
.tabs--scroll {
    overflow-x: auto;
    overflow-y: hidden;
}

.tabs--scroll .tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    white-space: nowrap;
}

/* "يحتاج انتباهك" بنظرة عامة التوزيعة -- كل تنبيه رابط مباشر لتبويبه الفرعي. */
.attention-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.attention-list li {
    padding: 10px 0;
    border-bottom: 1px solid var(--brand-border);
    font-size: 14px;
}

.attention-list li:last-child {
    border-bottom: none;
}

.attention-list a {
    color: var(--brand-primary-dark);
    font-weight: 600;
}

/* مسار الجمعيات -- .bar-chart نفسه، بعمود عنوان أعرض قليلًا لأن العناوين جمل قصيرة لا أسماء. */
.funnel-chart .bar-chart__row {
    grid-template-columns: minmax(110px, 1fr) 3fr auto;
}

.funnel-chart .bar-chart__label {
    font-size: 13px;
}

.stage-bar__item--active {
    background: var(--brand-primary-light);
    border-color: var(--brand-primary);
    color: var(--brand-primary-dark);
    text-decoration: none;
}

.stage-bar__item--disabled {
    background: var(--brand-background);
    color: var(--brand-muted);
}

.stage-bar__badge {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--brand-border);
    color: var(--brand-muted);
}

/* لون مقصود محليًا بـ#8a3810 (لا var(--brand-warning)) -- نفس عائلة البرتقالي
   لـ.btn-secondary أدناه لكن أغمق وأكثر تشبّعًا بفارق واضح (لا مجرد درجة أو
   درجتين)، ليكونا مميَّزين للعين رغم اشتراكهما بالعائلة اللونية. --brand-warning
   المشترك يبقى بلا تغيير لبقية استخداماته (شارات/تنبيهات) بامتداد الملف. */
.btn-warning {
    background: var(--brand-surface);
    color: #8a3810;
    border: 1px solid #8a3810;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 700;
}

.btn-warning:hover {
    background: #8a3810;
    color: #fff;
}

.btn-warning::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-inline-end: 6px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238a3810' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='14' height='9' rx='1'/%3E%3Cpath d='M2.5 4h15v3h-15z'/%3E%3Cline x1='8' y1='10.5' x2='12' y2='10.5'/%3E%3C/svg%3E");
}

/* زر تحذيري مصغَّر -- يجاور شارة حالة صغيرة (مثل "معتمد" بتبويب "أجابت" لمسح أقوات)، لا يحتاج نفس حجم
   .btn-warning الافتراضي المصمَّم ليقف بمفرده بصفحة. الأيقونة المصاحبة تُخفى أيضًا لتبقى الحزمة مضغوطة. */
.btn-warning--sm {
    padding: 3px 10px;
    font-size: 12px;
}

.btn-warning--sm::before {
    display: none;
}

/* خلية "الحالة" بتبويب "أجابت" لمسح أقوات -- شارة + زر تعديل الاعتماد (إن وُجد) + رابط "عرض" تفاصيل
   الإجابة، بصف أفقي واحد مضغوط. */
.answer-status-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.answer-toggle {
    background: none;
    border: none;
    padding: 0;
    color: var(--brand-primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

.answer-toggle:hover {
    color: var(--brand-primary-dark);
}

/* زر ثانوي/Outline موحَّد لإجراءات "إضافة صف/عنصر ديناميكي" (+ إضافة كمية،
   + إضافة باحث آخر...) - متعمَّد الاختلاف عن btn-primary المُخصَّص لزر
   الحفظ/الإضافة الرئيسي في النموذج، حتى لا يتنافس بصريًا مع الزر الأساسي. */
.btn-secondary {
    background: var(--brand-surface);
    color: var(--brand-primary-dark);
    border: 1px solid var(--brand-primary);
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 700;
}

.btn-secondary:hover {
    background: var(--brand-primary-light);
}

/* أيقونة «+» لأزرار الإضافة وحدها (btn-secondary--add) -- لا لكل زر ثانوي (طباعة، حفظ، إرسال...). */
.btn-secondary--add::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-inline-end: 6px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23cf6028' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M10 4v12M4 10h12'/%3E%3C/svg%3E");
}

/* زر الحذف النهائي - أحمر خطر واضح، متعمَّد الاختلاف تمامًا عن البرتقالي
   الأساسي (btn-primary) والبرتقالي الغامق للأرشفة (btn-warning) حتى لا يُخلَط
   بينها. يظهر فقط لـ system_admin وعلى السجلات المؤرشفة فقط (يُتحكَّم في ذلك
   من القالب لا من هنا)، ودائمًا داخل قسمه الخاص "منطقة الخطر" بمسافة واضحة عن
   أي زر استعادة أو تفعيل لتفادي الضغط الخاطئ. */
.btn-danger {
    background: var(--brand-danger);
    color: #fff;
    border: 1px solid var(--brand-danger);
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 700;
}

.btn-danger:hover {
    background: #8f1b12;
    border-color: #8f1b12;
}

.detail-section--danger,
.account-danger-zone {
    border: 1px solid var(--brand-danger-border);
    border-radius: var(--radius);
    margin-top: 28px;
    padding-top: 20px;
    border-top: 3px solid var(--brand-danger);
}

.account-danger-zone {
    padding: 16px 18px 20px;
}

.archive-warning {
    background: var(--brand-danger-bg);
    border: 1px solid var(--brand-danger-border);
    color: var(--brand-danger);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.7;
}

.archive-warning p {
    margin: 0 0 4px;
}

.archive-warning p:last-child {
    margin-bottom: 0;
}

.conflict-message {
    background: #fff7e6;
    border: 1px solid #f5d999;
    color: #92620a;
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 14px;
}

.confirmation-panel {
    background: var(--brand-background);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius);
    padding: 16px;
}

.confirmation-panel form {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.confirmation-panel__checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--brand-text);
    flex: 1;
    min-width: 240px;
}

.confirmation-panel__checkbox input {
    width: 18px;
    height: 18px;
}

.management-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.management-card {
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius);
    padding: 16px 18px;
}

.management-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--brand-border);
}

.management-actions a {
    color: var(--brand-primary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

.management-actions a:hover {
    text-decoration: underline;
}

.management-end-form {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.management-end-form .form-group {
    margin-bottom: 0;
    flex: 1;
    min-width: 160px;
}

.management-history summary {
    cursor: pointer;
    font-family: var(--brand-font-heading);
    font-weight: 500;
    font-size: 15px;
    color: var(--brand-text);
    padding: 4px 0;
}

.management-history[open] summary {
    margin-bottom: 14px;
}

@media (max-width: 900px) {
    .management-cards {
        grid-template-columns: 1fr;
    }
}

/* ===================== الباحثون الاجتماعيون (Social Researchers) ===================== */
/* الإظهار/الإخفاء الأساسي CSS فقط (بلا JavaScript) - يعمل حتى مع تعطيل JS. */
.social-researchers-toggle {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-inline-end: 8px;
}

.social-researchers-toggle-label {
    font-size: 14px;
    color: var(--brand-text);
    cursor: pointer;
}

.social-researchers-toggle:not(:checked) ~ .social-researchers-body {
    display: none;
}

.social-researchers-body {
    margin-top: 16px;
}

.social-researcher-row {
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 12px;
}

.social-researcher-row__actions {
    margin-top: 10px;
}

/* ===================== عمليات الدعم (Support Operations) ===================== */

.support-details {
    grid-template-columns: repeat(3, 1fr);
}

.support-note-preview {
    color: var(--brand-muted);
    font-size: 13px;
    max-width: 220px;
}

.support-summary {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.support-operation-card a {
    display: flex;
    gap: 16px;
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius);
    padding: 10px 14px;
    color: var(--brand-text);
    text-decoration: none;
    font-size: 13px;
}

.support-operation-card a:hover {
    border-color: var(--brand-primary);
}

.empty-dependency-state {
    background: var(--brand-background);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius);
    padding: 20px;
    text-align: center;
    color: var(--brand-text);
}

.empty-dependency-state p {
    margin: 0 0 8px;
}

.empty-dependency-state a {
    color: var(--brand-primary);
    font-weight: 600;
    text-decoration: none;
}

.empty-dependency-state a:hover {
    text-decoration: underline;
}

@media (max-width: 900px) {
    .support-details {
        grid-template-columns: 1fr;
    }

    .support-operation-card a {
        flex-direction: column;
        gap: 4px;
    }
}

/* ===================== المرفقات (Attachments) ===================== */

.attachments-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.attachment-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius);
    padding: 10px 14px;
}

.attachment-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--brand-primary-light);
    position: relative;
}

.attachment-icon::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 2px solid var(--brand-primary);
    border-radius: 3px;
}

.attachment-meta {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--brand-muted);
    min-width: 0;
}

.attachment-meta__name {
    color: var(--brand-text);
    font-weight: 600;
    font-size: 14px;
    flex-basis: 100%;
    overflow-wrap: anywhere;
}

.file-type-badge {
    display: inline-block;
    background: var(--brand-background);
    border: 1px solid var(--brand-border);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--brand-primary-dark);
    letter-spacing: 0.02em;
}

.file-size {
    white-space: nowrap;
}

.attachment-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.attachment-actions a {
    color: var(--brand-primary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

.attachment-actions a:hover {
    text-decoration: underline;
}

.attachment-actions form {
    display: inline;
}

.upload-panel {
    background: var(--brand-background);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius);
    padding: 16px;
    margin-top: 8px;
}

.upload-panel .form-group {
    margin-bottom: 10px;
}

.upload-help {
    color: var(--brand-muted);
    font-size: 12px;
    margin: 0 0 12px;
}

/* كميات عملية الدعم - سطور متعددة داخل بطاقة .quantity-row واحدة لكل سطر (نفس
   خلفية/حدود .upload-panel تحت اسم مخصوص لأن السياق مختلف تمامًا) - كل سطر
   حقلا وحدة/كمية عاديان داخل .form-grid الموجودة أصلًا، بلا حاجة لأي فئة CSS
   إضافية لهما. */
.quantity-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 14px;
}

.quantity-row {
    background: var(--brand-background);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius);
    padding: 16px;
}

.quantity-row__title {
    font-weight: 600;
    font-size: 13px;
    color: var(--brand-text);
    margin: 0 0 10px;
}

.quantity-row__remove {
    margin-top: 6px;
}

/* حقل قيمة كمية مرتبط بوحدة ثابتة (تأتي من إعداد نوع الدعم أو Snapshot العملية
   - لا تُختار من المستخدم بعد الآن) - input الرقم بجانب تسمية الوحدة الثابتة،
   بدل select وحدة منفصل. */
.quantity-value-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.quantity-value-group input {
    flex: 1;
    min-width: 0;
}

.quantity-value-group__unit {
    font-size: 13px;
    color: var(--brand-muted);
    white-space: nowrap;
}

.quantity-type-change-warning {
    background: #fff7e6;
    border: 1px solid #f5d999;
    color: #92620a;
    border-radius: var(--radius);
    padding: 10px 14px;
    margin: 0 0 14px;
    font-size: 13px;
}

@media (max-width: 900px) {
    .attachment-item {
        flex-wrap: wrap;
    }

    .attachment-actions {
        flex-basis: 100%;
        justify-content: flex-start;
    }
}

/* ===================== التواصل الداخلي (Internal Messaging) ===================== */

.unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--brand-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.app-shell--collapsed .sidebar-item .unread-badge {
    display: none;
}

@media (max-width: 900px) {
    .app-shell--collapsed .sidebar-item .unread-badge {
        display: inline-flex;
    }
}

.messages-toolbar {
    flex-wrap: wrap;
}

.conversation-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.conversation-item a {
    display: block;
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius);
    padding: 12px 16px;
    text-decoration: none;
    color: var(--brand-text);
}

.conversation-item a:hover {
    border-color: var(--brand-primary);
}

.conversation-item__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.conversation-item__subject {
    font-weight: 600;
    font-size: 15px;
}

.conversation-item__unread-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--brand-primary-dark);
}

.conversation-unread {
    border-inline-start: 4px solid var(--brand-primary);
}

.conversation-unread .conversation-item__subject {
    font-weight: 800;
}

.conversation-status {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
}

.conversation-status--open {
    background: #eaf6ee;
    color: var(--brand-success);
    border-color: #cfe9d7;
}

.conversation-status--closed {
    background: var(--brand-background);
    color: var(--brand-muted);
    border-color: var(--brand-border);
}

.conversation-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--brand-muted);
}

.participants-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.participants-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius);
    padding: 6px 12px;
    font-size: 13px;
}

.message-thread {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.message-bubble {
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius);
    padding: 12px 16px;
    max-width: 80%;
    align-self: flex-start;
}

.message-bubble-own {
    background: var(--brand-primary-light);
    border-color: var(--brand-border);
    align-self: flex-end;
}

.message-bubble p {
    margin: 8px 0 0;
    white-space: pre-line;
    line-height: 1.8;
}

.message-author {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 13px;
}

.message-time {
    font-weight: 400;
    color: var(--brand-muted);
    font-size: 12px;
}

.reply-panel {
    background: var(--brand-background);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius);
    padding: 16px;
}

.closed-conversation-alert {
    background: var(--brand-danger-bg);
    border: 1px solid var(--brand-danger-border);
    color: var(--brand-danger);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 20px;
}

.closed-conversation-alert p {
    margin: 0;
}

@media (max-width: 900px) {
    .message-bubble {
        max-width: 100%;
    }
}

/* ============================================================
   إدارة المستخدمين والملف الشخصي
   ============================================================ */

.users-toolbar {
    align-items: flex-end;
}

.user-card-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.user-card {
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius);
}

.user-card__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    text-decoration: none;
    color: inherit;
    flex-wrap: wrap;
}

.user-card__main {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-card__name {
    font-weight: 700;
    font-size: 15px;
    color: var(--brand-text);
}

.user-card__username {
    font-size: 13px;
    color: var(--brand-muted);
}

.user-card__badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.user-role-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--brand-border);
    background: var(--brand-background);
    color: var(--brand-text);
}

.user-role-badge--system_admin {
    background: rgba(87, 86, 80, 0.1);
    color: var(--brand-accent);
    border-color: rgba(87, 86, 80, 0.25);
}

.user-role-badge--supervisor {
    background: #eaf6ee;
    color: var(--brand-success);
    border-color: #cfe9d7;
}

.user-role-badge--standard_user {
    background: var(--brand-background);
    color: var(--brand-text);
    border-color: var(--brand-border);
}

.user-role-badge--viewer {
    background: #f3ecec;
    color: var(--brand-muted);
    border-color: var(--brand-border);
}

.user-status-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
}

.user-status-badge--active {
    background: #eaf6ee;
    color: var(--brand-success);
    border-color: #cfe9d7;
}

.user-status-badge--inactive {
    background: var(--brand-background);
    color: var(--brand-muted);
    border-color: var(--brand-border);
}

.user-security-panel p {
    color: var(--brand-muted);
    font-size: 13px;
    line-height: 1.8;
}

.profile-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    align-items: start;
}

.password-requirements {
    margin: 6px 0 0;
    padding-inline-start: 18px;
    font-size: 12px;
    color: var(--brand-muted);
    line-height: 1.6;
}

.account-warning {
    background: var(--brand-danger-bg);
    border: 1px solid var(--brand-danger-border);
    color: var(--brand-danger);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.7;
}

.account-warning p {
    margin: 0 0 4px;
}

.account-warning p:last-child {
    margin-bottom: 0;
}

.last-admin-warning {
    background: #fff7e6;
    border: 1px solid #f5d999;
    color: #92620a;
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.7;
}

.last-admin-warning p {
    margin: 0;
}

@media (max-width: 900px) {
    .profile-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .user-card__link {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
   مركز التقارير
   ============================================================ */

.print-only {
    display: none;
}

.reports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.report-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius);
    padding: 16px 18px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.report-card:hover {
    border-color: var(--brand-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.report-card__title {
    font-weight: 700;
    font-size: 15px;
    color: var(--brand-text);
}

.report-card__desc {
    font-size: 13px;
    color: var(--brand-muted);
    line-height: 1.6;
}

.report-summary {
    margin-bottom: 8px;
}

.report-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--brand-background);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 16px;
}

.report-toolbar__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: var(--brand-muted);
}

.report-toolbar__meta p {
    margin: 0;
}

.report-toolbar__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.report-filters {
    margin-bottom: 16px;
}

.report-table {
    font-size: 12.5px;
}

.report-kpi {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--brand-surface);
    border: 1px solid var(--brand-border);
    border-radius: var(--radius);
    padding: 14px 16px;
}

.report-kpi__value {
    font-size: 22px;
    font-weight: 800;
    color: var(--brand-text);
}

.report-kpi__label {
    font-size: 12.5px;
    color: var(--brand-muted);
    line-height: 1.5;
}

.report-kpi--warning .report-kpi__value {
    color: var(--brand-warning);
}

.report-kpi--danger .report-kpi__value {
    color: var(--brand-danger);
}

.report-kpi--muted .report-kpi__value {
    color: var(--brand-muted);
}

.report-warning {
    background: var(--brand-background);
    border: 1px solid var(--brand-border);
    color: var(--brand-muted);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.8;
}

.report-warning p {
    margin: 0;
}

.report-empty {
    background: var(--brand-surface);
    border: 1px dashed var(--brand-border);
    border-radius: var(--radius);
    padding: 24px;
    text-align: center;
    color: var(--brand-muted);
}

.report-note {
    font-size: 12.5px;
    color: var(--brand-muted);
    line-height: 1.7;
    margin: 8px 0 16px;
}

.report-status {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: var(--brand-background);
    color: var(--brand-text);
}

.report-status--expired {
    background: var(--brand-danger-bg);
    color: var(--brand-danger);
    border-color: var(--brand-danger-border);
}

.report-status--expiring_30,
.report-status--expiring_31_60 {
    background: #fff7e6;
    color: #92620a;
    border-color: #f5d999;
}

.report-status--expiring_61_90 {
    background: #fff7e6;
    color: #92620a;
    border-color: #f5d999;
    opacity: 0.85;
}

.report-status--valid_over_90 {
    background: #eaf6ee;
    color: var(--brand-success);
    border-color: #cfe9d7;
}

.report-status--no_expiry,
.report-status--no_license {
    background: var(--brand-background);
    color: var(--brand-muted);
    border-color: var(--brand-border);
}

.data-quality-list {
    margin: 0;
    padding-inline-start: 18px;
    font-size: 12.5px;
    line-height: 1.7;
}

@media (max-width: 900px) {
    .report-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ===================== الوصول (Accessibility) ===================== */

.sidebar-item:focus-visible,
.topbar__toggle:focus-visible,
.btn-logout:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-warning:focus-visible,
.btn-danger:focus-visible,
.pagination a:focus-visible,
.tab:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* ===================== الطباعة (خاص بمركز التقارير) ===================== */

@media print {
    .sidebar,
    .topbar__toggle,
    .topbar__user,
    .mobile-overlay,
    .no-print {
        display: none !important;
    }

    .print-only {
        display: block !important;
    }

    .main-wrapper,
    .main-content {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .app-shell {
        display: block !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
    }

    .topbar {
        border-bottom: 1px solid #000;
        margin-bottom: 12px;
    }

    .topbar__title {
        color: #000 !important;
    }

    .report-table,
    .data-table {
        font-size: 11px;
    }

    .report-table tr,
    .data-table tr {
        page-break-inside: avoid;
    }

    .report-kpi,
    .report-card,
    .detail-section {
        border: 1px solid #999 !important;
        box-shadow: none !important;
        break-inside: avoid;
    }

    /* لا تُطبَع عناوين الروابط (href) بعد النص - المتصفح لا يفعل ذلك تلقائيًا،
       هذه حماية دفاعية إن أُضيف مستقبلًا أي أسلوب طباعة عام يضيفها. */
    a::after {
        content: none !important;
    }

    a {
        color: inherit !important;
        text-decoration: none !important;
    }
}

/* Added in the Laravel port: the two flash variants the source's layouts never had a class for. */
.flash-message--warning {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: var(--brand-warning);
}

.flash-message--error {
    background: var(--brand-danger-bg);
    border: 1px solid var(--brand-danger-border);
    color: var(--brand-danger);
}

/* Added in the Laravel port: small pieces the source's views referenced without a rule, plus the
   front door's two choices. */
.login-card__alt {
    margin: 18px 0 0;
    font-size: 13px;
    color: var(--brand-muted);
    text-align: center;
}

.current-file-note {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--brand-muted);
}

.field--error input,
.field--error select,
.field--error textarea {
    border-color: var(--brand-danger);
}

/* ── قوالب الصلاحيات والحساب المؤقت (2026-10-26) ── */
.inline-form { display: inline; }
.btn-link { background: none; border: 0; padding: 0; color: var(--color-danger, #b42318); cursor: pointer; font: inherit; text-decoration: underline; }
.template-permissions { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 16px; margin-bottom: 12px; }
.template-permission { display: flex; gap: 6px; align-items: center; }
.template-permission input:disabled + * , .template-permission:has(input:disabled) { opacity: .55; }
.account-window { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; align-items: end; }

/* ── مهامي اليوم (متطوع التسليم) -- للجوال أولًا ── */
.volunteer-task__quantity { font-size: 1.35rem; font-weight: 700; margin: 4px 0 10px; }
.volunteer-task__button { width: 100%; min-height: 52px; font-size: 1.15rem; margin-top: 12px; }
.volunteer-done { margin: 0; padding-inline-start: 18px; line-height: 1.9; }
.handover-self { margin-top: 14px; }

details.form-section > summary.form-section__header { cursor: pointer; list-style-position: inside; color: #fff; }

/* ── اسم النظام بالشريط العلوي (Brand::NAME، 2026-10-26) فوق عنوان الصفحة ── */
.topbar__heading { flex: 1 1 auto; min-width: 7.5em; display: flex; flex-direction: column; gap: 2px; }
.topbar__heading .topbar__title { flex: none; }
.topbar__system { font-size: 12px; font-weight: 700; color: var(--brand-primary); letter-spacing: 0; line-height: 1.2; white-space: nowrap; }
@media print { .topbar__system { color: #111 !important; } }