/*
=====================================================================
 SUNEXE ERP - JOB ORDER
 Organized & Documented CSS
=====================================================================
 دليل سريع:
 - تم الحفاظ على أسماء الـ Classes والـ IDs الأصلية.
 - التعليقات العربية تشرح وظيفة كل مجموعة وعناصرها.
 - تم ترتيب الملف بصرياً ليسهل البحث والصيانة.
 - لم يتم تغيير منطق التصميم أو المقاسات الأصلية.
 الفهرس:
 01) Main Overlay & Window
 02) Header & Main Frame
 03) Left Search & Grid
 04) Right Side Panels
 05) Vehicle Image & Drawing Canvas
 05) Job Order Rows 1-8
 07) Job Order Rows 21-28
 08) Bottom Grid
 09) Footer & Archive
 10) Main Command Buttons
 11) Responsive Notes
=====================================================================
*/
/* =========================================================
   01. MAIN OVERLAY
   الغلاف الرئيسي لشاشة Job Order بالكامل.
   يحدد مساحة العمل الأساسية 1920×1080 ويمنع خروج المحتوى.
   ========================================================= */
.JOOyC{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;            /* الارتفاع المرجعي الكامل للواجهة */
  z-index:10000;               /* إبقاء النافذة فوق المحتوى العادي */
  overflow:hidden;         /* إخفاء أي جزء يتجاوز حدود الحاوية */
  box-sizing:border-box;
}
/* ---------------------------------------------------------
   MAIN WINDOW
   النافذة الرئيسية التي تظهر في منتصف الـ Overlay.
   top/left مع translate مسؤولون عن التوسيط الدقيق.
   --------------------------------------------------------- */
.JOWC{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%); /* إكمال التوسيط أفقياً ورأسياً */
  width:80%;
  height:72%;
  overflow:hidden;
  background:#dde3ee;
  border:2px solid #b08d3b;
  border-radius:5px;
  box-shadow:
      0 0 0 1px #e2c875,
      0 0 18px rgba(0,0,0,.65);
  box-sizing:border-box;
  padding:8px;
}
/* =========================================================
   02. HEADER
   عنوان نافذة Job Order والخط الفاصل أسفله.
   ========================================================= */
.JOWHC {
    font-size: 14px;
    font-weight: bold;
    color: #2f3d52;
    padding: 2px 2px 2px 2px;
    border-bottom: 1px solid #b7c1d3;
}
/* ---------------------------------------------------------
   MAIN FRAME
   يقسم المحتوى إلى عمود أيسر بعرض 280px وباقي المساحة لليمين.
   --------------------------------------------------------- */
.JOWMC {
    margin-top: 6px;
    height:auto;
    background: #f2f4fb;
    border: 1px solid #98a5bf;
    padding: 6px;
    display: grid;
    grid-template-columns: 280px 1fr; /* القائمة اليسرى ثابتة، واليمين مرن */
    gap: 6px;
    box-sizing: border-box;
}
/* ===== LEFT LIST ===== */
/* =========================================================
   03. LEFT SEARCH AREA
   شريط البحث أعلى القائمة اليسرى.
   Flex يحافظ على العناصر في سطر واحد ومتناسق.
   ========================================================= */
.JOWMLC{
    width:100%;                       /* استخدام كامل عرض العمود الأيسر */
    height:100%;                      /* استخدام كامل الارتفاع المتاح */
    display:flex;                     /* استخدام Flex لترتيب العناصر */
    flex-direction:column;            /* البحث أعلى والجدول أسفل */
    min-width:0;                      /* منع المحتوى من توسيع الحاوية */
    min-height:0;                     /* مهم للسماح للجدول بالـScroll */
    overflow:hidden;                  /* منع خروج العناصر خارج الحاوية */
    background:#f8fafc;               /* لون خلفية الجزء الأيسر */
    border:1px solid #c5cad8;         /* الحد الخارجي */
    box-sizing:border-box;            /* احتساب Border ضمن الحجم */
}
/* =========================================================
   02. JOWMLS
   شريط البحث الموجود أعلى القائمة اليسرى
   ========================================================= */
.JOWMLSC{
    width:100%;                       /* استخدام كامل عرض الحاوية */
    height:30px;                      /* ارتفاع ثابت لشريط البحث */
    display:flex;                     /* وضع العناصر في صف واحد */
    align-items:center;               /* توسيط العناصر رأسياً */
    gap:5px;                          /* المسافة بين عناصر البحث */
    padding:3px 5px;                  /* مسافة داخلية حول العناصر */
    background:#eef2f7;               /* خلفية شريط البحث */
    border-bottom:1px solid #c7cfdb;  /* خط فاصل أسفل البحث */
    flex-shrink:0;                    /* منع الشريط من الانكماش */
    box-sizing:border-box;            /* الحفاظ على الحجم المحدد */
}
/* =========================================================
   03. JOWMLSL
   Label الخاص باختصار JO
   ========================================================= */
.JOWMLSLC{
    width:32px;                       /* عرض Label */
    height:20px;                      /* ارتفاع Label */
    display:inline-flex;              /* Flex داخل Label */
    align-items:center;               /* توسيط النص رأسياً */
    justify-content:center;           /* توسيط النص أفقياً */
    padding:0 4px;                    /* مسافة داخلية */
    background:#e6ebf2;               /* خلفية Label */
    border:1px solid #b8c0cf;         /* الحد */
    border-radius:3px;                /* تدوير بسيط للأركان */
    font:bold 10px Tahoma,Arial;      /* نوع وحجم الخط */
    color:#2b2f36;                    /* لون النص */
    white-space:nowrap;               /* منع نزول النص لسطر آخر */
    flex-shrink:0;                    /* منع تغيير عرضه */
    box-sizing:border-box;
}
/* =========================================================
   04. JOWMLSDD
   DropDownList الخاص بعدد السجلات
   100 / 200 / All
   ========================================================= */
.JOWMLSDDC{
    width:55px;                       /* عرض القائمة */
    height:20px;                      /* ارتفاع القائمة */
    padding:0 3px;                    /* مسافة داخلية */
    background:#ffffff;               /* خلفية القائمة */
    border:1px solid #b8c0cf;         /* الحد */
    border-radius:3px;                /* تدوير الأركان */
    font:10px Tahoma,Arial;           /* الخط */
    color:#2b2f36;                    /* لون النص */
    outline:none;                     /* إزالة Outline الافتراضي */
    flex-shrink:0;                    /* منع القائمة من الانكماش */
    box-sizing:border-box;
}
/* عند الضغط على DropDownList */
.JOWMLSDDC:focus{
    border-color:#7d91ae;             /* تغيير لون الحد عند التركيز */
    background:#ffffff;               /* إبقاء الخلفية بيضاء */
}
/* =========================================================
   05. JOWMLST
   TextBox الخاص بكتابة نص البحث
   ========================================================= */
.JOWMLSTC{
    height:20px;                      /* نفس ارتفاع باقي العناصر */
    flex:1;                           /* يأخذ المساحة المتبقية */
    min-width:30px;                   /* منع اختفاء TextBox تماماً */
    padding:0 5px;                    /* مسافة داخلية للنص */
    background:#ffffff;               /* خلفية خانة البحث */
    border:1px solid #aeb9c9;         /* الحد */
    border-radius:3px;                /* تدوير الأركان */
    font:10px Tahoma,Arial;           /* الخط */
    color:#252d38;                    /* لون الكتابة */
    outline:none;                     /* إزالة Outline الافتراضي */
    box-sizing:border-box;
}
/* عند الكتابة داخل TextBox */
.JOWMLSTC:focus{
    background:#fdfefe;               /* خلفية فاتحة */
    border-color:#748aa9;             /* إبراز الحد */
}
/* =========================================================
   06. JOWMLSB
   زر Search
   ========================================================= */
.JOWMLSBC{
    width:55px;                       /* عرض زر Search */
    height:20px;                      /* ارتفاع الزر */
    padding:0 5px;                    /* مسافة داخلية */
    background:linear-gradient(
        #f7f9fb,
        #d9dfe8
    );                                /* تدرج معدني خفيف */
    border:1px solid #b1bac8;         /* حد الزر */
    border-radius:3px;                /* تدوير بسيط */
    font:bold 10px Tahoma,Arial;      /* الخط */
    color:#2b2f36;                    /* لون النص */
    cursor:pointer;                   /* مؤشر اليد */
    flex-shrink:0;                    /* منع تصغير الزر */
    box-sizing:border-box;
}
/* عند مرور الماوس على Search */
.JOWMLSBC:hover{
    background:linear-gradient(
        #ffffff,
        #ccd5e1
    );                                /* تفتيح الزر */
    border-color:#98a6ba;             /* إبراز الحد */
}
/* عند الضغط على Search */
.JOWMLSBC:active{
    background:linear-gradient(
        #ccd5e1,
        #f3f5f8
    );                                /* عكس التدرج لإحساس الضغط */
}
/* =========================================================
   07. JOWMLSL1
   Label الخاص بعدد نتائج البحث
   ========================================================= */
.JOWMLSL1C{
    min-width:25px;                   /* أقل عرض للعداد */
    height:20px;                      /* نفس ارتفاع العناصر */
    display:inline-flex;              /* Flex لتوسيط الرقم */
    align-items:center;               /* توسيط رأسي */
    justify-content:center;           /* توسيط أفقي */
    padding:0 4px;                    /* مسافة داخلية */
    background:#ffffff;               /* خلفية العداد */
    border:1px solid #c1c9d5;         /* الحد */
    border-radius:3px;                /* تدوير بسيط */
    font:bold 10px Tahoma,Arial;      /* الخط */
    color:#455268;                    /* لون الرقم */
    white-space:nowrap;               /* منع التفاف النص */
    flex-shrink:0;                    /* منع تصغير العداد */
    box-sizing:border-box;
}
=============== */
.JOWMLBC{
    width:100%;                         /* استخدام كامل عرض الجزء الأيسر */
    height:650px;                       /* ارتفاع منطقة الجدول بالكامل */
    min-width:0;                        /* منع المحتوى من زيادة عرض الحاوية */
    min-height:0;                       /* السماح للعناصر الداخلية بالـ Scroll */
    padding:6px;                        /* مسافة بين الجدول وحدود الحاوية */
    background:#fdfefe;                 /* لون خلفية جسم القائمة */
    border:1px solid #d5d8e4;           /* الحد الخارجي */
    overflow:hidden;                    /* منع خروج الجدول خارج الحاوية */
    box-sizing:border-box;              /* إدخال Padding وBorder ضمن الحجم */
}
/* =========================================================
   02. JOWMLBC
   الحاوية الداخلية التي تمسك الـ GridView.
   وهي المسؤولة عن الـ Scroll الرأسي.
   ========================================================= */
.JOWMLBCC{
    width:100%;                         /* استخدام كامل عرض العنصر الأب */
    height:100%;                        /* استخدام كامل ارتفاع JOWMLB */
    overflow-y:auto;                    /* Scroll رأسي عند زيادة عدد السجلات */
    overflow-x:hidden;                  /* منع ظهور Scroll أفقي */
    background:#ffffff;                 /* خلفية بيضاء للجدول */
    border:1px solid #cfd6e3;           /* الحد المحيط بمنطقة الجدول */
    border-radius:2px;                  /* تدوير خفيف جداً للأركان */
    box-sizing:border-box;              /* الحفاظ على الحجم النهائي */
}
/* =========================================================
   03. JOWMLBCG
   الـ GridView نفسه.
   يحتوي على Header وصفوف البيانات.
   ========================================================= */
.JOWMLBCGC{
    width:100%;                         /* الجدول يأخذ كامل عرض الحاوية */
    border-collapse:collapse;           /* دمج حدود خلايا الجدول */
    border-spacing:0;                   /* إزالة المسافات بين الخلايا */
    font-family:Tahoma,Arial;           /* نوع الخط */
    font-size:10px;                     /* حجم الخط */
    color:#2b3442;                      /* لون النص الأساسي */
    background:#ffffff;                 /* خلفية الجدول */
    box-sizing:border-box;              /* تثبيت حساب الحجم */
}
/* =========================================================
   04. GRID HEADER
   رأس جدول نتائج البحث.
   يبقى ثابتاً أثناء تحريك الـ Scroll.
   ========================================================= */
.JOWMLBCGC th{
    position:sticky;                    /* تثبيت Header أثناء Scroll */
    top:0;                              /* تثبيته في أعلى الحاوية */
    z-index:2;                          /* إبقاء Header فوق الصفوف */
    height:26px;                        /* ارتفاع رأس الجدول */
    padding:5px 8px;                    /* المسافة داخل خلايا Header */
    background:linear-gradient(
        #eef2f8,
        #d8dfeb
    );                                  /* تدرج رمادي/فضي هادئ */
    border-bottom:1px solid #b9c3d6;    /* خط أسفل Header */
    border-right:1px solid #d5dbe5;     /* خط بين الأعمدة */
    font:bold 10px Tahoma,Arial;        /* خط Header */
    color:#344258;                      /* لون النص */
    text-align:left;                    /* محاذاة العنوان لليسار */
    vertical-align:middle;              /* توسيط النص رأسياً */
    white-space:nowrap;                 /* منع العنوان من النزول لسطر آخر */
    box-sizing:border-box;              /* الحفاظ على أبعاد الخلية */
}
/* إزالة الحد من آخر عمود في Header */
.JOWMLBCGC th:last-child{
    border-right:none;                  /* عدم وضع خط بعد آخر عمود */
}
/* =========================================================
   05. GRID ROW CELLS
   خلايا البيانات داخل صفوف GridView.
   ========================================================= */
.JOWMLBCGC td{
    height:24px;                        /* ارتفاع كل صف */
    padding:4px 8px;                    /* المسافة داخل الخلية */
    background:#ffffff;                 /* الخلفية الطبيعية للصف */
    border-bottom:1px solid #eef1f6;    /* خط أفقي بين الصفوف */
    border-right:1px solid #f0f2f6;     /* خط خفيف بين الأعمدة */
    font:10px Tahoma,Arial;             /* خط البيانات */
    color:#303846;                      /* لون النص */
    vertical-align:middle;              /* توسيط البيانات رأسياً */
    white-space:nowrap;                 /* منع نزول النص لسطر آخر */
    overflow:hidden;                    /* إخفاء النص الزائد */
    text-overflow:ellipsis;             /* إظهار ... إذا كان النص طويلاً */
    box-sizing:border-box;              /* الحفاظ على حجم الخلية */
}
/* إزالة الحد من آخر عمود */
.JOWMLBCGC td:last-child{
    border-right:none;                  /* إزالة الخط من آخر خلية */
}
/* =========================================================
   06. ALTERNATING ROWS
   اختلاف بسيط بين الصفوف لتسهيل القراءة.
   ========================================================= */
.JOWMLBCGC tr:nth-child(even) td{
    background:#fafbfd;                 /* لون خفيف للصفوف الزوجية */
}
/* =========================================================
   07. ROW HOVER
   تغيير لون الصف عند مرور الماوس فوقه.
   ========================================================= */
.JOWMLBCGC tr:hover td{
    background:#eef4ff;                 /* خلفية زرقاء فاتحة */
    cursor:pointer;                     /* مؤشر اليد */
}
/* =========================================================
   08. SELECTED ROW
   شكل الصف الذي قام المستخدم باختياره.
   ========================================================= */
.JOWMLBCGC tr.selected td{
    background:#dfe9ff !important;      /* خلفية الصف المختار */
    color:#1f3556;                      /* لون النص داخل الصف المختار */
}
/* =========================================================
   09. SELECT COLUMN
   إخفاء العمود الأول الخاص بـ CommandField Select.
   الزر يظل موجوداً من ناحية ASP.NET ولكن لا يظهر للمستخدم.
   ========================================================= */
.JOWMLBCGC th:first-child,
.JOWMLBCGC td:first-child{
    display:none;                       /* إخفاء أول عمود */
}
/* =========================================================
   10. SCROLLBAR
   تنسيق Scroll الخاص بقائمة Job Order.
   يعمل في Chrome / Edge.
   ========================================================= */
.JOWMLBCC::-webkit-scrollbar{
    width:8px;                          /* عرض Scroll الرأسي */
}
/* المسار الخلفي للـ Scroll */
.JOWMLBCC::-webkit-scrollbar-track{
    background:#eef1f5;                 /* لون خلفية مسار Scroll */
}
/* الجزء المتحرك من Scroll */
.JOWMLBCC::-webkit-scrollbar-thumb{
    background:#b6c0cf;                 /* لون Scroll */
    border:2px solid #eef1f5;           /* مسافة بصرية حول Scroll */
    border-radius:5px;                   /* تدوير Scroll */
}
/* عند مرور الماوس فوق Scroll */
.JOWMLBCC::-webkit-scrollbar-thumb:hover{
    background:#929fb2;                 /* لون أغمق عند Hover */
}
/* =========================
   MAIN
========================= */

