/* ==========================================================================
   YourMove - نظام التصميم المركزي (Design System)
   كل الألوان معرّفة هنا مرة واحدة فقط. الصفحات لا تُعيد تعريفها.
   ========================================================================== */

:root {
    /* --- ألوان الهوية (ثابتة في الوضعين) --- */
    --ym-primary: #00E5FF;
    --ym-primary-strong: #00B8D4;
    --ym-primary-deep: #0369A1;
    --ym-secondary: #FF00FF;
    --ym-success: #10B981;
    --ym-danger: #EF4444;
    --ym-warning: #F59E0B;
    --ym-on-primary: #0F172A; /* لون النص فوق الأزرار السماوية */
    /* --- أسطح واجهة التطبيق (Navbar / Footer) — الوضع الفاتح --- */
    --ym-bg: #F8FAFC;
    --ym-card-bg: #FFFFFF;
    --ym-navbar-bg: #FFFFFF;
    --ym-text-title: #0F172A;
    --ym-text-main: #334155;
    --ym-text-sub: #64748B;
    --ym-border: #E2E8F0;
    --ym-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
    /* --- أسطح المحتوى (البطاقات والجداول والنماذج) — الوضع الفاتح --- */
    --bg: #F8FAFC;
    --card-bg: #FFFFFF;
    --card-bg-alt: #F1F5F9; /* صف/رأس جدول، خلفية ثانوية */
    --text-main: #1E293B;
    --text-strong: #0F172A;
    --text-soft: #475569;
    --text-sub: #64748B;
    --border: #E2E8F0;
    --input-bg: #F1F5F9;
    --table-header: #F1F5F9;
    --shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    /* أسماء مختصرة تستخدمها بعض الصفحات */
    --primary: var(--ym-primary);
    --secondary: var(--ym-secondary);
    --success: var(--ym-success);
    --danger: var(--ym-danger);
    --warning: var(--ym-warning);
    /* --- مقاسات مشتركة --- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --transition: 0.25s ease;
}

[data-theme="dark"] {
    /* أسطح واجهة التطبيق — الوضع المظلم (أزرق ليلي عميق لراحة العين) */
    --ym-bg: #0B0F19;
    --ym-card-bg: #162032;
    --ym-navbar-bg: #162032;
    --ym-text-title: #F8FAFC;
    --ym-text-main: #E2E8F0;
    --ym-text-sub: #94A3B8;
    --ym-border: #2A3B54;
    --ym-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
    /* أسطح المحتوى — الوضع المظلم */
    --bg: #0F172A;
    --card-bg: #1E293B;
    --card-bg-alt: #0F172A;
    --text-main: #F8FAFC;
    --text-strong: #F8FAFC;
    --text-soft: #CBD5E1;
    --text-sub: #94A3B8;
    --border: #334155;
    --input-bg: #0F172A;
    --table-header: #0F172A;
    --shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
}

/* ===== التنسيقات الهيكلية الأساسية ===== */
body {
    background-color: var(--ym-bg);
    color: var(--ym-text-main);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: background-color var(--transition), color var(--transition);
}

