@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap");

/* --- 1. Variables and Global Reset - تحديث الألوان للتباين والراحة --- */
:root {
    /* Colors - Blue Serenity Palette */
    --color-primary: #17a2b8; /* الأزرق الهادئ/التركوازي */
    --color-secondary: #0f6674; /* أغمق للتفاعل */
    --color-accent: #d2e7fa; /* خلفية الشريط الجانبي البارزة */
    --color-bg-light: #f5fafd; /* خلفية الصفحة الرئيسية (كسر حدة الأبيض) */
    --color-bg-dark: #ffffff; /* خلفية العناصر البارزة (الودجات) - أبيض نقي */
    --color-text-main: #2c3e50; /* لون النص الأساسي (أزرق غامق للوضوح) */
    --color-text-muted: #888888; /* لون النص الثانوي */
    --color-border: #ccddee; /* لون الحدود الخفيفة (أزرق خفيف) */
    --color-shadow: rgba(0, 0, 0, 0.12); /* لون الظل القوي */

    /* Dimensions & Style */
    --border-radius-lg: 14px; /* زوايا أكبر وأكثر نعومة */
    --border-radius-md: 10px;
    --transition-speed: 0.3s;
    --navbar-height: 60px; /* شريط علوي أكبر قليلاً */
    --font-size-base: 1rem;
}

/* Base Font and Background - تطبيق الخلفية الجديدة وخط 600 */
body, .chart-container, .page-container {
    font-family: "Cairo", sans-serif !important;
    color: var(--color-text-main);
    background-color: #a7cee5 !important;
    font-weight: 600; /* خط شبه بولد للوضوح */
}

/* Scrollbar Styling (Blue and Light) */
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
*::-webkit-scrollbar-track {
    background: var(--color-bg-light);
}
*::-webkit-scrollbar-thumb {
    background-color: var(--color-primary);
    border-radius: 10px;
    border: 2px solid var(--color-bg-light);
}
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) var(--color-bg-light);
}

/* H1-H6 Headers - بولد قوي للوضوح */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--color-secondary); /* لون أغمق للعناوين */
    font-weight: 700;
}

/* --- 2. Navbar & Header --- */
header.navbar.sticky-top, .navbar {
    background-color: var(--color-primary) !important;
    height: var(--navbar-height);
    box-shadow: 0 px 2px var(--color-shadow);
    border-bottom-left-radius: var(--border-radius-md);
    border-bottom-right-radius: var(--border-radius-md);
}
.navbar-nav .icon {
    stroke: var(--color-bg-dark) !important;
    stroke-width: 2;
}
.navbar .navbar-nav .nav-link {
    color: var(--color-bg-dark) !important;
    font-weight: 600;
    transition: color var(--transition-speed) ease-in-out;
}
.navbar .navbar-nav .nav-link:hover {
    color: var(--color-bg-light) !important;
}
/* Breadcrumbs */
#navbar-breadcrumbs li.disabled a, #navbar-breadcrumbs a {
    color: var(--color-bg-dark) !important;
    font-weight: 600;
}
#navbar-breadcrumbs a::before {
    border-color: var(--color-bg-dark);
}
/* Hide Help dropdown for cleaner interface */
.dropdown-help {
    display: none !important;
}


/* --- 3. Sidebar (Desk Sidebar & Main Layout) - تقليل التباعد لزيادة الرؤية --- */
.layout-side-section {
    background-color: var(--color-accent) !important;
    border-right: none;
    border-radius: var(--border-radius-lg);
    padding: px 4px !important; /* تقليل الإزاحة الداخلية */
    box-shadow: 2px 0 8px var(--color-shadow);
    min-width: 200px; /* عرض أقل قليلاً */
}
.desk-sidebar .standard-sidebar-item {
    background-color: var(--color-bg-dark); 
    border: .5px solid var(--color-border); 
    margin-bottom: 3px; /* تقليل الهامش بين العناصر */
    padding: 2px 4px; /* تقليل الإزاحة الداخلية للعنصر */
    border-radius: var(--border-radius-md); 
    transition: all var(--transition-speed);
    font-weight: 900; 
    font-size: 0.9rem; /* خط أصغر قليلاً */
}
/* Active/Hover State for Sidebar Items */
.desk-sidebar .standard-sidebar-item:hover, 
.desk-sidebar .standard-sidebar-item.selected {
    background-color: var(--color-primary) !important; 
    color: var(--color-bg-dark) !important; 
    font-weight: 700;
    border: 1px solid var(--color-secondary); 
    box-shadow: 0 2px 5px rgba(0, 86, 179, 0.2);
    transform: none; /* إزالة الحركة لتوفير المساحة */
}
.layout-side-section a {
    color: var(--color-text-main);
}
.layout-side-section .icon, .layout-side-section .sidebar-label .icon {
    stroke: var(--color-secondary) !important;
    width: 25px; /* تصغير الأيقونات قليلاً */
    height: 20px;
}
.desk-sidebar .standard-sidebar-item:hover .icon,
.desk-sidebar .standard-sidebar-item.selected .icon {
    stroke: var(--color-bg-dark) !important;
}

