/* =====================================================================
   Vellora Skin — شكل Vellora (دنيم + كتان + خيط دهبي) للبرنامج كله
   ملف شكل بس: مش بيغير أي بيانات أو أحداث أو أسماء كنترولز.
   الملف ده متربط في الماستر بـ media="screen" يعني الطباعة مش بتشوفه خالص:
   كل صفحات الطباعة بتطلع بنفس مقاساتها وألوانها وخطها القديم بالظبط.
   ===================================================================== */

/* ---------- خط Cairo بكل الأوزان (موجود جوه البرنامج — مش محتاج نت) ---------- */
/* خط Cairo من جوه البرنامج بدل Google Fonts (كان طلب برة السيرفر قبل ما الصفحة تترسم في كل صفحة) */
@font-face { font-family: "Cairo"; font-weight: 300; font-display: swap; src: url("/Disttr2/fonts/cairo/cairo-arabic-400-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Cairo"; font-weight: 300; font-display: swap; src: url("/Disttr2/fonts/cairo/cairo-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Cairo"; font-weight: 400; font-display: swap; src: url("/Disttr2/fonts/cairo/cairo-arabic-400-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Cairo"; font-weight: 400; font-display: swap; src: url("/Disttr2/fonts/cairo/cairo-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Cairo"; font-weight: 600; font-display: swap; src: url("/Disttr2/fonts/cairo/cairo-arabic-600-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Cairo"; font-weight: 600; font-display: swap; src: url("/Disttr2/fonts/cairo/cairo-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Cairo"; font-weight: 700; font-display: swap; src: url("/Disttr2/fonts/cairo/cairo-arabic-700-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Cairo"; font-weight: 700; font-display: swap; src: url("/Disttr2/fonts/cairo/cairo-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Cairo"; font-weight: 800; font-display: swap; src: url("/Disttr2/fonts/cairo/cairo-arabic-800-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Cairo"; font-weight: 800; font-display: swap; src: url("/Disttr2/fonts/cairo/cairo-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "VCairo"; font-weight: 400; font-display: swap; src: url("/Disttr2/fonts/cairo/cairo-arabic-400-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "VCairo"; font-weight: 400; font-display: swap; src: url("/Disttr2/fonts/cairo/cairo-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "VCairo"; font-weight: 600; font-display: swap; src: url("/Disttr2/fonts/cairo/cairo-arabic-600-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "VCairo"; font-weight: 600; font-display: swap; src: url("/Disttr2/fonts/cairo/cairo-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "VCairo"; font-weight: 700; font-display: swap; src: url("/Disttr2/fonts/cairo/cairo-arabic-700-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "VCairo"; font-weight: 700; font-display: swap; src: url("/Disttr2/fonts/cairo/cairo-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "VCairo"; font-weight: 800; font-display: swap; src: url("/Disttr2/fonts/cairo/cairo-arabic-800-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "VCairo"; font-weight: 800; font-display: swap; src: url("/Disttr2/fonts/cairo/cairo-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }

/* #####################################################################
   🎨 لوحة الألوان — غيّر ألوان البرنامج كله من هنا بس
   ##################################################################### */
html body.vz {
    /* ----- المنيو الجانبي ----- */
    --menu-bg:         #182d4b;              /* خلفية المنيو */
    --menu-text:       #d3dcea;              /* كلام المنيو */
    --menu-subtext:    #b9c7da;              /* كلام القوايم الفرعية */
    --menu-hover-bg:   rgba(255, 255, 255, .06);
    --menu-active-bg:  rgba(217, 152, 28, .16); /* خلفية الصفحة المفتوحة */
    --menu-accent:     #d9981c;              /* الخط المنقّط وعلامة الصفحة المفتوحة */

    /* ----- هيدر الجداول ----- */
    --head-bg:         #f7f8f5;
    --head-text:       #1a1a1a;
    --head-line:       #c3cad3;

    /* ----- الأزرار ----- */
    --btn-bg:          #d9981c;              /* لون كل الأزرار */
    --btn-text:        #ffffff;
    --btn-hover:       #c2860f;
    --btn-soft-bg:     #fbf1dc;              /* الأزرار الفاتحة (stats-btn2) */
    --btn-soft-text:   #7a5508;
    --btn-soft-line:   #efd29a;
    --btn-danger-bg:   #b0323d;

    /* ----- ألوان Vellora الأساسية ----- */
    --v-bg: #f1f2ee;
    --v-surface: #ffffff;
    --v-surface-2: #f7f8f5;
    --v-ink: #1b2631;
    --v-muted: #5e6873;
    --v-faint: #8a939c;
    --v-line: #dde0da;
    --v-line-strong: #c3cad3;
    --v-row-line: #d6dad2;
    --v-input: #cfd4cc;
    --v-denim: #23406a;
    --v-denim-deep: #182d4b;
    --v-denim-soft: #e6ecf4;
    --v-thread: #d9981c;
    --v-thread-ink: #9a6a0c;                 /* الكلام اللي كان برتقالي */
    --v-thread-soft: #fbf1dc;
    --v-pos: #1e7a52;
    --v-pos-soft: #e3f2ea;
    --v-neg: #b0323d;
    --v-neg-soft: #f8e4e6;
    --v-hover: #fbf8ef;
    --v-neg-ink: #b0323d;
    --v-pos-ink: #1e7a52;
    --v-denim-ink: #23406a;
    --v-chip-red: #b0323d;
    --v-chip-green: #1e7a52;
    --v-chip-denim: #23406a;
    --v-chip-ink: #2b3a4d;
    --v-field-h: 46px;
    --v-field-bg: #ffffff;
    --v-radius: 10px;

    /* ----- متغيرات البرنامج القديمة بقت بألوان Vellora (الصفحات بتستخدمها في كل حتة) ----- */
    --navy: #1b2631;
    --orange: #d9981c;
    --soft-bg: #f1f2ee;
    --light-bg: #f1f2ee;
    --card-bg: #ffffff;
    --text: #1b2631;
    --text-muted: #5e6873;
    --muted: #5e6873;
    --border: #dde0da;
    --sidebar-bg: #182d4b;
    --sidebar-link: #d3dcea;
    --shadow: none;
    --radius: 10px;
}

/* ---------- الوضع الليلي ---------- */
html.dark body.vz {
    --menu-bg:         #0d1625;
    --menu-text:       #d6deea;
    --menu-subtext:    #b4c1d3;
    --menu-hover-bg:   rgba(255, 255, 255, .07);
    --menu-active-bg:  rgba(224, 165, 58, .18);
    --menu-accent:     #e0a53a;
    --head-bg:         #1c2738;
    --head-text:       #eef2f7;
    --head-line:       #3a4d66;
    --btn-bg:          #d9981c;
    --btn-text:        #ffffff;
    --btn-hover:       #e6a93a;
    --btn-soft-bg:     #3a2f19;
    --btn-soft-text:   #f5c46b;
    --btn-soft-line:   #6b5320;
    --btn-danger-bg:   #c2414c;

    --v-bg: #0f1622;
    --v-surface: #172131;
    --v-surface-2: #1c2738;
    --v-ink: #eef2f7;
    --v-muted: #b3bfcd;
    --v-faint: #8995a6;
    --v-line: #2b3b52;
    --v-line-strong: #3b4f6a;
    --v-row-line: #26354a;
    --v-input: #3e536f;
    --v-denim: #8fb6ec;
    --v-denim-deep: #0d1625;
    --v-denim-soft: #1f3150;
    --v-thread: #e0a53a;
    --v-thread-ink: #f5c46b;
    --v-thread-soft: #3a2f19;
    --v-pos: #3fb27f;
    --v-pos-soft: #14352a;
    --v-neg: #ec7983;
    --v-neg-soft: #3d1d23;
    --v-hover: #202e44;
    --v-neg-ink: #ff8a94;
    --v-pos-ink: #5fd39b;
    --v-denim-ink: #8fb6ec;
    --v-chip-red: #a8343f;
    --v-chip-green: #1f7a52;
    --v-chip-denim: #2f5a94;
    --v-chip-ink: #3b4f6a;
    --v-field-bg: #1c2738;

    --navy: #eef2f7;
    --orange: #e0a53a;
    --soft-bg: #0f1622;
    --light-bg: #0f1622;
    --card-bg: #172131;
    --text: #eef2f7;
    --text-muted: #b3bfcd;
    --muted: #b3bfcd;
    --border: #2b3b52;
    --sidebar-bg: #0d1625;
    --sidebar-link: #d6deea;
    --shadow: none;
}
html.dark { color-scheme: dark; background-color: #0f1622; }
/* منع الرعشة مع الريفريش/الـ PostBack: الصفحة بتظهر بعد ما الشكل يتطبق */
@media screen { html.vz-wait body.vz { opacity: 0 !important; } body.vz { transition: opacity .12s ease-out; } }

/* =====================================================================
   الشاشة بس
   ===================================================================== */
@media screen {

/* ---------- الأساس ---------- */
html body.vz {
    background: var(--v-bg) !important;
    color: var(--v-ink);
    font-family: "VCairo", "Cairo", Tahoma, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body.vz :is(input, select, textarea, button, .btn, h1, h2, h3, h4, h5, h6, label, .form-control, .form-select) {
    font-family: "VCairo", "Cairo", Tahoma, sans-serif;
}
body.vz :is(.layout, .page-wrap, .app-wrapper) { background: var(--v-bg) !important; }
body.vz a { color: var(--v-denim); }
body.vz ::placeholder { color: var(--v-faint); }
body.vz ::selection { background: #f5b83d; color: #111; }
body.vz :is(table, .form-control, input) { font-variant-numeric: tabular-nums; }
body.vz :is(h1, h2, h3, h4, h5, h6, .title, .card-title, .section-title) { color: var(--v-ink); }

/* ---------- السايد بار: دنيم غامق + خيط منقّط دهبي (الدرزة) ---------- */
html body.vz .sidebar.sidebar {
    background: var(--menu-bg) !important;
    border-left: 2px dashed var(--menu-accent) !important;
    border-right: 0 !important;
    min-height: 100vh;
}
body.vz .sidebar .sidebar-top {
    margin: 12px 10px 6px;
    padding: 0 !important;
    border-bottom: 2px dashed rgba(217, 152, 28, .45);
    padding-bottom: 12px !important;
}
body.vz .sidebar .logo { width: 100%; }
body.vz .sidebar .logo h1 { font-family: "VCairo", "Cairo", Tahoma, sans-serif; }
body.vz .sidebar .logo :is(a, span, .zone, .soft) {
    color: #ffffff !important;
    text-decoration: none !important;
}
/* اسم المحل فوق المنيو: كارت صغير بإطار دهبي */
body.vz .sidebar .logo h1 > a,
body.vz .sidebar .logo h1 > span.zone,
body.vz .sidebar .logo > a {
    display: block;
    padding: 12px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(217, 152, 28, .45);
    line-height: 1.35;
    white-space: normal;
    word-break: break-word;
}
body.vz .sidebar .logo h1 > :is(a, span.zone) > span { font-size: 19px !important; font-weight: 800 !important; }
body.vz .sidebar .logo h1 > a::after,
body.vz .sidebar .logo h1 > span.zone::after,
body.vz .sidebar .logo > a::after {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    margin: 8px auto 0;
    border-radius: 2px;
    background: var(--menu-accent);
}
body.vz .sidebar .logo img { border-radius: 9px; background: #fff; max-height: 70px; object-fit: contain; }
body.vz .sidebar .nav { padding-top: 6px; padding-bottom: 24px; }
body.vz .sidebar :is(.nav-link, .nav-sublink) {
    color: var(--menu-text) !important;
    border-radius: 8px;
    background: transparent;
    font-weight: 600;
    transition: background .15s, color .15s;
}
body.vz .sidebar .nav-sublink { color: var(--menu-subtext) !important; font-weight: 500; display: block; }
body.vz .sidebar .submenu {
    margin: 2px 10px 6px 0 !important;
    padding-right: 8px;
    border-right: 1px solid rgba(255, 255, 255, .08);
}
body.vz .sidebar :is(.nav-link, .nav-sublink):hover {
    background: var(--menu-hover-bg) !important;
    color: #ffffff !important;
}
/* "active" كان ثابت على أول عنصر — دلوقتي العلامة على الصفحة المفتوحة بس */
body.vz .sidebar .nav-link.active:not(.v-current) { background: transparent !important; font-weight: 600; }
body.vz .sidebar :is(.nav-link, .nav-sublink).v-current,
body.vz .sidebar .has-submenu.open > .nav-link {
    background: var(--menu-active-bg) !important;
    color: #ffffff !important;
    box-shadow: inset -3px 0 0 var(--menu-accent);
}
/* أيقونات المنيو (صور برتقاني) بقت بلون كلام المنيو، والصفحة المفتوحة دهبي */
body.vz .sidebar .nav-link > img {
    filter: brightness(0) invert(1);
    opacity: .78;
    transition: opacity .15s, filter .15s;
}
body.vz .sidebar .nav-link:hover > img { opacity: 1; }
body.vz .sidebar :is(.nav-link.v-current, .has-submenu.open > .nav-link) > img {
    filter: brightness(0) saturate(100%) invert(66%) sepia(61%) saturate(1093%) hue-rotate(2deg) brightness(93%) contrast(89%);
    opacity: 1;
}
body.vz .sidebar :is(.nav-link, .nav-sublink) > :is(i, .fa, .fa-solid) { color: inherit; opacity: .8; }
body.vz .sidebar .arrow-icon { color: #7f92ab !important; opacity: 1 !important; }
body.vz .sidebar .has-submenu.open .arrow-icon { color: var(--menu-accent) !important; }
/* سكرول المنيو */
body.vz .sidebar { scrollbar-width: thin; scrollbar-color: rgba(217, 152, 28, .5) transparent; }
body.vz .sidebar::-webkit-scrollbar { width: 6px; }
body.vz .sidebar::-webkit-scrollbar-thumb { background: rgba(217, 152, 28, .5); border-radius: 6px; }
body.vz.sidebar-active::before { background: rgba(13, 22, 37, .55) !important; }

/* ---------- الشريط اللي فوق: أبيض بخط سفلي رفيع ---------- */
body.vz .page-wrap > .page-header {
    background: var(--v-surface);
    border: 1px solid var(--v-line);
    border-radius: var(--v-radius);
    padding: 8px 12px !important;
    margin-bottom: 18px;
    box-shadow: none;
}
body.vz .icon-btn,
body.vz .mobile-menu-btn {
    background: var(--v-surface) !important;
    border: 1px solid var(--v-line) !important;
    border-radius: 10px !important;
    color: var(--v-denim) !important;
    box-shadow: none !important;
    font-weight: 700;
    transition: border-color .15s, color .15s, background .15s;
}
body.vz .icon-btn:hover, body.vz .mobile-menu-btn:hover {
    border-color: var(--v-thread) !important;
    color: var(--v-thread-ink) !important;
    background: var(--v-surface) !important;
}
body.vz #themeToggle i, body.vz .v-theme-btn i { color: var(--v-denim); }
html.dark body.vz #themeToggle i, html.dark body.vz .v-theme-btn i { color: #f5c46b; }

/* ---------- الكروت ---------- */
body.vz :is(.card, .filters-card, .orders-card, .stats-card, .table-card, .card-panel, .stat-card, .order-card) {
    background: var(--v-surface) !important;
    border: 1px solid var(--v-line) !important;
    border-radius: var(--v-radius) !important;
    box-shadow: none !important;
    color: var(--v-ink);
}
/* كارت جوه كارت: من غير إطار تاني */
body.vz :is(.filters-card, .orders-card, .stats-card, .table-card, .card) .card.border-0 { border-color: transparent !important; }
body.vz .stat-card { transition: border-color .15s, transform .15s; }
body.vz .stat-card:hover { transform: none; border-color: var(--v-thread) !important; box-shadow: none !important; }
body.vz .stat-title, body.vz .stat-card .slabel { color: var(--v-muted) !important; }
body.vz .stat-number, body.vz .stat-card .sval { color: var(--v-ink) !important; }
body.vz .stat-card .sicon { background: var(--v-thread-soft) !important; color: var(--v-thread-ink) !important; }
body.vz .stat-icon { background: var(--v-surface-2); border: 1px solid var(--v-line); }
body.vz .stat-footer {
    background: var(--v-thread-soft) !important;
    color: var(--btn-soft-text) !important;
    border: 1px solid var(--btn-soft-line);
    transition: background .15s, color .15s;
}
body.vz .stat-footer :is(a, i, span) { color: var(--btn-soft-text) !important; }
body.vz .stat-footer:hover { background: var(--btn-bg) !important; border-color: var(--btn-bg); }
body.vz .stat-footer:hover :is(a, i, span) { color: #fff !important; }
body.vz .card-header {
    background: var(--v-surface-2) !important;
    color: var(--v-ink) !important;
    border-bottom: 1px solid var(--v-line) !important;
    box-shadow: inset -3px 0 0 var(--v-thread);
}
body.vz .card-header * { color: inherit; }
body.vz :is(.card-body, .card-footer) { background: transparent; color: var(--v-ink); }
body.vz :is(.bg-white, .bg-light):not(.sidebar) { background-color: var(--v-surface) !important; }

/* ---------- الحقول ---------- */
body.vz :is(.form-control, .form-select, textarea, .search-input1) {
    background-color: var(--v-surface);
    border: 1px solid var(--v-input) !important;
    border-radius: 8px;
    color: var(--v-ink);
    box-shadow: none;
}
body.vz :is(.form-control, .form-select, textarea):focus {
    border-color: var(--v-denim) !important;
    box-shadow: 0 0 0 3px rgba(35, 64, 106, .12) !important;
    background-color: var(--v-surface);
    color: var(--v-ink);
}
body.vz :is(.form-control, .form-select)[disabled],
body.vz :is(.form-control, .form-select)[readonly] { background-color: var(--v-surface-2); }
body.vz .floating-label { background-color: var(--v-surface) !important; color: var(--v-muted) !important; border-radius: 4px; }
body.vz input:focus + .floating-label, body.vz select:focus + .floating-label, body.vz textarea:focus + .floating-label { color: var(--v-denim) !important; }
body.vz .form-floating > label { color: var(--v-muted); }
body.vz :is(.form-label, label) { color: var(--v-ink); }
body.vz input[type="checkbox"], body.vz input[type="radio"] { accent-color: var(--v-thread); }
body.vz .input-group-text { background: var(--v-surface-2); color: var(--v-ink); border-color: var(--v-input); }
body.vz .select2-container--default .select2-selection--single,
body.vz .select2-container--default .select2-selection--multiple {
    background: var(--v-surface) !important;
    border: 1px solid var(--v-input) !important;
    border-radius: 8px !important;
}
body.vz .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--v-ink) !important; }
body.vz .select2-container--default.select2-container--focus .select2-selection--single,
body.vz .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--v-denim) !important; }
body.vz .select2-dropdown { background: var(--v-surface) !important; border-color: var(--v-line-strong) !important; color: var(--v-ink); }
body.vz .select2-results__option--highlighted,
body.vz .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--v-thread) !important; color: #fff !important; }
body.vz .select2-container--default .select2-search--dropdown .select2-search__field { background: var(--v-surface); color: var(--v-ink); border-color: var(--v-input); }

/* ---------- الأزرار: لون واحد دهبي في كل الصفحات ---------- */
body.vz :is(.stats-btn, .btn-orange, .btn-login, .btn-main, .btn-primary, .btn-success, .btn-warning, .btn-info, .btn-dark, .btn-secondary, .login100-form-btn, .submitButton) {
    background: var(--btn-bg) !important;
    border-color: var(--btn-bg) !important;
    color: var(--btn-text) !important;
    box-shadow: none !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
}
body.vz :is(.stats-btn, .btn-orange, .btn-login, .btn-main, .btn-primary, .btn-success, .btn-warning, .btn-info, .btn-dark, .btn-secondary, .login100-form-btn, .submitButton):is(:hover, :focus, :active, .active) {
    background: var(--btn-hover) !important;
    border-color: var(--btn-hover) !important;
    color: var(--btn-text) !important;
    opacity: 1;
}
body.vz .btn { border-radius: 8px; font-weight: 700; transition: background-color .15s, border-color .15s, color .15s; }
body.vz .btn-danger { background: var(--btn-danger-bg) !important; border-color: var(--btn-danger-bg) !important; color: #fff !important; }
body.vz .btn-danger:hover { filter: brightness(.92); }
body.vz :is(.btn-light, .btn-default, .btn-outline-secondary, .btn-outline-primary, .btn-track) {
    background: var(--v-surface) !important;
    border: 1px solid var(--v-line-strong) !important;
    color: var(--v-denim) !important;
}
body.vz :is(.btn-light, .btn-default, .btn-outline-secondary, .btn-outline-primary, .btn-track):hover {
    border-color: var(--v-thread) !important;
    color: var(--v-thread-ink) !important;
}
/* الأزرار الفاتحة (كانت برتقاني فاتح) */
body.vz .stats-btn2 {
    background: var(--btn-soft-bg) !important;
    color: var(--btn-soft-text) !important;
    border: 1px solid var(--btn-soft-line) !important;
    box-shadow: none !important;
}
body.vz .stats-btn2:hover {
    background: var(--btn-bg) !important;
    border-color: var(--btn-bg) !important;
    color: #fff !important;
}
body.vz .stats-btn2.active {
    background: var(--btn-bg) !important;
    border-color: var(--btn-bg) !important;
    color: #fff !important;
}
body.vz :is(.stats-btn, .stats-btn2) { border-radius: 8px !important; }
/* أزرار كان لونها مكتوب جوه الصفحة (أسود / أزرق / برتقاني / أخضر) */
body.vz :is(input[type="submit"], input[type="button"], button, a.btn, .btn):is([style*="background-color: #000" i], [style*="background-color:#000" i], [style*="background-color: black" i], [style*="background-color: #0d6efd" i], [style*="background-color:#0d6efd" i], [style*="background-color: #275a6f" i], [style*="background-color: #437387" i], [style*="background-color: #ff7f00" i], [style*="background-color:#ff7f00" i], [style*="background-color: #ff7a00" i], [style*="background: #ff7a00" i], [style*="background-color: #12c347" i], [style*="background-color: #032a70" i], [style*="background-color: #2c3659" i], [style*="background-color: #138493" i], [style*="background-color:#138493" i], [style*="background: #e96f00" i], [style*="background-color: #e46f00" i]) {
    background: var(--btn-bg) !important;
    border-color: var(--btn-bg) !important;
    color: var(--btn-text) !important;
}

/* ---------- الجداول (orders-table): ألوان بس — الأحجام والمسافات زي ما هي ---------- */
body.vz table.orders-table { background: var(--v-surface); color: var(--v-ink); }
body.vz table.orders-table thead th {
    background-color: var(--head-bg) !important;
    color: var(--head-text) !important;
    border-color: var(--v-line) !important;
    border-bottom: 1px solid var(--head-line) !important;
}
body.vz table.orders-table tbody td {
    color: var(--v-ink);
    border-color: var(--v-row-line) !important;
}
body.vz table.orders-table tbody tr:nth-child(even),
body.vz table.orders-table tbody tr:nth-child(odd) { background-color: var(--v-surface); }
body.vz table.orders-table tbody tr:nth-child(even) > td { background-color: rgba(127, 135, 120, .045); }
body.vz table.orders-table tbody tr:hover > td { background: var(--v-hover) !important; }
body.vz table.orders-table tfoot td { background: var(--v-denim-soft) !important; color: var(--v-ink); border-color: var(--v-row-line) !important; }
/* جداول bootstrap العادية */
body.vz .table {
    --bs-table-bg: var(--v-surface);
    --bs-table-color: var(--v-ink);
    --bs-table-striped-bg: rgba(127, 135, 120, .05);
    --bs-table-striped-color: var(--v-ink);
    --bs-table-hover-bg: var(--v-hover);
    --bs-table-hover-color: var(--v-ink);
    --bs-table-border-color: var(--v-row-line);
    color: var(--v-ink);
    border-color: var(--v-row-line);
}
body.vz .table > :not(caption) > * > * { border-color: var(--v-row-line); }
/* هيدرات الجداول اللي لونها مكتوب جوه الصفحة (تركواز / أسود / أخضر / أزرق) → هيدر Vellora */
body.vz :is(thead, tr, th)[style*="138493" i],
body.vz :is(thead, tr, th)[style*="background-color: #000000" i],
body.vz :is(thead, tr, th)[style*="background-color: #275a6f" i],
body.vz :is(thead, tr, th)[style*="background-color: #437387" i],
body.vz :is(thead, tr, th)[style*="background-color: #032a70" i],
body.vz :is(thead, tr, th)[style*="background-color: #2c3659" i],
body.vz :is(thead, tr, th)[style*="background-color: #ff7f00" i],
body.vz :is(thead, tr, th)[style*="background-color:#ff7f00" i] {
    background-color: var(--head-bg) !important;
    color: var(--head-text) !important;
}
body.vz :is(thead, tr)[style*="138493" i] > :is(th, td),
body.vz :is(thead, tr)[style*="background-color: #000000" i] > :is(th, td),
body.vz :is(thead, tr)[style*="background-color: #275a6f" i] > :is(th, td),
body.vz :is(thead, tr)[style*="background-color: #437387" i] > :is(th, td),
body.vz :is(thead, tr)[style*="background-color: #032a70" i] > :is(th, td),
body.vz :is(thead, tr)[style*="background-color: #2c3659" i] > :is(th, td),
body.vz :is(thead, tr)[style*="background-color: #ff7f00" i] > :is(th, td),
body.vz :is(thead, tr)[style*="background-color:#ff7f00" i] > :is(th, td),
body.vz thead[style*="138493" i] > tr > :is(th, td) {
    background-color: var(--head-bg) !important;
    color: var(--head-text) !important;
    border-bottom-color: var(--head-line) !important;
}
body.vz :is(thead, tr)[style*="138493" i] :is(span, a, label) { color: inherit !important; }
/* سكرول الجداول */
body.vz .table-scroll { box-shadow: none !important; border-radius: var(--v-radius); scrollbar-color: var(--v-thread) var(--v-surface-2); }
body.vz .table-scroll::-webkit-scrollbar-track { background: var(--v-surface-2); }
body.vz .table-scroll::-webkit-scrollbar-thumb { background-color: var(--v-thread); border-color: var(--v-surface-2); }
body.vz .table-scroll::-webkit-scrollbar-thumb:hover { background-color: var(--v-denim); }

/* ---------- أيقونات العرض / التعديل / الحذف ---------- */
body.vz .action-icons .icon { color: var(--v-denim) !important; background: var(--v-denim-soft) !important; }
body.vz .action-icons .icon.view { color: var(--v-pos) !important; background: var(--v-pos-soft) !important; }
body.vz .action-icons .icon.trash { color: var(--v-neg) !important; background: var(--v-neg-soft) !important; }
body.vz .action-icons .icon:hover { filter: brightness(.95); }
body.vz .action-icons .icon.view:hover { color: var(--v-pos) !important; }
body.vz .action-icons .icon.edit:hover { color: var(--v-denim) !important; }
body.vz .action-icons .icon.trash:hover { color: var(--v-neg) !important; }

/* ---------- الترقيم ---------- */
body.vz .pagination .page-link { background: var(--v-surface); border-color: var(--v-line) !important; color: var(--v-denim); border-radius: 6px; }
body.vz .pagination .page-item.active .page-link,
body.vz .pagination .page-link:hover { background: var(--v-denim) !important; border-color: var(--v-denim) !important; color: #fff !important; }
html.dark body.vz .pagination .page-item.active .page-link,
html.dark body.vz .pagination .page-link:hover { background: #4f7fc2 !important; border-color: #4f7fc2 !important; }

/* ---------- الرسائل والنوافذ ---------- */
body.vz .alert { border: 0; border-radius: 8px; }
body.vz .alert-success { background: var(--v-pos-soft); color: var(--v-pos); }
body.vz :is(.alert-danger, .alert-error) { background: var(--v-neg-soft); color: var(--v-neg); }
body.vz :is(.alert-warning, .alert-info) { background: var(--v-thread-soft); color: var(--btn-soft-text); }
body.vz .modal-content { background: var(--v-surface); color: var(--v-ink); border: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 20px 50px rgba(24, 45, 75, .35); }
body.vz .modal-header { background: #23406a; color: #fff; border-bottom: 2px dashed rgba(217, 152, 28, .7); }
body.vz .modal-header :is(.modal-title, h1, h2, h3, h4, h5, span) { color: #fff !important; }
body.vz .modal-header .btn-close { filter: invert(1) grayscale(1) brightness(2); }
body.vz :is(.dropdown-menu, .popover, .list-group-item) { background: var(--v-surface); color: var(--v-ink); border-color: var(--v-line); }
body.vz .dropdown-item { color: var(--v-ink); }
body.vz .dropdown-item:hover { background: var(--v-hover); color: var(--v-ink); }
body.vz .nav-tabs .nav-link.active { background: var(--v-surface); color: var(--v-ink); border-color: var(--v-line) var(--v-line) var(--v-surface); }
body.vz .tab-link { color: var(--v-muted); }
body.vz .tab-link.active { color: var(--v-thread-ink); border-color: var(--v-thread) !important; }
body.vz hr { border-color: var(--v-line); opacity: 1; }

/* ---------- كلام كان لونه مكتوب جوه الصفحة ---------- */
/* البرتقاني → دهبي غامق (يتقري على الأبيض) */
body.vz [style*="color: #ff7f00" i]:not([style*="background-color: #ff7f00" i]),
body.vz [style*="color:#ff7f00" i]:not([style*="background-color:#ff7f00" i]),
body.vz [style*="color: #ff7a00" i]:not([style*="background-color: #ff7a00" i]),
body.vz [style*="color:#ff7a00" i]:not([style*="background-color:#ff7a00" i]),
body.vz [style*="color: #f5a623" i],
body.vz [style*="color: #e46f00" i]:not([style*="background-color: #e46f00" i]) { color: var(--v-thread-ink) !important; }
/* التركواز (العناوين) → لون الكلام */
body.vz :is(h1, h2, h3, h4, h5, h6, span, label, div, p, a)[style*="color: #138493" i]:not([style*="background-color: #138493" i]),
body.vz :is(h1, h2, h3, h4, h5, h6, span, label, div, p, a)[style*="color:#138493" i]:not([style*="background-color:#138493" i]) { color: var(--v-ink) !important; }
/* أزرق مكتوب (زرار المنيو) */
body.vz [style*="color: #014cff" i] { color: var(--v-denim) !important; }
/* خلفيات برتقاني ملونة على كلام (زي رقم الأوردر) → دهبي */
body.vz :is(span, a, div, label)[style*="background-color: #ff7f00" i],
body.vz :is(span, a, div, label)[style*="background-color:#ff7f00" i],
body.vz :is(span, a, div, label)[style*="background-color: #ff7a00" i] { background-color: var(--v-thread) !important; }
body.vz :is(span, a, div, label)[style*="background-color: #17a2b8" i] { background-color: var(--v-denim) !important; }
html.dark body.vz :is(span, a, div, label)[style*="background-color: #17a2b8" i] { background-color: #2f5a94 !important; }
/* الخلفيات الكريمي/الرمادي اللي كانت مكتوبة على الصفحات */
body.vz :is(div, section, td, table)[style*="background-color: #FCF5EB" i],
body.vz :is(div, section, td, table)[style*="background-color: #f4f3ef" i] { background-color: var(--v-bg) !important; }
body.vz :is(div, section)[style*="background-color: #ffffff" i]:not(.v-keep),
body.vz :is(div, section)[style*="background-color:#ffffff" i]:not(.v-keep),
body.vz :is(div, section)[style*="background-color: #fff;" i]:not(.v-keep) { background-color: var(--v-surface) !important; }

/* ---------- الوضع الليلي: حاجات مكتوب لونها أبيض/أسود ثابت ---------- */
html.dark body.vz :is(label, span, p, small, strong, td, th, h1, h2, h3, h4, h5, h6, li) { color: inherit; }
html.dark body.vz { color: var(--v-ink); }
html.dark body.vz .text-dark { color: var(--v-ink) !important; }
html.dark body.vz :is(.text-muted, .text-secondary) { color: var(--v-muted) !important; }
html.dark body.vz .text-primary { color: #8fb6ec !important; }
html.dark body.vz .text-danger { color: #ff8a94 !important; }
html.dark body.vz .text-success { color: #5fd39b !important; }
html.dark body.vz .text-warning { color: #f5c46b !important; }
html.dark body.vz :is(span, label, td, div, a, b, strong, p)[style*="color: #000" i],
html.dark body.vz :is(span, label, td, div, a, b, strong, p)[style*="color:#000" i],
html.dark body.vz :is(span, label, td, div, a, b, strong, p)[style*="color: black" i],
html.dark body.vz :is(span, label, td, div, a, b, strong, p)[style*="color: #333" i],
html.dark body.vz :is(span, label, td, div, a, b, strong, p)[style*="color:#333" i],
html.dark body.vz :is(span, label, td, div, a, b, strong, p)[style*="color: #111" i] { color: var(--v-ink) !important; }
html.dark body.vz [style*="color:Red" i], html.dark body.vz [style*="color: red" i] { color: #ff8a94 !important; }
html.dark body.vz :is(div, td, table, section)[style*="background-color: #e2e2e2" i],
html.dark body.vz :is(div, td, table, section)[style*="background-color: #e6e7e9" i],
html.dark body.vz :is(div, td, table, section)[style*="background-color: #f1f1f1" i],
html.dark body.vz :is(div, td, table, section)[style*="background-color: #e9ecef" i],
html.dark body.vz :is(div, td, table, section)[style*="background-color: #f8f9fa" i],
html.dark body.vz :is(div, td, table, section)[style*="background: #fff" i],
html.dark body.vz :is(div, td, table, section)[style*="background-color: White" i] { background-color: var(--v-surface) !important; }
html.dark body.vz :is(.form-control, .form-select, textarea, input[type="text"], input[type="number"], input[type="date"], input[type="month"], input[type="password"], input[type="email"], input[type="tel"], input[type="search"], input[type="datetime-local"], input:not([type]), select) {
    background-color: #1c2738;
    color: #eef2f7;
    border-color: var(--v-input) !important;
}
html.dark body.vz select option { background-color: #1c2738; color: #eef2f7; }
html.dark body.vz :is(.form-control, .form-select, select, input, textarea):focus { border-color: #8fb6ec !important; box-shadow: 0 0 0 3px rgba(143, 182, 236, .2) !important; }
html.dark body.vz ::placeholder { color: #8391a3 !important; opacity: 1; }
html.dark body.vz input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #1c2738 inset !important; -webkit-text-fill-color: #eef2f7 !important; }
html.dark body.vz .floating-label { background-color: #1c2738 !important; }
html.dark body.vz input[type="file"]::file-selector-button { background: #24324a; color: #eef2f7; border: 0; border-left: 1px solid var(--v-input); }
body.vz input[type="file"]::file-selector-button { font-family: "VCairo", "Cairo", Tahoma, sans-serif; }
html.dark body.vz .table { --bs-table-bg: var(--v-surface); --bs-table-color: var(--v-ink); }
html.dark body.vz .btn-close { filter: invert(1) grayscale(1) brightness(2); }
html.dark body.vz img[src*="home6.png" i] { filter: none; }
/* جداول الإكسيل المخفية (GridView بخلفية خضرا) — لو ظهرت على الشاشة تبقى مقروءة */
html.dark body.vz tr[style*="background-color:#C2D69B" i] > td { color: #111 !important; }




/* ---------- زرار الوضع الليلي (للصفحات اللي ماكانش فيها زرار) ---------- */
.v-theme-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 0;
    border: 1px solid var(--v-line, #dde0da) !important;
    border-radius: 10px !important;
    background: var(--v-surface, #fff) !important;
    color: var(--v-denim, #23406a) !important;
    font-size: 17px; line-height: 1; cursor: pointer;
    transition: border-color .15s, color .15s;
}
.v-theme-btn:hover { border-color: var(--v-thread, #d9981c) !important; }
.v-theme-btn.v-theme-float { position: fixed; left: 14px; bottom: 14px; z-index: 1035; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }


/* =====================================================================
   صفحات الموبايل (المندوب EmpSalesPages + العملاء موبايل) — شكل Vellora
   كل الخانات والأزرار والإمكانيات زي ما هي — ألوان وشكل بس
   ===================================================================== */
html body.vz.v-mobile { overflow-x: hidden; padding-bottom: 8px; }
body.vz.v-mobile > form { overflow-x: hidden; }
/* الشريط اللي فوق */
body.vz.v-mobile #sticky-head.v-appbar-wrap { position: fixed; top: 0; left: 0; right: 0; width: 100%; height: auto !important; z-index: 1030; padding: 0; }
body.vz.v-mobile .v-appbar {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    min-height: 56px; padding: 8px 12px;
    background: var(--menu-bg);
    border-bottom: 2px dashed var(--menu-accent);
    box-shadow: 0 6px 18px rgba(13, 22, 37, .18);
}
body.vz.v-mobile .v-appbar-title {
    flex: 1; text-align: center; min-width: 0;
    color: #fff !important; font-size: 18px; font-weight: 800; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.vz.v-mobile .v-appbar-title span { color: #fff !important; }
body.vz.v-mobile .v-theme-slot, body.vz.v-mobile .v-appbar-end { width: 38px; flex: 0 0 38px; display: inline-flex; }
body.vz.v-mobile .v-appbar .v-theme-btn {
    background: rgba(255, 255, 255, .08) !important;
    border-color: rgba(217, 152, 28, .55) !important;
    color: #f5c46b !important;
}
/* الشريط اللي تحت: زرار الرئيسية في النص */
body.vz.v-mobile #sticky-footer.v-bottombar { position: fixed; bottom: 0; left: 0; right: 0; width: 100%; z-index: 1030; }
body.vz.v-mobile #sticky-footer.v-bottombar .breadcrumb {
    display: flex; justify-content: center; align-items: center;
    min-height: 54px; padding: 6px 0;
    background: var(--menu-bg) !important;
    border-top: 2px dashed var(--menu-accent);
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -6px 18px rgba(13, 22, 37, .18) !important;
}
body.vz.v-mobile #sticky-footer.v-bottombar li { list-style: none; }
body.vz.v-mobile #sticky-footer.v-bottombar li::before { display: none; }
body.vz.v-mobile .v-home {
    display: inline-flex; align-items: center; justify-content: center;
    width: 54px; height: 54px; margin-top: -26px;
    border-radius: 50%;
    background: var(--btn-bg);
    border: 4px solid var(--v-bg);
    box-shadow: 0 6px 16px rgba(217, 152, 28, .35);
}
body.vz.v-mobile .v-home img { width: 26px; height: 26px; }
body.vz.v-mobile .v-totop {
    position: fixed; left: 14px; bottom: 74px !important;
    width: 40px; height: 40px; padding: 0 !important;
    display: none; align-items: center; justify-content: center;
    background: var(--v-surface) !important; color: var(--v-denim) !important;
    border: 1px solid var(--v-line) !important; border-radius: 10px !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .12) !important;
    text-shadow: none;
}
body.vz.v-mobile .v-totop i { color: inherit; }
body.vz.v-mobile #ResultMessagediv:not(:empty) { margin: 8px 12px; }

/* المساحات والكروت */
body.vz.v-mobile .container-fluid { max-width: 100%; }
body.vz.v-mobile :is(.filters-card, .stats-card, .table-card) { border-radius: 12px !important; margin-left: 10px; margin-right: 10px; }
body.vz.v-mobile .card { border-radius: 12px !important; }
body.vz.v-mobile .filters-card .card { border: 0 !important; }
body.vz.v-mobile [style*="background-color: #e2e2e2" i] { background-color: var(--v-surface-2) !important; }
body.vz.v-mobile [style*="background-color: #e2e2e2" i] > td { border-color: var(--v-row-line) !important; }
body.vz.v-mobile [style*="background-color:Black" i] { background-color: var(--v-denim) !important; color: #fff !important; padding: 1px 8px; border-radius: 999px; }
html.dark body.vz.v-mobile [style*="background-color:Black" i] { background-color: #2f5a94 !important; }
body.vz.v-mobile [style*="background-color: #032a70" i] { background-color: #23406a !important; }
body.vz.v-mobile [style*="color:Red" i]:not([style*="background" i]) { color: var(--v-neg) !important; }
html.dark body.vz.v-mobile [style*="color:Red" i]:not([style*="background" i]) { color: #ff8a94 !important; }
body.vz.v-mobile [style*="border: 1px solid #010101" i] { border-color: var(--v-line-strong) !important; }
body.vz.v-mobile .stat-card { box-shadow: none !important; }
body.vz.v-mobile a[style*="color: blue" i], body.vz.v-mobile a[style*="color:blue" i] { color: var(--v-denim) !important; }
body.vz.v-mobile :is(.btn, .stats-btn, .stats-btn2) { border-radius: 10px !important; }
body.vz.v-mobile .table { margin-bottom: 0; }

/* الصفحة الرئيسية للمندوب: مربعات بأيقونات */
body.vz.v-mobile .animated.fadeIn:has(.v-emp-menu),
body.vz.v-mobile .animated.fadeIn:has(.v-emp-menu) > .row { background: transparent !important; }
body.vz.v-mobile .v-emp-user {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 6px 4px 14px !important; padding: 12px 14px !important;
    background: var(--v-surface); border: 1px solid var(--v-line); border-radius: 12px;
    color: var(--v-ink) !important; font-size: 17px !important;
}
body.vz.v-mobile .v-emp-user > i { color: var(--v-thread); font-size: 22px; }
body.vz.v-mobile .v-emp-user * { color: var(--v-ink); }
body.vz.v-mobile .v-emp-menu {
    display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px;
    background: transparent !important; border: 0 !important; padding: 0 2px 12px;
}
body.vz.v-mobile .v-emp-menu > br { display: none; }
body.vz.v-mobile .v-emp-menu > .stat-footer {
    margin: 0 !important; padding: 0 !important;
    background: var(--v-surface) !important;
    border: 1px solid var(--v-line) !important;
    border-radius: 14px !important;
    transition: border-color .15s, transform .15s;
}
body.vz.v-mobile .v-emp-menu > .stat-footer > a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    min-height: 104px; padding: 14px 8px;
    color: var(--v-ink) !important; font-size: 15px; font-weight: 700 !important; line-height: 1.35;
}
body.vz.v-mobile .v-emp-menu > .stat-footer > a > i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 12px;
    background: var(--v-thread-soft); color: var(--v-thread-ink) !important; font-size: 20px;
}
body.vz.v-mobile .v-emp-menu > .stat-footer > a > span { color: var(--v-ink) !important; }
body.vz.v-mobile .v-emp-menu > .stat-footer:hover,
body.vz.v-mobile .v-emp-menu > .stat-footer:active { background: var(--v-surface) !important; border-color: var(--v-thread) !important; }
body.vz.v-mobile .v-emp-menu > .stat-footer:hover > a > i { background: var(--btn-bg); color: #fff !important; }
body.vz.v-mobile .v-emp-menu > .stat-footer:hover :is(a, span) { color: var(--v-ink) !important; }
body.vz.v-mobile .v-emp-menu > .stat-footer:has(.v-logout) { grid-column: 1 / -1; }
body.vz.v-mobile .v-emp-menu > .stat-footer > a.v-logout { flex-direction: row; min-height: 54px; }
body.vz.v-mobile .v-emp-menu > .stat-footer > a.v-logout > i { width: 34px; height: 34px; font-size: 16px; background: var(--v-neg-soft); color: var(--v-neg) !important; }
body.vz.v-mobile .v-emp-menu > .stat-footer > a.v-logout > span { color: var(--v-neg) !important; }


body.vz.v-mobile .v-appbar .v-theme-btn i { color: #f5c46b !important; }
body.vz [style*="border-style: groove" i] {
    border: 1px solid var(--v-line) !important;
    border-radius: 12px;
    overflow: hidden;
    background: var(--v-surface) !important;
}


/* صفحات موبايل قديمة لوحدها (من غير الماستر): نفس ألوان الشريط اللي فوق واللي تحت */
body.vz.v-mobile #sticky-head:not(.v-appbar-wrap) :is(.container-fluid, .row, [class*="col-"], nav) { background: var(--menu-bg) !important; }
body.vz.v-mobile #sticky-head:not(.v-appbar-wrap) > .container-fluid { border-bottom: 2px dashed var(--menu-accent); }
body.vz.v-mobile #sticky-head:not(.v-appbar-wrap) a { color: #fff !important; }
body.vz.v-mobile #sticky-footer:not(.v-bottombar) .breadcrumb { background: var(--menu-bg) !important; border-top: 2px dashed var(--menu-accent); }
body.vz.v-mobile #sticky-footer:not(.v-bottombar) .breadcrumb a { color: #fff !important; }
body.vz.v-mobile .back-to-top:not(.v-totop) { background: var(--btn-bg) !important; border-color: var(--btn-bg) !important; }


body.vz.v-mobile .v-theme-btn.v-theme-float { top: 9px; bottom: auto; left: auto; right: 10px; z-index: 1040; box-shadow: none; background: rgba(255, 255, 255, .08) !important; border-color: rgba(217, 152, 28, .55) !important; }
body.vz.v-mobile .v-theme-btn.v-theme-float i { color: #f5c46b !important; }


/* #####################################################################
   v2 — تنسيق موحد لكل الأدوات + التابات + المنيو + الهيدر + الصفحات المتجاوبة
   ##################################################################### */

/* ---------- الخانات: نفس الطول والشكل في كل الصفحات ---------- */
body.vz :is(input:not([type]), input[type="text"], input[type="number"], input[type="date"], input[type="month"], input[type="password"], input[type="email"], input[type="tel"], input[type="search"], input[type="datetime-local"], input[type="time"], input[type="week"], input[type="url"], select:not([multiple]):not([size]), .form-select):not(.select2-search__field):not([type="checkbox"]):not([type="radio"]) {
    height: var(--v-field-h) !important;
    min-height: var(--v-field-h);
    padding: 0 14px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    background-color: var(--v-field-bg) !important;
    color: var(--v-ink) !important;
    border: 1px solid var(--v-input) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
body.vz textarea, body.vz textarea.form-control {
    min-height: var(--v-field-h);
    padding: 10px 14px !important;
    font-size: 15px !important;
    background-color: var(--v-field-bg) !important;
    color: var(--v-ink) !important;
    border: 1px solid var(--v-input) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}
body.vz select:not([multiple]):not([size]), body.vz .form-select {
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%235e6873' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: left 14px center !important;
    background-size: 12px 12px !important;
    padding-left: 36px !important;
    cursor: pointer;
}
html.dark body.vz select:not([multiple]):not([size]), html.dark body.vz .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23b3bfcd' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E") !important;
}
body.vz :is(input:not([type]), input[type="text"], input[type="number"], input[type="date"], input[type="month"], input[type="password"], input[type="email"], input[type="tel"], input[type="search"], input[type="datetime-local"], input[type="time"], input[type="week"], input[type="url"], select:not([multiple]):not([size]), .form-select, textarea):focus {
    border-color: var(--v-thread) !important;
    box-shadow: 0 0 0 3px rgba(217, 152, 28, .18) !important;
}
body.vz :is(input:not([type]), input[type="text"], input[type="number"], input[type="date"], input[type="month"], input[type="password"], input[type="email"], input[type="tel"], input[type="search"], input[type="datetime-local"], input[type="time"], input[type="week"], input[type="url"], select:not([multiple]):not([size]), .form-select, textarea):is([disabled], [readonly]) { background-color: var(--v-surface-2) !important; color: var(--v-muted) !important; }
body.vz :is(input:not([type]), input[type="text"], input[type="number"], input[type="date"], input[type="month"], input[type="password"], input[type="email"], input[type="tel"], input[type="search"], input[type="datetime-local"], input[type="time"], input[type="week"], input[type="url"], select:not([multiple]):not([size]), .form-select, textarea)::placeholder { color: var(--v-faint) !important; opacity: 1; }
/* الخانات جوه جداول العرض: كبيرة وواضحة */
body.vz :is(td, th) :is(input:not([type]), input[type="text"], input[type="number"], input[type="date"], input[type="month"], input[type="password"], input[type="email"], input[type="tel"], input[type="search"], input[type="datetime-local"], input[type="time"], input[type="week"], input[type="url"], select:not([multiple]):not([size]), .form-select):not(.select2-search__field) {
    height: 42px !important; min-height: 42px; font-size: 15px !important; padding: 0 12px !important; border-radius: 9px !important;
}
body.vz :is(td, th) :is(select:not([multiple]):not([size]), .form-select) { min-width: 130px; padding-left: 32px !important; background-position: left 10px center !important; }
body.vz :is(td, th) :is(input[type="text"], input[type="number"], input:not([type]), input[type="tel"]) { min-width: 110px; }
body.vz :is(td, th) :is(input[type="date"], input[type="month"]) { min-width: 150px; }
body.vz :is(td, th) textarea { min-height: 42px; min-width: 170px; font-size: 15px !important; border-radius: 9px !important; }
body.vz input[type="date"]::-webkit-calendar-picker-indicator,
body.vz input[type="month"]::-webkit-calendar-picker-indicator,
body.vz input[type="datetime-local"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .65; }
html.dark body.vz input::-webkit-calendar-picker-indicator { filter: invert(.85); }
/* رفع الملفات */
body.vz input[type="file"] {
    height: var(--v-field-h); max-width: 100%;
    padding: 0 !important; line-height: calc(var(--v-field-h) - 2px);
    background: var(--v-field-bg) !important; color: var(--v-muted) !important;
    border: 1px solid var(--v-input) !important; border-radius: 10px !important; font-size: 14px;
}
body.vz input[type="file"]::file-selector-button {
    height: 100%; margin: 0 0 0 10px; padding: 0 16px; border: 0;
    border-left: 1px solid var(--btn-soft-line);
    background: var(--btn-soft-bg); color: var(--btn-soft-text); font-weight: 700; cursor: pointer;
}
/* صح و اختيار (checkbox / radio) */
body.vz input[type="checkbox"], body.vz input[type="radio"] {
    -webkit-appearance: none; appearance: none;
    width: 20px; height: 20px; flex: 0 0 20px;
    display: inline-grid; place-content: center;
    margin: 0 6px; vertical-align: middle;
    background: var(--v-field-bg); border: 1.5px solid var(--v-line-strong);
    border-radius: 6px; cursor: pointer;
    transform: none !important;
    transition: background-color .15s, border-color .15s;
}
body.vz input[type="radio"] { border-radius: 50%; }
body.vz input[type="checkbox"]::before {
    content: ""; width: 11px; height: 11px; background: #fff; transform: scale(0); transition: transform .12s;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
body.vz input[type="radio"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .12s; }
body.vz input:is([type="checkbox"], [type="radio"]):checked { background: var(--btn-bg); border-color: var(--btn-bg); }
body.vz input:is([type="checkbox"], [type="radio"]):checked::before { transform: scale(1); }
body.vz input:is([type="checkbox"], [type="radio"]):focus-visible { box-shadow: 0 0 0 3px rgba(217, 152, 28, .25); }
body.vz input:is([type="checkbox"], [type="radio"]) + label { cursor: pointer; }

/* العناوين العايمة فوق الخانات */
body.vz .form-group { position: relative; }
body.vz .floating-label {
    right: 12px !important;
    padding: 0 6px !important;
    font-size: 14px !important;
    font-weight: 600;
    line-height: 1.3;
    color: var(--v-faint) !important;
    background: var(--v-field-bg) !important;
    border-radius: 4px;
    white-space: nowrap;
    max-width: calc(100% - 24px);
    overflow: hidden; text-overflow: ellipsis;
}
body.vz :is(input:focus, input:not(:placeholder-shown), select, textarea:focus, textarea:not(:placeholder-shown), input[type="date"], input[type="month"], input[type="datetime-local"], input[type="time"]) + .floating-label,
body.vz .floating-label.active {
    top: 0 !important;
    transform: translateY(-50%) !important;
    font-size: 12.5px !important;
    font-weight: 700;
    color: var(--v-muted) !important;
    background: linear-gradient(to bottom, var(--v-surface) 50%, var(--v-field-bg) 50%) !important;
}
body.vz :is(input, select, textarea):focus + .floating-label { color: var(--v-thread-ink) !important; }

/* الأزرار جوه الفلاتر: نفس طول الخانات */
body.vz :is(.filters-card, .stats-card, .card, .stats-options) :is(.stats-btn, .stats-btn2, .btn:not(.btn-sm):not(.icon)) {
    min-height: var(--v-field-h);
    padding-top: 0 !important; padding-bottom: 0 !important;
    padding-left: 22px !important; padding-right: 22px !important;
    font-size: 14.5px !important; font-weight: 700 !important;
    border-radius: 10px !important;
}
body.vz :is(.filters-card, .stats-card, .card, .stats-options) :is(a, button):is(.stats-btn, .stats-btn2, .btn:not(.btn-sm):not(.icon)) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
body.vz :is(.filters-card, .stats-card, .card, .stats-options) input:is([type="submit"], [type="button"]):is(.stats-btn, .stats-btn2, .btn) { height: var(--v-field-h); line-height: 1; }
body.vz .stats-options .form-control { min-width: 170px; }

/* ---------- التابات (تقفيل بالباركود / بالتليفون ...): واضح مين المفتوح ---------- */
body.vz .v-tabs {
    display: inline-flex !important;
    flex-wrap: wrap;
    gap: 4px !important;
    width: auto;
    max-width: 100%;
    padding: 5px !important;
    margin: 0 0 16px !important;
    background: var(--v-surface) !important;
    border: 1px solid var(--v-line) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}
body.vz .v-tabs::after { display: none !important; }
body.vz .tab-link {
    display: inline-flex !important; align-items: center; gap: 6px;
    padding: 9px 22px !important;
    margin: 0 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    color: var(--v-muted) !important;
    font-size: 14.5px; font-weight: 700 !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
body.vz .tab-link:hover { background: var(--v-hover) !important; color: var(--v-ink) !important; }
body.vz .tab-link.active, body.vz .tab-link.active:hover {
    background: var(--btn-bg) !important;
    border-color: var(--btn-bg) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(217, 152, 28, .3) !important;
}
body.vz .tab-link.active::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 12px; }

/* ---------- المنيو: سكرول لوحده ومن غير رعشة ---------- */
html { scrollbar-gutter: stable; }
@media (min-width: 992px) {
    html body.vz .layout > .sidebar.sidebar {
        position: sticky !important;
        top: 0;
        height: 100vh !important;
        min-height: 0 !important;
        align-self: flex-start;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }
}
body.vz .sidebar .has-submenu.open .submenu { animation: vzSub .18s ease-out both !important; }
@keyframes vzSub { from { opacity: 0; } to { opacity: 1; } }
body.vz .sidebar .nav-sublink.v-current { background: var(--menu-active-bg) !important; color: #fff !important; box-shadow: inset -3px 0 0 var(--menu-accent) !important; }

/* ---------- الهيدر على الموبايل والتابلت ---------- */
@media (max-width: 991px) {
    body.vz .page-wrap > .page-header {
        position: sticky; top: 0; z-index: 1030;
        display: flex !important;
        flex-direction: row-reverse !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        margin: -12px -12px 14px !important;
        padding: 8px 12px !important;
        border-radius: 0 0 12px 12px !important;
        border-top: 0 !important;
        background: var(--v-surface) !important;
    }
    body.vz .page-wrap > .page-header .controls { flex-direction: row !important; gap: 8px !important; }
    body.vz .page-wrap > .page-header :is(.icon-btn, .mobile-menu-btn) { height: 40px; min-width: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px !important; }
    body.vz .page-wrap > .page-header .mobile-menu-btn { font-size: 18px; }
}
@media (min-width: 576px) and (max-width: 991px) {
    body.vz .page-wrap > .page-header { margin: -22px -22px 16px !important; }
}

/* ---------- صفحات الإضافة والفلاتر: الأدوات بتترص على قد عرض الشاشة (من غير فراغات) ---------- */
body.vz .row.v-form {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px 14px;
    margin: 0 !important;
    --bs-gutter-x: 0; --bs-gutter-y: 0;
}
body.vz .row.v-form > * {
    flex: 1 1 210px;
    max-width: 360px !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0;
}
body.vz .row.v-form > :is(.col-12, .col-md-12, .col-lg-12) { flex-basis: 100%; max-width: 100% !important; }
body.vz .row.v-form > :is(.v-btncell, .v-chkcell) { flex: 0 0 auto; max-width: 100% !important; }
body.vz .row.v-form > .v-empty { display: none !important; }
body.vz .row.v-form > .v-chkcell { align-self: center; }
body.vz .row.v-form .form-group { margin-bottom: 0 !important; }
body.vz .row.v-form > * > .form-group { text-align: right !important; }
body.vz .row.v-form .form-group > :is(input:not([type]), input[type="text"], input[type="number"], input[type="date"], input[type="month"], input[type="password"], input[type="email"], input[type="tel"], input[type="search"], input[type="datetime-local"], input[type="time"], input[type="week"], input[type="url"], select:not([multiple]):not([size]), .form-select, textarea, input[type="file"]) { width: 100% !important; }
body.vz .row.v-form .form-group > :is(input:not([type]), input[type="text"], input[type="number"], input[type="date"], input[type="month"], input[type="password"], input[type="email"], input[type="tel"], input[type="search"], input[type="datetime-local"], input[type="time"], input[type="week"], input[type="url"], select:not([multiple]):not([size]), .form-select) + :is(input:not([type]), input[type="text"], input[type="number"], input[type="date"], input[type="month"], input[type="password"], input[type="email"], input[type="tel"], input[type="search"], input[type="datetime-local"], input[type="time"], input[type="week"], input[type="url"], select:not([multiple]):not([size]), .form-select) { margin-top: 8px; }
@media (max-width: 575px) {
    /* الموبايل: خانتين في السطر */
    body.vz .row.v-form { gap: 20px 10px; }
    body.vz .row.v-form > * { flex: 1 1 calc(50% - 5px); max-width: 100% !important; }
    body.vz .row.v-form > .v-btncell { flex: 1 1 calc(50% - 5px); }
    body.vz .row.v-form > .v-btncell :is(.stats-btn, .stats-btn2, .btn, input[type="submit"], input[type="button"]) { width: 100%; }
    body.vz .row.v-form > :has(textarea) { flex-basis: 100%; }
    body.vz .row.v-form .floating-label { font-size: 13px !important; }
}
body.vz .filters-card { padding: 18px !important; }
body.vz .filters-card > .row > [class*="col-"] > .card { padding: 18px !important; }
body.vz :is(.filters-card, .card) h5.fw-bold { font-size: 18px; margin-bottom: 22px !important; }

/* ---------- لمس الموبايل: مفيش لون "واقف" بعد الضغط ---------- */
@media (hover: none) {
    body.vz .stat-footer:hover { background: var(--v-thread-soft) !important; border-color: var(--btn-soft-line) !important; }
    body.vz .stat-footer:hover :is(a, i, span) { color: var(--btn-soft-text) !important; }
    body.vz .stats-btn2:hover:not(.active) { background: var(--btn-soft-bg) !important; color: var(--btn-soft-text) !important; border-color: var(--btn-soft-line) !important; }
    body.vz .stat-card:hover { border-color: var(--v-line) !important; }
}
body.vz .stat-footer:active { filter: brightness(.96); }


/* =====================================================================
   لوحة الإحصائيات (CPanel/Orders/Default + CPanel/System/Index)
   ===================================================================== */
body.vz .v-dash { --c: var(--v-denim); display: flex; flex-direction: column; gap: 18px; padding: 2px 0 24px; }
body.vz .v-c-total, body.vz .v-k-total, body.vz .v-kpi-total { --c: #23406a; }
body.vz .v-c-delivered, body.vz .v-k-delivered { --c: #1e7a52; }
body.vz .v-c-transit, body.vz .v-k-transit { --c: #2f6db5; }
body.vz .v-c-failed, body.vz .v-k-failed { --c: #b0323d; }
body.vz .v-c-delayed, body.vz .v-k-delayed { --c: #d9981c; }
body.vz .v-c-pickup, body.vz .v-k-pickup { --c: #1f8a8a; }
body.vz .v-c-returned, body.vz .v-k-returned { --c: #7a5aa6; }
body.vz .v-c-partial, body.vz .v-k-partial { --c: #a0612a; }
html.dark body.vz .v-kpi-total { --c: #8fb6ec; }
html.dark body.vz :is(.v-c-delivered, .v-k-delivered) { --c: #3fb27f; }
html.dark body.vz :is(.v-c-transit, .v-k-transit) { --c: #6aa0e6; }
html.dark body.vz :is(.v-c-failed, .v-k-failed) { --c: #ec7983; }
html.dark body.vz :is(.v-c-delayed, .v-k-delayed) { --c: #e0a53a; }
html.dark body.vz :is(.v-c-pickup, .v-k-pickup) { --c: #3fbcbc; }
html.dark body.vz :is(.v-c-returned, .v-k-returned) { --c: #a98bd6; }
html.dark body.vz :is(.v-c-partial, .v-k-partial) { --c: #d08a4c; }

body.vz .v-dash-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
body.vz .v-dash-title h1 { margin: 0; font-size: 24px; font-weight: 800; color: var(--v-ink); display: flex; align-items: center; gap: 10px; }
body.vz .v-dash-title h1 i { color: var(--v-thread); font-size: 20px; }
body.vz .v-dash-title p { margin: 4px 0 0; color: var(--v-muted); font-size: 14px; font-weight: 600; }
body.vz .v-dash-title p span { color: inherit !important; }
body.vz .v-dash-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
body.vz .v-dash-tools .search-group { max-width: 190px; }
body.vz .v-dash-tools .search-group input { border-radius: 10px !important; }
body.vz .v-seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--v-surface); border: 1px solid var(--v-line); border-radius: 12px; }
body.vz .v-seg :is(.stats-btn, .stats-btn2) {
    min-height: 38px !important; padding: 0 16px !important; border-radius: 9px !important;
    background: transparent !important; border: 0 !important; color: var(--v-muted) !important; font-size: 14px !important; text-shadow: none;
}
body.vz .v-seg :is(.stats-btn, .stats-btn2):hover { background: var(--v-hover) !important; color: var(--v-ink) !important; }
body.vz .v-seg :is(.stats-btn, .stats-btn2).v-on { background: var(--btn-bg) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(217, 152, 28, .3) !important; }
body.vz .v-bell { position: relative; height: 46px; min-width: 46px; display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; font-size: 17px; }
body.vz .v-bell span:not(:empty) {
    display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px;
    border-radius: 999px; background: var(--btn-danger-bg); color: #fff !important; font-size: 12px; font-weight: 800;
}

body.vz .v-dash-hero { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(240px, 1fr) minmax(320px, 2fr); gap: 16px; }
@media (max-width: 1199px) { body.vz .v-dash-hero { grid-template-columns: 1fr 1fr; } body.vz .v-dist { grid-column: 1 / -1; } }
@media (max-width: 575px) { body.vz .v-dash-hero { grid-template-columns: 1fr; } }
body.vz .v-kpi, body.vz .v-hero-rate, body.vz .v-dist {
    position: relative; background: var(--v-surface); border: 1px solid var(--v-line); border-radius: 14px; padding: 16px 18px;
}
body.vz .v-kpi { display: flex; flex-direction: column; gap: 10px; overflow: hidden; transition: border-color .15s, transform .15s; }
body.vz .v-kpi::before { content: ""; position: absolute; top: 0; right: 0; width: 4px; height: 100%; background: var(--c); }
body.vz .v-kpi-top { display: flex; align-items: center; gap: 10px; }
body.vz .v-kpi-ic {
    width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); font-size: 18px;
}
body.vz .v-kpi-title { font-size: 14.5px; font-weight: 700; color: var(--v-muted); }
body.vz .v-kpi-num, body.vz .v-kpi-num span { font-size: 30px; font-weight: 800; color: var(--v-ink) !important; line-height: 1.1; font-variant-numeric: tabular-nums; }
body.vz .v-kpi-sub { font-size: 13px; color: var(--v-faint); }
body.vz .v-kpi-total { background: linear-gradient(135deg, #23406a, #182d4b) !important; border-color: transparent !important; }
body.vz .v-kpi-total::before { display: none; }
body.vz .v-kpi-total :is(.v-kpi-title, .v-kpi-sub) { color: #c3cfe2; }
body.vz .v-kpi-total :is(.v-kpi-num, .v-kpi-num span) { color: #fff !important; font-size: 40px; }
body.vz .v-kpi-total .v-kpi-ic { background: rgba(217, 152, 28, .18); color: #f5c46b; }
html.dark body.vz .v-kpi-total { background: linear-gradient(135deg, #1f3150, #0d1625) !important; border-color: var(--v-line) !important; }
body.vz .v-kpi-share { display: flex; align-items: center; gap: 10px; }
body.vz .v-kpi-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--v-surface-2); overflow: hidden; }
html.dark body.vz .v-kpi-bar { background: #24324a; }
body.vz .v-kpi-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--c); transition: width .6s ease; }
body.vz .v-kpi-pct { font-size: 12.5px; font-weight: 700; color: var(--v-muted); white-space: nowrap; }
body.vz .v-kpi-link {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 6px;
    margin-top: 2px; padding: 8px 12px; border-radius: 10px;
    background: color-mix(in srgb, var(--c) 10%, transparent); color: var(--c) !important;
    font-size: 14px; font-weight: 700; text-decoration: none !important; transition: background-color .15s;
}
body.vz .v-kpi-link:hover { background: color-mix(in srgb, var(--c) 18%, transparent); }
@media (hover: hover) { body.vz .v-kpi:hover { border-color: var(--c); transform: translateY(-2px); } }
body.vz .v-kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }

body.vz .v-hero-rate { display: flex; align-items: center; gap: 18px; }
body.vz .v-hero-rate small { display: block; font-size: 14.5px; font-weight: 700; color: var(--v-muted); }
body.vz .v-hero-rate strong { display: block; font-size: 13px; font-weight: 600; color: var(--v-faint); margin-top: 2px; }
body.vz .v-ring {
    --p: 0; --rc: var(--v-pos);
    width: 112px; height: 112px; flex: 0 0 112px; border-radius: 50%;
    display: inline-grid; place-items: center;
    background: radial-gradient(closest-side, var(--v-surface) 76%, transparent 77%), conic-gradient(var(--rc) calc(var(--p) * 1%), var(--v-surface-2) 0);
}
html.dark body.vz .v-ring { background: radial-gradient(closest-side, var(--v-surface) 76%, transparent 77%), conic-gradient(var(--rc) calc(var(--p) * 1%), #24324a 0); }
body.vz .v-ring b { font-size: 24px; font-weight: 800; color: var(--v-ink); font-variant-numeric: tabular-nums; }
body.vz .v-ring-sm { width: 64px; height: 64px; flex-basis: 64px; }
body.vz .v-ring-sm b { font-size: 14px; }

body.vz .v-dist-head { font-size: 14.5px; font-weight: 700; color: var(--v-muted); margin-bottom: 12px; }
body.vz .v-dist-bar { display: flex; height: 16px; border-radius: 999px; overflow: hidden; background: var(--v-surface-2); gap: 2px; }
body.vz .v-dist-bar i { display: block; height: 100%; background: var(--c); min-width: 3px; }
body.vz .v-dist-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; }
body.vz .v-dist-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--v-muted); font-weight: 600; }
body.vz .v-dist-legend span i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
body.vz .v-dist-legend b { color: var(--v-ink); font-weight: 800; }

/* =====================================================================
   نسب التسليمات (المحافظات / المناديب / الفروع) — شكل إحصائية
   الجدول الأصلي مستخبي على الشاشة بس، والطباعة زي ما هي
   ===================================================================== */
body.vz .v-ratio-src { display: none !important; }
body.vz .v-ratio { padding: 4px 2px 8px; }
body.vz .v-ratio-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin: 6px 0 16px; }
body.vz .v-rk { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--v-surface); border: 1px solid var(--v-line); border-radius: 14px; min-width: 0; }
body.vz .v-rk small { display: block; font-size: 13px; font-weight: 700; color: var(--v-muted); }
body.vz .v-rk b { display: block; font-size: 22px; font-weight: 800; color: var(--v-ink); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.vz .v-rk b em { font-style: normal; font-size: 14px; color: var(--v-muted); font-weight: 700; }
body.vz .v-rk-ic { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--v-denim-soft); color: var(--v-denim-ink); font-size: 18px; }
body.vz .v-pos-ic { background: var(--v-pos-soft); color: var(--v-pos-ink); }
body.vz .v-neg-ic { background: var(--v-neg-soft); color: var(--v-neg-ink); }
body.vz .v-warn-ic { background: var(--v-thread-soft); color: var(--v-thread-ink); }
body.vz .v-rk-ring .v-ring { --rc: var(--v-pos); }
body.vz .v-pos { color: var(--v-pos-ink) !important; }
body.vz .v-neg { color: var(--v-neg-ink) !important; }
body.vz .v-ratio-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 4px 10px; font-size: 13px; font-weight: 600; color: var(--v-muted); }
body.vz .v-ratio-legend span { display: inline-flex; align-items: center; gap: 6px; }
body.vz .v-ratio-legend i { width: 12px; height: 12px; border-radius: 3px; }
body.vz .v-l-s { background: var(--v-pos); }
body.vz .v-l-f { background: var(--v-neg); }
body.vz .v-l-o { background: var(--v-surface-2); border: 1px solid var(--v-line); }
body.vz .v-ratio-list { display: flex; flex-direction: column; gap: 8px; }
body.vz .v-rr {
    display: grid; grid-template-columns: 34px minmax(140px, 1.1fr) minmax(160px, 2fr) 120px; align-items: center; gap: 14px;
    padding: 12px 16px; background: var(--v-surface); border: 1px solid var(--v-line); border-radius: 12px;
}
@media (hover: hover) { body.vz .v-rr:hover { border-color: var(--v-thread); } }
body.vz .v-rr-rank { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--v-surface-2); color: var(--v-muted); font-weight: 800; font-size: 13px; }
body.vz .v-rr:nth-child(-n+3) .v-rr-rank { background: var(--v-thread-soft); color: var(--v-thread-ink); }
body.vz .v-rr-name { min-width: 0; }
body.vz .v-rr-name b { display: block; font-size: 15.5px; font-weight: 800; color: var(--v-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.vz .v-rr-name small { font-size: 12.5px; color: var(--v-muted); font-weight: 600; }
body.vz .v-rr-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--v-surface-2); }
html.dark body.vz :is(.v-rr-bar, .v-dist-bar) { background: #24324a; }
body.vz .v-rr-bar i { display: block; height: 100%; }
body.vz .v-rr-nums { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
body.vz .v-rr-nums small { font-size: 12.5px; font-weight: 700; }
body.vz .v-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; padding: 4px 10px; border-radius: 999px; font-size: 15px; font-weight: 800; }
body.vz .v-badge.v-good { background: var(--v-pos-soft); color: var(--v-pos-ink); }
body.vz .v-badge.v-mid { background: var(--v-thread-soft); color: var(--v-thread-ink); }
body.vz .v-badge.v-bad { background: var(--v-neg-soft); color: var(--v-neg-ink); }
@media (max-width: 767px) {
    body.vz .v-rr { grid-template-columns: 30px 1fr auto; gap: 8px 10px; padding: 12px; }
    body.vz .v-rr-bar { grid-column: 1 / -1; order: 4; }
    body.vz .v-rr-nums { flex-direction: row; align-items: center; gap: 8px; }
    body.vz .v-ratio-kpis { grid-template-columns: 1fr 1fr; }
    body.vz .v-rk { padding: 12px; }
    body.vz .v-rk b { font-size: 18px; }
}
body.vz.v-mobile .v-ratio { margin: 0 10px; }

/* =====================================================================
   موبايل (المندوب + العملاء): لمسات احترافية
   ===================================================================== */
body.vz.v-mobile .stat-card:has(input[type="radio"]) { padding: 0 !important; overflow: hidden; }
body.vz.v-mobile .stat-card:has(input[type="radio"]) label { display: block; padding: 10px 6px; margin: 0; font-weight: 700; color: var(--v-muted); cursor: pointer; }
body.vz.v-mobile .stat-card:has(input[type="radio"]) input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
body.vz.v-mobile .stat-card:has(input[type="radio"]:checked) { background: var(--btn-bg) !important; border-color: var(--btn-bg) !important; }
body.vz.v-mobile .stat-card:has(input[type="radio"]:checked) label { color: #fff !important; }
body.vz.v-mobile .stats-card { padding: 12px !important; }
body.vz.v-mobile .filters-card { padding: 12px !important; margin-bottom: 12px !important; }
body.vz.v-mobile .filters-card .card { padding: 4px !important; }
body.vz.v-mobile .filters-card .card table { width: 100%; }
body.vz.v-mobile .filters-card .card table td { padding: 3px 2px; font-size: 14px; line-height: 1.55; color: var(--v-ink); }
body.vz.v-mobile .filters-card .card table + table { border-top: 1px dashed var(--v-line); margin-top: 6px !important; padding-top: 6px; }
body.vz.v-mobile .filters-card .card :is(.stats-btn, .stats-btn2) { min-height: 40px; }
body.vz.v-mobile h4, body.vz.v-mobile h5 { font-weight: 800; }
body.vz.v-mobile .page-wrap, body.vz.v-mobile .container-fluid { padding-left: 10px; padding-right: 10px; }
body.vz.v-mobile .v-emp-menu > .stat-footer > a { font-size: 14.5px; }
body.vz.v-mobile .v-emp-menu > .stat-footer > a > span { text-decoration: none !important; }
body.vz.v-mobile .v-emp-menu { padding-top: 6px; }
body.vz.v-mobile .card:has(> .v-emp-menu), body.vz.v-mobile .card.v-emp-menu { background: transparent !important; border: 0 !important; }


@media (min-width: 992px) { body.vz .page-wrap > .page-header { margin-bottom: 18px !important; } }
@media (min-width: 1200px) { body.vz .v-dash-tools { flex-wrap: nowrap; } }
body.vz .v-dash-tools .v-bell { order: 3; }


body.vz :is(.v-rk b em, .v-badge, .v-ring b) { direction: ltr; unicode-bidi: isolate; display: inline-block; }
body.vz .v-ratio-kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }


/* =====================================================================
   v3 — جداول العرض: بيانات أكتر في الشاشة، والكلام الطويل منظم
   ===================================================================== */
body.vz table:is(.orders-table, .table) > tbody > tr > td,
body.vz table:is(.orders-table, .table) > tr > td { line-height: 1.5; }
@media (min-width: 768px) {
    body.vz table:is(.orders-table, .table) td.v-nw { white-space: nowrap; }
}
body.vz table:is(.orders-table, .table) td.v-long {
    min-width: 170px;
    max-width: 280px;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: right !important;
}
body.vz table.orders-table > thead > tr > th { white-space: nowrap; padding: 8px 10px !important; }
body.vz table.orders-table > tbody > tr > td { padding: 6px 8px !important; font-size: 13px; }
body.vz .address-wrap { width: auto !important; min-width: 160px; max-width: 260px; }

/* =====================================================================
   v3 — لوحة الإحصائيات: مضغوطة وبتملا الشاشة من غير سكرول
   ===================================================================== */
body.vz .v-dash { gap: 14px; padding: 0 0 6px; }
body.vz .v-dash-title h1 { font-size: 21px; }
body.vz .v-dash-title p { font-size: 13px; margin-top: 2px; }
body.vz .v-dash-tools .search-group input, body.vz .v-bell { height: 42px !important; min-height: 42px; }
body.vz .v-seg :is(.stats-btn, .stats-btn2) { min-height: 34px !important; }
body.vz .v-dash-hero { grid-template-columns: minmax(200px, 1fr) minmax(220px, 1fr) minmax(300px, 2.2fr); gap: 14px; }
body.vz .v-kpi, body.vz .v-hero-rate, body.vz .v-dist { padding: 12px 14px; border-radius: 12px; }
body.vz .v-kpi { gap: 8px; }
body.vz .v-kpi-ic { width: 34px; height: 34px; flex-basis: 34px; border-radius: 10px; font-size: 15px; }
body.vz .v-kpi-title { font-size: 13.5px; }
body.vz .v-kpi-num, body.vz .v-kpi-num span { font-size: 25px; }
body.vz .v-kpi-total :is(.v-kpi-num, .v-kpi-num span) { font-size: 34px; }
body.vz .v-kpi-sub { font-size: 12.5px; }
body.vz .v-kpi-bar { height: 6px; }
body.vz .v-kpi-pct { font-size: 12px; }
body.vz .v-kpi-link { padding: 6px 10px; font-size: 13px; border-radius: 8px; margin-top: auto; }
body.vz .v-dash:not(.v-dash-m) .v-kpi-num { margin-top: auto; }
body.vz .v-dash:not(.v-dash-m) .v-kpi-grid .v-kpi-num, body.vz .v-dash:not(.v-dash-m) .v-kpi-grid .v-kpi-num span { font-size: clamp(24px, 3.2vh, 34px); }
body.vz .v-ring { width: 92px; height: 92px; flex-basis: 92px; }
body.vz .v-ring b { font-size: 20px; }
body.vz .v-hero-rate { gap: 14px; }
body.vz .v-dist-bar { height: 12px; }
body.vz .v-dist-legend { margin-top: 10px; gap: 6px 14px; }
body.vz .v-kpi-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
@media (min-width: 992px) and (min-height: 600px) {
    body.vz .v-dash:not(.v-dash-m) {
        height: min(calc(100vh - 150px), 780px);
        min-height: 500px;
        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr);
    }
    body.vz .v-dash:not(.v-dash-m) .v-kpi-grid { grid-auto-rows: 1fr; align-content: stretch; }
    body.vz .v-dash:not(.v-dash-m) .v-kpi-grid > .v-kpi { min-height: 0; justify-content: space-between; }
}
@media (min-width: 992px) {
    body.vz .v-dash:not(.v-dash-m) .v-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    body.vz .v-dash:not(.v-dash-m) .v-kpi-grid > .v-kpi:last-child { grid-column: span 2; }
}
@media (max-width: 991px) {
    body.vz .v-dash-hero { grid-template-columns: 1fr 1fr; }
    body.vz .v-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- لوحة إحصائيات العميل (موبايل) ---------- */
body.vz .v-dash-m { padding: 6px 12px 16px; gap: 12px; }
body.vz .v-dash-m .v-dash-head { justify-content: center; text-align: center; }
body.vz .v-dash-m .v-dash-title h1 { justify-content: center; font-size: 19px; }
body.vz .v-dash-m .v-dash-hero { grid-template-columns: 1.15fr 1fr; gap: 10px; }
body.vz .v-dash-m .v-hero-rate { flex-direction: column; justify-content: center; text-align: center; gap: 8px; padding: 12px 8px; }
body.vz .v-dash-m .v-ring { width: 84px; height: 84px; flex-basis: 84px; }
body.vz .v-dash-m .v-kpi-total :is(.v-kpi-num, .v-kpi-num span) { font-size: 32px; }
body.vz .v-dash-m .v-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
body.vz .v-dash-m .v-kpi { padding: 12px; }
body.vz .v-dash-m .v-kpi-num, body.vz .v-dash-m .v-kpi-num span { font-size: 24px; }
body.vz .v-kpi-link-light { background: rgba(255, 255, 255, .1) !important; color: #f5c46b !important; }
body.vz .v-money { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.vz .v-money-card {
    display: flex; align-items: center; gap: 10px; padding: 12px;
    background: var(--v-surface); border: 1px solid var(--v-line); border-radius: 12px; min-width: 0;
}
body.vz .v-money-ic { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--v-pos-soft); color: var(--v-pos-ink); font-size: 16px; }
body.vz .v-money-card small { display: block; font-size: 12.5px; font-weight: 700; color: var(--v-muted); }
body.vz .v-money-card b, body.vz .v-money-card b span { display: block; font-size: 19px; font-weight: 800; color: var(--v-ink) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 360px) { body.vz .v-money, body.vz .v-dash-m .v-dash-hero { grid-template-columns: 1fr; } }


/* =====================================================================
   v4 — ترتيب الأدوات + المنيو + الصلاحيات + لمسات
   ===================================================================== */
/* خانتين في نفس الخانة (قايمة + بحث): جنب بعض مش فوق بعض */
body.vz .row.v-form > .v-pair { flex: 2 1 440px; max-width: 720px !important; }
body.vz .row.v-form > .v-pair > .form-group { display: flex; gap: 10px; align-items: center; }
body.vz .row.v-form > .v-pair > .form-group > :is(input, select, textarea) { flex: 1 1 0; min-width: 0; margin: 0 !important; width: auto !important; }
body.vz .row.v-form > .v-pair > .form-group > .floating-label { right: 12px !important; }
@media (max-width: 575px) { body.vz .row.v-form > .v-pair { flex-basis: 100%; max-width: 100% !important; } }
/* الأزرار في نفس مستوى الخانات */
body.vz .row.v-form > * > .form-group { display: block; }
body.vz .row.v-form > .v-btncell > .form-group, body.vz .row.v-form > .v-chkcell > .form-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: var(--v-field-h); }
body.vz .row.v-form br { display: none; }
body.vz .row.v-form span[style*="visibility:hidden" i] { position: absolute; }
body.vz .row.v-form .form-group > span[style*="color:Red" i]:not(:empty) { font-size: 12px; }

/* الكلام في القوايم المنسدلة في النص */
body.vz select:not([multiple]):not([size]), body.vz .form-select { text-align: center; text-align-last: center; padding-right: 36px !important; }
body.vz :is(td, th) select:not([multiple]):not([size]) { padding-right: 30px !important; }

/* ---------- المنيو: سطر واحد + فواصل بين العناصر ---------- */
@media (min-width: 992px) {
    html body.vz .layout > .sidebar.sidebar { width: 252px !important; min-width: 252px !important; }
}
@media (max-width: 991px) { html body.vz .sidebar.sidebar { width: 272px !important; right: -300px !important; } html body.vz .sidebar.sidebar.open { right: 0 !important; } }
body.vz .sidebar :is(.nav-link, .nav-sublink) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.vz .sidebar .nav-link { display: flex !important; align-items: center; gap: 2px; min-height: 40px; }
body.vz .sidebar .nav-link > img { flex: 0 0 auto; }
body.vz .sidebar .nav-link .arrow-icon { margin-inline-start: auto; position: static !important; }
body.vz .sidebar .nav > .nav-link, body.vz .sidebar .nav > .has-submenu { border-bottom: 1px dashed rgba(255, 255, 255, .07); border-radius: 0; }
body.vz .sidebar .nav > .nav-link { border-radius: 8px; }
body.vz .sidebar .nav > .has-submenu > .nav-link { font-weight: 700; }
body.vz .sidebar .nav > .has-submenu.open { border-bottom-color: transparent; background: rgba(255, 255, 255, .025); border-radius: 10px; margin: 2px 0; }
body.vz .sidebar .nav-sublink { padding: 7px 12px !important; font-size: 13.5px; }

/* ---------- صفحات الصلاحيات: كروت زي Vellora ---------- */
body.vz table.v-perm-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
    width: 100% !important;
    margin: 0 0 10px !important;
    border: 0 !important; border-spacing: 0 !important;
    background: transparent !important;
    font-size: 15px !important;
}
body.vz table.v-perm-grid > tbody, body.vz table.v-perm-grid > tbody > tr, body.vz table.v-perm-grid > tr { display: contents !important; }
body.vz table.v-perm-grid td {
    display: flex !important; align-items: center; gap: 10px;
    min-height: 52px; margin: 0 !important; padding: 10px 14px !important;
    background: var(--v-surface) !important; color: var(--v-ink) !important;
    border: 1px solid var(--v-line) !important; border-radius: 12px !important;
    box-shadow: none !important; text-align: right !important;
    font-size: 15px !important; font-weight: 600 !important; line-height: 1.4;
    cursor: pointer; transition: border-color .15s, background-color .15s;
}
body.vz table.v-perm-grid td * { color: inherit !important; font-size: inherit !important; font-weight: inherit !important; background: transparent !important; }
body.vz table.v-perm-grid td input[type="checkbox"] { flex: 0 0 22px; width: 22px; height: 22px; margin: 0 !important; background: var(--v-field-bg) !important; }
body.vz table.v-perm-grid td input[type="checkbox"]:checked { background: var(--btn-bg) !important; }
body.vz table.v-perm-grid td label { margin: 0; cursor: pointer; }
@media (hover: hover) { body.vz table.v-perm-grid td:hover { border-color: var(--v-thread) !important; } }
body.vz table.v-perm-grid td:has(input:checked), body.vz table.v-perm-grid td.v-on { border-color: var(--v-thread) !important; background: var(--v-thread-soft) !important; }
body.vz table.v-perm-grid td.v-perm-empty { display: none !important; }
body.vz table.v-perm-grid td.v-perm-head {
    grid-column: 1 / -1; min-height: 0; margin-top: 8px !important; cursor: default;
    background: var(--menu-bg) !important; color: #fff !important; border-color: transparent !important;
    font-size: 16px !important; font-weight: 800 !important; box-shadow: inset -4px 0 0 var(--menu-accent) !important;
}
body.vz table.v-perm-actions { display: flex !important; flex-wrap: wrap; gap: 8px; margin: 0 0 12px !important; border: 0 !important; background: transparent !important; width: auto !important; }
body.vz table.v-perm-actions > tbody, body.vz table.v-perm-actions tr { display: contents !important; }
body.vz table.v-perm-actions td { display: inline-flex !important; align-items: center; padding: 6px 14px !important; border-radius: 999px !important; background: var(--btn-soft-bg) !important; border: 1px solid var(--btn-soft-line) !important; color: var(--btn-soft-text) !important; font-size: 14px !important; font-weight: 700 !important; }
body.vz table.v-perm-actions td * { color: inherit !important; font-size: inherit !important; }
body.vz table.v-perm-actions td label { margin: 0 4px 0 0; cursor: pointer; }
body.vz .section-title { display: flex; align-items: center; gap: 10px; font-size: 17px !important; font-weight: 800 !important; color: var(--v-ink) !important; padding-bottom: 12px; margin-bottom: 14px !important; border-bottom: 1px solid var(--v-line); }
body.vz .section-title i { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--v-thread-soft); color: var(--v-thread-ink); font-size: 15px; }
body.vz fieldset > legend { float: none; width: auto; font-size: 19px !important; font-weight: 800 !important; color: var(--v-ink) !important; margin: 6px 0 14px !important; padding: 0 !important; background: transparent !important; text-align: right !important; }
body.vz fieldset > legend * { color: inherit !important; }

/* ---------- تقفيل الأوردرات: السحب لإعادة الترتيب ---------- */
body.vz #ordersContainer::before {
    content: "\f0b2   اضغط مطولًا على أي أوردر واسحبه لتغيير الترتيب، وبعدين اضغط حفظ الترتيب";
    font-family: "Font Awesome 6 Free", "VCairo", "Cairo", sans-serif; font-weight: 900;
    display: block; margin: 0 10px 10px; padding: 9px 12px; border-radius: 10px;
    background: var(--v-thread-soft); color: var(--btn-soft-text); font-size: 13px; text-align: center; border: 1px dashed var(--btn-soft-line);
}
body.vz #ordersContainer .draggable-card { position: relative; }
body.vz #ordersContainer .draggable-card::after {
    content: "\f58e"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; left: 10px; bottom: 10px; width: 30px; height: 30px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--v-surface-2); color: var(--v-muted); font-size: 14px; pointer-events: none;
}
body.vz .sortable-ghost { opacity: .45 !important; outline: 2px dashed var(--v-thread); outline-offset: -2px; border-radius: 12px; }
body.vz .sortable-fallback, body.vz .sortable-drag { box-shadow: 0 16px 34px rgba(0, 0, 0, .25) !important; }

/* ---------- لوحة إحصائيات العميل (كمبيوتر) ---------- */
body.vz .v-dash-c .v-dash-hero { grid-template-columns: minmax(190px, 1fr) minmax(210px, 1fr) minmax(190px, 1fr) minmax(280px, 1.6fr); }
body.vz .v-dash-c .v-dash-hero .v-money { grid-template-columns: 1fr; gap: 10px; }
body.vz .v-dash-c .v-dash-hero .v-money-card { padding: 10px 12px; }
@media (max-width: 1199px) { body.vz .v-dash-c .v-dash-hero { grid-template-columns: 1fr 1fr; } }
body.vz .v-dash-c .v-hero-rate { flex-direction: column; justify-content: center; text-align: center; gap: 8px; }
body.vz .v-dash-c .v-ring { width: 84px; height: 84px; flex-basis: 84px; }

/* =====================================================================
   لمسات Vellora
   ===================================================================== */
html body.vz:not(.v-mobile) {
    background:
        radial-gradient(900px 480px at 100% -8%, rgba(217, 152, 28, .07), transparent 60%),
        radial-gradient(800px 460px at -10% 108%, rgba(35, 64, 106, .07), transparent 60%),
        var(--v-bg) !important;
    background-attachment: fixed !important;
}
html.dark body.vz:not(.v-mobile) {
    background:
        radial-gradient(900px 480px at 100% -8%, rgba(224, 165, 58, .06), transparent 60%),
        radial-gradient(800px 460px at -10% 108%, rgba(79, 127, 194, .08), transparent 60%),
        var(--v-bg) !important;
    background-attachment: fixed !important;
}
body.vz :is(.layout, .page-wrap) { background: transparent !important; }
body.vz :is(.stats-btn, .btn-primary, .btn-success, .btn-warning, .btn-info, .btn-dark, .btn-secondary, .btn-orange, .btn-main, .submitButton):not(.v-seg *) {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0)) !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 6px 14px -8px rgba(217, 152, 28, .75) !important;
    color: #fff !important;
    transition: transform .12s, box-shadow .15s, background-color .15s !important;
}
@media (hover: hover) {
    body.vz :is(.stats-btn, .btn-primary, .btn-success, .btn-warning, .btn-info, .btn-dark, .btn-secondary, .btn-orange, .btn-main):not(.v-seg *):hover { transform: translateY(-1px); box-shadow: 0 2px 0 rgba(0, 0, 0, .06), 0 10px 18px -8px rgba(217, 152, 28, .8) !important; }
}
body.vz .stats-btn2 { color: var(--btn-soft-text) !important; }
body.vz .stats-btn2.active, body.vz .stats-btn2:hover { color: #fff !important; }
body.vz :is(.filters-card, .card) h5.fw-bold { display: flex; align-items: center; gap: 10px; color: var(--v-ink) !important; }
body.vz :is(.filters-card, .card) h5.fw-bold::before { content: ""; width: 5px; height: 22px; border-radius: 3px; background: linear-gradient(180deg, var(--v-thread), #b9790b); flex: 0 0 5px; }
body.vz .filters-card, body.vz .orders-card { box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 10px 24px -20px rgba(24, 45, 75, .35) !important; }
html.dark body.vz .filters-card, html.dark body.vz .orders-card { box-shadow: 0 12px 28px -22px rgba(0, 0, 0, .8) !important; }
body.vz .sidebar .sidebar-top .logo :is(a, span.zone) { box-shadow: 0 0 0 1px rgba(217, 152, 28, .25), 0 10px 26px -14px rgba(217, 152, 28, .55); }


/* كروت الفلاتر كانت مصغّرة (zoom) فالأدوات بقت أصغر من الزراير: حجم واحد للكل */
body.vz :is(.filters-card, .stats-card)[style*="zoom" i] { zoom: 1 !important; }


/* كل الأزرار نفس الشكل: دهبي وكلامه أبيض في العادي والليلي */
body.vz .stats-btn2:not(.v-seg *) {
    background: var(--btn-bg) !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0)) !important;
    border-color: var(--btn-bg) !important;
    color: #fff !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .18);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 6px 14px -8px rgba(217, 152, 28, .75) !important;
}
body.vz .stats-btn2:not(.v-seg *):hover { background-color: var(--btn-hover) !important; color: #fff !important; }
body.vz span.stats-btn2 label, body.vz span.stats-btn2 { color: #fff !important; }
@media (hover: none) { body.vz .stats-btn2:hover:not(.active):not(.v-seg *) { background: var(--btn-bg) !important; color: #fff !important; } }

} /* end @media screen */

/* =====================================================================
   v5 — شريط تابات موحد لزراير التنقل اللي فوق / المنيو / الهيدر
   ===================================================================== */
html body.vz .v-tabbar {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 4px !important;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 14px !important;
    padding: 4px !important;
    background: var(--v-surface) !important;
    border: 1px solid var(--v-line) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important;
    overflow-x: auto;
    scrollbar-width: none;
    --bs-gutter-x: 0; --bs-gutter-y: 0;
}
html body.vz .v-tabbar::-webkit-scrollbar { display: none; }
html body.vz .v-tabbar::after, html body.vz .v-tabbar::before { display: none !important; }
html body.vz .v-tabbar .v-tabcell { display: contents !important; }
html body.vz .v-tabbar .v-tab {
    flex: 0 0 auto;
    display: inline-flex !important; align-items: center; justify-content: center; gap: 7px;
    width: auto !important; min-width: 0 !important; height: auto !important; min-height: 38px;
    margin: 0 !important;
    padding: 7px 18px !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transform: none !important;
    color: var(--v-ink-2, var(--v-muted)) !important;
    font-size: 14px !important; font-weight: 700 !important;
    white-space: nowrap;
    text-decoration: none !important;
    opacity: 1 !important;
    transition: background-color .15s, color .15s !important;
}
html body.vz .v-tabbar .v-tab :is(i, span, label) { color: inherit !important; }
html body.vz .v-tabbar .v-tab:hover { background: var(--v-hover) !important; color: var(--v-ink) !important; }
html body.vz .v-tabbar .v-tab.v-tab-on, html body.vz .v-tabbar .v-tab.v-tab-on:hover {
    background: var(--btn-bg) !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0)) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px -4px rgba(217, 152, 28, .7) !important;
    cursor: default;
}
html body.vz .v-tabbar .v-tab.v-tab-on::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px; }
html body.vz .v-tabbar .v-tab.active:not(.v-tab-on)::before { content: none; }
html.dark body.vz .v-tabbar { background: var(--v-surface-2) !important; }
/* الكارت اللي فيه التابات بس: من غير خلفية */
html body.vz .v-tabwrap {
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    padding: 0 !important; margin-top: 0 !important; min-height: 0 !important;
}
html body.vz .v-tabwrap:has(> .v-tabbar) { margin-bottom: 0 !important; }
@media (max-width: 767px) {
    html body.vz .v-tabbar { width: 100%; }
    html body.vz .v-tabbar { flex-wrap: wrap !important; }
    html body.vz .v-tabbar .v-tab { padding: 7px 12px !important; font-size: 13px !important; flex: 1 1 40%; min-height: 36px; }
}

/* ---------- الهيدر (الوضع + اسم المستخدم): أصغر وأعلى عشان نكسب مساحة ---------- */
@media (min-width: 992px) {
    html body.vz .page-wrap { padding-top: 10px !important; }
    html body.vz .page-wrap > .page-header {
        min-height: 0 !important; height: auto !important;
        margin: 0 0 12px !important;
        padding: 4px 8px !important;
        border-radius: 10px !important;
    }
}
html body.vz .page-wrap > .page-header .controls { gap: 6px !important; }
html body.vz .page-wrap > .page-header :is(.icon-btn, .mobile-menu-btn, .v-theme-btn) {
    height: 32px !important; min-width: 32px; min-height: 0 !important;
    padding: 0 10px !important;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 13px !important; line-height: 1 !important;
    border-radius: 8px !important;
}
html body.vz .page-wrap > .page-header :is(.icon-btn, .v-theme-btn) i { font-size: 14px; }
@media (max-width: 991px) {
    html body.vz .page-wrap > .page-header { padding: 6px 10px !important; margin-bottom: 10px !important; }
    html body.vz .page-wrap > .page-header :is(.icon-btn, .mobile-menu-btn, .v-theme-btn) { height: 34px !important; min-width: 34px; }
    html body.vz .page-wrap > .page-header .mobile-menu-btn { font-size: 16px !important; }
}

/* ---------- المنيو: أيقونة في عمود ثابت + الكلام + السهم في عمود ثابت تحت بعض ---------- */
html body.vz .sidebar .nav > .has-submenu, html body.vz .sidebar .has-submenu > .nav-link, html body.vz .sidebar .nav > .nav-link { width: 100% !important; box-sizing: border-box; }
html body.vz .sidebar .nav-link {
    display: flex !important; align-items: center !important; gap: 10px !important;
    padding: 8px 10px !important;
    font-size: 14px !important; line-height: 1.4 !important;
}
html body.vz .sidebar .nav-link > .v-nl-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
html body.vz .sidebar .nav-link > .v-nl-txt * { font-size: inherit !important; }
html body.vz .sidebar .nav-link > .v-mi {
    flex: 0 0 30px; width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    margin: 0 !important;
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    color: #c9d5e6 !important; opacity: 1 !important;
    font-size: 14px;
    transition: background .15s, color .15s;
}
html body.vz .sidebar .nav-link > .v-mi.fa-whatsapp { color: #4fd17a !important; font-size: 16px; }
html body.vz .sidebar .nav-link > .v-mi.fa-right-from-bracket { color: #f08a8a !important; }
html body.vz .sidebar .nav-link:hover > .v-mi { background: rgba(255, 255, 255, .12); color: #fff !important; }
html body.vz .sidebar :is(.nav-link.v-current, .has-submenu.open > .nav-link) > .v-mi { background: var(--menu-accent, #d9981c); color: #1a2433 !important; }
html body.vz .sidebar .nav-link > img.v-mi-img { flex: 0 0 30px; width: 18px !important; margin: 0 6px !important; }
html body.vz .sidebar .nav-link > .arrow-icon {
    flex: 0 0 16px; width: 16px; margin: 0 !important;
    text-align: center; font-size: 11px;
    transition: transform .2s;
}
html body.vz .sidebar .has-submenu.open > .nav-link > .arrow-icon { transform: rotate(180deg); }
html body.vz .sidebar .nav-sublink { padding-right: 52px !important; position: relative; }
html body.vz .sidebar .nav-sublink::before {
    content: ""; position: absolute; right: 24px; top: 50%; width: 6px; height: 6px; margin-top: -3px;
    border-radius: 50%; background: rgba(255, 255, 255, .25);
}
html body.vz .sidebar .nav-sublink:is(:hover, .v-current)::before { background: var(--menu-accent, #d9981c); }
html body.vz .sidebar .submenu { margin: 2px 0 6px !important; padding-right: 0 !important; border-right: 0 !important; }
html body.vz .sidebar .sidebar-top.v-logo-empty { display: none !important; }
html body.vz .sidebar .logo [id$="shopnameLbl"] { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-size: 19px !important; }

/* ---------- الجداول v5: التاريخ والأرقام ما تتقسمش، والكلام الطويل في سطور مرتبة ---------- */
body.vz table:is(.orders-table, .table) td:not(.v-long) { word-break: normal !important; overflow-wrap: normal !important; }
body.vz table:is(.orders-table, .table) > thead > tr > th, body.vz table:is(.orders-table, .table) > tbody > tr > th { white-space: nowrap; padding: 8px 10px !important; vertical-align: middle; }
body.vz table.table > tbody > tr > td { padding: 6px 8px !important; vertical-align: middle; }
body.vz table:is(.orders-table, .table) td.v-long { line-height: 1.55; font-size: 12.8px; }
body.vz table:is(.orders-table, .table) td :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) { min-height: 40px; font-size: 14px !important; font-weight: 600; }
body.vz table:is(.orders-table, .table) td textarea { min-width: 180px; }
html body.vz .sidebar .nav-link > :is(.v-mi, .arrow-icon) { position: static !important; left: auto !important; right: auto !important; top: auto !important; }
html body.vz .sidebar .nav-link > .v-mi { transform: none !important; }

/* ---------- v5 — بلوكات الفلاتر/الإضافة: رفيعة ومحندقة زي الديزاين ---------- */
body.vz { --v-field-h: 40px; }
html body.vz .filters-card, html body.vz .stats-options { padding: 10px 14px !important; margin-bottom: 12px !important; border-radius: 12px !important; }
html body.vz :is(.filters-card, .stats-card, .orders-card, .table-card) .card-body { padding: 10px 14px !important; }
html body.vz :is(.filters-card, .card) h5.fw-bold { font-size: 16px !important; margin: 2px 0 12px !important; }
html body.vz :is(.filters-card, .card) h5.fw-bold::before { height: 18px; }
html body.vz .row.v-form { gap: 16px 10px; }
html body.vz :is(.filters-card, .stats-card, .card, .stats-options) :is(.stats-btn, .stats-btn2, .btn:not(.btn-sm):not(.icon)) { min-height: 40px; padding-top: 0 !important; padding-bottom: 0 !important; font-size: 14px !important; }
html body.vz :is(input, select, textarea, .form-control, .form-select, .select2-selection) { font-size: 14px; }
html body.vz .page-wrap > :is(.filters-card, .card, .orders-card, .table-card, .stats-card) + :is(.filters-card, .card, .orders-card, .table-card, .stats-card) { margin-top: 0 !important; }
html body.vz .page-wrap :is(.mb-4, .mb-5):is(.filters-card, .card, .orders-card, .table-card) { margin-bottom: 12px !important; }
@media (max-width: 767px) {
    html body.vz .row.v-form { gap: 14px 8px; }
    html body.vz .filters-card { padding: 10px !important; }
}
/* كارت جوه كارت (filters-card > row > col > card): حشوة واحدة بس */
html body.vz .filters-card :is(.row:not(.v-aging) > [class*="col"] > .card, > .card) { padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
html body.vz .filters-card .row:is(.gy-4, .gy-5, .gy-3) { --bs-gutter-y: 0; }
html body.vz .filters-card > .row, html body.vz .filters-card > div > .row { margin-top: 0 !important; }
html body.vz .v-tabwrap.v-tabwrap { padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
html body.vz .v-tabwrap > .v-tabbar, html body.vz .v-tabwrap .v-tabbar { margin-bottom: 12px !important; }

/* =====================================================================
   v5 — البحث العام (Ctrl+K)
   ===================================================================== */
html body.vz .page-wrap > .page-header { display: flex !important; align-items: center; gap: 8px; }
html body.vz .page-header .v-gs-btn { order: 2; margin-left: auto; }
body.vz .v-gs-btn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 32px; min-width: 0; width: min(340px, 42vw);
    padding: 0 10px; direction: rtl;
    background: var(--v-surface-2, #f4f5f2); color: var(--v-faint, #8a939c);
    border: 1px solid var(--v-line); border-radius: 8px;
    font: inherit; font-size: 13px; cursor: pointer;
    transition: border-color .15s, background .15s;
}
body.vz .v-gs-btn:hover { border-color: var(--v-thread); }
body.vz .v-gs-btn i { color: var(--v-thread-ink, #9a6a0c); font-size: 13px; }
body.vz .v-gs-btn span { flex: 1; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.vz .v-gs-btn kbd, body.vz .v-gs kbd {
    direction: ltr; font: 600 11px/1 "VCairo", Tahoma, sans-serif; padding: 3px 6px;
    color: var(--v-muted); background: var(--v-surface); border: 1px solid var(--v-line); border-bottom-width: 2px; border-radius: 5px;
}
@media (max-width: 991px) {
    html body.vz .page-header .v-gs-btn { order: 0; margin: 0 auto 0 0; width: 34px; height: 34px; justify-content: center; padding: 0; }
    html body.vz .page-header .v-gs-btn :is(span, kbd) { display: none; }
}
body.vz.v-mobile .v-appbar .v-gs-btn {
    width: 36px; height: 36px; justify-content: center; padding: 0;
    background: rgba(255, 255, 255, .08); border-color: rgba(217, 152, 28, .55); border-radius: 10px;
}
body.vz.v-mobile .v-appbar .v-gs-btn i { color: #f5c46b; font-size: 15px; }

.v-gs[hidden] { display: none !important; }
.v-gs { position: fixed; inset: 0; z-index: 2000; display: flex; justify-content: center; align-items: flex-start; padding: 9vh 14px 14px; direction: rtl; font-family: "VCairo", "Cairo", Tahoma, sans-serif; }
.v-gs-back { position: absolute; inset: 0; background: rgba(13, 22, 37, .55); backdrop-filter: blur(3px); animation: vzGsF .15s ease-out; }
.v-gs-box {
    position: relative; width: 100%; max-width: 620px; max-height: 76vh;
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--v-surface, #fff); color: var(--v-ink, #1b2631);
    border: 1px solid var(--v-line, #dde0da); border-radius: 16px;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .45), 0 0 0 1px rgba(217, 152, 28, .18);
    animation: vzGsIn .18s ease-out;
}
.v-gs-in { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--v-line, #dde0da); }
.v-gs-in i { color: var(--v-thread, #d9981c); font-size: 17px; }
body.vz .v-gs-in input {
    flex: 1; min-width: 0; height: 40px !important; min-height: 0 !important;
    border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important;
    color: var(--v-ink) !important; font: 600 16px "VCairo", "Cairo", Tahoma, sans-serif !important; text-align: right !important; padding: 0 !important;
}
.v-gs-in input::-webkit-search-cancel-button { display: none; }
.v-gs-list { overflow-y: auto; padding: 6px 8px 8px; overscroll-behavior: contain; }
.v-gs-head { padding: 10px 10px 4px; font-size: 11.5px; font-weight: 700; color: var(--v-faint, #8a939c); letter-spacing: .2px; }
body.vz .v-gs-item {
    display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px;
    color: var(--v-ink) !important; text-decoration: none !important; cursor: pointer;
}
.v-gs-item > i {
    flex: 0 0 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px; background: var(--v-surface-2, #f4f5f2); color: var(--v-denim, #23406a); font-size: 14px;
}
.v-gs-item > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.v-gs-item b { font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-gs-item small { font-size: 12px; color: var(--v-muted, #5e6873); }
.v-gs-item > em { font-size: 12px; color: var(--v-faint); opacity: 0; transition: opacity .1s; }
body.vz .v-gs-item.on { background: var(--v-hover, #f6efe0); }
.v-gs-item.on > i { background: var(--btn-bg, #d9981c); color: #fff; }
.v-gs-item.on > em { opacity: 1; color: var(--v-thread-ink, #9a6a0c); }
.v-gs-empty { padding: 26px 14px; text-align: center; color: var(--v-muted); font-size: 14px; }
.v-gs-empty i { color: var(--v-thread); margin-left: 6px; }
.v-gs-foot { display: flex; gap: 16px; justify-content: center; padding: 8px 12px; border-top: 1px solid var(--v-line); font-size: 12px; color: var(--v-faint); background: var(--v-surface-2, #f7f8f5); }
.v-gs-foot span { display: inline-flex; gap: 4px; align-items: center; }
html.dark .v-gs-item > i { background: rgba(255, 255, 255, .06); color: #c9d5e6; }
html.v-gs-open, html.v-gs-open body { overflow: hidden !important; }
@media (max-width: 600px) {
    .v-gs { padding: 0; align-items: stretch; }
    .v-gs-box { max-width: none; max-height: none; height: 100%; border-radius: 0; border: 0; }
    .v-gs-foot { display: none; }
    .v-gs-item b { white-space: normal; }
}
@keyframes vzGsF { from { opacity: 0; } to { opacity: 1; } }
@keyframes vzGsIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .v-gs-back, .v-gs-box { animation: none; } }
.v-gs-x { border: 0; background: transparent; padding: 0; cursor: pointer; display: inline-flex; align-items: center; }
.v-gs-x i { display: none; font-size: 20px; color: var(--v-muted); width: 36px; height: 36px; align-items: center; justify-content: center; }
@media (max-width: 600px) { .v-gs-x kbd { display: none; } .v-gs-x i { display: inline-flex; } }
/* موبايل: نشيل السطور الفاضية تحت الشريط اللي فوق ونسيب مسافة الشريط بس */
body.vz.v-mobile #sticky-head.v-appbar-wrap ~ br { display: none; }
body.vz.v-mobile #sticky-head.v-appbar-wrap { position: fixed; }
body.vz.v-mobile #sticky-head.v-appbar-wrap + br + br + br + br + [id$="ResultMessagediv"],
body.vz.v-mobile #sticky-head.v-appbar-wrap ~ [id$="ResultMessagediv"] { padding-top: 62px; }

/* المنيو: من غير "..." — الاسم الطويل بيصغر خطه (من الـ JS) عشان ييجي كامل في سطر */
html body.vz .sidebar .nav-link > .v-nl-txt, html body.vz .sidebar .nav-sublink { text-overflow: clip !important; letter-spacing: 0; }
html body.vz .sidebar .logo [id$="shopnameLbl"] { text-overflow: clip !important; }
html body.vz .sidebar .nav-sublink { white-space: nowrap; overflow: hidden; }
@media (min-width: 992px) { html body.vz .layout > .sidebar.sidebar { width: 266px !important; min-width: 266px !important; } }
html body.vz .sidebar .nav-sublink { padding-right: 40px !important; padding-left: 8px !important; }
html body.vz .sidebar .nav-sublink::before { right: 20px; }

/* =====================================================================
   v6 — لم المنيو (شريط أيقونات) + فتح البرنامج بشكل الكمبيوتر من "Desktop site"
   ===================================================================== */
.v-rail-row { display: none; }
html.v-wide body.vz .v-rail-row {
    display: flex; justify-content: flex-end; align-items: center;
    padding: 8px 10px 0; flex: 0 0 auto;
}
body.vz .v-rail-btn {
    width: 30px; height: 30px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px; cursor: pointer;
    background: rgba(255, 255, 255, .06); color: #c9d5e6;
    border: 1px solid rgba(255, 255, 255, .1);
    transition: background .15s, color .15s, transform .25s;
}
body.vz .v-rail-btn:hover { background: var(--menu-accent, #d9981c); color: #1a2433; border-color: transparent; }
body.vz .v-rail-btn i { font-size: 12px; transition: transform .25s; }

/* ---- "Desktop site" على الموبايل: المنيو ثابت جنب الصفحة زي الكمبيوتر ---- */
html.v-desk body.vz .layout > .sidebar.sidebar {
    position: sticky !important; top: 0 !important; right: auto !important;
    width: 266px !important; min-width: 266px !important;
    height: 100vh !important; overflow-y: auto !important; overflow-x: hidden !important;
    box-shadow: none !important; z-index: 1;
    align-self: flex-start;
}
html.v-desk body.vz :is(#sidebarToggle, .mobile-menu-btn) { display: none !important; }
html.v-desk body.vz.sidebar-active::before { display: none !important; }
html.v-desk body.vz .page-wrap > .page-header {
    position: static !important; margin: 0 0 12px !important; border-radius: 10px !important;
    border-top: 1px solid var(--v-line) !important;
}
html.v-desk body.vz .page-wrap { padding: 10px 16px 16px !important; }

/* ---- المنيو ملموم: شريط أيقونات صغير — بيتلم ويتفرد بالزرار بس ---- */
html.v-wide.v-rail body.vz .layout > .sidebar.sidebar {
    width: 68px !important; min-width: 68px !important;
    overflow-x: hidden !important;
    transition: width .2s ease, min-width .2s ease !important;
    scrollbar-width: none;
}
html.v-wide body.vz .layout > .sidebar.sidebar { transition: width .2s ease, min-width .2s ease !important; }
html.v-wide.v-rail body.vz .layout > .sidebar.sidebar::-webkit-scrollbar { width: 0; }
html.v-wide.v-rail body.vz .v-rail-row { justify-content: center; padding: 10px 0 4px; }
html.v-wide.v-rail body.vz .layout > .sidebar.sidebar :is(.sidebar-top, .v-nl-txt, .arrow-icon, .submenu) { display: none !important; }
html.v-wide.v-rail body.vz .layout > .sidebar.sidebar .nav { padding-left: 0 !important; padding-right: 0 !important; }
html.v-wide.v-rail body.vz .layout > .sidebar.sidebar .nav-link {
    justify-content: center !important; padding: 7px 0 !important; gap: 0 !important;
    border-bottom: 0 !important; border-radius: 10px !important; margin: 2px 10px !important; width: auto !important;
}
html.v-wide.v-rail body.vz .layout > .sidebar.sidebar .nav > .has-submenu { border-bottom: 0 !important; background: transparent !important; margin: 0 !important; }
html.v-wide.v-rail body.vz .layout > .sidebar.sidebar .nav-link > .v-mi { flex-basis: 36px; width: 36px; height: 36px; font-size: 15px; }
html.v-wide.v-rail body.vz .layout > .sidebar.sidebar .nav-link:hover > .v-mi { background: var(--menu-accent, #d9981c); color: #1a2433 !important; }
html.v-wide.v-rail body.vz .layout > .sidebar.sidebar .has-submenu.open > .nav-link { box-shadow: none !important; }
@media (prefers-reduced-motion: reduce) { html.v-wide body.vz .layout > .sidebar.sidebar { transition: none !important; } }
@media print { .v-rail-row { display: none !important; } html.v-rail .layout { padding-right: 0 !important; } }

/* ---------- صفحات المتأخرات: كروت الفترات مالية الشاشة ومتلونة حسب التأخير ---------- */
html body.vz .v-aging-wrap { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
html body.vz .row.v-aging {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px !important; margin: 0 0 14px !important;
    --bs-gutter-x: 0; --bs-gutter-y: 0;
}
html body.vz .row.v-aging > * { width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; flex: none !important; }
html body.vz .v-age {
    --age: #6b7a90; --age-soft: rgba(107, 122, 144, .12);
    position: relative; height: 100%;
    background: var(--v-surface) !important;
    border: 1px solid var(--v-line) !important; border-radius: 16px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important;
    overflow: hidden; transition: transform .18s, box-shadow .18s;
}
html body.vz .v-age::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--age); }
html body.vz .v-age::after {
    content: ""; position: absolute; width: 140px; height: 140px; left: -50px; bottom: -70px; border-radius: 50%;
    background: radial-gradient(circle, var(--age-soft), transparent 70%); pointer-events: none;
}
@media (hover: hover) { html body.vz .v-age:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -14px rgba(16, 24, 40, .35) !important; } }
html body.vz .v-age-1 { --age: #1f9d63; --age-soft: rgba(31, 157, 99, .14); }
html body.vz .v-age-2 { --age: #3b82c4; --age-soft: rgba(59, 130, 196, .14); }
html body.vz .v-age-3 { --age: #d9981c; --age-soft: rgba(217, 152, 28, .16); }
html body.vz .v-age-4 { --age: #e0672b; --age-soft: rgba(224, 103, 43, .15); }
html body.vz .v-age-5 { --age: #c8323f; --age-soft: rgba(200, 50, 63, .15); }
html body.vz .v-age .card-body {
    display: flex !important; flex-direction: column; align-items: center; text-align: center;
    padding: 16px 14px 14px !important; gap: 6px; direction: rtl;
}
html body.vz .v-age .card-body > .mb-3 { margin: 0 !important; }
html body.vz .v-age .v-age-ic {
    width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 13px; background: var(--age-soft); color: var(--age) !important; font-size: 19px !important;
}
html body.vz .v-age .v-age-num { margin: 2px 0 0 !important; font-size: 30px !important; font-weight: 800 !important; color: var(--v-ink) !important; line-height: 1.15; font-variant-numeric: tabular-nums; }
html body.vz .v-age .v-age-num[data-empty]::after { content: "0"; }
html body.vz .v-age .v-age-lab {
    margin: 0 0 8px !important; font-size: 13px !important; font-weight: 700 !important;
    padding: 3px 12px; border-radius: 999px; background: var(--age-soft); color: var(--age) !important;
}
html body.vz .v-age .v-age-lab * { color: inherit !important; }
html body.vz .v-age .v-age-lab::before, html body.vz .v-age .v-age-lab::after { display: none !important; }
html body.vz .v-age :is(.stats-btn, .stats-btn2, input[type="submit"], a.btn) { width: 100% !important; margin-top: auto !important; min-height: 40px; }
html.dark body.vz .v-age .v-age-num { color: #eef2f7 !important; }
@media (max-width: 575px) {
    html body.vz .row.v-aging { grid-template-columns: repeat(2, 1fr); gap: 10px !important; }
    html body.vz .v-age .v-age-num { font-size: 24px !important; }
}
html body.vz .v-age :is(.stats-btn, .stats-btn2, input[type="submit"], a.btn) { color: #fff !important; background: var(--btn-bg) !important; border-color: var(--btn-bg) !important; }
@media (max-width: 575px) { html body.vz .row.v-aging > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
html body.vz .v-age .card-body > :is(input, a, button):is(.stats-btn, .stats-btn2, .btn) { align-self: stretch; width: 100% !important; box-sizing: border-box; display: flex !important; justify-content: center; align-items: center; }
html body.vz .v-age .v-age-num { overflow-wrap: anywhere; }
body.vz .v-ratio-zero .v-rr-empty { opacity: .75; }
body.vz .v-ratio-zero .v-rr-empty .v-rr-bar { background: repeating-linear-gradient(-45deg, var(--v-surface-2), var(--v-surface-2) 6px, transparent 6px, transparent 12px); }

/* ---------- تقرير الأرباح: لوحة ربح بشكل حديث ---------- */
html body.vz .v-pf-wrap { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 6px 0 4px !important; }
html body.vz .stats-grid.v-pf {
    display: grid !important; gap: 12px !important; margin: 10px 0 16px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense;
}
html body.vz .v-pf > .stat-card {
    --pf: var(--v-thread); --pf-soft: var(--v-thread-soft);
    position: relative; overflow: hidden;
    display: flex !important; flex-wrap: wrap; align-items: center; gap: 12px;
    padding: 14px 16px !important; border-radius: 16px !important; min-height: 92px;
    background: var(--v-surface) !important; border: 1px solid var(--v-line) !important;
    transition: transform .18s, box-shadow .18s;
}
html body.vz .v-pf > .stat-card::before { content: ""; position: absolute; inset: 0 0 0 auto; width: 4px; background: var(--pf); }
@media (hover: hover) { html body.vz .v-pf > .stat-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(16, 24, 40, .45) !important; border-color: var(--pf) !important; } }
html body.vz .v-pf > .stat-card .sicon { width: 44px; height: 44px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: var(--pf-soft) !important; color: var(--pf) !important; font-size: 18px; flex: 0 0 44px; }
html body.vz .v-pf > .stat-card > div:not(.sicon):not(.v-pf-x) { flex: 1 1 0; min-width: 0; }
html body.vz .v-pf > .stat-card .slabel { font-size: 12.5px !important; font-weight: 700; }
html body.vz .v-pf > .stat-card .sval { font-size: 21px !important; font-weight: 800 !important; font-variant-numeric: tabular-nums; direction: ltr; text-align: right; }
html body.vz .v-pf-in { --pf: #1f9d63 !important; --pf-soft: rgba(31, 157, 99, .13) !important; }
html body.vz .v-pf-out { --pf: #d0503e !important; --pf-soft: rgba(208, 80, 62, .12) !important; }
html body.vz .v-pf-mid { --pf: #3b82c4 !important; --pf-soft: rgba(59, 130, 196, .13) !important; }
html body.vz .v-pf-bar { flex: 1 0 100%; display: flex; align-items: center; gap: 8px; }
html body.vz .v-pf-bar i { display: block; height: 6px; border-radius: 6px; background: var(--pf); min-width: 2px; max-width: 70%; flex: 0 0 auto; }
html body.vz .v-pf-bar::before { content: ""; order: 2; flex: 1; height: 6px; border-radius: 6px; background: var(--v-surface-2); margin-inline-start: -8px; }
html body.vz .v-pf-bar small { order: 3; font-size: 11px; color: var(--v-muted); white-space: nowrap; font-weight: 700; }

/* البطاقة الكبيرة: الربح */
html body.vz .v-pf > .stat-card.v-pf-hero {
    order: -1; grid-column: span 2; grid-row: span 2;
    min-height: 196px; padding: 22px 24px !important; gap: 16px;
    background: radial-gradient(120% 140% at 0% 0%, rgba(217, 152, 28, .28), transparent 55%),
                radial-gradient(90% 120% at 100% 100%, rgba(91, 155, 255, .22), transparent 60%),
                linear-gradient(135deg, #172a46, #23406a) !important;
    border: 1px solid rgba(217, 152, 28, .45) !important;
    box-shadow: 0 22px 44px -26px rgba(15, 30, 55, .8) !important;
    color: #fff;
}
html body.vz .v-pf > .stat-card.v-pf-hero::before { display: none; }
html body.vz .v-pf > .stat-card.v-pf-hero .sicon { width: 56px !important; height: 56px !important; flex-basis: 56px !important; font-size: 24px !important; background: rgba(217, 152, 28, .2) !important; color: #f5c46b !important; border: 1px solid rgba(245, 196, 107, .35); }
html body.vz .v-pf > .stat-card.v-pf-hero .slabel { color: #f5c46b !important; font-size: 14px !important; letter-spacing: .3px; }
html body.vz .v-pf > .stat-card.v-pf-hero .sval { color: #fff !important; font-size: 40px !important; line-height: 1.1; text-shadow: 0 2px 18px rgba(245, 196, 107, .25); }
html body.vz .v-pf > .stat-card.v-pf-hero.v-pf-neg .sval { color: #ffb3a8 !important; }
html body.vz .v-pf-side { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-inline-start: auto; position: relative; z-index: 1; }
html body.vz .v-pf-side small { color: #c3cfe2; font-size: 11.5px; font-weight: 600; }
html body.vz .v-pf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; background: rgba(31, 157, 99, .22); color: #7ee2b0; border: 1px solid rgba(126, 226, 176, .35); }
html body.vz .v-pf-neg .v-pf-chip { background: rgba(208, 80, 62, .22); color: #ffb3a8; border-color: rgba(255, 179, 168, .35); }
html body.vz .v-pf-ring { --rc: #f5c46b; width: 92px !important; height: 92px !important; flex-basis: 92px !important;
    background: radial-gradient(closest-side, #1d3558 76%, transparent 77%), conic-gradient(var(--rc) calc(var(--p) * 1%), rgba(255, 255, 255, .1) 0) !important; }
html body.vz .v-pf-neg .v-pf-ring { --rc: #ff8d7e; }
html body.vz .v-pf-ring b { color: #fff !important; font-size: 17px !important; direction: ltr; }
/* لمسة: أعمدة صغيرة متحركة في خلفية البطاقة */
html body.vz .v-pf-spark { position: absolute; left: 42%; bottom: 0; height: 64px; display: flex; align-items: flex-end; gap: 6px; opacity: .35; pointer-events: none; }
html body.vz .v-pf-spark i { width: 9px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #f5c46b, rgba(245, 196, 107, 0)); animation: vzPfUp 2.6s ease-in-out infinite alternate; }
html body.vz .v-pf-spark i:nth-child(1) { height: 30%; animation-delay: 0s; } html body.vz .v-pf-spark i:nth-child(2) { height: 45%; animation-delay: .2s; }
html body.vz .v-pf-spark i:nth-child(3) { height: 38%; animation-delay: .4s; } html body.vz .v-pf-spark i:nth-child(4) { height: 60%; animation-delay: .6s; }
html body.vz .v-pf-spark i:nth-child(5) { height: 52%; animation-delay: .8s; } html body.vz .v-pf-spark i:nth-child(6) { height: 75%; animation-delay: 1s; }
html body.vz .v-pf-spark i:nth-child(7) { height: 92%; animation-delay: 1.2s; }
html body.vz .v-pf-neg .v-pf-spark { transform: scaleX(-1); }
@keyframes vzPfUp { from { transform: scaleY(.75); transform-origin: bottom; } to { transform: scaleY(1); transform-origin: bottom; } }
@media (prefers-reduced-motion: reduce) { html body.vz .v-pf-spark i { animation: none; } }
@media (max-width: 1199px) { html body.vz .stats-grid.v-pf { grid-template-columns: repeat(3, minmax(0, 1fr)); } html body.vz .v-pf > .stat-card.v-pf-hero { grid-column: 1 / -1; grid-row: auto; min-height: 150px; } }
@media (max-width: 767px) {
    html body.vz .stats-grid.v-pf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px !important; }
    html body.vz .v-pf > .stat-card { padding: 12px !important; gap: 8px; }
    html body.vz .v-pf > .stat-card .sval { font-size: 17px !important; }
    html body.vz .v-pf > .stat-card.v-pf-hero .sval { font-size: 30px !important; }
    html body.vz .v-pf-ring { width: 74px !important; height: 74px !important; flex-basis: 74px !important; }
}
html body.vz .v-age .v-age-lab { margin: 0 0 8px !important; }

/* ---------- موبايل: مسافة زيادة تحت المحتوى عشان آخر حاجة ماتستخباش ورا الشريط اللي تحت ---------- */
html body.vz.v-mobile { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important; }
html body.vz.v-mobile :is(.v-totop, .back-to-top) { bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important; }

/* ---------- موبايل: كروت الإحصائيات والنسب الكلام في النص ---------- */
@media (max-width: 767px) {
    html body.vz .v-ratio-kpis { grid-template-columns: 1fr 1fr !important; gap: 10px; }
    html body.vz .v-rk { flex-direction: column; justify-content: center; text-align: center; gap: 8px; padding: 14px 10px !important; }
    html body.vz .v-rk > div { width: 100%; min-width: 0; }
    html body.vz .v-rk b { white-space: normal; overflow-wrap: anywhere; }
    html body.vz .v-rk.v-rk-ring { grid-column: 1 / -1; order: -1; flex-direction: row; justify-content: center; text-align: center; }
    html body.vz .v-rk.v-rk-ring > div { width: auto; }
    html body.vz .v-ratio-legend { justify-content: center; }
    html body.vz .v-rr { text-align: center; }
    html body.vz .v-rr-name { text-align: center; }
    html body.vz.v-mobile :is(.filters-card, .card) :is(h1, h2, h3, h4, h5, h6) { text-align: center; justify-content: center; }
}

/* ---------- زرار لم المنيو برة المنيو (على الحافة) ---------- */
body.vz .v-rail-fab {
    position: fixed; z-index: 1047; top: 22px;
    width: 28px !important; height: 28px !important; border-radius: 50% !important;
    background: var(--v-surface) !important; color: var(--v-denim) !important;
    border: 1px solid var(--v-line-strong, #cfd4cc) !important;
    box-shadow: 0 4px 12px -2px rgba(16, 24, 40, .25) !important;
    transition: background .15s, color .15s, left .2s ease, transform .15s !important;
}
body.vz .v-rail-fab:hover { background: var(--menu-accent, #d9981c) !important; color: #1a2433 !important; border-color: transparent !important; transform: scale(1.08); }
html.dark body.vz .v-rail-fab { background: #1c2738 !important; color: #f5c46b !important; border-color: rgba(245, 196, 107, .35) !important; }
body.vz .v-rail-fab i { font-size: 11px; }
html.v-wide.v-rail body.vz .layout > .sidebar.sidebar { padding-top: 8px; }

/* ---------- المنيو ملموم: العنصر بس اللي بيطلع برة ---------- */
body.vz .v-fly {
    position: fixed; z-index: 1060; direction: rtl;
    font-family: "VCairo", "Cairo", Tahoma, sans-serif;
    animation: vzFly .14s ease-out;
}
body.vz .v-fly::after { content: ""; position: absolute; top: 0; bottom: 0; right: -10px; width: 12px; } /* جسر عشان الماوس مايفقدش العنصر */
body.vz .v-fly-pill {
    display: inline-flex; align-items: center; height: 36px; padding: 0 14px; white-space: nowrap;
    background: var(--menu-bg, #182d4b); color: #fff !important; border-radius: 10px;
    border: 1px solid rgba(217, 152, 28, .45);
    font-size: 14px; font-weight: 700; text-decoration: none !important;
    box-shadow: 0 10px 24px -10px rgba(8, 15, 28, .6);
    border-right: 3px solid var(--menu-accent, #d9981c);
}
body.vz .v-fly-pill:hover { background: var(--menu-accent, #d9981c); color: #1a2433 !important; }
body.vz .v-fly:not(.v-fly-tip) {
    min-width: 220px; max-width: 300px; max-height: calc(100vh - 16px); overflow-y: auto;
    background: var(--menu-bg, #1b2d4a); border: 1px solid rgba(217, 152, 28, .35); border-radius: 12px;
    box-shadow: 0 22px 44px -18px rgba(8, 15, 28, .7); padding: 6px;
}
body.vz .v-fly-head { padding: 8px 10px 8px; margin-bottom: 4px; font-size: 14px; font-weight: 800; color: #f5c46b; border-bottom: 1px dashed rgba(255, 255, 255, .12); }
body.vz .v-fly-list { display: flex; flex-direction: column; gap: 2px; }
body.vz .v-fly-link {
    display: block; padding: 8px 12px; border-radius: 8px; white-space: nowrap;
    color: #d5deea !important; font-size: 13.5px; font-weight: 600; text-decoration: none !important;
    position: relative; padding-right: 24px;
}
body.vz .v-fly-link::before { content: ""; position: absolute; right: 10px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
body.vz .v-fly-link:hover, body.vz .v-fly-link.v-current { background: var(--menu-hover-bg, rgba(255, 255, 255, .08)); color: #fff !important; }
body.vz .v-fly-link:hover::before, body.vz .v-fly-link.v-current::before { background: var(--menu-accent, #d9981c); }
html.v-wide.v-rail body.vz .layout > .sidebar.sidebar .v-fly-on > .nav-link > .v-mi,
html.v-wide.v-rail body.vz .layout > .sidebar.sidebar .nav-link.v-fly-on > .v-mi { background: var(--menu-accent, #d9981c); color: #1a2433 !important; }
@keyframes vzFly { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { body.vz .v-fly { animation: none; } }

/* ---------- الوضع الليلي: اللي بيطلع برة المنيو لونه مختلف عن المنيو والصفحة ---------- */
html.dark body.vz .v-fly:not(.v-fly-tip) {
    background: linear-gradient(180deg, #2a3d5c, #223250) !important;
    border: 1px solid rgba(245, 196, 107, .55) !important;
    box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .85), 0 0 0 1px rgba(0, 0, 0, .3) !important;
}
html.dark body.vz .v-fly-head { color: #1a2433; background: linear-gradient(90deg, #f5c46b, #e0a53a); border-bottom: 0; border-radius: 8px; margin-bottom: 6px; }
html.dark body.vz .v-fly-link { color: #e6ecf5 !important; }
html.dark body.vz .v-fly-link::before { background: rgba(245, 196, 107, .45); }
html.dark body.vz .v-fly-link:is(:hover, .v-current) { background: rgba(245, 196, 107, .16); color: #fff !important; }
html.dark body.vz .v-fly-pill {
    background: linear-gradient(90deg, #f5c46b, #e0a53a) !important; color: #1a2433 !important;
    border: 0 !important; box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .85);
}
html.dark body.vz .v-fly-pill:hover { background: #fff !important; color: #1a2433 !important; }

/* =====================================================================
   v11 — تظبيطات الموبايل + السرعة (أكتوبر 2026)
   كله على الشاشة بس (الملف ده media="screen") — الطباعة ومقاساتها زي ما هي
   ===================================================================== */

/* ---------- 1) الموبايل: أي أداتين ينفعوا جنب بعض (تيكست / دروب ليست / زرار) ---------- */
@media (max-width: 575px) {
    html body.vz .row.v-m2 { --bs-gutter-x: 10px; row-gap: 12px; }
    html body.vz .row.v-m2 > [class*="col"] { flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important; min-width: 0; }
    html body.vz .row.v-m2 > .v-m2-full { flex-basis: 100% !important; max-width: 100% !important; width: 100% !important; }
    html body.vz .row.v-m2 > [class*="col"] > .form-group,
    html body.vz .row.v-m2 > [class*="col"] > div > .form-group { margin-bottom: 0 !important; }
    html body.vz .row.v-m2 > [class*="col"]:not(.v-m2-full) :is(input:not([type="checkbox"]):not([type="radio"]), select, .form-control, .form-select, .select2-container) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
    html body.vz .row.v-m2 > [class*="col"]:not(.v-m2-full) :is(.stats-btn, .stats-btn2, .btn:not(.btn-sm), input[type="submit"], input[type="button"], button) { width: 100% !important; max-width: 100% !important; }
    html body.vz .v-m2g { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
    html body.vz .v-m2g > .form-group { margin: 0 !important; min-width: 0; }
    html body.vz .v-m2g > .form-group :is(input:not([type="checkbox"]):not([type="radio"]), select, .stats-btn, .stats-btn2, .btn, button) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
    html body.vz :is(.row.v-m2, .v-m2g, .row.v-form) .floating-label { font-size: 12.5px !important; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---------- 2) الإجماليات اللي فوق التقارير: 3 جنب بعض على الموبايل (2 في الشاشات الصغيرة قوي) ---------- */
@media (max-width: 575px) {
    html body.vz .stats-grid.v-tot3:not(.v-pf) { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
    html body.vz .stats-grid.v-tot3:not(.v-pf) > .stat-card:not(.v-tot-ctrl) {
        flex-direction: column !important; justify-content: flex-start; align-items: center !important; text-align: center;
        padding: 10px 6px !important; gap: 6px !important; min-width: 0; margin: 0 !important;
    }
    html body.vz .stats-grid.v-tot3:not(.v-pf) > .stat-card:not(.v-tot-ctrl) .sicon { width: 32px !important; height: 32px !important; min-width: 32px; font-size: 14px !important; border-radius: 9px !important; margin: 0 !important; }
    html body.vz .stats-grid.v-tot3:not(.v-pf) > .stat-card:not(.v-tot-ctrl) > div:not(.sicon) { min-width: 0; width: 100%; }
    html body.vz .stats-grid.v-tot3:not(.v-pf) > .stat-card:not(.v-tot-ctrl) .slabel { font-size: 11.5px !important; line-height: 1.35; }
    html body.vz .stats-grid.v-tot3:not(.v-pf) > .stat-card:not(.v-tot-ctrl) .sval { font-size: 15px !important; margin-top: 2px !important; overflow-wrap: anywhere; line-height: 1.25; }
    /* الكروت اللي فيها أدوات (check / زرار / اختيار): السطر كله */
    html body.vz .stats-grid.v-tot3:not(.v-pf) > .v-tot-ctrl { grid-column: 1 / -1; min-width: 0; margin: 0 !important; }
}
@media (max-width: 359px) {
    html body.vz .stats-grid.v-tot3:not(.v-pf) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ---------- جداول الفلاتر (من / إلى / بحث): على الموبايل اتنين اتنين ومش بتطلع برة الشاشة ---------- */
@media (max-width: 575px) {
    html body.vz table.v-ftable, html body.vz table.v-ftable > :is(thead, tbody, tfoot) { display: block !important; width: 100% !important; }
    html body.vz table.v-ftable tr { display: flex !important; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
    html body.vz table.v-ftable tr > :is(td, th) { display: block !important; flex: 1 1 calc(50% - 5px); min-width: 0; border: 0 !important; padding: 4px !important; }
    html body.vz table.v-ftable tr > :is(td, th):empty { display: none !important; }
    html body.vz table.v-ftable :is(input:not([type="checkbox"]):not([type="radio"]), select, .btn, .stats-btn, .stats-btn2, input[type="submit"]) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
    html body.vz table.v-ftable br { display: none; }
}

/* ---------- 3) check جوه كلاس زرار (زي "تحديد الكل"): بيظهر check عادي جنبه الكلام — مش شكل زرار ---------- */
html body.vz :is(span.stats-btn, span.stats-btn2, span.btn):has(> input[type="checkbox"]) {
    display: inline-flex !important; align-items: center; justify-content: flex-start; gap: 10px;
    min-height: 40px; padding: 4px 2px !important; cursor: pointer; white-space: nowrap; max-width: 100%;
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    color: var(--v-ink) !important; font-weight: 700; width: auto !important;
}
html body.vz :is(span.stats-btn, span.stats-btn2, span.btn):has(> input[type="checkbox"]):hover { background: transparent !important; }
html body.vz :is(span.stats-btn, span.stats-btn2, span.btn) > input[type="checkbox"] {
    margin: 0 !important; flex: 0 0 auto; position: static !important; transform: none !important;
    width: 22px !important; height: 22px !important; accent-color: var(--v-thread); cursor: pointer;
}
html body.vz :is(span.stats-btn, span.stats-btn2, span.btn):has(> input[type="checkbox"]) > label { margin: 0 !important; cursor: pointer; color: var(--v-ink) !important; line-height: 1.2; font-size: 15px; }

/* ---------- 4) تقرير الأرباح على الموبايل: الرقم الكبير على قد الشاشة + الحركة مش شغالة على طول (أخف على الموبايل) ---------- */
@media (max-width: 767px) {
    html body.vz .v-pf > .stat-card.v-pf-hero .sval { font-size: clamp(22px, 7.6vw, 30px) !important; overflow-wrap: anywhere; }
}
@media (hover: none), (max-width: 767px) {
    html body.vz .v-pf-spark i { animation-iteration-count: 3; will-change: transform; }
}

/* ---------- الموبايل: أداتين ورا بعض في نفس الخانة (الحالة + السبب / التاريخ + المدفوع) جنب بعض ---------- */
@media (max-width: 575px) {
    html body.vz .v-half { display: inline-block !important; width: calc(50% - 8px) !important; max-width: calc(50% - 8px) !important; min-width: 0 !important; vertical-align: top; }
    html body.vz .v-half-a { margin-inline-end: 6px !important; }
    html body.vz .v-half-br { display: none !important; }
}

/* =====================================================================
   صفحات المناديب — لمسة Vellora: كروت الأوردرات + العناوين + الإجماليات
   ===================================================================== */
html body.vz[data-vz-zone="emp"] { --emp-card-shadow: 0 12px 26px -22px rgba(24, 45, 75, .6); }
html.dark body.vz[data-vz-zone="emp"] { --emp-card-shadow: 0 12px 26px -18px rgba(0, 0, 0, .8); }

/* العناوين: من غير الظل القديم + خط دهبي صغير */
html body.vz[data-vz-zone="emp"] :is(h1, h2, h3, h4, h6, h5:not(.fw-bold)):not(.v-appbar-wrap *):not(.v-oc *):not(.card.p-3.shadow-sm.border-0 *) {
    text-shadow: none !important; color: var(--v-ink) !important; font-weight: 800 !important;
    font-size: 17px !important; line-height: 1.6 !important; text-align: center; margin: 4px 0 12px !important;
}
html body.vz[data-vz-zone="emp"] :is(h1, h2, h3, h4, h6, h5:not(.fw-bold)):not(.v-appbar-wrap *):not(.v-oc *):not(.card.p-3.shadow-sm.border-0 *)::before {
    content: ""; display: inline-block; width: 4px; height: 17px; border-radius: 4px; background: var(--v-thread);
    margin-inline-end: 8px; vertical-align: -3px;
}
html body.vz[data-vz-zone="emp"] :is(h1, h2, h3, h4, h5, h6) a { color: inherit !important; text-decoration: none !important; }

/* الكارت اللي بره الكارت: من غير إطار تاني */
html body.vz[data-vz-zone="emp"] :is(.v-oc-wrap, :is(.order-item, .filters-card) :is(#orderForm, .row, [class*="col-"], .product-item):has(.card.p-3.shadow-sm.border-0 > table)) {
    border: 0 !important; background: transparent !important; box-shadow: none !important;
    padding: 0 !important; margin: 0 !important; border-radius: 0 !important; flex: 0 0 100%; max-width: 100%;
}
/* مسافة على الجنبين للكارت كله (الصفحات دي من غير هوامش) */
html body.vz[data-vz-zone="emp"] :is(.v-oc-item, .v-oc-item.v-oc-item.v-oc-item.v-oc-item, .order-item:has(.card.p-3.shadow-sm.border-0 > table), .filters-card:has(> div > .row > [class*="col-"] > .card.p-3.shadow-sm.border-0 > table, > .row > [class*="col-"] > .card.p-3.shadow-sm.border-0 > table, > .card.p-3.shadow-sm.border-0 > table)) {
    border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; margin: 0 10px 12px !important; width: auto !important; max-width: none !important; box-sizing: border-box; }
html body.vz[data-vz-zone="emp"] .v-oc-item .row { margin-left: 0 !important; margin-right: 0 !important; }
html body.vz[data-vz-zone="emp"] .v-oc-item[class*="col-"] { flex: 0 0 auto !important; width: calc(100% - 20px) !important; max-width: calc(100% - 20px) !important; padding-left: 0 !important; padding-right: 0 !important; }
html body.vz[data-vz-zone="emp"] .v-oc-item [class*="col-"].v-oc-wrap { padding: 0 !important; flex: 0 0 100%; max-width: 100%; }

/* كارت الأوردر */
html body.vz[data-vz-zone="emp"] :is(.v-oc, .card.p-3.shadow-sm.border-0:has(> table)):is(.v-oc, .card.p-3.shadow-sm.border-0:has(> table)) {
    position: relative; overflow: hidden;
    background: var(--v-surface) !important; color: var(--v-ink);
    border: 1px solid var(--v-line) !important; border-radius: 16px !important;
    padding: 12px 16px 12px 12px !important; margin: 0 !important;
    box-shadow: var(--emp-card-shadow) !important;
}
html body.vz[data-vz-zone="emp"] :is(.v-oc, .card.p-3.shadow-sm.border-0:has(> table))::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 4px; background: var(--v-thread); }
html body.vz[data-vz-zone="emp"] :is(.v-oc, .card.p-3.shadow-sm.border-0:has(> table)) table { width: 100% !important; margin: 0 !important; border: 0 !important; background: transparent !important; border-collapse: separate; }
html body.vz[data-vz-zone="emp"] :is(.v-oc, .card.p-3.shadow-sm.border-0:has(> table)) table + table { border-top: 1px dashed var(--v-line) !important; margin-top: 8px !important; padding-top: 6px !important; }
html body.vz[data-vz-zone="emp"] :is(.v-oc, .card.p-3.shadow-sm.border-0:has(> table)) tr { background: transparent !important; }
html body.vz[data-vz-zone="emp"] :is(.v-oc, .card.p-3.shadow-sm.border-0:has(> table)) :is(td, th) {
    padding: 3px 2px !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
    font-weight: 600 !important; font-size: 14px; line-height: 1.65; color: var(--v-ink); vertical-align: middle;
}
html body.vz[data-vz-zone="emp"] :is(.v-oc, .card.p-3.shadow-sm.border-0:has(> table)) td span:not(.v-k):not([style*="border-radius"]) { font-weight: 800; }
html body.vz[data-vz-zone="emp"] .v-k { color: var(--v-muted) !important; font-weight: 600 !important; font-size: 12.5px !important; margin-inline-end: 3px; }
/* رقم الأوردر والحالة (الشارات) */
html body.vz[data-vz-zone="emp"] :is(.v-oc, .card.p-3.shadow-sm.border-0:has(> table)) span[style*="border-radius"] { font-size: 13px !important; height: 26px !important; min-width: 26px; border-radius: 13px !important; padding: 0 10px !important; letter-spacing: .2px; }
/* لينك الأوردر واسم العميل */
html body.vz[data-vz-zone="emp"] :is(.v-oc, .card.p-3.shadow-sm.border-0:has(> table)) a.h6, html body.vz[data-vz-zone="emp"] :is(.v-oc, .card.p-3.shadow-sm.border-0:has(> table)) a.text-truncate { font-size: 15px !important; color: var(--v-ink) !important; white-space: normal !important; }
/* أزرار الاتصال والواتس: دواير */
html body.vz[data-vz-zone="emp"] :is(.v-oc, .card.p-3.shadow-sm.border-0:has(> table)) :is(a:has(> img[src*="whatsapp" i]), a:has(> img[src*="mob" i]), a[href^="tel:"], a[href*="wa.me"]) {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%; margin: 2px 3px; vertical-align: middle;
    background: var(--v-denim-soft) !important; border: 1px solid var(--v-line); text-decoration: none !important;
}
html body.vz[data-vz-zone="emp"] :is(.v-oc, .card.p-3.shadow-sm.border-0:has(> table)) :is(a:has(> img[src*="whatsapp" i]), a[href*="wa.me"]) { background: var(--v-pos-soft) !important; }
html body.vz[data-vz-zone="emp"] :is(.v-oc, .card.p-3.shadow-sm.border-0:has(> table)) a > img:is([src*="whatsapp" i], [src*="mob" i]) { width: 20px !important; height: 20px !important; }
/* العنوان (لينك الخريطة) */
html body.vz[data-vz-zone="emp"] :is(.v-oc, .card.p-3.shadow-sm.border-0:has(> table)) a[href*="google.com/maps"] { color: var(--v-muted) !important; font-weight: 600 !important; text-decoration: none !important; }
html body.vz[data-vz-zone="emp"] :is(.v-oc, .card.p-3.shadow-sm.border-0:has(> table)) a[href*="google.com/maps"] svg { fill: var(--v-thread) !important; }
/* الأدوات والأزرار جوه الكارت */
html body.vz[data-vz-zone="emp"] :is(.v-oc, .card.p-3.shadow-sm.border-0:has(> table)) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { border-radius: 12px !important; }
html body.vz[data-vz-zone="emp"] :is(.v-oc, .card.p-3.shadow-sm.border-0:has(> table)) input[type="checkbox"] { width: 22px !important; height: 22px !important; accent-color: var(--v-thread); cursor: pointer; transform: none !important; }
html body.vz[data-vz-zone="emp"] :is(.v-oc, .card.p-3.shadow-sm.border-0:has(> table)) :is(.stats-btn, .stats-btn2, .btn:not(.icon), input[type="submit"], input[type="button"]) { border-radius: 12px !important; min-height: 38px; padding: 0 18px !important; font-weight: 700 !important; }

/* جداول (عنوان: قيمة) زي إجماليات تقرير المندوب => مربعات */
html body.vz[data-vz-zone="emp"] table.v-kv { width: 100% !important; border: 0 !important; background: transparent !important; margin: 0 0 12px !important; display: block; }
html body.vz[data-vz-zone="emp"] table.v-kv > :is(tbody, thead) { display: block; }
html body.vz[data-vz-zone="emp"] table.v-kv tr { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; background: transparent !important; }
html body.vz[data-vz-zone="emp"] table.v-kv tr > :is(td, th) {
    display: block; background: var(--v-surface) !important; border: 1px solid var(--v-line) !important; border-radius: 14px;
    padding: 10px 8px !important; text-align: center !important; font-weight: 800 !important; font-size: 16px; color: var(--v-ink) !important;
    box-shadow: var(--emp-card-shadow);
}
html body.vz[data-vz-zone="emp"] table.v-kv tr > :is(td, th):empty { display: none; }
html body.vz[data-vz-zone="emp"] table.v-kv .v-k { display: block; margin: 0 0 2px; }
html body.vz[data-vz-zone="emp"] table.v-kv tr > :only-child { grid-column: 1 / -1; }

/* رأس الكارت (أول سطر: التاريخ / الاتصال / رقم الأوردر) بخلفية هادية */
html body.vz[data-vz-zone="emp"] :is(.v-oc, .card.p-3.shadow-sm.border-0:has(> table)):is(.v-oc, .card.p-3.shadow-sm.border-0:has(> table)) > table:first-child {
    background: var(--v-surface-2) !important; margin: -12px -16px 8px -12px !important; width: calc(100% + 28px) !important;
    padding: 6px 16px 6px 12px !important; border-bottom: 1px solid var(--v-line) !important;
}
html body.vz[data-vz-zone="emp"] :is(.v-oc, .card.p-3.shadow-sm.border-0:has(> table)):is(.v-oc, .card.p-3.shadow-sm.border-0:has(> table)) > table:first-child + table { border-top: 0 !important; margin-top: 0 !important; }
html body.vz[data-vz-zone="emp"] :is(.v-oc, .card.p-3.shadow-sm.border-0:has(> table)):is(.v-oc, .card.p-3.shadow-sm.border-0:has(> table)) > table:first-child :is(td, th) { font-size: 13.5px; }
html body.vz[data-vz-zone="emp"] :is(.v-oc, .card.p-3.shadow-sm.border-0:has(> table)) :is(input[type="submit"], input[type="button"], button):not(.stats-btn):not(.stats-btn2):not(.btn) {
    background: var(--btn-soft-bg) !important; color: var(--btn-soft-text) !important; border: 1px solid var(--btn-soft-line) !important;
    border-radius: 10px !important; min-height: 34px; padding: 0 14px !important; font-weight: 700 !important; margin: 4px 2px;
}
/* الكارت نفسه هو العنصر المتكرر: نفس المسافة على الجنبين */
html body.vz[data-vz-zone="emp"] .v-oc-item.v-oc-item.v-oc-item.v-oc-item.v-oc-item.v-oc-item.v-oc-item.v-oc-item.v-oc-item.v-oc-item.v-oc-item.v-oc-item { margin: 0 10px 12px !important; width: calc(100% - 20px) !important; max-width: calc(100% - 20px) !important; flex: 0 0 auto !important; }

/* ---------- الموبايل (المناديب / العملاء): أول بلوك تحت الهيدر — كان ليه margin بالسالب بيخليه يستخبى تحت الهيدر ---------- */
html body.vz.v-mobile [id$="ResultMessagediv"] ~ :is(div, section)[style*="margin-top: -"],
html body.vz.v-mobile [id$="ResultMessagediv"] ~ :is(div, section)[style*="margin-top:-"] { margin-top: 0 !important; }
/* المسافة تحت الهيدر: صغيرة وثابتة (كانت كبيرة في أول الصفحة) */
html body.vz.v-mobile #sticky-head.v-appbar-wrap ~ [id$="ResultMessagediv"] { padding-top: 52px !important; }
html body.vz.v-mobile [id$="ResultMessagediv"] + * :is(h1, h2, h3, h4, h5, h6):first-child,
html body.vz.v-mobile [id$="ResultMessagediv"] + * > div:first-child > :is(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0 !important; }

/* =====================================================================
   v15 — ثبات الصفحة (من غير رعشة) + خط البرنامج في كل الصفحات
   ===================================================================== */
@media screen {
/* 1) أول ما الصفحة تفتح: المنيو بيترسم على حالته (ملموم/مفرود) على طول من غير أنيميشن فتح وقفل */
html.vz-init.vz-init.vz-init body.vz .layout > .sidebar.sidebar,
html.vz-init.vz-init.vz-init body.vz .layout > .sidebar.sidebar *,
html.vz-init.vz-init.vz-init body.vz .v-rail-fab,
html.vz-init.vz-init.vz-init body.vz .v-rail-btn,
html.vz-init.vz-init.vz-init body.vz .v-rail-btn i { transition: none !important; }

/* 2) صفحات "طباعة التفاصيل" اللي بتبدل محتوى الصفحة وقت الطباعة: المحتوى المؤقت مايبانش ورا بوب اب الطباعة
      (ده على الشاشة بس — الورقة المطبوعة مش بتتأثر خالص) */
html.vz-pfreeze > body { opacity: 0 !important; transition: none !important; }

/* 3) خط البرنامج (Cairo) لكل الكلام — زي ملف الطباعة بالظبط — ماعدا الباركود والأيقونات */
html body.vz :not(i):not(svg):not(svg *):not([class*="fa-"]):not([class^="fa"]):not([class*=" fa "]):not([class*="glyphicon"]):not([class*="ion-"]):not([class^="bi"]):not([class*=" bi-"]):not(code):not(pre):not(kbd):not(.parcode):not(.parcode *):not([class*="barcode" i]):not([class*="barcode" i] *):not([style*="Barcode" i]):not([style*="Barcode" i] *):not([style*="3 of 9" i]):not([style*="3 of 9" i] *):not([style*="Code128" i]):not([style*="Code128" i] *):not([style*="monospace" i]):not([face*="Barcode" i]) {
    font-family: "VCairo", "Cairo", Tahoma, sans-serif;
}
/* العناصر اللي الصفحة كاتبة جواها خط تاني (زي Arial في ستايل الخانة نفسها) */
html body.vz :is([style*="font-family" i], font[face]):not(i):not([class*="fa-"]):not([class^="fa"]):not(.parcode):not(.parcode *):not([class*="barcode" i]):not([class*="barcode" i] *):not([style*="Barcode" i]):not([style*="Barcode" i] *):not([style*="3 of 9" i]):not([style*="3 of 9" i] *):not([style*="Code128" i]):not([style*="Code128" i] *):not([style*="monospace" i]):not([face*="Barcode" i]):not([style*="Awesome" i]) {
    font-family: "VCairo", "Cairo", Tahoma, sans-serif !important;
}
}

/* =====================================================================
   v16 — موبايل: سهم الصعود + فاصل قبل الفوتر + إحصائيات من غير اسكرول جانبي + من غير أيقونة السحب
   ===================================================================== */
@media screen {
/* سهم الصعود لفوق: كان أبيض على أبيض في الوضع العادي */
html body.vz.v-mobile a.v-totop.v-totop.v-totop,
html body.vz.v-mobile a.v-totop.v-totop.v-totop:is(:hover, :focus, :active) {
    background: var(--v-surface) !important;
    color: var(--v-ink) !important;
    border: 1px solid var(--v-line-strong, #cfd4cc) !important;
    box-shadow: 0 6px 18px rgba(16, 24, 40, .22) !important;
}
html body.vz.v-mobile a.v-totop.v-totop.v-totop i { color: inherit !important; font-size: 18px; }

/* فاصل بين الداتا والفوتر: شريط بلون الصفحة فوق الفوتر (الكروت مابتلزقش فيه ومابتبانش في زواياه) */
html body.vz.v-mobile #sticky-footer.v-bottombar {
    padding-top: 16px !important;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--v-bg) 14px) !important;
}

/* صفحة تقفيل الأوردرات: أيقونة السحب الصغيرة في ركن كل كارت اتشالت (السحب نفسه شغال زي ما هو بالضغط المطول على الكارت) */
body.vz #ordersContainer .draggable-card::after { content: none !important; display: none !important; }

/* لوحات الإحصائيات على الموبايل: زراير (الشهر / العام / الكل) كانت أعرض من الشاشة فبتعمل اسكرول يمين وشمال */
body.vz .v-dash { max-width: 100%; overflow-x: clip; }
body.vz .v-dash-head > * { min-width: 0; max-width: 100%; }
@media (max-width: 767px) {
    body.vz .v-dash-tools { width: 100%; }
    body.vz .v-dash-tools .search-group { flex: 1 1 100%; max-width: none; }
    body.vz .v-dash-tools .v-seg { display: flex; flex: 1 1 100%; max-width: 100%; }
    body.vz .v-dash-tools .v-seg :is(.stats-btn, .stats-btn2) { flex: 1 1 0; min-width: 0; white-space: normal; padding-left: 6px !important; padding-right: 6px !important; }
}
}

/* =====================================================================
   v17 — (1) كروت الاختيارات اتنين اتنين على الموبايل  (2) مسافة أول وآخر صفحات الموبايل  (3) سرعة الاسكرول
   ===================================================================== */
@media screen {
/* ---------- (1) الموبايل: كروت الإعدادات (عدد الأوردرات / طباعة الباركود / الحالة / المحتوى ...) اتنين في السطر ---------- */
@media (max-width: 575px) {
    /* الجريد بقى 6 أعمدة: كروت الأرقام 3 في السطر زي ما هي، وكروت الأدوات 2 في السطر بدل سطر كامل لكل واحد */
    html body.vz .stats-grid.v-tot3:not(.v-pf) { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
    html body.vz .stats-grid.v-tot3:not(.v-pf) > *:not(.v-tot-ctrl) { grid-column: span 2; }
    html body.vz .stats-grid.v-tot3:not(.v-pf) > .v-tot-ctrl { grid-column: span 3 !important; }
    /* لو الجريد فيه كروت أدوات: كل الكروت اتنين اتنين (عشان مايفضلش مكان فاضي في السطور) */
    html body.vz .stats-grid.v-tot3:not(.v-pf):has(> .v-tot-ctrl) > * { grid-column: span 3 !important; }
    /* أي جريد كروت تاني (من غير v-tot3) كان بيطلع كارت في كل سطر: بقى اتنين */
    html body.vz .stats-grid:not(.v-pf):not(.v-tot3):not(:has(table, textarea)) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    /* شكل كارت الأداة وهو نص السطر: الأيقونة أصغر والكلام بيلف لو طويل */
    html body.vz .stats-grid:not(.v-pf) > .stat-card { min-width: 0; }
    html body.vz .stats-grid:not(.v-pf) > .v-tot-ctrl,
    html body.vz .stats-grid:not(.v-pf):not(.v-tot3) > .stat-card { padding: 10px 8px !important; gap: 8px !important; }
    html body.vz .stats-grid:not(.v-pf) > .v-tot-ctrl .sicon,
    html body.vz .stats-grid:not(.v-pf):not(.v-tot3) > .stat-card .sicon { width: 34px !important; height: 34px !important; min-width: 34px; flex: 0 0 34px; font-size: 14px !important; }
    html body.vz .stats-grid:not(.v-pf) > .stat-card > div:not(.sicon) { min-width: 0; }
    html body.vz .stats-grid:not(.v-pf) > .stat-card .slabel { white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
    html body.vz .stats-grid:not(.v-pf) > .stat-card .sval :is(input[type="text"], input[type="number"], select) { max-width: 100% !important; }
}
@media (max-width: 359px) {
    html body.vz .stats-grid.v-tot3:not(.v-pf) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    html body.vz .stats-grid.v-tot3:not(.v-pf) > *:not(.v-tot-ctrl),
    html body.vz .stats-grid.v-tot3:not(.v-pf) > .v-tot-ctrl { grid-column: span 1 !important; }
}

/* ---------- (2) صفحات المندوب والعملاء موبايل: مسافة صغيرة تحت الشريط اللي فوق وفوق الفوتر ---------- */
/* أول الصفحة: أول كارت مابيلزقش في الشريط اللي فوق */
html body.vz.v-mobile #sticky-head.v-appbar-wrap ~ [id$="ResultMessagediv"] { padding-top: 66px !important; }
/* آخر الصفحة: المسافة كانت متحطة على الـ body وطوله ثابت (100%) فماكانتش بتبان — بقت على الفورم نفسه
   فآخر كارت بيقف فوق الفوتر بمسافة واضحة بدل ما يستخبى وراه */
html body.vz.v-mobile:has(#sticky-head.v-appbar-wrap) > form { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }

/* ---------- (3) سرعة الاسكرول ---------- */
/* خلفية الصفحة (الإضاءة الخفيفة في الركنين) كانت background-attachment: fixed — دي بتخلي المتصفح يعيد رسم
   الصفحة كلها مع كل حركة اسكرول (تقيلة جداً في الصفحات الطويلة زي تقرير الأرباح). نفس الشكل بالظبط بس في طبقة ثابتة لوحدها */
html:has(> body.vz:not(.v-mobile):not(.vz-auth)) { background: #f1f2ee !important; }
html.dark:has(> body.vz:not(.v-mobile):not(.vz-auth)) { background: #0f1622 !important; }
html:has(> body.vz:not(.v-mobile):not(.vz-auth)) body.vz:not(.v-mobile) { background: transparent !important; background-attachment: scroll !important; }
html:has(> body.vz:not(.v-mobile):not(.vz-auth))::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(900px 480px at 100% -8%, rgba(217, 152, 28, .07), transparent 60%),
        radial-gradient(800px 460px at -10% 108%, rgba(35, 64, 106, .07), transparent 60%);
}
html.dark:has(> body.vz:not(.v-mobile):not(.vz-auth))::before {
    background:
        radial-gradient(900px 480px at 100% -8%, rgba(224, 165, 58, .06), transparent 60%),
        radial-gradient(800px 460px at -10% 108%, rgba(79, 127, 194, .08), transparent 60%);
}
/* كروت شكل الأرباح: الأعمدة المتحركة كانت شغالة على طول (بتعيد رسم الكارت كل لحظة) — بقت تتحرك مرتين وتقف */
html body.vz .v-pf-spark i { animation-iteration-count: 2 !important; }
html body.vz .v-pf > .stat-card { contain: paint; }
}