/* إتاحة الوصول: إطار واضح عند التنقل بلوحة المفاتيح فقط */
:focus-visible {
    outline: 2px solid var(--ym-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* تسمية للقارئ الصوتي فقط (مخفية بصرياً) */
.visually-hidden-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* احترام تفضيل تقليل الحركة (مهم لمستخدمي التوحد/الحساسية الحسية) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== شريط التنقل (Navbar) ===== */
.ym-navbar {
    background-color: var(--ym-navbar-bg) !important;
    border-bottom: 1px solid var(--ym-border) !important;
    box-shadow: var(--ym-shadow);
    transition: background-color var(--transition), border-color var(--transition);
}

.ym-nav-link {
    color: var(--ym-text-sub) !important;
    font-weight: 600;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .ym-nav-link:hover {
        color: var(--ym-primary) !important;
    }

.ym-nav-brand {
    font-weight: 800;
    font-size: 22px;
    color: var(--ym-text-title) !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .ym-nav-brand span {
        color: var(--ym-primary);
    }

.ym-nav-logo {
    height: 60px;
    width: auto;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
}

/* رابط تسجيل الخروج */
.ym-logout-link {
    color: var(--ym-danger) !important;
    font-weight: 600;
}

/* رابط تسجيل الدخول (للزائر غير المسجل) */
.ym-login-link {
    color: var(--ym-primary-deep) !important;
    font-weight: 700;
}

[data-theme="dark"] .ym-login-link {
    color: var(--ym-primary) !important;
}

/* ===== التذييل (Footer) ===== */
.ym-footer {
    color: var(--ym-text-sub);
    border-top: 1px solid var(--ym-border) !important;
    font-size: 13px;
    font-weight: 600;
    transition: color var(--transition), border-color var(--transition);
}

/* ===== تخصيص قائمة اللغات ===== */
.ym-lang-select {
    background-color: var(--ym-card-bg);
    color: var(--ym-text-main);
    border: 1px solid var(--ym-border);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    outline: none;
    cursor: pointer;
    transition: all var(--transition);
}

    .ym-lang-select:focus {
        border-color: var(--ym-primary);
    }

/* ===== زر الوضع المظلم ===== */
.ym-theme-toggle {
    background: transparent;
    color: var(--ym-text-sub);
    border: 1px solid var(--ym-border);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
}

    .ym-theme-toggle:hover {
        color: var(--ym-primary);
        border-color: var(--ym-primary);
        background: rgba(0, 229, 255, 0.05);
    }

/* ===== زر الإدارة الطبية ===== */
.ym-admin-btn {
    font-weight: 700;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all var(--transition);
    /* الوضع الفاتح: أزرق داكن لضمان الوضوح التام على الأبيض */
    color: var(--ym-primary-deep) !important;
    background: rgba(3, 105, 161, 0.08);
    border: 1px solid rgba(3, 105, 161, 0.2);
}

    .ym-admin-btn:hover {
        background: rgba(3, 105, 161, 0.15);
    }

/* الوضع المظلم: نيون سيان ساطع */
[data-theme="dark"] .ym-admin-btn {
    color: var(--ym-primary) !important;
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid rgba(0, 229, 255, 0.2);
}

    [data-theme="dark"] .ym-admin-btn:hover {
        background: rgba(0, 229, 255, 0.15);
    }

/* ===== زر الرئيسية (Home) ===== */
.ym-home-btn {
    font-weight: 700;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all var(--transition);
    /* الوضع الفاتح: رمادي داكن أنيق */
    color: #475569 !important;
    background: rgba(71, 85, 105, 0.08);
    border: 1px solid rgba(71, 85, 105, 0.2);
}

    .ym-home-btn:hover {
        background: rgba(71, 85, 105, 0.15);
    }

/* الوضع المظلم: أبيض رمادي مريح للعين */
[data-theme="dark"] .ym-home-btn {
    color: #E2E8F0 !important;
    background: rgba(226, 232, 240, 0.08);
    border: 1px solid rgba(226, 232, 240, 0.15);
}

    [data-theme="dark"] .ym-home-btn:hover {
        background: rgba(226, 232, 240, 0.15);
    }

/* ==========================================================================
   مكوّنات مشتركة (Shared Components)
   بدلاً من تكرار نفس التنسيقات inline في كل صفحة
   ========================================================================== */

/* ----- ترويسة الصفحة ----- */
.ym-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

    .ym-page-header h1,
    .ym-page-header h2 {
        font-size: 24px;
        font-weight: 800;
        color: var(--text-strong);
        margin: 0 0 4px 0;
        display: flex;
        align-items: center;
        gap: 10px;
        text-align: start;
    }

.ym-page-subtitle {
    color: var(--text-sub);
    font-size: 14px;
    margin: 0;
}

/* ----- البطاقة الأساسية ----- */
.ym-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
    text-align: start;
}

/* الشريط المتدرّج العلوي المميّز لهوية YourMove */
.ym-card--accent::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ym-primary), var(--ym-secondary));
}

/* ----- بطاقة إحصائية ----- */
.ym-stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.ym-stat-label {
    color: var(--text-sub);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}

.ym-stat-value {
    font-size: 32px;
    font-weight: 800;
    margin: 0;
    color: var(--text-main);
    line-height: 1.2;
}

.ym-stat-value--primary { color: var(--ym-primary); }
.ym-stat-value--success { color: var(--ym-success); }
.ym-stat-value--warning { color: var(--ym-warning); }
.ym-stat-value--secondary { color: var(--ym-secondary); }

/* ----- الجداول ----- */
.ym-table-wrap {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
}