.JOWMLBC{
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    background:#fff;
    box-sizing:border-box;
}

.JOWMLBCC{
    width:100%;
    flex:1;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    background:#fff;
    border:1px solid #cfd6e3;
    border-radius:2px;
    box-sizing:border-box;
}


/* =========================
   BOTTOM
========================= */

.JOWMLBottom{
    width:100%;
    height:166px;
    flex-shrink:0;
    padding:6px;
    margin-top:5px;
    background:#f7f9fc;
    border:1px solid #cfd6e3;
    border-radius:3px;
    box-sizing:border-box;
}


/* =========================
   TEXTBOX + ADD ROW
========================= */

.JOWMLAddRow{
    width:100%;
    display:grid;
    grid-template-columns:minmax(0, 1fr) 65px;
    gap:5px;
    margin-bottom:5px;
    box-sizing:border-box;
}


/* =========================
   DROPDOWN + ADD ROW
========================= */

.JOWMLDropRow{
    width:100%;
    display:grid;
    grid-template-columns:minmax(0, 1fr) 65px;
    gap:5px;
    margin-bottom:5px;
    box-sizing:border-box;
}


/* =========================
   INPUTS
========================= */

.JOWMLTextC,
.JOWMLAddC,
.JOWMLDropC{
    width:100%;
    height:20px;
    border:1px solid #b5b5b5;
    border-radius:2px;
    font:8px Tahoma,Arial;
    color:#333;
    box-sizing:border-box;
}


/* =========================
   TEXTBOX
========================= */

.JOWMLTextC{
    padding:1px 5px;
    background:#e5e5e5;
}


/* =========================
   DROPDOWN
========================= */

.JOWMLDropC{
    padding:0 4px;
    margin:0;
    background:#e5e5e5;
}


/* =========================
   ADD BUTTON
========================= */