/* --- 4. Widgets (Cards) and Workspace - تقليل التباعد --- */
.widget, .widget.dashboard-widget-box {
    border-radius: var(--border-radius-lg);
    background: var(--color-bg-dark) !important; 
    box-shadow: 0 4px 15px var(--color-shadow); 
    border: 1px solid var(--color-border);
    margin-bottom: 15px !important; /* تقليل الهامش السفلي للـ Widgets */
    padding: 15px; /* تقليل الإزاحة الداخلية */
}
.widget:hover {
    transform: translateY(-2px); 
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* --- Shortcut Widget Specific Enhancements --- */
.widget.links-widget-box .link-item, .widget.shortcut-widget-box .link-item {
    color: var(--color-text-main);
    background-color: var(--color-bg-light); /* خلفية فاتحة مختلفة */
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md); 
    margin-bottom: 10px;
    padding: 10px;
    transition: all var(--transition-speed);
    display: flex; 
    align-items: center;
}
.widget.links-widget-box .link-item:hover, .widget.shortcut-widget-box .link-item:hover {
    background-color: var(--color-accent) !important;
    color: var(--color-secondary) !important;
    border-color: var(--color-secondary); 
}

/* Make Shortcut Icons Square and Blue */
.widget.links-widget-box .link-item .icon, 
.widget.shortcut-widget-box .link-item .icon {
    stroke: var(--color-primary) !important;
    fill: var(--color-accent); 
    padding: 6px;
    border-radius: 6px; 
    margin-inline-end: 15px; 
    box-shadow: 0 1px 4px rgba(23, 162, 184, 0.2);
}

/* --- 5. Forms, Inputs, and Buttons --- */
/* Form Controls (الحقول) */
.form-control, .awesomplete input {
    padding: 10px 15px; /* حجم مريح */
    font-size: var(--font-size-base);
    background-color: var(--color-bg-dark) !important;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    transition: all var(--transition-speed);
    font-weight: 700;
}
.form-control:focus, .awesomplete input:focus {
    border: 2px solid var(--color-primary); 
    box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.35); 
    background: var(--color-bg-dark) !important;
}

/* Form Sections/Tabs */
.form-section.card-section, .form-dashboard-section {
    border-bottom: 3px solid var(--color-secondary);
    border-radius: var(--border-radius-md);
    padding: var(--padding-xs);
    margin-top: 15px;
}
.form-tabs-list {
    background-color: var(--color-primary) !important;
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
}
.form-tabs-list .nav-link.active {
    background-color: var(--color-secondary) !important;
    color: var(--color-bg-dark) !important;
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
    font-weight: 700;
}

/* Primary Button Styling (الأزرار الأساسية) */
.btn-primary, .btn-primary.primary-action {
    color: #fff !important;
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    border-radius: var(--border-radius-md);
    padding: 10px 22px; 
    font-size: 1.05rem;
    box-shadow: 0 4px 8px rgba(23, 162, 184, 0.3);
    transition: all var(--transition-speed);
    font-weight: 700;
}
.btn-primary:hover, .btn-primary.primary-action:hover {
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
    transform: translateY(-3px); 
    box-shadow: 0 8px 20px rgba(23, 162, 184, 0.5); 
}

/* Secondary Button Styling (الأزرار الثانوية) */
.btn-secondary {
    color: var(--color-primary) !important;
    background-color: transparent !important;
    border: 2px solid var(--color-primary) !important;
    border-radius: var(--border-radius-md);
    padding: 10px 22px;
    font-size: 1.05rem;
    transition: all var(--transition-speed);
    font-weight: 700;
}
.btn-secondary:hover {
    color: var(--color-bg-dark) !important;
    background-color: var(--color-primary) !important;
    transform: translateY(-2px);
}