/* الجداول العريضة تُمرّر أفقياً بدلاً من كسر تخطيط الصفحة */
.ym-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ym-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

    .ym-table th {
        background: var(--table-header);
        padding: 15px;
        color: var(--text-sub);
        font-weight: 600;
        font-size: 13px;
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
        text-align: start;
    }

    .ym-table td {
        padding: 18px 15px;
        border-bottom: 1px solid var(--border);
        color: var(--text-soft);
        font-size: 14px;
        text-align: start;
    }

    .ym-table tbody tr {
        transition: background-color 0.2s ease;
    }

        .ym-table tbody tr:hover {
            background: var(--card-bg-alt);
        }

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

.ym-td-strong {
    font-weight: 700;
    color: var(--text-strong);
}

.ym-empty-row {
    text-align: center;
    color: var(--text-sub);
    padding: 48px 15px !important;
}

/* ----- الأزرار ----- */
.ym-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 14px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition);
}

    .ym-btn:disabled,
    .ym-btn[disabled] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.ym-btn--primary {
    background: var(--ym-primary);
    color: var(--ym-on-primary) !important;
}

    .ym-btn--primary:hover:not(:disabled) {
        background: var(--ym-primary-strong);
    }

.ym-btn--gradient {
    background: linear-gradient(90deg, var(--ym-primary), var(--ym-primary-strong));
    color: var(--ym-on-primary) !important;
}

.ym-btn--ghost {
    background: var(--card-bg);
    color: var(--text-soft) !important;
    border-color: var(--border);
}

    .ym-btn--ghost:hover:not(:disabled) {
        background: var(--card-bg-alt);
        color: var(--text-strong) !important;
        border-color: var(--ym-primary);
    }

.ym-btn--outline-primary {
    background: rgba(0, 229, 255, 0.1);
    color: var(--ym-primary) !important;
    border-color: var(--ym-primary);
}

    .ym-btn--outline-primary:hover:not(:disabled) {
        background: rgba(0, 229, 255, 0.2);
    }

.ym-btn--outline-success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--ym-success) !important;
    border-color: var(--ym-success);
}

    .ym-btn--outline-success:hover:not(:disabled) {
        background: rgba(16, 185, 129, 0.2);
    }

.ym-btn--outline-danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--ym-danger) !important;
    border-color: rgba(239, 68, 68, 0.2);
}

    .ym-btn--outline-danger:hover:not(:disabled) {
        background: rgba(239, 68, 68, 0.2);
    }

.ym-btn--sm {
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
}

/* ----- حقول الإدخال ----- */
.ym-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-sub);
    text-align: start;
}

.ym-input {
    width: 100%;
    padding-block: 12px;
    padding-inline: 15px;
    background: var(--input-bg);
    border: 1.5px solid var(--border);
    color: var(--text-main);
    border-radius: var(--radius-md);
    outline: none;
    font-family: inherit;
    font-size: 14px;
    text-align: start;
    transition: border-color var(--transition);
}

    .ym-input:focus {
        border-color: var(--ym-primary);
    }

    .ym-input::placeholder {
        color: var(--text-sub);
        opacity: 0.8;
    }

.ym-form-group {
    margin-bottom: 20px;
}

.ym-field-error {
    color: var(--ym-danger);
    font-size: 12px;
    margin-top: 5px;
    display: block;
    text-align: start;
}

    /* الحقل السليم لا يحجز مسافة تحت المدخل */
    .ym-field-error.field-validation-valid,
    .ym-field-error:empty {
        display: none;
    }

/* ملخّص أخطاء النموذج.
   لا يُعتمد على :empty هنا: الـtag helper يرسم دائماً <ul> فارغة داخل العنصر، فيبقى
   غير فارغ تقنياً ويظهر الصندوق الأحمر على صفحة الدخول قبل أن يخطئ المستخدم بشيء.
   الصنف الذي يضبطه الـtag helper هو المؤشر الصحيح، ويعمل مع التحقّق من الخادم ومن
   المتصفّح معاً. */
.ym-validation-summary {
    display: none;
}

.ym-validation-summary.validation-summary-errors {
    display: block;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid #FCA5A5;
    border-inline-start: 3px solid var(--ym-danger);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    margin-bottom: 20px;
    color: var(--ym-danger);
    font-size: 13px;
    text-align: start;
}

    .ym-validation-summary ul {
        margin: 0;
        padding-inline-start: 18px;
    }

/* ----- شارات ----- */
.ym-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 700;
}

