/* ملائم — التصميم الخامس (2026-10-22). يُحمَّل آخر ملف أنماط في crm/index.html وprojects.html، بعد easy.css.
   طلب المالك: شكل جديد فعلاً على الكمبيوتر والجوال، سهل ومريح، بلا طابع القوالب الجاهزة.
   الفكرة: ورق دافئ بدل الرمادي، خط Readex Pro وحده، شريط علوي بخمسة أبواب بدل القائمة الجانبية، وخطوط رفيعة
   بدل الظلال والإطارات الثقيلة، والمتابعة تُنجز بضغطة دائرة كقائمة مهام. اللون يحمل معنى فقط: أحمر للمتأخر،
   وكهرماني لما حان موعده، وأخضر لـ«تم»، ولون الشعار للإجراء الرئيسي. الجوال يحتفظ ببطاقات easy.css. */

:root {
    --font: 'Readex Pro', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, system-ui, sans-serif;

    --bg: #f7f5f0;
    --surface: #ffffff;
    --surface-2: #faf9f6;
    --hover: #f3f0ea;
    --ink: #17191c;
    --ink-2: #3b3f45;
    --muted: #61676e;
    --line: #e7e3db;
    --line-2: #d4cfc5;

    --brand: #1d5d64;
    --brand-hover: #174d53;
    --brand-soft: #e3eeee;
    --brand-ink: #1d5d64;
    --on-brand: #ffffff;

    --danger: #b3261e;
    --danger-soft: #fbeeec;
    --danger-line: #f1c7c2;
    --amber: #9a5b13;
    --amber-soft: #fbf2e3;
    --ok: #0b7a56;
    --ok-soft: #e6f4ee;
    --done: #0b7a56;
    --done-hover: #096346;

    --r-lg: 14px;
    --r-md: 10px;
    --r-sm: 8px;
    --shadow-1: none;

    /* أسماء الطبقات السابقة (css/theme.css وcrm/crm.css) تأخذ القيم نفسها */
    --page: var(--bg);
    --card: var(--surface);
    --soft: var(--surface-2);
    --line-strong: var(--line-2);
    --accent: var(--brand);
    --accent-soft: var(--brand-soft);
    --warn: var(--amber);
    --warn-soft: var(--amber-soft);
    --lift: none;
    --bg-page: var(--bg);
    --bg-card: var(--surface);
    --bg-light: var(--surface-2);
    --border-light: var(--line);
    --text-primary: var(--ink);
    --text-secondary: var(--ink-2);
    --text-muted: var(--muted);
    --primary-gold: var(--brand);
    --shadow-sm: none;
    --shadow-card: none;
}

body.crm-dark {
    --bg: #141618;
    --surface: #1c1f22;
    --surface-2: #202427;
    --hover: #262a2e;
    --ink: #ebe8e1;
    --ink-2: #c9c5bd;
    --muted: #a6a39b;
    --line: rgba(255, 255, 255, 0.09);
    --line-2: rgba(255, 255, 255, 0.16);
    --brand: #8fc6cb;
    --brand-hover: #a6d4d8;
    --brand-soft: rgba(143, 198, 203, 0.14);
    --brand-ink: #8fc6cb;
    --on-brand: #10272a;
    --danger: #f0998f;
    --danger-soft: rgba(240, 153, 143, 0.12);
    --danger-line: rgba(240, 153, 143, 0.3);
    --amber: #e5b36e;
    --amber-soft: rgba(229, 179, 110, 0.12);
    --ok: #7dd3ad;
    --ok-soft: rgba(125, 211, 173, 0.12);
    --done: #2f9a74;
    --done-hover: #3bb087;
}

body { font-family: var(--font); background: var(--bg); color: var(--ink); font-size: 15px; }
h1, h2, h3 { letter-spacing: -0.01em; }

/* ===================== الشريط العلوي (الكمبيوتر) ===================== */