/* Submit Button Specific Color (زر الإرسال/الحفظ) */
.btn-primary.primary-action[data-label="Submit"],
.btn-primary.primary-action[data-label="%D8%AA%D8%B3%D8%AC%D9%8A%D9%84"],
.btn-primary.primary-action[data-label="%D8%AD%D9%81%D8%B8"] {
    background-color: #28a745 !important; /* أخضر أكثر وضوحاً */
    border-color: #28a745 !important;
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.4);
}

/* --- 6. Lists and Data Tables --- */
/* List Head/Header Row */
.frappe-list .level.list-row-head {
    background-color: #92cbff; /* لون أغمق */
    border-radius: var(--border-radius-md);
}
.frappe-list .level.list-row-head .list-header-subject,
.frappe-list .level.list-row-head .list-count {
    color: var(--color-bg-dark);
    font-weight: 700;
}
/* List Rows */
.frappe-list .list-row-container {
    border-bottom: 1px solid var(--color-border);
}
.frappe-list .list-row-container:hover {
    background-color: var(--color-accent);
}
/* Datatable - Cleaner Style */
.datatable .dt-header .dt-cell--header .dt-cell__content {
    font-weight: 700;
    background-color: var(--color-accent);
    color: var(--color-secondary);
    border-bottom: 2px solid var(--color-primary);
    text-align: center;
}
.datatable .dt-row .dt-cell .dt-cell__content {
    border: 1px solid var(--color-border);
}
.datatable .dt-row:nth-child(even) {
    background-color: var(--color-bg-dark);
}
.datatable .dt-row:nth-child(odd) {
    background-color: var(--color-bg-light);
}

/* --- 7. Images and Misc --- */
img {
    border: 1px solid var(--color-accent);
    border-radius: var(--border-radius-md);
}
.text-muted {
    color: #000000 !important;
    font-weight: 600 !important;
}
/* --- 8. Page Header (رأس الصفحة) - تقليل المساحة وتحسين الخط --- */

/* --- 9. Sidebar (شريط التنقل الجانبي) - ضغط واحترافية عالية --- */

/* 1. تقليل العرض وضبط الخلفية */
.sidebar {
    width: 220px !important; /* تقليل العرض من 240px إلى 220px */
    background: var(--color-bg-light) !important; /* خلفية ناعمة */
    box-shadow: 2px 0 5px var(--color-shadow-light);
    transition: width 0.3s ease;
}

/* 2. تحسين مظهر روابط القائمة وضغط المساحة العمودية */
.sidebar-item a, 
.sidebar-item .sidebar-item-label {
    /* تقليل الإزاحة الداخلية لضغط المساحة */
    padding: 7px 10px !important; /* تقليل من 10px/12px إلى 7px/10px */
    margin: 0 !important;
    
    /* تحسين الخطوط */
    font-size: 0.95rem !important; /* حجم خط أصغر وأكثر دقة */
    font-weight: 500 !important; /* خط سميك معتدل للقراءة */
    color: var(--text-color) !important; /* لون نص احترافي */
    line-height: 1.2 !important; /* ضغط ارتفاع السطر */
    
    /* لمسة جمالية عند المرور */
    transition: background-color 0.2s;
    border-radius: var(--border-radius-sm);
}

/* 3. ضغط وتنسيق عناوين الأقسام (Module Headings) */
.sidebar-module-list-item > a {
    padding-top: 10px !important; 
    padding-bottom: 5px !important; /* تقليل المساحة تحت العنوان */
    font-size: 1.1rem !important; /* حجم أكبر قليلاً للعناوين */
    font-weight: 700 !important; 
    color: var(--color-secondary) !important; /* تمييز لون العنوان */
    pointer-events: none; /* جعل العنوان غير قابل للضغط (إذا كان غير وظيفي) */
}

/* 4. تنسيق العنصر النشط (Active Item) بشكل مميز */
.sidebar-item.active a {
    background-color: var(--color-accent) !important; /* خلفية لون التمييز */
    color: var(--color-on-accent) !important; /* نص أبيض أو فاتح على الخلفية المميزة */
    font-weight: 600 !important; /* تمييز الخط في الحالة النشطة */
    border-radius: var(--border-radius-sm);
}
.sidebar-item.active a:hover {
    background-color: var(--color-accent-dark) !important; 
}