.ym-badge--key {
    background: rgba(0, 229, 255, 0.1);
    color: var(--ym-primary-deep);
    font-family: 'Consolas', 'Courier New', monospace;
    letter-spacing: 0.5px;
}

[data-theme="dark"] .ym-badge--key {
    color: var(--ym-primary);
}

.ym-badge--secondary {
    background: rgba(255, 0, 255, 0.1);
    color: var(--ym-secondary);
}

/* ----- مؤشر حالة الاتصال ----- */
.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-inline-end: 8px;
    flex-shrink: 0;
}

.status-offline {
    background-color: var(--ym-danger);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}

.status-waiting {
    background-color: var(--ym-warning);
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

.status-online {
    background-color: var(--ym-success);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

/* ----- الشاشات الصغيرة ----- */
@media (max-width: 768px) {
    .ym-page-header {
        flex-direction: column;
        align-items: stretch;
    }

    .ym-card,
    .ym-stat-card {
        padding: 18px;
    }

    .ym-stat-value {
        font-size: 26px;
    }
}

/* =====================================================================
   حالات الفراغ المصمَّمة
   جدول فاضي بسطر "لا توجد سجلات" بيخلّي الطبيب يشك إنه في عطل. البديل:
   أيقونة + سبب + الخطوة التالية، فيصير الفراغ حالة مفهومة مش خطأ.
   ===================================================================== */
.ym-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 56px 24px;
    text-align: center;
}

.ym-empty__icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    margin-bottom: 10px;
    background: var(--input-bg);
    border: 1px solid var(--border);
    color: var(--text-sub);
}

.ym-empty__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-strong);
    margin: 0;
}

.ym-empty__hint {
    font-size: 13.5px;
    color: var(--text-sub);
    margin: 0;
    max-width: 42ch;
    line-height: 1.6;
}

.ym-empty__action {
    margin-top: 14px;
}

/* حالة الفراغ داخل خلية جدول: تلغي حشوة الخلية حتى تتمركز بشكل صحيح */
.ym-empty-cell {
    padding: 0 !important;
    border-bottom: none !important;
}

/* =====================================================================
   وضع الجلسة (Focus Mode)
   الطبيب أثناء الجلسة واقف مع الطفل، مش قاعد قدام الشاشة. فبينطوي كل
   الإحصائي التراكمي، وبتكبر حالة الذكاء الاصطناعي وأزرار التدخّل لحجم
   يُقرأ ويُضغط من مسافة. كل التبديل بالـCSS عبر data-session-mode.
   ===================================================================== */
.session-only { display: none; }

[data-session-mode="focus"] .session-only { display: block; }
[data-session-mode="focus"] .focus-hide { display: none !important; }

/* أزرار التدخّل: هدف لمس 44px كحد أدنى حتى خارج وضع الجلسة (WCAG 2.5.8)،
   وأكبر بكثير داخله. الطبيب بيضغطها بطرف إصبعه وهو ماسك الطفل. */
.control-btn {
    min-height: 44px;
    min-width: 44px;
}

[data-session-mode="focus"] .intervention-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
}

[data-session-mode="focus"] .intervention-grid .control-btn {
    flex-direction: column;
    justify-content: center;
    min-height: 104px;
    padding: 18px 14px;
    font-size: 17px;
    font-weight: 700;
    gap: 10px;
    border-width: 2px;
    border-radius: var(--radius-lg);
}

    [data-session-mode="focus"] .intervention-grid .control-btn svg {
        width: 28px;
        height: 28px;
    }

/* الفواصل الرأسية بين مجموعات الأزرار ما إلها معنى داخل شبكة */
[data-session-mode="focus"] .intervention-grid .vr { display: none; }

/* حالة الذكاء الاصطناعي: الرقم اللي لازم يُقرأ من آخر الغرفة */
[data-session-mode="focus"] #aiStateText { font-size: clamp(40px, 6vw, 76px); }
[data-session-mode="focus"] #aiConfidenceText,
[data-session-mode="focus"] #aiCounterText { font-size: clamp(34px, 4.5vw, 56px); }
[data-session-mode="focus"] .metric-label { font-size: 1rem; }

/* عدّادات الصواب/الخطأ */
[data-session-mode="focus"] .live-count { font-size: clamp(48px, 6vw, 78px) !important; }

/* زر الخروج من وضع الجلسة */
.focus-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 18px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text-main);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all var(--transition);
}

    .focus-toggle:hover {
        border-color: var(--ym-primary);
        color: var(--ym-primary-deep);
    }