.JOWMLAddC{
    padding:0;
    margin:0;
    background:linear-gradient(#eee,#ccc);
    border-color:#aaa;
    font-weight:bold;
    cursor:pointer;
}

.JOWMLAddC:hover:not(:disabled){
    background:linear-gradient(#ddd,#bbb);
    border-color:#888;
}

.JOWMLAddC:active:not(:disabled){
    background:#bbb;
}


/* =========================
   FOCUS
========================= */

.JOWMLTextC:focus,
.JOWMLDropC:focus{
    background:#eee;
    border-color:#888;
    outline:none;
}


/* =========================
   DISABLED
========================= */

.JOWMLTextC:disabled,
.JOWMLDropC:disabled{
    background:#d5d5d5;
    border-color:#c3c3c3;
    color:#999;
}

.JOWMLAddC:disabled{
    background:#d5d5d5;
    border-color:#c3c3c3;
    color:#999;
    cursor:default;
}


/* =========================
   SMALL GRID BOX
========================= */

.JOWMLSmallGridBox{
    width:100%;
    height:103px;
    overflow-y:auto;
    overflow-x:hidden;
    background:#fff;
    border:1px solid #d4dae4;
    box-sizing:border-box;
}


/* =========================
   SMALL GRID
========================= */

.JOWMLSmallGridC{
    width:100%;
    border-collapse:collapse;
    border-spacing:0;
    background:#fff;
    font:9px Tahoma,Arial;
    color:#303846;
}

.JOWMLSmallGridC th{
    position:sticky;
    top:0;
    z-index:2;
    height:17px;
    padding:3px 6px;
    background:linear-gradient(#eef2f8,#d8dfeb);
    border-bottom:1px solid #b9c3d6;
    border-right:1px solid #d5dbe5;
    font:bold 9px Tahoma,Arial;
    text-align:left;
    white-space:nowrap;
}

.JOWMLSmallGridC td{
    height:18px;
    padding:3px 6px;
    background:#fff;
    border-bottom:1px solid #eef1f6;
    border-right:1px solid #f0f2f6;
    font:9px Tahoma,Arial;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.JOWMLSmallGridC tr:nth-child(even) td{
    background:#fafbfd;
}

.JOWMLSmallGridC tr:hover td{
    background:#eef4ff;
}


/* =========================
   RIGHT SIDE
========================= */

.JOWMRC{
    background:#f7f9fd;
    border:1px solid #c5cad8;
    padding:6px;
    box-sizing:border-box;
    display:grid;
}

.JOWMRPTC,
.JobOrderpanel-bottom{
    background:#f9fafc;
    border:1px solid #d5d8e4;
    padding:6px;
    box-sizing:border-box;
}
.JOWMLBCC{
    flex:1 1 0;
    min-height:0;
    overflow-y:auto;
}

.JOWMLBottom{
  
    flex:0 0 105px;
}
/* =========================================================
   05. TOP PANEL + VEHICLE AREA
   يقسم الجزء العلوي إلى بيانات على اليسار وصورة السيارة على اليمين.
   ========================================================= */
.JOWMRPTC {
    background:#f9fafc;
    border:1px solid #d5d8e4;
    padding:6px;
    box-sizing:border-box;
    display:grid;
    /* المحتوى + الصورة */
    grid-template-columns:minmax(0, 1fr) 250px;
    column-gap:10px;
    row-gap:3px;
}
/* Row 1 */
.JobOrderrow1 {
    grid-column:1;
    grid-row:1;
}
/* Row 2 */
.JobOrderrow2 {
    grid-column:1;
    grid-row:2;
}
/* Row 3 */
.JobOrderrow3 {
    grid-column:1;
    grid-row:3;
}
.JobOrderrow4 {
    grid-column:1;
    grid-row:4;
}
.JobOrderrow5 {
    grid-column:1;
    grid-row:5;
}
/* =========================================================
   01. JOWMRPTV
   الحاوية الرئيسية الخاصة بصورة السيارة.
   تحتوي الصورة + الأدوات الموجودة أسفلها.
   ========================================================= */
.JOWMRPTVC{
    grid-column:2;                     /* وضع الحاوية في العمود الثاني */
    grid-row:1 / 9;                    /* امتدادها على صفوف الجزء العلوي */
    width:100%;                        /* استخدام كامل عرض العمود */
    height:97%;                       /* استخدام كامل الارتفاع المتاح */
    min-width:0;                       /* منع المحتوى من زيادة العرض */
    min-height:0;                      /* السماح للعناصر الداخلية بالانكماش */
    display:flex;                      /* استخدام Flex */
    flex-direction:column;             /* الصورة أعلى والأدوات أسفل */
    overflow:hidden;                   /* منع خروج المحتوى */
    box-sizing:border-box;             /* احتساب Border وPadding ضمن الحجم */
}
/* =========================================================
   02. JOWMRPTVD
   منطقة عرض صورة السيارة.
   تأخذ المساحة المتبقية فوق شريط الأدوات.
   ========================================================= */
.JOWMRPTVDC{
    position:relative;                 /* مرجع لأي عناصر Absolute فوق الصورة */
    width:100%;                        /* كامل عرض الحاوية */
    flex:1;                            /* أخذ المساحة المتبقية رأسياً */
    min-width:0;                       /* منع زيادة العرض */
    min-height:0;                      /* مهم جداً داخل Flex */
    overflow:hidden;                   /* منع الصورة من الخروج */
    background:#ffffff;                /* خلفية منطقة الصورة */
    border-radius:5px;                 /* تدوير الأركان */
    box-sizing:border-box;
}
/* =========================================================
   03. JOWMRPTVDI
   صورة السيارة نفسها.
   ========================================================= */
.JOWMRPTVDIC{
    position:absolute;                 /* تثبيت الصورة داخل منطقة العرض */
    top:0;                             /* تبدأ من أعلى */
    left:0;                            /* تبدأ من اليسار */
    width:100%;                        /* استخدام كامل العرض */
    height:97%;                       /* استخدام كامل الارتفاع */
    object-fit:fill;                   /* تمديد الصورة لتملأ المساحة */
    display:block;                     /* إزالة الفراغ الافتراضي للصورة */
    user-select:none;                  /* منع تحديد الصورة */
    -webkit-user-drag:none;            /* منع سحب الصورة في المتصفح */
    border:2px solid #b08d3b;          /* الحد الذهبي */
    border-radius:5px;                 /* تدوير أركان الصورة */
    box-shadow:
        inset 0 0 0 1px #e2c875,      /* خط ذهبي داخلي */
        0 2px 8px rgba(0,0,0,.18);    /* ظل خارجي خفيف */
    box-sizing:border-box;             /* إدخال Border ضمن الحجم */
}
/* =========================================================
   04. JOWMRPTVB
   المنطقة الموجودة مباشرة أسفل صورة السيارة.
   تحتوي زر Open والـ TextBox.
   ========================================================= */
.JOWMRPTVBC{
    width:100%;                        /* نفس عرض صورة السيارة */
    min-height:27px;                   /* أقل ارتفاع للمنطقة */
    display:flex;                      /* وضع الزر والـTextBox بجوار بعض */
    align-items:center;                /* توسيط العناصر رأسياً */
    gap:5px;                           /* المسافة بين الزر والـTextBox */
    padding-top:5px;                   /* مسافة بين الصورة والأدوات */
    flex-shrink:0;                     /* منع المنطقة من الانكماش */
    box-sizing:border-box;
}
/* =========================================================
   05. JOWMRPTVBB
   زر Open الموجود أسفل صورة السيارة.
   ========================================================= */
.JOWMRPTVBBC{
    width:65px;                        /* عرض زر Open */
    height:22px;                       /* ارتفاع الزر */
    flex-shrink:0;                     /* الحفاظ على عرض الزر */
    padding:0 8px;                     /* مسافة داخلية */
    background:linear-gradient(
        #faf7f2,
        #e6d9cb
    );                                 /* تدرج معدني بيج/ذهبي */
    border:1px solid #b8a28a;          /* حد الزر */
    border-radius:3px;                 /* تدوير بسيط */
    font:bold 10px Tahoma,Arial;       /* نوع وحجم الخط */
    color:#2b2f36;                     /* لون النص */
    cursor:pointer;                    /* مؤشر اليد */
    box-sizing:border-box;
}
/* =========================================================
   06. BUTTON HOVER
   شكل زر Open عند مرور الماوس.
   ========================================================= */
.JOWMRPTVBBC:hover{
    background:linear-gradient(
        #ffffff,
        #ddcbb7
    );                                 /* تفتيح التدرج */
    border-color:#a98e70;               /* جعل الحد أوضح */
}
/* =========================================================
   07. BUTTON ACTIVE
   شكل الزر أثناء الضغط.
   ========================================================= */
.JOWMRPTVBBC:active{
    background:linear-gradient(
        #ddcbb7,
        #f8f3ed
    );                                 /* عكس التدرج أثناء الضغط */
}
/* =========================================================
   08. BUTTON DISABLED
   شكل زر Open عندما يكون Enabled=False.
   ========================================================= */
.JOWMRPTVBBC:disabled{
    background:linear-gradient(
        #f7f1ea,
        #e6d9cb
    );                                 /* خلفية Disabled */
    border:1px solid #b8a28a;          /* الحفاظ على الحد */
    color:#9a9a9a;                     /* لون النص الباهت */
    cursor:default;                    /* إلغاء شكل اليد */
    pointer-events:none;               /* منع أي تفاعل مع الزر */
    opacity:.85;                       /* تخفيف شكل الزر */
}
/* =========================================================
   09. JOWMRPTVBT
   TextBox الموجود بجوار زر Open.
   يأخذ كل المساحة المتبقية.
   ========================================================= */
.JOWMRPTVBTC{
    flex:1;                            /* أخذ باقي عرض المنطقة */
    min-width:0;                       /* السماح له بالانكماش */
    height:22px;                       /* نفس ارتفاع زر Open */
    padding:0 6px;                     /* مسافة داخلية للنص */
    background:#ffffff;                /* خلفية TextBox */
    border:1px solid #b8c0cf;          /* الحد */
    border-radius:3px;                 /* تدوير بسيط */
    font:10px Tahoma,Arial;            /* نوع وحجم الخط */
    color:#303846;                     /* لون النص */
    outline:none;                      /* إزالة Outline الافتراضي */
    box-sizing:border-box;
}
/* =========================================================
   10. TEXTBOX FOCUS
   شكل TextBox عندما يكون Enabled ويتم تحديده.
   ========================================================= */
.JOWMRPTVBTC:focus{
    border-color:#7e91ae;              /* إبراز الحد */
    background:#ffffff;                /* خلفية بيضاء */
}
/* =========================================================
   11. TEXTBOX DISABLED
   شكل TextBox عندما يكون Enabled=False.
   ========================================================= */
.JOWMRPTVBTC:disabled{
    background:#edf0f4;                /* خلفية رمادية فاتحة */
    border-color:#c5ccd7;               /* حد أهدأ */
    color:#7f8792;                     /* لون النص الباهت */
    cursor:default;                    /* المؤشر العادي */
    opacity:1;                         /* منع المتصفح من تخفيفه زيادة */
}



/* =========================================================
   ROW 1
   ========================================================= */
.JobOrderrow1{
  display:grid !important; /* نظام توزيع العناصر */
  grid-template-columns:repeat(100,minmax(0,1fr)) !important; /* 100 عمود */
  column-gap:0 !important; /* بدون فراغ بين أعمدة الشبكة */
  gap:8px; /* المسافة الأصلية */
  align-items:center; /* توسيط العناصر رأسياً */
  width:100% !important; /* كامل العرض */
  max-width:100% !important; /* منع تجاوز العرض */
  padding:3px 6px; /* المسافة الداخلية */
  padding-left:6px !important; /* المسافة اليسرى */
  padding-right:6px !important; /* المسافة اليمنى */
  margin-bottom:7px; /* المسافة أسفل الصف */
  box-sizing:border-box !important; /* احتساب الحدود داخل الحجم */
}
/* =========================================================
   CONTROLS
   ========================================================= */
.JobOrderrow1 > *{
  min-width:0 !important; /* السماح بتصغير العنصر */
  max-width:100% !important; /* منع تجاوز العمود */
  width:auto; /* العرض حسب العمود */
  box-sizing:border-box !important; /* احتساب الحدود داخل الحجم */
}
/* =========================================================
   LABELS
   ========================================================= */
.JobOrderrow1 span,
.JobOrderrow1 label{
  display:flex; /* Flex للنص */
  align-items:center; /* توسيط رأسي */
  justify-content:flex; /* المحاذاة الأصلية */
  height:22px; /* الارتفاع */
  padding:0 8px; /* المسافة الداخلية */
  background:#d8dde6; /* الخلفية */
  border:1px solid #b8c0cf; /* الحدود */
  border-radius:2px; /* تدوير الزوايا */
  font:11px Tahoma,Arial,sans-serif; /* الخط */
  color:#2b2f36; /* لون النص */
  white-space:nowrap; /* منع التفاف النص */
  box-sizing:border-box; /* احتساب الحدود */
}
/* =========================================================
   VALUES
   ========================================================= */
.JobOrderrow1 .txt.joborderr1{
  padding:0 6px; /* المسافة الداخلية */
  background:#eef2f8; /* الخلفية */
  border:1px solid #b8c0cf; /* الحدود */
  border-radius:2px; /* تدوير الزوايا */
}
/* =========================================================
   BUTTON
   ========================================================= */
.btnJobOrderr1{
  width:25px; /* العرض */
  height:22px; /* الارتفاع */
  padding:0; /* بدون مسافة داخلية */
  background:linear-gradient(#fff6d9,#ead394); /* تدرج الخلفية */
  border:1px solid #c69c35; /* الحدود */
  border-radius:2px; /* تدوير الزوايا */
  box-shadow:0 0 0 1px rgba(199,155,66,.15); /* ظل خفيف */
  outline:none; /* إزالة Outline */
  font:bold 10px Tahoma,Arial,sans-serif; /* الخط */
  color:#51401c; /* لون النص */
  cursor:pointer; /* مؤشر اليد */
  box-sizing:border-box; /* احتساب الحدود */
}
/* Disabled Button */
.btnJobOrderr1:disabled,
.btnJobOrderr1[disabled]{
  cursor:default; /* المؤشر العادي */
  pointer-events:none; /* منع التفاعل */
  box-shadow:none; /* إزالة الظل */
  opacity:.85; /* تخفيف اللون */
}
/* =========================================================
   DATE
   ========================================================= */
.JobOrderrow1 .txt.date{
  height:22px; /* الارتفاع */
  padding:0 6px; /* المسافة الداخلية */
  background:#eef2f8; /* الخلفية */
  border:1px solid #b8c0cf; /* الحدود */
  border-radius:2px; /* تدوير الزوايا */
  outline:none; /* إزالة Outline */
  font:11px Roboto,Arial,sans-serif; /* الخط */
  box-sizing:border-box; /* احتساب الحدود */
}
/* Disabled Date */
.JobOrderrow1 .txt.date:disabled,
.JobOrderrow1 .txt.date[disabled]{
  background:#eef2f8; /* الخلفية */
  border:1px solid #b8c0cf; /* الحدود */
  color:#8f8f8f; /* لون النص */
  cursor:default; /* المؤشر العادي */
  pointer-events:none; /* منع التفاعل */
  opacity:.85; /* تخفيف العنصر */
}
/* =========================================================
   COLUMN DISTRIBUTION - 12 CONTROLS
   ========================================================= */
.JobOrderrow1 > :nth-child(1){grid-column:1 / 13;}
.JobOrderrow1 > :nth-child(2){grid-column:14 / 17;}
.JobOrderrow1 > :nth-child(3){grid-column:18 / 20;}
.JobOrderrow1 > :nth-child(4){grid-column:21 / 24;}
.JobOrderrow1 > :nth-child(5){grid-column:25 / 32;}
.JobOrderrow1 > :nth-child(6){grid-column:33 / 37;}
.JobOrderrow1 > :nth-child(7){grid-column:38 / 48;}
.JobOrderrow1 > :nth-child(8){grid-column:49 / 57;}
.JobOrderrow1 > :nth-child(9){grid-column:58 / 67;}
.JobOrderrow1 > :nth-child(10){grid-column:68 / 77;}
.JobOrderrow1 > :nth-child(11){grid-column:78 / 83;}
.JobOrderrow1 > :nth-child(12){grid-column:84 / 101;}

/* =====================================================================
   ROW 1 - SILVER METALLIC
   الصف الأول: فضي ميتالك بحدود ذهبية
   ===================================================================== */

/* عناوين الصف الأول */
.JobOrderrow1 span,
.JobOrderrow1 label{
    background:linear-gradient(180deg,var(--jo-silver-1) 0%,var(--jo-silver-2) 52%,var(--jo-silver-3) 100%) !important; /* تدرج فضي */
    background:linear-gradient(180deg,#f0f1ef 0%,#d3d5d2 52%,#b5b9b5 100%) !important; /* فضي داكن */
    border:1px solid var(--jo-gold) !important;       /* إطار ذهبي موحد */
    color:#343836 !important;                         /* لون النص */
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95); /* لمعة معدنية داخلية */
}

/* القيم والحقول الموجودة داخل الصف الأول */
.JobOrderrow1 .txt.joborderr1,
.JobOrderrow1 .txt.date{
    background:linear-gradient(180deg,#ffffff 0%,#eeeeec 55%,#d7dad7 100%) !important; /* فضي فاتح للقراءة */
    border:1px solid var(--jo-gold) !important;       /* إطار ذهبي */
    color:#303432 !important;                         /* لون القيمة */
}

/* زر الصف الأول */
.btnJobOrderr1{
    background:linear-gradient(180deg,#fff9e7 0%,#e8d7a1 55%,#c5a85c 100%) !important; /* ذهبي ميتالك */
    border:1px solid var(--jo-gold-dark) !important; /* إطار ذهبي غامق */
    color:#493c1f !important;                         /* لون كتابة الزر */
}

/* ================= ROW 3 ================= */
.JobOrderrow3{display:grid!important;grid-template-columns:repeat(100,minmax(0,1fr))!important;column-gap:0!important;row-gap:0!important;align-items:center;width:100%!important;max-width:100%!important;padding:3px 6px!important;margin:0 0 7px;box-sizing:border-box!important}
.JobOrderrow3>*{min-width:0!important;max-width:100%!important;width:auto;box-sizing:border-box!important}

/* ================= LABELS ================= */
.JobOrderrow3 span,.JobOrderrow3 label{display:flex;align-items:center;justify-content:flex-start;height:22px;padding:0 8px;border-radius:2px;font:11px Tahoma,Arial,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}

/* العنصر الأول - فضي ميتالك */
.JobOrderrow3>:nth-child(1){background:linear-gradient(180deg,#f5f6f4 0%,#dcdfdc 30%,#c7cbc7 60%,#adb3ae 100%)!important;border:1px solid var(--jo-gold)!important;color:#343836!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.98),inset 0 -1px 0 rgba(80,85,82,.08),0 1px 2px rgba(0,0,0,.10)!important}

/* باقي العناوين - أزرق ميتالك */
.JobOrderrow3>span:not(:first-child),.JobOrderrow3>label:not(:first-child){background:linear-gradient(180deg,#edf7fc 0%,#d4e8f3 28%,#b7d5e5 58%,#91b9d1 100%)!important;border:1px solid var(--jo-gold)!important;color:#294657!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.98),inset 0 -1px 0 rgba(61,104,129,.10),0 1px 2px rgba(0,0,0,.08)!important}

/* ================= VALUES ================= */
.JobOrderrow3 .txt.joborderr3{height:22px!important;padding:0 6px!important;border-radius:2px!important;font:11px Tahoma,Arial,sans-serif!important;box-sizing:border-box!important;outline:none}

/* Value نشط */
.JobOrderrow3 .txt.joborderr3:not(:disabled){background:linear-gradient(180deg,#fff 0%,#f2f9fd 30%,#dceef7 65%,#c3deec 100%)!important;border:1px solid #9b813f!important;color:#263f4d!important;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(0,0,0,.06)!important;opacity:1!important}

/* Value Hover */
.JobOrderrow3 .txt.joborderr3:not(:disabled):hover{background:linear-gradient(180deg,#fff 0%,#edf8fd 35%,#d1e9f5 70%,#b5d7e8 100%)!important;border-color:#92742f!important}

/* Value Focus */
.JobOrderrow3 .txt.joborderr3:not(:disabled):focus{background:linear-gradient(180deg,#fff 0%,#eaf7fd 35%,#cde9f6 70%,#aed4e7 100%)!important;border:1px solid #806221!important;color:#17384a!important;box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(92,148,178,.18),0 0 4px rgba(76,134,166,.28)!important}

/* Value غير نشط */
.JobOrderrow3 .txt.joborderr3:disabled,.JobOrderrow3 .txt.joborderr3[disabled]{background:linear-gradient(180deg,#eef2f4 0%,#e2e8eb 35%,#d2dce1 68%,#c1ccd2 100%)!important;border:1px solid #b9aa7d!important;color:#7c878d!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.80)!important;cursor:default!important;pointer-events:none!important;opacity:.88!important}

/* ================= TEXTBOX ================= */
.TextJobOrderr3{width:100%!important;height:22px!important;padding:2px 6px!important;border-radius:2px!important;font:10px Tahoma,Arial,sans-serif!important;box-sizing:border-box!important;outline:none}

/* TextBox نشط */
.TextJobOrderr3:not(:disabled){background:linear-gradient(180deg,#fff 0%,#f2f9fd 30%,#dceef7 65%,#c3deec 100%)!important;border:1px solid #9b813f!important;color:#263f4d!important;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(0,0,0,.06)!important;opacity:1!important}

/* TextBox Hover */
.TextJobOrderr3:not(:disabled):hover{background:linear-gradient(180deg,#fff 0%,#edf8fd 35%,#d1e9f5 70%,#b5d7e8 100%)!important;border-color:#92742f!important}

/* TextBox Focus */
.TextJobOrderr3:not(:disabled):focus{background:linear-gradient(180deg,#fff 0%,#eaf7fd 35%,#cde9f6 70%,#aed4e7 100%)!important;border:1px solid #806221!important;color:#17384a!important;box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(92,148,178,.18),0 0 4px rgba(76,134,166,.28)!important}

/* TextBox غير نشط */
.TextJobOrderr3:disabled,.TextJobOrderr3[disabled]{background:linear-gradient(180deg,#eef2f4 0%,#e2e8eb 35%,#d2dce1 68%,#c1ccd2 100%)!important;border:1px solid #b9aa7d!important;color:#7c878d!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.80)!important;cursor:default!important;pointer-events:none!important;opacity:.88!important}

/* ================= DROPDOWN ================= */
.DropJobOrderr3{width:100%!important;height:22px!important;padding:0 6px!important;border-radius:2px!important;font:11px Tahoma,Arial,sans-serif!important;box-sizing:border-box!important;outline:none}

/* DropDown نشط */
.DropJobOrderr3:not(:disabled){background:linear-gradient(180deg,#f4fbff 0%,#e2f2f9 30%,#cce5f1 62%,#aed2e4 100%)!important;border:1px solid #9b813f!important;color:#294657!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.98),0 1px 2px rgba(0,0,0,.06)!important;opacity:1!important;cursor:pointer}

/* DropDown Hover */
.DropJobOrderr3:not(:disabled):hover{background:linear-gradient(180deg,#fff 0%,#edf8fd 32%,#d1e9f5 65%,#b5d7e8 100%)!important;border-color:#92742f!important}

/* DropDown Focus */
.DropJobOrderr3:not(:disabled):focus{background:linear-gradient(180deg,#fff 0%,#eaf7fd 35%,#cde9f6 70%,#aed4e7 100%)!important;border:1px solid #806221!important;color:#17384a!important;box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(92,148,178,.18),0 0 4px rgba(76,134,166,.28)!important}

/* DropDown غير نشط */
.DropJobOrderr3:disabled,.DropJobOrderr3[disabled]{background:linear-gradient(180deg,#eef2f4 0%,#e2e8eb 35%,#d2dce1 68%,#c1ccd2 100%)!important;border:1px solid #b9aa7d!important;color:#7c878d!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.80)!important;cursor:default!important;pointer-events:none!important;opacity:.88!important}

/* ================= BUTTON ================= */
.btnJobOrderr3{width:25px!important;height:22px!important;padding:0!important;border-radius:2px!important;outline:none!important;font:bold 10px Tahoma,Arial,sans-serif!important;box-sizing:border-box!important}

/* زر نشط */
.btnJobOrderr3:not(:disabled){background:linear-gradient(180deg,#f4fbff 0%,#d5eaf4 30%,#b6d5e5 60%,#8eb8cf 100%)!important;border:1px solid var(--jo-gold-dark)!important;color:#29485a!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.98),0 1px 2px rgba(0,0,0,.13)!important;cursor:pointer!important;opacity:1!important}

/* زر Hover */
.btnJobOrderr3:not(:disabled):hover{background:linear-gradient(180deg,#fff 0%,#e2f2f9 30%,#c5e1ee 60%,#9bc8dc 100%)!important;border-color:#8e6c23!important;color:#1e4053!important;box-shadow:inset 0 1px 0 #fff,0 1px 3px rgba(0,0,0,.18)!important}

/* زر أثناء الضغط */
.btnJobOrderr3:not(:disabled):active{background:linear-gradient(180deg,#91bbd0 0%,#b5d4e3 45%,#d9ebf4 100%)!important;box-shadow:inset 0 1px 3px rgba(0,0,0,.18)!important;transform:translateY(1px)}

/* زر غير نشط */
.btnJobOrderr3:disabled,.btnJobOrderr3[disabled]{background:linear-gradient(180deg,#e9edef 0%,#dce3e6 35%,#ccd6da 68%,#b9c4c9 100%)!important;border:1px solid #b9aa7d!important;color:#818b90!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.72)!important;cursor:default!important;pointer-events:none!important;opacity:.84!important}

/* ================= COLUMNS - 7 CONTROLS ================= */
.JobOrderrow3>:nth-child(1){grid-column:1/13}
.JobOrderrow3>:nth-child(2){grid-column:14/17}
.JobOrderrow3>:nth-child(3){grid-column:18/41}
.JobOrderrow3>:nth-child(4){grid-column:42/48}
.JobOrderrow3>:nth-child(5){grid-column:49/77}
.JobOrderrow3>:nth-child(6){grid-column:78/83}
.JobOrderrow3>:nth-child(7){grid-column:84/101}
/* ================= ROW 4 - MEDIUM GRAY METALLIC ================= */
.JobOrderrow4{display:grid!important;grid-template-columns:repeat(100,minmax(0,1fr))!important;column-gap:0!important;row-gap:0!important;align-items:center;width:100%!important;max-width:100%!important;padding:3px 6px!important;margin:0 0 7px;box-sizing:border-box!important}
.JobOrderrow4>*{min-width:0!important;max-width:100%!important;width:auto;box-sizing:border-box!important}

/* ================= LABELS ================= */
.JobOrderrow4 span,.JobOrderrow4 label{display:flex;align-items:center;justify-content:flex-start;height:22px;padding:0 8px;border-radius:2px;font:11px Tahoma,Arial,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}

/* العنصر الأول - فضي ميتالك */
.JobOrderrow4>:nth-child(1){background:linear-gradient(180deg,#f5f6f4 0%,#dcdfdc 30%,#c7cbc7 60%,#adb3ae 100%)!important;border:1px solid var(--jo-gold)!important;color:#343836!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.98),inset 0 -1px 0 rgba(80,85,82,.08),0 1px 2px rgba(0,0,0,.10)!important}

/* باقي العناوين - رصاصي متوسط ميتالك */
.JobOrderrow4>span:not(:first-child),.JobOrderrow4>label:not(:first-child){background:linear-gradient(180deg,#e9ebec 0%,#d1d4d6 30%,#b7bbbe 60%,#999fa3 100%)!important;border:1px solid var(--jo-gold)!important;color:#34393c!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(55,60,63,.12),0 1px 2px rgba(0,0,0,.10)!important}

/* ================= TEXTBOX ================= */
.TextJobOrderr4{width:100%!important;height:22px!important;padding:2px 6px!important;border-radius:2px!important;font:10px Tahoma,Arial,sans-serif!important;box-sizing:border-box!important;outline:none}

/* TextBox نشط */
.TextJobOrderr4:not(:disabled){background:linear-gradient(180deg,#fafafa 0%,#eceeef 30%,#d8dbdd 65%,#c3c7ca 100%)!important;border:1px solid #9b813f!important;color:#34393c!important;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(0,0,0,.07)!important;opacity:1!important}

/* TextBox Hover */
.TextJobOrderr4:not(:disabled):hover{background:linear-gradient(180deg,#fff 0%,#f1f2f2 32%,#dfe1e2 65%,#c9cdcf 100%)!important;border-color:#92742f!important}

/* TextBox Focus */
.TextJobOrderr4:not(:disabled):focus{background:linear-gradient(180deg,#fff 0%,#f3f4f4 35%,#e0e2e3 70%,#c8ccce 100%)!important;border:1px solid #806221!important;color:#24282a!important;box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(100,105,108,.16),0 0 4px rgba(75,80,83,.25)!important}

/* TextBox غير نشط */
.TextJobOrderr4:disabled,.TextJobOrderr4[disabled]{background:linear-gradient(180deg,#e4e6e7 0%,#d3d6d8 35%,#c1c5c7 68%,#adb2b5 100%)!important;border:1px solid #a99c78!important;color:#747a7e!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.70)!important;cursor:default!important;pointer-events:none!important;opacity:.88!important}

/* أحجام ومحاذاة TextBox */
.TextJobOrderr4.code{width:100%!important;text-align:center}
.TextJobOrderr4.mid{width:100%!important;text-align:left}

/* ================= DROPDOWN ================= */
.DropJobOrderr4{width:100%!important;height:22px!important;padding:0 6px!important;border-radius:2px!important;font:9px Tahoma,Arial,sans-serif!important;box-sizing:border-box!important;outline:none}

/* DropDown نشط */
.DropJobOrderr4:not(:disabled){background:linear-gradient(180deg,#f5f6f6 0%,#e5e7e8 30%,#d0d3d5 62%,#b7bbbe 100%)!important;border:1px solid #9b813f!important;color:#34393c!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.98),0 1px 2px rgba(0,0,0,.07)!important;cursor:pointer!important;opacity:1!important}

/* DropDown Hover */
.DropJobOrderr4:not(:disabled):hover{background:linear-gradient(180deg,#fff 0%,#f0f1f2 32%,#dcdfe0 65%,#c5c9cb 100%)!important;border-color:#92742f!important}

/* DropDown Focus */
.DropJobOrderr4:not(:disabled):focus{background:linear-gradient(180deg,#fff 0%,#f3f4f4 35%,#dfe1e2 70%,#c8ccce 100%)!important;border:1px solid #806221!important;color:#24282a!important;box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(100,105,108,.16),0 0 4px rgba(75,80,83,.25)!important}

/* DropDown غير نشط */
.DropJobOrderr4:disabled,.DropJobOrderr4[disabled]{background:linear-gradient(180deg,#e3e5e6 0%,#d2d5d7 35%,#c0c4c6 68%,#acb1b4 100%)!important;border:1px solid #a99c78!important;color:#747a7e!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.70)!important;cursor:default!important;pointer-events:none!important;opacity:.88!important}

/* ================= DATE ================= */
.TextJobOrderr4Date{width:100%!important;height:22px!important;padding:0 6px!important;border-radius:2px!important;font:bold 11px Roboto,Tahoma,Arial,sans-serif!important;box-sizing:border-box!important;outline:none}

/* Date نشط */
.TextJobOrderr4Date:not(:disabled){background:linear-gradient(180deg,#fafafa 0%,#eceeef 30%,#d8dbdd 65%,#c3c7ca 100%)!important;border:1px solid #9b813f!important;color:#34393c!important;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(0,0,0,.07)!important;opacity:1!important}

/* Date Hover */
.TextJobOrderr4Date:not(:disabled):hover{background:linear-gradient(180deg,#fff 0%,#f1f2f2 32%,#dfe1e2 65%,#c9cdcf 100%)!important;border-color:#92742f!important}

/* Date Focus */
.TextJobOrderr4Date:not(:disabled):focus{background:linear-gradient(180deg,#fff 0%,#f3f4f4 35%,#e0e2e3 70%,#c8ccce 100%)!important;border:1px solid #806221!important;color:#24282a!important;box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(100,105,108,.16),0 0 4px rgba(75,80,83,.25)!important}

/* Date غير نشط */
.TextJobOrderr4Date:disabled,.TextJobOrderr4Date[disabled]{background:linear-gradient(180deg,#e4e6e7 0%,#d3d6d8 35%,#c1c5c7 68%,#adb2b5 100%)!important;border:1px solid #a99c78!important;color:#747a7e!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.70)!important;cursor:default!important;pointer-events:none!important;opacity:.88!important}

/* ================= BUTTON ================= */
.btnJobOrderr4{width:25px!important;height:22px!important;padding:0!important;border-radius:2px!important;outline:none!important;font:bold 10px Tahoma,Arial,sans-serif!important;box-sizing:border-box!important}

/* زر نشط - رصاصي ميتالك */
.btnJobOrderr4:not(:disabled){background:linear-gradient(180deg,#f5f6f6 0%,#dfe2e3 30%,#c5c9cb 60%,#a5aaad 100%)!important;border:1px solid var(--jo-gold-dark)!important;color:#343a3d!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.98),0 1px 2px rgba(0,0,0,.14)!important;cursor:pointer!important;opacity:1!important}

/* زر Hover */
.btnJobOrderr4:not(:disabled):hover{background:linear-gradient(180deg,#fff 0%,#eceeef 30%,#d4d7d9 60%,#b7bcbe 100%)!important;border-color:#8e6c23!important;color:#252a2d!important;box-shadow:inset 0 1px 0 #fff,0 1px 3px rgba(0,0,0,.18)!important}

/* زر أثناء الضغط */
.btnJobOrderr4:not(:disabled):active{background:linear-gradient(180deg,#a3a8ab 0%,#bec2c4 45%,#dde0e1 100%)!important;box-shadow:inset 0 1px 3px rgba(0,0,0,.20)!important;transform:translateY(1px)}

/* زر غير نشط */
.btnJobOrderr4:disabled,.btnJobOrderr4[disabled]{background:linear-gradient(180deg,#dedfe0 0%,#c9ccce 35%,#b5b9bb 68%,#9da2a5 100%)!important;border:1px solid #a99c78!important;color:#6f7578!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.65)!important;cursor:default!important;pointer-events:none!important;opacity:.86!important}

/* ================= COLUMNS - 9 CONTROLS ================= */
.JobOrderrow4 > :nth-child(1)  { grid-column: 1 / 13; }
.JobOrderrow4 > :nth-child(2)  { grid-column: 14 / 17; }
.JobOrderrow4 > :nth-child(3)  { grid-column: 18 / 29; }
.JobOrderrow4 > :nth-child(4)  { grid-column: 30 / 41; }
.JobOrderrow4 > :nth-child(5)  { grid-column: 42 / 48; }
.JobOrderrow4 > :nth-child(6)  { grid-column: 49 / 57; }

/* آخر 6 عناصر */

.JobOrderrow4 > :nth-child(7)  { grid-column: 58 / 64; }  /* عنوان */
.JobOrderrow4 > :nth-child(8)  { grid-column: 65 / 71; }  /* بيان */

.JobOrderrow4 > :nth-child(9)  { grid-column: 72 / 77; }  /* عنوان */
.JobOrderrow4 > :nth-child(10)  { grid-column: 78 / 83; }  /* بيان */

.JobOrderrow4 > :nth-child(11) { grid-column: 84 / 88; }  /* عنوان */
.JobOrderrow4 > :nth-child(12) { grid-column: 89 / 102; } /* بيان */
/* =========================================================
   ROW 5 - ICON ACTIONS
   ========================================================= */
.JobOrderrow5{
  display:flex; /* ترتيب الأيقونات أفقياً */
  align-items:flex-start; /* المحاذاة من أعلى */
  justify-content:space-evenly; /* توزيع الأيقونات بالتساوي */
  width:100%; /* كامل العرض */
  padding-top:5px; /* مسافة من أعلى */
  padding-bottom:10px; /* مسافة من أسفل */
  box-sizing:border-box; /* احتساب Padding داخل الحجم */
}
/* =========================================================
   ICON ITEM
   ========================================================= */
.JobOrderIconItem{
  display:flex; /* Flex للأيقونة والاسم */
  flex-direction:column; /* الاسم أسفل الصورة */
  align-items:center; /* توسيط أفقي */
  justify-content:flex-start; /* المحاذاة من أعلى */
  text-align:center; /* توسيط النص */
}
/* =========================================================
   ICON IMAGE
   ========================================================= */
.JobOrderIconItem img,
.JobOrderIconItem input[type="image"]{
  width:90px; /* عرض الأيقونة */
  height:75px; /* ارتفاع الأيقونة */
  padding:2px; /* مسافة داخلية */
  background:linear-gradient(#f7f9fc,#dfe6f1); /* خلفية متدرجة */
  border:1px solid #bcc7d6; /* الحدود */
  border-radius:8px; /* تدوير الزوايا */
  box-shadow:0 2px 5px rgba(0,0,0,.10); /* ظل خفيف */
  object-fit:contain; /* إظهار الصورة كاملة */
  cursor:pointer; /* مؤشر اليد */
  transition:.18s; /* حركة ناعمة */
  box-sizing:border-box; /* احتساب الحدود داخل الحجم */
}
/* =========================================================
   ICON NAME
   ========================================================= */
.JobOrderIconItem span{
  margin-top:4px; /* مسافة بين الصورة والاسم */
  font-family:Tahoma,Arial,sans-serif; /* الخط */
  font-size:11px; /* حجم الخط */
  font-weight:bold; /* خط عريض */
  color:#2f3d52; /* لون النص */
  white-space:nowrap; /* منع نزول النص لسطر آخر */
  text-align:center; /* توسيط الاسم */
}
/* =========================================================
   DISABLED ICON
   ========================================================= */
.JobOrderrow5 input[type="image"]:disabled{
  opacity:.45; /* تخفيف الأيقونة */
  filter:grayscale(70%); /* تحويلها للرمادي */
  cursor:default; /* المؤشر العادي */
  pointer-events:none; /* منع التفاعل */
}
/* =========================================================
   ICON HOVER
   ========================================================= */
.JobOrderrow5 input[type="image"]:enabled:hover{
  transform:scale(1.05); /* تكبير بسيط */
  background:linear-gradient(#ffffff,#d9e3f2); /* تفتيح الخلفية */
  box-shadow:0 3px 8px rgba(0,0,0,.16); /* زيادة الظل */
}

/* ================= ROW 6 - GREEN METALLIC ================= */
.JobOrderrow6{display:grid!important;grid-template-columns:repeat(100,minmax(0,1fr))!important;column-gap:0!important;row-gap:0!important;align-items:center;width:100%!important;max-width:100%!important;padding:3px 6px!important;margin:0 0 7px;box-sizing:border-box!important}
.JobOrderrow6>*{min-width:0!important;max-width:100%!important;width:auto;box-sizing:border-box!important}

/* ================= LABELS ================= */
.JobOrderrow6 span,.JobOrderrow6 label{display:flex;align-items:center;justify-content:flex-start;height:22px;padding:0 8px;border-radius:2px;font:11px Tahoma,Arial,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}

/* العنوان الأول - فضي */
.JobOrderrow6>:nth-child(1){background:linear-gradient(180deg,#f5f6f4 0%,#dcdfdc 30%,#c7cbc7 60%,#adb3ae 100%)!important;border:1px solid var(--jo-gold)!important;color:#343836!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.98),0 1px 2px rgba(0,0,0,.10)!important}

/* Details - أخضر ميتالك */
.JobOrderrow6 .txt.joborderr6{background:linear-gradient(180deg,#edf4eb 0%,#d4e1d0 30%,#b7cbb2 60%,#94aa90 100%)!important;border:1px solid var(--jo-gold)!important;color:#2d3e30!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 2px rgba(0,0,0,.10)!important}

/* ================= DROPDOWN ================= */
.DropJobOrderr6{width:100%!important;height:22px!important;padding:0 6px!important;border-radius:2px!important;font:11px Tahoma,Arial,sans-serif!important;box-sizing:border-box!important;outline:none}

/* DropDown نشط */
.DropJobOrderr6:not(:disabled){background:linear-gradient(180deg,#f4f9f2 0%,#dce9d8 30%,#c2d6bd 62%,#9fb99a 100%)!important;border:1px solid var(--jo-gold)!important;color:#29402e!important;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(0,0,0,.08)!important;cursor:pointer}

/* DropDown Hover */
.DropJobOrderr6:not(:disabled):hover{background:linear-gradient(180deg,#fff 0%,#eaf3e7 30%,#cee0ca 62%,#aac5a5 100%)!important;border-color:#8e6c23!important}

/* DropDown Focus */
.DropJobOrderr6:not(:disabled):focus{background:linear-gradient(180deg,#fff 0%,#e6f1e3 35%,#c9dec5 70%,#a4c09f 100%)!important;border:1px solid #806221!important;color:#203925!important;box-shadow:0 0 0 1px rgba(75,110,78,.18),0 0 4px rgba(60,100,65,.22)!important}

/* DropDown Disabled */
.DropJobOrderr6:disabled,.DropJobOrderr6[disabled]{background:linear-gradient(180deg,#dfe7dd 0%,#ccd7c9 35%,#b6c4b3 68%,#9eac9b 100%)!important;border:1px solid #a99c78!important;color:#697669!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.68)!important;cursor:default!important;pointer-events:none!important;opacity:.88!important}

/* ================= TEXTBOX ================= */
.TextJobOrderr6{width:100%!important;height:22px!important;padding:2px 6px!important;border-radius:2px!important;font:10px Tahoma,Arial,sans-serif!important;box-sizing:border-box!important;outline:none}

/* TextBox نشط */
.TextJobOrderr6:not(:disabled){background:linear-gradient(180deg,#f8fbf7 0%,#e5efe2 30%,#cdddc9 65%,#aec5a9 100%)!important;border:1px solid var(--jo-gold)!important;color:#29402e!important;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(0,0,0,.07)!important}

/* TextBox Hover */
.TextJobOrderr6:not(:disabled):hover{background:linear-gradient(180deg,#fff 0%,#edf5eb 30%,#d5e5d2 65%,#b7ceb2 100%)!important;border-color:#8e6c23!important}

/* TextBox Focus */
.TextJobOrderr6:not(:disabled):focus{background:linear-gradient(180deg,#fff 0%,#eaf4e7 35%,#d0e3cc 70%,#aec9a9 100%)!important;border:1px solid #806221!important;color:#203925!important;box-shadow:0 0 0 1px rgba(75,110,78,.18),0 0 4px rgba(60,100,65,.22)!important}

/* TextBox Disabled */
.TextJobOrderr6:disabled,.TextJobOrderr6[disabled]{background:linear-gradient(180deg,#e1e8df 0%,#ced8cb 35%,#b8c5b5 68%,#a0aea0 100%)!important;border:1px solid #a99c78!important;color:#6e796e!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.68)!important;cursor:default!important;pointer-events:none!important;opacity:.88!important}

/* ================= COLUMNS ================= */
.JobOrderrow6>:nth-child(1){grid-column:1/13}
.JobOrderrow6>:nth-child(2){grid-column:14/29}
.JobOrderrow6>:nth-child(3){grid-column:30/51}
.JobOrderrow6>:nth-child(4){grid-column:52/59}
.JobOrderrow6>:nth-child(5){grid-column:60/101}
/* ================= ROW 7 - SILVER METALLIC ================= */
.JobOrderrow7{display:grid!important;grid-template-columns:repeat(100,minmax(0,1fr))!important;column-gap:0!important;row-gap:0!important;align-items:center;width:100%!important;max-width:100%!important;padding:3px 6px!important;margin:0 0 7px;box-sizing:border-box!important}
.JobOrderrow7>*{min-width:0!important;max-width:100%!important;width:auto;box-sizing:border-box!important}

/* ================= LABELS - SILVER METALLIC ================= */
.JobOrderrow7 span,.JobOrderrow7 label{display:flex;align-items:center;justify-content:flex-start;height:22px;padding:0 8px;background:linear-gradient(180deg,#f4f5f4 0%,#dfe1df 28%,#c6c9c6 60%,#aeb3af 100%)!important;border:1px solid var(--jo-gold)!important;border-radius:2px;color:#303532!important;font:11px Tahoma,Arial,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:inset 0 1px 0 rgba(255,255,255,.98),inset 0 -1px 0 rgba(65,70,67,.10),0 1px 2px rgba(0,0,0,.09)!important;box-sizing:border-box}

/* ================= TEXTBOX BASE ================= */
.TextJobOrderr7{width:100%!important;height:22px!important;padding:2px 6px!important;border-radius:2px!important;font:10px Tahoma,Arial,sans-serif!important;box-sizing:border-box!important;outline:none}

/* TextBox نشط - فضي فاتح */
.TextJobOrderr7:not(:disabled){background:linear-gradient(180deg,#fff 0%,#f2f3f2 30%,#e0e2e0 65%,#c9cdca 100%)!important;border:1px solid var(--jo-gold)!important;color:#303532!important;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(0,0,0,.07)!important;opacity:1!important}

/* TextBox Hover */
.TextJobOrderr7:not(:disabled):hover{background:linear-gradient(180deg,#fff 0%,#f7f7f6 30%,#e8e9e7 65%,#d1d4d1 100%)!important;border-color:#92742f!important}

/* TextBox Focus */
.TextJobOrderr7:not(:disabled):focus{background:linear-gradient(180deg,#fff 0%,#f5f6f5 30%,#e5e7e5 65%,#cdd1ce 100%)!important;border:1px solid #806221!important;color:#242825!important;box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(110,115,111,.16),0 0 4px rgba(80,85,81,.25)!important}

/* TextBox غير نشط - فضي متوسط */
.TextJobOrderr7:disabled,.TextJobOrderr7[disabled]{background:linear-gradient(180deg,#e8eae8 0%,#d9dcda 32%,#c5c9c6 65%,#adb3af 100%)!important;border:1px solid #a99c78!important;color:#717773!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.72)!important;cursor:default!important;pointer-events:none!important;opacity:.90!important}

/* ================= COLUMNS - 6 CONTROLS ================= */
.JobOrderrow7>:nth-child(1){grid-column:1/13}
.JobOrderrow7>:nth-child(2){grid-column:14/51}
.JobOrderrow7>:nth-child(3){grid-column:52/59}
.JobOrderrow7>:nth-child(4){grid-column:60/77}
.JobOrderrow7>:nth-child(5){grid-column:78/83}
.JobOrderrow7>:nth-child(6){grid-column:84/101}
/* ================= ROW 8 - DISTINCT BLUE METALLIC ================= */
.JobOrderrow8{display:grid!important;grid-template-columns:repeat(100,minmax(0,1fr))!important;column-gap:0!important;row-gap:0!important;align-items:center;width:100%!important;max-width:100%!important;padding:3px 6px!important;margin:0 0 7px;box-sizing:border-box!important}
.JobOrderrow8>*{min-width:0!important;max-width:100%!important;width:auto;box-sizing:border-box!important}

/* ================= LABEL - BLUE METALLIC ================= */
.JobOrderrow8 span,.JobOrderrow8 label{display:flex;align-items:center;justify-content:flex-start;height:22px;padding:0 8px;background:linear-gradient(180deg,#edf6fb 0%,#c9dfec 28%,#9fc3d7 60%,#6f9db7 100%)!important;border:1px solid var(--jo-gold)!important;border-radius:2px;color:#203d4e!important;font:11px Tahoma,Arial,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:inset 0 1px 0 rgba(255,255,255,.98),inset 0 -1px 0 rgba(34,74,96,.16),0 1px 2px rgba(0,0,0,.11)!important;box-sizing:border-box}

/* ================= TEXTBOX BASE ================= */
.TextJobOrderr8{width:100%!important;height:22px!important;padding:2px 6px!important;border-radius:2px!important;font:10px Tahoma,Arial,sans-serif!important;box-sizing:border-box!important;outline:none}

/* TextBox نشط */
.TextJobOrderr8:not(:disabled){background:linear-gradient(180deg,#fff 0%,#edf6fb 30%,#d3e7f1 65%,#aed0e1 100%)!important;border:1px solid var(--jo-gold)!important;color:#244658!important;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(0,0,0,.08)!important;opacity:1!important}

/* TextBox Hover */
.TextJobOrderr8:not(:disabled):hover{background:linear-gradient(180deg,#fff 0%,#f3f9fc 30%,#dcecf4 65%,#b9d9e8 100%)!important;border-color:#92742f!important}

/* TextBox Focus */
.TextJobOrderr8:not(:disabled):focus{background:linear-gradient(180deg,#fff 0%,#eef8fc 30%,#d5eaf4 65%,#add2e4 100%)!important;border:1px solid #806221!important;color:#173a4d!important;box-shadow:0 0 0 1px rgba(55,125,165,.20),0 0 5px rgba(55,125,165,.28)!important}

/* TextBox Disabled */
.TextJobOrderr8:disabled,.TextJobOrderr8[disabled]{background:linear-gradient(180deg,#e8f0f4 0%,#d3e1e8 32%,#bacfd9 65%,#9eb8c5 100%)!important;border:1px solid #a99c78!important;color:#647c88!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.72)!important;cursor:default!important;pointer-events:none!important;opacity:.90!important}

/* ================= DONE BUTTON ================= */
.btnJobOrderr8{height:22px!important;padding:0 8px!important;border-radius:2px!important;font:bold 11px Tahoma,Arial,sans-serif!important;box-sizing:border-box!important;outline:none!important}

/* Button نشط - أزرق ميتالك أقوى */
.btnJobOrderr8:not(:disabled){background:linear-gradient(180deg,#e9f5fb 0%,#bcd9e8 28%,#84b3cc 62%,#568aa7 100%)!important;border:1px solid var(--jo-gold-dark)!important;color:#17394b!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.98),inset 0 -1px 0 rgba(27,68,91,.18),0 1px 2px rgba(0,0,0,.15)!important;cursor:pointer!important;opacity:1!important}

/* Button Hover */
.btnJobOrderr8:not(:disabled):hover{background:linear-gradient(180deg,#fff 0%,#d8ebf4 28%,#a7ccde 62%,#71a4bf 100%)!important;border-color:#8e6c23!important;color:#102f40!important;box-shadow:inset 0 1px 0 #fff,0 2px 4px rgba(0,0,0,.18)!important}

/* Button Click */
.btnJobOrderr8:not(:disabled):active{background:linear-gradient(180deg,#4f819c 0%,#75a5bd 45%,#bad8e6 100%)!important;border-color:#806221!important;color:#102f40!important;box-shadow:inset 0 2px 4px rgba(15,55,75,.25)!important;transform:translateY(1px)}

/* Button Disabled */
.btnJobOrderr8:disabled,.btnJobOrderr8[disabled]{background:linear-gradient(180deg,#dfe9ee 0%,#c9d9e1 32%,#aec4cf 65%,#91aab6 100%)!important;border:1px solid #a99c78!important;color:#647984!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.68)!important;cursor:default!important;pointer-events:none!important;opacity:.87!important}

/* ================= COLUMNS ================= */
.JobOrderrow8>:nth-child(1){grid-column:1/13}
.JobOrderrow8>:nth-child(2){grid-column:14/83}
.JobOrderrow8>:nth-child(3){grid-column:84/93}
.JobOrderrow8>:nth-child(4){grid-column:94/101}

/* row21 */

/* =========================================================
   JOB ORDER - ROW 21 + ROW 22
   COMPLETE LAYOUT
   ========================================================= */


/* =========================================================
   MAIN ROWS
   ========================================================= */

.JobOrderrow21,
.JobOrderrow22 {
    display: flex;
    flex-direction: column;

    width: 100%;

    gap: 5px;

    padding: 5px 6px;

    box-sizing: border-box;
}


/* =========================================================
   ROW 21 TOP
   GRID + TOTALS
   ========================================================= */

.JobOrderrow21Top {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        245px;

    gap: 10px;

    align-items: stretch;

    width: 100%;

    box-sizing: border-box;
}


/* =========================================================
   ROW 22 TOP
   GRID + PAYMENT + TOTALS
   ========================================================= */

.JobOrderrow22Top {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        180px
        245px;

    gap: 10px;

    align-items: stretch;

    width: 100%;

    box-sizing: border-box;
}


/* =========================================================
   GRID AREA
   ========================================================= */

.JobOrderrow21G {
    width: 100%;
    height: 85px;

    min-width: 0;
    min-height: 0;

    overflow-y: auto;
    overflow-x: auto;

    background: #ffffff;

    border: 1px solid #b8c0cf;
    border-radius: 4px;

    box-sizing: border-box;
}
/* =========================================================
   GRIDVIEW
   ========================================================= */
/* =========================================================
   GRIDVIEW
   ========================================================= */

.JobOrderrow21Grid {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    background: #ffffff;
    color: #2f3540;
    font: 10px Tahoma, Arial, sans-serif;
    border: 1px solid #cbd3df;
}


/* =========================================================
   HEADER
   ========================================================= */

.JobOrderrow21Grid th {
    position: sticky;
    top: 0;
    z-index: 2;

    height: 22px;
    padding: 3px 6px;

    background: linear-gradient(to bottom, #edf2f8 0%, #dce4ee 100%);

    border-right: 1px solid #c5ceda;
    border-bottom: 1px solid #aeb9c8;

    color: #344054;
    font-weight: bold;
    text-align: left;

    white-space: nowrap;
    box-sizing: border-box;
}


/* =========================================================
   DATA ROW
   ========================================================= */

.JobOrderrow21Grid td {
    height: 20px;
    padding: 3px 6px;

    background: #f8fbff;

    border-right: 1px solid #e1e7ef;
    border-bottom: 1px solid #e3e9f0;

    color: #333b47;

    white-space: nowrap;
    box-sizing: border-box;

    transition: background-color 0.12s ease;
}


/* =========================================================
   ALTERNATING ROW COLOR
   ========================================================= */

.JobOrderrow21Grid tr:nth-child(even) td {
    background: #f3f7fc;
}


/* =========================================================
   HOVER
   ========================================================= */

.JobOrderrow21Grid tr:hover td {
    background: #e4f0fc;
}


/* =========================================================
   SELECTED ROW
   ========================================================= */

.JobOrderrow21Grid .JobOrderSelectedRow td {
    background: #c9e1f8 !important;
    color: #172b4d;
    border-bottom-color: #9fc5e8;
}


/* =========================================================
   SELECTED ROW + HOVER
   ========================================================= */

.JobOrderrow21Grid .JobOrderSelectedRow:hover td {
    background: #b9d8f5 !important;
}


/* =========================================================
   FIRST COLUMN
   ========================================================= */

.JobOrderrow21Grid th:first-child,
.JobOrderrow21Grid td:first-child {
    
}


/* =========================================================
   LAST COLUMN
   ========================================================= */


.JobOrderrow21Grid td:last-child {
    border-right: none;
    text-align: center;
}


/* =========================================================
   ROW CURSOR
   ========================================================= */

.JobOrderrow21Grid tr {
    cursor: pointer;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

.JobOrderrow21G::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.JobOrderrow21G::-webkit-scrollbar-track {
    background: #edf1f6;
}

.JobOrderrow21G::-webkit-scrollbar-thumb {
    background: #b6c0cd;
    border-radius: 4px;
    border: 1px solid #edf1f6;
}

.JobOrderrow21G::-webkit-scrollbar-thumb:hover {
    background: #909baa;
}


/* =========================================================
   REMOVE LAST ROW BORDER
   ========================================================= */

.JobOrderrow21Grid tr:last-child td {
    border-bottom: none;
}

/* =========================================================
   TOTAL BOX
   ROW 21 + ROW 22
   ========================================================= */

.JobOrderrow21Totals,
.JobOrderrow22Totals {
    display: grid;

    grid-template-columns:
        80px
        minmax(0, 1fr);

    column-gap: 8px;
    row-gap: 5px;

    align-content: center;

    width: 245px;
    height: 85px;

    padding: 7px;

    background: #f7f9fc;

    border: 1px solid #c5cad8;
    border-radius: 4px;

    box-sizing: border-box;
}


/* =========================================================
   TOTAL LABELS
   ========================================================= */

.JobOrderrow21Totals span,
.JobOrderrow22Totals span {
    display: flex;

    align-items: center;

    width: 100%;
    height: 19px;

    padding: 0 7px;

    background: #d8dde6;

    border: 1px solid #b8c0cf;
    border-radius: 2px;

    color: #26364c;

    font: 9px Tahoma, Arial, sans-serif;

    white-space: nowrap;

    box-sizing: border-box;
}


/* =========================================================
   TOTAL TEXTBOX
   ========================================================= */

.TextJobOrderr21,
.TextJobOrderr22 {
    width: 100%;
    height: 19px;

    padding: 0 6px;

    background: #eef3f9;

    border: 1px solid #c1cad7;
    border-radius: 2px;

    color: #37475b;

    font: 9px Tahoma, Arial, sans-serif;

   

    outline: none;

    box-sizing: border-box;
}


.TextJobOrderr21:disabled,
.TextJobOrderr22:disabled {
    background: #eef3f9;

    color: #596270;

    opacity: 1;
}


/* =========================================================
   ROW 22 PAYMENT
   ========================================================= */

.JobOrderrow22Payment {
    display: grid;

    grid-template-columns:
        1fr
         1fr
        1fr;

    gap: 9px;

    align-items: center;

    width: 180px;
    height: 85px;

    padding: 6px;

    background: #f7f9fc;

    border: 1px solid #c5cad8;
    border-radius: 4px;

    box-sizing: border-box;
}


/* =========================================================
   CARD / CASH
   ========================================================= */

.JobOrderPaymentIcon {
    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    min-width: 0;

    height: 71px;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f5f7fa 55%,
            #e3e8ee 100%
        );

    border: 1px solid #aeb8c5;
    border-radius: 6px;

    box-shadow:
        0 2px 4px rgba(0,0,0,.18),
        inset 0 1px 0 #ffffff;

    cursor: pointer;

    box-sizing: border-box;

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        border-color .15s ease;
}


.JobOrderPaymentIcon img {
    display: block;

    width: 45px;
    height: 43px;

    object-fit: contain;

    filter:
        drop-shadow(0 2px 2px rgba(0,0,0,.22));
}


.JobOrderPaymentIcon span {
    margin-top: 2px;

    color: #25354a;

    font: bold 9px Tahoma, Arial, sans-serif;

    text-align: center;

    white-space: nowrap;
}


.JobOrderPaymentIcon:hover {
    transform: translateY(-1px);

    border-color: #7893b5;

    box-shadow:
        0 3px 6px rgba(0,0,0,.22),
        inset 0 1px 0 #ffffff;
}

/* Disabled Payment */
.JobOrderrow22Payment.disabled .JobOrderPaymentIcon{
    pointer-events:none;
    cursor:default;

    opacity:0.45;
    filter:grayscale(60%);

    background:linear-gradient(#f8f8f8, #e8e8e8);
    border-color:#c8c8c8;

    box-shadow:none;
}

/* الصورة */
.JobOrderrow22Payment.disabled .JobOrderPaymentIcon img{
    opacity:0.55;
}

/* الكتابة */
.JobOrderrow22Payment.disabled .JobOrderPaymentIcon span{
    color:#9a9a9a;
}

/* إلغاء أي Hover */
.JobOrderrow22Payment.disabled .JobOrderPaymentIcon:hover{
    transform:none;
    box-shadow:none;
    border-color:#c8c8c8;
}


/* =========================================================
   ACTIONS
   IMPORTANT:
   LAST COLUMN = 245px
   SAME WIDTH AS TOTAL BOX
   ========================================================= */

.JobOrderrow21Actions {
    display: grid;

    grid-template-columns:
        28px
        72px
        30px
        110px
        55px
        50px
        80px
        100px
        260px
        80px
        245px;

    gap: 6px;

    align-items: center;

    width: 100%;

    min-height: 37px;

    padding: 4px 6px;

    margin: 0;

    background: #f7f9fc;

    border: 1px solid #c5cad8;
    border-radius: 4px;

    box-sizing: border-box;
}

/* =========================================================
   ROW 22 ACTIONS
   ========================================================= */
.JobOrderrow22Actions{
    display:grid;
    grid-template-columns:
        28px                    /* 1 - X */
        72px                    /* 2 - Entrance */
        30px                    /* 3 - Label9 */
        110px                    /* 4 - Label10 */
        minmax(160px,1fr)       /* 5 - TextBox6 */
        50px                    /* 6 - Discount */
        50px                    /* 7 - TextBox8 */
        50px                    /* 6 - Discount */
        50px                    /* 7 - TextBox8 */
        50px                    /* 8 - Receipt */
        minmax(180px,245px);    /* 9 - PrintBox */

    gap:6px;
    align-items:center;

    width:100%;
    max-width:100%;
    min-width:0;
    min-height:37px;

    padding:4px 6px;
    margin:0;

    background:linear-gradient(180deg,#fafbfc 0%,#f1f3f5 100%);
    border:1px solid #c5cad8;
    border-radius:4px;

    box-sizing:border-box;
    overflow:hidden;
}

/* منع العناصر من توسيع الشبكة */
.JobOrderrow22Actions>*{
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
}

/* جميع الحقول */
.JobOrderrow22Actions input,
.JobOrderrow22Actions select{
    max-width:100%;
    box-sizing:border-box;
}

/* =========================================================
   PRINT BOX
   TextBox7 + Payment Status
   ========================================================= */
.JobOrderPrintBox{
    display:grid;
    grid-template-columns:minmax(60px,80px) minmax(100px,1fr);
    gap:5px;
    align-items:center;

    width:100%;
    min-width:0;
    max-width:100%;

    box-sizing:border-box;
}

/* عناصر PrintBox */
.JobOrderPrintBox>*{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    box-sizing:border-box!important;
}

/* Prevent overflow */

.JobOrderrow21Actions > *,
.JobOrderrow22Actions > * {
    min-width: 0;

    box-sizing: border-box;
}


/* =========================================================
   ACTION LABELS
   ========================================================= */

.JobOrderrow21Actions > span,
.JobOrderrow22Actions > span {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 22px;

    padding: 0 5px;

    background: #d8dde6;

    border: 1px solid #b8c0cf;
    border-radius: 3px;

    color: #26364c;

    font: 9px Tahoma, Arial, sans-serif;

    white-space: nowrap;

    overflow: hidden;

    box-sizing: border-box;
}


/* =========================================================
   DELETE BUTTON
   ========================================================= */

/* ================= CANCEL / DELETE BUTTON ================= */
.JobOrderrow21Actions>.btnJobOrderr21Delete,
.JobOrderrow22Actions>.btnJobOrderr21Delete{
    width:100%;
    height:22px;
    padding:0;
    border-radius:3px;
    font:bold 9px Tahoma,Arial,sans-serif;
    box-sizing:border-box;
    transition:.15s;
}

/* ================= ACTIVE - RED METALLIC ================= */
.JobOrderrow21Actions>.btnJobOrderr21Delete:not(:disabled),
.JobOrderrow22Actions>.btnJobOrderr21Delete:not(:disabled){
    background:linear-gradient(180deg,#fff3f2 0%,#e9c4c1 30%,#cf9691 62%,#ae6661 100%)!important;
    border:1px solid #9b625d!important;
    color:#682b27!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(100,35,30,.12),0 1px 2px rgba(0,0,0,.12);
    cursor:pointer;
}

/* ================= HOVER ================= */
.JobOrderrow21Actions>.btnJobOrderr21Delete:not(:disabled):hover,
.JobOrderrow22Actions>.btnJobOrderr21Delete:not(:disabled):hover{
    background:linear-gradient(180deg,#fff 0%,#f2d2cf 30%,#dcaaa5 62%,#bd7771 100%)!important;
    border-color:#864943!important;
    color:#57201c!important;
    box-shadow:inset 0 1px 0 #fff,0 2px 4px rgba(100,30,25,.20);
}

/* ================= CLICK ================= */
.JobOrderrow21Actions>.btnJobOrderr21Delete:not(:disabled):active,
.JobOrderrow22Actions>.btnJobOrderr21Delete:not(:disabled):active{
    background:linear-gradient(180deg,#a85e59 0%,#c1817c 45%,#e2b7b3 100%)!important;
    border-color:#743d38!important;
    color:#491916!important;
    box-shadow:inset 0 2px 4px rgba(80,20,15,.25)!important;
    transform:translateY(1px);
}

/* ================= DISABLED - GRAY RED ================= */
.JobOrderrow21Actions>.btnJobOrderr21Delete:disabled,
.JobOrderrow22Actions>.btnJobOrderr21Delete:disabled,
.JobOrderrow21Actions>.btnJobOrderr21Delete[disabled],
.JobOrderrow22Actions>.btnJobOrderr21Delete[disabled]{
    background:linear-gradient(180deg,#eee9e8 0%,#ddd3d2 32%,#c9bbbb 65%,#b4a5a4 100%)!important;
    border:1px solid #b7aaa8!important;
    color:#8d7d7b!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.70)!important;
    cursor:default!important;
    pointer-events:none!important;
    opacity:.82!important;
}


/* =========================================================
   NORMAL ACTION BUTTON
   ========================================================= */

.JobOrderrow21Actions > .btnJobOrderr26,
.JobOrderrow22Actions > .btnJobOrderr26 {
    width: 100%;
    height: 22px;

    padding: 0 4px;

    background:
        linear-gradient(
            #ffffff,
            #e9edf2
        );

    border: 1px solid #b8c0ca;
    border-radius: 3px;

    color: #3c4652;

    font: 9px Tahoma, Arial, sans-serif;

    box-sizing: border-box;
}


.JobOrderrow21Actions > .btnJobOrderr26:disabled,
.JobOrderrow22Actions > .btnJobOrderr26:disabled {
    background:
        linear-gradient(
            #f6f6f6,
            #e7e7e7
        );

    border-color: #cccccc;

    color: #999999;

    opacity: 1;
}


/* =========================================================
   SIGNATURE IMAGE
   ========================================================= */

.JobOrderrow21Signature {
    display: block;

    width: 100%;
    height: 22px;

    padding: 1px 3px;

    object-fit: contain;

    background: #ffffff;

    border: 1px solid #b8c0cf;
    border-radius: 3px;

    box-sizing: border-box;
}


/* =========================================================
   TIME
   ========================================================= */

.JobOrderTimeBox {
    width: 100%;
    height: 22px;

    padding: 0 4px;

    background: #ffffff;

    border: 1px solid #b8c0cf;
    border-radius: 3px;

    color: #334155;

    font: 9px Tahoma, Arial, sans-serif;

    outline: none;

    box-sizing: border-box;
}


/* =========================================================
   ACTION TEXTBOX
   ========================================================= */

.JobOrderrow21Actions > .TextJobOrderr3,
.JobOrderrow22Actions > .TextJobOrderr3 {
    width: 100%;
    height: 22px;

    padding: 0 6px;

    background: #eef3f9;

    border: 1px solid #c1cad7;
    border-radius: 3px;

    color: #37475b;

    font: 9px Tahoma, Arial, sans-serif;

    box-sizing: border-box;
}


.JobOrderrow21Actions > .TextJobOrderr3:disabled,
.JobOrderrow22Actions > .TextJobOrderr3:disabled {
    background: #eef3f9;

    color: #8b949f;

    opacity: 1;
}


/* =========================================================
   ORDER PRINT BOX

   IMPORTANT:
   WIDTH = 100% OF LAST 245px COLUMN

   لذلك هو بنفس عرض TOTALS بالضبط
   ========================================================= */

.JobOrderPrintBox {
    display: grid;

    grid-template-columns:
        95px
        minmax(0, 1fr);

    gap: 7px;

    align-items: center;

    justify-self: stretch;

    width: 100%;
    height: 30px;

    padding: 3px 6px;

    margin: 0;

    background:
        linear-gradient(
            #f9fafc,
            #edf1f6
        );

    border: 1px solid #b8c0cf;
    border-radius: 4px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95);

    box-sizing: border-box;
}


/* =========================================================
   ORDER PRINT BUTTON
   ========================================================= */
/* ================= PRINT BUTTON - BLUE METALLIC ================= */
.JobOrderPrintBox .btnJobOrderr26{
    width:100%;
    height:22px;
    margin:0;
    padding:0 5px;

    background:linear-gradient(180deg,
        #f4f9fc 0%,
        #d7e7f0 30%,
        #b6cfdd 62%,
        #8eafc1 100%)!important;

    border:1px solid var(--jo-gold)!important;
    border-radius:3px;

    color:#294452!important;
    font:bold 9px Tahoma,Arial,sans-serif;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.98),
        inset 0 -1px 0 rgba(45,75,90,.12),
        0 1px 2px rgba(0,0,0,.12);

    cursor:pointer;
    box-sizing:border-box;
    transition:.15s;
}

/* ================= HOVER ================= */
.JobOrderPrintBox .btnJobOrderr26:not(:disabled):hover{
    background:linear-gradient(180deg,
        #ffffff 0%,
        #e8f2f7 30%,
        #c9dde8 62%,
        #a5c2d1 100%)!important;

    border-color:var(--jo-gold-dark)!important;
    color:#203b49!important;

    box-shadow:
        inset 0 1px 0 #fff,
        0 2px 4px rgba(45,80,100,.18);
}

/* ================= CLICK ================= */
.JobOrderPrintBox .btnJobOrderr26:not(:disabled):active{
    background:linear-gradient(180deg,
        #87a7b8 0%,
        #a7bfcc 45%,
        #d5e3ea 100%)!important;

    border-color:#806221!important;
    color:#1e3541!important;

    box-shadow:
        inset 0 2px 4px rgba(35,65,80,.22)!important;

    transform:translateY(1px);
}

/* ================= DISABLED ================= */
.JobOrderPrintBox .btnJobOrderr26:disabled,
.JobOrderPrintBox .btnJobOrderr26[disabled]{
    background:linear-gradient(180deg,
        #e8edef 0%,
        #d6dfe3 32%,
        #c1cdd3 65%,
        #abb9c0 100%)!important;

    border:1px solid #b5aa89!important;

    color:#78868d!important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.70)!important;

    cursor:default!important;
    pointer-events:none!important;
    opacity:.88!important;
}

/* =========================================================
   ORDER PRINT DROPDOWN
   ========================================================= */

.JobOrderPrintBox .DropJobOrderr3 {
    width: 100%;
    height: 22px;

    margin: 0;

    padding: 0 5px;

    background:
        linear-gradient(
            #ffffff,
            #e8edf2
        );

    border: 1px solid #b8c0ca;
    border-radius: 3px;

    color: #37475b;

    font: 9px Tahoma, Arial, sans-serif;

    box-sizing: border-box;
}


.JobOrderPrintBox .DropJobOrderr3:disabled {
    background:
        linear-gradient(
            #f4f4f4,
            #e5e5e5
        );

    border-color: #cccccc;

    color: #999999;

    opacity: 1;
}


/* =========================================================
   PANEL MIDDLE
   ========================================================= */

.JobOrderpanel-middle {
    width: 100%;

    padding: 4px;

    background: #f9fafc;

    border: 1px solid #d5d8e4;

    box-sizing: border-box;
}


/* row23 */


/* row24 */
/* ---------------------------------------------------------
   ROW 24
   صف بيانات مع زر بنفسجي مميز.
   --------------------------------------------------------- */
.JobOrderrow24{
  display:grid;
  grid-template-columns: 100px 25px 75px 75px 74px 49px 1fr;
  gap:8px;
  align-items:center;
  padding:3px 6px;
  box-sizing:border-box;
}

.JobOrderrow24 > *{
  min-width:0;
}

.JobOrderrow24 span,
.JobOrderrow24 label{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  height:22px;
  font:11px Tahoma, Arial;
  padding:0 8px;
  background:#d8dde6;
  border:1px solid #b8c0cf;
  border-radius:2px;
}

/* خانات العرض */
.JobOrderrow24 .txt.joborderr24{
  background:#eef2f8;
  border:1px solid #b8c0cf;
  padding:0 6px;
}

/* زر */
.btnJobOrderr24{
   height:22px;
  width:25px;
  padding:0;
  background: linear-gradient(180deg, #f1e8f6, #c3aed6);
  border: 1px solid #a78bc2;
  color: #3b2f4a;
  border-radius:2px;
  font:bold 11px Arial;
  cursor:pointer;
  box-sizing:border-box;
  outline:none;
}

.btnJobOrderr24:hover:not(:disabled){
  background: linear-gradient(180deg, #f7f1fb 0%, #e6daf0 50%, #d1bfe3 100%);
}

.btnJobOrderr24:active:not(:disabled){
  transform:scale(0.97);
}

.btnJobOrderr24:disabled,
.btnJobOrderr24[disabled]{
  color:#9a9a9a;
  cursor:default;
  pointer-events:none;
  box-shadow:none;
  opacity:0.85;
}

/* textbox */
.TextJobOrderr24{
  height:22px;
  width:100%;
  border:1px solid #b8c0cf;
  background:#d8dde6;
  padding:2px 6px;
  box-sizing:border-box;
}


/* row25 */

/* ---------------------------------------------------------
   ROW 25 - COST CENTER / CONTRACT
   يحتوي مراكز التكلفة والقيم الفرعية واختيار العقد.
   --------------------------------------------------------- */
.JobOrderrow25{
  display:grid;
  grid-template-columns:
    100px   /* Cost Center */
    25px
    75px   /* Drop */
    68px    /* value */
    35px    /* Sub */
    75px   /* Drop */
    68px    /* value */
    35px    /* Sub */
    75px   /* Drop */
    68px    /* value */
    70px    /* Contract */
    45px
   1fr;

  gap:8px;
  padding:4px 6px;
  border-radius:4px;
}

/* منع الكسر */
.JobOrderrow25 > *{
  min-width:0;
}
.btnJobOrderr25{
 height:22px;
  width:25px;
  padding:0;
  background: linear-gradient(180deg, #eef4fb, #b6cde8);
  border: 1px solid #9bb8d3;
  color: #1f2d3d;
  border-radius:2px;
  font:bold 11px Arial;
  cursor:pointer;
  box-sizing:border-box;
  outline:none;
}

.btnJobOrderr25:hover:not(:disabled){
 background: linear-gradient(180deg, #f6faff 0%, #e2edf9 50%, #c7dbf0 100%);
}

.btnJobOrderr25:active:not(:disabled){
  transform:scale(0.97);
}

.btnJobOrderr25:disabled,
.btnJobOrderr25[disabled]{
  color:#9a9a9a;
  cursor:default;
  pointer-events:none;
  box-shadow:none;
  opacity:0.85;
}
/* Labels (زي الصورة) */
.JobOrderrow25 span,
.JobOrderrow25 label{
  display:flex;
  align-items:center;
  height:22px;
  font:11px Tahoma, Arial;
  padding:0 6px;
  background:#cfd4dc;
  border:1px solid #b5bcc8;
  border-radius:3px;
  color:#2b2f36;
}

/* القيم (الفاتح) */
.JobOrderrow25 .txt.joborderr25{
  background:#e7eaf0;
  border:1px solid #c3c8d2;
  border-radius:3px;
}

/* Dropdown */
.DropJobOrderr25{
  height:22px;
  width:100%;
 background: linear-gradient(180deg, #eef4fb, #b6cde8);
  border: 1px solid #9bb8d3;
  border-radius:3px;
  font:11px Tahoma;
  padding:0 6px;
  box-sizing:border-box;
}

/* Button Contract */
.btnJobOrderr25Contract{
 height:22px;
  padding:0;
  background: linear-gradient(180deg, #eef9ff, #a7d8ff);
  border: 1px solid #7cc3f2;
  color: #1b3a4b;
  border-radius:2px;
  font:bold 11px Arial;
  cursor:pointer;
  box-sizing:border-box;
  outline:none;
}

.btnJobOrderr25Contract:hover:not(:disabled){
 background: linear-gradient(180deg, #f6faff 0%, #e2edf9 50%, #c7dbf0 100%);
}

.btnJobOrderr25Contract:active:not(:disabled){
  transform:scale(0.97);
}

/* Disabled نفس الصورة */
.btnJobOrderr25Contract:disabled,
.btnJobOrderr25Contract:disabled{
  opacity:0.85;
  cursor:default;
}

/* row26 */

/* ---------------------------------------------------------
   ROW 26 - ACTIONS
   صف الإجراءات مثل Quotation / Signature / Order Print وغيرها.
   --------------------------------------------------------- */
.JobOrderrow26{
  display:grid;
  grid-template-columns: 6% 4% 8% 7% 6% 5% 7% 7% 7% 7% 7% 7% 7% 5%;
  gap:8px;
  padding:4px 6px;
  border-radius:4px;
   margin-top: 10px; /* مسافة بين الصف والعناصر الموجودة فوقه */
}

.JobOrderrow26 > *{
  min-width:0;
}

/* Labels */
.JobOrderrow26 span,
.JobOrderrow26 label{
  display:flex;
  align-items:center;
  height:22px;
  font:11px Tahoma, Arial, sans-serif;
  box-sizing:border-box;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  padding:0 6px;
  background:#cfd4dc;
  border:1px solid #b5bcc8;
  border-radius:3px;
  color:#2b2f36;
}

/* value labels */
.JobOrderrow26 .txt.joborderr26{
  background:#e7eaf0;
  border:1px solid #c3c8d2;
  border-radius:3px;
}

/* button */
.btnJobOrderr26{
  height:22px;
  background:linear-gradient(#f4f9ff, #cfe8ff);
  border:1px solid #91c5e8;
  border-radius:3px;
  font:bold 10px Tahoma, Arial, sans-serif;
  color:#526b78;
  cursor:pointer;
  box-sizing:border-box;
}

.btnJobOrderr26:hover:not(:disabled){
 ackground: linear-gradient(180deg, #f8fbfd 0%, #dbe4ea 50%, #c3d0d8 100%);
}

.btnJobOrderr26:active:not(:disabled){
  transform:scale(0.97);
}

.btnJobOrderr26:disabled,
.btnJobOrderr26[disabled]{
  color:#9a9a9a;
  cursor:default;
  pointer-events:none;
  box-shadow:none;
  opacity:0.85;
}

/* dropdown */
.DropJobOrderr26{
  height:22px;
  width:100%;
 background: linear-gradient(180deg, #f1f5f9, #b0bec5);
  border: 1px solid #90a4ae;
  border-radius:3px;
  font:11px Tahoma, Arial, sans-serif;
  padding:0 6px;
  box-sizing:border-box;
  color:#2b2f36;
  outline:none;
}

.DropJobOrderr26:disabled,
.DropJobOrderr26[disabled]{
  opacity:0.85;
  cursor:default;
  pointer-events:none;
}

/* textbox */
.TextJobOrderr26{
  height:22px;
  width:100%;
  border:1px solid #c3c8d2;
  background:#e7eaf0;
  border-radius:3px;
  font:11px Tahoma, Arial, sans-serif;
  padding:0 6px;
  box-sizing:border-box;
  outline:none;
  color:#2b2f36;
  text-align:center;
}

.TextJobOrderr26:disabled,
.TextJobOrderr26[disabled]{
  opacity:0.85;
  cursor:default;
  pointer-events:none;
}
.JobOrderImage26 {
    width: 100%;
    height: 25px;
    object-fit: contain;

    background: #fff;
    border: 1px solid #b8c0cf;
    border-radius: 3px;

    padding: 1px 4px;
    box-sizing: border-box;
}

/* row27 */
/* ---------------------------------------------------------
   ROW 27
   صف Dropdown وأزرار الإجراءات والحفظ.
   --------------------------------------------------------- */
.JobOrderrow27{
  display:grid;
  grid-template-columns: 100px 25px 240px 49px 250px 1fr;
  gap:8px;
  padding:4px 6px;
  border-radius:4px;
  height:22px;
}

.JobOrderrow27 > *{
  min-width:0;
}

/* Labels */
.JobOrderrow27 span,
.JobOrderrow27 label{
  display:flex;
  align-items:center;
  height:22px;
  font:11px Tahoma, Arial;
  padding:0 6px;
  background:#cfd4dc;
  border:1px solid #b5bcc8;
  border-radius:3px;
  color:#2b2f36;
}

/* values */
.JobOrderrow27 .txt.joborderr27{
  background:#e7eaf0;
  border:1px solid #c3c8d2;
}

/* dropdown */
.DropJobOrderr27{
  height:22px;
  width:100%;
  background: linear-gradient(180deg, #fffaf0, #e8dcc7);
  border: 1px solid #d6c7a8;
  border-radius:3px;
  font:11px Tahoma;
  padding:0 6px;
}

/* buttons */
.btnJobOrderr27{
  height:22px;
  width:25px;
  padding:0;
  background: linear-gradient(180deg, #fffaf0, #e8dcc7);
  border: 1px solid #d6c7a8;
  color: #4a3b2c;
  border-radius:2px;
  font:bold 11px Arial;
  cursor:pointer;
  box-sizing:border-box;
  outline:none;
}

.btnJobOrderr27:hover:not(:disabled){
   background: linear-gradient(180deg, #fffdf6 0%, #f4ead7 50%, #ede0c9 100%);
}

.btnJobOrderr27:active:not(:disabled){
  transform:scale(0.97);
}

.btnJobOrderr27:disabled,
.btnJobOrderr27[disabled]{
  color:#9a9a9a;
  cursor:default;
  pointer-events:none;
  box-shadow:none;
  opacity:0.85;
}

/* زر الحفظ */

/* =========================
   Button
========================= */
.btnJobOrderr27Save{
  width:100%;
  height:22px;
  background:linear-gradient(#f9e6c7, #e7b977);
  border:1px solid #b58a4b;
  border-radius:2px;
  font:bold 11px Arial;
  color:#2b2f36;
  cursor:pointer;
  box-sizing:border-box;
  outline:none;
}

/* Disabled */
.btnJobOrderr27Save:disabled,
.btnJobOrderr27Save[disabled]{
  background:linear-gradient(#f9e6c7, #e7b977);
  border:1px solid #b58a4b;
  color:#9a9a9a;
  cursor:default;
  pointer-events:none;
  opacity:0.85;
}


/* حاوية الجريد */
/* =========================================================
   08. BOTTOM GRID AREA
   الحاوية السفلية التي تضم GridView وسجلات أمر الشغل.
   ========================================================= */
.JobOrderpanel-bottom-inner{
  height:100px;
  padding:6px;
  background:#fdfefe;
  border:1px solid #d5d8e4;
  border-radius:4px;
  box-sizing:border-box;
}

/* GridView Classic */
/* ---------------------------------------------------------
   GRIDVIEW
   تنسيق الجدول السفلي: Header / Cells / Alternating / Hover.
   --------------------------------------------------------- */
.JobOrdergv{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: Tahoma, Arial;
  font-size: 11px;
  color: #1f2430;
  background: #fff;
  border: 1px solid #bfc8d6;
  border-radius: 4px;
  overflow: hidden;
}

/* Header */
.JobOrdergv th{
  background: linear-gradient(#e8edf6, #d7deeb);
  color: #2a3240;
  text-align: left;
  font-weight: 700;
  padding: 6px 8px;
  border-bottom: 1px solid #bfc8d6;
  border-right: 1px solid #c9d2e0;
  white-space: nowrap;
}

/* Cells */
.JobOrdergv td{
  padding: 6px 8px;
  border-bottom: 1px solid #e2e8f2;
  border-right: 1px solid #eef2f8;
  vertical-align: middle;
}

/* Alternating rows */
.JobOrdergv tr:nth-child(even) td{
  background: #f6f8fc;
}

/* Hover */
.JobOrdergv tr:hover td{
  background: #eaf1ff;
}

/* Selected row (لو بتستخدم Select) */
.JobOrdergv .JobOrdergv-selected td,
.JobOrdergv tr.selected td{
  background: #dbe8ff !important;
  border-bottom-color: #b9cdf8;
}

/* اخر عمود بدون خط يمين */
.JobOrdergv th:last-child,
.JobOrdergv td:last-child{
  border-right: none;
}

/* آخر صف بدون خط تحت */
.JobOrdergv tr:last-child td{
  border-bottom: none;
}

/* منطقة السكرول */
.JobOrdergv-scroll{
  max-height: 100px;      /* ← غير الارتفاع براحتك */
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid #bfc8d6;
  border-radius: 4px;
  background: #fff;
}

/* خلي الجريد ياخد العرض كله */
.JobOrdergv-scroll .JobOrdergv{
  width: 100%;
  border: none; /* علشان البوردر يبقى واحد */
}

.JobOrdergv td:first-child,
.JobOrdergv th:first-child {
    display: none;
}

.JobOrdergv tr {
    cursor: pointer;
}


/* joborder-footer-right-bottom */

/* ---------------------------------------------------------
   ROW 28 - POST / DELETE
   صف الأوامر النهائية مثل Post وDelete والمراجع.
   --------------------------------------------------------- */
.JobOrderrow28{
  display:grid;
  grid-template-columns:
    70px   /* Entrance */
    50px
    150px
    70px   /* References */
    70px    /* Post */
    50px
    50px
    150px
    80px
    1fr;   /* Delete */

  gap:8px;
  align-items:center;
  padding:3px 1px;
  margin-bottom:1px;
  padding-bottom:1px;
}

.JobOrderrow28 > *{
  min-width:0;
}

/* Labels */
.JobOrderrow28 span,
.JobOrderrow28 label{
  display:flex;
  align-items:center;
  justify-content:center;
  height:22px;
  font:10px Tahoma, Arial;
  padding:0 6px;
  background:#cfd4dc;
  border:1px solid #b5bcc8;
  border-radius:3px;
  color:#2b2f36;
}

/* values */
.JobOrderrow28 .txt.joborderr28{
  background:#e7eaf0;
  border:1px solid #c3c8d2;
}

/* Post button */
.btnJobOrderr28Post{
  height:22px;
  width:100%;
  background:linear-gradient(#eef7f1, #cdebd8);
  border:1px solid #7fb095;
  border-radius:3px;
  font:bold 10px Tahoma;
  cursor:pointer;
}

.btnJobOrderr28Post:hover:not(:disabled){
  background:linear-gradient(#f6fff9, #bfe3ce);
}

/* Delete button */
.btnJobOrderr28Delete{
  height:22px;
  width:100%;
  background:linear-gradient(#ffecec, #f5bcbc);
  border:1px solid #d66;
  border-radius:3px;
  font:bold 10px Tahoma;
  color:#7a1f1f;
  cursor:pointer;
}

.btnJobOrderr28Delete:hover:not(:disabled){
  background:linear-gradient(#fff5f5, #f0a0a0);
}

/* Disabled */
.btnJobOrderr28Post:disabled,
.btnJobOrderr28Delete:disabled{
  opacity:0.85;
  cursor:default;
}

/* ===== BOTTOM FOOTER ===== */

/* ===== BOTTOM FOOTER (ONE LINE) ===== */
/* =========================================================
   09. FOOTER
   الشريط السفلي؛ الأرشيف يساراً وأزرار الأوامر يميناً.
   ========================================================= */
.JobOrderfooter{
  margin-top: 10px;
  height: 30px;

  display: flex;
  align-items: center;              /* نفس المستوى */
  justify-content: space-between;   /* يسار/يمين */
  gap: 8px;
  font-size: 10px;

  margin-right: 5px;
}

/* LEFT */
.JobOrderfooterleft{
  margin-left: 20px;
  display: flex;
  align-items: center;
}

    /* ---------------------------------------------------------
       ARCHIVE PANEL
       يعرض بيانات الأرشيف وعدد العناصر وزر الأرشفة.
       --------------------------------------------------------- */
    .JobOrderarchivepanel{
      display: flex;
      align-items: center;
      gap: 5px;
    }

    /* labels same height as buttons */
    .JobOrderarchivepanel label{
      display: inline-flex;
      align-items: center;
      height: 20px;
      padding: 0 8px;

      background: #eef1f6;
      border: 1px solid #c5cad8;
      border-radius: 2px;
      color: #2b2f36;
      line-height: 22px;
    }

    #lblJobOrderArchivecount{
  min-width:7px;
  justify-content:flex-end;
  padding:0 4px;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:#7a8594;
  font:bold 12px Tahoma, Arial, sans-serif;
}
#lblJobOrderArchiveTitle{
      background:none;
      border:none;
      padding:0;
      color:#7a8594;
      font: bold 12px Tahoma, Arial;
      letter-spacing:0.3px;
    }

    .btnJobOrderArchive{
      height:26px;
  padding:0 12px;
  border-radius:4px;

  /* أزرق معدني */
  background:linear-gradient(#eaf1f8, #d6e0ec);
  border:1px solid #b8c6d6;
  height: 22px;
  font:11px Tahoma, Arial;
  color:#3e5f82;

  cursor:pointer;
  transition:all 0.2s ease;
  box-sizing:border-box;
}

.btnJobOrderArchive:hover:not(:disabled){
  background:linear-gradient(#f4f8fc, #cfdbe9);
  border-color:#a9bbcf;
  color:#2f4f70;
}

.btnJobOrderArchive:active:not(:disabled){
  transform:scale(0.97);
}

.btnJobOrderArchive:disabled,
.btnJobOrderArchive[disabled]{
  background:linear-gradient(#f2f6fb, #e4ebf3);
  border:1px solid #d0dbe6;
  color:#8ea2b8;

  cursor:default;
  pointer-events:none;
  opacity:1;
}


/* RIGHT */
.JobOrderfooterright{
  display: flex;
  align-items: center;
}

.JobOrderfooterrighttop{
  display: flex;            /* بدل grid */
  align-items: center;
  gap: 65px;
}


/* =========================================================
   10. MAIN COMMAND BUTTONS
   New / Edit / Save / Print / View / Delete / Exit
   ========================================================= */

.JobOrder-cmd-btn {
    margin: 0;
    width: 115px;
    height: 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 3px;
    font: 11px Tahoma, Arial, sans-serif;

    cursor: pointer;

    border: 1px solid #c89455;
    background: linear-gradient(#ffe7c6, #f4c89e);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.85),
        0 1px 1px rgba(0,0,0,.08);

    box-sizing: border-box;

    opacity: 1;
    transition:
        filter .12s ease,
        box-shadow .12s ease,
        opacity .12s ease;
}


/* =========================================================
   ENABLED BUTTONS
   ========================================================= */

.JobOrder-cmd-btn:not(:disabled):hover {
    filter: brightness(0.96);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 1px 2px rgba(0,0,0,.15);
}

.JobOrder-cmd-btn:not(:disabled):active {
    filter: brightness(0.91);

    box-shadow:
        inset 0 1px 3px rgba(0,0,0,.18);
}


/* =========================================================
   NEW - Olive Sage
   ========================================================= */

.JobOrder-cmd-new {
    background: linear-gradient(#e4eadf, #c6d2bb);
    border: 1px solid #9fae8f;
    color: #2f3a2f;
}


/* =========================================================
   EDIT - Steel Blue
   ========================================================= */

.JobOrder-cmd-edit {
    background: linear-gradient(#e3e8ee, #c3ccd8);
    border: 1px solid #8d9fb4;
    color: #2b333d;
}


/* =========================================================
   SAVE - Forest Green
   ========================================================= */

.JobOrder-cmd-save {
    background: linear-gradient(#d4e4d8, #a8c7b0);
    border: 1px solid #6f9b7f;
    color: #1f3527;
    font-weight: bold;
}


/* =========================================================
   PRINT - Antique Plum
   ========================================================= */

.JobOrder-cmd-print {
    background: linear-gradient(#ece4f0, #cfc0da);
    border: 1px solid #9a86af;
    color: #3a2a4a;
}


/* =========================================================
   VIEW - Warm Gray
   ========================================================= */

.JobOrder-cmd-view {
    background: linear-gradient(#f0f0ee, #d3d3cf);
    border: 1px solid #a2a2a0;
    color: #2f2f2f;
}


/* =========================================================
   DELETE - Oxblood
   ========================================================= */

.JobOrder-cmd-delete {
    background: linear-gradient(#ead6d6, #c9a4a4);
    border: 1px solid #8f5f5f;
    color: #3a1f1f;
}


/* =========================================================
   EXIT - Charcoal
   ========================================================= */

.JobOrder-cmd-exit {
    background: linear-gradient(#e0e0e0, #bcbcbc);
    border: 1px solid #7a7a7a;
    color: #2a2a2a;
}


/* =========================================================
   ENABLED
   الزر المتاح يظهر عليه اليد
   ========================================================= */

.JobOrder-cmd-btn:not(:disabled) {
    cursor: pointer;
}


/* =========================================================
   DISABLED
   باهت فقط - بدون يد وبدون علامة غير متاح
   ========================================================= */

.JobOrder-cmd-btn:disabled,
.JobOrder-cmd-btn[disabled] {

    background: linear-gradient(
        #eeeeee,
        #d7d7d7
    ) !important;

    border: 1px solid #c4c4c4 !important;

    color: #999999 !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.65) !important;

    opacity: 0.65;

    filter: grayscale(100%);

    /* مهم */
    cursor: default !important;
}


/* Disabled لا يتغير عند مرور الماوس */
.JobOrder-cmd-btn:disabled:hover,
.JobOrder-cmd-btn[disabled]:hover {

    filter: grayscale(100%);

    background: linear-gradient(
        #eeeeee,
        #d7d7d7
    ) !important;

    cursor: default !important;
}

/* =========================================================
   RESPONSIVE NOTE
   JobOrder is inside #ResponsivePage (1920x1080).
   Do NOT add JobOrderScale or resizeJobOrder().
   ResizeSunexePage() scales the complete page, including JobOrder.
   ========================================================= */

   /* =========================================================
   زيادة المسافات الرأسية بين صفوف Job Order
   ========================================================= */





.JobOrderrow21,
.JobOrderrow22,
.JobOrderrow23,
.JobOrderrow24,
.JobOrderrow25,
.JobOrderrow26,
.JobOrderrow27,
.JobOrderrow28 {
    margin-bottom: 7px;   /* المسافة بين كل صف والذي يليه */
}
/* =========================================================
   WRITABLE TEXTBOX + DROPDOWN - MEDIUM BLUE BORDER
   يوحّد إطار جميع حقول الكتابة والقوائم القابلة للتعديل.
   لا يغيّر حالة Disabled.
   ========================================================= */
.JobOrder-window input[type="text"]:not(:disabled):not([readonly]),
.JobOrder-window input[type="date"]:not(:disabled):not([readonly]),
.JobOrder-window input[type="time"]:not(:disabled):not([readonly]),
.JobOrder-window input[type="number"]:not(:disabled):not([readonly]),
.JobOrder-window input[type="email"]:not(:disabled):not([readonly]),
.JobOrder-window input[type="tel"]:not(:disabled):not([readonly]),
.JobOrder-window input[type="search"]:not(:disabled):not([readonly]),
.JobOrder-window textarea:not(:disabled):not([readonly]),
.JobOrder-window select:not(:disabled){
    border:1px solid #1F4E79;
    outline:none;
    box-sizing:border-box;
}

.JobOrder-window input[type="text"]:not(:disabled):not([readonly]):focus,
.JobOrder-window input[type="date"]:not(:disabled):not([readonly]):focus,
.JobOrder-window input[type="time"]:not(:disabled):not([readonly]):focus,
.JobOrder-window input[type="number"]:not(:disabled):not([readonly]):focus,
.JobOrder-window input[type="email"]:not(:disabled):not([readonly]):focus,
.JobOrder-window input[type="tel"]:not(:disabled):not([readonly]):focus,
.JobOrder-window input[type="search"]:not(:disabled):not([readonly]):focus,
.JobOrder-window textarea:not(:disabled):not([readonly]):focus,
.JobOrder-window select:not(:disabled):focus{
    border-color:#163A5C;
    box-shadow:0 0 0 1px rgba(74,155,232,.15);
}








/* الصفوف السفلية: توحيد بداية ونهاية الحاوية */
.JobOrderrow21,
.JobOrderrow22,
.JobOrderrow23,
.JobOrderrow24,
.JobOrderrow25,
.JobOrderrow26,
.JobOrderrow27,
.JobOrderrow28 {
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    box-sizing:border-box !important;
}


/* =====================================================================
   11) SUNEXE ERP - METALLIC ROW-BY-ROW THEME
   ---------------------------------------------------------------------
   نظام الألوان:
   - ROW 1  : فضي ميتالك.
   - ROW 3  : أخضر ميتالك.
   - ROW 4  : أزرق ميتالك.
   - ROW 6  : رمادي ميتالك.
   - ROW 7  : فضي ميتالك داكن.
   - ROW 8  : أزرق ميتالك داكن.
   - ROW 21/22 : فضي + أزرق هادئ للجداول والحسابات.
   - ROW 24 : فضي ميتالك.
   - ROW 25 : أخضر ميتالك.
   - ROW 26 : أزرق ميتالك.
   - ROW 27 : رمادي/فضي ميتالك.
   - ROW 28 : فضي ميتالك مع Post أخضر و Delete أحمر.
   - الحدود الذهبية هي العنصر المشترك بين الصفوف.
   ---------------------------------------------------------------------
   مهم:
   هذا القسم يغير الألوان والمظهر فقط.
   لا يغير Grid / Width / Height / ترتيب الأعمدة الأصلي.
   ===================================================================== */

:root{
    --jo-gold:#b08d3b;              /* الذهبي الأساسي المستخدم في حدود العناصر */
    --jo-gold-light:#d9c477;        /* ذهبي فاتح للـ Hover واللمعة */
    --jo-gold-dark:#806626;         /* ذهبي غامق عند التركيز Focus */

    --jo-silver-1:#fbfbfa;          /* بداية التدرج الفضي - أعلى العنصر */
    --jo-silver-2:#e5e6e4;          /* منتصف التدرج الفضي */
    --jo-silver-3:#c8cbc8;          /* نهاية التدرج الفضي - أسفل العنصر */

    --jo-gray-1:#eeeeec;            /* بداية التدرج الرمادي */
    --jo-gray-2:#d0d2cf;            /* منتصف التدرج الرمادي */
    --jo-gray-3:#aeb2ae;            /* نهاية التدرج الرمادي */

    --jo-green-1:#f1f5ef;           /* بداية التدرج الأخضر الميتالك */
    --jo-green-2:#cbd8c7;           /* منتصف التدرج الأخضر */
    --jo-green-3:#9eaf9b;           /* نهاية التدرج الأخضر */

    --jo-blue-1:#f1f5f7;            /* بداية التدرج الأزرق الميتالك */
    --jo-blue-2:#cbd8df;            /* منتصف التدرج الأزرق */
    --jo-blue-3:#9eB4c0;            /* نهاية التدرج الأزرق */
}







/* =====================================================================
   ROW 5 - ICONS
   صف الأيقونات: فضي محايد حتى لا يتعارض مع ألوان الصور
   ===================================================================== */

/* إطار كل صورة/أيقونة */
.JobOrderIconItem img,
.JobOrderIconItem input[type="image"]{
    background:linear-gradient(180deg,#ffffff 0%,#e8e9e7 55%,#cfd2cf 100%) !important; /* فضي محايد */
    border:1px solid var(--jo-gold) !important;       /* إطار ذهبي */
    box-shadow:inset 0 1px 0 #ffffff,0 2px 5px rgba(0,0,0,.12); /* عمق معدني */
}

/* اسم الأيقونة */
.JobOrderIconItem span{
    color:#343a37 !important;                         /* نص داكن ومحايد */
}










/* =====================================================================
   ROW 21 - SERVICE GRID / TOTALS / ACTIONS
   الصف 21: فضي ميتالك مع لمسة زرقاء هادئة للجداول
   ===================================================================== */

/* حاوية الجدول */
.JobOrderrow21G{
    background:#f9faf9 !important;                    /* خلفية فضية فاتحة */
    border:1px solid var(--jo-gold) !important;       /* إطار ذهبي */
}

/* رأس الجدول */
.JobOrderrow21Grid th{
    background:linear-gradient(180deg,#f4f6f6 0%,#d7dee1 55%,#bac5ca 100%) !important; /* فضي مائل للأزرق */
    border-bottom:1px solid var(--jo-gold) !important; /* خط سفلي ذهبي */
    color:#33444d !important;                         /* لون عنوان العمود */
}

/* خلايا الجدول */
.JobOrderrow21Grid td{
    background:#fafbfa !important;                    /* خلفية قراءة هادئة */
    color:#343b38 !important;                         /* لون البيانات */
}

/* صندوق الإجماليات */
.JobOrderrow21Totals{
    background:linear-gradient(180deg,#fafafa 0%,#e4e6e3 100%) !important; /* فضي */
    border:1px solid var(--jo-gold) !important;       /* إطار ذهبي */
}

/* Labels الإجماليات */
.JobOrderrow21Totals span{
    background:linear-gradient(180deg,#f1f2f0 0%,#d4d7d3 100%) !important; /* رمادي فضي */
    border:1px solid var(--jo-gold) !important;       /* إطار ذهبي */
}


/* =====================================================================
   ROW 22 - PAYMENT / TOTALS / ACTIONS
   الصف 22: أزرق ميتالك هادئ
   ===================================================================== */

/* صندوق الدفع */
.JobOrderrow22Payment{
    background:linear-gradient(180deg,#f6f9fa 0%,#dce5e9 100%) !important; /* أزرق فضي */
    border:1px solid var(--jo-gold) !important;       /* إطار ذهبي */
}

/* Card / Cash */
.JobOrderPaymentIcon{
    background:linear-gradient(180deg,#ffffff 0%,#e5ecef 55%,#c8d5db 100%) !important; /* أزرق ميتالك فاتح */
    border:1px solid var(--jo-gold) !important;       /* إطار ذهبي */
}

/* إجماليات الصف 22 */
.JobOrderrow22Totals{
    background:linear-gradient(180deg,#f5f8f9 0%,#d9e3e7 100%) !important; /* أزرق رمادي */
    border:1px solid var(--jo-gold) !important;       /* إطار ذهبي */
}

/* Labels الإجماليات */
.JobOrderrow22Totals span{
    background:linear-gradient(180deg,#edf2f4 0%,#cbd8de 100%) !important; /* أزرق ميتالك */
    border:1px solid var(--jo-gold) !important;       /* إطار ذهبي */
}


/* =====================================================================
   ROW 24 - SILVER METALLIC
   الصف 24: فضي ميتالك
   ===================================================================== */

/* Labels */
.JobOrderrow24 span,
.JobOrderrow24 label{
    background:linear-gradient(180deg,var(--jo-silver-1),var(--jo-silver-3)) !important; /* فضي */
    border:1px solid var(--jo-gold) !important;       /* إطار ذهبي */
    color:#343836 !important;                         /* لون النص */
}

/* القيم */
.JobOrderrow24 .txt.joborderr24,
.TextJobOrderr24{
    background:linear-gradient(180deg,#ffffff,#e1e3e0) !important; /* فضي فاتح */
    border:1px solid var(--jo-gold) !important;       /* إطار ذهبي */
}

/* الزر */
.btnJobOrderr24{
    background:linear-gradient(180deg,#f8f8f6,#cfd2cf) !important; /* فضي ميتالك */
    border:1px solid var(--jo-gold) !important;       /* إطار ذهبي */
    color:#353a37 !important;                         /* لون النص */
}


/* =====================================================================
   ROW 25 - GREEN METALLIC
   الصف 25: أخضر ميتالك لمراكز التكلفة والعقد
   ===================================================================== */

/* Labels */
.JobOrderrow25 span,
.JobOrderrow25 label{
    background:linear-gradient(180deg,var(--jo-green-1),var(--jo-green-3)) !important; /* أخضر ميتالك */
    border:1px solid var(--jo-gold) !important;       /* إطار ذهبي */
    color:#2d3c30 !important;                         /* لون النص */
}

/* القيم */
.JobOrderrow25 .txt.joborderr25{
    background:linear-gradient(180deg,#f9fbf8,#d9e4d5) !important; /* أخضر فاتح */
    border:1px solid var(--jo-gold) !important;       /* إطار ذهبي */
}

/* Dropdown */
.DropJobOrderr25{
    background:linear-gradient(180deg,#f5f8f3,#c7d7c3) !important; /* أخضر متوسط */
    border:1px solid var(--jo-gold) !important;       /* إطار ذهبي */
    color:#2e4232 !important;                         /* لون النص */
}

/* أزرار الصف والعقد */
.btnJobOrderr25,
.btnJobOrderr25Contract{
    background:linear-gradient(180deg,#eef4ec,#aebfa9) !important; /* أخضر معدني */
    border:1px solid var(--jo-gold) !important;       /* إطار ذهبي */
    color:#293b2d !important;                         /* لون النص */
}


/* =====================================================================
   ROW 26 - BLUE METALLIC
   الصف 26: أزرق ميتالك للإجراءات
   ===================================================================== */

/* Labels */
.JobOrderrow26 span,
.JobOrderrow26 label{
    background:linear-gradient(180deg,var(--jo-blue-1),var(--jo-blue-3)) !important; /* أزرق ميتالك */
    border:1px solid var(--jo-gold) !important;       /* إطار ذهبي */
    color:#2c4049 !important;                         /* لون النص */
}

/* قيم الصف */
.JobOrderrow26 .txt.joborderr26,
.TextJobOrderr26{
    background:linear-gradient(180deg,#f8fbfc,#d8e3e8) !important; /* أزرق فاتح */
    border:1px solid var(--jo-gold) !important;       /* إطار ذهبي */
}

/* الأزرار */
.btnJobOrderr26{
    background:linear-gradient(180deg,#f1f6f8,#b5c9d3) !important; /* أزرق معدني */
    border:1px solid var(--jo-gold) !important;       /* إطار ذهبي */
    color:#2d4550 !important;                         /* لون النص */
}

/* القوائم */
.DropJobOrderr26{
    background:linear-gradient(180deg,#f3f7f9,#c2d2da) !important; /* أزرق رمادي */
    border:1px solid var(--jo-gold) !important;       /* إطار ذهبي */
    color:#2e424b !important;                         /* لون النص */
}


/* =====================================================================
   ROW 27 - GRAY / SILVER METALLIC
   الصف 27: رمادي فضي مع زر Save ذهبي
   ===================================================================== */

/* Labels */
.JobOrderrow27 span,
.JobOrderrow27 label{
    background:linear-gradient(180deg,var(--jo-gray-1),var(--jo-gray-3)) !important; /* رمادي ميتالك */
    border:1px solid var(--jo-gold) !important;       /* إطار ذهبي */
    color:#303532 !important;                         /* لون النص */
}

/* القيم */
.JobOrderrow27 .txt.joborderr27{
    background:linear-gradient(180deg,#f8f8f7,#dcdfdc) !important; /* فضي فاتح */
    border:1px solid var(--jo-gold) !important;       /* إطار ذهبي */
}

/* Dropdown */
.DropJobOrderr27{
    background:linear-gradient(180deg,#f7f7f5,#d1d4d0) !important; /* رمادي فضي */
    border:1px solid var(--jo-gold) !important;       /* إطار ذهبي */
    color:#343936 !important;                         /* لون النص */
}

/* زر الاختيار */
.btnJobOrderr27{
    background:linear-gradient(180deg,#f6f6f4,#c9ccc8) !important; /* فضي ميتالك */
    border:1px solid var(--jo-gold) !important;       /* إطار ذهبي */
    color:#343936 !important;                         /* لون النص */
}

/* زر الحفظ */
.btnJobOrderr27Save{
    background:linear-gradient(180deg,#fff7df 0%,#e6ce8a 52%,#c29e47 100%) !important; /* ذهبي ميتالك */
    border:1px solid var(--jo-gold-dark) !important; /* إطار ذهبي داكن */
    color:#45391e !important;                         /* لون النص */
}


/* =====================================================================
   ROW 28 - FINAL ACTIONS
   الصف 28: فضي ميتالك، مع الحفاظ على المعنى الوظيفي للأزرار
   ===================================================================== */

/* Labels */
.JobOrderrow28 span,
.JobOrderrow28 label{
    background:linear-gradient(180deg,var(--jo-silver-1),var(--jo-silver-3)) !important; /* فضي ميتالك */
    border:1px solid var(--jo-gold) !important;       /* إطار ذهبي */
    color:#343836 !important;                         /* لون النص */
}

/* القيم */
.JobOrderrow28 .txt.joborderr28{
    background:linear-gradient(180deg,#ffffff,#e1e3e0) !important; /* فضي فاتح */
    border:1px solid var(--jo-gold) !important;       /* إطار ذهبي */
}

/* زر Post - أخضر لأن العملية إيجابية */
.btnJobOrderr28Post{
    background:linear-gradient(180deg,#edf5eb 0%,#bfd3ba 52%,#91ad8e 100%) !important; /* أخضر ميتالك */
    border:1px solid var(--jo-gold) !important;       /* إطار ذهبي */
    color:#28402d !important;                         /* لون النص */
}

/* زر Delete - أحمر معدني لتمييز العملية الخطرة */
.btnJobOrderr28Delete{
    background:linear-gradient(180deg,#f5eaea 0%,#d8b9b9 52%,#b78585 100%) !important; /* أحمر ميتالك */
    border:1px solid var(--jo-gold) !important;       /* إطار ذهبي يحافظ على وحدة التصميم */
    color:#5b2929 !important;                         /* لون النص */
}


/* =====================================================================
   COMMON FOCUS
   التركيز على الحقول المتاحة: إطار ذهبي أغمق
   ===================================================================== */

.JobOrder-window input:not(:disabled):not([readonly]):focus,
.JobOrder-window textarea:not(:disabled):not([readonly]):focus,
.JobOrder-window select:not(:disabled):focus{
    border-color:var(--jo-gold-dark) !important;      /* تأكيد الحقل النشط بالذهبي */
    outline:none !important;                          /* إزالة Outline الافتراضي */
    box-shadow:0 0 0 1px rgba(176,141,59,.20),inset 0 1px 0 rgba(255,255,255,.85) !important; /* هالة ذهبية خفيفة */
}


/* =====================================================================
   COMMON DISABLED
   العناصر غير المتاحة: فضي باهت بدون علامة المنع
   ===================================================================== */

.JobOrder-window input:disabled,
.JobOrder-window textarea:disabled,
.JobOrder-window select:disabled{
    background:linear-gradient(180deg,#eeeeec,#d7d9d6) !important; /* فضي باهت */
    border-color:#b7b9b5 !important;               /* إطار رمادي هادئ */
    color:#8a8e89 !important;                      /* نص باهت */
    cursor:default !important;                     /* سهم عادي بدل علامة المنع */
    opacity:.88;                                   /* إظهار حالة Disabled بدون اختفاء */
}


/* =====================================================================
   MAIN COMMAND BUTTONS
   أزرار New / Edit / Save / Print / View / Delete / Exit
   ===================================================================== */

/* New - فضي مائل للأخضر */
.JobOrder-cmd-new{
    background:linear-gradient(180deg,#f2f5ef,#b8c8b3) !important; /* أخضر فضي */
    border-color:var(--jo-gold) !important;                         /* إطار ذهبي */
}

/* Edit - أزرق ميتالك */
.JobOrder-cmd-edit{
    background:linear-gradient(180deg,#eef3f6,#aebfca) !important; /* أزرق ميتالك */
    border-color:var(--jo-gold) !important;                         /* إطار ذهبي */
}

/* Save - أخضر ميتالك */
.JobOrder-cmd-save{
    background:linear-gradient(180deg,#eaf2e8,#9fb89d) !important; /* أخضر ميتالك */
    border-color:var(--jo-gold) !important;                         /* إطار ذهبي */
}

/* Print - فضي ميتالك */
.JobOrder-cmd-print{
    background:linear-gradient(180deg,#f7f7f5,#c5c9c5) !important; /* فضي */
    border-color:var(--jo-gold) !important;                         /* إطار ذهبي */
    color:#343936 !important;                                       /* لون النص */
}

/* View - رمادي ميتالك */
.JobOrder-cmd-view{
    background:linear-gradient(180deg,#efefed,#b8bbb8) !important; /* رمادي */
    border-color:var(--jo-gold) !important;                         /* إطار ذهبي */
}

/* Delete - أحمر ميتالك */
.JobOrder-cmd-delete{
    background:linear-gradient(180deg,#f2e7e7,#b98d8d) !important; /* أحمر معدني */
    border-color:var(--jo-gold) !important;                         /* إطار ذهبي */
}

/* Exit - رمادي غامق ميتالك */
.JobOrder-cmd-exit{
    background:linear-gradient(180deg,#e5e6e4,#9da19d) !important; /* رمادي غامق */
    border-color:var(--jo-gold) !important;                         /* إطار ذهبي */
}

.HiddenSelectCell {
    width: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden;
}

.HiddenSelectCell a {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}
/* =====================================================================
   END OF METALLIC ROW-BY-ROW THEME
   ===================================================================== */