/* =====================================================================
   [شكل] قواعد عامة لكل شاشات السيستم والمنصة والموقع
   ===================================================================== */

/* من غير سكرول بار ظاهر في أي مكان (السكرول نفسه شغال عادي بالماوس واللمس) */
html, body, * { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none; background: transparent; }

/* كل المودالز: المودال نفسه هو اللي بيسكرول لما يكبر (مش الصفحة)، والهيدر والزراير تفضل ثابتة */
.modal-dialog:not(.modal-fullscreen) { max-height: calc(100% - 3.5rem); }
.modal-dialog:not(.modal-fullscreen) > .modal-content { max-height: calc(100vh - 3.5rem); display: flex; flex-direction: column; overflow: hidden; }
.modal-dialog:not(.modal-fullscreen) > .modal-content > form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; overflow: hidden; }
.modal-dialog:not(.modal-fullscreen) > .modal-content > .modal-body,
.modal-dialog:not(.modal-fullscreen) > .modal-content > form > .modal-body { overflow-y: auto; min-height: 0; flex: 1 1 auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.modal-dialog:not(.modal-fullscreen) > .modal-content > .modal-header,
.modal-dialog:not(.modal-fullscreen) > .modal-content > .modal-footer,
.modal-dialog:not(.modal-fullscreen) > .modal-content > form > .modal-footer { flex: 0 0 auto; }
@media (max-width: 575.98px) {
    .modal-dialog:not(.modal-fullscreen) > .modal-content { max-height: calc(100vh - 1rem); }
}

/* الصفحة مابتتشدش (سحب/سكرول زيادة عن الآخر) — الخلفية ثابتة والمحتوى بس اللي بيتحرك */
html, body { overscroll-behavior: none; }
/* من غير زووم بالضغطتين، والتكبير بالصباعين ممنوع من gs-base.js (التصغير مسموح عشان عرض التابات في المتصفح) */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button, input, select, textarea, label, [role="button"] { touch-action: manipulation; }
/* السكرول جوه القايمة الجانبية أو أي مودال أو قايمة منسدلة مابيحركش الصفحة اللي ورا */
.gs-sidebar, .gs-sidebar *, .gs-nav, .modal, .modal-body, .dropdown-menu, .gs-bell-panel, .gs-bell-list, .select2-results__options { overscroll-behavior: contain; }

/* شريط "السيرفر غير متاح" */
.gs-net { position: fixed; z-index: 3000; top: calc(12px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px);
    padding: 11px 16px; border-radius: 14px; background: #141414; color: #fff; font-family: inherit; box-shadow: 0 18px 44px rgba(0, 0, 0, .35); animation: gsNetIn .3s ease both; }
.gs-net b { font-size: 13.5px; font-weight: 800; white-space: nowrap; }
.gs-net small { font-size: 12px; color: #b9bcc2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-net-dot { width: 9px; height: 9px; border-radius: 50%; background: #f59e0b; flex: 0 0 auto; animation: gsNetPulse 1.2s ease-in-out infinite; }
.gs-net.is-back .gs-net-dot { background: #22c55e; animation: none; }
.gs-net button { border: 0; border-radius: 9px; background: var(--gs-red, #d53c41); color: #fff; font-weight: 800; font-size: 12.5px; padding: 5px 12px; cursor: pointer; }
@keyframes gsNetIn { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes gsNetPulse { 50% { opacity: .35; } }

/* [شكل] التحديث: شريط تقدم فوق وقت التحديث + كارت "تم التحديث" بعد ما الصفحة ترجع */
.gs-refbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 3100; pointer-events: none; }
.gs-refbar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gs-red, #d53c41), var(--gs-red-light, #ff7a7e)); box-shadow: 0 0 10px rgba(var(--gs-red-rgb, 213, 60, 65), .6); border-radius: 0 3px 3px 0; transition: width 2.2s cubic-bezier(.1, .7, .2, 1); }
.gs-refbar.is-on span { width: 85%; }
[dir="rtl"] .gs-refbar span { margin-inline-start: 0; border-radius: 3px 0 0 3px; }
.gs-reftoast { position: fixed; z-index: 3050; top: calc(var(--gs-top-h, 0px) + 12px + env(safe-area-inset-top)); left: 50%; transform: translate(-50%, -16px) scale(.96); opacity: 0;
    display: flex; align-items: center; gap: 10px; padding: 11px 20px 11px 12px; border-radius: 999px; background: #141414; color: #fff; font-family: inherit;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .28); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), opacity .25s ease; pointer-events: none; }
.gs-reftoast.is-on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.gs-reftoast .fa { width: 27px; height: 27px; border-radius: 50%; background: #22c55e; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; animation: gsRefPop .45s cubic-bezier(.34, 1.56, .64, 1) .1s both; }
.gs-reftoast { white-space: nowrap; max-width: calc(100vw - 24px); }
.gs-reftoast b { font-size: 14.5px; font-weight: 800; white-space: nowrap; }
.gs-reftoast small { font-size: 13px; color: #9ca3af; direction: ltr; white-space: nowrap; flex: 0 0 auto; }
.gs-reftoast .fa { flex: 0 0 auto; }
@keyframes gsRefPop { from { transform: scale(0) rotate(-90deg); } to { transform: none; } }

/* المودال اللي بيطلع من تحت: اللي ورا بار المتصفح (تحت) أبيض زي المودال */
@media (max-width: 767.98px) {
    html.gs-modal-open { background: #fff !important; }
    /* صفحات العضو: سفاري بياخد لون بار المتصفح اللي تحت من لون الـ body — وقت المودال بيبقى أبيض زي المودال (حتة واحدة).
       شكل الصفحة نفسها مبيتغيرش (الخلفية الغامقة طبقة لوحدها ::before) ، وشريط الساعة فوق بيفضل غامق (::after) */
    html.gs-modal-open body.gsm-body { background: #fff !important; background-color: #fff !important; }
    html.gs-modal-open body.gsm-body .modal.show .modal-dialog > .modal-content { padding-bottom: env(safe-area-inset-bottom, 0px); }
    html.gs-modal-open .modal-dialog > .modal-content { box-shadow: 0 -12px 40px rgba(0, 0, 0, .25); }
    /* آيفون (سفاري الجديد): البار اللي تحت عايم فوق الصفحة، واللي وراه بيبان من خلفية الصفحة (غامقة).
       المودال والضلمة بيوصلوا لآخر الشاشة الحقيقية (100lvh)، والمودال نفسه بيفضل فوق البار (100svh)،
       والمساحة اللي تحته (ورا البار) بيضا زيه — من غير ما شكل الصفحة يتغير */
    @supports (height: 100lvh) {
        html.gs-modal-open body.gsm-body .modal.show { bottom: auto; height: 100lvh; }
        html.gs-modal-open body.gsm-body .modal-backdrop { bottom: auto; height: 100lvh; }
        html.gs-modal-open body.gsm-body .modal.show .modal-dialog { height: 100svh; min-height: 100svh; }
        html.gs-modal-open body.gsm-body .modal.show .modal-dialog > .modal-content {
            box-shadow: 0 -12px 40px rgba(0, 0, 0, .25), 0 calc(100lvh - 100svh) 0 0 #fff;
        }
    }
}

/* المودال مفتوح: السكرول جوه المودال مايعدّيش للصفحة اللي وراه (مايهنّجش) */
.modal { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.modal .modal-body, .modal .modal-content { overscroll-behavior: contain; }
html.gs-scroll-lock, html.gs-scroll-lock body { overflow: hidden; }
/* [مودال الموبايل] الصفحة بتتثبت مكانها وهي باينة ورا المودال: الـ body طوله طول المحتوى (مش 100% بس) — غير كده الصفحة كانت بتتقص وتختفي لو كنت نازل تحت */
html.gs-scroll-lock body { height: auto !important; min-height: 100%; }
.sweet-overlay { touch-action: none; }

/* شاشات الموظفين والمنصة كتطبيق على الآيفون: الهيدر بينزل تحت النوتش ، والجزء اللي ورا الساعة بلون الهيدر نفسه (فاتح في الفاتح ، غامق في الغامق) */
.gs-topbar { padding-top: env(safe-area-inset-top, 0px); height: calc(var(--gs-top-h) + env(safe-area-inset-top, 0px)); }
.gs-sidebar { padding-top: env(safe-area-inset-top, 0px); }

/* =====================================================================
   [شكل] الشريط اللي فوق على اللابتوب: مفيش حاجة تتكسر سطرين ، وبيتلم على مراحل (gs-base.js بيحدد المرحلة tb-1..tb-4)
   ===================================================================== */
.gs-topbar-end > *, .gs-topbar > .gs-icon-btn, .gs-topbar > .gs-title-icon { flex-shrink: 0; }
.gs-topbar .gs-user-btn > span:not(.gs-user-avatar) { white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.gs-title.gs-has-tip { white-space: nowrap; }
@media (min-width: 992px) {
    .gs-topbar:not(.tb-3) .gs-search { min-width: 240px; }
    /* 1) التنبيهات رقم بس (الشرح في الـ title) + اسم اليوزر بيستخبى */
    .gs-topbar.tb-1 .gs-top-alert > span, .gs-topbar.tb-1 .gs-user-btn > span:not(.gs-user-avatar) { display: none; }
    .gs-topbar.tb-1 .gs-top-alert { padding: 0 10px; gap: 5px; }
    .gs-topbar.tb-1 .gs-user-btn { padding: 0 4px; gap: 4px; }
    .gs-topbar.tb-1 .pf-search-btn > span { display: none; }
    /* 2) "تثبيت التطبيق" أيقونة + اختصار البحث */
    .gs-topbar.tb-2 .gs-install > span { display: none; }
    .gs-topbar.tb-2 .gs-install { width: 38px !important; padding: 0; justify-content: center; }
    .gs-topbar.tb-2 .gs-search kbd, .gs-topbar.tb-2 .pf-search-btn kbd { display: none; }
    .gs-topbar.tb-2 .gs-search-field input { padding-inline-end: 14px; }
    .gs-topbar.tb-2 .gs-topbar-end { gap: 8px; }
    /* 3) البحث زرار بيفتح تحت الشريط (زي الموبايل) */
    .gs-topbar.tb-3 .gs-search { flex: 0 0 auto; position: relative; min-width: 0; }
    .gs-topbar.tb-3 .gs-search-toggle { display: inline-flex; }
    .gs-topbar.tb-3 .gs-search-field { display: none; position: absolute; top: calc(100% + 10px); inset-inline-start: 0; inset-inline-end: auto; width: min(440px, calc(100vw - 280px)); padding: 10px; background: #fff; border: 1px solid var(--gs-border); border-radius: 14px; box-shadow: 0 16px 36px rgba(16, 24, 40, .14); z-index: 5; }
    .gs-topbar.tb-3 .gs-search.is-expanded .gs-search-field { display: flex; animation: gsPop .16s var(--gs-ease, ease) both; }
    .gs-topbar.tb-3 .gs-search-ic { inset-inline-start: 24px; }
    .gs-topbar.tb-3 .gs-search .gs-spinner { inset-inline-end: 22px; }
    .gs-topbar.tb-3 .gs-search-results { position: absolute; top: calc(100% + 72px); inset-inline-start: 0; inset-inline-end: auto; width: min(440px, calc(100vw - 280px)); min-width: 0; }
    .gs-topbar.tb-3 .pf-search-btn { width: 40px; padding: 0; justify-content: center; }
    /* 4) أيقونة العنوان + زرار التحديث */
    .gs-topbar.tb-4 .gs-title-icon, .gs-topbar.tb-4 .gs-refresh { display: none !important; }
    .gs-topbar.tb-4 { gap: 10px; }
}

/* [شكل] خانة + لاحقة (زي النطاق الفرعي "….gymsofto.com"): الخانة واللاحقة يكمّلوا بعض في العربي والإنجليزي
   (المجموعة نفسها dir="ltr" عشان الدومين يتقري صح، فالحواف بتتظبط على اتجاهها هي مش اتجاه الصفحة) */
.input-group[dir="ltr"] > .form-control { border-radius: 10px !important; }
.input-group[dir="ltr"] > .form-control:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group[dir="ltr"] > .form-control:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.input-group[dir="ltr"] > .input-group-append { margin-left: -1px !important; margin-right: 0 !important; }
.input-group[dir="ltr"] > .input-group-prepend { margin-right: -1px !important; margin-left: 0 !important; }
.input-group[dir="ltr"] > .input-group-append > .input-group-text { border-radius: 0 10px 10px 0 !important; }
.input-group[dir="ltr"] > .input-group-prepend > .input-group-text { border-radius: 10px 0 0 10px !important; }

/* [الأرقام بالسالب] علامة الـ - على شمال الرقم + أحمر (في الكروت الغامقة أحمر فاتح) */
.gs-neg-n { direction: ltr; unicode-bidi: isolate; color: #dc2626 !important; white-space: nowrap; }
.rp-classic .col-sm-6:last-child > .card:first-child .gs-neg-n, .gs-kpi.is-hero .gs-neg-n, .rp-kpi.is-dark .gs-neg-n, .gs-pill.is-dark .gs-neg-n { color: #ff8a8e !important; }

/* =====================================================================
   [تطبيق الآيفون] الشاشة من أول فوق خالص (status bar = black-translucent في _Layout و_LayoutPlatform):
   الهيدر مكانه زي ما هو تحت الساعة (ورا الساعة بلون الهيدر) ، المنيو والخلفية بيطلعوا لفوق خالص ،
   وكل حاجة ثابتة فوق بتنزل تحت الساعة — شاشات الموظفين والمنصة بس (body.gs-admin) ، شاشات العميل زي ما هي. برا التطبيق (المتصفح) المسافة دي = 0 فمفيش أي تغيير
   ===================================================================== */
body.gs-admin .gs-progress, body.gs-admin .gs-refbar, body.gs-admin .pf-topbar-load { top: env(safe-area-inset-top, 0px); }
body.gs-admin .gs-ptr { margin-top: calc(8px + env(safe-area-inset-top, 0px)); }
body.gs-admin .gs-ntoast { top: calc(14px + env(safe-area-inset-top, 0px)); }
body.gs-admin .gak-toast { top: calc(76px + env(safe-area-inset-top, 0px)); }
body.gs-admin .sh-cart { top: calc(var(--gs-top-h, 64px) + 12px + env(safe-area-inset-top, 0px)); }
body.gs-admin .pf-preview-panel { top: calc(var(--gs-top-h) + 16px + env(safe-area-inset-top, 0px)); }
body.gs-admin .pf-content-panel.is-full { padding-top: env(safe-area-inset-top, 0px); }
body.gs-admin .pf-preview-modal { padding-top: calc(18px + env(safe-area-inset-top, 0px)); }
@media (max-width: 991.98px) {
    body.gs-admin .gs-search-field { top: calc(var(--gs-top-h) - 2px + env(safe-area-inset-top, 0px)); }
    body.gs-admin .gs-search-results { top: calc(var(--gs-top-h) + 54px + env(safe-area-inset-top, 0px)); }
}
@media (max-width: 575px) {
    body.gs-admin .gs-bell-panel { top: calc(var(--gs-top-h, 60px) + 6px + env(safe-area-inset-top, 0px)); }
}

/* [موبايل] المنيو المفتوحة: الصفحة اللي وراها ثابتة مابتتحركش (gs-base.js بيثبتها) + خلفية ناعمة مضببة */
@media (max-width: 991.98px) {
    body.gs-admin.gs-drawer-open .gs-backdrop { background: rgba(10, 10, 12, .42); -webkit-backdrop-filter: blur(3px) saturate(120%); backdrop-filter: blur(3px) saturate(120%); touch-action: none; }
    body.gs-admin.gs-drawer-open .gs-sidebar { box-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 24px 60px rgba(0, 0, 0, .45); }
    /* [تطبيق الآيفون] لو الآيفون حسب الشاشة أقصر من الحقيقة: الخلفية بتكمل لبرا تحت ، والمنيو لونها بيكمل لتحت خالص (من غير ما حاجة جواها تتحرك) */
    body.gs-admin.gs-drawer-open .gs-backdrop { top: calc(-1 * env(safe-area-inset-top, 0px) - 2px); bottom: -160px !important; }
    body.gs-admin .gs-sidebar::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 160px; background: var(--gs-side-bottom, #101010); pointer-events: none; }
    body.gs-admin .gs-sidebar .gs-nav { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
}
/* الصفحة متثبتة (منيو / مودال): الهيدر والشريط اللي تحته بيفضلوا ظاهرين فوق مكانهم بدل ما يطلعوا مع الصفحة */
html.gs-scroll-lock body.gs-admin .gs-topbar, html.gs-scroll-lock body.gs-admin .gs-alert-strip { transform: translateY(var(--gs-lock-y, 0px)); }
/* [تطبيق الآيفون] iOS 26 (باج WebKit 301108): مع black-translucent الشاشة بتتحسب أقصر من الحقيقة بطول شريط الساعة
   (100% و 100dvh قصيرين — 100lvh بس هو الطول الحقيقي) ⇒ جزء رمادي تحت. في التطبيق بس (standalone) بنقيس بـ lvh:
   الصفحة نفسها ، المنيو ، الخلفية ، الشريط اللي تحت وزرار + (في المتصفح أو لو الباج اتصلح: الفرق = 0 فمفيش تغيير) */
@media (display-mode: standalone) {
    html:has(> body.gs-admin) { height: 100lvh; }
    body.gs-admin { min-height: 100lvh; }
    body.gs-admin .gs-boot { bottom: auto; height: 100lvh; }
}
@media (display-mode: standalone) and (max-width: 991.98px) {
    body.gs-admin .gs-sidebar { bottom: auto; height: 100lvh; }
    body.gs-admin.gs-drawer-open .gs-backdrop { bottom: auto !important; height: calc(100lvh + 160px); }
    body.gs-admin .gs-bottom-nav { bottom: calc(100dvh - 100lvh); }
    body.gs-admin .gs-fab { bottom: calc(82px + env(safe-area-inset-bottom, 0px) + 100dvh - 100lvh); }
}
@media (max-width: 991.98px) {
    body.gs-admin .gs-side-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}
}