[data-theme="dark"] .focus-toggle:hover { color: var(--ym-primary); }

[data-session-mode="focus"] .focus-toggle {
    background: var(--ym-primary);
    border-color: var(--ym-primary);
    color: var(--ym-on-primary);
}

/* =====================================================================
   حالة تنفيذ الأوامر
   الطبيب لازم يعرف إذا الأمر وصل للنظارة فعلاً، مش بس إنه انبعث.
   ===================================================================== */
.cmd-feedback {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid var(--border);
    background: var(--input-bg);
    color: var(--text-sub);
    transition: all var(--transition);
}

.cmd-feedback[hidden] { display: none; }

.cmd-feedback--pending {
    border-color: var(--ym-warning);
    color: var(--ym-warning);
}

.cmd-feedback--done {
    border-color: var(--ym-success);
    color: var(--ym-success);
}

.cmd-feedback--failed {
    border-color: var(--ym-danger);
    color: var(--ym-danger);
}

[data-session-mode="focus"] .cmd-feedback {
    font-size: 16px;
    min-height: 44px;
    padding: 10px 20px;
}

/* =====================================================================
   مكوّنات إدارة المنصّة والمراكز
   ===================================================================== */

/* صفّ البطاقات الإحصائية - شبكة تنهار وحدها على الشاشات الضيّقة */
.ym-stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.ym-stat-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-sub);
}

.ym-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.ym-dot--ok { background: var(--ym-success); }
.ym-dot--danger { background: var(--ym-danger); }

/* رسالة نجاح بعد إجراء إداري */
.ym-flash {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 14px;
    border-inline-start: 3px solid transparent;
}

.ym-flash--success {
    background: rgba(16, 185, 129, 0.1);
    border-color: var(--ym-success);
    color: var(--ym-success);
}

/* شارات الحالة */
.ym-badge--ok {
    background: rgba(16, 185, 129, 0.12);
    color: var(--ym-success);
}

.ym-badge--danger {
    background: rgba(239, 68, 68, 0.12);
    color: var(--ym-danger);
}

.ym-badge--warn {
    background: rgba(245, 158, 11, 0.14);
    color: var(--ym-warning);
    margin-inline-start: 8px;
}

/* سطر ثانوي داخل خلية جدول (بريد التواصل، سبب الإيقاف) */
.ym-td-sub {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-sub);
}

/* صفّ مركز موقوف: باهت لكن مقروء - الحالة تُقرأ من الشارة لا من اللون وحده */
.ym-row--muted td {
    opacity: 0.62;
}

/* نماذج من عمودين تنهار لعمود واحد على الجوال */
.ym-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 18px;
}

.ym-card--form {
    max-width: 720px;
}

.ym-fieldset {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 18px 20px 4px;
    margin: 8px 0 22px;
}

.ym-legend {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-sub);
    padding: 0 8px;
    width: auto;
    margin: 0;
}

/* لوحة إشعار مستقلّة (المركز الموقوف) */
.ym-notice {
    max-width: 560px;
    margin: 56px auto;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 40px;
    text-align: center;
}

.ym-notice__icon {
    width: 70px;
    height: 70px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xl);
    background: rgba(245, 158, 11, 0.12);
    color: var(--ym-warning);
    margin-bottom: 18px;
}

.ym-notice__title {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-strong);
    margin: 0 0 10px;
}

.ym-notice__body {
    color: var(--text-sub);
    margin: 0 0 24px;
    line-height: 1.7;
}

.ym-notice__detail {
    text-align: start;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    margin-bottom: 24px;
}

.ym-notice__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 0;
    font-size: 13.5px;
}

    .ym-notice__row + .ym-notice__row {
        border-top: 1px solid var(--border);
    }

.ym-notice__key {
    color: var(--text-sub);
    font-weight: 600;
    flex-shrink: 0;
}

.ym-notice__value {
    color: var(--text-main);
    font-weight: 700;
    text-align: end;
}

.ym-flash--danger {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--ym-danger);
    color: var(--ym-danger);
}

/* رابط إعادة التعيين: بارز لأنه يُعرض مرة واحدة ولا يمكن استرجاعه */
.ym-flash--info {
    background: rgba(0, 229, 255, 0.08);
    border-color: var(--ym-primary);
    color: var(--text-main);
}

/* تلميح أسفل عنوان مجموعة حقول */
.ym-field-hint {
    color: var(--text-sub);
    font-size: 12.5px;
    margin: 0 0 16px;
    line-height: 1.6;
}

