html { position: relative; min-height: 100%; font-size: 14px; } :root { /* Gold Theme Core */ --vz-gold-primary: #d4af37; --vz-gold-gradient: linear-gradient(135deg, #bf953f 0%, #fcf6ba 45%, #b38728 70%, #fbf5b7 100%); --vz-gold-soft: rgba(212, 175, 55, 0.1); --vz-dark-luxury: #1a1d21; --vz-primary-luxury: #003366; /* Animation Tokens */ --vz-transition-main: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); --vz-entrance-timing: 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards; } /* Global Entrance Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Opacity-only fade � does NOT create a stacking context, safe for modal containers */ @keyframes fadeInOpacity { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInScale { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } } /* #ajax-content-body animation intentionally removed. Any CSS animation/transform on this element creates a stacking context that traps Bootstrap modal z-index inside it, causing the modal to render behind the backdrop (which is appended to at z-index 1050). */ @media (min-width: 768px) { html { font-size: 16px; } } body { margin-bottom: 60px; } /* Ensure Arabic letters use IBM Plex Sans Arabic */ .language span, [lang="ar"], .arabic-text { font-family: 'IBM Plex Sans Arabic', sans-serif !important; } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #d4af37; } .CustomePlaceholder { color: #0c768a !important; } .hr { color: #cecece; } .form-label { font-size: 12px; } [dir=rtl] input { text-align: right; font-size: 11px; } .page-title-box, .page-title mb-0 { color: var(--vz-gold-primary); font-weight: 700; } /* Button & Action Interactions */ .btn { transition: var(--vz-transition-main); border-radius: 6px; } .btn-primary:not(.btn-icon) { background: var(--vz-gold-gradient); border: none; color: var(--vz-dark-luxury) !important; font-weight: 700; position: relative; overflow: hidden; } .btn-primary:not(.btn-icon):hover { filter: brightness(1.05); box-shadow: 0 8px 15px rgba(191, 149, 63, 0.4); transform: translateY(-1px); } .btn-primary:not(.btn-icon):active { transform: translateY(1px); } /* Shimmer effect for buttons on hover */ .btn-primary:not(.btn-icon)::after { content: ""; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.4), transparent); transform: skewX(-30deg); transition: 0.6s; } .btn-primary:not(.btn-icon):hover::after { left: 150%; } .field-validation-error, .validation-summary-errors { font-size: 11px; } @media (min-width: 1024px) { .twitter-bs-wizard .twitter-bs-wizard-nav .wizard-border:before { width: 198px !important; } } .form-check-input { font-size: 14px !important; } .table-responsive, #key-datatable { font-size: 12px !important; } #key-datatable table.dataTable thead > tr > th.sorting:before, table.dataTable thead > tr > th.sorting:after, table.dataTable thead > tr > th.sorting_asc:before, .table.dataTable > thead .sorting:before, table.dataTable > thead .sorting_asc:before, table.dataTable > thead .sorting_asc_disabled:before, table.dataTable > thead .sorting_desc:before, table.dataTable > thead .sorting_desc_disabled:before { right: 0px !important; text-align: left !important; content: "\f0360"; } .table.dataTable > thead .sorting:after, table.dataTable > thead .sorting_asc:after, table.dataTable > thead .sorting_asc_disabled:after, table.dataTable > thead .sorting_desc:after, table.dataTable > thead .sorting_desc_disabled:after { content: "\f035d"; } #key-datatable th { color: var(--vz-primary-luxury); font-weight: 600; } .field-validation-error { font-size: 11px; } .navbar-menu .navbar-nav .nav-link { font-size: 14px !important; padding: .625rem 2.5rem !important; } .navbar-menu .navbar-nav .nav-link i { font-size: 1.1rem; } /* Premium Navbar Brand Box Enhancement */ .navbar-brand-box { background: var(--vz-dark-luxury); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; z-index: 10; padding: 0 20px !important; } .navbar-brand-box:hover { background: rgba(26, 29, 33, 0.95); } .logo-lg img, .logo-sm img { transition: transform 0.3s ease; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); } .navbar-brand-box:hover .logo-lg img { transform: scale(1.02); } #vertical-hover { color: var(--vz-gold-primary) !important; transition: all 0.3s ease; } #vertical-hover:hover { transform: rotate(90deg); text-shadow: 0 0 10px var(--vz-gold-primary); } /* Glassmorphism reflection effect */ .navbar-brand-box::after { content: ""; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.05), transparent); transform: skewX(-25deg); transition: 0.75s; pointer-events: none; } .navbar-brand-box:hover::after { left: 150%; } /* 1. Grainy Texture Overlay for depth */ .navbar-brand-box::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.04; pointer-events: none; z-index: 1; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); } @keyframes logo-entrance { from { opacity: 0; transform: translateY(-20px) scale(0.8); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes logo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes gold-shimmer { 0% { filter: brightness(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); } 50% { filter: brightness(1.3) drop-shadow(0 0 15px rgba(212, 175, 55, 0.5)); } 100% { filter: brightness(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); } } .navbar-brand-box { overflow: hidden; background: linear-gradient(180deg, #1e2227 0%, #1a1d21 100%) !important; } .logo-lg img, .logo-sm img { animation: logo-entrance 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, logo-float 4s infinite ease-in-out 1s; transition: all 0.3s ease; } .navbar-brand-box:hover .logo-lg img, .navbar-brand-box:hover .logo-sm img { animation: gold-shimmer 2s infinite ease-in-out; transform: scale(1.05) translateY(-2px); } /* 3. Sidebar shadow */ .app-menu { box-shadow: 4px 0 30px rgba(0, 0, 0, 0.35) !important; } /* 4. Logo glow */ .vertical-sidebar-enable .logo-sm img { filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.5)); } .topbar-badge { background-color: var(--vz-gold-primary) !important; color: var(--vz-dark-luxury) !important; font-weight: 800; } #topnav-hamburger-icon span span { background-color: var(--vz-gold-primary) !important; } .search-widget-icon { color: var(--vz-gold-primary) !important; } .dropdown-head.bg-primary { background: var(--vz-gold-gradient) !important; } .dropdown-head.bg-primary h6, .dropdown-head.bg-primary .badge { color: var(--vz-dark-luxury) !important; } .header-item:hover i, .header-item.active i { color: var(--vz-gold-primary) !important; } .right-align { text-align: right; } .left-align { text-align: left; } .validation-summary-errors, .field-validation-error { font-size: 11px !important; } .breadcrumb-style { background: linear-gradient(-45deg, #dce3f8 50%, #75d5c8); color: white; padding: 15px 1.5rem; } .breadcrumb-title { color: #b38728; font-weight: 700; } /* footer uses Velzon default styling */ .breadcrumb-item a { color: #b38728 !important; } .breadcrumb-item.active { color: #b38728 !important; } .field-validation-error { margin-bottom: 5px; } .card-title { font-size: 14px !important; } .auth-page-wrapper .auth-page-content { padding-bottom: 0px !important; margin-top: -3% !important; } :is(.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6) { color: #d4af37 !important; } .dropzone .dz-message { margin: 0px !important; } .image-grid { display: grid; /* Ensures 6 equal columns per row */ grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 20px; } .image-grid img { width: 100%; /* Make the image take full width of the grid cell */ height: 100px; /* Set a fixed height for consistency */ object-fit: cover; /* Ensures the image is cropped to fit without stretching */ border-radius: 8px; } .image-grid .image-container { position: relative; } .image-grid .delete-btn { position: absolute; top: 5px; right: 5px; background-color: rgba(255, 0, 0, 0.7); color: white; border: none; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; } .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice, .select2-container--default[dir="ltr"] .select2-selection--multiple .select2-selection__choice { color: #b38728 !important; } .is-invalid .select2-selection--single, .is-invalid .select2-selection--multiple { border-color: var(--vz-form-invalid-border-color) !important; } .is-valid .select2-selection--single, .is-valid .select2-selection--multiple { border-color: var(--vz-form-valid-border-color) !important; } .input-step input { width: 7em !important; text-align: center !important; } .flatpickr-hour, .flatpickr-minute { text-align: center !important; } .toastify on bg-success toastify-right toastify-top { border-radius: 10px !important; } /* Target the input field by its type and placeholder */ input[type="search"][placeholder="???? ???"] { width: 100%; padding-right: 35px; /* Space for the icon */ padding-left: 10px; height: 32px; border-radius: 6px; border: 1px solid #ddd; background-color: #fff; color: #333; box-sizing: border-box; margin-right: 4px; } /* Style the search box container */ input[type="search"][placeholder="???? ???"]::placeholder { color: #888; font-size: 14px; /* Adjust font size if needed */ } /* Positioning the icon */ input[type="search"][placeholder="???? ???"] + .search-icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #888; font-size: 18px; } /* Adjusting parent div to relative if needed */ input[type="search"][placeholder="???? ???"] { position: relative; /* Makes sure the icon aligns correctly */ } .js-AllProductsDatatables > tbody > tr > td { padding-top: 4px !important; padding-bottom: 4px !important; } #productnav-all .table-responsive { overflow-x: unset !important; } /* ---------------------------------------------- Preloader � clean white with cart animation ---------------------------------------------- */ #customPreloader { position: fixed; inset: 0; background: #f4f6fb; z-index: 99999; display: flex; align-items: center; justify-content: center; opacity: 1; visibility: visible; transition: opacity 0.45s ease, visibility 0.45s ease; } .preloader-content { display: flex; flex-direction: column; align-items: center; gap: 18px; animation: preloaderFadeUp 0.5s ease forwards; } @keyframes preloaderFadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* Cart icon circle */ .preloader-cart-wrap { width: 88px; height: 88px; border-radius: 50%; background: #fff; box-shadow: 0 8px 30px rgba(212, 175, 55, 0.14), 0 2px 8px rgba(0,0,0,0.06); display: flex; align-items: center; justify-content: center; animation: preloaderCartFloat 1.8s ease-in-out infinite; } .preloader-cart-wrap i { font-size: 2.4rem; color: #d4af37; line-height: 1; } @keyframes preloaderCartFloat { 0%,100% { transform: translateY(0); box-shadow: 0 8px 30px rgba(212,175,55,0.14), 0 2px 8px rgba(0,0,0,0.06); } 50% { transform: translateY(-9px); box-shadow: 0 18px 40px rgba(212,175,55,0.22), 0 4px 12px rgba(0,0,0,0.08); } } /* Slim progress bar */ .preloader-bar { width: 110px; height: 3px; background: #dce3f5; border-radius: 3px; overflow: hidden; position: relative; } .preloader-bar::after { content: ""; position: absolute; inset-block: 0; left: -50%; width: 50%; background: linear-gradient(90deg, transparent, #d4af37, #fbf5b7, transparent); border-radius: 3px; animation: preloaderBarSlide 1.4s ease-in-out infinite; } @keyframes preloaderBarSlide { 0% { left: -50%; } 100% { left: 150%; } } .preloader-hint { color: #8a96b0; font-size: 0.72rem; letter-spacing: 1.8px; text-transform: uppercase; margin: 0; font-weight: 500; } /* legacy classes still referenced */ .preloader-logo-img { display: block; } .preloader-dots { display: none; } .tw { color: white !important; } /* ================================================ Dark Mode Styles ================================================ */ /* Dark Mode - Breadcrumb */ [data-bs-theme="dark"] .breadcrumb-style { background: linear-gradient(-45deg, #1f2937 50%, #374151); border-bottom: 1px solid #374151; } [data-bs-theme="dark"] .breadcrumb-title { color: #e5e7eb !important; } [data-bs-theme="dark"] .breadcrumb-item a { color: #9ca3af !important; } [data-bs-theme="dark"] .breadcrumb-item.active { color: #d1d5db !important; } /* Dark Mode - Footer */ [data-bs-theme="dark"] .main-content .footer { background: linear-gradient(-45deg, #1f2937 50%, #111827); color: #9ca3af; border-top: 1px solid #374151; } /* Dark Mode - Sidebar */ [data-bs-theme="dark"] .navbar-menu { background-color: #1f2937 !important; border-right: 1px solid #374151; } [data-bs-theme="dark"] .navbar-menu .navbar-nav .nav-link { color: #d1d5db; } [data-bs-theme="dark"] .navbar-menu .navbar-nav .nav-link:hover { color: #ffffff; background-color: rgba(59, 130, 246, 0.1); } [data-bs-theme="dark"] .navbar-menu .navbar-nav .nav-link.active { color: #60a5fa; background-color: rgba(59, 130, 246, 0.15); } [data-bs-theme="dark"] .menu-title { color: #9ca3af !important; } [data-bs-theme="dark"] .navbar-menu .menu-dropdown { background-color: #111827; } [data-bs-theme="dark"] .navbar-menu .menu-dropdown .nav-link { color: #d1d5db; } [data-bs-theme="dark"] .navbar-menu .menu-dropdown .nav-link:hover { color: #ffffff; background-color: rgba(59, 130, 246, 0.1); } /* Dark Mode - Page Title & Headings */ [data-bs-theme="dark"] :is(.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6, .form-label) { color: #e5e7eb !important; } [data-bs-theme="dark"] .page-title-box, [data-bs-theme="dark"] .page-title.mb-0 { color: #e5e7eb; } /* Dark Mode - Cards */ [data-bs-theme="dark"] .card { background-color: #1f2937; border-color: #374151; } [data-bs-theme="dark"] .card-header { background-color: #111827; border-color: #374151; } [data-bs-theme="dark"] .card-title { color: #e5e7eb !important; } /* Dark Mode - Select2 */ [data-bs-theme="dark"] .select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice, [data-bs-theme="dark"] .select2-container--default[dir="ltr"] .select2-selection--multiple .select2-selection__choice { color: #e5e7eb !important; background-color: #374151; border-color: #4b5563; } /* ================================================ Toastr RTL Support ================================================ */ /* RTL - Toastr Container Alignment */ [dir="rtl"] #toast-container > div { padding: 15px 50px 15px 15px !important; } [dir="ltr"] #toast-container > div { padding: 15px 15px 15px 50px !important; } /* RTL - Close Button Position */ [dir="rtl"] .toast-close-button { right: auto !important; left: -0.3em !important; float: left !important; } [dir="ltr"] .toast-close-button { left: auto !important; right: -0.3em !important; float: right !important; } /* RTL - Toast Icon Position */ [dir="rtl"] .toast-info, [dir="rtl"] .toast-error, [dir="rtl"] .toast-success, [dir="rtl"] .toast-warning { background-position: calc(100% - 15px) center !important; padding-right: 50px !important; padding-left: 15px !important; } [dir="ltr"] .toast-info, [dir="ltr"] .toast-error, [dir="ltr"] .toast-success, [dir="ltr"] .toast-warning { background-position: 15px center !important; padding-left: 50px !important; padding-right: 15px !important; } /* RTL - Toast Progress Bar */ [dir="rtl"] .toast-progress { right: 0 !important; left: auto !important; } [dir="ltr"] .toast-progress { left: 0 !important; right: auto !important; } /* ================================================ Premium Modal & Dialog Enhancements ================================================ */ .modal-content { border: 1px solid var(--vz-gold-soft); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4); } /* Modal Backdrop */ .modal-backdrop.show { opacity: 0.5; } /* ================================================ Dropdown Menu Animations ================================================ */ .dropdown-menu { animation: fadeInUp 0.3s cubic-bezier(0.23, 1, 0.32, 1); border: 1px solid var(--vz-gold-soft); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); } .dropdown-item { transition: var(--vz-transition-main); padding: 0.5rem 1.2rem; } .dropdown-item:hover { background-color: var(--vz-gold-soft); color: var(--vz-gold-primary); transform: translateX(5px); } /* ================================================ Premium No Data Placeholders ================================================ */ .no-data-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-height: 300px; padding: 2rem; text-align: center; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border: 1px dashed var(--vz-gold-soft); border-radius: 12px; transition: var(--vz-transition-main); position: relative; overflow: hidden; } .no-data-placeholder:hover { background: rgba(255, 255, 255, 0.04); border-color: var(--vz-gold-primary); box-shadow: inset 0 0 20px rgba(212, 175, 55, 0.05); } .no-data-placeholder i { font-size: 1.5rem; background: var(--vz-gold-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 1.5rem; filter: drop-shadow(0 4px 10px rgba(191, 149, 63, 0.3)); animation: floatingIcon 3s infinite ease-in-out; } .no-data-placeholder h5 { color: var(--vz-gold-primary); font-weight: 700; margin-bottom: 0.75rem; letter-spacing: 0.5px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .no-data-placeholder p { color: #878a99; font-size: 0.95rem; max-width: 320px; margin: 0 auto; line-height: 1.6; } @keyframes floatingIcon { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* Ensure centering for table empty states */ .table-empty-state { padding: 3rem !important; text-align: center; } .table-empty-state i { font-size: 2.5rem; color: var(--vz-gold-soft); margin-bottom: 1rem; display: block; } .validation-summary-errors { padding-bottom: 0px !important; margin-bottom: 10px !important; } /* DataTables Search Box Enhancement */ .dataTables_filter input { border: 1px solid #ced4da; border-radius: 0.375rem; padding: 0.5rem 1rem; padding-left: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cpath d='m21 21-4.35-4.35'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 0.75rem center; background-size: 1rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; min-width: 200px; } .dataTables_filter input:focus { border-color: #d4af37; box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.15); outline: none; } .dataTables_filter label { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0; font-weight: 500; color: #495057; } /* DataTables Length Menu (Entries Dropdown) Enhancement */ .dataTables_length select { border: 1px solid #ced4da; border-radius: 0.375rem; padding: 0.5rem 2rem 0.5rem 1rem; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 1rem; appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; min-width: 80px; } .dataTables_length select:focus { border-color: #d4af37; box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.15); outline: none; } .dataTables_length label { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0; font-weight: 500; color: #495057; } /* DataTables Info & Pagination Enhancement */ .dataTables_info { color: #6c757d; font-size: 0.875rem; padding-top: 0.75rem; } .dataTables_paginate .paginate_button { border-radius: 0.375rem !important; margin: 0 2px; } .dataTables_paginate .paginate_button.current { background: linear-gradient(135deg, #d4af37 0%, #b38728 100%) !important; border-color: #d4af37 !important; color: #fff !important; } .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) { background: #f3f6f9 !important; border-color: #ced4da !important; color: #d4af37 !important; } /* RTL Support for Arabic */ [dir="rtl"] .dataTables_filter input { padding-left: 1rem; padding-right: 2.5rem; background-position: calc(100% - 0.75rem) center; } [dir="rtl"] .dataTables_length select { padding-left: 2rem; padding-right: 1rem; background-position: left 0.5rem center; } /* Layout: Search and Length dropdown on the same line */ .dataTables_wrapper .row:first-child { display: flex !important; flex-wrap: nowrap !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 1.25rem !important; } .dataTables_wrapper .row:first-child > div { width: auto !important; padding: 0 !important; margin: 0 !important; flex: 0 0 auto !important; max-width: none !important; } /* Swap order: Search on Left (Order 1), Length on Right (Order 2) */ /* DataTables typically renders: [1] Length, [2] Filter */ .dataTables_wrapper .row:first-child > div:first-child { order: 2 !important; } .dataTables_wrapper .row:first-child > div:last-child { order: 1 !important; } .dataTables_filter label { justify-content: flex-start !important; } .dataTables_length label { justify-content: flex-end !important; } /* RTL Logic: Justify content naturally swaps them */ [dir="rtl"] .dataTables_filter label { justify-content: flex-end !important; } [dir="rtl"] .dataTables_length label { justify-content: flex-start !important; } .dataTables_wrapper .row:last-child { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #e9ebec; } .dt-spinner { padding: 2rem; } .product-img { width: 50px; height: 50px; object-fit: cover; border-radius: 4px; } .product-placeholder { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background-color: var(--vz-light); border-radius: 4px; } .product-thumbnail-slider { height: 350px; } .product-nav-slider { height: 80px; } .product-nav-slider .swiper-slide { opacity: 0.4; cursor: pointer; } .product-nav-slider .swiper-slide-thumb-active { opacity: 1; border: 2px solid #d4af37; } /* Country Flag Dropdown RTL Fix */ [dir="rtl"] [data-input-flag] .dropdown-menu { text-align: right; left: 0 !important; right: auto !important; } [dir="rtl"] [data-input-flag] .search-countryList { text-align: right; } [dir="rtl"] [data-input-flag] .country-name { order: 1; } [dir="rtl"] [data-input-flag] .countrylist-codeno { order: 2; } .profile-photo-edit { transition: all 0.3s ease; } .profile-photo-edit:hover { transform: scale(1.1); filter: brightness(0.9); } .avatar-title { box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .user-profile-image { object-fit: cover; border: 4px solid #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.1); } .auth-pass-inputgroup .form-control.is-valid { background-size: calc(6.75em + .5rem) calc(.75em + .5rem) !important; } /* ================================================ Premium Card Enhancements ================================================ */ .card { border: 0; border-radius: 12px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); transition: box-shadow 0.3s ease, transform 0.3s ease; } .card:hover { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1); } .card-header { background: transparent; border-bottom: 1px solid rgba(212, 175, 55, 0.15); padding: 1rem 1.25rem; } .card-title { font-weight: 700 !important; letter-spacing: 0.2px; } /* Gold accent left border on feature cards */ .card-gold-accent { border-left: 3px solid var(--vz-gold-primary) !important; } /* Stat cards */ .card-animate { position: relative; overflow: hidden; border-radius: 14px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .card-animate:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12) !important; } .card-animate::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--vz-gold-gradient); opacity: 0; transition: opacity 0.3s ease; } .card-animate:hover::before { opacity: 1; } /* Avatar icon circles on stat cards */ .avatar-sm .avatar-title { font-size: 1.3rem; border-radius: 10px !important; } /* ================================================ Enhanced Breadcrumb / Page Title Area ================================================ */ .breadcrumb-style { background: linear-gradient(120deg, #f3eaff 0%, #ede0ff 100%); border-bottom: 1px solid rgba(212, 175, 55, 0.2); padding: 14px 1.5rem; } [data-bs-theme="dark"] .breadcrumb-style { background: linear-gradient(120deg, #162040 0%, #1a2236 100%); } .breadcrumb-title { font-size: 1.1rem; font-weight: 700; color: var(--vz-primary-luxury) !important; display: flex; align-items: center; gap: 0.5rem; } .breadcrumb-title::before { content: ""; display: inline-block; width: 4px; height: 18px; background: var(--vz-gold-gradient); border-radius: 4px; } .breadcrumb { margin-bottom: 0; font-size: 0.8rem; } .breadcrumb-item + .breadcrumb-item::before { color: #adb5bd; } /* ================================================ Premium Form Inputs ================================================ */ .form-control, .form-select { border-radius: 8px; border: 1px solid #e2e5ef; padding: 0.5rem 0.9rem; font-size: 0.875rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; background-color: #fafbfc; } .form-control:focus, .form-select:focus { border-color: var(--vz-gold-primary); box-shadow: 0 0 0 0.2rem rgba(212, 175, 55, 0.18); background-color: #fff; } .form-label { font-size: 0.8rem; font-weight: 600; color: var(--vz-primary-luxury); margin-bottom: 0.35rem; text-transform: uppercase; letter-spacing: 0.5px; } .input-group-text { border-radius: 8px; background-color: #f3f6f9; border-color: #e2e5ef; color: var(--vz-primary-luxury); font-size: 0.9rem; } /* ================================================ Enhanced Badge Styles ================================================ */ .badge { font-weight: 600; letter-spacing: 0.4px; padding: 0.35em 0.7em; border-radius: 6px; font-size: 0.72rem; } .badge-soft-success { background-color: rgba(10, 179, 156, 0.1); color: #0ab39c; } .badge-soft-danger { background-color: rgba(240, 101, 72, 0.1); color: #f06548; } .badge-soft-warning { background-color: rgba(247, 184, 75, 0.1); color: #f7b84b; } .badge-soft-info { background-color: rgba(41, 156, 219, 0.1); color: #299cdb; } .badge-soft-primary { background-color: rgba(212, 175, 55, 0.1); color: #d4af37; } .badge-gold { background: var(--vz-gold-gradient); color: var(--vz-dark-luxury); font-weight: 700; } /* ================================================ Table Enhancements ================================================ */ .table { font-size: 0.875rem; } .table > thead tr th { font-weight: 700; font-size: 0.72rem; letter-spacing: 0.6px; color: var(--vz-primary-luxury); background-color: #f8f9fa; border-bottom: 2px solid rgba(212, 175, 55, 0.2); padding: 0.7rem 1rem; white-space: nowrap; } .table > tbody tr { transition: background-color 0.15s ease; } .table > tbody tr:hover { background-color: rgba(212, 175, 55, 0.04); } .table > tbody tr td { padding: 0.75rem 1rem; vertical-align: middle; border-bottom: 1px solid rgba(0, 0, 0, 0.04); } .table-card { border-radius: 0 0 12px 12px; overflow: hidden; } /* ================================================ Section / Filter Card Headers ================================================ */ .filter-card { background: #fafbff; border: 1px solid rgba(212, 175, 55, 0.15); border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 1.25rem; } [data-bs-theme="dark"] .filter-card { background: #1a2236; border-color: rgba(212, 175, 55, 0.1); } /* Section title within pages */ .section-title { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--vz-primary-luxury); padding-bottom: 0.5rem; border-bottom: 2px solid rgba(212, 175, 55, 0.3); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } /* ================================================ Back To Top Button ================================================ */ #back-to-top { background: var(--vz-gold-gradient) !important; border: none !important; color: var(--vz-dark-luxury) !important; width: 40px; height: 40px; border-radius: 50% !important; box-shadow: 0 6px 20px rgba(191, 149, 63, 0.4) !important; transition: transform 0.3s ease, box-shadow 0.3s ease !important; } #back-to-top:hover { transform: translateY(-3px) !important; box-shadow: 0 10px 28px rgba(191, 149, 63, 0.5) !important; } /* ================================================ Footer � Velzon default (no override) ================================================ */ .footer i.mdi-heart { animation: heartbeat 1.4s infinite ease-in-out; } @keyframes heartbeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } } /* ================================================ Custom Scrollbar ================================================ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(212, 175, 55, 0.35); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(212, 175, 55, 0.65); } /* ================================================ Alert Enhancements ================================================ */ .alert { border-radius: 10px; border: none; font-size: 0.875rem; border-left: 4px solid transparent; } .alert-success { background-color: rgba(10, 179, 156, 0.08); border-left-color: #0ab39c; color: #0a7a68; } .alert-danger { background-color: rgba(240, 101, 72, 0.08); border-left-color: #f06548; color: #c0392b; } .alert-warning { background-color: rgba(247, 184, 75, 0.08); border-left-color: #f7b84b; color: #a0622a; } .alert-info { background-color: rgba(41, 156, 219, 0.08); border-left-color: #299cdb; color: #1d6e9e; } /* ================================================ Sidebar Active Item Gold Indicator ================================================ */ .navbar-menu .navbar-nav .nav-link.active { position: relative; } .navbar-menu .navbar-nav .nav-link.active::before { content: ""; position: absolute; left: 0; top: 20%; height: 60%; width: 3px; background: var(--vz-gold-gradient); border-radius: 0 3px 3px 0; } /* ================================================ Progress Bars ================================================ */ .progress { border-radius: 8px; background-color: rgba(0, 0, 0, 0.06); height: 6px; } .progress-bar { border-radius: 8px; transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); } /* ================================================ Pagination Enhancement ================================================ */ .page-link { border-radius: 6px !important; margin: 0 2px; border: 1px solid #e2e5ef; color: var(--vz-primary-luxury); font-size: 0.82rem; padding: 0.35rem 0.65rem; transition: all 0.2s ease; } .page-link:hover { background-color: var(--vz-gold-soft); border-color: var(--vz-gold-primary); color: var(--vz-gold-primary); } .page-item.active .page-link { background: var(--vz-gold-gradient) !important; border-color: transparent !important; color: var(--vz-dark-luxury) !important; font-weight: 700; } /* ================================================ Topbar Enhancement ================================================ */ .app-topbar { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important; } /* ================================================ Action Button Groups (Edit/Delete row actions) ================================================ */ .action-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 0.875rem; transition: all 0.2s ease; } .action-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12); } /* ================================================ Soft Button Variants ================================================ */ .btn-soft-primary { background-color: rgba(212, 175, 55, 0.1); color: #d4af37; border: none; } .btn-soft-primary:hover { background-color: #d4af37; color: #fff; } .btn-soft-success { background-color: rgba(10, 179, 156, 0.1); color: #0ab39c; border: none; } .btn-soft-success:hover { background-color: #0ab39c; color: #fff; } .btn-soft-danger { background-color: rgba(240, 101, 72, 0.1); color: #f06548; border: none; } .btn-soft-danger:hover { background-color: #f06548; color: #fff; } .btn-soft-warning { background-color: rgba(247, 184, 75, 0.1); color: #f7b84b; border: none; } .btn-soft-warning:hover { background-color: #f7b84b; color: #fff; } .btn-soft-info { background-color: rgba(41, 156, 219, 0.1); color: #299cdb; border: none; } .btn-soft-info:hover { background-color: #299cdb; color: #fff; } /* ================================================ Empty State (No Data) � Compact Variant ================================================ */ .empty-state-sm { padding: 2rem; text-align: center; color: #adb5bd; } .empty-state-sm i { font-size: 2.5rem; opacity: 0.4; display: block; margin-bottom: 0.75rem; } .empty-state-sm p { margin: 0; font-size: 0.875rem; } /* ================================================ Page Content Entrance Animation ================================================ */ .page-content .container-fluid > #ajax-content-body > .row, .page-content .container-fluid > #ajax-content-body > .card { animation: fadeInUp 0.4s cubic-bezier(0.23, 1, 0.32, 1) both; } /* ================================================ Auth Pages Enhancement ================================================ */ .auth-page-wrapper { background: linear-gradient(135deg, #f3eaff 0%, #ede0ff 100%); min-height: 100vh; } [data-bs-theme="dark"] .auth-page-wrapper { background: linear-gradient(135deg, #141824 0%, #1a1d21 100%); } .auth-card { border-radius: 18px !important; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12) !important; } /* ================================================ Store / Merchant Cards ================================================ */ .store-card { border-radius: 14px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; } .store-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15) !important; } .store-card .store-card-banner { height: 80px; background: var(--vz-gold-gradient); position: relative; } .store-card .store-card-logo { position: absolute; bottom: -24px; left: 50%; transform: translateX(-50%); width: 48px; height: 48px; border-radius: 50%; border: 3px solid #fff; background: #fff; object-fit: cover; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); } /* ================================================ Template Marketplace Cards ================================================ */ .template-card { cursor: pointer; border-radius: 14px; overflow: hidden; border: 2px solid transparent; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07); } .template-card:hover { border-color: var(--vz-gold-primary); transform: translateY(-5px); box-shadow: 0 12px 30px rgba(212, 175, 55, 0.2); } .template-card.selected { border-color: var(--vz-gold-primary); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.3); } .template-card .template-preview { height: 140px; overflow: hidden; position: relative; } .template-card .template-badge { position: absolute; top: 8px; right: 8px; } /* ================================================ Dark Mode � Additional Overrides ================================================ */ [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background-color: #162040; border-color: #2d3748; color: #e2e8f0; } [data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus { background-color: #222d3d; border-color: var(--vz-gold-primary); } [data-bs-theme="dark"] .table > thead tr th { background-color: #162040; color: #94a3b8; border-bottom-color: rgba(212, 175, 55, 0.15); } [data-bs-theme="dark"] .table > tbody tr:hover { background-color: rgba(212, 175, 55, 0.04); } [data-bs-theme="dark"] .input-group-text { background-color: #2d3748; border-color: #2d3748; color: #94a3b8; } [data-bs-theme="dark"] .card { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); } [data-bs-theme="dark"] .card-header { border-bottom-color: rgba(212, 175, 55, 0.1); } [data-bs-theme="dark"] .alert-success { background-color: rgba(10, 179, 156, 0.12); color: #4ecca3; } [data-bs-theme="dark"] .alert-danger { background-color: rgba(240, 101, 72, 0.12); color: #ff8577; } [data-bs-theme="dark"] .page-link { background-color: #162040; border-color: #2d3748; color: #94a3b8; } [data-bs-theme="dark"] .page-link:hover { background-color: rgba(212, 175, 55, 0.12); border-color: var(--vz-gold-primary); color: var(--vz-gold-primary); } [data-bs-theme="dark"] .filter-card { background: #1a2236; border-color: rgba(212, 175, 55, 0.1); } /* dark footer uses Velzon default */ /* Preloader � JS adds .hidden on window.load */ #customPreloader.hidden { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* ---------------------------------------------- Sidebar � Professional Navy Blue -------------------??-------------------------- */ /* -- Sidebar Design Tokens -------------------------- */ :root[data-sidebar=dark] { --sb-bg: #0f1729; --sb-bg-end: #162040; --sb-item: #8fa3c0; --sb-item-hover: #e2e8f4; --sb-active-bg: rgba(99,102,241,0.18); --sb-active-color: #ffffff; --sb-active-accent: #6366f1; --sb-sub-color: #6b82a0; --sb-sub-active: #a5b4fc; --sb-title: rgba(148,163,184,0.4); --sb-border: rgba(255,255,255,0.05); --vz-vertical-menu-bg: #0f1729; --vz-vertical-menu-border: rgba(255,255,255,0.05); --vz-vertical-menu-item-color: #8fa3c0; --vz-vertical-menu-item-hover-color: #e2e8f4; --vz-vertical-menu-item-active-color: #ffffff; --vz-vertical-menu-item-active-bg: rgba(99,102,241,0.18); --vz-vertical-menu-sub-item-color: #6b82a0; --vz-vertical-menu-sub-item-hover-color: #e2e8f4; --vz-vertical-menu-sub-item-active-color: #a5b4fc; --vz-vertical-menu-title-color: rgba(148,163,184,0.4); --vz-twocolumn-menu-iconview-bg: #0a1020; --vz-vertical-menu-box-shadow: 4px 0 30px rgba(0,0,0,0.35); --vz-vertical-menu-dropdown-box-shadow: 0 8px 32px rgba(0,0,0,0.4); } /* -- Sidebar base — deep navy gradient ------------- */ [data-sidebar=dark] .app-menu, [data-sidebar=dark] .navbar-menu { background: linear-gradient(180deg, #0f1729 0%, #162040 100%) !important; border-right: 1px solid rgba(255,255,255,0.04) !important; } [dir="rtl"] [data-sidebar=dark] .app-menu, [dir="rtl"] [data-sidebar=dark] .navbar-menu { border-right: none !important; border-left: 1px solid rgba(255,255,255,0.04) !important; } /* -- Logo area separator --------------------------- */ [data-sidebar=dark] .navbar-brand-box { border-bottom: 1px solid rgba(255,255,255,0.06) !important; } /* -- Nav links base -------------------------------- */ [data-sidebar=dark] #sidebar-menu .nav-item .nav-link { color: #8fa3c0 !important; font-size: 0.845rem !important; font-weight: 500 !important; border-radius: 8px !important; margin: 1px 10px !important; padding: 9px 12px !important; transition: background 0.18s ease, color 0.18s ease !important; border-left: none !important; border-right: none !important; } /* -- Hover ----------------------------------------- */ [data-sidebar=dark] #sidebar-menu .nav-item .nav-link:not(.active):hover { background: rgba(255,255,255,0.06) !important; color: #e2e8f4 !important; } /* -- Active item — indigo pill --------------------- */ [data-sidebar=dark] #sidebar-menu .nav-item .nav-link.active, [data-sidebar=dark] #sidebar-menu .nav-item.mm-active > .nav-link { background: rgba(99,102,241,0.2) !important; color: #ffffff !important; border-left: none !important; border-right: none !important; position: relative; } /* Active indicator — left (LTR) / right (RTL) pill bar */ [data-sidebar=dark] #sidebar-menu .nav-item .nav-link.active::before, [data-sidebar=dark] #sidebar-menu .nav-item.mm-active > .nav-link::before { content: ""; position: absolute; left: -10px; top: 20%; height: 60%; width: 3px; background: #6366f1; border-radius: 0 3px 3px 0; } [dir="rtl"] [data-sidebar=dark] #sidebar-menu .nav-item .nav-link.active::before, [dir="rtl"] [data-sidebar=dark] #sidebar-menu .nav-item.mm-active > .nav-link::before { left: auto; right: -10px; border-radius: 3px 0 0 3px; } /* Active icon - bright indigo */ [data-sidebar=dark] #sidebar-menu .nav-item .nav-link.active i, [data-sidebar=dark] #sidebar-menu .nav-item.mm-active > .nav-link i { color: #a5b4fc !important; } /* -- Sub-menu -------------------------------------- */ [data-sidebar=dark] #sidebar-menu .menu-dropdown .nav-item .nav-link { color: #6b82a0 !important; font-size: 0.8rem !important; padding: 7px 12px 7px 32px !important; margin: 1px 10px !important; border-radius: 6px !important; } [data-sidebar=dark] #sidebar-menu .menu-dropdown .nav-item .nav-link:hover { color: #e2e8f4 !important; background: rgba(255,255,255,0.05) !important; } [data-sidebar=dark] #sidebar-menu .menu-dropdown .nav-item .nav-link.active { color: #a5b4fc !important; background: rgba(99,102,241,0.12) !important; font-weight: 600 !important; } /* -- Section title labels -------------------------- */ [data-sidebar=dark] .menu-title { color: rgba(148,163,184,0.45) !important; font-size: 0.6rem !important; font-weight: 700 !important; letter-spacing: 1.8px !important; text-transform: uppercase !important; padding: 16px 22px 6px !important; } /* -- Thin scrollbar -------------------------------- */ #scrollbar::-webkit-scrollbar { width: 3px; } #scrollbar::-webkit-scrollbar-track { background: transparent; } #scrollbar::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.3); border-radius: 3px; } #scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(99,102,241,0.55); } /* ---------------------------------------------- Floating Widgets � WhatsApp & AI Chatbot ---------------------------------------------- */ .floating-widgets { position: fixed; bottom: 28px; right: 28px; z-index: 9990; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; } html[dir="rtl"] .floating-widgets { right: auto; left: 28px; align-items: flex-start; } /* Action buttons */ .fw-btn { width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 6px 22px rgba(0,0,0,0.28); transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s ease; text-decoration: none; color: #fff !important; position: relative; outline: none; } .fw-btn:hover { transform: translateY(-4px) scale(1.07); box-shadow: 0 10px 32px rgba(0,0,0,0.32); color: #fff !important; } .fw-btn:focus-visible { outline: 3px solid rgba(255,255,255,0.5); outline-offset: 2px; } .fw-whatsapp { background: linear-gradient(135deg, #2dc665 0%, #128c7e 100%); } .fw-chatbot { background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); overflow: visible; } /* WhatsApp pulse ring */ .fw-whatsapp::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(45,198,101,0.45); animation: fwPulse 2.5s ease infinite; } @keyframes fwPulse { 0%,100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 0; transform: scale(1.38); } } /* Tooltip */ .fw-tooltip { position: absolute; right: 66px; top: 50%; transform: translateY(-50%); background: rgba(12,15,28,0.92); color: #fff; padding: 5px 13px; border-radius: 8px; font-size: 0.74rem; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.18s ease; backdrop-filter: blur(6px); } .fw-tooltip::after { content: ""; position: absolute; right: -5px; top: 50%; transform: translateY(-50%); border: 5px solid transparent; border-right: none; border-left-color: rgba(12,15,28,0.92); } html[dir="rtl"] .fw-tooltip { right: auto; left: 66px; } html[dir="rtl"] .fw-tooltip::after { right: auto; left: -5px; border-left: none; border-right-color: rgba(12,15,28,0.92); } .fw-btn:hover .fw-tooltip { opacity: 1; } /* -- Chatbot Panel ------------------------------ */ .chatbot-panel { position: fixed; bottom: 100px; right: 28px; width: 360px; height: 540px; background: #fff; border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.04); z-index: 9989; display: flex; flex-direction: column; overflow: hidden; transform: scale(0.88) translateY(24px); opacity: 0; pointer-events: none; transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), opacity 0.22s ease; } html[dir="rtl"] .chatbot-panel { right: auto; left: 28px; } .chatbot-panel.open { transform: scale(1) translateY(0); opacity: 1; pointer-events: auto; } [data-bs-theme="dark"] .chatbot-panel { background: #0f1729; box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(99,102,241,0.12); } /* -- Floating button robot wrap --------------------- */ .fw-chatbot { overflow: visible !important; } .fw-chatbot-owl { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; position: relative; top: -3px; } .fw-chatbot-close { font-size: 1.4rem; color: #fff; display: none; } /* Header */ .chatbot-header { background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%); padding: 14px 18px; padding-inline-end: 90px; color: #fff; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; position: relative; overflow: visible; min-height: 70px; } /* Owl character protruding from header top-right */ .chatbot-header-owl { position: absolute; inset-inline-end: 10px; bottom: 0; width: 75px; height: 88px; pointer-events: none; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.25)); } .chatbot-bot-avatar { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.22); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; position: relative; } .chatbot-online-dot { position: absolute; bottom: 1px; right: 1px; width: 10px; height: 10px; background: #6366f1; border-radius: 50%; border: 2px solid #4f46e5; animation: onlinePulse 2s ease-in-out infinite; } html[dir="rtl"] .chatbot-online-dot { right: auto; left: 1px; } @keyframes onlinePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(99,102,241,0.5); } 50% { box-shadow: 0 0 0 4px rgba(99,102,241,0); } } .chatbot-header h6 { margin: 0; font-weight: 700; font-size: 0.9rem; color: #fff !important; } .chatbot-status-label { font-size: 0.71rem; color: rgba(255,255,255,0.75); display: flex; align-items: center; gap: 4px; } .chatbot-status-dot { width: 6px; height: 6px; background: #6366f1; border-radius: 50%; display: inline-block; } .chatbot-close-btn { background: rgba(255,255,255,0.18); border: none; color: #fff; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.05rem; transition: background 0.15s; flex-shrink: 0; } .chatbot-close-btn:hover { background: rgba(255,255,255,0.32); } /* Messages area */ .chatbot-messages { flex: 1; overflow-y: auto; padding: 14px 14px 8px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; scrollbar-color: rgba(99,102,241,0.2) transparent; background: #f6f7fb; } [data-bs-theme="dark"] .chatbot-messages { background: #0f1729; } .chatbot-messages::-webkit-scrollbar { width: 4px; } .chatbot-messages::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.2); border-radius: 4px; } /* Chat rows */ .chat-row { display: flex; align-items: flex-end; gap: 7px; animation: chatMsgIn 0.22s ease forwards; } .chat-row-bot { justify-content: flex-start; } .chat-row-user { justify-content: flex-end; } [dir="rtl"] .chat-row-bot { flex-direction: row-reverse; } [dir="rtl"] .chat-row-user { flex-direction: row-reverse; } @keyframes chatMsgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Bot mini-avatar in message � small robot */ .chat-bot-icon { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #ede0ff, #a5b4fc); border: 1.5px solid rgba(99,102,241,0.3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-bottom: 2px; overflow: hidden; padding: 2px; } /* Bubbles */ .chat-bubble { max-width: 80%; padding: 9px 13px; border-radius: 18px; font-size: 0.815rem; line-height: 1.55; word-break: break-word; } .chat-bubble-bot { background: #fff; color: #374151; border-radius: 4px 18px 18px 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.07); } [dir="rtl"] .chat-bubble-bot { border-radius: 18px 4px 18px 18px; } [data-bs-theme="dark"] .chat-bubble-bot { background: #162040; color: #c5d0e6; } .chat-bubble-user { background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff; border-radius: 18px 18px 4px 18px; box-shadow: 0 3px 10px rgba(99,102,241,0.3); } [dir="rtl"] .chat-bubble-user { border-radius: 18px 18px 18px 4px; } /* Typing animation */ .chat-typing { display: flex; gap: 5px; padding: 12px 14px; align-items: center; } .chat-typing span { width: 7px; height: 7px; background: #4f46e5; border-radius: 50%; animation: typingBounce 1.4s ease-in-out infinite; opacity: 0.5; } .chat-typing span:nth-child(2) { animation-delay: 0.18s; } .chat-typing span:nth-child(3) { animation-delay: 0.36s; } @keyframes typingBounce { 0%,60%,100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-7px); opacity: 1; } } /* "Ask another" reset button inside bot bubble */ .chat-reset-btn { display: inline-flex; align-items: center; margin-top: 9px; padding: 5px 12px; background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.25); border-radius: 16px; font-size: 0.74rem; color: #4f46e5; cursor: pointer; font-weight: 600; transition: background 0.15s, color 0.15s; } .chat-reset-btn:hover { background: #4f46e5; color: #fff; } [data-bs-theme="dark"] .chat-reset-btn { color: #a5b4fc; border-color: rgba(99,102,241,0.35); background: rgba(99,102,241,0.12); } /* Quick-reply chips area */ .chatbot-quick-replies { padding: 10px 14px 6px; border-top: 1px solid rgba(0,0,0,0.06); background: #fff; flex-shrink: 0; max-height: 140px; overflow-y: auto; scrollbar-width: thin; } [data-bs-theme="dark"] .chatbot-quick-replies { background: #0f1729; border-top-color: rgba(255,255,255,0.07); } .quick-replies-label { font-size: 0.68rem; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.7px; margin: 0 0 6px; font-weight: 600; } .chat-chip { display: inline-flex; align-items: center; margin: 3px; padding: 5px 11px; border: 1px solid rgba(99,102,241,0.3); border-radius: 16px; font-size: 0.76rem; color: #4f46e5; cursor: pointer; background: #faf9ff; transition: all 0.15s ease; font-weight: 500; text-align: start; } .chat-chip:hover { background: #4f46e5; color: #fff; border-color: #4f46e5; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(99,102,241,0.25); } [data-bs-theme="dark"] .chat-chip { background: #162040; color: #a5b4fc; border-color: rgba(99,102,241,0.3); } [data-bs-theme="dark"] .chat-chip:hover { background: #4f46e5; color: #fff; } .chat-no-results { color: #9ca3af; font-size: 0.8rem; padding: 8px 0; margin: 0; } /* Bottom input bar */ .chatbot-input-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid rgba(0,0,0,0.07); background: #fff; flex-shrink: 0; } [data-bs-theme="dark"] .chatbot-input-bar { background: #0f1729; border-top-color: rgba(255,255,255,0.07); } .chatbot-input { flex: 1; border: 1px solid rgba(0,0,0,0.12); border-radius: 22px; padding: 8px 15px; font-size: 0.81rem; outline: none; background: #f6f7fb; color: #374151; transition: border-color 0.2s, box-shadow 0.2s; } .chatbot-input:focus { border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(99,102,241,0.12); background: #fff; } [data-bs-theme="dark"] .chatbot-input { background: #162040; border-color: rgba(255,255,255,0.1); color: #e0e6f0; } [data-bs-theme="dark"] .chatbot-input:focus { border-color: #4f46e5; } .chatbot-send-btn { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #6366f1, #4f46e5); border: none; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.95rem; flex-shrink: 0; transition: transform 0.18s ease, box-shadow 0.18s ease; box-shadow: 0 3px 10px rgba(99,102,241,0.3); } .chatbot-send-btn:hover { transform: scale(1.1); box-shadow: 0 5px 16px rgba(99,102,241,0.45); } /* ------------------------------------------------------ System-wide Look & Feel Enhancement Theme: Clean � Professional � Indigo-Gold ------------------------------------------------------ */ /* -- Design tokens ------------------------------------ */ :root { --sys-primary: #405189; --sys-primary-rgb: 64, 81, 137; --sys-gold: #d4af37; --sys-surface: #ffffff; --sys-bg: #f3f6f9; --sys-border: rgba(0, 0, 0, 0.08); --sys-text: #374151; --sys-text-muted: #6b7280; --sys-radius: 10px; --sys-shadow-sm: 0 1px 4px rgba(0,0,0,0.07); --sys-shadow-md: 0 4px 16px rgba(0,0,0,0.10); --sys-shadow-lg: 0 10px 40px rgba(0,0,0,0.13); --sys-transition: 0.2s ease; } /* -- Page background ---------------------------------- */ .page-content { background: var(--sys-bg) !important; } /* -- Typography --------------------------------------- */ :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6) { color: var(--sys-primary) !important; font-weight: 700; letter-spacing: -0.01em; } .form-label { color: var(--sys-text) !important; font-weight: 600; font-size: 0.82rem; } p, .text-body { color: var(--sys-text); } /* -- Topbar ------------------------------------------- */ #page-topbar { background: #ffffff !important; border-bottom: 1px solid var(--sys-border) !important; box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important; } /* -- Cards -------------------------------------------- */ .card { background: var(--sys-surface); border: 1px solid rgba(0,0,0,0.06) !important; border-radius: 12px !important; box-shadow: var(--sys-shadow-sm) !important; transition: box-shadow var(--sys-transition), transform var(--sys-transition); } .card:hover { box-shadow: var(--sys-shadow-md) !important; transform: translateY(-1px); } .card-header { background: transparent !important; border-bottom: 1px solid rgba(0,0,0,0.06) !important; border-radius: 12px 12px 0 0 !important; padding: 14px 20px; font-weight: 700; font-size: 0.9rem; color: var(--sys-primary) !important; } .card-body { padding: 20px; } /* KPI stat cards � colored top stripe */ .card.card-animate { position: relative; overflow: hidden; border-top: 3px solid var(--sys-primary) !important; } .card.card-animate .card-body { padding: 16px 20px; } /* -- Tables ------------------------------------------- */ .table > thead > tr > th { background: #f8f9fc !important; border-bottom: 2px solid rgba(64,81,137,0.12) !important; color: var(--sys-primary) !important; font-size: 0.71rem; text-transform: uppercase; letter-spacing: 0.8px; font-weight: 700; padding: 10px 16px; white-space: nowrap; } .table > tbody > tr > td { padding: 11px 16px; vertical-align: middle; color: var(--sys-text); border-bottom: 1px solid rgba(0,0,0,0.05) !important; font-size: 0.875rem; } .table-hover > tbody > tr:hover > td { background: rgba(64,81,137,0.04) !important; } /* Dark mode tables */ [data-bs-theme="dark"] .table > thead > tr > th { background: rgba(255,255,255,0.04) !important; border-bottom-color: rgba(255,255,255,0.08) !important; color: #94a3b8 !important; } [data-bs-theme="dark"] .table > tbody > tr > td { border-bottom-color: rgba(255,255,255,0.05) !important; color: #cbd5e1; } /* -- Forms -------------------------------------------- */ .form-control, .form-select { border-radius: var(--sys-radius) !important; border: 1px solid rgba(0,0,0,0.13) !important; font-size: 0.875rem; color: var(--sys-text); background: #fff; transition: border-color var(--sys-transition), box-shadow var(--sys-transition); padding: 0.45rem 0.85rem; } .form-control:focus, .form-select:focus { border-color: var(--sys-primary) !important; box-shadow: 0 0 0 3px rgba(64,81,137,0.1) !important; outline: none; } .form-control::placeholder { color: #b0b8c9; } .input-group-text { background: #f5f7fa; border: 1px solid rgba(0,0,0,0.13); color: #6b7280; font-size: 0.9rem; } /* -- Buttons ------------------------------------------ */ .btn { border-radius: var(--sys-radius) !important; font-weight: 600; font-size: 0.875rem; } .btn-sm { padding: 5px 14px !important; font-size: 0.8rem !important; } .btn-lg { padding: 10px 22px !important; font-size: 1rem !important; } .btn-primary:not(.btn-icon) { background: var(--sys-primary) !important; border-color: var(--sys-primary) !important; color: #fff !important; box-shadow: 0 3px 10px rgba(64,81,137,0.3); font-weight: 600; /* override the gold gradient from earlier */ background-image: none !important; } .btn-primary:not(.btn-icon):hover { background: #364a82 !important; border-color: #364a82 !important; box-shadow: 0 5px 16px rgba(64,81,137,0.4); transform: translateY(-1px); filter: none; } .btn-primary:not(.btn-icon)::after { display: none; } .btn-secondary { background: #6b7280 !important; border-color: #6b7280 !important; color: #fff !important; } .btn-success { background: #0ab39c !important; border-color: #0ab39c !important; color: #fff !important; } .btn-danger { background: #f06548 !important; border-color: #f06548 !important; color: #fff !important; } .btn-warning { background: #f7b500 !important; border-color: #f7b500 !important; color: #1a1d21 !important; } .btn-info { background: #299cdb !important; border-color: #299cdb !important; color: #fff !important; } .btn-outline-primary { border-color: var(--sys-primary) !important; color: var(--sys-primary) !important; } .btn-outline-primary:hover { background: var(--sys-primary) !important; color: #fff !important; } /* -- Badges ------------------------------------------- */ .badge { font-size: 0.71rem; font-weight: 600; padding: 4px 9px; border-radius: 6px; letter-spacing: 0.2px; } /* -- Alerts ------------------------------------------- */ .alert { border-radius: var(--sys-radius) !important; border: none !important; font-size: 0.875rem; padding: 12px 16px; } .alert-success { background: #ecfdf5; color: #065f46; border-left: 4px solid #0ab39c !important; } .alert-danger { background: #fef2f2; color: #991b1b; border-left: 4px solid #f06548 !important; } .alert-warning { background: #fffbeb; color: #92400e; border-left: 4px solid #f7b500 !important; } .alert-info { background: #eff6ff; color: #1e40af; border-left: 4px solid #299cdb !important; } [dir="rtl"] .alert-success { border-left: none !important; border-right: 4px solid #0ab39c !important; } [dir="rtl"] .alert-danger { border-left: none !important; border-right: 4px solid #f06548 !important; } [dir="rtl"] .alert-warning { border-left: none !important; border-right: 4px solid #f7b500 !important; } [dir="rtl"] .alert-info { border-left: none !important; border-right: 4px solid #299cdb !important; } /* -- Modals ------------------------------------------- */ .modal-content { border: none !important; border-radius: 14px !important; box-shadow: 0 24px 64px rgba(0,0,0,0.16) !important; } .modal-header { border-bottom: 1px solid rgba(0,0,0,0.07) !important; border-radius: 14px 14px 0 0 !important; padding: 16px 22px; background: #fafbff; } [data-bs-theme="dark"] .modal-header { background: #1a2236; border-bottom-color: rgba(255,255,255,0.07) !important; } .modal-title { font-weight: 700; font-size: 1rem; color: var(--sys-primary) !important; } [data-bs-theme="dark"] .modal-title { color: #e2e8f0 !important; } .modal-footer { border-top: 1px solid rgba(0,0,0,0.07) !important; padding: 14px 22px; } /* -- Dropdowns ---------------------------------------- */ .dropdown-menu { border: 1px solid rgba(0,0,0,0.07) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important; border-radius: 12px !important; padding: 6px !important; } .dropdown-item { border-radius: 8px; padding: 8px 12px; font-size: 0.875rem; color: var(--sys-text); transition: background var(--sys-transition); } .dropdown-item:hover, .dropdown-item:focus { background: rgba(64,81,137,0.08) !important; color: var(--sys-primary) !important; } /* -- Pagination --------------------------------------- */ .pagination { gap: 3px; } .page-link { border-radius: 8px !important; border: 1px solid rgba(0,0,0,0.1) !important; color: var(--sys-primary); font-size: 0.82rem; padding: 6px 12px; transition: all var(--sys-transition); } .page-link:hover { background: rgba(64,81,137,0.08) !important; border-color: var(--sys-primary) !important; } .page-item.active .page-link { background: var(--sys-primary) !important; border-color: var(--sys-primary) !important; color: #fff !important; box-shadow: 0 3px 8px rgba(64,81,137,0.3); } /* -- Breadcrumb --------------------------------------- */ .breadcrumb-style { background: linear-gradient(135deg, #f3eaff 0%, #ede0ff 100%); border-bottom: 1px solid rgba(64,81,137,0.1); padding: 12px 1.5rem; } .breadcrumb-title { color: var(--sys-primary); font-weight: 700; } .breadcrumb-item a { color: var(--sys-primary) !important; font-weight: 500; } .breadcrumb-item.active { color: var(--sys-text-muted) !important; } .breadcrumb-item + .breadcrumb-item::before { color: #c1c8d4; } /* -- Page title --------------------------------------- */ .page-title-box h4, .page-title-box .page-title { color: var(--sys-primary) !important; font-weight: 700; font-size: 1.05rem !important; } /* -- Back to top -------------------------------------- */ #back-to-top { background: var(--sys-primary) !important; border: none; color: #fff !important; width: 42px; height: 42px; border-radius: 50%; font-size: 1.1rem; box-shadow: 0 4px 14px rgba(64,81,137,0.35); transition: transform var(--sys-transition), box-shadow var(--sys-transition); } #back-to-top:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(64,81,137,0.45); } /* -- Select2 ------------------------------------------ */ .select2-container--default .select2-selection--single { border-radius: var(--sys-radius) !important; border: 1px solid rgba(0,0,0,0.13) !important; height: calc(1.5em + 0.9rem + 2px) !important; } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: calc(1.5em + 0.9rem) !important; color: var(--sys-text); font-size: 0.875rem; } .select2-container--default .select2-results__option--highlighted { background: rgba(64,81,137,0.1) !important; color: var(--sys-primary) !important; } /* -- DataTables --------------------------------------- */ .dataTables_wrapper .dataTables_filter input { border-radius: 20px !important; border: 1px solid rgba(0,0,0,0.13) !important; padding: 6px 16px; font-size: 0.82rem; } .dataTables_wrapper .dataTables_length select { border-radius: var(--sys-radius) !important; border: 1px solid rgba(0,0,0,0.13) !important; font-size: 0.82rem; } /* -- Notification items ------------------------------- */ .notification-item { border-radius: 8px; transition: background var(--sys-transition); } .notification-item:hover { background: rgba(64,81,137,0.05) !important; } /* -- Sidebar logo area -------------------------------- */ .navbar-brand-box { border-bottom: 1px solid rgba(255,255,255,0.08); } /* -- Footer ------------------------------------------- */ .main-content .footer { background: var(--sys-surface) !important; border-top: 1px solid var(--sys-border) !important; color: var(--sys-text-muted) !important; } /* -- Stat value --------------------------------------- */ .stat-value { color: var(--sys-primary) !important; font-weight: 700; } /* -- Empty state -------------------------------------- */ .no-data-placeholder { padding: 3rem 1rem; text-align: center; } .no-data-placeholder i { font-size: 3rem; color: #d1d5db; display: block; margin-bottom: 0.75rem; } .no-data-placeholder p { color: #9ca3af; font-size: 0.875rem; margin: 0; } /* -- Dark mode overrides ------------------------------ */ [data-bs-theme="dark"] .card { background: #1e293b; border-color: rgba(255,255,255,0.07) !important; } [data-bs-theme="dark"] .card-header { border-bottom-color: rgba(255,255,255,0.07) !important; } [data-bs-theme="dark"] .card-header, [data-bs-theme="dark"] .card-title { color: #e2e8f0 !important; } [data-bs-theme="dark"] :is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6) { color: #e2e8f0 !important; } [data-bs-theme="dark"] .form-label { color: #cbd5e1 !important; } [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background: #1e293b; border-color: rgba(255,255,255,0.1) !important; color: #e2e8f0; } [data-bs-theme="dark"] #page-topbar { background: #1e293b !important; border-bottom-color: rgba(255,255,255,0.08) !important; } [data-bs-theme="dark"] .dropdown-menu { background: #1e293b !important; border-color: rgba(255,255,255,0.08) !important; } [data-bs-theme="dark"] .dropdown-item { color: #cbd5e1; } [data-bs-theme="dark"] .dropdown-item:hover { background: rgba(255,255,255,0.07) !important; color: #fff !important; } [data-bs-theme="dark"] .main-content .footer { background: #0f1729 !important; border-top-color: rgba(255,255,255,0.07) !important; } [data-bs-theme="dark"] .breadcrumb-style { background: linear-gradient(135deg, #1a2236, #162040); border-bottom-color: rgba(255,255,255,0.07); } [data-bs-theme="dark"] .breadcrumb-title { color: #e2e8f0 !important; } [data-bs-theme="dark"] .alert-success { background: rgba(10,179,156,0.12); color: #a5b4fc; } [data-bs-theme="dark"] .alert-danger { background: rgba(240,101,72,0.12); color: #fca5a5; } [data-bs-theme="dark"] .alert-warning { background: rgba(247,181,0,0.12); color: #fde68a; } [data-bs-theme="dark"] .alert-info { background: rgba(41,156,219,0.12); color: #93c5fd; } [data-bs-theme="dark"] .modal-content { background: #1a2236; } /* -- Responsive --------------------------------------- */ @media (max-width: 767px) { .floating-widgets { bottom: 18px; right: 16px; } html[dir="rtl"] .floating-widgets { right: auto; left: 16px; } .chatbot-panel { width: calc(100vw - 32px); right: 16px; bottom: 86px; height: 500px; } html[dir="rtl"] .chatbot-panel { left: 16px; right: auto; } .card-body { padding: 14px; } }