/* =========================================================================
   eSchool UI Enhancement — ADMIN ONLY (user_id 102406370)
   OVERRIDE فقط — لا تُعدَّل أي ملفات/أنماط قائمة. كلها فوق styles_ar.css.
   الهدف: عرض كامل + سايد بار RTL (يمين) قابل للطي/الفتح + تصميم لوحة عصري.
   الألوان محايدة فقط (أبيض/رمادي) — لا نلمس ألوان الثيم ولا الخطوط.
   Osama Shaheen - 09 Sep 2026
   ========================================================================= */

:root{ --es-ease-out: cubic-bezier(0.23, 1, 0.32, 1); }

/* ============================ 1) عرض كامل ============================ */
.container{
    width: 100% !important; max-width: 100% !important;
    margin-left: 0 !important; margin-right: 0 !important;
    padding-left: 22px !important; padding-right: 22px !important;
    box-sizing: border-box !important;
}
.wrapper{ width: 100% !important; max-width: 100% !important; }
.content_lft_shadow{ width: 100% !important; box-sizing: border-box !important; }
.content_rgt_shadow{
    width: 100% !important; box-sizing: border-box !important;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 10px 30px rgba(0,0,0,0.05) !important;
}

/* ============================ 2) منطقة المحتوى (RTL) ============================ */
/* السايد بار يُوضع مطلقًا على اليمين، والمحتوى يملأ العرض؛ لا flex كي لا ينكسر RTL */
#contentPages_users{
    direction: rtl;
    position: relative;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 20px 98px 20px 20px !important;   /* الحشو الأيمن يحجز مكان شريط الأيقونات المطوي */
}
.contentSeccion{
    width: 100% !important;
    box-sizing: border-box !important;
    float: none !important;
}
.contentSeccion table{ width: 100% !important; }
#contentPages_users img{ max-width: 100%; height: auto; }
input, select, textarea{ max-width: 100%; }
#footer .grid[style*="914"]{ width: 100% !important; box-sizing: border-box; }

/* ============================ 3) السايد بار: بطاقة تُطوى/تُفتح على اليمين ============================ */
.left_block_users{
    direction: rtl;
    position: absolute;
    top: 20px;
    right: 20px;
    width: 62px;                       /* مطوي: شريط أيقونات */
    box-sizing: border-box !important;
    padding: 10px 8px !important;
    overflow-x: hidden;
    overflow-y: auto;                  /* تمرير داخلي */
    max-height: calc(100vh - 140px);   /* ارتفاع محدود بدل الامتداد لأسفل الصفحة */
    scrollbar-width: thin;
    z-index: 40;
    /* بطاقة محايدة: خلفية بيضاء + حد رمادي + ظل */
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 10px 30px rgba(0,0,0,0.06);
    transition: width 220ms var(--es-ease-out), box-shadow 220ms var(--es-ease-out);
}
/* شريط تمرير رفيع، ومخفي في الوضع المطوي */
.left_block_users::-webkit-scrollbar{ width: 7px; }
.left_block_users::-webkit-scrollbar-thumb{ background: rgba(0,0,0,0.20); border-radius: 8px; }
.left_block_users:not(:hover){ scrollbar-width: none; }
.left_block_users:not(:hover)::-webkit-scrollbar{ width: 0; }
/* يتوسّع عند المرور (فوق المحتوى — بلا إزاحة) */
.left_block_users:hover{
    width: 250px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.14), 0 16px 44px rgba(0,0,0,0.10);
}
/* عند الطي: أخفِ حقول/قوائم الأعلى ليبقى شريط أيقونات نظيف */
.left_block_users:not(:hover) select,
.left_block_users:not(:hover) input,
.left_block_users:not(:hover) [class*="_editForm_box"]{ display: none !important; }
/* قوائم الأعلى تملأ العرض عند الفتح */
.left_block_users select, .left_block_users .picklist_style,
.left_block_users [class*="_editForm_box"]{ width: 100% !important; max-width: 100%; box-sizing: border-box; }