/* ============================================================
   شريط الأدوات والبحث - سجلّ المرضى
   ============================================================ */

.ym-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-block-end: 16px;
}

.ym-search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 320px;
    position: relative;
}

/* الأيقونة موضوعة بخصائص منطقية (inline-start) لا بـleft:
   تثبيتها على اليسار يضعها فوق النصّ العربي في الاتجاه من اليمين لليسار. */
.ym-search__icon {
    position: absolute;
    inset-inline-start: 14px;
    color: var(--text-sub);
    pointer-events: none;
}

.ym-search__input {
    flex: 1;
    min-width: 0;
    padding-block: 11px;
    padding-inline-start: 40px;
    padding-inline-end: 15px;
    background: var(--input-bg);
    border: 1.5px solid var(--border);
    color: var(--text-main);
    border-radius: var(--radius-md);
    outline: none;
    font-family: inherit;
    font-size: 14px;
    text-align: start;
    transition: border-color var(--transition);
}

.ym-search__input:focus {
    border-color: var(--ym-primary);
}

/* زرّ المسح الأصلي في متصفّح WebKit يظهر في الجهة الخطأ ولا يرث اللون */
.ym-search__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

/* ============================================================
   شاشة التقدّم: الأهداف، المقارنة، الاتجاهات
   ============================================================ */

/* كان معرَّفاً داخل صفحة الجلسات وحدها؛ نُقل هنا لأن أكثر من صفحة تستعمله الآن */
.ym-section-title {
    color: var(--text-strong);
    border-bottom: 1px solid var(--border);
    padding-bottom: 15px;
    margin-bottom: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ym-badge--muted {
    background: rgba(148, 163, 184, 0.16);
    color: var(--text-sub);
    margin-inline-start: 8px;
}

/* ---------- الأهداف ---------- */

.ym-goal-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 18px;
}

.ym-goal {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    background: var(--input-bg);
}

/* الحدّ على الجهة المبتدئة منطقياً، فينتقل إلى اليمين في الواجهة العربية تلقائياً */
.ym-goal--done {
    border-inline-start: 3px solid var(--ym-success);
}

.ym-goal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.ym-goal__bar {
    height: 8px;
    border-radius: 999px;
    background: var(--border);
    overflow: hidden;
}

.ym-goal__fill {
    height: 100%;
    background: var(--ym-primary);
    border-radius: 999px;
    transition: width var(--transition);
}

.ym-goal--done .ym-goal__fill {
    background: var(--ym-success);
}

.ym-goal__scale {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-sub);
}

.ym-details {
    margin-top: 6px;
}

.ym-details > summary {
    display: inline-flex;
    cursor: pointer;
    list-style: none;
}

.ym-details > summary::-webkit-details-marker {
    display: none;
}

.ym-goal-form {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

/* ---------- مقارنة الجلستين ---------- */

.ym-compare {
    margin-top: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.ym-compare__row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 10px;
    padding: 11px 14px;
    align-items: center;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

.ym-compare__row:last-child {
    border-bottom: none;
}

.ym-compare__row--head {
    background: var(--input-bg);
    font-weight: 700;
    color: var(--text-sub);
    font-size: 12px;
}

/* المقارنة أربعة أعمدة، ولا تُقرأ على شاشة هاتف: تُحوَّل إلى صفّين */
@media (max-width: 640px) {
    .ym-compare__row {
        grid-template-columns: 1fr 1fr;
    }

    .ym-compare__row--head {
        display: none;
    }
}

.ym-delta--up {
    color: var(--ym-success);
    font-weight: 700;
}

.ym-delta--down {
    color: var(--ym-danger);
    font-weight: 700;
}

/* ============================================================
   لوحة تفسير الذكاء الاصطناعي
   ============================================================ */

/* الحدّ الجانبي يميّزها بصرياً عن الأرقام الحتمية فوقها: هذه قراءة، لا قياس */
.ym-ai-note {
    border-inline-start: 3px solid var(--ym-warning);
    background: var(--input-bg);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 16px 18px;
    margin-block-start: 6px;
}

/* نصّ النموذج يصل بأسطر جديدة لا بوسوم، فيُحترم تنسيقه دون السماح بـHTML */
.ym-ai-note__body {
    white-space: pre-wrap;
    margin-block-start: 12px;
    line-height: 1.85;
    font-size: 14.5px;
}