/* 5. ضغط الأيقونات لتقليل المسافات */
.sidebar-item .sidebar-item-label .menu-icon {
    margin-right: 5px !important; /* تقليل المسافة بين الأيقونة والنص */
    font-size: 1.1rem !important;
}

/* 6. تحسين التمرير (Scrollbar) في الشريط الجانبي */
.sidebar-item-list-container {
    padding-right: 0 !important;
}
/* إخفاء شريط التمرير الافتراضي في بعض المتصفحات (اختياري) */
.sidebar-item-list-container::-webkit-scrollbar {
    width: 6px;
}
.sidebar-item-list-container::-webkit-scrollbar-thumb {
    background-color: var(--color-accent);
    border-radius: 10px;
}
lement.style {
}
.navbar-home img {
    max-height: 42px;
    width: auto;
}
.app-logo {
    width: 24px;
}
/*
 * Custom CSS for ERPNext V15 - Styling with Prominent Colored Borders
 *
 * الهدف: تحسين مظهر شريط التنقل (Navbar) وتوفير حواف ملونة مميزة
 * للحقول بناءً على نوع البيانات، مما يسهل التعرف عليها بصريًا.
 */

:root {
    --primary-color: #3b82f6; /* Tailwind blue-500 - لون التركيز الرئيسي */
    --input-border-color: #e5e7eb; /* رمادي فاتح للحدود العادية */
    --input-focus-color: #60a5fa; /* Tailwind blue-400 - لون التركيز عند النقر */
    
    /* ألوان مميزة للحواف الجديدة بناءً على الطلب */
    --date-field-color: #f59e0b; /* كهرماني/برتقالي لحقول التاريخ */
    --data-field-color: #4f46e5; /* نيلي لحقول البيانات والنصوص والأرقام */
    
    --border-radius-base: 6px;
}

/* -------------------------------------- */
/* 1. Navbar Spacing & Styling (توسيع شريط التنقل) */
/* -------------------------------------- */

.navbar-main {
    /* إضافة مساحة علوية وسفلية لجعل شريط التنقل أكثر اتساعاً */
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    /* ظل خفيف لجعله يبدو عائماً */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    background-color: #ffffff;
}

/* -------------------------------------- */
/* 2. General Input Field Styling (الأنماط العامة) */
/* -------------------------------------- */

.form-control {
    /* حواف مستديرة لجميع المدخلات */
    border-radius: var(--border-radius-base) !important;
    /* حد خفيف لجميع المدخلات كقاعدة */
    border: 1px solid var(--input-border-color) !important;
    /* ارتفاع موحد وأفضل */
    height: 38px !important;
    transition: all 0.2s ease-in-out;
}

/* تأثير التركيز (Focus State) لجميع الحقول */
.form-control:focus,
.form-control:active {
    border-color: var(--input-focus-color) !important;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.3) !important;
    background-color: #fff !important;
}

/* -------------------------------------- */
/* 3. Type-Specific Field Styling (الحواف الملونة المميزة) */
/* -------------------------------------- */

/* === DATE / DATETIME FIELDS (برتقالي) === */
.frappe-control[data-fieldtype="Date"] .form-control,
.frappe-control[data-fieldtype="Datetime"] .form-control {
    /* حافة يسار سميكة ومميزة بلون كهرماني */
    border-left: 4px solid var(--date-field-color) !important;
    /* خلفية كريمية خفيفة لزيادة التمييز */
    background-color: #fefcf3;
}

.frappe-control[data-fieldtype="Date"] .form-control:focus,
.frappe-control[data-fieldtype="Datetime"] .form-control:focus {
    /* التأكد من بقاء الحافة البرتقالية عند التركيز */
    border-left-color: var(--date-field-color) !important;
}

/* === DATA / TEXT / NUMBER / CURRENCY FIELDS (نيلي) === */
.frappe-control[data-fieldtype="Data"] .form-control,
.frappe-control[data-fieldtype="Small Text"] .form-control,
.frappe-control[data-fieldtype="Int"] .form-control,
.frappe-control[data-fieldtype="Float"] .form-control,
.frappe-control[data-fieldtype="Currency"] .form-control {
    /* حافة يسار سميكة ومميزة بلون نيلي */
    border-left: 4px solid var(--data-field-color) !important;
    background-color: #ffffff;
}

