:root { /* Color tokens */ --clr-primary: #6B4CE6; --clr-primary-600: #6040DA; --clr-primary-700: #5438C9; --clr-secondary: #0071bc; --clr-secondary-600: #005fa0; --clr-white: #ffffff; --clr-black: #000000; --clr-dark: #101828; --clr-light: #344054; --clr-light-2: #667085; --clr-light-sm: #dee2e6; --clr-gray-50: #f9fafb; --clr-gray-100: #f2f4f7; --clr-gray-200: #eaecf0; --clr-gray-300: #d0d5dd; --clr-gray-400: #98a2b3; --clr-gray-500: #667085; --clr-success: #00a551; --clr-warning: #f70707; --clr-danger: #ff3b30; --clr-info: #1e90ff; /* Typography */ --font-sans: "Tajawal", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Kufi Arabic", Arial, sans-serif; --fs-xs: .75rem; /* 12px */ --fs-sm: .875rem; /* 14px */ --fs-base: 1rem; /* 16px */ --fs-lg: 1.125rem; /* 18px */ --fs-xl: 1.25rem; /* 20px */ --fs-2xl: 1.5rem; /* 24px */ /* Radius & shadow */ --radius-sm: 6px; --radius: 10px; --radius-lg: 12px; --shadow-sm: 0 1px 2px rgba(16, 24, 40, .07); --shadow-md: 0 4px 24px rgba(16,24,40,.08); --shadow-lg: 0 12px 32px rgba(16,24,40,.12); /* Spacing */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; /* Transitions */ --tr-fast: 180ms ease; } /* Dark mode (opt‑in): */ :root[data-theme="dark"] { --clr-white: #0b0f17; --clr-dark: #f2f4f7; --clr-gray-50: #0e1420; --clr-gray-100: #111827; --clr-gray-200: #1f2937; --clr-gray-300: #374151; --clr-gray-400: #6b7280; --clr-gray-500: #9ca3af; --shadow-md: 0 4px 24px rgba(0,0,0,.4); } /* Base reset & document */ * { box-sizing: border-box; } html[dir="rtl"] body { font-family: var(--font-sans); background: var(--clr-gray-50); color: var(--clr-dark); } img { max-width: 100%; display: block; } button, input, select, textarea { font: inherit; } :focus-visible { outline: 2px solid var(--clr-primary); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* Utilities */ .text-custom-primary, .text-custom-primary:hover { color: var(--clr-primary); font-weight: 700; } .text-muted { color: var(--clr-gray-500) !important; } .shadow-sm { box-shadow: var(--shadow-sm) !important; } .shadow-md { box-shadow: var(--shadow-md) !important; } .shadow-lg { box-shadow: var(--shadow-lg) !important; } .rounded-xl { border-radius: 16px; } .width-10 { width: 10px; } .custom-primary { color: var(--clr-primary); } .gradient-row { background: linear-gradient(270deg, #dbe4df 0%, #65e4a6 50%, #ffffff 100%); } .gradient-alert { background: linear-gradient(270deg, #ff7db8 0%, #ee2a7b 100%); color: #fff; } /* Buttons */ .btn { border-radius: var(--radius); border: 1px solid transparent; transition: all var(--tr-fast); } .btn:disabled { opacity: .6; cursor: not-allowed; } .btn-primary { background: var(--clr-primary); color: #fff; } .btn-primary:hover { background: var(--clr-primary-600); } .btn-outline-primary { background: transparent; border-color: var(--clr-primary); color: var(--clr-primary); } .btn-outline-primary:hover { background: #fff1f2; border-color: var(--clr-primary-600); color: var(--clr-primary-600); } .btn-secondary { background: var(--clr-secondary); color: #fff; } .btn-secondary:hover { background: var(--clr-secondary-600); } .btn-success { background: var(--clr-success); color: #fff; } .btn-warning { background: var(--clr-warning); color: #111; } .btn-danger { background: var(--clr-danger); color: #fff; border-top-left-radius: 0; border-bottom-left-radius: 0; } /* Project‑specific keep‑alive buttons */ .btn-custom-warning { background-color: var(--clr-primary); color: #fff; border: none; } .btn-custom-warning:hover { filter: brightness(.95); color: #fff; } .add-feature-btn { min-height: 30px; padding: 4px 20px; background: var(--clr-primary); border: 0; color: #fff; border-radius: 5px; } .verify-btn { background-color: var(--clr-primary); color: #fff; width: 100%; padding: 10px 0; margin-top: 12px; } .save-btn { background: var(--clr-warning); color: #111; width: 100%; border: none; height: 48px; border-radius: 6px; } .payment-btn { background: var(--clr-primary); color: #fff; width: 100%; border: none; height: 48px; border-radius: 6px; } .top-btn-custom { text-decoration: none; border: 0; color: var(--clr-dark); } .top-btn-custom:hover, .top-btn-custom:active { color: #007bff; text-decoration: underline; text-underline-offset: 18px; } .top-btn-custom.active { color: #007bff; font-weight: 700; text-decoration: underline; text-underline-offset: 18px; } /* Forms */ .form-control, .form-select, .form-check-input { border-radius: var(--radius); border: 1px solid var(--clr-gray-300); box-shadow: none; transition: border-color var(--tr-fast), background-color var(--tr-fast); } .form-control { background: rgba(245,243,243,.3); } .form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--clr-primary); outline: none; box-shadow: 0 0 0 3px rgba(197,33,39,.15); } .form-select { font-size: 1rem; } .form-control-amount { background: #fff; } /* Readonly harmonization */ .payment-section .form-control[readonly] { background-color: #fff; } /* Validation / error states */ .indicate-text, .error-alert, .error { color: var(--clr-danger) !important; } .indicate-text { font-size: var(--fs-xs); } .error-alert { font-size: 11px; } .form-control.error, .image-wrapper.error { border-color: var(--clr-danger); } /* Placeholder sizing */ .budget-form ::placeholder { font-size: 12px; color: var(--clr-gray-400); } /* Checkbox (login) */ .mybazar-login-section .forget-password input[type="checkbox"] { width: 18px; height: 18px; border-radius: 6px; border: 1px solid #d0d5dd; background: var(--clr-primary); margin-inline-end: 5px; margin-top: -1px; accent-color: var(--clr-primary); } .mybazar-login-section .forget-password input[type="checkbox"]:checked+.custom-control-label::before { color: #fff; } /* Table checkbox */ .table-hidden-checkbox { display: none; } .table-custom-checkbox { position: relative; cursor: pointer; font-size: 16px; user-select: none; padding-inline-start: 35px; line-height: 24px; color: #333; } .table-custom-checkmark { position: absolute; top: -9px; inset-inline-start: 0; height: 20px; width: 20px; background: transparent; border: 1px solid #d8d8d8; border-radius: 6px; transition: background-color var(--tr-fast), border-color var(--tr-fast); } .table-hidden-checkbox:checked + .table-custom-checkmark { background: var(--clr-primary); border-color: var(--clr-primary); } .table-custom-checkbox .custom-checkmark::after { content: ""; position: absolute; display: none; } .table-custom-checkbox .table-hidden-checkbox:checked + .custom-checkmark::after { display: block; } .table-custom-checkbox .custom-checkmark::after { inset-inline-start: 8px; top: 3px; width: 5px; height: 10px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); } /* Avatars */ .avatar { background: var(--clr-primary); border-radius: 50%; color: #e3eaef; display: inline-grid; place-items: center; font-size: 16px; font-weight: 300; line-height: 1; height: 45px; width: 45px; } .avatar.avatar-sm { font-size: 12px; height: 30px; width: 30px; } .avatar img { border-radius: 50%; height: 100%; width: 100%; position: relative; z-index: 1; } .table-user-icon { height: 40px; width: 40px; border-radius: 50%; background: var(--clr-gray-100); display: grid; place-items: center; } .table-user-icon img { height: 25px; } /* Cards & Surfaces */ .card { border: 0; box-shadow: var(--shadow-md); border-radius: var(--radius-lg); background-color: var(--clr-white); } .table-background { background: rgba(245,243,243,.5); } /* Tables */ .table { width: 100%; border-collapse: separate; border-spacing: 0; } .table th { border-bottom: 1px solid #d8d8d8 !important; background: #f9f8f8; border: 0; height: 54px; font-weight: 600; color: var(--clr-light); } .roles-permissions table td { color: #111; } .delete-selected { cursor: pointer; } /* Images */ .img-preview { margin-top: 4px; height: auto; width: 100px; } .ctg-icon img { max-height: 40px; width: auto; margin: 0 auto; } .rounded-image .table-img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; } .product-img { height: 100px; width: 250px; border-radius: 8px; overflow: hidden; border: 2px dashed #e4e5e7; } /* Headings / sections */ .table-header h3, .table-header h4, .table-title-three h5, .privacy-condition-header h4 { font-weight: 700; } /* Invoices */ .erp-new-invice { min-height: 900px; } .erp-new-invice .invice-detaisl { padding: 20px 0; } .commercial-invoice { margin-bottom: 30px; } .invoice-payment-details { margin-top: 40px; } /* Layout micro‑tweaks */ .production-wrap { padding-inline-end: 60px; } .order-form-section label, .permission label, .role-input-label label { inset-inline-start: 10px; white-space: nowrap; } .table-form-section .responsive-table { min-height: unset; } /* Delete modal */ .delete-modal { text-align: center; margin-bottom: 20px; } .delete-modal h5 { font-size: 20px; font-weight: 600; line-height: 30px; margin-bottom: 5px; } .delete-modal p { font-size: 16px; line-height: 24px; color: var(--clr-light-2); } .multiple-button-group { display: flex; align-items: center; justify-content: center; gap: 24px; } /* Language dropdown */ .dropdown-menu-scroll { max-height: 400px; overflow-y: auto; } .language-li { padding: 10px; display: flex; justify-content: space-between; align-items: center; } .language-check { color: #00ae1c; font-weight: 500; font-size: 16px; } /* Verify / Success modals */ .verify-modal-body h4, .success-modal-body h4, .create-account-body h4 { color: #121212; } .verify-modal-body h4 { font-size: 24px; font-weight: 600; line-height: 36px; } .verify-modal-body .des, .verify-modal-body .des span { color: #4d4d4d; font-size: 16px; font-weight: 500; line-height: 24px; } .verify-modal-body .des { font-weight: 400 !important; } .verify-modal-body .des .reset { color: var(--clr-primary); } .verify-modal-body .code-input { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; } .verify-modal-body .code-input input { width: 51px; height: 58px; padding: 14px 15px; border-radius: 10px; border: 1px solid #d8d8d8; box-shadow: none; } .verify-modal-body .code-input input:focus { border-color: var(--clr-primary); box-shadow: 0 0 0 3px rgba(197,33,39,.15); } .success-content { border-radius: 16px; } .success-modal-body h4 { font-size: 24px; font-weight: 600; line-height: 36px; margin-bottom: 0; padding: 8px 0 16px; } .create-account-body h4 { font-size: 28px; font-weight: 700; line-height: 36px; margin-bottom: 0; } .success-modal-body p { font-size: 16px; line-height: 26px; color: #4d4d4d; margin-bottom: 24px; } /* Sales page */ .sales-container { background: #fff; border-radius: 15px 0 0 15px; } .quick-act-header { background: #fff; padding: 2% 0; width: 100%; margin: 0 auto; border-radius: 10px; } .sales-container .quick-act-title { font-weight: 600; font-size: 16px; white-space: nowrap; } .sales-container .save-product-btn { background: #0ec03b1a; color: #4d4d4d; padding: 2px 6px; border-radius: 4px; } .sales-container .bulk-upload-btn { background: #567df41a; color: #4d4d4d; padding: 2px 6px; border-radius: 4px; } .sales-container .sales-btn { background: #9e0de81a; color: #4d4d4d; padding: 2px 6px; border-radius: 4px; } .sales-container .calculator-btn { background: #007aff1a; color: #4d4d4d; border: none; } .sales-container .dashboard-btn { background: #ff3b301a; color: #4d4d4d; padding: 2px 6px; border-radius: 4px; } /* Inputs & groups */ .input-group .btn-danger, .input-group .btn-outline-secondary { border-top-left-radius: 0; border-bottom-left-radius: 0; } .form-control .form-control { border: 0; } /* Small controls */ .icon { font-weight: 400; font-size: 13px; } .incre-decre { width: 20px; height: 20px; display: inline-grid; place-items: center; border: 1px solid rgba(216,216,216,.6); border-radius: 3px; background: #fff; transition: all var(--tr-fast); } .incre-decre:hover { background: #fef0f1; border-color: var(--clr-primary); color: var(--clr-primary); } .num-input { border-radius: 5px; background: #fff; } .num-input input { background: #fff; width: 95px; } .hr-container { margin-top: 50px; } .hr-container hr { border: 1px solid color-mix(in srgb, var(--clr-primary) 30%, transparent); } .payment-title { font-size: 14px; display: inline-flex; width: fit-content; font-weight: 500; } .amount-container, .save-amount-container { display: grid; grid-template-columns: 1fr 2fr; gap: var(--sp-3); padding-inline-end: 12px; } .payment-container { background: rgba(245,243,243,.5); border-radius: 8px; padding: 12px 15px 33px; } .discount-btn { color: var(--clr-primary); border: 1px solid var(--clr-primary); border-radius: 5px; background: transparent; } /* Products header */ .main-container { background: #fff; padding: 0; } .products-header { border: none; border-radius: 0 12px 12px 0; border-inline-start: 1px solid #d8d8d8; padding: 12px; overflow: hidden; color: #fff; } .main-container .products-container { width: 100%; height: 100%; background: #f9f9f9; position: relative; z-index: 0; } .main-container .products-header .fa-search { color: #fff; } .main-container .products-header .category-btn { background: var(--clr-warning); color: #fff; border: none; height: 48px; border-radius: 6px; padding: 0 15px; } .main-container .products-header .brand-btn { background: var(--clr-info); color: #fff; border: none; height: 48px; border-radius: 6px; padding: 0 15px; } .search-input { border-radius: 6px 0 0 6px; border: 1px solid #ced4da; padding: .5rem; flex-grow: 1; } .btn-category { background: #f8961e; color: #fff; padding-block: 9px; } .btn-brand { background: #1e90ff; color: #fff; padding-block: 9px; } .btn-brand:hover { background: #1b87f2; color: #fff; border: 1px solid #fff; } .btn-category:hover { background: #df8415; color: #fff; border: 1px solid #fff; } .btn-search { background: var(--clr-primary); color: #fff; border-radius: 0 6px 6px 0; } .btn-search:hover { background: var(--clr-primary-600); color: #fff; border: 1px solid var(--clr-primary-600); } /* Products grid & cards */ .products .single-product { background: #fff; border-radius: 8px; border: 1px solid #d8d8d8; width: 100%; margin-top: 4px; cursor: pointer; transition: border-color var(--tr-fast), transform var(--tr-fast); } .products .single-product:hover { border-color: var(--clr-primary); transform: translateY(-2px); } .products .single-product .product-con { padding: 12px; } .products .single-product .pro-img img { border-radius: 6px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; object-fit: cover; width: 100%; height: 145px; } .products .single-product .pro-title { font-weight: 600; font-size: 15px; line-height: 20px; color: var(--clr-dark); } .products .single-product .pro-price { font-weight: 700; font-size: 14px; color: var(--clr-dark); } .products .single-product .pro-category { color: #7c7c7c; font-size: 14px; } .products .single-product .price { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; line-height: 20px; } .products .single-product .price .old-price { font-size: 12px; text-decoration: line-through; color: gray; } /* Quantity input */ .custom-number-input { width: 40px; padding: 5px; border: 1px solid #4a90e2; border-radius: 5px; font-size: 18px; text-align: center; outline: none; transition: border-color var(--tr-fast); } .custom-number-input:focus { border-color: #007bff; } /* Transparent icon button */ .x-btn { border: none; background: #fff; border-radius: 5px; transition: background-color var(--tr-fast); } .x-btn:hover { background: #f5f5f5; } /* Product dropdown */ .product-dropdown { border: 1px solid #e4e5e7; border-radius: 6px; position: relative; background: #fff; } .product-selected { padding: 11px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; } .product-selected #arrow svg { width: 20px; height: 20px; } .product-dropdown-options { position: absolute; top: 90px; inset-inline: 0; border: 1px solid #ddd; border-top: none; max-height: 300px; overflow-y: auto; background: #fff; z-index: 3; display: none; } .product-option-group { border-top: 1px solid #eee; padding: 8px; } .product-option-item:hover { background: #f4f4f4; } .product-left { display: grid; grid-template-columns: 44px 1fr; gap: 10px; } .product-left img { width: 44px; height: 44px; object-fit: cover; border-radius: 4px; border: 1px solid var(--clr-gray-200); } .product-text { font-size: 14px; } .product-title { font-weight: 700; font-size: 15px; } .product-in-stock { color: #34c759; font-weight: 600; } .product-price { font-weight: 700; color: #111; } .product-rotate { transform: rotate(180deg); } /* Status badges */ .padding-status { color: #fb8a00; border: 1px solid #fb8a00; border-radius: 6px; background: #ff920c1a; max-width: 120px; padding: 7px; text-align: center; } .approved-status { color: var(--clr-success); border: 1px solid var(--clr-success); border-radius: 6px; background: color-mix(in srgb, var(--clr-success) 10%, transparent); max-width: 120px; padding: 7px; text-align: center; } .rejected-status { color: var(--clr-danger); border: 1px solid var(--clr-danger); border-radius: 6px; background: color-mix(in srgb, var(--clr-danger) 12%, transparent); max-width: 120px; padding: 7px; text-align: center; } /* Batch selection */ .select-batch { cursor: pointer; transition: background-color var(--tr-fast); } .select-batch:hover { background: color-mix(in srgb, var(--clr-primary) 7%, transparent); } /* Domain instructions */ .domain-instructions ol li { list-style: decimal; padding-inline-start: 3px; } /* Misc */ .form-control.reset-img { display: none; } .folders-files tr a { font-size: 18px; } #fieldsContainer label { top: 0; } /* Helpers to keep compatibility */ .custom-warning-color { color: var(--clr-primary); } .loss-profit-custom-color1 { background: rgba(255, 132, 0, 0.15); } .loss-profit-custom-color2 { background: rgba(255, 181, 101, 1); font-weight: 700; } /* Scrollbar (WebKit) – optional */ *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--clr-gray-300); border-radius: 8px; } *::-webkit-scrollbar-thumb:hover { background: var(--clr-gray-400); }