/* ERPNext V15 Professional UI - Enhanced Edition
   Focus: Compact Header, Prominent Search, Accent Line Separation, and Modern Look
*/

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

:root {
    /* لوحة ألوان هادئة واحترافية */
    --color-primary: #2c3e50;
    --color-accent: #3498db;
    --color-accent-soft: rgba(52, 152, 219, 0.08);
    --color-accent-hover: #2980b9;
    --color-bg-page: #f5f7fa;
    --color-bg-card: #ffffff;
    --color-border: #e1e8ed;
    --color-text-main: #2c3e50;
    --color-text-muted: #7f8c8d;
    --color-separator: #3498db;
    --color-success: #27ae60;
    --color-warning: #f39c12;
    --color-danger: #e74c3c;
    
    /* أبعاد مضغوطة (Compact Dimensions) */
    --navbar-height: 38px;
    --sidebar-width: 220px;
    --radius-std: 5px;
    --radius-sm: 3px;
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 2px 6px rgba(0,0,0,0.06);
    --shadow-lg: 0 4px 10px rgba(0,0,0,0.08);
}

/* --- 1. التأسيس والخطوط المحسنة --- */
body, .chart-container, .page-container {
    font-family: "Cairo", sans-serif !important;
    color: var(--color-text-main);
    background-color: var(--color-bg-page) !important;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 650;
    letter-spacing: 0.005em;
}

/* --- 2. الناف بار (Ultra-Compact Navbar) --- */
header.navbar.sticky-top, .navbar {
    background-color: #70b6e5 !important;
    height: var(--navbar-height) !important;
    min-height: var(--navbar-height) !important;
    border-bottom: 1px solid var(--color-border) !important;
    box-shadow: var(--shadow-sm) !important;
    padding: 0 12px !important;
    display: flex;
    align-items: center;
}

.navbar .container-fluid {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0;
}

/* شريط البحث العرضي المتميز (Wide Search Bar) */
.navbar .search-bar, .navbar-form {
    flex: 1;
    max-width: 600px;
    margin: 0 15px;
     font-weight: 650;
    position: relative;
        background-color: #f5f7fa !important;

}

.navbar-form .form-control {
    background-color: #f8fafc !important;
    border: 1px solid transparent !important;
    border-radius: 18px !important;
    height: 28px !important;
    font-size: 13px;
    padding: 0 15px 0 38px !important;
    transition: var(--transition);
    width: 100% !important;
    box-shadow: var(--shadow-sm);
}

.navbar-form .form-control:focus {
    background-color: white !important;
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 0 2px var(--color-accent-soft), var(--shadow-md) !important;
    outline: none;
}

/* إضافة أيقونة بحث داخل شريط البحث */
.navbar-form::before {
    content: "🔍";
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    z-index: 1;
    font-size: 16px;
}

/* --- 3. الهيدر (Page Head) - مساحة أقل --- */
.page-head {
    background: var(--color-bg-card) !important;
    padding: 6px 0 !important;
    border-bottom: 1px solid var(--color-border) !important;
    margin-bottom: 8px !important;
    box-shadow: var(--shadow-sm);
}

.page-head .container {
    padding: 0 12px;
}

.page-head .title-text {
    font-size: 1.25rem !important;
    font-weight: 900 !important;
    color: var(--color-primary);
    margin: 0;
    line-height: 1.2;
}

.page-head .page-title-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* --- 4. تأثير الخط الفاصل الملون (Accent Line) --- */
/* يطبق على عناوين الأقسام في السايد بار والورك سبيس ودخول البيانات */
.sidebar-module-list-item > a, 
.form-section-heading, 
.widget-head,
.layout-side-section .sidebar-label,
.form-page .section-head {
    position: relative;
    padding-bottom: 8px;
    margin-bottom: 12px;
    display: block;
    font-weight: 900 !important;
    color: var(--color-primary);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* الخط الفاصل تحت العناوين - بالعرض الكامل */
.sidebar-module-list-item > a::after,
.form-section-heading::after,
.widget-head::after,
.layout-side-section .sidebar-label::after,
.form-page .section-head::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, var(--color-separator), transparent);
    border-radius: 1px;
}

/* خطوط فاصل ملونة بين العناصر */
.form-grid .row > div {
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 4px;
}

.form-grid .row > div:not(:last-child)::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: -10px;
    width: 1px;
    height: 70%;
    background-color: var(--color-border);
}

/* --- 5. الشريط الجانبي (Professional Sidebar) --- */
.layout-side-section {
    width: var(--sidebar-width) !important;
    background-color: var(--color-bg-card) !important;
    padding: 12px !important;
    border-right: 1px solid var(--color-border) !important;
    box-shadow: var(--shadow-sm);
    overflow-y: auto;
    transition: var(--transition);
}

.desk-sidebar .standard-sidebar-item {
    margin-bottom: 3px !important;
    padding: 7px 12px !important;
    border-radius: var(--radius-std) !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    display: flex;
    align-items: center;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.desk-sidebar .standard-sidebar-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background-color: var(--color-accent);
    transform: translateX(-100%);
    transition: var(--transition);
}

.desk-sidebar .standard-sidebar-item:hover {
    background-color: rgba(52, 152, 219, 0.04) !important;
    padding-left: 15px !important;
}

.desk-sidebar .standard-sidebar-item.selected {
    background-color: var(--color-accent-soft) !important;
    color: var(--color-accent) !important;
    padding-left: 15px !important;
}