@media (min-width: 701px) {
    .shell { display: block; min-height: 100vh; }
    .side {
        position: sticky;
        top: 0;
        z-index: 40;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 20px;
        height: 60px;
        padding: 0 28px;
        border: 0;
        border-bottom: 1px solid var(--line);
        background: var(--surface);
        overflow: visible;
    }
    .side-brand { flex: 0 0 auto; padding: 0; border: 0; gap: 10px; }
    .side-logo { width: 32px; height: 32px; border-radius: 8px; }
    .side-name strong { font-size: 1rem; font-weight: 600; }
    .side-name span { display: none; }

    /* القائمة كانت عمودية (app.css): هنا صف واحد بارتفاع الشريط */
    .side .crm-nav {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 2px;
        flex: 0 1 auto;
        width: auto;
        height: 60px;
        max-height: none;
        padding: 0;
        margin: 0;
        overflow: visible;
    }
    .side .crm-nav a {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 60px;
        margin: 0;
        padding: 0 12px;
        border: 0;
        border-radius: 0;
        background: none;
        color: var(--ink-2);
        font-size: 0.95rem;
        font-weight: 500;
    }
    .side .crm-nav a .nav-icon { display: none; }
    .side .crm-nav a:hover { background: none; color: var(--ink); }
    .side .crm-nav a.active { background: none; color: var(--brand-ink); font-weight: 600; box-shadow: none; }
    .side .crm-nav a.active::after {
        content: '';
        position: absolute;
        inset-inline: 12px;
        bottom: -1px;
        height: 2px;
        border-radius: 2px 2px 0 0;
        background: var(--brand);
    }
    .side .crm-nav a.nav-foot { margin: 0; padding: 0 12px; border: 0; color: var(--muted); font-size: 0.9rem; }
    .side .crm-nav .nav-count { position: static; margin-inline-start: 2px; }

    .side-search { order: 3; margin-inline-start: auto; width: 200px; flex: 0 1 200px; padding: 0; }
    .side-search input { min-height: 36px; border-radius: 999px; background: var(--surface-2); border-color: var(--line); }
    .side-search input:focus { background: var(--surface); }
    .side-search-ico { inset-inline-start: 12px; margin-top: -9px; }

    .side-user { order: 4; margin: 0; padding: 0; border: 0; display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
    .side-user .user-badge { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; background: none; border: 0; padding: 0; color: var(--ink-2); font-size: 0.88rem; font-weight: 500; }
    .side-user-actions { gap: 6px; flex: 0 0 auto; }
    .side .theme-toggle, .side .logout-btn { min-height: 36px; border-radius: 999px; white-space: nowrap; }
    .side .logout-btn { padding: 4px 14px; font-size: 0.85rem; }

    main#view { max-width: 1200px; margin: 0 auto; padding: 28px 28px 56px; }
}

/* الأحجام المتوسطة (لوحي وجوال بالعرض): الشريط لا يتجاوز الشاشة — البحث يُخفى، والقائمة تُسحب جانبياً إن ضاقت */
@media (min-width: 701px) and (max-width: 1100px) {
    .side { gap: 12px; padding: 0 16px; }
    .side .crm-nav { flex: 1 1 0; min-width: 0; overflow-x: auto; scrollbar-width: none; }
    .side .crm-nav::-webkit-scrollbar { display: none; }
    .side .crm-nav a { flex: 0 0 auto; padding: 0 9px; font-size: 0.9rem; }
    .side-search { display: none; }
    .side-user .user-badge { display: none; }
}
@media (min-width: 701px) and (max-width: 860px) {
    .side-name { display: none; }
}

/* الجوال: ما يفيض عرضاً داخل الصفحة يُقصّ عند حافتها بدل أن يوسّع المستند (الخط الأعرض زاد بعض النصوص 2–6 نقاط على 320) */
@media (max-width: 700px) {
    main#view { overflow-x: clip; }
}

/* أضيق الجوالات (320): الشريط السفلي لا يتجاوز الشاشة */
@media (max-width: 360px) {
    .tabbar { max-width: 100vw; }
    .tabbar { padding-inline: 0; gap: 0; }
    .tabbar a, .tabbar button { flex: 1 1 0; min-width: 0; padding-inline: 0; overflow: hidden; }
    .tabbar a span, .tabbar button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 0.66rem; white-space: nowrap; }
}

