/* ==========================================================================
   🌓 1. نظام الألوان الديناميكي (نهاري / ليلي) - مربوط بمحرك MudBlazor
   ========================================================================== */
:root {
    /* ☀️ الوضع النهاري */
    --bg-body: #f1f5f9;
    --bg-surface: #ffffff;
    --primary-blue: #0A58CA;
    --primary-hover: #084298;
    --royal-blue: #1976D2;
    --text-main: #1e293b;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
    --input-bg: #ffffff;
    --sidebar-width: 260px;
    --sidebar-mini-width: 70px;
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* 🌙 الوضع الليلي */
[data-theme="dark"], body.dark-mode {
    --bg-body: #0f172a !important; 
    --bg-surface: #1e293b !important; 
    --primary-blue: #3b82f6 !important;
    --text-main: #f8fafc !important; 
    --text-muted: #94a3b8 !important;
    --border-color: #334155 !important;
    --input-bg: #0f172a !important;
    --card-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4) !important;
}

/* ==========================================================================
   🚀 2. إبادة الفراغات البيضاء (الحل النووي)
   ========================================================================== */
html, body, #app, .page { 
    margin: 0 !important; 
    padding: 0 !important; 
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important; /* نمنع سكرول المتصفح الخارجي */
    background-color: var(--bg-body) !important;
}

body, h1, h2, h3, h4, h5, h6, p, span, div, table, th, td, button, input { 
    font-family: 'Tajawal', sans-serif !important; 
}

/* ==========================================================================
   🔵 3. شريطة العنوان (الهيدر الأزرق) - مفرودة ولزقة في السقف
   ========================================================================== */
.page-header-bar { 
    height: 70px; 
    background-color: #2196F3 !important; 
    color: #FFFFFF !important; 
    padding: 0 20px !important; 
    margin: 0 !important; /* لزقة في السقف وفي الدرج */
    width: 100% !important;
    display: flex !important; 
    align-items: center !important; 
    justify-content: space-between !important;
    box-sizing: border-box !important;
    z-index: 1000;
}

/* زرار الهامبورجر والتحكم */
.menu-trigger-white { background: transparent; border: none; color: white; font-size: 24px; cursor: pointer; padding: 0 10px; }
.btn-circle-white { width: 35px; height: 35px; border-radius: 50%; border: none; background: white; color: #2196F3; display: flex; align-items: center; justify-content: center; cursor: pointer; }

/* البحث المتسنتر */
.global-search-box { position: relative; width: 450px; }
.global-search-box input { 
    width: 100%; border-radius: 25px; border: none; padding: 8px 45px; 
    background: rgba(255,255,255,0.2); color: white; transition: 0.3s;
}
.global-search-box input:focus { background: white; color: #1e293b; outline: none; }
.global-search-box i { position: absolute; left: 15px; top: 12px; color: white; }
[dir="rtl"] .global-search-box i { left: auto; right: 15px; }

/* بروفايل مدير النظام */
.user-info { line-height: 1.2; text-align: right; }
.user-name { font-weight: 800; font-size: 14px; color: white; }
.user-role { font-size: 11px; color: rgba(255,255,255,0.8); }
.pw-link { font-size: 10px; color: rgba(255,255,255,0.6); cursor: pointer; text-decoration: underline; }

/* ==========================================================================
   📌 4. الدرج (Sidebar) - ثابت ومنظم
   ========================================================================== */
.app-sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    background-color: var(--bg-surface) !important;
    border-inline-end: 1px solid var(--border-color);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
.app-sidebar.mini { width: var(--sidebar-mini-width); }

/* تنسيق اللوجو فوق */
.sidebar-header { height: 70px; display: flex; align-items: center; padding: 0 20px; border-bottom: 1px solid var(--border-color); }
.logo-text { font-weight: 800; font-size: 1.2rem; color: #2196F3; margin-inline-start: 10px; }
.app-sidebar.mini .logo-text { display: none; }

/* ==========================================================================
   📦 5. منطقة المحتوى (Main Content)
   ========================================================================== */
.main-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* شريط الـ AI */
.ai-pill-banner { 
    margin: 20px 15px !important; 
    background: var(--bg-surface) !important; 
    border: 1px solid var(--border-color);
    border-radius: 50px; 
    overflow: hidden;
}
.ai-progress-container { width: 100%; height: 4px; background: rgba(0,0,0,0.05); }
.ai-progress-bar { height: 100%; transition: width 0.4s ease; }

/* ==========================================================================
   🩸 6. الجداول والكروت (إصلاح الدارك مود)
   ========================================================================== */
.card, .mud-card {
    background-color: var(--bg-surface) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    box-shadow: var(--card-shadow) !important;
}

.table, table { color: var(--text-main) !important; }
.table td, .table th { 
    background-color: var(--bg-surface) !important; 
    border-bottom: 1px solid var(--border-color) !important; 
}

/* حماية النصوص في الدارك مود */
[data-theme="dark"] .text-dark { color: #f8fafc !important; }
[data-theme="dark"] .bg-white { background-color: var(--bg-surface) !important; }

/* ==========================================================================
   📜 7. سكرول بار شيك
   ========================================================================== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #475569; }