.frappe-control[data-fieldtype="Data"] .form-control:focus,
.frappe-control[data-fieldtype="Small Text"] .form-control:focus,
.frappe-control[data-fieldtype="Int"] .form-control:focus,
.frappe-control[data-fieldtype="Float"] .form-control:focus,
.frappe-control[data-fieldtype="Currency"] .form-control:focus {
    /* التأكد من بقاء الحافة النيلية عند التركيز */
    border-left-color: var(--data-field-color) !important;
}

/* === TEXTAREA (للتأكد من أنها لا تحصل على حافة ملونة إذا لم تكن من نوع البيانات) === */
textarea.form-control {
    min-height: 80px;
    height: auto !important;
    padding: 8px 12px;
    border-left: 1px solid var(--input-border-color) !important; /* حافة عادية للمناطق الكبيرة */
    background-color: #ffffff;
}

/* === OTHER FIELDS (Select, Link, Check) === */
/* للتأكد من أن جميع الحقول الأخرى تعود إلى الحد العادي 1px */
.frappe-control[data-fieldtype]:not([data-fieldtype="Date"]):not([data-fieldtype="Datetime"]):not([data-fieldtype="Data"]):not([data-fieldtype="Small Text"]):not([data-fieldtype="Int"]):not([data-fieldtype="Float"]):not([data-fieldtype="Currency"]) .form-control {
    border-left: 1px solid var(--input-border-color) !important;
    background-color: #ffffff;
}

/* ==================== 🏷 WIDGETS ==================== */
/* Using simple defaults: A clean white background and a modest blue accent */
:root {
    --clean-background: #fffbfb;
    --clean-primary: #17a2b8; /* A calm, professional cyan/teal */
    --clean-border: #e9ecef; /* Very light gray border */
    --clean-text: #495057;
    --clean-radius: 6px;
    --clean-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Very light, subtle shadow */
}

.widget {
    background-color: var(--clean-background) !important;
    color: var(--clean-text);
    border: 1px solid var(--clean-border);
    border-radius: var(--clean-radius);
    box-shadow: var(--clean-shadow);
    margin: 10px; /* Small amount of spacing */
    transition: all 0.2s ease-in-out; /* Smooth transitions */
}

/* Optional: Subtle border change on hover for interactivity */
.widget:hover {
    border-color: var(--clean-primary);
}

.widget .widget-head {
    /* Use the primary color for clear separation */
    background-color: var(--clean-primary);
    color: white; /* Always white text on the primary color */
    font-size: 1.1em;
    font-weight: 500;
    padding: 8px 15px; /* Less padding than before */
    /* Only round the top corners */
    border-radius: var(--clean-radius) var(--clean-radius) 0 0;
}

/* Add a basic style for content padding */
.widget-content {
    padding: 15px;
}
/* --- New: General Icon Style Enhancement --- */
.icon {
    /* تطبيق لون الثيم الثانوي (الأزرق الداكن) على الأيقونات بشكل عام */
    stroke: var(--color-secondary) !important; 
    stroke-width: 2.2; /* زيادة سمك الخط قليلاً للوضوح */
    transition: all var(--transition-speed);
}
/* أيقونات الأزرار تظل بيضاء لتباينها مع اللون الأساسي */
.btn-primary .icon {
    stroke: var(--color-bg-dark) !important;
}

/* تحسين أيقونات شريط التنقل العلوي */
.navbar-nav .icon {
    stroke: var(--color-bg-dark) !important;
    width: 22px; 
    height: 22px;
}
/* --- Widgets & Cards (إضافة لمسة عائمة بسيطة) --- */
.widget, .widget.dashboard-widget-box {
    /* الظل الأقوى الذي كان موجودًا */
    box-shadow: 0 5px 15px var(--color-shadow); 
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
}
.widget:hover {
    /* ظل أعمق قليلاً عند المرور للتمييز */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); 
    transform: translateY(-3px); /* تأثير رفع لطيف */
}

