/* =====================================================================
   [شكل] لمسات الشكل العامة (js/gs-polish.js): الشاشات الفاضية + التنبيه الصغير بعد الحفظ + تفاصيل التأكيد + زاد/قل في التقارير
   ===================================================================== */

/* ---------- الشاشات الفاضية ---------- */
.gs-admin table.dataTable tbody td.gs-es-td,
.gs-admin table.gs-cards > tbody > tr > td.gs-es-td { display: table-cell !important; text-align: center !important; background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; }
.gs-admin table.gs-cards > tbody > tr:has(> td.gs-es-td) { display: table-row !important; background: transparent !important; box-shadow: none !important; border: 0 !important; transform: none !important; }
.gs-admin table.gs-cards > tbody > tr:has(> td.gs-es-td)::before { display: none !important; }
.gs-es { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 40px 16px 36px; text-align: center; }
.gs-es svg { width: 140px; height: 112px; margin-bottom: 8px; }
.gs-es b { display: block; font-size: 17px; font-weight: 800; color: var(--gs-text, #1d2127); }
.gs-es small { display: block; max-width: 420px; margin: 0 auto; font-size: 13.5px; line-height: 1.7; color: var(--gs-muted, #636b78); }
.gs-es .gs-es-btn { margin-top: 12px; border-radius: 12px !important; padding: 9px 18px !important; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.gs-es.is-sm { padding: 18px 12px; gap: 3px; }
.gs-es.is-sm b { font-size: 14.5px; }
.gs-es.is-sm small { font-size: 12.5px; }
.gs-es.is-find svg { width: 120px; height: 96px; }
@media (max-width: 767.98px) { .gs-es { padding: 28px 12px 26px; } .gs-es svg { width: 116px; height: 92px; } }

/* ---------- التنبيه الصغير بعد الحفظ ---------- */
.gs-toasts { position: fixed; z-index: 3000; bottom: 28px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; padding: 0 16px; }   /* [شكل] في نص الشاشة تحت (فوق القايمة الجانبية) */
.gs-toast {
    pointer-events: auto; display: flex; align-items: center; gap: 12px; min-width: 280px; max-width: min(420px, calc(100vw - 32px));
    padding: 11px 12px; border-radius: 14px; background: #141414; color: #fff; font-family: inherit;
    box-shadow: 0 20px 44px -14px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .04);
    opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .22s ease, transform .26s cubic-bezier(.2, .8, .2, 1);
}
.gs-toast.is-in { opacity: 1; transform: none; }
.gs-toast.is-out { opacity: 0; transform: translateY(6px); }
.gs-toast .ok { width: 30px; height: 30px; border-radius: 9px; background: #16a34a; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 13px; }
.gs-toast .tx { flex: 1 1 auto; min-width: 0; }
.gs-toast .tx b { display: block; font-size: 14px; font-weight: 700; }
.gs-toast .tx small { display: block; font-size: 12.5px; color: #a7abb3; margin-top: 1px; }
.gs-toast .x { border: 0; background: transparent; color: #8a8f98; width: 28px; height: 28px; border-radius: 8px; flex: 0 0 auto; cursor: pointer; }
.gs-toast .x:hover { background: rgba(255, 255, 255, .08); color: #fff; }
@media (max-width: 991.98px) {
    .gs-toasts { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
    .gs-toast { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .gs-toast { transition: none; } }

/* ---------- تأكيد المسح: هيتمسح إيه ---------- */
.sweet-alert .gs-swal-item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 2px; padding: 11px 14px;
    border-radius: 12px; background: #f8f9fb; border: 1px solid #eef0f3; font-size: 13.5px; color: #475467; text-align: start;
}
.sweet-alert .gs-swal-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sweet-alert .gs-swal-item b { color: #101828; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- التقارير: زاد ولا قل ---------- */
.gs-trend { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 4px; }
.gs-trend-d { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.5; }
.gs-trend-d.is-good { background: rgba(34, 197, 94, .14); color: #15803d; }
.gs-trend-d.is-bad { background: rgba(239, 68, 68, .12); color: #dc2626; }
.gs-trend-d.is-eq, .gs-trend-d.is-new { background: #f2f4f7; color: #667085; }
.gs-trend-c { font-size: 10.5px; font-weight: 600; color: #98a2b3; }
.gs-trend-sp { width: 84px; height: 22px; margin-top: 2px; }
/* كارت الملخص الغامق */
.rp-classic .col-sm-6:last-child > .card:first-child .gs-trend-d.is-good { background: rgba(34, 197, 94, .18); color: #4ade80; }
.rp-classic .col-sm-6:last-child > .card:first-child .gs-trend-d.is-bad { background: rgba(239, 68, 68, .18); color: #fca5a5; }
.rp-classic .col-sm-6:last-child > .card:first-child .gs-trend-d.is-eq, .rp-classic .col-sm-6:last-child > .card:first-child .gs-trend-d.is-new { background: rgba(255, 255, 255, .1); color: #d0d5dd; }
.rp-classic .col-sm-6:last-child > .card:first-child .gs-trend-c { color: #8a8f98; }
@media print { .gs-trend, .gs-toasts { display: none !important; } }
/* [شكل] في كروت التفاصيل: زاد/قل + الخط الصغير في سطر واحد تحت المبلغ (من غير ما الكارت يطول ويخلي رقم العدد اللي جنبه يبان صغير) — والجملة "عن اليوم اللي قبله" في كارت الملخص بس */
.rp-classic .card .gs-trend { flex-direction: row; justify-content: center; gap: 6px; margin-top: 3px; }
.rp-classic .card .gs-trend .gs-trend-sp { width: 54px; height: 16px; margin: 0; }
.rp-classic .card .gs-trend .gs-trend-c { display: none; }
.rp-classic .col-sm-6:last-child > .card:first-child .gs-trend { flex-direction: column; gap: 2px; }
.rp-classic .col-sm-6:last-child > .card:first-child .gs-trend .gs-trend-c { display: block; }
.rp-classic .col-sm-6:last-child > .card:first-child .gs-trend .gs-trend-sp { width: 84px; height: 22px; margin-top: 2px; }
/* العدد والمبلغ في نص الصف مع بعض */
.rp-classic .card-body > .row:has(.gs-trend) { align-items: stretch; }
.rp-classic .card-body > .row:has(.gs-trend) > [class*="col-"] { display: flex; flex-direction: column; justify-content: center; align-items: center; }

/* ---------- [شكل] رسالة الغلط تحت الخانة: سطر صغير بعرض الخانة كلها + الخانة نفسها حدودها حمرا ----------
   الرسايل ديه بتظهر وتختفي من الـ JS بـ style="display: block/none" — هنا شكل بس، مفيش تغيير في إمتى تظهر */
.gs-admin label[id$="_validate"].control-label {
    flex: none !important; max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 6px 0 0 !important;
    font-size: 12.5px !important; font-weight: 600 !important; line-height: 1.5; color: #d53c41 !important; text-align: start;
}
.gs-admin :has(> label[id$="_validate"][style*="block"]) > .form-control,
.gs-admin :has(> label[id$="_validate"][style*="block"]) > .select2-container .select2-selection {
    border-color: #e5484d !important; background-color: #fffafa !important; box-shadow: 0 0 0 3px rgba(229, 72, 77, .10) !important;
}

/* ---------- [شكل] نتيجة اختيار التاريخ (datetimepicker) ----------
   أسهم الشهر اللي قبله/بعده كانت معمولة بخط glyphicon اللي مش موجود في Bootstrap 4 فكانت مش باينة — هنا مرسومة بالـ CSS
   الشكل بس: نفس الأيام ونفس صيغة التاريخ اللي بتتكتب في الخانة */
.bootstrap-datetimepicker-widget.dropdown-menu { border: 1px solid #eceef1; border-radius: 16px; padding: 10px; box-shadow: 0 22px 48px -18px rgba(16, 24, 40, .28), 0 2px 6px rgba(16, 24, 40, .05); }
.bootstrap-datetimepicker-widget table th, .bootstrap-datetimepicker-widget table td { border-radius: 10px; }
.bootstrap-datetimepicker-widget table thead tr:first-child th { height: 38px; font-size: 14.5px; font-weight: 800; color: #1d2127; }
.bootstrap-datetimepicker-widget table thead tr:first-child th:hover { background: #f4f5f7; }
.bootstrap-datetimepicker-widget table th.dow { height: 30px; font-size: 11.5px; font-weight: 700; color: #98a2b3; }
.bootstrap-datetimepicker-widget table td.day { height: 36px; width: 36px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bootstrap-datetimepicker-widget table td.day:hover, .bootstrap-datetimepicker-widget table td span:hover { background: #f4f5f7; }
.bootstrap-datetimepicker-widget table td.old, .bootstrap-datetimepicker-widget table td.new { color: #c7ccd4; }
.bootstrap-datetimepicker-widget table td span { border-radius: 10px; font-weight: 600; }
.bootstrap-datetimepicker-widget table td.active, .bootstrap-datetimepicker-widget table td span.active { box-shadow: 0 6px 14px -6px rgba(var(--gs-red-rgb, 213, 60, 65), .7); }
.bootstrap-datetimepicker-widget .glyphicon { display: inline-block; position: relative; width: 14px; height: 14px; vertical-align: middle; }
.bootstrap-datetimepicker-widget .glyphicon-chevron-left::before,
.bootstrap-datetimepicker-widget .glyphicon-chevron-right::before,
.bootstrap-datetimepicker-widget .glyphicon-chevron-up::before,
.bootstrap-datetimepicker-widget .glyphicon-chevron-down::before {
    content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; border-radius: 1px;
}
.bootstrap-datetimepicker-widget .glyphicon-chevron-left::before { transform: translate(-30%, -50%) rotate(135deg); }
.bootstrap-datetimepicker-widget .glyphicon-chevron-right::before { transform: translate(-70%, -50%) rotate(-45deg); }
.bootstrap-datetimepicker-widget .glyphicon-chevron-up::before { transform: translate(-50%, -30%) rotate(-135deg); }
.bootstrap-datetimepicker-widget .glyphicon-chevron-down::before { transform: translate(-50%, -70%) rotate(45deg); }
.bootstrap-datetimepicker-widget table th.prev, .bootstrap-datetimepicker-widget table th.next { color: #475467; }
.bootstrap-datetimepicker-widget table th.prev.disabled, .bootstrap-datetimepicker-widget table th.next.disabled { color: #d0d5dd; }

/* ---------- [شكل] طباعة التقرير اليومي والشهري (A4) ---------- */
.gs-rp-tools { display: flex; justify-content: flex-end; margin: -4px 0 12px; }
.gs-rp-tools .gs-rp-print { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px !important; border-radius: 12px !important; background: #fff; border: 1px solid #e3e6ea; color: #1d2127; font-weight: 700; font-size: 13.5px; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); }
.gs-rp-tools .gs-rp-print:hover { border-color: #cfd3da; background: #fafbfc; color: #141414; }
.gs-rp-tools .gs-rp-print .fa { color: var(--gs-red, #d53c41); }
.gs-print-head { display: none; }
@media print {
    @page { size: A4; margin: 12mm; }
    html, body { background: #fff !important; }
    .gs-admin .gs-content, .gs-admin .gs-main { padding: 0 !important; margin: 0 !important; }
    .gs-rp-tools, .gs-alert-strip, .rp-classic .widget-box > .form-group.row { display: none !important; }
    body:has(.rp-classic) { min-width: 0 !important; }   /* Bootstrap بيخلي الصفحة 992px وقت الطباعة فكانت بتتقص من الجنب */
    .rp-classic .container { max-width: none !important; min-width: 0 !important; width: 100% !important; padding: 0 !important; }
    .gs-print-head { display: flex !important; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 0 0 10px; margin: 0 0 14px; border-bottom: 2px solid #141414; }
    .gs-print-head .gs-ph-main b { display: block; font-size: 20px; font-weight: 800; color: #141414; line-height: 1.3; }
    .gs-print-head .gs-ph-main span { display: block; font-size: 13px; font-weight: 700; color: #475467; }
    .gs-print-head .gs-ph-meta { display: flex; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
    .gs-print-head .gs-ph-meta span { display: flex; flex-direction: column; text-align: end; }
    .gs-print-head .gs-ph-meta small { font-size: 10.5px; font-weight: 700; color: #667085; }
    .gs-print-head .gs-ph-meta b { font-size: 12.5px; font-weight: 800; color: #141414; white-space: nowrap; }
    .rp-classic .widget-box { background: #fff !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; }
    .rp-classic .widget-body { padding: 0 !important; box-shadow: none !important; }
    .rp-classic #chart { height: auto !important; }
    .rp-classic .card { break-inside: avoid; page-break-inside: avoid; box-shadow: none !important; border: 1px solid #e3e6ea !important; }
    .rp-classic, .rp-classic * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- [صلاحيات] صفحة "مالكش صلاحية" ---------- */
.gs-noaccess { max-width: 520px; margin: 7vh auto 40px; padding: 36px 24px 30px; text-align: center; background: #fff; border: 1px solid #eceef1; border-radius: 22px; box-shadow: 0 18px 44px -24px rgba(16, 24, 40, .25); }
.gs-noaccess .gs-na-ic { width: 66px; height: 66px; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: 26px; background: rgba(var(--gs-red-rgb, 213, 60, 65), .1); color: var(--gs-red, #d53c41); margin-bottom: 16px; }
.gs-noaccess h2 { font-size: 20px; font-weight: 800; color: #141414; margin: 0 0 8px; }
.gs-noaccess p { font-size: 14px; line-height: 1.8; color: #636b78; margin: 0 auto; max-width: 400px; }
.gs-noaccess .gs-na-acts { display: flex; justify-content: center; gap: 10px; margin-top: 22px; flex-wrap: nowrap; }
.gs-noaccess .gs-na-acts .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 20px !important; border-radius: 12px !important; font-weight: 700; font-size: 14px; white-space: nowrap; }
.gs-noaccess .gs-na-main { background: #141414; color: #fff !important; border: 0; }
.gs-noaccess .gs-na-main:hover { background: #000; }
.gs-noaccess .gs-na-back { background: #fff; color: #1d2127; border: 1px solid #e3e6ea; }
.gs-noaccess .gs-na-back[hidden] { display: none; }
html[dir="rtl"] .gs-noaccess .gs-na-back .fa { transform: scaleX(-1); }
@media (max-width: 575.98px) {
    .gs-noaccess { margin-top: 24px; }
    .gs-noaccess .gs-na-acts { flex-direction: column; align-items: center; }
    .gs-noaccess .gs-na-acts .btn { width: 100%; max-width: 300px; }
}

/* ---------- [شكل] الموبايل والتابلت: أي تابات / اختيارات / فلاتر / لينكات فوق الشاشة = سطر واحد بيسكرول بالعرض ----------
   بدل ما تقلب على سطرين (زي الأبلكيشنات المتعودين عليها). الكمبيوتر زي ما هو */
@media (max-width: 991.98px) {
    .gs-admin .gs-seg, .gs-admin .gs-tabs, .gs-admin .ve-seg, .gs-admin .sh-seg, .gs-admin .gs-fu-seg,
    .gs-admin .ss-tabs, .gs-admin .pf-tpl-tabs, .gs-admin .pf-subtabs, .gs-admin .gs-new-tabs, .gs-admin .fin-tabs,
    .gs-admin .gsc-tabs, .gs-admin .gsc-page-tabs, .gs-admin .gsc-ctabs, .gs-admin .pf-tabs, .gs-admin .gva-tabs,
    .gs-admin .fu-tabs, .gs-admin .gu-tabs, .gs-admin .gs-subnav, .gs-admin .sh-tabs,
    .gs-admin .pf-filters, .gs-admin .crm-filters, .gs-admin .pv-filters, .gs-admin .pf-log-filters {
        flex-wrap: nowrap !important; overflow-x: auto; overflow-y: hidden; max-width: 100%;
        -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none;
    }
    .gs-admin .gs-seg > *, .gs-admin .gs-tabs > *, .gs-admin .ve-seg > *, .gs-admin .sh-seg > *, .gs-admin .gs-fu-seg > *,
    .gs-admin .ss-tabs > *, .gs-admin .pf-tpl-tabs > *, .gs-admin .pf-subtabs > *, .gs-admin .gs-new-tabs > *, .gs-admin .fin-tabs > *,
    .gs-admin .gsc-tabs > *, .gs-admin .gsc-page-tabs > *, .gs-admin .gsc-ctabs > *, .gs-admin .pf-tabs > *, .gs-admin .gva-tabs > *,
    .gs-admin .fu-tabs > *, .gs-admin .gu-tabs > *, .gs-admin .gs-subnav > *, .gs-admin .sh-tabs > * { flex-shrink: 0; white-space: nowrap; }   /* بيكبروا عادي لو فيه مكان، ومابيصغروش */
    .gs-admin .pf-filters > *, .gs-admin .crm-filters > *, .gs-admin .pv-filters > *, .gs-admin .pf-log-filters > * { flex-shrink: 0; }
    .gs-admin .crm-filters > .pf-search, .gs-admin .pv-filters > .pf-search { width: 230px; }
    .gs-admin .crm-filters .gs-select-wrap, .gs-admin .pv-filters .gs-select-wrap, .gs-admin .pf-log-filters .gs-select-wrap { min-width: 150px; }
}