/* ===================================================================== Vellora Theme — شكل Vellora (دنيم + كتان + خيط زعفراني) لكل صفحات النظام ملف شكل فقط: لا يغير أي بيانات أو أحداث أو أسماء كنترولز ===================================================================== */ /* ---------- خط Cairo بكل الأوزان (باسم VCairo عشان الطباعة تفضل بالخط والمقاس القديم بالظبط) ---------- */ @font-face { font-family: "VCairo"; font-weight: 400; font-display: block; src: url("/dist/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: block; src: url("/dist/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: block; src: url("/dist/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: block; src: url("/dist/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: block; src: url("/dist/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: block; src: url("/dist/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: block; src: url("/dist/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: block; src: url("/dist/fonts/cairo/cairo-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; } /* ##################################################################### 🎨 لوحة الألوان — غيّر ألوان النظام كله من هنا بس (المنيو + هيدر الجداول + الأزرار في كل الصفحات غير شاشات البيع) اكتب اللون بالشكل ده: #23406a ##################################################################### */ :root { /* ----- المنيو الجانبي ----- */ --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; /* الخط اللي تحت الهيدر */ /* ----- الكلام (غير شاشات البيع) ----- */ --text-color: #111111; /* لون الكلام */ --font-size: 16px; /* حجم الكلام في الجداول والخانات */ --label-color: #2b2b2b; /* لون عناوين الخانات */ /* ----- الأزرار ----- */ --btn-bg: #d9981c; /* لون كل الأزرار */ --btn-text: #ffffff; /* كلام الأزرار */ --btn-hover: #c2860f; /* لون الزرار لما تقف عليه */ --btn-danger-bg: #b0323d; /* أزرار الحذف بس */ --btn-danger-text: #ffffff; } :root { --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-soft: #fbf1dc; --v-pos: #1e7a52; --v-pos-soft: #e3f2ea; --v-neg: #b0323d; --v-neg-soft: #f8e4e6; --v-hover: #fbf8ef; --v-radius: 10px; } /* ===================================================================== الشاشة فقط — الطباعة لها قسم لوحدها تحت ===================================================================== */ @media screen { /* ---------- الأساس ---------- */ body.v-ui { background-color: var(--v-bg) !important; color: var(--v-ink); font-family: "VCairo", "Cairo", Tahoma, sans-serif !important; } body.v-ui input, body.v-ui select, body.v-ui textarea, body.v-ui button, body.v-ui .btn, body.v-ui h1, body.v-ui h2, body.v-ui h3, body.v-ui h4, body.v-ui h5, body.v-ui h6, body.v-ui label { font-family: "VCairo", "Cairo", Tahoma, sans-serif !important; } body.v-ui .wrapper, body.v-ui .content-wrapper, body.v-ui .content-wrapper > .content-header, body.v-ui #myheader { background-color: var(--v-bg) !important; } body.v-ui .content-header { padding: 16px 22px 8px; } body.v-ui a { color: var(--v-denim); } body.v-ui ::placeholder { color: var(--v-faint); } body.v-ui ::selection { background: var(--v-thread-soft); } /* ---------- التوب بار: أبيض بخط سفلي رفيع ---------- */ body.v-ui .main-header, body.v-ui .main-header .navbar, body.v-ui .main-header .logo { background: var(--v-surface) !important; border: 0 !important; box-shadow: none !important; } body.v-ui .main-header { border-bottom: 1px solid var(--v-line) !important; max-height: none !important; } body.v-ui .main-header .navbar { min-height: 50px; } body.v-ui .main-header a, body.v-ui .main-header .sidebar-toggle { color: var(--v-denim) !important; } body.v-ui .main-header .sidebar-toggle:hover { background: var(--v-denim-soft) !important; } /* ---------- السايد بار: دنيم غامق + خيط منقّط ذهبي (الدرزة) ---------- */ body.v-ui .main-sidebar, body.v-ui .left-side, body.v-ui .main-sidebar .sidebar, body.v-ui .main-sidebar .sidebar-menu { background-color: var(--v-denim-deep) !important; } body.v-ui .main-sidebar { border-left: 2px dashed rgba(217, 152, 28, .55) !important; } body.v-ui .main-sidebar .user-panel { padding: 14px 10px 10px; border-bottom: 1px solid rgba(255, 255, 255, .06); } body.v-ui .main-sidebar .user-panel img { border-radius: 10px; max-width: 100%; } body.v-ui .sidebar-menu { padding: 8px 8px 24px; } body.v-ui .sidebar-menu > li.header { background: transparent !important; color: #7f92ab !important; font-size: 12px; padding: 16px 12px 6px; } body.v-ui .sidebar-menu li, body.v-ui .sidebar-menu .treeview-menu, body.v-ui .sidebar-menu .treeview-menu > li { background-color: transparent !important; } body.v-ui .sidebar-menu > li > a, body.v-ui .sidebar-menu .treeview-menu > li > a { color: #d3dcea !important; border-radius: 8px !important; border: 0 !important; margin: 1px 0; font-size: 14px; transition: background .15s, color .15s; } body.v-ui .sidebar-menu > li > a { padding: 9px 12px !important; } body.v-ui .sidebar-menu .treeview-menu { padding: 2px 10px 6px 0 !important; margin: 0 !important; } body.v-ui .sidebar-menu .treeview-menu > li > a { color: #b9c7da !important; font-size: 13.5px; padding: 6px 12px !important; } body.v-ui .sidebar-menu li > a > .fa, body.v-ui .sidebar-menu li > a > i:first-child { opacity: .8; } body.v-ui .sidebar-menu > li > a:hover, body.v-ui .sidebar-menu .treeview-menu > li > a:hover { background: rgba(255, 255, 255, .06) !important; color: #fff !important; } body.v-ui .sidebar-menu > li.active > a, body.v-ui .sidebar-menu > li.menu-open > a, body.v-ui .sidebar-menu .treeview-menu > li.active > a { background: rgba(217, 152, 28, .16) !important; color: #fff !important; box-shadow: inset -3px 0 0 var(--v-thread); } /* ---------- العناوين ---------- */ body.v-ui .content-wrapper h1, body.v-ui .content-wrapper h2, body.v-ui .content-wrapper h3, body.v-ui .content-header h1, body.v-ui .content-header h2, body.v-ui .content-header h3 { color: var(--v-ink); font-weight: 800; } body.v-ui .title, body.v-ui .card-title, body.v-ui h4.title { color: var(--v-ink); font-weight: 800; } body.v-ui .category { color: var(--v-muted); } /* ---------- الكروت / البانلز ---------- */ body.v-ui .card, body.v-ui .box, body.v-ui .panel { background: var(--v-surface) !important; border: 1px solid var(--v-line) !important; border-radius: var(--v-radius) !important; box-shadow: none !important; } body.v-ui .box-header, body.v-ui .card .header { border-bottom: 1px solid var(--v-line); } /* ---------- الجداول (شكل data-table) ---------- */ body.v-ui .table:not(:where(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *) { background-color: var(--v-surface); border-collapse: separate !important; border-spacing: 0; border: 1px solid var(--v-line) !important; border-radius: var(--v-radius); color: var(--v-ink); font-size: 14px; margin-bottom: 14px; } body.v-ui .table:not(:where(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *) > thead > tr > th, body.v-ui .table:not(:where(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *) > thead > tr > td { background-color: var(--v-surface-2) !important; color: var(--v-muted) !important; font-weight: 700 !important; font-size: 13px !important; padding: 10px 12px !important; vertical-align: middle !important; border: 0 !important; border-bottom: 2px solid var(--v-line-strong) !important; } body.v-ui .table:not(:where(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *) > thead > tr:first-child > th:first-child, body.v-ui .table:not(:where(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *) > thead > tr:first-child > td:first-child { border-top-right-radius: var(--v-radius); } body.v-ui .table:not(:where(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *) > thead > tr:first-child > th:last-child, body.v-ui .table:not(:where(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *) > thead > tr:first-child > td:last-child { border-top-left-radius: var(--v-radius); } body.v-ui .table:not(:where(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *)[dir="ltr"] > thead > tr:first-child > th:first-child, body.v-ui .table:not(:where(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *)[dir="ltr"] > thead > tr:first-child > td:first-child { border-top-right-radius: 0; border-top-left-radius: var(--v-radius); } body.v-ui .table:not(:where(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *)[dir="ltr"] > thead > tr:first-child > th:last-child, body.v-ui .table:not(:where(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *)[dir="ltr"] > thead > tr:first-child > td:last-child { border-top-left-radius: 0; border-top-right-radius: var(--v-radius); } /* الهيدر جواه نص أبيض (ForeColor=White) يرجع للون الهيدر */ body.v-ui .table:not(:where(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *) > thead :not(th):not(td)[style^="color:White" i], body.v-ui .table:not(:where(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *) > thead :not(th):not(td)[style^="color: White" i], body.v-ui .table:not(:where(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *) > thead :not(th):not(td)[style^="color:#fff" i], body.v-ui .table:not(:where(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *) > thead :not(th):not(td)[style^="color: #fff" i] { color: inherit !important; } /* الهيدرات البرتقالي (كانت مميزة) تفضل مميزة بلون الخيط */ body.v-ui .table:not(:where(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *) > thead[style*="e46f00" i] > tr > th, body.v-ui .table:not(:where(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *) > thead[style*="e46f00" i] > tr > td { background-color: var(--v-thread-soft) !important; color: #7a5508 !important; border-bottom-color: #efd29a !important; } body.v-ui .table:not(:where(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *) > tbody > tr > td, body.v-ui .table:not(:where(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *) > tbody > tr > th, body.v-ui .table:not(:where(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *) > tfoot > tr > td { background-color: var(--v-surface) !important; padding: 9px 12px !important; vertical-align: middle !important; border: 0 !important; border-bottom: 1.5px solid var(--v-row-line) !important; color: var(--v-ink); } body.v-ui .table:not(:where(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *) > tbody > tr > th { font-weight: 700; color: var(--v-muted); } body.v-ui .table:not(:where(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *) > tbody > tr:last-child > td, body.v-ui .table:not(:where(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *) > tbody > tr:last-child > th { border-bottom: 0 !important; } body.v-ui .table:not(:where(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *) > tbody > tr:last-child > td:first-child { border-bottom-right-radius: var(--v-radius); } body.v-ui .table:not(:where(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *) > tbody > tr:last-child > td:last-child { border-bottom-left-radius: var(--v-radius); } body.v-ui .table:not(:where(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *) > tbody > tr:hover > td, body.v-ui .table:not(:where(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *) > tbody > tr:hover > th { background-color: var(--v-hover) !important; } body.v-ui .table:not(:where(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *) > tfoot > tr > td { font-weight: 700; background-color: var(--v-denim-soft) !important; border-top: 2px solid var(--v-denim) !important; } body.v-ui .table-responsive, body.v-ui .table-full-width { border: 0 !important; overflow-x: auto; } /* ---------- الحقول ---------- */ body.v-ui .form-control { border: 1px solid var(--v-input) !important; border-radius: 8px !important; box-shadow: none !important; color: var(--v-ink); min-height: 36px; background-color: var(--v-surface); transition: border-color .15s, box-shadow .15s; } body.v-ui .form-control:focus, body.v-ui table input:focus, body.v-ui table select:focus { border-color: var(--v-denim) !important; box-shadow: 0 0 0 3px rgba(35, 64, 106, .12) !important; outline: 0; } body.v-ui .form-control[disabled], body.v-ui .form-control[readonly] { background-color: var(--v-surface-2) !important; color: var(--v-ink) !important; opacity: 1; } body.v-ui table input[type="text"]:not(.form-control), body.v-ui table input[type="number"]:not(.form-control), body.v-ui table input[type="date"]:not(.form-control), body.v-ui table select:not(.form-control) { border: 1px solid var(--v-input) !important; border-radius: 6px !important; padding: 4px 6px; min-height: 32px; background-color: #fff; } body.v-ui input[type="checkbox"], body.v-ui input[type="radio"] { accent-color: var(--v-denim); } body.v-ui :focus-visible { outline: 2px solid var(--v-thread); outline-offset: 2px; } /* ---------- الأزرار ---------- */ body.v-ui .btn { border-radius: 8px !important; font-weight: 700; box-shadow: none !important; transition: background-color .15s, border-color .15s, color .15s; } body.v-ui .btn[disabled] { opacity: .6; } body.v-ui .btn-primary { background-color: var(--v-denim) !important; border-color: var(--v-denim) !important; color: #fff !important; } body.v-ui .btn-primary:hover, body.v-ui .btn-primary:focus, body.v-ui .btn-primary:active { background-color: var(--v-denim-deep) !important; border-color: var(--v-denim-deep) !important; } body.v-ui .btn-success { background-color: var(--v-pos) !important; border-color: var(--v-pos) !important; color: #fff !important; } body.v-ui .btn-success:hover { background-color: #17613f !important; } body.v-ui .btn-danger { background-color: var(--v-neg) !important; border-color: var(--v-neg) !important; color: #fff !important; } body.v-ui .btn-danger:hover { background-color: #8f2731 !important; } body.v-ui .btn-warning { background-color: var(--v-thread) !important; border-color: var(--v-thread) !important; color: #2b1d00 !important; } body.v-ui .btn-warning:hover { background-color: #c2860f !important; } body.v-ui .btn-info { background-color: var(--v-denim-soft) !important; border-color: #c9d6e6 !important; color: var(--v-denim) !important; } body.v-ui .btn-dark { background-color: var(--v-ink); border-color: var(--v-ink); color: #fff !important; } body.v-ui .btn-default { background-color: var(--v-surface) !important; border: 1px solid #9fb2cc !important; color: var(--v-denim) !important; } body.v-ui .btn-default:hover { background-color: var(--v-denim) !important; color: #fff !important; } /* ---------- الرسائل ---------- */ body.v-ui .alert { border: 0 !important; border-radius: 8px !important; font-size: 14px; } body.v-ui .alert-success { background: var(--v-pos-soft) !important; color: var(--v-pos) !important; } body.v-ui .alert-danger, body.v-ui .alert-error { background: var(--v-neg-soft) !important; color: var(--v-neg) !important; } body.v-ui .alert-warning, body.v-ui .alert-info { background: var(--v-thread-soft) !important; color: #7a5508 !important; } /* ---------- النوافذ المنبثقة ---------- */ body.v-ui .modal-content { border: 0 !important; border-radius: 14px !important; overflow: hidden; box-shadow: 0 20px 50px rgba(24, 45, 75, .35) !important; } body.v-ui .modal-header { background: var(--v-denim) !important; border-bottom: 2px dashed rgba(217, 152, 28, .7) !important; padding: 12px 16px; } body.v-ui .modal-header .close { color: #fff !important; opacity: .85; text-shadow: none; font-size: 26px; } body.v-ui .modal-title, body.v-ui .modal-title * { color: #fff !important; font-weight: 700; } body.v-ui .modal-body .table:not(:where(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *) { margin-bottom: 8px !important; } body.v-ui .modal-backdrop.in { opacity: .45; background: var(--v-denim-deep); } /* ---------- الترقيم ---------- */ body.v-ui .pagination > li > a, body.v-ui .pagination > li > span { border-color: var(--v-line) !important; color: var(--v-denim) !important; margin: 0 2px; border-radius: 6px !important; } body.v-ui .pagination > .active > a, body.v-ui .pagination > .active > span, body.v-ui .pagination > li > a:hover { background-color: var(--v-denim) !important; border-color: var(--v-denim) !important; color: #fff !important; } /* ---------- صفحات الطباعة: معاينة كأنها ورقة ---------- */ body.v-ui #divReportpage, body.v-ui #myPrintedDiv, body.v-ui #dvReport, body.v-ui #divprintpage, body.v-ui #divpage, body.v-ui #divReportpage2 { background: #fff; border: 1px solid var(--v-line); border-radius: var(--v-radius); padding: 14px; box-shadow: 0 1px 2px rgba(24, 45, 75, .06), 0 8px 24px rgba(24, 45, 75, .06); } body.v-ui #printbutton { min-width: 180px; } /* ---------- صفحات الموبايل (المندوب / المسوق) ---------- */ body.v-ui.v-mobile { background-color: var(--v-bg) !important; } body.v-ui.v-mobile .breadcrumb { border-top: 2px dashed rgba(217, 152, 28, .6); } } /* end @media screen */ /* ===================================================================== الطباعة: ورقة نضيفة أبيض وأسود، من غير ما نغير ترتيب الفاتورة ===================================================================== */ @media print { /* الطباعة بالأحجام والمقاسات القديمة زي ما هي: بس بنشيل الظلال والعناصر الإضافية بتاعة الشكل */ body.v-ui * { box-shadow: none !important; text-shadow: none !important; } body.v-ui .pos-title, body.v-ui .pos-back, body.v-ui .v-back { display: none !important; } } /* ===================================================================== شاشة تسجيل الدخول (شكل Vellora) ===================================================================== */ body.v-auth { min-height: 100vh; background: var(--v-denim-deep) !important; font-family: "VCairo", "Cairo", Tahoma, sans-serif !important; color: var(--v-ink); overflow-x: hidden; } body.v-auth > form > .card { background: transparent !important; border: 0 !important; box-shadow: none !important; } body.v-auth .container1 { padding: 16px; min-height: 100vh; display: flex; align-items: center; justify-content: center; } body.v-auth .container1 > .row { width: 100%; margin: 0; } body.v-auth .container1 > .row > [class*="col-md-4"]:not(:nth-child(2)) { display: none; } body.v-auth .container1 > .row > [class*="col-md-4"]:nth-child(2) { float: none; width: 100%; max-width: 400px; margin: 0 auto; padding: 0; } body.v-auth .container { width: 100% !important; max-width: 400px; margin: 40px auto !important; padding: 30px 28px 26px !important; background: var(--v-surface) !important; color: var(--v-ink) !important; border: 0 !important; border-radius: 14px !important; box-shadow: 0 24px 60px rgba(0, 0, 0, .35) !important; outline: 2px dashed var(--v-thread); outline-offset: 6px; text-align: center; } body.v-auth .container h2 { font-size: 22px; font-weight: 800; color: var(--v-ink); margin: 6px 0 4px; } body.v-auth .container h2::after { content: "سجّل دخولك عشان تبدأ شغلك"; display: block; font-size: 14px; font-weight: 400; color: var(--v-muted); margin-top: 6px; } body.v-auth .accountInfo img { width: 64px !important; height: 64px !important; object-fit: contain; padding: 8px; margin: 6px auto 0 !important; border-radius: 14px; background: var(--v-thread); } body.v-auth .accountInfo > br { display: none; } body.v-auth .form-control.login { height: auto !important; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 14px 0 0 !important; color: var(--v-ink) !important; text-align: right; } body.v-auth .form-control.login > br, body.v-auth .form-control.login .row br { display: none; } body.v-auth .form-control.login p { margin: 0 0 14px; } body.v-auth .form-control.login label { display: block; font-size: 13px; font-weight: 600; color: var(--v-muted); margin-bottom: 4px; } body.v-auth .form-control.login .form-control { height: 42px; border: 1px solid var(--v-input) !important; border-radius: 8px !important; box-shadow: none !important; font-size: 15px; direction: rtl; } body.v-auth .form-control.login .form-control:focus { border-color: var(--v-denim) !important; box-shadow: 0 0 0 3px rgba(35, 64, 106, .12) !important; } body.v-auth .submitButton, body.v-auth .btn-primary { width: 100% !important; padding: 9px 12px !important; font-size: 16px !important; font-weight: 700 !important; background-color: var(--v-denim) !important; border: 0 !important; border-radius: 8px !important; color: #fff !important; } body.v-auth .submitButton:hover { background-color: var(--v-denim-deep) !important; } body.v-auth .container > .failureNotification, body.v-auth [id$="resultloginLbl"] { display: block; color: var(--v-neg) !important; font-size: 14px; } body.v-auth div.failureNotification { background: var(--v-neg-soft); border-radius: 8px; padding: 6px 10px; margin: 8px 0; } body.v-auth div.failureNotification ul { margin: 0; padding-right: 18px; text-align: right; } body.v-auth #ResultMessagediv:not(:empty) { max-width: 400px; margin: 16px auto 0; } /* ---- شاشة تفعيل البرنامج (ActivationCode) بنفس كارت اللوجن ---- */ body.v-auth .v-activate { position: relative; flex-direction: column; } body.v-auth .v-activate > .row > [class*="col-md-4"]:first-child { display: block !important; float: none; width: 100%; max-width: 400px; margin: 0 auto; padding: 0; text-align: right; } body.v-auth .v-act-login { display: inline-flex; align-items: center; gap: 6px; color: #d3dcea !important; font-size: 14px; font-weight: 600; text-decoration: none !important; padding: 6px 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(255,255,255,.06); } body.v-auth .v-act-login:hover { color: #fff !important; border-color: var(--v-thread); background: rgba(217,152,28,.16); } body.v-auth .v-act-login .fa { color: var(--v-thread); } body.v-auth .v-activate .container { margin-top: 22px !important; } body.v-auth .v-activate h2.v-act-title::before { content: "\f084"; font-family: FontAwesome !important; font-weight: 400; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 14px; background: var(--v-thread); color: #fff; font-size: 30px; } body.v-auth .v-activate h2.v-act-title::after { content: "ادخل كود التفعيل عشان تبدأ تستخدم البرنامج"; } body.v-auth .v-activate h2:not(.v-act-title) { display: none; } body.v-auth .v-act-table { width: 100%; margin: 16px 0 0 !important; background: transparent !important; border: 1px solid var(--v-line) !important; border-radius: 10px; border-collapse: separate !important; border-spacing: 0; overflow: hidden; } body.v-auth .v-act-table > thead > tr > th { background: var(--v-surface-2) !important; color: var(--v-muted) !important; font-size: 13px; font-weight: 600; padding: 9px 10px !important; border: 0 !important; border-bottom: 1px solid var(--v-line) !important; } body.v-auth .v-act-table > thead > tr > th + th, body.v-auth .v-act-table > tbody > tr > td + td { border-right: 1px solid var(--v-line) !important; } body.v-auth .v-act-table > tbody > tr > td { background: var(--v-surface) !important; color: var(--v-ink) !important; font-size: 15px; font-weight: 700; padding: 10px !important; border: 0 !important; direction: ltr; word-break: break-all; font-variant-numeric: tabular-nums; } body.v-auth .v-act-table .form-control { height: 42px; border: 1px solid var(--v-input) !important; border-radius: 8px !important; box-shadow: none !important; font-size: 15px; text-align: center; direction: ltr; } body.v-auth .v-act-table .form-control:focus { border-color: var(--v-denim) !important; box-shadow: 0 0 0 3px rgba(35, 64, 106, .12) !important; } body.v-auth .v-act-table .failureNotification { display: block; margin-top: 6px; font-size: 13px; direction: rtl; } body.v-auth .v-act-actions { margin-top: 18px; text-align: center; } body.v-auth .v-act-actions > br { display: none; } body.v-auth .v-act-actions [id$="resultLbl"]:not(:empty) { display: block; margin-top: 12px; padding: 8px 10px; border-radius: 8px; background: var(--v-surface-2); color: var(--v-ink); font-size: 14px; font-weight: 600; } /* ===================================================================== v3 — المنيو زي Vellora + الشاشات الصغيرة + الأزرار ===================================================================== */ @media screen { /* الخط على الحاويات (الطباعة بتفضل بخطها القديم) */ body.v-ui form, body.v-ui .wrapper, body.v-ui .content-wrapper, body.v-ui .main-sidebar, body.v-ui .modal { font-family: "VCairo", "Cairo", Tahoma, sans-serif; } /* ----- السايد بار: يبدأ من فوق خالص واللوجو باين كامل ----- */ body.v-ui .main-sidebar { margin-top: 0 !important; padding-top: 0 !important; top: 0 !important; z-index: 1031 !important; min-height: 100vh; } body.v-ui .main-sidebar .user-panel { background: var(--v-denim-deep) !important; padding: 14px 12px 12px !important; margin: 0 !important; border-bottom: 2px dashed rgba(217, 152, 28, .45) !important; } body.v-ui .main-sidebar .user-panel img { display: block; width: 100% !important; height: auto !important; max-height: 86px; object-fit: contain; margin: 0 !important; border-radius: 9px; background: #fff; } body.v-ui .sidebar-menu > li > a > .fa, body.v-ui .sidebar-menu > li > a > i { width: 22px; text-align: center; font-size: 15px; } body.v-ui .sidebar-menu .pull-right-container { color: #7f92ab; } body.v-ui .sidebar-menu li.menu-open > a .pull-right-container { color: var(--v-thread); } /* ----- أزرار من غير كلاس (كانت بلون ثابت) ----- */ body.v-ui .v-btn { background-color: var(--v-denim) !important; border: 1px solid var(--v-denim) !important; color: #fff !important; border-radius: 8px !important; padding: 6px 14px; min-height: 36px; font-weight: 700; cursor: pointer; transition: background-color .15s; } body.v-ui .v-btn:hover { background-color: var(--v-denim-deep) !important; } body.v-ui .v-btn.v-btn-danger { background-color: var(--v-neg) !important; border-color: var(--v-neg) !important; } body.v-ui .v-btn.v-btn-success { background-color: var(--v-pos) !important; border-color: var(--v-pos) !important; } body.v-ui .v-btn.v-btn-warning { background-color: var(--v-thread) !important; border-color: var(--v-thread) !important; color: #2b1d00 !important; } } /* ----- صفحات الإضافة على الشاشات الصغيرة: الخانات بتترص 3 أو 2 أو 1 في السطر حسب حجم الشاشة (جداول العرض مش بتتلمس — بتفضل سكرول عادي) ----- */ @media screen and (max-width: 991px) { body.v-ui table.v-stack, body.v-ui table.v-stack > thead, body.v-ui table.v-stack > tbody, body.v-ui table.v-stack > tfoot { display: block !important; width: 100% !important; height: auto !important; } body.v-ui table.v-stack > * > tr { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 10px; padding: 4px 8px; width: 100% !important; box-sizing: border-box; } body.v-ui table.v-stack > * > tr > th, body.v-ui table.v-stack > * > tr > td { display: block !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; float: none !important; height: auto !important; text-align: right !important; border: 0 !important; border-radius: 0 !important; padding: 8px 2px !important; background: transparent !important; } body.v-ui table.v-stack.v-has-labels > thead, body.v-ui table.v-stack > thead > tr.v-label-row { display: none !important; } body.v-ui table.v-stack > tbody > tr + tr { border-top: 1px dashed var(--v-line); } body.v-ui table.v-stack [data-label]::before { content: attr(data-label); display: block; font-size: 12.5px; font-weight: 600; color: var(--v-muted); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.v-ui table.v-stack input[type="text"], body.v-ui table.v-stack input[type="number"], body.v-ui table.v-stack input[type="date"], body.v-ui table.v-stack input[type="password"], body.v-ui table.v-stack input[type="email"], body.v-ui table.v-stack input[type="tel"], body.v-ui table.v-stack select, body.v-ui table.v-stack textarea, body.v-ui table.v-stack .form-control { width: 100% !important; max-width: 100% !important; display: block; min-height: 40px; box-sizing: border-box; } body.v-ui table.v-stack input[type="submit"], body.v-ui table.v-stack input[type="button"], body.v-ui table.v-stack button, body.v-ui table.v-stack .btn { width: 100% !important; min-height: 42px; margin: 3px 0; } body.v-ui .content-header { padding: 10px 8px 6px; } } @media screen and (max-width: 767px) { body.v-ui table.v-stack > * > tr { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media screen and (max-width: 520px) { body.v-ui table.v-stack > * > tr { grid-template-columns: minmax(0, 1fr); } } /* ===================================================================== منع الاهتزاز مع الريفريش: الصفحة بتظهر بعد ما الشكل يتطبق (لو حصل أي مشكلة في الـ JS الصفحة بتظهر لوحدها بعد ثانية) ===================================================================== */ @keyframes v-reveal { to { visibility: visible; } } @media screen { body.v-ui:not(.v-ready) .wrapper, body.v-ui:not(.v-ready) > form > div { visibility: hidden; animation: v-reveal 0s linear 1s forwards; } body.v-ui:not(.v-ready) * { transition: none !important; } /* البوب اب يفتح بسرعة */ body.v-ui .modal.fade .modal-dialog { transition-duration: .12s !important; } body.v-ui .modal.fade, body.v-ui .modal-backdrop.fade { transition-duration: .1s !important; } } /* ===================================================================== v9 — بيستخدم لوحة الألوان اللي فوق ===================================================================== */ @media screen { /* ----- المنيو: نفس اللون بطول الصفحة مهما طالت ----- */ body.v-ui .wrapper { position: relative; min-height: 100vh; } body.v-ui .main-sidebar { min-height: 100% !important; } body.v-ui .main-sidebar, body.v-ui .left-side, body.v-ui .main-sidebar .sidebar, body.v-ui .main-sidebar .sidebar-menu, body.v-ui .main-sidebar .user-panel { background-color: var(--menu-bg) !important; } body.v-ui .main-sidebar { border-left: 2px dashed var(--menu-accent) !important; } body.v-ui .main-sidebar .user-panel { border-bottom-color: var(--menu-accent) !important; } body.v-ui .sidebar-menu > li > a { color: var(--menu-text) !important; } body.v-ui .sidebar-menu .treeview-menu > li > a { color: var(--menu-subtext) !important; } body.v-ui .sidebar-menu > li > a:hover, body.v-ui .sidebar-menu .treeview-menu > li > a:hover { background: var(--menu-hover-bg) !important; color: #fff !important; } body.v-ui .sidebar-menu > li.active > a, body.v-ui .sidebar-menu > li.menu-open > a, body.v-ui .sidebar-menu .treeview-menu > li.active > a { background: var(--menu-active-bg) !important; box-shadow: inset -3px 0 0 var(--menu-accent) !important; color: #fff !important; } body.v-ui .sidebar-menu li.menu-open > a .pull-right-container { color: var(--menu-accent); } /* ----- هيدر الجداول: لون واحد في كل الصفحات (غير شاشات البيع) ----- */ body.v-ui:not(.pos-screen) .table:not(:where(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *) > thead > tr > th, body.v-ui:not(.pos-screen) .table:not(:where(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *) > thead > tr > td, body.v-ui:not(.pos-screen) .table:not(:where(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *) > thead[style] > tr > th, body.v-ui:not(.pos-screen) .table:not(:where(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *) > thead[style] > tr > td { background-color: var(--head-bg) !important; color: var(--head-text) !important; border-bottom-color: var(--head-line) !important; } /* ----- الأزرار: لون واحد في كل الصفحات (غير شاشات البيع) ----- */ body.v-ui:not(.pos-screen) .btn-primary, body.v-ui:not(.pos-screen) .btn-success, body.v-ui:not(.pos-screen) .btn-warning, body.v-ui:not(.pos-screen) .btn-info, body.v-ui:not(.pos-screen) .btn-default, body.v-ui:not(.pos-screen) .btn-dark, body.v-ui:not(.pos-screen) .v-btn, body.v-ui:not(.pos-screen) .v-btn.v-btn-success, body.v-ui:not(.pos-screen) .v-btn.v-btn-warning { background-color: var(--btn-bg) !important; border-color: var(--btn-bg) !important; color: var(--btn-text) !important; } body.v-ui:not(.pos-screen) .btn-primary:hover, body.v-ui:not(.pos-screen) .btn-success:hover, body.v-ui:not(.pos-screen) .btn-warning:hover, body.v-ui:not(.pos-screen) .btn-info:hover, body.v-ui:not(.pos-screen) .btn-default:hover, body.v-ui:not(.pos-screen) .btn-dark:hover, body.v-ui:not(.pos-screen) .v-btn:hover { background-color: var(--btn-hover) !important; border-color: var(--btn-hover) !important; color: var(--btn-text) !important; } body.v-ui:not(.pos-screen) .btn-danger, body.v-ui:not(.pos-screen) .v-btn.v-btn-danger { background-color: var(--btn-danger-bg) !important; border-color: var(--btn-danger-bg) !important; color: var(--btn-danger-text) !important; } } /* هيدر جدول الإضافة فيه زرار: على الشاشات الصغيرة العناوين بتتشال (لأنها ظاهرة فوق كل خانة) والزرار بيفضل */ @media screen and (max-width: 991px) { body.v-ui table.v-stack.v-has-labels-btn > thead > tr > .v-lbl-only { display: none !important; } body.v-ui table.v-stack.v-has-labels-btn > thead > tr > th, body.v-ui table.v-stack.v-has-labels-btn > thead > tr > td { grid-column: 1 / -1; } } /* ===================================================================== v13 — جداول الإضافة (غير شاشات البيع): من غير هيدر، والعنوان بيطلع على حافة الخانة لما تقف عليها أو تكون مكتوب فيها (Floating label) ===================================================================== */ @media screen and (min-width: 992px) { body.v-ui table.v-stack.v-float, body.v-ui table.v-stack.v-float > thead, body.v-ui table.v-stack.v-float > tbody, body.v-ui table.v-stack.v-float > tfoot { display: block !important; width: 100% !important; height: auto !important; } body.v-ui table.v-stack.v-float > * > tr { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); column-gap: 14px; padding: 6px 14px; box-sizing: border-box; width: 100% !important; } body.v-ui table.v-stack.v-float > * > tr > th, body.v-ui table.v-stack.v-float > * > tr > td { display: block !important; width: auto !important; min-width: 0 !important; height: auto !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; padding: 12px 0 6px !important; text-align: right !important; } body.v-ui table.v-stack.v-float.v-has-labels > thead, body.v-ui table.v-stack.v-float > thead > tr.v-label-row, body.v-ui table.v-stack.v-float.v-has-labels-btn > thead > tr > .v-lbl-only { display: none !important; } body.v-ui table.v-stack.v-float > tbody > tr + tr { border-top: 0 !important; } body.v-ui table.v-stack.v-float [data-label]:not(.v-fl)::before { content: attr(data-label); display: block; font-size: 12.5px; font-weight: 600; color: var(--v-muted); margin-bottom: 4px; } } @media screen { body.v-ui table.v-float .v-fl { position: relative; } body.v-ui table.v-float .v-fl::before { display: none !important; content: none !important; } body.v-ui table.v-float .v-fl { padding-top: 12px !important; } body.v-ui table.v-float .v-fl-label { position: absolute; top: 3px; right: 12px; z-index: 3; max-width: calc(100% - 24px); padding: 0 6px; font-size: 12px; font-weight: 700; line-height: 18px; color: var(--v-muted); background: #fff; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; opacity: 0; transform: translateY(5px); transition: opacity .12s, transform .12s, color .12s; } body.v-ui table.v-float .v-fl.is-filled .v-fl-label, body.v-ui table.v-float .v-fl:focus-within .v-fl-label { opacity: 1; transform: none; } body.v-ui table.v-float .v-fl:focus-within .v-fl-label { color: var(--v-denim); } body.v-ui table.v-float .v-fl input:focus::placeholder, body.v-ui table.v-float .v-fl textarea:focus::placeholder { color: transparent; } body.v-ui table.v-float .v-fl input[type="text"], body.v-ui table.v-float .v-fl input[type="number"], body.v-ui table.v-float .v-fl input[type="date"], body.v-ui table.v-float .v-fl input[type="password"], body.v-ui table.v-float .v-fl input[type="email"], body.v-ui table.v-float .v-fl input[type="tel"], body.v-ui table.v-float .v-fl input:not([type]), body.v-ui table.v-float .v-fl select, body.v-ui table.v-float .v-fl textarea { width: 100% !important; max-width: 100% !important; min-height: 44px; border-radius: 8px !important; box-sizing: border-box; display: block; } /* الأزرار جوه فورم الإضافة بنفس ارتفاع الخانات */ body.v-ui table.v-float input[type="submit"], body.v-ui table.v-float input[type="button"], body.v-ui table.v-float button, body.v-ui table.v-float .btn { min-height: 44px; } } @media screen { body.v-ui table.v-stack .v-nolbl::before { display: none !important; content: none !important; } } /* ===================================================================== v14 — كلام أكبر وأغمق في كل الصفحات (غير شاشات البيع) ===================================================================== */ @media screen { body.v-ui:not(.pos-screen) .content-wrapper, body.v-ui:not(.pos-screen) #myheader { color: var(--text-color); } body.v-ui:not(.pos-screen) .table:not(:where(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *) { font-size: var(--font-size); color: var(--text-color); } body.v-ui:not(.pos-screen) .table:not(:where(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *) > tbody > tr > td, body.v-ui:not(.pos-screen) .table:not(:where(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *) > tbody > tr > th, body.v-ui:not(.pos-screen) .table:not(:where(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *) > tfoot > tr > td { color: var(--text-color); font-size: var(--font-size); } body.v-ui:not(.pos-screen) .table:not(:where(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *) > thead > tr > th, body.v-ui:not(.pos-screen) .table:not(:where(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *) > thead > tr > td { font-size: calc(var(--font-size) - 1px) !important; font-weight: 800 !important; } body.v-ui:not(.pos-screen) .form-control, body.v-ui:not(.pos-screen) .table:not(:where(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *) input[type="text"], body.v-ui:not(.pos-screen) .table:not(:where(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *) input[type="number"], body.v-ui:not(.pos-screen) .table:not(:where(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *) input[type="date"], body.v-ui:not(.pos-screen) .table:not(:where(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *) select, body.v-ui:not(.pos-screen) .table:not(:where(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *) textarea { font-size: calc(var(--font-size) - .5px); color: var(--text-color); } body.v-ui:not(.pos-screen) ::placeholder { color: #7a838c; } body.v-ui:not(.pos-screen) table.v-float .v-fl-label { color: var(--label-color); font-size: 13px; } body.v-ui:not(.pos-screen) table.v-stack [data-label]::before { color: var(--label-color) !important; font-size: 13.5px !important; font-weight: 700 !important; } body.v-ui:not(.pos-screen) .content-wrapper label, body.v-ui:not(.pos-screen) .content-wrapper .title, body.v-ui:not(.pos-screen) .content-wrapper h3, body.v-ui:not(.pos-screen) .content-wrapper h4 { color: var(--text-color); } } /* ===================================================================== v15 — جداول جوه منطقة الطباعة: على الشاشة الهيدر بنفس لون الجداول الجديدة (ألوان بس — المقاسات والحدود زي ما هي، والطباعة نفسها مش بتتأثر) ===================================================================== */ @media screen { body.v-ui:not(.pos-screen) :is(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage) .table > thead > tr > th, body.v-ui:not(.pos-screen) :is(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage) .table > thead > tr > td, body.v-ui:not(.pos-screen) :is(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage) table > thead[style*="275a6f" i] > tr > th { background-color: var(--head-bg) !important; color: var(--head-text) !important; } body.v-ui:not(.pos-screen) :is(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage) .table > thead :is(span, label, a, b) { color: inherit !important; } } /* ---------- اسم المحل فوق المنيو (بدل الصورة) ---------- */ @media screen { body.v-ui .main-sidebar .user-panel .v-shop-name { display: block; padding: 14px 10px; border-radius: 10px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(217, 152, 28, .45); color: #fff; font-size: 20px; font-weight: 800; line-height: 1.35; text-align: center; white-space: normal; word-break: break-word; } body.v-ui .main-sidebar .user-panel .v-shop-name:empty { display: none; } body.v-ui .main-sidebar .user-panel .v-shop-name::after { content: ""; display: block; width: 40px; height: 3px; margin: 8px auto 0; border-radius: 2px; background: var(--menu-accent); } } /* ===================================================================== v16 — كلام الأزرار الذهبية أبيض + خط Vellora في البرنامج كله ===================================================================== */ @media screen { body.v-ui .btn-warning, body.v-ui .v-btn.v-btn-warning { color: #fff !important; } body.v-ui .btn, body.v-ui .v-btn, body.v-ui .pos-btn { text-shadow: 0 1px 1px rgba(0, 0, 0, .18); } /* نفس خط Vellora (Cairo بأوزانه الحقيقية) على كل حاجة على الشاشة — الأيقونات وخط الباركود زي ما هم */ body.v-ui *:not(.fa):not([class*="fa-"]):not(.glyphicon):not([class*="glyphicon-"]):not(.ion):not([class*="ion-"]):not([class*="lnr"]):not([class^="icon-"]):not([class*=" icon-"]):not(.sidebar-toggle):not(.navbar-toggle):not([data-toggle="push-menu"]):not(.close):not([class*="parcode"]):not([class*="barcode"]):not([style*="Barcode" i]):not([style*="Libre" i]), body.v-auth *:not(.fa):not([class*="fa-"]):not(.glyphicon) { font-family: "VCairo", "Cairo", Tahoma, sans-serif !important; } body.v-ui, body.v-auth { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body.v-ui table, body.v-ui .form-control, body.v-ui input { font-variant-numeric: tabular-nums; } } /* ===================================================================== v20 — المنيو وهي مقفولة (sidebar-collapse): القايمة اللي بتطلع لما تقف على عنصر كانت شفافة فوق الصفحة البيضا فالكلام باهت -> بقت بخلفية المنيو. واسم المحل بقى أيقونة صغيرة ===================================================================== */ @media screen { body.v-ui.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right):not(.pull-right-container) { background: var(--menu-bg) !important; color: #fff !important; font-weight: 700; border-radius: 10px 10px 0 0; padding: 11px 16px !important; width: 220px !important; box-shadow: 0 10px 24px rgba(0, 0, 0, .25); z-index: 1000; } body.v-ui.sidebar-mini.sidebar-collapse .sidebar-menu > li:not(.treeview):hover > a > span:not(.pull-right):not(.pull-right-container) { border-radius: 10px; } body.v-ui.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu { background: var(--menu-bg) !important; width: 220px !important; padding: 4px 6px 8px !important; border-radius: 0 0 10px 10px; border-top: 1px dashed rgba(217, 152, 28, .45); box-shadow: 0 14px 28px rgba(0, 0, 0, .28); z-index: 1000; } body.v-ui.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu > li > a { color: var(--menu-subtext) !important; white-space: normal; } body.v-ui.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu > li > a:hover { color: #fff !important; background: var(--menu-hover-bg) !important; } body.v-ui.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a { background: var(--menu-active-bg) !important; color: #fff !important; } /* اسم المحل وهي مقفولة: أيقونة محل صغيرة بدل الحروف اللي كانت بتنزل تحت بعض */ body.v-ui.sidebar-mini.sidebar-collapse .main-sidebar .user-panel .v-shop-name { font-size: 0 !important; padding: 8px 0 !important; margin: 0 auto; width: 36px; line-height: 1; background: var(--menu-accent); border: 0; border-radius: 9px; } body.v-ui.sidebar-mini.sidebar-collapse .main-sidebar .user-panel .v-shop-name::before { content: "\f290"; font-family: FontAwesome !important; font-size: 18px; font-weight: normal; color: #fff; display: block; } body.v-ui.sidebar-mini.sidebar-collapse .main-sidebar .user-panel .v-shop-name::after { display: none; } body.v-ui.sidebar-mini.sidebar-collapse .main-sidebar .user-panel { padding: 10px 7px !important; } } /* ===================================================================== v21 — جداول الإجماليات بقت كروت + إخفاء العناوين الملونة + شكل كشوف الحساب (كله على الشاشة بس - الطباعة زي ما هي) ===================================================================== */ @media screen { /* ---- v27: الإجماليات كروت صغيرة بارزة (زي كشوف حسابات العملاء) في كل الصفحات ---- */ body.v-ui table.v-sum { display: flex !important; flex-wrap: wrap; gap: 10px; width: 100% !important; margin: 0 0 12px !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; overflow: visible !important; box-shadow: none !important; } body.v-ui table.v-sum > :is(thead, tbody, tfoot), body.v-ui table.v-sum > :is(thead, tbody, tfoot) > tr { display: contents !important; } body.v-ui table.v-sum tr.v-sum-lbl, body.v-ui table.v-sum > :is(thead, tbody, tfoot) > tr:not(.v-sum-row) { display: none !important; } body.v-ui table.v-sum tr.v-sum-row.v-sum-row > :is(td, th) { display: block !important; flex: 1 1 140px; min-width: 0; margin: 0 !important; padding: 9px 14px !important; background: #fff !important; border: 1px solid #e3e7ed !important; border-right: 3px solid var(--v-thread) !important; border-radius: 10px !important; box-shadow: 0 3px 10px rgba(24, 45, 75, .08) !important; color: var(--v-ink) !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.3; text-align: right !important; font-variant-numeric: tabular-nums; word-break: break-word; text-shadow: none !important; } body.v-ui table.v-sum tr.v-sum-row.v-sum-row > :is(td, th)::before { content: attr(data-sum-label); display: block; margin-bottom: 2px; font-size: 12px; font-weight: 500; color: var(--v-muted); line-height: 1.4; } body.v-ui table.v-sum tr.v-sum-row.v-sum-row > :is(td, th) :is(span, b, label, font, div, strong) { font-size: inherit !important; font-weight: inherit !important; color: inherit !important; background: none !important; text-shadow: none !important; } body.v-ui table.v-sum tr.v-sum-row.v-sum-row > :is(td, th).v-sum-ctrl { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px !important; font-weight: 600 !important; background: var(--v-surface-2, #f7f8f5) !important; } body.v-ui table.v-sum tr.v-sum-row.v-sum-row > :is(td, th).v-sum-ctrl::before { flex-basis: 100%; margin: 0; } body.v-ui table.v-sum tr.v-sum-row.v-sum-row > :is(td, th).v-sum-ctrl .form-control { flex: 1 1 70px; width: auto !important; height: 34px !important; min-width: 0; } body.v-ui table.v-sum tr.v-sum-row.v-sum-row > :is(td, th).v-sum-ctrl .btn { margin: 0 !important; padding: 5px 14px !important; } @media (max-width: 575px) { body.v-ui table.v-sum { gap: 8px; } body.v-ui table.v-sum tr.v-sum-row.v-sum-row > :is(td, th) { flex-basis: calc(50% - 4px); padding: 8px 12px !important; font-size: 15px !important; } } /* الكروت جوه table-responsive: مفيش سكرول أفقي */ body.v-ui .table-responsive:has(> table.v-sum) { overflow: visible !important; border: 0 !important; } /* ---- العناوين الملونة اللي مش لينك ---- */ body.v-ui .v-hide-title { display: none !important; } /* ---- كشوف حساب العملاء والموردين: شكل Vellora ---- */ body.v-ui .v-acc { background: #fff; border: 1px solid var(--v-line); border-radius: 14px; padding: 16px !important; margin-top: 12px; } body.v-ui .v-acc .col-xs-4[style*="border"] { border: 0 !important; background: var(--v-surface-2, #f7f8f5); border-radius: 12px; padding: 10px 12px !important; } body.v-ui .v-acc :is(h3, h4, h5) { text-shadow: none !important; } body.v-ui .v-acc table.table:not(.v-sum) { border: 1px solid var(--v-line) !important; border-collapse: separate !important; border-spacing: 0; border-radius: 12px; overflow: hidden; background: #fff !important; margin-top: 4px; } body.v-ui .v-acc table.table:not(.v-sum) > thead > tr { background: none !important; border: 0 !important; } body.v-ui .v-acc table.table:not(.v-sum) > thead > tr > th { background: var(--v-surface-2, #f7f8f5) !important; color: var(--v-muted) !important; border: 0 !important; border-bottom: 2px solid #c3cad3 !important; font-size: 13px !important; font-weight: 600 !important; padding: 11px 10px !important; white-space: nowrap; } body.v-ui .v-acc table.table:not(.v-sum) > thead > tr > th * { color: inherit !important; font-size: inherit !important; } body.v-ui .v-acc table.table:not(.v-sum) > tbody > tr > td { background: #fff !important; border: 0 !important; border-bottom: 1px solid #e6e9ee !important; padding: 10px !important; font-size: 14px; color: var(--v-ink) !important; vertical-align: middle !important; } /* سطر الفاتورة */ body.v-ui .v-acc table.table:not(.v-sum) > tbody > tr[style*="silver" i] > td { background: var(--v-denim-soft, #eef2f7) !important; font-weight: 700; font-size: 15px !important; border-top: 2px solid #c9d3e1 !important; } /* سطر عناوين أصناف الفاتورة */ body.v-ui .v-acc table.table:not(.v-sum) > tbody > tr[style*="silver" i] + tr > td { background: #fafbf9 !important; color: var(--v-muted) !important; font-size: 12.5px !important; font-weight: 600; } body.v-ui .v-acc table.table:not(.v-sum) > tbody > tr:hover > td { background-color: #f5f7fa !important; } } /* ---- v21: مركز التقارير أزرار ---- */ @media screen { body.v-ui table.v-rc.table { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; width: 100% !important; background: transparent !important; border: 0 !important; box-shadow: none !important; margin: 0 !important; } body.v-ui table.v-rc.table > thead, body.v-ui table.v-rc.table > tbody, body.v-ui table.v-rc.table > * > tr { display: contents !important; } body.v-ui table.v-rc.table > * > tr > th, body.v-ui table.v-rc.table > * > tr > td { display: block !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; text-align: right !important; } body.v-ui table.v-rc.table > * > tr > th:not(:has(a)), body.v-ui table.v-rc.table > * > tr > td:not(:has(a)) { display: none !important; } body.v-ui table.v-rc.table th > a { display: flex !important; align-items: center; gap: 12px; min-height: 62px; height: 100%; padding: 12px 14px; background: #fff; border: 1px solid var(--v-line); border-radius: 12px; color: var(--v-ink) !important; font-size: 15px; font-weight: 700; line-height: 1.4; text-decoration: none !important; text-align: right !important; transition: border-color .12s, box-shadow .12s; } body.v-ui table.v-rc.table th > a:hover { border-color: var(--v-thread); box-shadow: 0 4px 14px rgba(24, 45, 75, .08); color: var(--v-denim) !important; } body.v-ui table.v-rc.table th > a .v-rc-ic { flex: 0 0 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(35, 64, 106, .08); color: var(--v-denim) !important; font-size: 17px; } body.v-ui table.v-rc.table th > a:hover .v-rc-ic { background: var(--v-thread); color: #fff !important; } body.v-ui table.v-rc.table th > a .v-rc-ic .fa { color: inherit !important; } body.v-ui table.v-rc.table th > a .v-rc-go { margin-right: auto; color: #b3bccb !important; font-size: 18px; } @media (max-width: 575px) { body.v-ui table.v-rc.table { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } body.v-ui table.v-rc.table th > a { flex-direction: column; text-align: center !important; justify-content: center; gap: 8px; font-size: 13.5px; padding: 12px 8px; } body.v-ui table.v-rc.table th > a .v-rc-go { display: none; } } } /* ===================================================================== v22 — شريط الإجماليات وكشوف الحساب في الطباعة كمان بالشكل الجديد ===================================================================== */ @media print { /* v27: الإجماليات كروت صغيرة منفصلة في الطباعة كمان */ body.v-ui table.v-sum { display: flex !important; flex-wrap: wrap; gap: 6px; width: 100% !important; margin: 0 0 8px !important; background: none !important; border: 0 !important; border-radius: 0 !important; overflow: visible !important; page-break-inside: avoid; break-inside: avoid; } body.v-ui table.v-sum > :is(thead, tbody, tfoot), body.v-ui table.v-sum > :is(thead, tbody, tfoot) > tr { display: contents !important; } body.v-ui table.v-sum tr.v-sum-lbl, body.v-ui table.v-sum > :is(thead, tbody, tfoot) > tr:not(.v-sum-row) { display: none !important; } body.v-ui table.v-sum tr.v-sum-row.v-sum-row > :is(td, th) { display: block !important; flex: 1 1 110px; min-width: 0; margin: 0 !important; padding: 4px 9px !important; border: 1px solid #bbb !important; border-right: 3px solid #d9981c !important; border-radius: 6px !important; background: #fff !important; box-shadow: none !important; color: #000 !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.3; text-align: right !important; text-shadow: none !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } body.v-ui table.v-sum tr.v-sum-row.v-sum-row > :is(td, th)::before { content: attr(data-sum-label); display: block; font-size: 11px; font-weight: 600; color: #444 !important; } body.v-ui table.v-sum tr.v-sum-row.v-sum-row > :is(td, th) :is(span, b, label, font, div, strong) { font-size: inherit !important; color: inherit !important; background: none !important; text-shadow: none !important; } body.v-ui table.v-sum tr.v-sum-row.v-sum-row > :is(td, th).v-sum-ctrl { display: none !important; } /* جدول كشف الحساب */ body.v-ui table.v-acc-t { border-collapse: collapse !important; border: 1px solid #999 !important; } body.v-ui table.v-acc-t > thead > tr { border: 0 !important; background: none !important; } body.v-ui table.v-acc-t > thead > tr > th { background: #f0f1ee !important; color: #333 !important; border: 0 !important; border-bottom: 1.5px solid #888 !important; font-weight: 700 !important; } body.v-ui table.v-acc-t > thead > tr > th * { color: inherit !important; } body.v-ui table.v-acc-t > tbody > tr > td { border: 0 !important; border-bottom: 1px solid #ddd !important; } body.v-ui table.v-acc-t > tbody > tr[style*="silver" i] > td { background: #eceef2 !important; font-weight: 700 !important; border-top: 1.5px solid #999 !important; } body.v-ui table.v-acc-t > tbody > tr[style*="silver" i] + tr > td { color: #555 !important; font-size: 12px !important; } } /* ---- v22: المنيو: عناصر عليها لون قديم مكتوب جوه الصفحة + خيارات البيع بالجملة والخصم ---- */ @media screen { body.v-ui .sidebar-menu :where(li:not(.active):not(.menu-open)) > a[style*="background"]:not(:hover) { background-color: transparent !important; background-image: none !important; } body.v-ui .sidebar-menu .treeview-menu > li.header { background: transparent !important; color: var(--menu-subtext) !important; font-weight: 500 !important; font-size: 13.5px !important; text-align: right !important; padding: 4px 0 4px !important; white-space: normal; } body.v-ui .sidebar-menu .treeview-menu > li.header > br { display: none; } body.v-ui .sidebar-menu .treeview-menu > li.header > span { display: flex !important; align-items: center; gap: 8px; margin: 1px 0; padding: 6px 12px; border-radius: 8px; cursor: pointer; color: var(--menu-subtext) !important; direction: rtl; justify-content: flex-start; text-align: right; width: 100%; } body.v-ui .sidebar-menu .treeview-menu > li.header > span:hover { background: var(--menu-hover-bg) !important; color: #fff !important; } body.v-ui .sidebar-menu .treeview-menu > li.header > span > input[type="checkbox"] { width: 16px; height: 16px; margin: 0; flex: 0 0 auto; accent-color: var(--menu-accent); cursor: pointer; } body.v-ui .sidebar-menu .treeview-menu > li.header > span > label { margin: 0 !important; font-weight: 500 !important; font-size: 13.5px !important; color: inherit !important; cursor: pointer; white-space: normal; } body.v-ui .sidebar-menu .treeview-menu > li.header > span:has(input:checked) { color: #fff !important; } } /* ===================================================================== v23 — سكرول الجداول + زرار مركز التقارير + خانات الكتابة الكبيرة + كروت كشف الحساب ===================================================================== */ @media screen { body.v-ui .v-noscroll { overflow: visible !important; } body.v-ui .v-rc-backwrap { float: none !important; display: block; text-align: left !important; direction: ltr; margin: 0 0 10px !important; } body.v-ui .content-wrapper .v-rc-back { width: auto !important; margin: 0 !important; padding: 6px 14px !important; background: #fff !important; border: 1px solid var(--v-line) !important; border-radius: 999px !important; box-shadow: none !important; color: var(--v-denim) !important; font-size: 13.5px !important; font-weight: 700 !important; text-shadow: none !important; } body.v-ui .content-wrapper .v-rc-back::before { content: "\f104"; font-family: FontAwesome !important; margin-right: 8px; font-weight: normal; } body.v-ui .content-wrapper .v-rc-back:hover { border-color: var(--v-thread) !important; color: var(--v-thread) !important; } /* خانات الكتابة الكبيرة (رقم الطلب، ملحوظة...) */ body.v-ui:not(.pos-screen) .content-wrapper textarea.form-control, body.v-ui:not(.pos-screen) .content-wrapper td > textarea { width: 100% !important; max-width: 100%; min-height: 44px; padding: 8px 12px !important; border: 1px solid var(--v-input, #c9ced6) !important; border-radius: 8px !important; box-shadow: none !important; background: #fff !important; font-size: 15px !important; font-weight: 500 !important; line-height: 1.6; text-align: right !important; resize: vertical; } body.v-ui:not(.pos-screen) .content-wrapper textarea.form-control:focus { border-color: var(--v-denim) !important; box-shadow: 0 0 0 3px rgba(35, 64, 106, .12) !important; outline: 0; } } /* ===================================================================== v24 — حدود الجداول التقيلة في التقارير (على الشاشة بس) + صورة الصفحة الرئيسية على الموبايل ===================================================================== */ @media screen { body.v-ui:not(.pos-screen) :is(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage) table.table:not(.v-sum) { border: 1px solid var(--v-line) !important; border-collapse: collapse !important; } body.v-ui:not(.pos-screen) :is(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage) table.table:not(.v-sum) > * > tr { border: 0 !important; } body.v-ui:not(.pos-screen) :is(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage) table.table:not(.v-sum) > * > tr > :is(th, td) { border: 1px solid #e3e7ed !important; } body.v-ui:not(.pos-screen) :is(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage) table.table:not(.v-sum) > thead > tr > th { border-bottom: 2px solid #c3cad3 !important; } body.v-ui :is(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage) :is(h1, h2, h3, h4) { text-shadow: none !important; } /* صورة الصفحات الرئيسية (الشعار) تبقى على قد الشاشة */ body.v-ui img[id$="ResturantImage"] { max-width: 100% !important; width: 600px; height: auto !important; object-fit: contain; } @media (max-width: 767px) { body.v-ui img[id$="ResturantImage"] { width: 100% !important; max-width: 340px !important; margin-top: 16px; } body.v-ui div:has(> img[id$="ResturantImage"]) ~ footer { margin-top: 30px !important; } body.v-ui div:has(> img[id$="ResturantImage"]) { overflow: visible !important; } } } /* ===================================================================== v25 — سطور الإجمالي الغامقة بقت فاتحة + جداول التقارير في الطباعة بنفس شكل الشاشة ===================================================================== */ @media screen { body.v-ui table tr.v-total-row > :is(td, th) { background: var(--v-denim-soft, #eef2f7) !important; color: var(--v-ink) !important; font-weight: 700 !important; border-top: 2px solid var(--v-denim) !important; } body.v-ui table tr.v-total-row > :is(td, th) * { color: inherit !important; background: none !important; } } @media print { body.v-ui table.v-rpt-t { border-collapse: collapse !important; border: 1px solid #aaa !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } body.v-ui table.v-rpt-t > * > tr { border: 0 !important; } body.v-ui table.v-rpt-t > * > tr > :is(th, td) { border: 1px solid #ccc !important; } body.v-ui table.v-rpt-t > thead > tr > :is(th, td) { background: #f0f1ee !important; color: #222 !important; border-bottom: 1.5px solid #888 !important; } body.v-ui table.v-rpt-t > thead * { color: inherit !important; } body.v-ui table tr.v-total-row > :is(td, th) { background: #eceef2 !important; color: #000 !important; font-weight: 700 !important; border-top: 1.5px solid #555 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } body.v-ui table tr.v-total-row > :is(td, th) * { color: inherit !important; } body.v-ui :is(h1, h2, h3, h4, h5) { text-shadow: none !important; } } /* ===================================================================== v28 — خط الطباعة = خط الصفحة + لون التحديد + أيقونات التعديل/الحذف + الوضع الليلي (Dark mode) ===================================================================== */ /* ---- "Cairo" بكل الأوزان من نفس ملفات VCairo: أي صفحة أو طباعة مكتوب فيها Cairo تاخد الخط الحقيقي (مش العريض الصناعي) ---- */ @font-face { font-family: "Cairo"; font-weight: 400; font-display: block; src: url("/dist/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: block; src: url("/dist/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: block; src: url("/dist/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: block; src: url("/dist/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: block; src: url("/dist/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: block; src: url("/dist/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: block; src: url("/dist/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: block; src: url("/dist/fonts/cairo/cairo-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; } /* ---- الطباعة: نفس خط الشاشة بالظبط (نفس القواعد اللي على الشاشة) — المقاسات والأحجام زي ما هي ---- */ @media print { body.v-ui { font-family: "VCairo", "Cairo", Tahoma, sans-serif !important; } body.v-ui form, body.v-ui .wrapper, body.v-ui .content-wrapper, body.v-ui .modal { font-family: "VCairo", "Cairo", Tahoma, sans-serif; } body.v-ui input, body.v-ui select, body.v-ui textarea, body.v-ui button, body.v-ui .btn, body.v-ui h1, body.v-ui h2, body.v-ui h3, body.v-ui h4, body.v-ui h5, body.v-ui h6, body.v-ui label { font-family: "VCairo", "Cairo", Tahoma, sans-serif !important; } /* زرار الوضع الليلي (القمر) والكروت المساعدة عمرها ما تطلع في الورق */ .v-theme-toggle, .v-theme-float { display: none !important; } } /* ---- الباركود (SVG) ---- */ .v-bc { display: block !important; margin: 0 auto !important; padding: 0 !important; font-size: 0 !important; line-height: 0 !important; text-align: center !important; background: #fff; } .v-bc > svg { display: block; margin: 0 auto; max-width: 100%; shape-rendering: crispEdges; background: #fff; } @media print { .v-bc, .v-bc > svg { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } .v-bc > svg rect, .v-bc > svg g { fill: #000; } .v-bc > svg > rect:first-child { fill: #fff; } } /* ---- لون التحديد: واضح جدا عشان تعرف انت محدد ايه ---- */ @media screen { ::selection { background: #1f6feb !important; color: #ffffff !important; } body.v-ui ::selection { background: #1f6feb !important; color: #ffffff !important; } html[data-theme="dark"] body.v-ui ::selection { background: #f5b83d !important; color: #111111 !important; } } /* ---- أيقونات التعديل / الحذف / العرض (بدل الصور) ---- */ .v-ico { display: inline-flex !important; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; font-size: 15px !important; line-height: 1 !important; vertical-align: middle; transition: background-color .15s, color .15s, transform .1s; } .v-ico-del { color: #c0392b !important; background: rgba(192, 57, 43, .10); } .v-ico-edit { color: #1f5fbf !important; background: rgba(31, 95, 191, .10); } .v-ico-view { color: #1e7a52 !important; background: rgba(30, 122, 82, .10); } .v-ico-back { color: #b06d00 !important; background: rgba(217, 152, 28, .14); } a:hover > .v-ico-del, .v-ico-del:hover { color: #fff !important; background: #c0392b; } a:hover > .v-ico-edit, .v-ico-edit:hover { color: #fff !important; background: #1f5fbf; } a:hover > .v-ico-view, .v-ico-view:hover { color: #fff !important; background: #1e7a52; } a:hover > .v-ico-back, .v-ico-back:hover { color: #fff !important; background: #d9981c; } a:active > .v-ico { transform: scale(.94); } @media print { .v-ico { background: none !important; color: #000 !important; } } /* ---- زرار الوضع الليلي ---- */ @media screen { .v-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin: 6px 10px; padding: 0; float: left; 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: 18px; line-height: 1; cursor: pointer; box-shadow: none !important; transition: background-color .15s, color .15s, border-color .15s; } .v-theme-toggle:hover { border-color: var(--v-thread, #d9981c) !important; color: var(--v-thread, #d9981c) !important; } .v-theme-toggle .fa, body.v-ui .main-header .v-theme-toggle .fa { font-size: 18px; line-height: 1; color: inherit !important; -webkit-text-fill-color: currentColor; } .v-theme-toggle.v-theme-float { position: fixed; left: 14px; bottom: 14px; z-index: 1035; float: none; margin: 0; box-shadow: 0 6px 18px rgba(0, 0, 0, .18) !important; } html[data-theme="dark"] .v-theme-toggle { color: #f5c46b !important; } } /* ===================================================================== الوضع الليلي — على الشاشة بس (الطباعة دايما ورق أبيض بالألوان الأصلية) ===================================================================== */ @media screen { html[data-theme="dark"] body.v-ui { /* لوحة الألوان */ --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; --text-color: #eef2f7; --label-color: #c9d3df; --btn-bg: #d9981c; --btn-text: #ffffff; --btn-hover: #e6a93a; --btn-danger-bg: #c2414c; --btn-danger-text: #ffffff; --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: #4f7fc2; --v-denim-deep: #0d1625; --v-denim-soft: #1f3150; --v-thread: #e0a53a; --v-thread-soft: #3a2f19; --v-pos: #3fb27f; --v-pos-soft: #14352a; --v-neg: #ec7983; --v-neg-soft: #3d1d23; --v-hover: #202e44; color: var(--v-ink); background-color: var(--v-bg) !important; } html.v-dark-root { color-scheme: dark; background-color: #0f1622; } html[data-theme="dark"] body.v-ui.pos-screen { --p-bg: #0f1622; --p-surface: #172131; --p-surface-2: #1c2738; --p-ink: #eef2f7; --p-muted: #b3bfcd; --p-faint: #8995a6; --p-line: #2b3b52; --p-line-strong: #3b4f6a; --p-row-line: #26354a; --p-input: #3e536f; --p-denim: #4f7fc2; --p-denim-deep: #0d1625; --p-denim-soft: #1f3150; --p-thread: #e0a53a; --p-thread-soft: #3a2f19; --p-pos: #3fb27f; --p-pos-soft: #14352a; --p-neg: #ec7983; --p-neg-soft: #3d1d23; --p-hover: #202e44; } html[data-theme="dark"] body.v-ui .st { --st-denim: #8fb6ec; --st-deep: #0d1625; --st-gold: #e0a53a; --st-line: #2b3b52; --st-soft: #1c2738; --st-ink: #eef2f7; --st-muted: #b3bfcd; --st-pos: #4cc38a; --st-neg: #ff8a94; } html[data-theme="dark"] body.v-ui .st-card:not(.st-hero) { background: var(--v-surface) !important; } html[data-theme="dark"] body.v-ui .st-refresh { background: var(--v-surface-2) !important; } html[data-theme="dark"] body.v-ui .st .st-ic { background: rgba(143, 182, 236, .14); } html[data-theme="dark"] body.v-ui .st .st-ic .fa { color: #8fb6ec !important; } /* ---- الحاويات ---- */ html[data-theme="dark"] body.v-ui .wrapper, html[data-theme="dark"] body.v-ui .content-wrapper, html[data-theme="dark"] body.v-ui .content-wrapper > .content-header, html[data-theme="dark"] body.v-ui #myheader, html[data-theme="dark"] body.v-ui .main-footer { background-color: var(--v-bg) !important; color: var(--v-ink); } html[data-theme="dark"] body.v-ui .modal-content, html[data-theme="dark"] body.v-ui .modal-body, html[data-theme="dark"] body.v-ui .modal-footer, html[data-theme="dark"] body.v-ui .dropdown-menu, html[data-theme="dark"] body.v-ui .popover, html[data-theme="dark"] body.v-ui .well, html[data-theme="dark"] body.v-ui .list-group-item, html[data-theme="dark"] body.v-ui .panel-body, html[data-theme="dark"] body.v-ui .box-body, html[data-theme="dark"] body.v-ui .card:not(.menu-card) > .card-body, html[data-theme="dark"] body.v-ui .ui-widget-content, html[data-theme="dark"] body.v-ui .ui-datepicker { background-color: var(--v-surface) !important; color: var(--v-ink) !important; border-color: var(--v-line) !important; } html[data-theme="dark"] body.v-ui .panel-heading, html[data-theme="dark"] body.v-ui .box-header, html[data-theme="dark"] body.v-ui .card .header, html[data-theme="dark"] body.v-ui .ui-widget-header, html[data-theme="dark"] body.v-ui .nav-tabs > li.active > a, html[data-theme="dark"] body.v-ui .breadcrumb { background-color: var(--v-surface-2) !important; color: var(--v-ink) !important; border-color: var(--v-line) !important; } html[data-theme="dark"] body.v-ui .dropdown-menu > li > a { color: var(--v-ink) !important; } html[data-theme="dark"] body.v-ui .dropdown-menu > li > a:hover { background: var(--v-hover) !important; } html[data-theme="dark"] body.v-ui hr { border-color: var(--v-line) !important; } html[data-theme="dark"] body.v-ui .modal-backdrop.in { opacity: .65; background: #000; } html[data-theme="dark"] body.v-ui .close { color: var(--v-ink); text-shadow: none; opacity: .8; } /* ---- الكلام (برة صفحات الطباعة) ---- */ html[data-theme="dark"] body.v-ui :is(h1, h2, h3, h4, h5, h6, label, legend):not(:where(.v-paper :is(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *)) { color: var(--v-ink); } html[data-theme="dark"] body.v-ui :is(.text-muted, .help-block):not(:where(.v-paper :is(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *)) { color: var(--v-muted); } html[data-theme="dark"] body.v-ui a:not(.btn):not([class*="pos-"]):not(.v-theme-toggle):not(.st-shift-pill):not(:where(.v-paper :is(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *)) { color: #8fb6ec; } html[data-theme="dark"] body.v-ui a:not(.btn):not([class*="pos-"]):not(.v-theme-toggle):not(.st-shift-pill):not(:where(.v-paper :is(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *)):hover { color: #b9d3f5; } html[data-theme="dark"] body.v-ui .text-danger:not(:where(.v-paper :is(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *)) { color: #ff8a94 !important; } html[data-theme="dark"] body.v-ui .text-success:not(:where(.v-paper :is(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *)) { color: #5fd39b !important; } html[data-theme="dark"] body.v-ui :is(.text-primary, .text-info):not(:where(.v-paper :is(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *)) { color: #8fb6ec !important; } html[data-theme="dark"] body.v-ui .text-warning:not(:where(.v-paper :is(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *)) { color: #f5c46b !important; } /* ---- الخانات ---- */ html[data-theme="dark"] body.v-ui .form-control, html[data-theme="dark"] body.v-ui input[type="text"], html[data-theme="dark"] body.v-ui input[type="number"], html[data-theme="dark"] body.v-ui input[type="date"], html[data-theme="dark"] body.v-ui input[type="datetime-local"], html[data-theme="dark"] body.v-ui input[type="time"], html[data-theme="dark"] body.v-ui input[type="month"], html[data-theme="dark"] body.v-ui input[type="password"], html[data-theme="dark"] body.v-ui input[type="email"], html[data-theme="dark"] body.v-ui input[type="tel"], html[data-theme="dark"] body.v-ui input[type="search"], html[data-theme="dark"] body.v-ui input:not([type]), html[data-theme="dark"] body.v-ui select, html[data-theme="dark"] body.v-ui textarea { background-color: var(--v-surface-2) !important; color: var(--v-ink) !important; border-color: var(--v-input) !important; } html[data-theme="dark"] body.v-ui select option, html[data-theme="dark"] body.v-ui select optgroup { background-color: #1c2738; color: #eef2f7; } html[data-theme="dark"] body.v-ui .form-control[disabled], html[data-theme="dark"] body.v-ui .form-control[readonly], html[data-theme="dark"] body.v-ui input[disabled], html[data-theme="dark"] body.v-ui input[readonly], html[data-theme="dark"] body.v-ui select[disabled], html[data-theme="dark"] body.v-ui textarea[readonly] { background-color: #131c2a !important; color: #d5dde8 !important; -webkit-text-fill-color: #d5dde8; } html[data-theme="dark"] body.v-ui ::placeholder { color: #8391a3 !important; opacity: 1; } html[data-theme="dark"] body.v-ui input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #1c2738 inset !important; -webkit-text-fill-color: #eef2f7 !important; } html[data-theme="dark"] body.v-ui .form-control:focus, html[data-theme="dark"] body.v-ui table input:focus, html[data-theme="dark"] body.v-ui table select:focus { border-color: #8fb6ec !important; box-shadow: 0 0 0 3px rgba(143, 182, 236, .2) !important; } html[data-theme="dark"] body.v-ui input[type="checkbox"], html[data-theme="dark"] body.v-ui input[type="radio"] { accent-color: #e0a53a; } html[data-theme="dark"] body.v-ui .input-group-addon { background: var(--v-surface-2) !important; color: var(--v-ink) !important; border-color: var(--v-input) !important; } /* ---- الأزرار والترقيم ---- */ html[data-theme="dark"] body.v-ui .btn-default { background-color: var(--v-surface-2) !important; color: #cfe0f7 !important; border-color: var(--v-line-strong) !important; } html[data-theme="dark"] body.v-ui .btn-info { background-color: var(--v-denim-soft) !important; color: #cfe0f7 !important; border-color: var(--v-line-strong) !important; } html[data-theme="dark"] body.v-ui .pagination > li > a, html[data-theme="dark"] body.v-ui .pagination > li > span { background-color: var(--v-surface) !important; color: #b9d3f5 !important; border-color: var(--v-line) !important; } html[data-theme="dark"] body.v-ui .pagination > .active > a, html[data-theme="dark"] body.v-ui .pagination > .active > span, html[data-theme="dark"] body.v-ui .pagination > li > a:hover { background-color: var(--v-denim) !important; color: #fff !important; } html[data-theme="dark"] body.v-ui .alert-warning, html[data-theme="dark"] body.v-ui .alert-info { color: #f5c46b !important; } html[data-theme="dark"] body.v-ui .label-default, html[data-theme="dark"] body.v-ui .badge { background-color: #3b4f6a; color: #fff; } /* ---- الجداول (برة صفحات الطباعة) ---- */ html[data-theme="dark"] body.v-ui :is(table, thead, tbody, tfoot, tr, td, th):not(:where(.v-paper :is(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *)) { border-color: var(--v-line-strong) !important; } html[data-theme="dark"] body.v-ui .table-striped > tbody > tr:nth-of-type(odd):not(:where(.v-paper :is(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *)) { background-color: transparent; } html[data-theme="dark"] body.v-ui .table:not(:where(.v-paper :is(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *)) > thead[style*="e46f00" i] > tr > :is(th, td) { color: #f5c46b !important; border-bottom-color: #6b5320 !important; } html[data-theme="dark"] body.v-ui table tr.v-total-row > :is(td, th) { background: #22385a !important; color: #fff !important; border-top-color: #8fb6ec !important; } html[data-theme="dark"] body.v-ui table.v-sum tr.v-sum-row > :is(td, th) { background: var(--v-surface) !important; color: var(--v-ink) !important; border-color: var(--v-line) !important; } html[data-theme="dark"] body.v-ui table.v-sum tr.v-sum-row > :is(td, th)::before { color: var(--v-muted) !important; } html[data-theme="dark"] body.v-ui .v-acc table.table > tbody > tr > td { background: var(--v-surface) !important; color: var(--v-ink) !important; } html[data-theme="dark"] body.v-ui .v-acc table.table > tbody > tr:hover > td { background: var(--v-hover) !important; } html[data-theme="dark"] body.v-ui table.v-rc.table th > a { background: var(--v-surface) !important; color: var(--v-ink) !important; border-color: var(--v-line) !important; } /* ---- أيقونات التعديل والحذف في الليلي ---- */ html[data-theme="dark"] .v-ico-del:not(:where(.v-paper :is(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *)) { color: #ff8a94 !important; background: rgba(255, 138, 148, .14); } html[data-theme="dark"] .v-ico-edit:not(:where(.v-paper :is(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *)) { color: #8fb6ec !important; background: rgba(143, 182, 236, .14); } html[data-theme="dark"] .v-ico-view:not(:where(.v-paper :is(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *)) { color: #5fd39b !important; background: rgba(95, 211, 155, .14); } html[data-theme="dark"] .v-ico-back:not(:where(.v-paper :is(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) *)) { color: #f5c46b !important; background: rgba(245, 196, 107, .14); } /* ---- صفحات الإيصالات/الفواتير/الباركود (v-paper) على الشاشة: تفضل ورقة بيضا بألوانها الأصلية زي ما هتطلع بالظبط. صفحات التقارير العادية بتبقى ليلي زي باقي البرنامج (والطباعة بترجع أبيض لوحدها) ---- */ html[data-theme="dark"] body.v-ui.v-paper :is(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) { --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-soft: #fbf1dc; --v-pos: #1e7a52; --v-pos-soft: #e3f2ea; --v-neg: #b0323d; --v-neg-soft: #f8e4e6; --v-hover: #fbf8ef; --head-bg: #f7f8f5; --head-text: #1a1a1a; --head-line: #c3cad3; --text-color: #111111; --label-color: #2b2b2b; color-scheme: light; background-color: #ffffff !important; color: #1b2631; border-color: #c3cad3 !important; } html[data-theme="dark"] body.v-ui.v-paper :is(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) :is(input, select, textarea) { background-color: #fff !important; color: #1b2631 !important; -webkit-text-fill-color: #1b2631; } html[data-theme="dark"] body.v-ui.v-paper :is(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage, #AllsmallProdSerialDiv, #AllProdSerialDiv) a:not(.btn) { color: #23406a; } } @media screen { body.v-ui .main-header a.v-theme-toggle { color: var(--v-denim) !important; } html[data-theme="dark"] body.v-ui .main-header a.v-theme-toggle, html[data-theme="dark"] body.v-ui a.v-theme-toggle { color: #f5c46b !important; } body.v-ui .pos-topbar-end .v-theme-toggle { float: none; margin: 0 6px; } } @media screen { /* حدود جداول التقارير في الليلي (هادية مش بيضا) */ html[data-theme="dark"] body.v-ui:not(.pos-screen):not(.v-paper) :is(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage) table.table:not(.v-sum) { border-color: var(--v-line-strong) !important; } html[data-theme="dark"] body.v-ui:not(.pos-screen):not(.v-paper) :is(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage) table.table:not(.v-sum) > * > tr > :is(th, td) { border-color: var(--v-line-strong) !important; } html[data-theme="dark"] body.v-ui:not(.pos-screen):not(.v-paper) :is(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage) table.table:not(.v-sum) > thead > tr > th { border-bottom-color: #4d6383 !important; } html[data-theme="dark"] body.v-ui:not(.v-paper) :is(#divReportpage, #divReportpage2, #myPrintedDiv, #dvReport, #divprintpage, #divpage) { border-color: var(--v-line) !important; box-shadow: none !important; } html[data-theme="dark"] body.v-ui table.v-sum tr.v-sum-row.v-sum-row > :is(td, th) { background: var(--v-surface) !important; color: var(--v-ink) !important; border-color: var(--v-line) !important; } } @media screen { /* صور الأيقونات السودا (زي +) تبان على الخلفية الغامقة */ html[data-theme="dark"] body.v-ui :is(img, input[type="image"])[src*="plus.png" i] { filter: invert(1) brightness(1.2); } } @media screen { /* صفحات الموبايل: الزرار فوق في الشريط بدل ما يغطي المنيو اللي تحت */ body.v-ui.v-mobile .v-theme-toggle.v-theme-float { top: 10px; bottom: auto; left: 10px; position: absolute; box-shadow: none !important; } } /* ===================================================================== v28 — شاشات البيع في الوضع الليلي: نفس ألوان باقي البرنامج بالظبط (هيدر الجداول، الكروت، الخانات، والأزرار الدهبي) — من غير ألوان فاقعة على الشاشة بس — الطباعة زي ما هي ===================================================================== */ @media screen { /* هيدر كل الجداول = نفس هيدر الجداول في الليلي */ html[data-theme="dark"] body.pos-screen .pos-picker.pos-picker.pos-picker > thead > tr > th, html[data-theme="dark"] body.pos-screen .pos-search.pos-search.pos-search > thead > tr > th, html[data-theme="dark"] body.pos-screen .pos-totals.pos-totals.pos-totals > thead > tr > th, html[data-theme="dark"] body.pos-screen .content-wrapper .table > thead[style*="23406a" i] > tr > th, html[data-theme="dark"] body.pos-screen .content-wrapper .table > thead[style*="275a6f" i] > tr > th, html[data-theme="dark"] body.pos-screen .modal-body .table > thead[style*="23406a" i] > tr > th, html[data-theme="dark"] body.pos-screen .modal-body .table > thead[style*="275a6f" i] > tr > th { background-color: var(--head-bg) !important; color: var(--v-muted) !important; border-left-color: var(--v-line) !important; border-bottom: 1px solid var(--v-line-strong) !important; } /* ملخص الفاتورة: كله نفس لون الكروت، والمهم بيتميز بلون الرقم بس */ html[data-theme="dark"] body.pos-screen .pos-totals.pos-totals.pos-totals > thead > tr > th.pos-due-head, html[data-theme="dark"] body.pos-screen .pos-totals.pos-totals.pos-totals > thead > tr > th.pos-rest-head, html[data-theme="dark"] body.pos-screen .pos-totals.pos-totals.pos-totals > thead > tr > th.pos-paid-head { background-color: var(--head-bg) !important; color: var(--v-ink) !important; } html[data-theme="dark"] body.pos-screen .pos-totals.pos-totals.pos-totals > thead > tr > th.pos-due-head { color: var(--v-thread) !important; } html[data-theme="dark"] body.pos-screen .pos-totals.pos-totals.pos-totals > tbody > tr > td { background-color: var(--v-surface) !important; color: var(--v-ink) !important; } html[data-theme="dark"] body.pos-screen .pos-totals.pos-totals.pos-totals > tbody > tr > td.pos-due { background-color: var(--v-surface-2) !important; color: var(--v-thread) !important; outline: 1px dashed rgba(224, 165, 58, .45) !important; } html[data-theme="dark"] body.pos-screen .pos-totals.pos-totals.pos-totals > tbody > tr > td.pos-due * { color: var(--v-thread) !important; } html[data-theme="dark"] body.pos-screen .pos-totals.pos-totals.pos-totals > tbody > tr > td.pos-rest, html[data-theme="dark"] body.pos-screen .pos-totals.pos-totals.pos-totals > tbody > tr > td.pos-rest * { background-color: var(--v-surface) !important; color: #5fd39b !important; } html[data-theme="dark"] body.pos-screen .pos-totals.pos-totals.pos-totals > tbody > tr > td.pos-rest * { background-color: transparent !important; } html[data-theme="dark"] body.pos-screen input.pos-paid-input { background: var(--v-surface-2) !important; color: var(--v-ink) !important; border: 1px solid var(--v-thread) !important; } html[data-theme="dark"] body.pos-screen input.pos-paid-input:focus { background: var(--v-surface-2) !important; box-shadow: 0 0 0 3px rgba(224, 165, 58, .18) !important; } html[data-theme="dark"] body.pos-screen input.pos-barcode { background-color: var(--v-surface-2) !important; color: var(--v-ink) !important; border: 1px solid var(--v-input) !important; } html[data-theme="dark"] body.pos-screen input.pos-barcode:focus { border-color: var(--v-thread) !important; } /* الأزرار: نفس أزرار باقي البرنامج (الأساسي دهبي، والباقي محدد بإطار) */ html[data-theme="dark"] body.pos-screen .pos-btn-print, html[data-theme="dark"] body.pos-screen .pos-search.pos-search.pos-search .btn { background-color: var(--btn-bg) !important; border: 1px solid var(--btn-bg) !important; color: #1a1205 !important; } html[data-theme="dark"] body.pos-screen .pos-btn-print:hover, html[data-theme="dark"] body.pos-screen .pos-search.pos-search.pos-search .btn:hover { background-color: var(--btn-hover) !important; border-color: var(--btn-hover) !important; } html[data-theme="dark"] body.pos-screen .pos-btn-finish, html[data-theme="dark"] body.pos-screen .pos-btn-hold, html[data-theme="dark"] body.pos-screen .pos-btn.pos-btn-install, html[data-theme="dark"] body.pos-screen .v-btn.v-btn-warning:not(.pos-btn-print) { background-color: var(--v-surface-2) !important; border: 1px solid var(--v-line-strong) !important; color: var(--v-ink) !important; } html[data-theme="dark"] body.pos-screen .pos-btn-finish { border-color: rgba(224, 165, 58, .6) !important; color: #f5c46b !important; } html[data-theme="dark"] body.pos-screen .pos-btn-finish:hover, html[data-theme="dark"] body.pos-screen .pos-btn-hold:hover, html[data-theme="dark"] body.pos-screen .pos-btn.pos-btn-install:hover { background-color: var(--v-hover) !important; } html[data-theme="dark"] body.pos-screen .pos-btn-cancel { background-color: var(--v-surface-2) !important; border: 1px solid #6b2f37 !important; color: #ff9aa3 !important; } html[data-theme="dark"] body.pos-screen .pos-btn-cancel:hover { background-color: #3a1d24 !important; } html[data-theme="dark"] body.pos-screen .btn-success:not(.pos-btn), html[data-theme="dark"] body.pos-screen .btn-warning:not(.pos-btn), html[data-theme="dark"] body.pos-screen .btn-primary:not(.pos-btn), html[data-theme="dark"] body.pos-screen .btn-info:not(.pos-btn) { background-color: var(--btn-bg) !important; border-color: var(--btn-bg) !important; color: #1a1205 !important; } /* لوحة الأرقام وأزرار الأرقام والمسح */ html[data-theme="dark"] body.pos-screen .modal .pos-key, html[data-theme="dark"] body.pos-screen input[id$="paidbtn0"], html[data-theme="dark"] body.pos-screen input[id$="paidbtn1"], html[data-theme="dark"] body.pos-screen input[id$="paidbtn2"], html[data-theme="dark"] body.pos-screen input[id$="paidbtn3"], html[data-theme="dark"] body.pos-screen input[id$="paidbtn4"], html[data-theme="dark"] body.pos-screen input[id$="paidbtn5"], html[data-theme="dark"] body.pos-screen input[id$="paidbtn6"], html[data-theme="dark"] body.pos-screen input[id$="paidbtn7"], html[data-theme="dark"] body.pos-screen input[id$="paidbtn8"], html[data-theme="dark"] body.pos-screen input[id$="paidbtn9"] { background-color: var(--v-surface-2) !important; color: var(--v-ink) !important; border: 1px solid var(--v-line-strong) !important; box-shadow: none !important; } html[data-theme="dark"] body.pos-screen .modal .pos-key:hover { background-color: var(--v-hover) !important; } html[data-theme="dark"] body.pos-screen .modal .pos-key:active { background-color: var(--v-denim-soft) !important; } html[data-theme="dark"] body.pos-screen .modal .pos-key-ok { background-color: var(--btn-bg) !important; border-color: var(--btn-bg) !important; color: #1a1205 !important; } html[data-theme="dark"] body.pos-screen .modal .pos-key-danger, html[data-theme="dark"] body.pos-screen input[id$="clearonebtn"], html[data-theme="dark"] body.pos-screen input[id$="clearAllbtn"] { background-color: var(--v-surface-2) !important; color: #ff9aa3 !important; border: 1px solid #6b2f37 !important; box-shadow: none !important; } html[data-theme="dark"] body.pos-screen #amountprod .modal-body .table > thead > tr > th { background-color: var(--v-surface) !important; } /* الشريط اللي فوق: نفس لون التوب بار */ html[data-theme="dark"] body.pos-screen .pos-topbar:not(.pos-topbar-inline), html[data-theme="dark"] body.pos-screen .pos-topbar.pos-topbar-inline { background-color: var(--v-surface) !important; border-color: var(--v-line) !important; } html[data-theme="dark"] body.pos-screen .pos-topbar .pos-back { background: var(--v-surface-2) !important; color: var(--v-ink) !important; border: 1px solid var(--v-line-strong); } html[data-theme="dark"] body.pos-screen .pos-topbar .pos-back .fa { color: var(--v-thread) !important; } html[data-theme="dark"] body.pos-screen .pos-topbar .pos-back:hover { background: var(--v-hover) !important; } html[data-theme="dark"] body.pos-screen .pos-topbar .pos-page-title { color: var(--v-ink) !important; } html[data-theme="dark"] body.pos-screen .pos-items a.pos-qty:hover { background: var(--v-denim-soft); } } /* ===================================================================== v28 — مربعات الأصناف في شاشات البيع بالبلوكات (التصنيفات / المنتجات / المقاسات والألوان) - الاسم بيظهر كامل جوه المربع (المربع بيطول على قد الكلام) - مربعات المقاسات والألوان: اللون والفونت من الداتابيز زي ما هما في أي مود - الصفحة كلها لون واحد ===================================================================== */ @media screen { body.v-ui table[id$="sizeDDL"], body.v-ui table[id$="productDL"], body.v-ui table[id$="categoryDL"] { border-collapse: separate !important; border-spacing: 0 !important; } body.v-ui table[id$="sizeDDL"] > tbody > tr > td, body.v-ui table[id$="productDL"] > tbody > tr > td, body.v-ui table[id$="categoryDL"] > tbody > tr > td { vertical-align: top !important; padding: 0 !important; border: 0 !important; background: transparent !important; } body.v-ui .menu-card { display: block !important; width: auto !important; margin: 3px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } body.v-ui .menu-card > .card-body { box-sizing: border-box !important; width: 96px !important; min-height: 66px; height: auto !important; display: flex !important; align-items: center; justify-content: center; padding: 6px 5px !important; border: 1px solid rgba(0, 0, 0, .12) !important; border-radius: 10px !important; box-shadow: 0 1px 2px rgba(0, 0, 0, .15) !important; transition: transform .08s, box-shadow .15s, filter .15s; } body.v-ui a:hover > .menu-card > .card-body { box-shadow: 0 4px 12px rgba(0, 0, 0, .22) !important; filter: brightness(1.06); } body.v-ui a:active > .menu-card > .card-body { transform: scale(.97); } body.v-ui .menu-card .card-title { margin: 0 !important; width: 100%; white-space: normal !important; overflow: visible !important; overflow-wrap: anywhere; word-break: break-word; line-height: 1.3 !important; font-weight: 700; text-align: center; } /* الليلي: التصنيفات والمنتجات بألوان البرنامج — المقاسات والألوان بتفضل بلون وفونت الداتابيز */ html[data-theme="dark"] body.v-ui table[id$="categoryDL"] .menu-card > .card-body { background-color: var(--v-denim-soft) !important; border: 1px solid #2f4a74 !important; box-shadow: none !important; } html[data-theme="dark"] body.v-ui table[id$="productDL"] .menu-card > .card-body { background-color: var(--v-surface-2) !important; border: 1px solid var(--v-line-strong) !important; border-top: 3px solid var(--v-thread) !important; box-shadow: none !important; } html[data-theme="dark"] body.v-ui table[id$="categoryDL"] .menu-card .card-title, html[data-theme="dark"] body.v-ui table[id$="productDL"] .menu-card .card-title { color: var(--v-ink) !important; } html[data-theme="dark"] body.v-ui table[id$="sizeDDL"] .menu-card > .card-body { border-color: rgba(255, 255, 255, .16) !important; } /* الصفحة كلها لون واحد (من غير كارت فاتح ورا شاشة البيع) */ html[data-theme="dark"] body.pos-screen .content-wrapper, html[data-theme="dark"] body.pos-screen #myheader, html[data-theme="dark"] body.pos-screen .content-header, html[data-theme="dark"] body.pos-screen .content-header > div, html[data-theme="dark"] body.pos-screen .animated > .card-body, html[data-theme="dark"] body.pos-screen .pos-scroll:has(> table.pos-blocks) { background-color: var(--v-bg) !important; } } @media screen { /* مربعات نفس الصف بنفس الطول: لو اسم طويل كبّر مربع، اللي جنبه بيكبر معاه */ body.v-ui table[id$="sizeDDL"] > tbody > tr > td, body.v-ui table[id$="productDL"] > tbody > tr > td, body.v-ui table[id$="categoryDL"] > tbody > tr > td { height: 1px; } body.v-ui table[id$="sizeDDL"] > tbody > tr > td > br, body.v-ui table[id$="productDL"] > tbody > tr > td > br, body.v-ui table[id$="categoryDL"] > tbody > tr > td > br { display: none; } body.v-ui table[id$="sizeDDL"] > tbody > tr > td > a, body.v-ui table[id$="productDL"] > tbody > tr > td > a, body.v-ui table[id$="categoryDL"] > tbody > tr > td > a { display: block; height: 100%; } /* لو ظهر تحت المربع "غير موجود": المربع بياخد طوله العادي والكلمة تحته من غير ما تغطي على اللي بعده */ body.v-ui table[id$="sizeDDL"] > tbody > tr > td:has(> span) > a, body.v-ui table[id$="productDL"] > tbody > tr > td:has(> span) > a { height: auto; } body.v-ui table[id$="sizeDDL"] > tbody > tr > td > span, body.v-ui table[id$="productDL"] > tbody > tr > td > span { display: block; text-align: center; font-size: 12px; margin-bottom: 4px; } body.v-ui table[id$="sizeDDL"] .menu-card, body.v-ui table[id$="productDL"] .menu-card, body.v-ui table[id$="categoryDL"] .menu-card { height: calc(100% - 6px); } body.v-ui table[id$="sizeDDL"] .menu-card > .card-body, body.v-ui table[id$="productDL"] .menu-card > .card-body, body.v-ui table[id$="categoryDL"] .menu-card > .card-body { height: 100% !important; } } @media screen { /* الوقوف على مربع: من غير خلفية ورا المربع — المربع نفسه بينوّر */ body.v-ui table[id$="sizeDDL"] > tbody > tr:hover > td, body.v-ui table[id$="productDL"] > tbody > tr:hover > td, body.v-ui table[id$="categoryDL"] > tbody > tr:hover > td, body.pos-screen table[id$="sizeDDL"].pos-picker.pos-picker.pos-picker > tbody > tr:hover > td, body.pos-screen table[id$="productDL"].pos-picker.pos-picker.pos-picker > tbody > tr:hover > td, body.pos-screen table[id$="categoryDL"].pos-picker.pos-picker.pos-picker > tbody > tr:hover > td { background: transparent !important; } body.v-ui table[id$="sizeDDL"] a, body.v-ui table[id$="productDL"] a, body.v-ui table[id$="categoryDL"] a, body.v-ui table[id$="sizeDDL"] a:hover, body.v-ui table[id$="productDL"] a:hover, body.v-ui table[id$="categoryDL"] a:hover, body.v-ui table[id$="sizeDDL"] a:focus, body.v-ui table[id$="productDL"] a:focus, body.v-ui table[id$="categoryDL"] a:focus { background: transparent !important; outline: 0 !important; box-shadow: none !important; } html[data-theme="dark"] body.v-ui table[id$="sizeDDL"] a:hover > .menu-card > .card-body, html[data-theme="dark"] body.v-ui table[id$="productDL"] a:hover > .menu-card > .card-body, html[data-theme="dark"] body.v-ui table[id$="categoryDL"] a:hover > .menu-card > .card-body { filter: brightness(1.25); box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 6px 16px rgba(0, 0, 0, .45) !important; } } @media screen { body.pos-screen table.pos-blocks.pos-picker.pos-picker.pos-picker > tbody > tr:hover > td, body.pos-screen table.pos-blocks.pos-picker.pos-picker.pos-picker > tbody > tr:hover > th, body.pos-screen table.pos-blocks table > tbody > tr:hover > td { background: transparent !important; } } /* ===================================================================== v28: هوية Soft Zone في صفحة الدخول (شكل واحد للكمبيوتر والموبايل) ===================================================================== */ body.sz-auth > form { margin: 0; } .sz-main { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px 24px; } .sz-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; animation: szFade .5s ease-out both; } .sz-head img { width: 56px; height: 56px; border-radius: 50%; background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); } .sz-head span { font-family: "Segoe UI", "VCairo", "Cairo", Tahoma, sans-serif; font-size: 30px; font-weight: 300; color: #fff; letter-spacing: .3px; } .sz-head b { font-weight: 800; color: #5b9bff; } .sz-greet { font-size: 15px; font-weight: 600; color: #c3cfe2; margin-bottom: 4px; animation: szFade .5s ease-out both; } .sz-main > .card { width: 100%; max-width: 420px; margin: 0; } .sz-foot { margin-top: 26px; font-size: 12.5px; color: #93a3bf; text-align: center; } body.sz-auth .container1 { min-height: 0; padding: 0; display: block; } body.sz-auth .container { margin: 18px auto 0 !important; animation: szFade .45s ease-out both; } body.sz-auth .accountInfo img[src*="man.png"] { display: none !important; } body.sz-auth #ResultMessagediv:not(:empty) { margin: 0 auto 12px; } @keyframes szFade { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .sz-head, .sz-greet, body.sz-auth .container { animation: none; } } @media (max-width: 480px) { .sz-main { justify-content: flex-start; padding-top: 36px; } .sz-head img { width: 46px; height: 46px; } .sz-head span { font-size: 25px; } } .sz-occasion { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 2px; padding: 5px 14px; border-radius: 999px; font-size: 14px; font-weight: 700; color: #f6c35b; background: rgba(217, 152, 28, .14); border: 1px solid rgba(217, 152, 28, .35); animation: szFade .6s ease-out both; text-align: center; } .sz-occasion .fa { color: #f6c35b !important; font-size: 12px; } /* ===================================================================== v29: مربعات البيع بالبلوكات الكمبيوتر/اللاب: التصنيف (يمين) ← المنتج ← المقاس، كل عمود ثابت في مكانه حتى لو فاضي التصنيفات 2 في الصف، المنتجات 3، المقاسات 3 — ولو مفيش مقاسات: المنتجات 6 في المساحة كلها الموبايل/التابلت: البلوكات أول الصفحة، وكل قايمة في شريط واحد بيتسحب بالعرض (تصنيفات / منتجات / مقاسات) الأعمدة متعرفة بمكانها جنب التصنيف، عشان لو قايمة فاضية (الجدول مش موجود) الترتيب ميبوظش ===================================================================== */ @media screen { body.v-ui .row:has(> div > table[id$="categoryDL"]) { display: flex !important; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; gap: 8px; margin: 0 !important; height: auto !important; } body.v-ui .row:has(> div > table[id$="categoryDL"])::before, body.v-ui .row:has(> div > table[id$="categoryDL"])::after { display: none !important; content: none !important; } body.v-ui .row:has(> div > table[id$="categoryDL"]) > div { float: none !important; width: auto !important; min-width: 0; padding: 0 !important; margin: 0 !important; } body.v-ui .row:has(> div > table[id$="categoryDL"]) > div:has(> table[id$="categoryDL"]) { order: 1; flex: 2 1 0; } body.v-ui .row:has(> div > table[id$="categoryDL"]) > div:has(+ div > table[id$="categoryDL"]) { order: 2; flex: 3 1 0; } body.v-ui .row:has(> div > table[id$="categoryDL"]) > div:has(+ div + div > table[id$="categoryDL"]) { order: 3; flex: 3 1 0; } /* من غير مقاسات: التصنيف زي ما هو والمنتجات تفرش في الباقي */ html.v-nosize body.v-ui .row:has(> div > table[id$="categoryDL"]) > div:has(+ div + div > table[id$="categoryDL"]) { display: none !important; } html.v-nosize body.v-ui .row:has(> div > table[id$="categoryDL"]) > div:has(+ div > table[id$="categoryDL"]), body.v-ui .row:has(> div > table[id$="categoryDL"]):not(:has(> div + div + div > table[id$="categoryDL"])) > div:has(+ div > table[id$="categoryDL"]) { flex: 6 1 0; } body.v-ui table[id$="categoryDL"], body.v-ui table[id$="productDL"], body.v-ui table[id$="sizeDDL"] { display: grid !important; gap: 6px; width: 100% !important; margin: 0 !important; align-items: stretch; } body.v-ui table[id$="categoryDL"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.v-ui table[id$="productDL"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } body.v-ui table[id$="sizeDDL"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } html.v-nosize body.v-ui table[id$="productDL"], body.v-ui .row:has(> div > table[id$="categoryDL"]):not(:has(> div + div + div > table[id$="categoryDL"])) table[id$="productDL"] { grid-template-columns: repeat(6, minmax(0, 1fr)); } /* الجدول واخد class="row" من بوتستراب، فالـ before/after بتاعته كانت بتاخد مكان مربع */ body.v-ui table[id$="categoryDL"]::before, body.v-ui table[id$="productDL"]::before, body.v-ui table[id$="sizeDDL"]::before, body.v-ui table[id$="categoryDL"]::after, body.v-ui table[id$="productDL"]::after, body.v-ui table[id$="sizeDDL"]::after { display: none !important; content: none !important; } body.v-ui table[id$="categoryDL"] > tbody, body.v-ui table[id$="productDL"] > tbody, body.v-ui table[id$="sizeDDL"] > tbody, body.v-ui table[id$="categoryDL"] > tbody > tr, body.v-ui table[id$="productDL"] > tbody > tr, body.v-ui table[id$="sizeDDL"] > tbody > tr { display: contents !important; } body.v-ui table[id$="categoryDL"] > tbody > tr > td, body.v-ui table[id$="productDL"] > tbody > tr > td, body.v-ui table[id$="sizeDDL"] > tbody > tr > td { display: flex !important; flex-direction: column; width: auto !important; min-width: 0; height: auto !important; padding: 0 !important; } body.v-ui table[id$="categoryDL"] > tbody > tr > td:empty, body.v-ui table[id$="productDL"] > tbody > tr > td:empty, body.v-ui table[id$="sizeDDL"] > tbody > tr > td:empty { display: none !important; } /* المنتجات مترتبة عمود عمود (RepeatDirection=Vertical) فبنرجّع ترتيبها الأصلي */ body.v-ui table[id$="productDL"] > tbody > tr > td:nth-child(1) { order: 1; } body.v-ui table[id$="productDL"] > tbody > tr > td:nth-child(2) { order: 2; } body.v-ui table[id$="productDL"] > tbody > tr > td:nth-child(3) { order: 3; } body.v-ui table[id$="productDL"] > tbody > tr > td:nth-child(4) { order: 4; } body.v-ui table[id$="productDL"] > tbody > tr > td:nth-child(5) { order: 5; } body.v-ui table[id$="productDL"] > tbody > tr > td:nth-child(6) { order: 6; } body.v-ui table[id$="categoryDL"] > tbody > tr > td > a, body.v-ui table[id$="productDL"] > tbody > tr > td > a, body.v-ui table[id$="sizeDDL"] > tbody > tr > td > a { display: flex !important; flex: 1 1 auto; height: auto !important; min-width: 0; } body.v-ui table[id$="categoryDL"] .menu-card, body.v-ui table[id$="productDL"] .menu-card, body.v-ui table[id$="sizeDDL"] .menu-card { display: flex !important; flex: 1 1 auto; width: 100% !important; height: auto !important; margin: 0 !important; min-width: 0; } body.v-ui table[id$="categoryDL"] .menu-card > .card-body, body.v-ui table[id$="productDL"] .menu-card > .card-body, body.v-ui table[id$="sizeDDL"] .menu-card > .card-body { flex: 1 1 auto; width: 100% !important; min-width: 0; min-height: 62px; height: auto !important; padding: 6px 4px !important; } /* حجم الخط على قد عرض المربع: الكلمة بتفضل كاملة ومبتتقطعش إلا لو مفيش حل تاني */ body.v-ui table[id$="categoryDL"] > tbody > tr > td, body.v-ui table[id$="productDL"] > tbody > tr > td, body.v-ui table[id$="sizeDDL"] > tbody > tr > td { container-type: inline-size; } body.v-ui table[id$="categoryDL"] .menu-card .card-title, body.v-ui table[id$="productDL"] .menu-card .card-title, body.v-ui table[id$="sizeDDL"] .menu-card .card-title { font-size: 13px !important; font-size: clamp(10px, 14cqi, 13.5px) !important; overflow-wrap: break-word !important; word-break: normal !important; } /* التصنيف والمنتج اللي اخترتهم بيفضلوا متعلّمين */ body.v-ui a.v-picked > .menu-card > .card-body { box-shadow: 0 0 0 2px #d9981c, 0 4px 12px rgba(0, 0, 0, .18) !important; } /* ألوان موحّدة في كل شاشات البيع — النهاري (المقاسات بلون وفونت الداتابيز زي ما هي) */ html:not([data-theme="dark"]) body.v-ui table[id$="categoryDL"] .menu-card > .card-body { background-color: #23406a !important; border: 1px solid #182d4b !important; } html:not([data-theme="dark"]) body.v-ui table[id$="categoryDL"] .menu-card .card-title { color: #ffffff !important; } html:not([data-theme="dark"]) body.v-ui table[id$="productDL"] .menu-card > .card-body { background-color: #d9981c !important; border: 1px solid #b97f10 !important; } html:not([data-theme="dark"]) body.v-ui table[id$="productDL"] .menu-card .card-title { color: #2b1d00 !important; } } /* كل شاشات البلوكات بنفس وزن الخط بتاع صفحات الإضافة (صفحات التعديل كانت أخف) */ @media screen { body.v-ui .row:has(> div > .row > div > table[id$="categoryDL"]) { font-weight: 700; } } /* الموبايل والتابلت: البلوكات تحت الفاتورة (v35)، وكل قايمة في شريط بيتسحب بالعرض */ @media screen and (max-width: 991px) { body.v-ui .row:has(> div > .row > div > table[id$="categoryDL"]) { display: flex !important; flex-direction: column; } body.v-ui .row:has(> div > .row > div > table[id$="categoryDL"])::before, body.v-ui .row:has(> div > .row > div > table[id$="categoryDL"])::after { display: none !important; content: none !important; } body.v-ui .row:has(> div > .row > div > table[id$="categoryDL"]) > div { float: none !important; width: 100% !important; } body.v-ui .row:has(> div > .row > div > table[id$="categoryDL"]) > div:has(> .row > div > table[id$="categoryDL"]) { order: 2; margin-top: 10px; margin-bottom: 10px; } body.v-ui .row:has(> div > table[id$="categoryDL"]) { flex-direction: column; align-items: stretch; gap: 10px; } body.v-ui .row:has(> div > table[id$="categoryDL"]) > div { flex: 0 0 auto !important; width: 100% !important; } body.v-ui .row:has(> div > table[id$="categoryDL"]) > div:not(:has(> table)) { display: none !important; } body.v-ui .row:has(> div > table[id$="categoryDL"]) > div:has(> table[id$="categoryDL"])::before, body.v-ui .row:has(> div > table[id$="categoryDL"]) > div:has(+ div > table[id$="categoryDL"])::before, body.v-ui .row:has(> div > table[id$="categoryDL"]) > div:has(+ div + div > table[id$="categoryDL"])::before { display: block; font-size: 12.5px; font-weight: 700; color: var(--v-muted, #5e6873); margin: 0 2px 4px; } body.v-ui .row:has(> div > table[id$="categoryDL"]) > div:has(> table[id$="categoryDL"])::before { content: "التصنيفات"; } body.v-ui .row:has(> div > table[id$="categoryDL"]) > div:has(+ div > table[id$="categoryDL"])::before { content: "المنتجات"; } body.v-ui .row:has(> div > table[id$="categoryDL"]) > div:has(+ div + div > table[id$="categoryDL"])::before { content: "المقاسات والألوان"; } /* كل قايمة صف واحد بيتسحب بالعرض */ body.v-ui table[id$="categoryDL"], body.v-ui table[id$="productDL"], body.v-ui table[id$="sizeDDL"] { grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: 104px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding-bottom: 6px !important; scrollbar-width: thin; } body.v-ui table[id$="categoryDL"] > tbody > tr > td, body.v-ui table[id$="productDL"] > tbody > tr > td, body.v-ui table[id$="sizeDDL"] > tbody > tr > td { scroll-snap-align: start; } body.v-ui table[id$="categoryDL"] .menu-card > .card-body, body.v-ui table[id$="productDL"] .menu-card > .card-body, body.v-ui table[id$="sizeDDL"] .menu-card > .card-body { min-height: 66px; } } /* ===================================================================== v29: صفحات الاستبدال بالبلوكات — مربع "استبدال" تحت المربع مش جنبه ===================================================================== */ @media screen { body.v-ui table[id$="productDL"] .menu-card:has(input[type="checkbox"]), body.v-ui table[id$="sizeDDL"] .menu-card:has(input[type="checkbox"]) { flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: center; align-items: center; column-gap: 4px; } body.v-ui table[id$="productDL"] .menu-card:has(input[type="checkbox"]) > .card-body, body.v-ui table[id$="sizeDDL"] .menu-card:has(input[type="checkbox"]) > .card-body { flex: 1 1 100%; } /* لو المربع من غير span (input + label على طول) */ body.v-ui table[id$="productDL"] .menu-card > input[type="checkbox"], body.v-ui table[id$="sizeDDL"] .menu-card > input[type="checkbox"] { margin: 6px 0 0 !important; width: 15px; height: 15px; accent-color: var(--v-thread, #d9981c); } body.v-ui table[id$="productDL"] .menu-card > input[type="checkbox"] + label, body.v-ui table[id$="sizeDDL"] .menu-card > input[type="checkbox"] + label { margin: 6px 0 0 !important; font-size: 12px; font-weight: 700; color: var(--v-muted, #5d6b80) !important; cursor: pointer; } body.v-ui table[id$="productDL"] .menu-card > span:has(> input[type="checkbox"]), body.v-ui table[id$="sizeDDL"] .menu-card > span:has(> input[type="checkbox"]) { display: flex !important; align-items: center; justify-content: center; gap: 5px; flex: 1 1 100%; margin-top: 4px; padding: 4px 4px; border: 1px dashed var(--v-line, #cfd6e0); border-radius: 8px; background: var(--v-surface, #fff); color: var(--v-muted, #5d6b80) !important; font-size: 12px; font-weight: 700; line-height: 1.2; cursor: pointer; white-space: nowrap; } body.v-ui table[id$="productDL"] .menu-card > span:has(> input[type="checkbox"]) > input, body.v-ui table[id$="sizeDDL"] .menu-card > span:has(> input[type="checkbox"]) > input { margin: 0 !important; width: 15px; height: 15px; accent-color: var(--v-thread, #d9981c); } body.v-ui table[id$="productDL"] .menu-card > span:has(> input[type="checkbox"]) > label, body.v-ui table[id$="sizeDDL"] .menu-card > span:has(> input[type="checkbox"]) > label { margin: 0 !important; font-weight: 700; color: inherit !important; cursor: pointer; } body.v-ui table[id$="productDL"] .menu-card > span:has(> input:checked), body.v-ui table[id$="sizeDDL"] .menu-card > span:has(> input:checked) { border-style: solid; border-color: var(--v-thread, #d9981c); background: rgba(217, 152, 28, .14); color: #8a5a00 !important; } html[data-theme="dark"] body.v-ui table[id$="productDL"] .menu-card > span:has(> input:checked), html[data-theme="dark"] body.v-ui table[id$="sizeDDL"] .menu-card > span:has(> input:checked) { color: #f6c35b !important; } } /* ===================================================================== v29: البحث في البرنامج ===================================================================== */ @media screen { .v-search-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin: 6px 0 6px 0; padding: 0; float: left; 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; box-shadow: none !important; text-decoration: none !important; } .v-search-btn:hover { border-color: var(--v-thread, #d9981c) !important; color: var(--v-thread, #d9981c) !important; } .v-search-btn .fa, body.v-ui .main-header .v-search-btn .fa { color: inherit !important; -webkit-text-fill-color: currentColor; font-size: 17px; } .v-search-btn.v-search-float { position: fixed; left: 14px; bottom: 60px; z-index: 1035; float: none; margin: 0; box-shadow: 0 6px 18px rgba(0, 0, 0, .18) !important; } html[data-theme="dark"] .v-search-btn { color: #f5c46b !important; background: var(--v-surface, #172131) !important; border-color: var(--v-line, #2a3850) !important; } .v-search-box { display: none; position: fixed; inset: 0; z-index: 2000; background: rgba(10, 18, 32, .45); direction: rtl; } .v-search-box.on { display: block; } .v-search-box .v-s-panel { width: min(640px, calc(100vw - 24px)); margin: 9vh auto 0; background: #fff; color: #1d2a3a; border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, .3); overflow: hidden; font-family: "VCairo", "Cairo", Tahoma, sans-serif; } .v-search-box .v-s-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #e3e7ee; } .v-search-box .v-s-bar > .fa { color: #23406a; font-size: 18px; } .v-search-box .v-s-bar input { flex: 1; min-width: 0; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; font-size: 17px; font-weight: 600; color: inherit !important; height: 36px; padding: 0 !important; direction: rtl; } .v-search-box .v-s-x { font-size: 11.5px; font-weight: 700; color: #6b7686 !important; border: 1px solid #d5dbe4; border-radius: 6px; padding: 2px 7px; text-decoration: none !important; } .v-search-box .v-s-list { max-height: min(60vh, 460px); overflow-y: auto; padding: 6px; } .v-search-box .v-s-head { font-size: 12.5px; font-weight: 700; color: #6b7686; padding: 8px 10px 4px; } .v-search-box .v-s-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: #1d2a3a !important; text-decoration: none !important; font-size: 15px; font-weight: 700; } .v-search-box .v-s-item .fa { width: 18px; text-align: center; color: #23406a; } .v-search-box .v-s-item .v-s-t { flex: 1; min-width: 0; } .v-search-box .v-s-item .v-s-g { font-size: 12px; font-weight: 600; color: #6b7686; background: #eef2f7; border-radius: 999px; padding: 2px 9px; white-space: nowrap; } .v-search-box .v-s-item.on, .v-search-box .v-s-item:hover { background: #eef3fa; } .v-search-box .v-s-item.on { box-shadow: inset 3px 0 0 #d9981c; } .v-search-box .v-s-empty { padding: 16px 12px 6px; font-size: 14px; font-weight: 700; color: #6b7686; text-align: center; } .v-search-box .v-s-tips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 6px 10px 14px; } .v-search-box .v-s-tips a { padding: 4px 12px; border-radius: 999px; border: 1px solid #d5dbe4; color: #23406a !important; font-weight: 700; font-size: 13px; text-decoration: none !important; } .v-search-box .v-s-tips a:hover { border-color: #d9981c; } .v-search-box .v-s-foot { font-size: 11.5px; color: #8a94a3; padding: 8px 14px; border-top: 1px solid #e3e7ee; text-align: center; } @media (max-width: 600px) { .v-search-box .v-s-panel { margin-top: 10px; } .v-search-box .v-s-foot { display: none; } } html[data-theme="dark"] .v-search-box { background: rgba(0, 0, 0, .55); } html[data-theme="dark"] .v-search-box .v-s-panel { background: #172131; color: #e3e9f2; } html[data-theme="dark"] .v-search-box .v-s-bar, html[data-theme="dark"] .v-search-box .v-s-foot { border-color: #2a3850; } html[data-theme="dark"] .v-search-box .v-s-bar > .fa, html[data-theme="dark"] .v-search-box .v-s-item .fa { color: #f5c46b; } html[data-theme="dark"] .v-search-box .v-s-item { color: #e3e9f2 !important; } html[data-theme="dark"] .v-search-box .v-s-item .v-s-g { background: #22314a; color: #aab6c8; } html[data-theme="dark"] .v-search-box .v-s-item.on, html[data-theme="dark"] .v-search-box .v-s-item:hover { background: #22314a; } html[data-theme="dark"] .v-search-box .v-s-x, html[data-theme="dark"] .v-search-box .v-s-tips a { border-color: #2a3850; color: #c7d2e2 !important; } } @media print { .v-search-btn, .v-search-box { display: none !important; } } /* ##################################################################### نسخة الفروع — إضافات خاصة بالبرنامج ده (فوق شكل النسخة الأساسية) ##################################################################### */ /* ===================================================================== نسخة الفروع — اسم الفرع في الهيدر (كان أبيض على هيدر غامق والهيدر بقى أبيض) ===================================================================== */ @media screen { body.v-ui .main-header [id$="branchNameLbl"]:not(:empty) { display: inline-flex; align-items: center; gap: 6px; height: 32px; margin: 9px 10px 0; padding: 0 14px !important; border-radius: 999px; background: var(--v-denim-soft); border: 1px solid #c9d6e6; color: var(--v-denim) !important; font-size: 14px; font-weight: 700 !important; vertical-align: top; } body.v-ui .main-header [id$="branchNameLbl"]:not(:empty)::before { content: "\f041"; font-family: FontAwesome !important; color: var(--v-thread); } } /* ===================================================================== v28 — الجداول الكبيرة جدا: صفحات على الشاشة بس (الصفوف كلها موجودة فى الصفحة: الطباعة والإكسيل وأى حفظ بيشوفوا كل الصفوف) ===================================================================== */ @media screen { body.v-ui tr.v-pg-hide { display: none !important; } body.v-ui .v-pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; font-size: 14px; color: var(--v-muted); } body.v-ui .v-pager b { color: var(--v-ink); } body.v-ui .v-pager button { min-height: 32px; padding: 3px 14px; border-radius: 8px; cursor: pointer; background: var(--v-surface); border: 1px solid var(--v-line); color: var(--v-denim); font-weight: 700; } body.v-ui .v-pager button:hover:not([disabled]) { border-color: var(--v-thread); color: var(--v-thread); } body.v-ui .v-pager button[disabled] { opacity: .45; cursor: default; } body.v-ui .v-pager .v-pg-all { background: var(--v-denim-soft); } } @media print { body.v-ui .v-pager { display: none !important; } } /* ---- v28: تصفح التقارير على السيرفر (الإكسيل بيطلع كل البيانات) ---- */ @media screen { body.v-ui .v-srvpager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 8px 0 16px; font-size: 14px; color: var(--v-muted); } body.v-ui .v-srvpager .v-srvpager-btn { display: inline-flex; align-items: center; min-height: 34px; padding: 4px 16px; border-radius: 8px; background: var(--btn-bg); color: var(--btn-text) !important; font-weight: 700; text-decoration: none !important; } body.v-ui .v-srvpager .v-srvpager-btn:hover { background: var(--btn-hover); } body.v-ui .v-srvpager a.aspNetDisabled.v-srvpager-btn, body.v-ui .v-srvpager .v-srvpager-btn[disabled] { opacity: .45; pointer-events: none; } body.v-ui .v-srvpager .v-srvpager-info { color: var(--v-ink); font-weight: 700; } body.v-ui .v-srvpager select { min-height: 34px; padding: 2px 8px; margin: 0 4px; border: 1px solid var(--v-input); border-radius: 8px; background: var(--v-surface); color: var(--v-ink); font-weight: 700; } } @media print { body.v-ui .v-srvpager { display: none !important; } } /* ---- أزرار الصور القديمة (إضافة / حذف) بتتبدل بأيقونة ---- */ @media screen { body.v-ui input[type="image"].v-ico-img { width: 32px !important; height: 32px !important; padding: 8px !important; box-sizing: border-box; border-radius: 8px !important; border: 1px solid transparent !important; vertical-align: middle; cursor: pointer; } body.v-ui input[type="image"].v-ico-add { background: var(--v-pos) !important; } body.v-ui input[type="image"].v-ico-add:hover { filter: brightness(1.1); } body.v-ui input[type="image"].v-ico-del { background: var(--v-neg) !important; } } /* v30: صفحات الطباعة اللى بتشيل كلاسات الصفحة قبل الطباعة (print-mode) — نفس الخط على الشاشة وفى الطباعة */ body.print-mode, body.print-mode *:not(.fa):not([class*="fa-"]):not(.glyphicon):not([class*="glyphicon-"]):not([class*="parcode"]):not([class*="barcode"]):not([style*="Barcode" i]):not([style*="Libre" i]) { font-family: "VCairo", "Cairo", Tahoma, sans-serif !important; } /* ===================================================================== v35: خانات الكتابة الكبيرة جوه الجداول (رد المتابعة، الملحوظة، سبب الحذف...) كانت بتاخد عرض العمود الضيق فبتطلع صغيرة — دلوقتى عرضها مناسب وطولها بيكبر مع الكلام ===================================================================== */ @media screen { body.v-ui:not(.pos-screen) .content-wrapper td textarea, body.v-ui:not(.pos-screen) .content-wrapper th textarea { width: 100% !important; min-width: 280px !important; min-height: 84px !important; height: auto !important; max-height: 260px; font-size: 15px !important; line-height: 1.6 !important; white-space: pre-wrap; resize: vertical; field-sizing: content; } } @media screen and (max-width: 767px) { body.v-ui:not(.pos-screen) .content-wrapper td textarea, body.v-ui:not(.pos-screen) .content-wrapper th textarea { min-width: 200px !important; } }