/* ===================== رأس الصفحة والبطاقات ===================== */

/* العنوان أكبر على الكمبيوتر فقط؛ على الجوال يبقى بحجم app.css ويلتف بدل أن يتجاوز الشاشة */
.w4-title h1 { font-weight: 600; overflow-wrap: anywhere; }
@media (min-width: 701px) { .w4-title h1 { font-size: 1.7rem; } }
@media (max-width: 700px) { .w4-title h1 { font-size: 1.35rem; white-space: normal; } }
.w4-sub { font-size: 0.92rem; }

.crm-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: none; }
.crm-card > h2, .crm-card-head h2 { font-size: 1.05rem; font-weight: 600; }

.btn { border-radius: var(--r-md); font-weight: 500; box-shadow: none; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); box-shadow: none; }
.btn-primary:hover:not(:disabled) { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn-outline { background: var(--surface); border-color: var(--line-2); color: var(--ink-2); }
.btn-outline:hover:not(:disabled) { background: var(--hover); border-color: var(--line-2); color: var(--ink); }

.crm-toolbar input, .crm-toolbar select, .form-group input, .form-group select, .form-group textarea {
    border-radius: var(--r-md);
    border-color: var(--line-2);
    background: var(--surface);
    box-shadow: none;
}

.badge { border: 0; border-radius: 999px; padding: 2px 10px; font-size: 0.8rem; font-weight: 500; }
.badge-neutral { background: var(--surface-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.badge-green { background: var(--ok-soft); color: var(--ok); }
.badge-gold { background: var(--amber-soft); color: var(--amber); }
.badge-orange { background: var(--amber-soft); color: var(--amber); }
.badge-red { background: var(--danger-soft); color: var(--danger); }
.badge-blue { background: var(--brand-soft); color: var(--brand-ink); }

/* الجداول: لا خلفية للرأس ولا خطوط عمودية؛ خط رفيع بين الصفوف */
.crm-table th, .users-table th {
    background: transparent;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 500;
    border-bottom: 1px solid var(--line);
    padding: 10px 14px;
}
.crm-table td, .users-table td { padding: 13px 14px; border-bottom: 1px solid var(--line); }
.crm-table tbody tr:last-child > td { border-bottom: 0; }
.crm-table tbody tr:hover > td, .users-table tbody tr:hover > td { background: var(--hover); }

/* التبويبات (ملف العميل والصفقة): خط تحت التبويب الفعّال بدل حبّة مظللة */
.admin-tabs, .crm-tabs {
    padding: 0;
    gap: 4px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: none;
    box-shadow: none;
}
.admin-tab {
    border: 0;
    border-radius: 0;
    background: none;
    padding: 10px 14px;
    color: var(--muted);
    font-weight: 500;
    box-shadow: none;
}
.admin-tab:hover { background: none; color: var(--ink); }
.admin-tab.active { background: none; color: var(--brand-ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--brand); }

/* ===================== «عملي اليوم» ===================== */

/* الأرقام: شريط واحد مقسوم بخطوط رفيعة بدل خمس بطاقات */
@media (min-width: 701px) {
    .w4-kpis {
        display: flex;
        gap: 0;
        border: 1px solid var(--line);
        border-radius: var(--r-lg);
        background: var(--surface);
        overflow: hidden;
    }
    .w4-kpi {
        flex: 1 1 0;
        padding: 14px 18px;
        border: 0;
        border-inline-end: 1px solid var(--line);
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    .w4-kpi:last-child { border-inline-end: 0; }
    .w4-kpi-num { font-size: 1.6rem; font-weight: 600; }
    .w4-kpi-link:hover { background: var(--hover); border-color: var(--line); }
    .w4-kpi-late { background: var(--danger-soft); }
    .w4-kpi-late:hover { background: var(--danger-soft); border-color: var(--line); }
}

.w4-panel { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: none; }
.w4-panel-head { padding: 12px 18px; }
.w4-panel-head h2 { font-weight: 600; }
.w4-row { padding: 12px 18px; }
.w4-name { font-weight: 600; }
.w4-badge { background: none; padding: 0; font-weight: 500; }

/* الكمبيوتر: اتصال وواتساب أيقونتان خفيفتان، و«تم» دائرة تُملأ بالأخضر عند المرور — كقائمة مهام */
@media (min-width: 701px) {
    .w4-icon { width: 36px; height: 36px; border-color: transparent; background: transparent; color: var(--muted); }
    .w4-icon:hover { background: var(--brand-soft); border-color: transparent; color: var(--brand-ink); }
    .w4-icon-wa:hover { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
    .w4-done {
        position: relative;
        width: 36px;
        height: 36px;
        min-height: 36px;
        padding: 0;
        justify-content: center;
        border: 1.5px solid var(--line-2);
        border-radius: 50%;
        background: var(--surface);
        color: var(--ink-2);
        box-shadow: none;
    }
    .w4-done span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    body.crm-dark .w4-done { background: var(--surface); border-color: var(--line-2); color: var(--ink-2); }
    .w4-done .ico { width: 18px; height: 18px; stroke-width: 2.2; }
    .w4-done:hover:not(:disabled), .w4-done:focus-visible { background: var(--done); border-color: var(--done); color: #fff; }
}

/* ===================== «الإدارة» و«كيف أبدأ؟» ===================== */

.hub { box-shadow: none; }
.hub-ico { border-radius: 50%; }
.help-num { background: var(--brand-soft); color: var(--brand-ink); }

/* ===================== الجوال: الشريط السفلي أهدأ ===================== */

@media (max-width: 700px) {
    .tabbar { background: var(--surface); border-top: 1px solid var(--line); box-shadow: none; }
    .tabbar a.active, .tabbar button.active { background: none; color: var(--brand-ink); }
    .nav-sheet-panel { border-radius: 18px 18px 0 0; }
}

/* ===================== صفحة المشاريع والخريطة (projects.html) ===================== */

/* الرأس: «إضافة مشروع» وحده زر؛ «إضافة من نص أو ملف» و«تصدير» رابطان */
.p4-quick .btn-outline { border-color: transparent; background: transparent; color: var(--brand-ink); }
.p4-quick .btn-outline:hover { background: var(--brand-soft); }

/* الأرقام الثلاثة: شريط واحد مقسوم بخطوط رفيعة */
@media (min-width: 701px) {
    .p4 .stats-bar { gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
    .p4 .stat-card { border: 0; border-inline-end: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 14px 18px; }
    .p4 .stat-card:last-child { border-inline-end: 0; }
    .p4 .stat-card h3 { font-size: 1.5rem; font-weight: 600; }
}

/* البطاقة: صورة أقصر، الاسم، الحالة، السعر بارزاً، ثم النوع والمساحة والوحدات سطراً واحداً */
.p4 .project-card { box-shadow: none; }
.p4 .project-card:hover { border-color: var(--line-2); }
.p4 .project-image, .p4 .project-img-placeholder { height: 128px; }
.p4 .project-info { gap: 5px; padding: 12px 14px 12px; }
.p4 .project-card-header h3 { font-size: 1rem; font-weight: 600; }
.p4 .project-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.p4 .project-badges > * { display: inline-flex; align-items: center; gap: 4px; font-size: 0.74rem; font-weight: 500; }
.p4 .project-price { justify-content: flex-start; margin-top: 2px; }
.p4 .project-price span:first-child { display: none; }
.p4 .project-price span:last-child { font-size: 1.08rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.p4 .project-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; color: var(--muted); font-size: 0.86rem; }
.p4 .project-meta .project-type { font-weight: 600; }
.p4 .project-meta .project-type::after { content: '·'; margin-inline-start: 8px; color: var(--line-2); }
.p4 .project-stock { justify-content: flex-start; gap: 6px; color: var(--muted); font-size: 0.86rem; }
.p4 .project-stock span:first-child { font-weight: 500; }
.p4 .project-stock span:first-child::after { content: ':'; }
.p4 .project-stock span:last-child { color: var(--ink-2); font-weight: 500; }
.p4 .added-by-badge { font-size: 0.78rem; }

/* عرض الوحدات: أعمدة بحسب الغرف بلا ألوان قديمة؛ رأس العمود اسم وعدد وإجمالي، والبطاقة اسم ومشروع وسطر مواصفات وسعر */
.p4 .kanban-board { gap: 14px; margin: 0; }
.p4 .kanban-column { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: none; max-height: calc(100vh - 140px); }
.p4 .kanban-column:hover { box-shadow: none; border-color: var(--line); }
.p4 .kanban-header, .p4 .kanban-header.rooms-4, .p4 .kanban-header.rooms-3, .p4 .kanban-header.rooms-2, .p4 .kanban-header.rooms-other {
    padding: 12px 16px;
    background: transparent;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    text-align: start;
}
.p4 .kanban-header-title { margin-bottom: 2px; font-size: 1rem; font-weight: 600; }
.p4 .kanban-header-title .count-badge { background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); font-size: 0.78rem; font-weight: 500; }
/* إجمالي أسعار العمود (مثل 51 مليوناً) محذوف بطلب المالك 2026-10-22: رقم كبير بلا فائدة للموظف */
.p4 .kanban-header-price { display: none; }
.p4 .kanban-header-title { margin-bottom: 0; }
.p4 .kanban-cards { padding: 12px; gap: 10px; }
.p4 .kanban-card { border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: none; }
.p4 .kanban-card:hover { border-color: var(--brand); box-shadow: none; }
.p4 .kanban-card-bar { display: none; }
.p4 .kanban-card-body { padding: 12px 14px; }
.p4 .kanban-card-title { font-size: 1rem; font-weight: 600; }
.p4 .kanban-card-project { margin-bottom: 6px; padding-bottom: 0; border-bottom: 0; color: var(--muted); font-weight: 500; font-size: 0.86rem; }
.p4 .kanban-card-detail { color: var(--muted); font-size: 0.84rem; line-height: 1.6; }
.p4 .kanban-card-detail strong { color: var(--ink-2) !important; font-weight: 500; }
.p4 .kanban-card-footer { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.p4 .kanban-card-price { color: var(--ink); font-size: 1.02rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.p4 .kanban-card-status { border-radius: 999px; padding: 2px 10px; font-size: 0.78rem; font-weight: 500; }
.p4 .kanban-card-status.available { background: var(--ok-soft); color: var(--ok); }
.p4 .kanban-card-status.reserved { background: var(--amber-soft); color: var(--amber); }
.p4 .kanban-card-status.sold { background: var(--danger-soft); color: var(--danger); }
.p4 .view-toggle-bar .btn.active { background: var(--brand-soft); border-color: var(--brand-soft); color: var(--brand-ink); }

/* أزرار البطاقة: تظهر عند المرور عليها بالماوس؛ على اللمس ظاهرة دائماً */
.p4 .project-actions { border-top: 0; padding-top: 4px; margin-top: 2px; }
.p4 .project-actions .btn { min-height: 32px; font-size: 0.82rem; }
.p4 .project-actions .btn-success { background: var(--surface); color: var(--brand-ink); border: 1px solid var(--line-2); }
.p4 .project-actions .btn-success:hover { background: var(--brand-soft); border-color: var(--brand); }
@media (hover: hover) and (min-width: 701px) {
    .p4 .project-actions { visibility: hidden; opacity: 0; transition: opacity 0.12s; }
    .p4 .project-card:hover .project-actions, .p4 .project-card:focus-within .project-actions { visibility: visible; opacity: 1; }
}

/* ===================== زر واحد في كل مكان ===================== */
/* طلب المالك: «الأزرار كثيرة». القاعدة: رأس الصفحة زر رئيسي واحد وما عداه رابط، والصفوف معلومات؛
   إجراءات الصف تظهر عند المرور بالماوس (أو التركيز بلوحة المفاتيح)، وعلى اللمس تبقى ظاهرة لكن خفيفة. */

/* الرقم نفسه رابط اتصال، واتصال/واتساب أيقونتان خفيفتان بلا إطار */
.phone-cell { display: inline-flex; align-items: center; gap: 4px; }
a.phone-num { color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; }
a.phone-num:hover { color: var(--brand-ink); }
.phone-act, .phone-act.phone-wa {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    font-size: 0;
    line-height: 0;
}
.phone-act .ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.phone-act:hover { background: var(--brand-soft); color: var(--brand-ink); }
.phone-act.phone-wa:hover { background: var(--ok-soft); color: var(--ok); }

/* رأس الصفحة: الزر الثانوي رابط بلا إطار */
.w4-head .w4-quick .btn-outline { border-color: transparent; background: transparent; color: var(--brand-ink); }
.w4-head .w4-quick .btn-outline:hover { background: var(--brand-soft); }
.w4-panel-link { color: var(--brand-ink); text-decoration: none; font-weight: 500; }
.w4-panel-link:hover { text-decoration: underline; }

/* الكمبيوتر بماوس: إجراءات الصف مخفية حتى المرور عليه (إلا «تم» ودائرة الإنجاز) */
@media (hover: hover) and (min-width: 701px) {
    /* visibility لا opacity وحدها: المخفي لا يُحسب نصاً باهتاً، ويبقى مكانه محجوزاً. التركيز على رابط الصف يُظهرها */
    .crm-table tr .phone-act,
    .crm-table tr td.cell-actions .btn,
    .crm-table tr .btn-xs:not(.btn-success),
    .w4-row .w4-icon { visibility: hidden; opacity: 0; transition: opacity 0.12s; }
    .crm-table tr:hover .phone-act, .crm-table tr:focus-within .phone-act,
    .crm-table tr:hover td.cell-actions .btn, .crm-table tr:focus-within td.cell-actions .btn,
    .crm-table tr:hover .btn-xs, .crm-table tr:focus-within .btn-xs,
    .w4-row:hover .w4-icon, .w4-row:focus-within .w4-icon { visibility: visible; opacity: 1; }
}

/* قائمة الحساب في الشريط العلوي (app.js: wireUserMenu) */
.user-menu { position: relative; }
.user-menu > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    cursor: pointer;
}
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary:hover, .user-menu[open] > summary { background: var(--hover); }
.user-menu-ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; color: var(--muted); }
.user-menu .side-user-actions {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-end: 0;
    z-index: 50;
    display: grid;
    gap: 2px;
    min-width: 190px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 10px 30px rgba(23, 25, 28, 0.1);
}
.user-menu .theme-toggle, .user-menu .logout-btn {
    width: 100%;
    min-height: 38px;
    justify-content: flex-start;
    padding: 6px 10px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--ink-2);
    font-size: 0.9rem;
    text-align: start;
}
.user-menu .theme-toggle::after { content: 'الوضع الليلي'; margin-inline-start: 8px; }
.user-menu .theme-toggle:hover, .user-menu .logout-btn:hover { background: var(--hover); color: var(--ink); }