.desk-sidebar .standard-sidebar-item.selected::before {
    transform: translateX(0);
}

/* --- 6. حقول إدخال البيانات (Data Entry) --- */
.form-control, .control-input {
    border: 1px solid #70e2e5 !important;
    border-radius: var(--radius-std) !important;
    height: 32px !important;
    font-size: 12px !important;
    transition: var(--transition);
    background-color: #f4f8f9 !important;
}

.form-control:focus, .control-input:focus {
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 0 2px var(--color-accent-soft) !important;
    outline: none;
}

/* الخط الملون الجانبي للحقول بناءً على النوع */
.frappe-control[data-fieldtype="Date"] .form-control,
.frappe-control[data-fieldtype="Datetime"] .form-control {
    border-left: 3px solid var(--color-warning) !important;
}

.frappe-control[data-fieldtype="Data"] .form-control,
.frappe-control[data-fieldtype="Link"] .form-control {
    border-left: 3px solid var(--color-accent) !important;
}

.frappe-control[data-fieldtype="Int"] .form-control,
.frappe-control[data-fieldtype="Float"] .form-control {
    border-left: 3px solid var(--color-success) !important;
}

.frappe-control[data-fieldtype="Text"] .form-control,
.frappe-control[data-fieldtype="Long Text"] .form-control {
    border-left: 3px solid var(--color-primary) !important;
}

/* تحسين مظهر العناوين والقيم في النماذج */
.form-group .control-label {
    font-weight: 750 !important;
    color: var(--color-text-main) !important;
    font-size: 13px !important;
    margin-bottom: 4px !important;
}

/* --- 7. الأزرار (Compact Buttons) --- */
.btn {
    padding: 5px 12px !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    border-radius: var(--radius-std) !important;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    border: none !important;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.btn-primary {
    background-color: var(--color-accent) !important;
    color: white !important;
}

.btn-primary:hover {
    background-color: var(--color-accent-hover) !important;
}

.btn-success {
    background-color: var(--color-success) !important;
    color: white !important;
}

.btn-danger {
    background-color: var(--color-danger) !important;
    color: white !important;
}

.btn-default {
    background-color: white !important;
    color: var(--color-text-main) !important;
    border: 1px solid var(--color-border) !important;
}

.btn-default:hover {
    background-color: var(--color-bg-page) !important;
}

/* --- 8. القوائم (List View) --- */
.frappe-list .list-row-container {
    padding: 7px 12px !important;
    border-bottom: 1px solid var(--color-border) !important;
    transition: var(--transition);
}

.frappe-list .list-row-container:hover {
    background-color: rgba(52, 152, 219, 0.03) !important;
}

.list-row-head {
    background-color: var(--color-bg-page) !important;
    font-size: 12px !important;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 900 !important;
    color: var(--color-text-muted) !important;
}

.list-row-head .list-row-checkbox {
    margin-top: 2px;
}

/* --- 9. تحسينات عامة --- */
/* الكروت والنماذج */
.form-layout, .form-page, .report-wrapper, .document-view {
    background-color: var(--color-bg-card) !important;
    border-radius: var(--radius-std) !important;
    box-shadow: var(--shadow-sm) !important;
    padding: 12px !important;
    margin-bottom: 12px !important;
}

/* الجداول */
.table {
    border-radius: var(--radius-std) !important;
    overflow: hidden !important;
}

.table thead th {
    background-color: var(--color-bg-page) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    letter-spacing: 0.4px !important;
    color: var(--color-text-muted) !important;
    border-bottom: 2px solid var(--color-border) !important;
}

.table tbody tr {
    transition: var(--transition);
}

.table tbody tr:hover {
    background-color: rgba(52, 152, 219, 0.03) !important;
}

/* علامات التبويب */
.nav-tabs {
    border-bottom: 2px solid var(--color-border) !important;
}

.nav-tabs .nav-link {
    border: none !important;
    border-bottom: 2px solid transparent !important;
    color: var(--color-text-muted) !important;
    font-weight: 750 !important;
    padding: 6px 12px !important;
    margin-right: 4px;
    transition: var(--transition);
}

.nav-tabs .nav-link:hover {
    color: var(--color-accent) !important;
    border-bottom-color: var(--color-accent) !important;
}

.nav-tabs .nav-link.active {
    color: var(--color-accent) !important;
    background-color: transparent !important;
    border-bottom-color: var(--color-accent) !important;
}

/* سكرول بار مخفي وناعم */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-page);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}






/* -------------------------------------- */
/* 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;
}
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; /* لتجنب زيادة حجم الحقل */
}

.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: 3px solid var(--color-border);
    margin-bottom: 15px !important; /* تقليل الهامش السفلي للـ Widgets */
    padding: 1px; /* تقليل الإزاحة الداخلية */
}
.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: 2px solid var(--color-border);
    border-radius: var(--border-radius-md); 
    margin-bottom: 1.5px;
    padding: px;
    transition: all var(--transition-speed);
    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: 5px; 
    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: 5px;
}
.grid-heading-row {
    border-bottom: 1px solid #ca0000;
    color: #000000;
    background-color: #afdfff;
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    letter-spacing: .02em;
    height: 32px;
    padding: 0 !important;
    border-top-right-radius: var(--border-radius-md);
    border-top-left-radius: var(--border-radius-md);
}