/* --- Input Field Border (تنعيم حواف الحقول) --- */
.form-control {
    /* ... (Existing styles) ... */
    border: 1px solid #dcdcdc !important; /* لون رمادي فاتح جديد لحواف الحقول العادية */
}
.form-control:focus, .awesomplete input:focus {
    /* إزالة الظل الذي كان يغطي الحافة اليسرى الملونة */
    box-shadow: none !important; 
    /* إضافة حافة كاملة بلون التركيز دون التأثير على الحافة اليسرى الملونة */
    outline: 2px solid var(--input-focus-color); 
    outline-offset: -2px; /* لتجنب زيادة حجم الحقل */
}

/* === تحسين الحواف الملونة للحقول (تأكيد العمق) === */
.frappe-control[data-fieldtype="Date"] .form-control,
.frappe-control[data-fieldtype="Datetime"] .form-control {
    border-left: 5px solid var(--date-field-color) !important; /* زيادة سمك الحافة لـ 5px */
}
.frappe-control[data-fieldtype="Data"] .form-control,
.frappe-control[data-fieldtype="Small Text"] .form-control,
.frappe-control[data-fieldtype="Int"] .form-control,
.frappe-control[data-fieldtype="Float"] .form-control,
.frappe-control[data-fieldtype="Currency"] .form-control {
    border-left: 5px solid var(--data-field-color) !important; /* زيادة سمك الحافة لـ 5px */
}

/* --- 2. Navbar & Header (Compressed & Stylish) --- */
header.navbar.sticky-top, .navbar {
    /* ضغط الارتفاع لجعله أقل */
    height: 50px !important; 
    min-height: 50px !important;
    
    background-color: var(--color-primary) !important; 
    
    /* ظل ناعم لخلق عمق بصري */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 
    
    /* إزالة الزوايا السفلية ليتصل بشكل مباشر بالصفحة */
    border-radius: 0 !important; 
    
    display: flex;
    align-items: center;
    padding: 0 15px;
}

/* الأيقونات في الـ Navbar */
.navbar-nav .icon {
    stroke: var(--color-bg-dark) !important;
    width: 20px;
    height: 20px;
    stroke-width: 2;
}
.navbar .navbar-nav .nav-link {
    color: var(--color-bg-dark) !important;
    font-weight: 600;
    transition: color 0.3s ease-in-out;
}

/* المسارات (Breadcrumbs) */
#navbar-breadcrumbs li.disabled a, #navbar-breadcrumbs a {
    color: var(--color-bg-dark) !important;
    font-weight: 600;
}
#navbar-breadcrumbs a::before {
    border-color: var(--color-bg-dark);
}

/* شريط البحث (Search Bar) - شكل دائري وأنيق */
.navbar-form .form-control {
    height: 30px !important; /* ضغط ارتفاع شريط البحث */
    border-radius: 15px; /* شكل حبة دواء أو دائري */
    background-color: rgba(255, 255, 255, 0.9); /* خلفية شبه شفافة */
    border: none;
    color: var(--color-text-main);
}
.navbar-form .btn-search {
    color: var(--color-secondary) !important;
}

/* إخفاء قائمة المساعدة لتبسيط الواجهة */
.dropdown-help {
    display: none !important;
}

---

## 📄 رأس الصفحة (Page Header) - التبسيط والتمييز

هذا الجزء مخصص لمنطقة **عنوان الصفحة** والأزرار الرئيسية التي تظهر أسفل الـ Navbar.

```css
/* --- Page Header (رأس الصفحة) - مبسط ومميز --- */
.page-head {
    /* تقليل الإزاحة الداخلية (Padding) الرأسية لضغط المساحة */
    padding-top: 10px !important; 
    padding-bottom: 10px !important;
    
    background-color: var(--color-bg-dark) !important; 
    
    /* إضافة حافة سفلية رفيعة بلون الثيم الثانوي */
    border-bottom: 3px solid var(--color-secondary) !important; 
    
    /* ظل خفيف جداً */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); 
    margin-bottom: 10px;
}

/* تحسين شكل عنوان الصفحة (DocType Title) */
.page-head .title-text {
    font-size: 1.8rem;
    font-weight: 900;
    color: #171717 !important;
    line-height: 1.2;
}

/* تحسين الأزرار في رأس الصفحة */
.page-actions .btn-group .btn {
    padding: 6px 15px;
    font-size: 0.9rem;
}
.page-head {
    z-index: 6;
    position: sticky;
    top: var(--navbar-height);
    background: #a7cee5;
    margin-bottom: 10px;
    transition: 0.5s top;
}