/* عناصر القائمة: صف أيقونة + نص، بحد وظل خفيف */
[id="sideMenu_Btn_container"]{
    display: flex !important;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
    width: 100% !important;
    box-sizing: border-box;
    float: none !important;
    padding: 10px 11px !important;
    margin: 0 0 7px 0 !important;
    border: 1px solid #eee !important;
    border-radius: 10px !important;
    background: #fafafa;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    transition: transform 140ms var(--es-ease-out), box-shadow 140ms var(--es-ease-out);
}
[id="sideMenu_Btn_container"]:hover{
    transform: translateX(-2px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}
[id="sideMenu_Btn_container"] .grid{ float: none !important; margin: 0 !important; }

/* الأيقونة: ثابتة ومتمركزة */
.sideMenu_iconSeccion{ flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 24px; }
.sideMenu_iconSeccion img{ display: block; max-width: 100%; height: auto; }

/* النص: يظهر فقط عند فتح السايد بار */
.sideMenu_Btn_mdl{ flex: 1 1 auto; min-width: 0; line-height: 1.4; }
.left_block_users:not(:hover) [id="sideMenu_Btn_container"]{ justify-content: center; padding-left: 8px !important; padding-right: 8px !important; }
.left_block_users:not(:hover) .sideMenu_Btn_mdl{ display: none !important; }

/* ============================ 4) لمسات عامة (بلا ألوان ثيم) ============================ */
input[type="text"], input[type="number"], input[type="password"], input[type="email"],
input[type="search"], input[type="tel"], input[type="date"], textarea, select{ border-radius: 6px; }
.table_td{ padding-top: 6px !important; padding-bottom: 6px !important; }
button, input[type="button"], input[type="submit"], input[type="reset"]{ transition: transform 150ms var(--es-ease-out); }
button:active, input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active{ transform: scale(0.97); }
.select2-container{ max-width: 100%; vertical-align: middle; }
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple{ border-radius: 6px; }

/* ============================ الهيدر: إعادة هيكلة كاملة (مع الحفاظ على كل المكونات) ============================ */

/* (المفتاح) الغلاف .grid الذي يلفّ الترويسة كاملة كان float:right; display:inline فيتقلّص —
   نجعله كامل العرض. نستهدفه فقط عبر :has كي لا نلمس بقية عناصر .grid في الموقع */
.grid:has(> .container.content_dir){
    float: none !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
}
#header img {

    position: relative;
    top: -152px;
    left: 800px;
}
.content{
    width: 100%;
}
/* نستهدف حاوية الهيدر عبر :has — لا نعتمد على #header الذي لا يوجد بكل الصفحات */
.container:has(> #header_content) {
    direction: rtl;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 12px 18px;
    width: 100% !important;
    box-sizing: border-box;
    padding: 10px 8px !important;
    flex-direction: column-reverse;
    flex-wrap: nowrap;
}
/* إلغاء الـ float وإخفاء الفواصل داخل الهيدر */
.container:has(> #header_content) > *{ float: none !important; margin: 0 !important; }
.container:has(> #header_content) > .clear{ display: none !important; }

/* مجموعة اللوغو + اسم النظام: تبقى معاً على اليمين، متمركزة عموديًا */
.container:has(> #header_content) > .grid{ display: flex; align-items: center; gap: 8px; }

/* محتوى الدخول يُدفَع لأقصى اليسار، كعمود: ترحيب فوق + أزرار أسفل */
#header_content{
    margin-inline-start: auto !important;   /* يملأ الفراغ ويدفعه لليسار */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
#header_content > .clear{ display: none !important; }
#header_content .login_txt{ margin: 0 !important; }

/* شريط الأزرار العلوي (topMenu): صف مرتّب بمسافات */
.menu_container{ margin: 0 !important; }
.menu_container{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; direction: rtl; }
.menu_container > *{ float: none !important; margin: 0 !important; }

/* ============================ شريط التبويبات (school_tab) — ترتيب أفضل ============================ */
/* تخطيط فقط: تباعد/زوايا/محاذاة RTL — بلا تغيير ألوان الثيم (أخضر/أصفر/أبيض) ولا الخط */
div.school_tab{
    direction: rtl;                 /* التبويبات تبدأ من اليمين */
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 3px;
    padding: 5px 6px 0 6px;
    border-radius: 12px 12px 0 0;   /* زوايا علوية للبطاقة */
    overflow: hidden;
}
div.school_tab div{
    float: none !important;
    padding: 11px 20px !important;  /* مساحة أوسع وأوضح */
    border-radius: 9px 9px 0 0;
    white-space: nowrap;
    transition: transform 140ms var(--es-ease-out), background-color 160ms var(--es-ease-out) !important;
}
div.school_tab div:hover{ transform: translateY(-1px); }

/* محتوى التبويب: زوايا سفلية لربط نظيف مع الشريط */
.tabcontent{ border-radius: 0 0 12px 12px; }

/* ============================ 5) responsive ============================ */
@media (max-width: 768px){
    /* على الجوال: سايد بار كامل بالأعلى، بلا طي مطلق */
    #contentPages_users{ padding: 16px !important; }
    .left_block_users{
        position: static; width: 100% !important; right: auto; top: auto;
        margin-bottom: 14px; overflow: visible; max-height: none;
    }
    .left_block_users:not(:hover) select,
    .left_block_users:not(:hover) input,
    .left_block_users:not(:hover) [class*="_editForm_box"]{ display: block !important; }
    .left_block_users:not(:hover) [id="sideMenu_Btn_container"]{ justify-content: flex-start; }
    .left_block_users:not(:hover) .sideMenu_Btn_mdl{ display: block !important; }
}

@media (prefers-reduced-motion: reduce){
    *, *::before, *::after{ transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}