/* * Sidebar width — .dash-sidebar width, .dash-container offset, admin-shell main margin (JS can sync --dash-sidebar-width). * Expanded width should fit long labels; JS syncs measured px on for layout alignment. */ :root { --dash-sidebar-width: 216px; /* Horizontal gutter inside .navbar-content (keep in sync with submenu alignment math below). */ --dash-sidebar-nav-x: 0px; /* Top-level row: left inset after border; margin before link box. */ --dash-sidebar-parent-link-ml: 0px; --dash-sidebar-parent-border: 2px; --dash-sidebar-parent-pl: 1px; /* Icon column on top-level rows (must match .dash-micon + gap). */ --dash-sidebar-top-micon-size: 28px; --dash-sidebar-top-micon-mr: 3px; --dash-sidebar-top-gap: 4px; /* Nested submenu steps (text-only rows). */ --dash-sidebar-submenu-nest: 8px; /* Left prefix before submenu .dash-link padding: .dash-item pad-left + .dash-link margin-left. */ --dash-sidebar-submenu-row-prefix: 2px; /* * First-level submenu label aligns with top-level .dash-mtext: * pl = parent (ml + border + pl + icon + micon-mr + gap) - submenu row prefix (nav-x cancels). */ --dash-sidebar-submenu1-pl: calc( var(--dash-sidebar-parent-link-ml) + var(--dash-sidebar-parent-border) + var(--dash-sidebar-parent-pl) + var(--dash-sidebar-top-micon-size) + var(--dash-sidebar-top-micon-mr) + var(--dash-sidebar-top-gap) - var(--dash-sidebar-submenu-row-prefix) ); } body.minimenu { --dash-sidebar-width: 80px; } /* Keep layout + toggle aligned to the same width (overrides assets/css/style.css 255px / 70px) */ .dash-sidebar { width: var(--dash-sidebar-width) !important; } .dash-container { margin-left: var(--dash-sidebar-width) !important; } .minimenu .dash-container { margin-left: var(--dash-sidebar-width) !important; } .minimenu .page-header { left: var(--dash-sidebar-width) !important; } /* * Tablet/mobile (≤1024px): theme hides the drawer off-canvas and sets .dash-container { margin-left: 0 }. * Our global .dash-container { margin-left: var(--dash-sidebar-width) !important } would otherwise leave * an empty column and push content right (e.g. iPad 768px). The sidebar hide rule also needs an exception * for .mob-sidebar-active — otherwise left:0 from style.css loses to !important and the menu never slides in. */ @media (max-width: 1024px) { .dash-container, .minimenu .dash-container { margin-left: 0 !important; } .minimenu .page-header { left: 0 !important; } .dash-sidebar { left: calc(-1 * var(--dash-sidebar-width)) !important; } .dash-sidebar.mob-sidebar-active { left: 0 !important; } } @media (min-width: 1025px) { .navbar-overlay .dash-sidebar:not(.dash-over-menu-active) { left: calc(-1 * var(--dash-sidebar-width)) !important; } } .monthly-summary-card { border: none; background-color: transparent; } .monthly-summary-card .card-body { background: linear-gradient(135deg, #dff1e1 0%, #eaf7f2 100%); border-radius: 14px; padding: 20px 22px; } .monthly-summary-grid { display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr); } .monthly-summary-item { background: #ffffff; border-radius: 12px; box-shadow: 0 6px 14px rgba(32, 84, 51, 0.08); padding: 16px; display: flex; flex-direction: column; gap: 10px; transition: transform 0.2s ease, box-shadow 0.2s ease; } .monthly-summary-item:hover { transform: translateY(-3px); box-shadow: 0 10px 18px rgba(32, 84, 51, 0.12); } .monthly-summary-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient( 135deg, rgba(3, 102, 75, 0.15), rgba(3, 102, 75, 0.05) ); color: #03664b; font-size: 20px; } .monthly-summary-label { font-size: 0.95rem; font-weight: 600; color: #1f2a2d; text-transform: capitalize; } .monthly-summary-value { font-size: 1.05rem; font-weight: 700; color: #0f6543; } @media (max-width: 576px) { .monthly-summary-card .card-body { padding: 20px; } .monthly-summary-grid { grid-template-columns: 1fr; gap: 14px; } .monthly-summary-item { padding: 14px; } } /* abhi start */ .rounded-10,  .tab-btns  { border-radius: 2px !important; } .rounded-square { border-radius: 0 !important; } .fix-but-w-120 { width: 120px !important; } /* Legacy: btn-yellow alias for btn-warning (same style) */ .btn-yellow { background-color: #fff3e0 !important; color: #f0a73d !important; border-color: transparent !important; } .btn-yellow:hover, .btn-yellow:focus { background-color: #f0a73d !important; color: #ffffff !important; border-color: transparent !important; box-shadow: 0 2px 8px rgba(240, 167, 61, 0.35); } .ab_p_card { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } /* POS product card: all corners rounded like category buttons */ #product-listing .pos-product-card { border-radius: 10px !important; overflow: hidden; position: relative; transition: transform 0.25s ease, box-shadow 0.25s ease; will-change: transform; } #product-listing .pos-product-card .product-image-wrapper { border-radius: 10px 10px 0 0 !important; } #product-listing .pos-product-card .card-body { border-radius: 0 0 10px 10px !important; } /* Modern hover: card enlarges and lifts with shadow */ #product-listing .pos-product-card:hover { transform: scale(1.06); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15); z-index: 5; } .ab_p_card:hover { -webkit-box-shadow: 0px 8px 30px rgba(34, 34, 34, 0.75); -moz-box-shadow: 0px 8px 30px rgba(34, 34, 34, 0.75); -o-box-shadow: 0px 8px 30px rgba(34, 34, 34, 0.75); box-shadow: 0px 8px 30px rgba(34, 34, 34, 0.75); } #cta { width: 100%; cursor: pointer; } #cta .arrow { left: 30%; } .arrow { position: absolute; bottom: 0; margin-left: 0px; width: 60px; height: 60px; background-size: contain; top: 15px; } .segunda { margin-left: 32px; } .next { background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgOTYgOTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTY5Ljg0NCA0My4zODggMzMuODQyIDEzLjM4NmE2LjAwMyA2LjAwMyAwIDAgMC03LjY4OCA5LjIyM0w1Ni42MjQgNDhsLTMwLjQ3IDI1LjM5YTYuMDAzIDYuMDAzIDAgMCAwIDcuNjg4IDkuMjIzbDM2LjAwMi0zMC4wMDFhNi4wMSA2LjAxIDAgMCAwIDAtOS4yMjNaIiBmaWxsPSIjMTg5NmY1IiBjbGFzcz0iZmlsbC0wMDAwMDAiPjwvcGF0aD48L3N2Zz4=); } @keyframes bounceAlpha { 0% { opacity: 1; transform: translateX(0px) scale(1); } 25% { opacity: 0; transform: translateX(10px) scale(0.9); } 26% { opacity: 0; transform: translateX(-10px) scale(0.9); } 55% { opacity: 1; transform: translateX(0px) scale(1); } } .report-section { position: relative; } .report-section-title { background-color: #e0f2e4; color: #0c3c2b; font-weight: 700; font-size: 1rem; padding: 12px 18px; border-radius: 12px 12px 0 0; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0; } .report-section table { border-top-left-radius: 0; border-top-right-radius: 0; } .bounceAlpha { animation-name: bounceAlpha; animation-duration: 1.4s; animation-iteration-count: infinite; animation-timing-function: linear; } .arrow.primera.bounceAlpha { animation-name: bounceAlpha; animation-duration: 1.4s; animation-delay: 0.2s; animation-iteration-count: infinite; animation-timing-function: linear; } .catgory-pad { border-top: 6px #f5f7f6 solid; padding-top: 2px; } /* Abhi end */ .Permission { white-space: inherit !important; } .action-btn { width: 29px; height: 28px; border-radius: 9.3552px; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } /* Blue action (edit) buttons: light blue #deefff with dark icon - override theme .bg-primary */ body .action-btn.bg-primary, body.theme-1 .action-btn.bg-primary, body.theme-2 .action-btn.bg-primary, body.theme-3 .action-btn.bg-primary, body.theme-4 .action-btn.bg-primary, body.theme-5 .action-btn.bg-primary, body.theme-6 .action-btn.bg-primary, body.theme-7 .action-btn.bg-primary, body.theme-8 .action-btn.bg-primary, body.theme-9 .action-btn.bg-primary, body.theme-10 .action-btn.bg-primary { background-color: #deefff !important; background-image: none !important; } body .action-btn.bg-primary a, body .action-btn.bg-primary i, body .action-btn.bg-primary .text-white, body.theme-1 .action-btn.bg-primary a, body.theme-1 .action-btn.bg-primary i, body.theme-1 .action-btn.bg-primary .text-white, body.theme-2 .action-btn.bg-primary a, body.theme-2 .action-btn.bg-primary i, body.theme-2 .action-btn.bg-primary .text-white, body.theme-3 .action-btn.bg-primary a, body.theme-3 .action-btn.bg-primary i, body.theme-3 .action-btn.bg-primary .text-white, body.theme-4 .action-btn.bg-primary a, body.theme-4 .action-btn.bg-primary i, body.theme-4 .action-btn.bg-primary .text-white, body.theme-5 .action-btn.bg-primary a, body.theme-5 .action-btn.bg-primary i, body.theme-5 .action-btn.bg-primary .text-white, body.theme-6 .action-btn.bg-primary a, body.theme-6 .action-btn.bg-primary i, body.theme-6 .action-btn.bg-primary .text-white, body.theme-7 .action-btn.bg-primary a, body.theme-7 .action-btn.bg-primary i, body.theme-7 .action-btn.bg-primary .text-white, body.theme-8 .action-btn.bg-primary a, body.theme-8 .action-btn.bg-primary i, body.theme-8 .action-btn.bg-primary .text-white, body.theme-9 .action-btn.bg-primary a, body.theme-9 .action-btn.bg-primary i, body.theme-9 .action-btn.bg-primary .text-white, body.theme-10 .action-btn.bg-primary a, body.theme-10 .action-btn.bg-primary i, body.theme-10 .action-btn.bg-primary .text-white { color: #1e40af !important; } /* Edit button hover: more visible (darker light blue) */ body .action-btn.bg-primary:hover, body.theme-1 .action-btn.bg-primary:hover, body.theme-2 .action-btn.bg-primary:hover, body.theme-3 .action-btn.bg-primary:hover, body.theme-4 .action-btn.bg-primary:hover, body.theme-5 .action-btn.bg-primary:hover, body.theme-6 .action-btn.bg-primary:hover, body.theme-7 .action-btn.bg-primary:hover, body.theme-8 .action-btn.bg-primary:hover, body.theme-9 .action-btn.bg-primary:hover, body.theme-10 .action-btn.bg-primary:hover { background-color: #c5e3ff !important; box-shadow: 0 0 0 2px rgba(30, 64, 175, 0.2); } /* Danger (delete) action buttons: light reddish-pink #F9E1DB with dark icon #543D34 */ body .action-btn.bg-danger, body.theme-1 .action-btn.bg-danger, body.theme-2 .action-btn.bg-danger, body.theme-3 .action-btn.bg-danger, body.theme-4 .action-btn.bg-danger, body.theme-5 .action-btn.bg-danger, body.theme-6 .action-btn.bg-danger, body.theme-7 .action-btn.bg-danger, body.theme-8 .action-btn.bg-danger, body.theme-9 .action-btn.bg-danger, body.theme-10 .action-btn.bg-danger { background-color: #f9e1db !important; background-image: none !important; } body .action-btn.bg-danger a, body .action-btn.bg-danger i, body .action-btn.bg-danger .text-white, body.theme-1 .action-btn.bg-danger a, body.theme-1 .action-btn.bg-danger i, body.theme-1 .action-btn.bg-danger .text-white, body.theme-2 .action-btn.bg-danger a, body.theme-2 .action-btn.bg-danger i, body.theme-2 .action-btn.bg-danger .text-white, body.theme-3 .action-btn.bg-danger a, body.theme-3 .action-btn.bg-danger i, body.theme-3 .action-btn.bg-danger .text-white, body.theme-4 .action-btn.bg-danger a, body.theme-4 .action-btn.bg-danger i, body.theme-4 .action-btn.bg-danger .text-white, body.theme-5 .action-btn.bg-danger a, body.theme-5 .action-btn.bg-danger i, body.theme-5 .action-btn.bg-danger .text-white, body.theme-6 .action-btn.bg-danger a, body.theme-6 .action-btn.bg-danger i, body.theme-6 .action-btn.bg-danger .text-white, body.theme-7 .action-btn.bg-danger a, body.theme-7 .action-btn.bg-danger i, body.theme-7 .action-btn.bg-danger .text-white, body.theme-8 .action-btn.bg-danger a, body.theme-8 .action-btn.bg-danger i, body.theme-8 .action-btn.bg-danger .text-white, body.theme-9 .action-btn.bg-danger a, body.theme-9 .action-btn.bg-danger i, body.theme-9 .action-btn.bg-danger .text-white, body.theme-10 .action-btn.bg-danger a, body.theme-10 .action-btn.bg-danger i, body.theme-10 .action-btn.bg-danger .text-white { color: #543d34 !important; } /* Delete button hover: same style as edit (darker + ring) */ body .action-btn.bg-danger:hover, body.theme-1 .action-btn.bg-danger:hover, body.theme-2 .action-btn.bg-danger:hover, body.theme-3 .action-btn.bg-danger:hover, body.theme-4 .action-btn.bg-danger:hover, body.theme-5 .action-btn.bg-danger:hover, body.theme-6 .action-btn.bg-danger:hover, body.theme-7 .action-btn.bg-danger:hover, body.theme-8 .action-btn.bg-danger:hover, body.theme-9 .action-btn.bg-danger:hover, body.theme-10 .action-btn.bg-danger:hover { background-color: #f0d0c8 !important; box-shadow: 0 0 0 2px rgba(84, 61, 52, 0.25); } /* Checkboxes/radios: visible border across whole site */ .form-check-input { border: 1px solid #6b7280 !important; } .form-check-input:hover { border-color: #4b5563 !important; } /* Checkbox / switch when checked: light blue #deefff + visible border */ .form-check-input:checked, body.theme-1 .form-check-input:checked, body.theme-2 .form-check-input:checked, body.theme-3 .form-check-input:checked, body.theme-4 .form-check-input:checked, body.theme-5 .form-check-input:checked, body.theme-6 .form-check-input:checked, body.theme-7 .form-check-input:checked, body.theme-8 .form-check-input:checked, body.theme-9 .form-check-input:checked, body.theme-10 .form-check-input:checked { background-color: #deefff !important; border: 1px solid #93c5fd !important; } .form-switch .form-check-input:checked { background-color: #deefff !important; border: 1px solid #93c5fd !important; } .repeater-action-btn { width: 23px; height: 23px; border-radius: 9.3552px; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; } .delete-form-btn { display: inline; } .dash-sidebar .main-logo { justify-content: center; /*height: 100%;*/ min-height: 80px; max-height: 80px; width: 100%; /*min-width: 255px;*/ /*max-width: 255px;*/ } /*a.b-brand {*/ /* height: 100%;*/ /* width: 100%;*/ /*}*/ .dash-sidebar .main-logo a img { width: 100%; height: 100%; object-fit: contain; width: auto !important; height: auto; max-width: -webkit-fill-available !important; max-height: -webkit-fill-available !important; max-width: -moz-available; max-height: -moz-available; margin: 0 auto; display: flex; align-items: center; justify-content: center; vertical-align: middle; } .price-card { text-align: center; position: relative; margin-top: 30px; height: 100%; max-height: 510px; } .price-card.price-2 { color: #fff; } .price-card.price-2 .price-badge { color: #fff; background: #1c232f; } .price-card .p-price { font-size: 80px; } .price-card .price-badge { color: #fff; padding: 7px 24px; border-radius: 30px; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); } .price-card .list-unstyled { display: inline-block; } .price-card .list-unstyled li { display: flex; align-items: center; } .price-card .list-unstyled li + li { margin-top: 8px; } .price-card .list-unstyled .theme-avtar { display: inline-flex; width: 30px; height: 30px; border-radius: 10px; background: #fff; margin-right: 15px; } .side-feature { overflow: hidden; } .faq .accordion .accordion-item { border-radius: 10px; overflow: hidden; border: none; margin-bottom: 10px; } .faq .accordion .accordion-item .accordion-button { font-weight: 500; padding: 1.3rem 1.25rem; } .faq .accordion .accordion-item .accordion-button span > i { font-size: 20px; margin-right: 8px; } .faq .accordion .accordion-item .accordion-button:not(.collapsed) { border-radius: 10px; background: transparent; box-shadow: 0 6px 30px rgba(182, 186, 203, 0.3); } .faq .accordion .accordion-item .accordion-body { /*padding: 2.3rem 2.3rem 2.3rem 3rem;*/ padding: 1rem 1.25rem; } .choose-files div { color: #fff; background: #584ed2 !important; border: none; border-radius: 10px; padding: 8px 15px; max-width: 155px !important; font-size: 12px; font-weight: 500; } .file { position: relative !important; left: 0; opacity: 0; top: 0; bottom: 0; width: 80%; border: none; padding: 0; margin: 0; cursor: pointer; } .file-icon { width: 30px; height: 30px; background: #0f5ef7; border-radius: 50px; float: left; text-align: center; } .file-icon i { color: #fff; z-index: 9999; position: relative; font-size: 14px; } .first-file { width: 100%; float: left; padding-bottom: 20px; position: relative; } .file-des { width: calc(100% - 40px); float: right; color: #a3afbb; font-size: 12px; } .file-des span { width: 100%; float: left; color: #011c4b; } .general-tab .column-card { flex-direction: column; } .first-file:before { position: absolute; bottom: 0; width: 3px; height: 100%; background: var(--bs-primary) !important; content: ""; left: 25px; } .first-file:last-child:before { background: none; } .setting-favimg { width: 100px; } .setting-logoimg { width: 200px; } .colorinput { margin: 0; position: relative; cursor: pointer; } .colorinput-input { position: absolute; z-index: -1; opacity: 0; } .colorinput-color { background-color: #fdfdff; border-color: #e4e6fc; border-width: 1px; border-style: solid; display: inline-block; width: 1.75rem; height: 1.75rem; border-radius: 3px; color: #fff; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .colorinput-color:before { content: ""; opacity: 0; position: absolute; top: 0.25rem; left: 0.25rem; height: 1.25rem; width: 1.25rem; transition: 0.3s opacity; background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E") no-repeat center center/50% 50%; } .colorinput-input:checked ~ .colorinput-color:before { opacity: 1; } .img_setting { filter: drop-shadow(2px 3px 7px #011c4b); } .btn-apply { font-size: 31px; } .avatar { text-align: center; border-radius: 100%; overflow: hidden; background-color: #eee; background-repeat: no-repeat; background-size: cover; background-position: center center; } .avatar-sm { width: 2.4375rem; height: 2.4375rem; font-size: 0.75rem; border-radius: 0.2rem; } .avatar { position: relative; color: #fff; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; font-size: 1rem; font-weight: 600; height: 3.125rem; width: 3.125rem; border-radius: 0.25rem; } .avatar img { width: 100%; border-radius: 0.25rem; } .avatar.rounded-circle img { border-radius: 50%; } /*.avatar span {*/ /* background-color: #051C4B;*/ /*}*/ .avatar + .avatar { margin-left: 0.25rem; } .avatar + .avatar-content { display: inline-block; margin-left: 0.75rem; } .avatar-xl { width: 6rem; height: 6rem; font-size: 1.375rem; } .avatar-lg { width: 4rem; height: 4rem; font-size: 1.25rem; } .avatar-sm { width: 2.4375rem; height: 2.4375rem; font-size: 0.75rem; border-radius: 0.2rem; } .avatar-group { display: inline-block; line-height: 1; } .avatar-group .avatar { z-index: 1; transition: margin 0.15s ease-in-out; } @media (prefers-reduced-motion: reduce) { .avatar-group .avatar { transition: none; } } .avatar-group .avatar img { border: 2px solid #fff; } .avatar-group .avatar:hover { z-index: 2; } .avatar-group .avatar + .avatar { margin-left: -1.25rem; border-top-left-radius: 0; border-bottom-left-radius: 0; } .avatar-group .avatar-sm + .avatar-sm { margin-left: -1rem; } .avatar-group:hover .avatar { border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; } .avatar-group:hover .avatar-sm { border-top-left-radius: 0.2rem; border-bottom-left-radius: 0.2rem; } .hover-avatar-ungroup:hover .avatar:not(:first-child) { margin-left: 0; } .avatar-parent-child { display: inline-block; position: relative; } .avatar-child { position: absolute; right: 0; bottom: 0; background-color: #fff; border: 2px solid #fff; border-radius: 0.2rem; } .avatar.rounded-circle + .avatar-child { border-radius: 50%; } .avatar + .avatar-child { width: 20px; height: 20px; } .avatar-lg + .avatar-child { width: 24px; height: 24px; } .avatar-sm + .avatar-child { width: 16px; height: 16px; } .avatar + .avatar-badge { width: 14px; height: 14px; right: -6px; bottom: 15px; } .avatar-lg + .avatar-badge { width: 16px; height: 16px; right: -5px; bottom: 20px; } .avatar-sm + .badge { width: 12px; height: 12px; right: -6px; bottom: 10px; } .avatar-connect { position: relative; } .avatar-connect:before { content: ""; position: absolute; top: 50%; left: 0; width: 100%; border-bottom: 2px dashed #eff2f7; } .avatar-connect ul { margin: 0; padding: 0; list-style: none; } .rating { border: none; float: left; } .rating > input { display: none; } .rating > label:before { margin: 5px; font-size: 1.25em; font-family: FontAwesome; display: inline-block; content: "\f005"; } .rating > .half:before { content: "\f089"; position: absolute; } .rating > label { color: #ddd; float: right; } .rating > input:checked ~ label, .rating:not(:checked) > label:hover, .rating:not(:checked) > label:hover ~ label { color: #ffd700; } .rating > input:checked + label:hover, .rating > input:checked ~ label:hover, .rating > label:hover ~ input:checked ~ label, .rating > input:checked ~ label:hover ~ label { color: #ffed85; } .table td .progress { height: 7px; width: 120px; margin: 0; } .mtt { margin-top: 35px; } .custom_messanger_counter { position: relative; top: -15px; left: -5px; } .dash-sidebar .main-logo { justify-content: center; /*height: 100%;*/ min-height: 80px; max-height: 80px; width: 100%; /*min-width: 255px;*/ /*max-width: 255px;*/ background: #fff; border-radius: 0px 5px 5px 0px; } a.b-brand { height: 100%; width: 100%; } .dash-sidebar .main-logo a img { width: 100%; height: 100%; object-fit: contain; width: auto !important; height: auto; max-width: -webkit-fill-available !important; max-height: -webkit-fill-available !important; max-width: -moz-available; max-height: -moz-available; margin: 0 auto; display: flex; align-items: center; justify-content: center; vertical-align: middle; } .m-view-btn { width: 105px; padding: 8px 10px; line-height: normal; border-radius: 10px; color: #fff; } .m-view-btn a { float: right; color: #fff; text-decoration: underline; } .white-sapce-nowrap { white-space: nowrap; } .list-group-flush > .list-group-item:last-child { border: none; border-bottom-width: 0; } .active_color { border: 2px solid #000 !important; } .display-total-time { font-size: 14px; font-weight: 500; height: 50px; border: 1px solid rgba(221, 221, 221, 1); padding: 12px; background: rgba(241, 241, 241, 1); text-align: center; border-radius: 4px; width: 100%; color: black; } .swiper-container { margin: 0 auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; } .rating-stars ul { list-style-type: none; padding: 0; -moz-user-select: none; -webkit-user-select: none; } .rating-stars ul > li.star { display: inline-block; } .rating-stars ul > li.star.selected > i.ti { color: #ff912c; } .rating-stars ul > li.star.selected > i.fa { fill: #ff912c; } .navbar.default.top-nav-collapse { background: transparent; box-shadow: none; } .active_color { border: 2px solid #000 !important; } .login-deafult { width: 139px !important; } /* card-icon-text-space */ .card-icon-text-space { margin-right: 5px; } .horizontal-scroll-cards p { width: 120px; } .horizontal-scroll-cards img { border: 2px solid #b8d8be; padding: 3px; } .full-circle { width: 12px; height: 12px; border-radius: 50%; } .card-body.project_table { height: 400px; overflow-y: auto; } .project_table::-webkit-scrollbar { width: 3px; height: 3px; } .project_table::-webkit-scrollbar-track { box-shadow: inset 0 0 3px #f2f2f2; } .project_table::-webkit-scrollbar-thumb { background-color: #bababa; } .round-img { width: 80px; height: 80px; object: cover !important; } .big-logo { width: 150px; height: 60px; } .card-2 { height: 100%; max-height: 480px; margin-bottom: 0; } .full-card { min-height: 236px; display: flex; flex-direction: column; justify-content: space-between; } .fulls-card { min-height: 180px; } .kanban-card img { position: relative; width: 39px; height: 38px; border-radius: 50% !important; z-index: 2; transition: all 0.1s ease-in-out; border: 2px solid #ffffff; } .grid_user_image img { margin-left: -10px; border: 2px solid #dbdbdb; } .dataTable-table > thead > tr > th { padding: 15px 40px 15px 0; } .dataTable-sorter::before, .dataTable-sorter::after { right: -20px; } .status_badge { min-width: 87px; } .plan_card { width: 25%; float: left; margin-bottom: 20px; } .plan_card .card-body { min-height: 450px; } .active-tag { position: absolute; right: 20px; } .display-total-time { margin-top: 0; } @media only screen and (max-width: 1700px) { .plan_card { width: 33.33%; float: left; } } @media only screen and (max-width: 1440px) { .plan_card { width: 33.33%; float: left; } } @media only screen and (max-width: 1366px) { .plan_card { width: 50%; float: left; } } @media only screen and (max-width: 1199px) { .plan_card { width: 50%; float: left; } } @media only screen and (max-width: 991px) { .plan_card { width: 100%; float: left; } } .doc_status_badge { min-width: 100px; } .list_card { min-height: 400px; } .customer_card { height: 100%; } .vendor_card { height: 180px; } .logo_card { min-height: 280px; } .img_preview { width: 150px; height: 130px; } .setting_logo { top: -35px; } .choose-files input[type="file"] { display: none; } .drp-languages .drp-language .dropdown-toggle { color: #525b69; display: inline-flex; align-items: center; padding: 0.6rem 0.7rem; margin: 0 7.5px; border-radius: 4px; position: relative; font-weight: 500; border-radius: 12px; border: 1px solid rgba(206, 206, 206, 0.2); } .email_temp { height: 450px !important; overflow-y: scroll; } .emp_details { min-height: 420px !important; } .green-text { color: green; } .red-text { color: red; } .activity-scroll { overflow: scroll; height: 500px; } .leads-scroll { overflow-y: scroll; max-height: 400px; } .job-create { min-height: 488px; } .email-color { background: #ffffff; } .svg-inline--fa.fa-w-16 { width: 1em; } .svg-inline--fa.fa-w-20 { width: 1.25em; } /*POS SYSTEM CSS*/ .purchase_status { min-width: 95px; } .pos-top-bar { background: #ffffff; border-radius: 10px; padding: 15px; } .product-list-block .product-custom-card { border-radius: 10px; box-shadow: 0 4px 20px 1px rgba(0, 0, 0, 0.06), 0 1px 4px rgba(0, 0, 0, 0.08); cursor: pointer; margin-bottom: 16px; margin-left: 8px; margin-right: 8px; outline: 1px solid #e0e3ff; width: calc(24.96% - 16px); } .product-list-block .product-custom-card .card { border-color: transparent !important; border-radius: 10px; border: 0; box-shadow: none; margin-bottom: 0; } .product-list-block .product-custom-card .card .card-img-top { height: 100px !important; max-height: 100px !important; -o-object-fit: contain; object-fit: contain; width: 100% !important; border: 0; } .product-list-block .product-custom-card h6 { font-size: 14px; } .product-list-block .product-custom-card .fs-small { font-size: 12px; } .product-list-block .product-custom-card .item-badges { position: absolute; left: 0; top: -3px; } .product-list-block .product-custom-card__card-badge { border-radius: 4px; font-size: 11px; font-weight: 400; line-height: 1; padding: 0.25em 0.4em; text-align: center; vertical-align: baseline; white-space: nowrap; } .right-content .product-list-block { height: auto; max-height: 500px; overflow-y: auto; display: flex; flex-wrap: wrap; padding-top: 25px; } .right-content .button-list__item-active { background-color: #6571ff !important; border-color: #6571ff !important; color: #ffffff; } .sub-total .total-price { padding-bottom: 15px; border-bottom: 2px dashed #c5c5c5; } .button-list .button-list__item { margin-bottom: 0.5rem; } .cat-pad { background-color: #6fd944; } @media screen and (max-width: 767px) { .product-list-block .product-custom-card { width: 100%; } } .carttable .quantity.buttons_added { text-align: left; position: relative; white-space: nowrap; vertical-align: top; } .carttable .quantity.buttons_added .minus { border-right: 0; } .carttable .quantity.buttons_added input { display: inline-block; margin: 0; vertical-align: top; box-shadow: none; } .carttable .quantity .input-number { width: 60px; height: 35px; padding: 0 0px; text-align: center; background-color: transparent; border: 1px solid #efefef; } .carttable .quantity.buttons_added .plus { border-left: 0; } .carttable .quantity.buttons_added .minus, .carttable .quantity.buttons_added .plus { padding: 4px 10px 8px; height: 35px; background-color: #ffffff; border: 1px solid #efefef; cursor: pointer; } .form-row > .zoom-in { transition-property: background-color, border-color, color, fill, opacity, box-shadow, transform; transition-duration: 0.3s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); --transform-translate-x: 0; --transform-translate-y: 0; --transform-rotate: 0; --transform-skew-x: 0; --transform-skew-y: 0; --transform-scale-x: 1; --transform-scale-y: 1; transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y)); cursor: pointer; margin-bottom: 10px !important; } .zoom-in:hover { --transform-scale-x: 1.05; --transform-scale-y: 1.05; } #product-listing .toacart { cursor: pointer; } .cat-list-btn .btn-primary { color: #3f3f3f !important; } body.theme-1 .cat-list-btn .btn-primary { background: #fff !important; border-color: #fff !important; } body.theme-1 .cat-list-btn .cat-active .btn-primary { background: #0caf60 !important; border-color: #0caf60 !important; color: #fff !important; } body.theme-2 .cat-list-btn .btn-primary { background-color: #fff !important; border-color: #fff !important; } body.theme-2 .cat-list-btn .cat-active .btn-primary { background-color: #584ed2 !important; border-color: #584ed2 !important; color: #fff !important; } body.theme-3 .cat-list-btn .btn-primary { background-color: #fff !important; border-color: #fff !important; } body.theme-3 .cat-list-btn .cat-active .btn-primary { background-color: #6fd943 !important; border-color: #6fd943 !important; color: #fff !important; } body.theme-4 .cat-list-btn .btn-primary { background-color: #fff !important; border-color: #fff !important; } body.theme-4 .cat-list-btn .cat-active .btn-primary { background-color: #145388 !important; border-color: #145388 !important; color: #fff !important; } body.theme-5 .cat-list-btn .btn-primary { background-color: #fff !important; border-color: #fff !important; } body.theme-5 .cat-list-btn .cat-active .btn-primary { background-color: #b9406b !important; border-color: #b9406b !important; color: #fff !important; } body.theme-6 .cat-list-btn .btn-primary { background-color: #fff !important; border-color: #c4c6c3 !important; } body.theme-6 .cat-list-btn .cat-active .btn-primary { background-color: #008ecc !important; border-color: #008ecc !important; color: #fff !important; } body.theme-7 .cat-list-btn .btn-primary { background-color: #fff !important; border-color: #fff !important; } body.theme-7 .cat-list-btn .cat-active .btn-primary { background-color: #922c88 !important; border-color: #922c88 !important; color: #fff !important; } body.theme-8 .cat-list-btn .btn-primary { background-color: #fff !important; border-color: #fff !important; } body.theme-8 .cat-list-btn .cat-active .btn-primary { background-color: #c0a145 !important; border-color: #c0a145 !important; color: #fff !important; } body.theme-9 .cat-list-btn .btn-primary { background-color: #fff !important; border-color: #fff !important; } body.theme-9 .cat-list-btn .cat-active .btn-primary { background-color: #48494b !important; border-color: #48494b !important; color: #fff !important; } body.theme-10 .cat-list-btn .btn-primary { background-color: #fff !important; border-color: #fff !important; } body.theme-10 .cat-list-btn .cat-active .btn-primary { background-color: #0c7785 !important; border-color: #0c7785 !important; color: #fff !important; } /* POS category active: like Continue button – light blue fill, blue outline and text */ #categories-listing .cat-list-btn .cat-active .btn-primary, #categories-listing .cat-active .btn-primary { background-color: #e0f2fe !important; background: #e0f2fe !important; border: 1px solid #0ea5e9 !important; border-color: #0ea5e9 !important; color: #0284c7 !important; border-radius: 0.375rem !important; } .top-badge { position: absolute; top: 0; right: 0; } .product-title-name { font-size: 13px; font-weight: 600; flex: 1; min-height: 33px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; } .product-image-wrapper { width: 100%; height: 180px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.92) 0%, #fff 100% ); border-radius: 12px 12px 0 0; position: relative; } .product-card-image { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; transition: transform 0.2s ease; } .product-image-wrapper:hover .product-card-image { transform: scale(1.05); } .product-body-nop .form-row [class*="col-"] { display: flex; } .cat-active .btn { color: #fff; } .tab-btns { min-width: 100px; white-space: nowrap; border-radius: 0rem !important; padding: 10px 20px; font-size: 12px; } .cart-product-list .table tr th { padding: 5px 15px !important; } .total-price h6 { font-size: 11px; } .product-body-nop .card:not(:last-of-type) { margin-bottom: 12px; } .product-body-nop { height: calc(100vh - 365px); overflow-y: auto; overflow-x: hidden; margin-right: -7px; padding-right: 7px; padding-top: 10px; padding-left: 10px; } /* POS layout v2: neutralize legacy .product-body-nop height/margin (padding set in pos-layout-v2.css) */ .pos-layout-v2 .pos-v2-left .product-body-nop.pos-v2-products-scroll, .pos-layout-v2 .pos-v2-left .pos-v2-products-scroll.product-body-nop { height: 100% !important; max-height: 100% !important; min-height: 0 !important; margin-right: 0 !important; } .product-body-nop::-webkit-scrollbar { width: 4px; height: 4px; margin-right: -4px; } .product-body-nop::-webkit-scrollbar-thumb { background-color: lightgrey; border-radius: 10px; } .sop-card { margin-bottom: 10px; } .carttable-scroll { height: calc(90vh - 300px); } .carttable-scroll .table-responsive { height: calc(90vh - 300px); } .carttable-scroll .table-responsive::-webkit-scrollbar { width: 4px; height: 4px; margin-right: -4px; } .carttable-scroll .table-responsive::-webkit-scrollbar-thumb { background-color: lightgrey; border-radius: 10px; } .carttable-scroll .name, .carttable-scroll .tax { padding: 0 !important; } .carttable-scroll .tax { text-align: center; } .total-section { /* width: 100%; */ background: #f1f1f1; padding: 15px 15px; border-radius: 10px; box-shadow: 0px 10px 10px -10px #97979780; margin: -25px -25px 0 -25px; width: calc(100% + 50px); } .sop-card { height: 100%; } .product-body-nop .card { width: 100%; } .product-body-nop .card .avatar { object-fit: scale-down; padding: 20px 0 10px; background: transparent; min-height: 9rem; width: 100%; } .product-body-nop .card .card-body { flex: 1 1 auto; padding: 25px 25px; display: flex; flex-direction: column; } .product-body-nop .card .badge { padding: 4px 10px; width: auto; max-width: 100px; margin: 0 auto 0 0; } .product-body-nop .card .shadow { box-shadow: none !important; } .toacart { display: flex; } .product-body-nop .card .product-title-name { min-height: unset; } /*END POS SYSTEM CSS*/ /* Admin top bar: Inventa SVG (same as POS preview) */ .dash-header .dash-header-brand-link { display: inline-flex; align-items: center; text-decoration: none; } body.admin-shell-stacked .dash-header-brand-slot .dash-header-brand-link { padding: 0 12px 0 0; margin-inline-start: 0; } .dash-header .dash-header-brand-link .inventa-logo-svg.pos-header-logo { display: block; height: 38px; width: auto; max-width: min(42vw, 200px); } body.admin-shell-stacked .dash-header-brand-slot .inventa-logo-svg.pos-header-logo { max-width: min(52vw, 220px); } @media (max-width: 575.98px) { body.admin-shell-stacked .dash-header-brand-slot .inventa-logo-svg.pos-header-logo { height: 32px; max-width: min(48vw, 160px); } } /* * Full-width top header: header spans 100% of the viewport; sidebar + main sit below (two columns). */ body.admin-shell-stacked { --admin-shell-header-h: 70px; } body.admin-shell-stacked .dash-header .header-wrapper.dash-header-row { display: flex; align-items: center; flex-wrap: nowrap; width: 100%; min-width: 0; } body.admin-shell-stacked .dash-header { left: 0 !important; right: 0 !important; top: 0 !important; position: fixed !important; width: 100% !important; max-width: 100% !important; border-radius: 0 !important; z-index: 1030 !important; } @media (min-width: 1024px) { body.admin-shell-stacked .dash-header:not(.transprent-bg) { left: 0 !important; right: 0 !important; top: 0 !important; margin: 0 !important; border-radius: 0 !important; box-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.08) !important; } body.admin-shell-stacked .dash-header:not(.transprent-bg):not(.dash-mob-header) ~ .dash-container { margin-left: var(--dash-sidebar-width) !important; } body.admin-shell-stacked .dash-header:not(.transprent-bg):not(.dash-mob-header) ~ .dash-container .dash-content { padding-top: 30px !important; } } /* Collapsed sidebar: keep header edge-to-edge (theme defaults to left: 70px) */ body.admin-shell-stacked.minimenu .dash-header { left: 0 !important; right: 0 !important; } body.admin-shell-stacked .dash-sidebar { top: var(--admin-shell-header-h) !important; bottom: 0 !important; height: auto !important; } @media (min-width: 1024px) { body.admin-shell-stacked .dash-sidebar.light-sidebar:not(.transprent-bg) { top: var(--admin-shell-header-h) !important; left: 0 !important; bottom: 0 !important; border-radius: 0 !important; box-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.08) !important; } body.admin-shell-stacked .dash-sidebar.light-sidebar:not(.transprent-bg) .navbar-content { height: calc(100vh - var(--admin-shell-header-h)) !important; max-height: none !important; } } body.admin-shell-stacked .dash-sidebar .navbar-content { height: calc(100vh - var(--admin-shell-header-h)) !important; max-height: none !important; } @media (min-width: 1024px) { body.admin-shell-stacked .dash-sidebar.light-sidebar.transprent-bg .navbar-content { height: calc(100vh - var(--admin-shell-header-h)) !important; } } body.admin-shell-stacked.minimenu .dash-sidebar { top: var(--admin-shell-header-h) !important; } @media (max-width: 1024px) { body.admin-shell-stacked .dash-sidebar { top: var(--admin-shell-header-h) !important; height: calc(100vh - var(--admin-shell-header-h)) !important; max-height: calc(100vh - var(--admin-shell-header-h)) !important; } body.admin-shell-stacked .dash-sidebar .navbar-content { height: calc(100vh - var(--admin-shell-header-h) - 8px) !important; max-height: calc(100vh - var(--admin-shell-header-h) - 8px) !important; } } /* Red number badges – squircle style (soft rounded corners, not pill) */ .message-counter, .dash-header .dash-head-link span.bg-danger.dash-h-badge, .dash-header .dash-head-link .dash-h-badge.bg-danger { position: absolute !important; top: 2px !important; right: 4px !important; left: auto !important; border-radius: 6px !important; font-size: 10px; min-width: 22px; height: 18px; width: auto !important; padding: 0 6px !important; display: inline-flex !important; align-items: center; justify-content: center; text-align: center !important; box-sizing: border-box; } /* Default white count text; site-theme-preview uses --preview-accent-on (dark on white accent). */ body:not(.site-theme-preview) .message-counter, body:not(.site-theme-preview) .dash-header .dash-head-link span.bg-danger.dash-h-badge, body:not(.site-theme-preview) .dash-header .dash-head-link .dash-h-badge.bg-danger { color: #fff !important; } .message-counter { left: 22px !important; } /*for messages counter*/ .status-drp .dash-head-link { color: #525b69; display: inline-flex; align-items: center; padding: 0.6rem 0.7rem; margin: 0 4px; border-radius: 12px; position: relative; font-weight: 500; border: 1px solid rgba(206, 206, 206, 0.2); background-color: #fff; } /* start Rating Star Widgets Style - job application star*/ .rating-stars ul { list-style-type: none; padding: 0; -moz-user-select: none; -webkit-user-select: none; } .rating-stars ul > li.star { display: inline-block; } .rating-stars ul > li.star > i.fas { font-size: 1.5em; /* Change the size of the stars */ color: #ccc; /* Color on idle state */ } /* Hover state of the stars */ .rating-stars ul > li.star.hover > i.fas { color: #ffcc36; } /* Selected state of the stars */ .rating-stars ul > li.star.selected > i.fas { color: #ffa21d; } .static-rating { display: inline-block; } .static-rating .star { color: #e0e6ed; } .static-rating .voted { color: #ffa21d; } /* end start Rating Star Widgets Style - job application star*/ /* project_report */ .img_group { margin-left: -14px; } .circular-progressbar .flex-wrapper { display: flex; flex-flow: row nowrap; } .circular-progressbar .single-chart { width: 60%; justify-content: space-around; } .circular-progressbar .circular-chart { display: block; margin: 10px auto; max-width: 100%; max-height: 550px; } .circular-progressbar .circle-bg { fill: none; stroke: #eee; stroke-width: 3.8; } .circular-progressbar .circle { fill: none; stroke-width: 2.8; stroke-linecap: round; animation: progress 1s ease-out forwards; } @keyframes progress { 0% { stroke-dasharray: 0 100; } } .circular-progressbar .circular-chart.red .circle { stroke: #ff3a6e; } .circular-progressbar .circular-chart.orange .circle { stroke: #fd7e14; } .circular-progressbar .circular-chart.green .circle { stroke: #6fd943; } .circular-progressbar .circular-chart.blue .circle { stroke: #3c9ee5; } .circular-progressbar .percentage { /* fill: #666;*/ font-family: sans-serif; font-size: 0.5em; text-anchor: middle; } .circular-progressbar .flex-wrapper { display: flex; flex-flow: row nowrap; } .circular-progressbar .single-chart { width: 60%; justify-content: space-around; } .circular-progressbar .circular-chart { display: block; margin: 10px auto; max-width: 100%; max-height: 550px; } .circular-progressbar .circle-bg { fill: none; stroke: #eee; stroke-width: 3.8; } .circular-progressbar .circle { fill: none; stroke-width: 2.8; stroke-linecap: round; animation: progress 1s ease-out forwards; } @keyframes progress { 0% { stroke-dasharray: 0 100; } } .circular-progressbar .circular-chart.red .circle { stroke: #ff3a6e; } .circular-progressbar .circular-chart.orange .circle { stroke: #fd7e14; } .circular-progressbar .circular-chart.green .circle { stroke: #6fd943; } .circular-progressbar .circular-chart.blue .circle { stroke: #3c9ee5; } .circular-progressbar .percentage { /* fill: #666;*/ font-family: sans-serif; font-size: 0.5em; text-anchor: middle; } .pos-header { background-color: #e7e9ec; } /* ── POS Header ─────────────────────────────────────────────────────────── */ header.pos-header-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 16px; height: 64px; width: 100%; max-width: 100%; box-sizing: border-box; background: #fff; border-bottom: 1px solid #e9ecef; position: sticky; top: 0; z-index: 1030; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); } /* Left side: logo + nav */ .pos-header-left { display: flex; align-items: center; gap: 0; flex-shrink: 0; } /* Logo link */ .pos-logo-link { display: flex; align-items: center; text-decoration: none; padding: 0 12px 0 0; border-right: 1px solid #e9ecef; margin-right: 12px; } .pos-header-logo { display: block; height: 38px; width: auto; max-width: 140px; object-fit: contain; } /* Inline nav links (desktop) */ .pos-nav-links { display: flex; align-items: center; gap: 4px; } .pos-nav-links .nav-link { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; color: #525b69; font-size: 14px; font-weight: 500; border-radius: 6px; text-decoration: none; white-space: nowrap; transition: background 0.15s, color 0.15s; } .pos-nav-links .nav-link:hover { background: #f0f4f8; color: #2196f3; } .pos-nav-links .nav-link i { font-size: 18px; } /* Right side: icon list */ ul.pos-header-right { display: flex; align-items: center; gap: 10px; flex-shrink: 1; min-width: 0; margin-left: auto; flex-wrap: nowrap; } ul.pos-header-right > li { list-style: none; flex-shrink: 0; } /* Generic icon button */ .pos-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 8px; color: #525b69; text-decoration: none; position: relative; transition: background 0.15s, color 0.15s; font-size: 18px; } /* Icon buttons with badge need extra width so badge doesn't overlap next item */ ul.pos-header-right .pos-icon-btn.position-relative { width: auto; min-width: 38px; padding-right: 26px; justify-content: center; } /* POS header badges: keep inside the button so they don't overlap next item */ ul.pos-header-right .noti-icon-badge { position: absolute !important; top: 4px !important; right: 4px !important; left: auto !important; margin: 0 !important; font-size: 10px !important; min-width: 16px !important; min-height: 16px !important; height: auto !important; padding: 1px 5px !important; border-radius: 4px !important; display: inline-flex !important; align-items: center; justify-content: center; box-sizing: border-box; max-width: 32px; overflow: hidden; text-overflow: ellipsis; } .pos-icon-btn:hover { background: #f0f4f8; color: #2196f3; } .pos-icon-btn i, .pos-icon-btn svg { font-size: 18px; width: 20px; height: 20px; } /* Action buttons (refresh / duplicate) get accent treatment */ .pos-icon-btn.pos-header-action { background: #b8d8be; color: #1f3027; border: 1px solid #9fcbaa; } .pos-icon-btn.pos-header-action i { color: #fff; } .pos-icon-btn.pos-header-action:hover { background: #9fcbaa; color: #fff; } /* Clock (hidden on low resolution via media query below) */ .pos-header-clock-wrap { display: flex; align-items: center; } .pos-header-right .clock-time { font-size: 13px; font-weight: 500; color: #525b69; white-space: nowrap; } /* User avatar */ .pos-user-avatar { width: 32px; height: 32px; flex-shrink: 0; object-fit: cover; } /* User name text */ .pos-user-name { font-size: 13px; font-weight: 500; color: #525b69; white-space: nowrap; } /* User dropdown uses .pos-icon-btn but must NOT be a fixed 38×38 icon square — avatar + text + chevron */ ul.pos-header-right li.dropdown { display: flex; align-items: center; flex-shrink: 0; max-width: min(42vw, 260px); } ul.pos-header-right li.dropdown > a.pos-icon-btn { width: auto !important; min-width: 0 !important; height: auto !important; min-height: 38px; padding: 4px 8px; justify-content: flex-start; gap: 0.4rem; box-sizing: border-box; } ul.pos-header-right li.dropdown > a.pos-icon-btn .pos-user-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; } @media (min-width: 1200px) { ul.pos-header-right li.dropdown > a.pos-icon-btn .pos-user-name { max-width: 180px; } } /* ── Responsive breakpoints ──────────────────────────────────────────────── */ @media (max-width: 1199.98px) { .pos-header-logo { height: 32px; max-width: 110px; } } /* Hide date/time clock ("Thursday Mar 5, 2026 9:24:21 PM (Asia/Dubai)") when screen is less than 1300px */ @media (max-width: 1299.98px) { header.pos-header-bar .pos-header-clock-wrap, ul.pos-header-right li.pos-header-clock-wrap { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; } } @media (max-width: 991.98px) { header.pos-header-bar { padding: 0 10px; height: 56px; } .pos-logo-link { padding-right: 8px; margin-right: 8px; } .pos-header-logo { height: 28px; max-width: 90px; } .pos-icon-btn { width: 34px; height: 34px; font-size: 16px; } .pos-icon-btn i, .pos-icon-btn svg { font-size: 16px; width: 18px; height: 18px; } ul.pos-header-right li.dropdown > a.pos-icon-btn { width: auto !important; height: auto !important; min-height: 34px; } } @media (max-width: 767.98px) { header.pos-header-bar { padding: 0 8px; height: 52px; gap: 4px; } .pos-header-logo { height: 26px; max-width: 80px; } .pos-icon-btn { width: 32px; height: 32px; } ul.pos-header-right { gap: 6px; } ul.pos-header-right li.dropdown > a.pos-icon-btn { width: auto !important; height: auto !important; min-height: 32px; padding: 2px 4px; } } @media (max-width: 575.98px) { header.pos-header-bar { padding: 0 6px; height: 50px; } .pos-header-logo { height: 24px; max-width: 70px; } .pos-user-avatar { width: 26px; height: 26px; } .pos-icon-btn { width: 30px; height: 30px; border-radius: 6px; } ul.pos-header-right li.dropdown > a.pos-icon-btn { width: auto !important; height: auto !important; min-height: 30px; } ul.pos-header-right li.dropdown { max-width: min(48vw, 200px); } } .table.modal-table td, .table.modal-table th { white-space: normal; } .task-calendar-scroll { overflow-y: scroll; height: 827px; } /*start pos thermal print */ .pos-module-tbl td, .pos-module-tbl th { padding: 0px !important; } .pos-module .product-border { border-bottom: 3px #202020 dashed !important; } .pos-module .product-border-t { border-top: 3px #202020 dashed !important; } /*end pos print */ /*start balance-sheet new theme*/ .nav-pills.cust-nav { background: #e1e9ed; } .nav-pills.cust-nav .nav-item .nav-link { color: #162c4e; } .data-wrapper { /* height: 100%; */ display: flex; flex-direction: column; } .data-wrapper .data-body { flex: 1; } /*.data-wrapper .data-body .list-group-item:nth-child(2) {*/ /* flex: 1;*/ /*}*/ /* end balance-sheet new theme*/ /* JOB PAGE START */ .job-wrapper .navbar { position: absolute; top: 0; left: 0; right: 0; } .job-banner { position: relative; background-color: unset; } .job-banner .job-banner-bg { position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; z-index: -1; } .job-banner .job-banner-bg img { width: 100%; height: 100%; } .job-banner .job-banner-content { padding: 5.9% 0; max-width: 360px; width: 100%; margin: auto; } .placedjob-section .section-title { padding: 35px 25px; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; margin-top: -20px; text-align: center; } .job-card-body { padding: 15px; border-radius: 15px; background: linear-gradient( 277.29deg, rgba(111, 217, 67, 0.09) 0.99%, rgba(111, 217, 67, 0) 100.89% ); -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border: 1px solid #6fd943; } .placedjob-section { padding-bottom: 80px; background-color: unset; } .job-content .container { max-width: 1540px; } @media screen and (max-width: 767px) { .job-banner .job-banner-content { padding: 10% 0; } } @media screen and (max-width: 575px) { .job-banner .job-banner-content { padding: 21% 0; } .account-main-inner p, .account-inner { padding-left: 0 !important; } } .job-card { display: flex; flex-wrap: wrap; } .job-card .job-card-body { width: 100%; display: flex; flex-direction: column; } .job-card .job-card-body h5 { flex: 1; } /* JOB PAGE END */ /* apply job section */ .apply-job-section { padding-bottom: 80px; background-color: unset; } .apply-job-section .apply-job-wrapper { padding: 35px 25px; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; margin-top: -20px; } @media screen and (max-width: 767px) { .job-banner .job-banner-content { padding: 10% 0; } .apply-job-section .apply-job-wrapper { padding: 35px 15px; } } @media screen and (max-width: 575px) { .job-banner .job-banner-content { padding: 26% 0; } } /* apply job section */ .stage li { cursor: pointer; } @media (min-width: 420px) { .seo_image { height: 200px; width: 360px; } } @media (max-width: 420px) { .seo_image { height: 150px; width: 200px; } } .disabledCookie { pointer-events: none; opacity: 0.4; } .cookie_btn { margin-right: 31px; } /*start for payment setting*/ .setting-accordion .accordion-item { border: 1px solid #e0e6ef !important; border-radius: 7px; } .setting-accordion .accordion-header { background: #f8f8f8; border-radius: 7px; -webkit-border-radius: 7px; -moz-border-radius: 7px; -ms-border-radius: 7px; -o-border-radius: 7px; } .setting-accordion .accordion-header .accordion-button { background: #f8f8f8 !important; display: flex; justify-content: space-between; border-radius: 7px; box-shadow: none; border-bottom: 1px solid transparent; } .setting-accordion .accordion-header .accordion-button:not(.collapsed) { border-color: #e0e6ef; } .setting-accordion .accordion-header .accordion-button span { flex: 1; } .setting-accordion .accordion-header .accordion-button::after { margin: 0 0 0 5px; width: 24px; height: 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' viewBox='0 0 24 25' fill='none'%3E%3Cpath opacity='0.4' d='M12 22.4146C17.5228 22.4146 22 17.9374 22 12.4146C22 6.8917 17.5228 2.41455 12 2.41455C6.47715 2.41455 2 6.8917 2 12.4146C2 17.9374 6.47715 22.4146 12 22.4146Z' fill='%2325314C'/%3E%3Cpath d='M15.5301 12.8845C15.2371 12.5915 14.762 12.5915 14.469 12.8845L12.749 14.6045V8.41455C12.749 8.00055 12.413 7.66455 11.999 7.66455C11.585 7.66455 11.249 8.00055 11.249 8.41455L11.249 14.6035L9.52908 12.8835C9.23608 12.5905 8.76104 12.5905 8.46804 12.8835C8.17504 13.1765 8.17504 13.6516 8.46804 13.9446L11.468 16.9446C11.537 17.0136 11.62 17.0684 11.711 17.1064C11.802 17.1444 11.9001 17.1646 11.9981 17.1646C12.0961 17.1646 12.1929 17.1444 12.2849 17.1064C12.3769 17.0684 12.4591 17.0136 12.5281 16.9446L15.5281 13.9446C15.8231 13.6516 15.8231 13.1775 15.5301 12.8845Z' fill='%2325314C'/%3E%3C/svg%3E"); background-size: 24px; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; } .setting-accordion .accordion-item:not(:last-of-type) { margin-bottom: 15px; } /*end for payment setting*/ /* Icon color for legacy header links — do not apply to .btn (Try colors / outline-primary need currentColor on icons) */ .float-end a:not(.btn) > i { color: #ffffff; } .modal-footer .btn-light { margin-right: 13px; } /*.fc-timegrid-event-harness-inset{*/ /* inset: 494px 0% -566px !important;*/ /*}*/ .fc-timegrid-event-harness { position: absolute !important; } .status-btn { border-radius: 8px; color: #ffffff; } /* .ps--active-y { height: 100vh !important; } */ /*start - date:19-jun-2023*/ body.no-scroll { overflow: hidden; position: relative; } .auth-wrapper .navbar .navbar-brand { display: block; width: 100%; max-width: 150px; } .auth-wrapper .navbar .navbar-brand img { width: 100%; } @media (max-width: 1024px) { .ps { height: 100vh !important; } } .ps { overflow: hidden !important; overflow-anchor: none; touch-action: auto; } .dash-sidebar .navbar-content { height: calc(100vh - 70px); display: flex; flex-direction: column; padding: 4px var(--dash-sidebar-nav-x) 6px var(--dash-sidebar-nav-x); min-height: 0; } /* * Split layout: scroll only the middle region. If .navbar-content gets overflow-y: auto (theme does this * at max-width 1024px), the whole column scrolls together and User Management / Global Settings ride upward. * Keep the outer shell non-scrolling; only .dash-sidebar-menu-scroll scrolls. */ .dash-sidebar .navbar-content:has(.dash-sidebar-menu-scroll) { overflow-y: hidden !important; } .dash-sidebar .navbar-content:has(.dash-sidebar-menu-scroll) .dash-navbar-bottom { margin-top: auto; } /* Primary menu scrolls; User Management + Global Settings sit in .dash-navbar-bottom (pinned below) */ .dash-sidebar .dash-sidebar-menu-scroll { flex: 1 1 0; min-height: 0; overflow-x: hidden; overflow-y: auto; overflow-anchor: none; -webkit-overflow-scrolling: touch; } .dash-sidebar .dash-sidebar-menu-scroll .dash-navbar { display: flex; flex-direction: column; } .dash-sidebar .navbar-content .dash-navbar.dash-navbar-bottom { flex: 0 0 auto; flex-shrink: 0; width: 100%; margin: 0; padding-top: 12px; border-top: 1px solid rgba(0, 0, 0, 0.08); } /* Minimenu: ensure sidebar content has usable height and scrolls (fixes bottom cut-off) */ .minimenu .dash-sidebar { height: 100vh; display: flex; flex-direction: column; } .minimenu .dash-sidebar .navbar-wrapper { display: flex; flex-direction: column; flex: 1; min-height: 0; } .minimenu .dash-sidebar .navbar-content { flex: 1; min-height: 0 !important; height: auto !important; max-height: none !important; overflow-y: auto !important; overflow-x: hidden !important; } /* Override theme's .navbar-content.ps overflow:visible so minimenu can scroll */ .minimenu .dash-sidebar .navbar-content.ps { overflow-y: auto !important; overflow-x: hidden !important; } /* ========== Modern sidebar menu ========== */ body:not(.minimenu) .dash-sidebar .dash-link { margin: 0; padding: 5px 8px; border-radius: 6px; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } /* Top-level rows only: tighter gutter + padding-left matches --dash-sidebar-parent-pl (submenu aligns to .dash-mtext). */ body:not(.minimenu) .dash-sidebar .dash-navbar > .dash-item > .dash-link { padding: 5px 6px 5px var(--dash-sidebar-parent-pl) !important; } .dash-sidebar .dash-navbar > .dash-item > .dash-link { border-radius: 6px; border-left: var(--dash-sidebar-parent-border) solid transparent; margin: 2px 0 0 var(--dash-sidebar-parent-link-ml); display: flex; align-items: center; gap: var(--dash-sidebar-top-gap); width: 100%; max-width: 100%; box-sizing: border-box; min-width: 0; } /* * customizer.css (loaded before this file) sets .light-sidebar .dash-navbar > .dash-item > .dash-link * to margin-left/right: 15px and wide padding — higher specificity than rules without .light-sidebar, * which is why DevTools showed a large orange margin on parent .dash-link. */ body:not(.minimenu) .dash-sidebar.light-sidebar .dash-navbar > .dash-item > .dash-link { margin: 2px 0 0 var(--dash-sidebar-parent-link-ml) !important; padding: 5px 6px 5px var(--dash-sidebar-parent-pl) !important; border-radius: 6px !important; } /* Long labels: allow wrap — do not clip (sidebar too narrow + nowrap = unusable menu) */ .dash-sidebar .dash-navbar > .dash-item > .dash-link .dash-mtext { flex: 1 1 auto; min-width: 0; white-space: normal; overflow-wrap: anywhere; word-break: break-word; line-height: 1.35; } .dash-sidebar .dash-navbar > .dash-item > .dash-link .dash-arrow { flex-shrink: 0; align-self: flex-start; margin-top: 2px; } .dash-sidebar .dash-navbar > .dash-item > .dash-link .dash-micon { flex-shrink: 0; margin-right: var(--dash-sidebar-top-micon-mr); } /* Top-level active (parent e.g. Reports): full-width background like submenu, same height as before */ .dash-sidebar .dash-navbar > .dash-item.active > .dash-link { background: #cce0fa !important; color: #1a87f8 !important; border-left-color: #1a87f8; font-weight: 600; } .dash-sidebar .dash-navbar > .dash-item > .dash-link:hover { background: #e8f1fd !important; color: #1a87f8 !important; } .dash-sidebar .dash-navbar > .dash-item.active > .dash-link .dash-arrow i { color: #1a87f8 !important; stroke: #1a87f8 !important; } .dash-sidebar .dash-navbar > .dash-item > .dash-link:hover .dash-micon i, .dash-sidebar .dash-navbar > .dash-item > .dash-link:hover .dash-arrow i { color: #1a87f8 !important; stroke: #1a87f8 !important; } .dash-sidebar .dash-caption { padding: 8px var(--dash-sidebar-nav-x) 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; } /* Submenu: clean indentation, no overlapping bullet */ /* Hide theme's ::before bullet so it doesn't overlap the first letter */ .dash-sidebar .dash-submenu .dash-item::before { display: none !important; } .dash-sidebar .dash-submenu { padding: 0 0 4px 0; margin: 0 0 4px 0; width: 100%; box-sizing: border-box; border-left: none !important; margin-left: 0; } .dash-sidebar .dash-submenu .dash-item { padding: 1px 1px; margin: 0; } /* Non-linked / placeholder submenu rows (Coming Soon + red WIP items in menu.blade.php). Parent toggles use href="#!" or href="#" without these markers — those stay visible. */ .dash-sidebar .dash-submenu .dash-item:has(> a.dash-link-coming-soon), .dash-sidebar .dash-submenu .dash-item:has(> a.dash-link[style*="255, 0, 0"]) { display: none !important; } .dash-sidebar .dash-submenu .dash-link { display: block; width: calc(100% - 2px); box-sizing: border-box; padding: 5px 6px 5px var(--dash-sidebar-submenu1-pl) !important; border-radius: 6px; margin: 1px 1px 0 1px; transition: background-color 0.2s ease, color 0.2s ease; } .dash-sidebar .dash-submenu .dash-submenu .dash-link { padding: 5px 6px 5px calc(var(--dash-sidebar-submenu1-pl) + var(--dash-sidebar-submenu-nest)) !important; } .dash-sidebar .dash-submenu .dash-submenu .dash-submenu .dash-link { padding: 5px 6px 5px calc(var(--dash-sidebar-submenu1-pl) + (2 * var(--dash-sidebar-submenu-nest))) !important; } .dash-sidebar .dash-submenu .dash-item > .dash-link:hover { background: #e0edfc !important; color: #1a87f8 !important; } .dash-sidebar .dash-submenu .dash-item.active > .dash-link { background: #e0edfc !important; color: #1a87f8 !important; font-weight: 600; } .dash-sidebar .dash-submenu .dash-item > .dash-link:hover .dash-micon i, .dash-sidebar .dash-submenu .dash-item.active > .dash-link .dash-micon i { color: #1a87f8 !important; stroke: #1a87f8 !important; } /* Keep sidebar content from overflowing to the right */ .dash-sidebar .navbar-content { overflow-x: hidden; } .minimenu .dash-sidebar .dash-link { padding: 6px 12px; } .minimenu .dash-sidebar .dash-submenu .dash-link { padding: 4px 16px; } /* * Minimenu hover: theme (style.css) expands .dash-item:hover > .dash-link to calc(200px + 70px) and * paints the full row. Site-theme adds a strong row background — reads as a huge green block. * Keep the 80px rail; highlight only .dash-micon; flyout stays position:fixed from JS. */ .minimenu .dash-sidebar .dash-navbar > .dash-item:hover > .dash-link, .minimenu .dash-sidebar .dash-navbar > .dash-item.active > .dash-link { width: 100% !important; max-width: 100% !important; min-height: 0 !important; background: transparent !important; box-shadow: none !important; border-left-color: transparent !important; } .minimenu .dash-sidebar .dash-navbar > .dash-item:hover > .dash-link .dash-mtext, .minimenu .dash-sidebar .dash-navbar > .dash-item.active > .dash-link .dash-mtext { display: none !important; } .minimenu .dash-sidebar .dash-navbar > .dash-item:hover > .dash-link .dash-micon { margin-right: 0 !important; } /* Collapsed sidebar: keep submenu visible when hovering the submenu (so user can reach dropdown) */ .minimenu .dash-sidebar .dash-hasmenu:hover > .dash-submenu, .minimenu .dash-sidebar .dash-submenu:hover { display: block !important; visibility: visible !important; opacity: 1 !important; } /* Collapsed sidebar: submenu must be on top and clickable (above main content) */ .minimenu .dash-sidebar .dash-submenu { z-index: 9999 !important; pointer-events: auto !important; } .minimenu .dash-sidebar .dash-submenu .dash-link { pointer-events: auto !important; cursor: pointer !important; } .minimenu .dash-sidebar .dash-submenu a[href] { pointer-events: auto !important; } .dash-sidebar .dash-link { font-size: 13px; } /* Modern icon container: rounded, soft shadow */ .dash-sidebar .dash-micon { height: 28px; width: 28px; margin-right: 4px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.2s ease, box-shadow 0.2s ease; } .dash-sidebar .dash-micon i, .dash-sidebar .dash-micon > svg { font-size: 14px; } .dash-sidebar .dash-micon > svg { width: 14px; height: 14px; } .dash-sidebar .dash-navbar > .dash-item.active > .dash-link .dash-micon { background: #1a87f8 !important; box-shadow: none; } .dash-sidebar .dash-navbar > .dash-item.active > .dash-link .dash-micon i, .dash-sidebar .dash-navbar > .dash-item.active > .dash-link .dash-micon > svg { color: #fff !important; stroke: #fff !important; fill: #fff !important; } .dash-sidebar .dash-navbar > .dash-item > .dash-link:hover .dash-micon { background: rgba(26, 135, 248, 0.15); box-shadow: none; } /* POS: same modern style as other items (unified accent) */ .dash-sidebar .dash-navbar > .dash-item.dash-item-pos > .dash-link { background: transparent; color: inherit; } .dash-sidebar .dash-navbar > .dash-item.dash-item-pos > .dash-link .dash-micon i, .dash-sidebar .dash-navbar > .dash-item.dash-item-pos > .dash-link .dash-micon > svg { color: inherit; } .dash-sidebar .dash-navbar > .dash-item.dash-item-pos:hover > .dash-link, .dash-sidebar .dash-navbar > .dash-item.dash-item-pos.active > .dash-link { background: #e0edfc !important; color: #1a87f8 !important; border-left-color: #1a87f8; } .dash-sidebar .dash-navbar > .dash-item.dash-item-pos:hover > .dash-link .dash-micon i, .dash-sidebar .dash-navbar > .dash-item.dash-item-pos.active > .dash-link .dash-micon i { color: #1a87f8 !important; stroke: #1a87f8 !important; } .dash-sidebar .dash-navbar > .dash-item.dash-item-pos.active > .dash-link .dash-micon { background: #1a87f8 !important; } .dash-sidebar .dash-navbar > .dash-item.dash-item-pos.active > .dash-link .dash-micon i, .dash-sidebar .dash-navbar > .dash-item.dash-item-pos.active > .dash-link .dash-micon > svg { color: #fff !important; stroke: #fff !important; } /* Coming soon: muted, modern */ .dash-sidebar .dash-link.dash-link-coming-soon { color: #94a3b8 !important; font-style: normal; font-weight: 400; } .dash-sidebar .dash-link.dash-link-coming-soon:hover { color: #64748b !important; background: rgba(0, 0, 0, 0.03) !important; } /* Chevron transition when expand/collapse */ .dash-sidebar .dash-arrow { transition: transform 0.2s ease; } .dash-sidebar .dash-item.dash-trigger .dash-arrow { transform: rotate(90deg); } /* Product-Category / Account Setup left menu - style like main sidebar (image 2) */ .account-setup-nav.card { border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } #useradd-sidenav.list-group { padding: 12px; gap: 6px; } #useradd-sidenav .list-group-item { background: #fff !important; color: #1e293b !important; border: none !important; border-radius: 8px !important; padding: 15px 18px !important; font-weight: 500; } #useradd-sidenav .list-group-item .float-end, #useradd-sidenav .list-group-item .float-end i { color: inherit !important; } #useradd-sidenav .list-group-item:hover { background: #deefff !important; color: #1e40af !important; } #useradd-sidenav .list-group-item:hover .float-end, #useradd-sidenav .list-group-item:hover .float-end i { color: #1e40af !important; } #useradd-sidenav .list-group-item.active { background: #d6ebff !important; color: #1e40af !important; } #useradd-sidenav .list-group-item.active .float-end, #useradd-sidenav .list-group-item.active .float-end i { color: #1e40af !important; } /*end- date:19-jun-2023*/ .language_option_bg option { background-color: #fff; color: #000; } /*[data-action] {*/ /* background: gray !important;*/ /*}*/ /*start for balancesheet*/ .account-first span:first-child { width: 35%; } .data-wrapper .data-body .list-group-item span:nth-child(1) { width: 35%; } /*end for balancesheet*/ /*start for input search*/ .searchBoxElement { background-color: white; border: 1px solid #aaa; position: absolute; max-height: 150px; overflow-x: hidden; overflow-y: auto; margin: 0; padding: 0; line-height: 23px; list-style: none; z-index: 1; -ms-overflow-style: none; scrollbar-width: none; } .searchBoxElement span { padding: 0 5px; } .searchBoxElement li { background-color: white; color: black; } .searchBoxElement li:hover { background-color: #50a0ff; color: white; } .searchBoxElement li.selected { background-color: #50a0ff; color: white; } .formTextbox { display: block; width: 100%; padding: 0.575rem 1rem; font-size: 0.875rem; font-weight: 400; line-height: 1.5; color: #293240; background-color: #ffffff; background-clip: padding-box; border: 1px solid #ced4da; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 6px; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } body.theme-1 .formTextbox:focus { border-color: var(--theme1-color); box-shadow: 0 0 0 0.2rem rgb(12, 175, 96); } body.theme-2 .formTextbox:focus { border-color: var(--theme2-color); box-shadow: 0 0 0 0.2rem rgb(117, 194, 81); } body.theme-3 .formTextbox:focus { border-color: var(--theme3-color); box-shadow: 0 0 0 0.2rem rgb(88, 78, 210, 25%); } body.theme-4 .formTextbox:focus { border-color: var(--theme4-color); box-shadow: 0 0 0 0.2rem rgb(20, 83, 136, 25%); } body.theme-5 .formTextbox:focus { border-color: var(--theme5-color); box-shadow: 0 0 0 0.2rem rgb(185, 64, 107, 25%); } body.theme-6 .formTextbox:focus { border-color: var(--theme6-color); box-shadow: 0 0 0 0.2rem rgb(0, 142, 204, 25%); } body.theme-7 .formTextbox:focus { border-color: var(--theme7-color); box-shadow: 0 0 0 0.2rem rgb(146, 44, 136, 25%); } body.theme-8 .formTextbox:focus { border-color: var(--theme8-color); box-shadow: 0 0 0 0.2rem rgb(192, 161, 69, 25%); } body.theme-9 .formTextbox:focus { border-color: var(--theme9-color); box-shadow: 0 0 0 0.2rem rgb(72, 73, 75, 25%); } body.theme-10 .formTextbox:focus { border-color: var(--theme10-color); box-shadow: 0 0 0 0.2rem rgb(12, 119, 133, 25%); } /*end for input search*/ .account-inner p { max-width: 25%; width: 100%; } .aacount-title h6 { max-width: 25%; width: 100%; } .list_colume_notifi { position: relative; display: block; padding: 16.66667px 25px; color: #212529; /* background-color: #ffffff; */ border: 1px solid #f1f1f1; } @media (max-width: 420px) { .action-btn-col { flex: 0 0 100%; text-align: left; justify-content: left; display: flex; margin-top: 10px; } } .account-arrow { display: flex; align-items: center; gap: 5px; flex: 0 0 25%; } .account-arrow p { flex: 0 0 25%; } .account-arrow .account-icon { width: 15px; height: 15px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ffffff; margin-left: -20px; font-size: 12px; } body.theme-1 .account-arrow .account-icon { background-color: #0caf60; } body.theme-2 .account-arrow .account-icon { background-color: #584ed2; } body.theme-3 .account-arrow .account-icon { background-color: #6fd943; } body.theme-4 .account-arrow .account-icon { background-color: #145388; } body.theme-5 .account-arrow .account-icon { background-color: #b9406b; } body.theme-6 .account-arrow .account-icon { background-color: #008ecc; } body.theme-7 .account-arrow .account-icon { background-color: #922c88; } body.theme-8 .account-arrow .account-icon { background-color: #c0a145; } body.theme-9 .account-arrow .account-icon { background-color: #48494b; } body.theme-10 .account-arrow .account-icon { background-color: #0c7785; } .account-arrow .account-icon i { transition: 0.5s all ease-in-out; } .collapse-view .account-arrow i { transform: rotate(180deg); } .subAccount { font-weight: 600; } .apexcharts-legend-text { margin-right: 10px; } [dir="rtl"] .apexcharts-xaxis-texts-g { transform: translate(10px, 40px) !important; } .apexcharts-yaxis-title-text { transform: rotate(-90deg); transform-origin: 0px 133.34800720214844px !important; } .apexcharts-yaxis { transform: translate(0px, 0px) !important; } .apexcharts-pie-area { display: none; } .color-wrp .color-picker-wrp input[type="color"] { background-color: #fff; height: 55px; cursor: pointer; border-radius: 3px; margin: 0px; padding: 0px; border: 0; margin-bottom: 5px; margin-left: 5px; } .color-wrp { display: flex; align-items: center; margin-top: 15px; } .color-wrp .theme-color { margin: 0; } .color-wrp .color-picker-wrp { width: 100px; } #calender_type { float: right; width: 150px; } .dash-header .drp-notification { margin-left: 10px; } /* Header badges: squircle (soft rounded corners like icon containers) */ .dash-header .dash-head-link .dash-h-badge { border-radius: 6px !important; min-width: 22px !important; height: 18px !important; width: auto !important; padding: 0 6px !important; display: inline-flex !important; align-items: center; justify-content: center; box-sizing: border-box; } .dash-header .dash-head-link .dash-h-badge.dots { border-radius: 5px !important; min-width: 8px; width: 8px !important; height: 8px !important; padding: 0 !important; } .budget .btn { margin-top: 10px; margin-right: 10px; } .theme-avtar-logo { width: 80px; border-radius: 17.3552px; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; } .form-group.required .form-label:after { content: "*"; color: red; } /* Modern Search Box Styles */ .search-box-modern { transition: all 0.3s ease; } .search-box-modern:hover { transform: translateY(-2px); } .search-box-modern input { transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1); } .search-box-modern input:focus { box-shadow: 0 4px 16px rgba(59, 130, 246, 0.2); border-color: #3b82f6 !important; } .search-box-modern .input-group-text { transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1); } .search-box-modern input:focus + .input-group-text { box-shadow: 0 4px 16px rgba(59, 130, 246, 0.2); border-color: #3b82f6 !important; } /* ============================================ Global Search - Modern Design ============================================ */ .global-search-container { position: relative; width: 100%; } .global-search-wrapper { position: relative; display: flex; align-items: center; background: #ffffff; border: 2px solid #e5e7eb; border-radius: 12px; padding: 8px 16px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } .global-search-wrapper:hover { border-color: #3b82f6; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1); } .global-search-wrapper:focus-within { border-color: #3b82f6; box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15); background: #f8faff; } .global-search-wrapper .search-icon { color: #6b7280; font-size: 18px; margin-right: 10px; transition: color 0.2s ease; } .global-search-wrapper:focus-within .search-icon { color: #3b82f6; } .global-search-input { flex: 1; border: none; outline: none; background: transparent; font-size: 14px; color: #1f2937; padding: 0; font-weight: 400; } .global-search-input::placeholder { color: #9ca3af; font-weight: 400; } .search-loading { display: none; align-items: center; justify-content: center; margin-left: 10px; color: #3b82f6; } .search-loading i { font-size: 18px; animation: spin 1s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Search Results Dropdown */ .global-search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #ffffff; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05); max-height: 500px; overflow-y: auto; z-index: 1050; animation: slideDown 0.2s ease-out; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .global-search-results::-webkit-scrollbar { width: 4px; height: 4px; } .global-search-results::-webkit-scrollbar-track { background: #f3f4f6; border-radius: 10px; } .global-search-results::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 10px; } .global-search-results::-webkit-scrollbar-thumb:hover { background: #9ca3af; } /* Search Category */ .search-category { padding: 8px 0; } .search-category:not(:last-child) { border-bottom: 1px solid #f3f4f6; } .search-category-title { padding: 10px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase; color: #6b7280; letter-spacing: 0.5px; display: flex; align-items: center; gap: 8px; } .search-category-title i { font-size: 14px; color: #3b82f6; } /* Search Result Item */ .search-result-item { display: flex; align-items: center; padding: 12px 16px; text-decoration: none; color: #1f2937; transition: all 0.15s ease; gap: 12px; position: relative; } .search-result-item:hover, .search-result-item.active { background: linear-gradient(90deg, #eff6ff 0%, #dbeafe 100%); transform: translateX(4px); } .search-result-item:active { transform: translateX(2px); } .search-result-icon { width: 36px; height: 36px; min-width: 36px; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); border-radius: 10px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2); } .search-result-icon i { color: #ffffff; font-size: 16px; } .search-result-content { flex: 1; min-width: 0; } .search-result-title { font-size: 14px; font-weight: 600; color: #111827; margin-bottom: 2px; word-wrap: break-word; overflow-wrap: break-word; line-height: 1.4; } .search-result-title mark { background: #fef3c7; color: #92400e; padding: 2px 4px; border-radius: 3px; font-weight: 700; } .search-result-subtitle { font-size: 12px; color: #6b7280; word-wrap: break-word; overflow-wrap: break-word; line-height: 1.3; } .search-result-menu-path { font-size: 11px; color: #9ca3af; margin-top: 2px; font-style: italic; word-wrap: break-word; overflow-wrap: break-word; line-height: 1.2; } .search-result-badge { padding: 4px 10px; background: #f3f4f6; border-radius: 6px; font-size: 11px; font-weight: 600; color: #4b5563; white-space: nowrap; } /* No Results */ .search-no-results { padding: 48px 24px; text-align: center; } .search-no-results i { font-size: 48px; color: #d1d5db; margin-bottom: 16px; } .search-no-results p { font-size: 14px; color: #6b7280; margin: 0; } /* Search Error */ .search-error { padding: 48px 24px; text-align: center; } .search-error i { font-size: 48px; color: #ef4444; margin-bottom: 16px; } .search-error p { font-size: 14px; color: #6b7280; margin: 0; } /* Search Footer */ .search-footer { padding: 12px 16px; border-top: 1px solid #f3f4f6; display: flex; justify-content: space-between; align-items: center; background: #f9fafb; border-radius: 0 0 12px 12px; } .search-footer small { font-size: 11px; color: #6b7280; } /* Dark Mode Support */ @media (prefers-color-scheme: dark) { .global-search-wrapper { background: #1f2937; border-color: #374151; } .global-search-wrapper:focus-within { background: #111827; border-color: #3b82f6; } .global-search-input { color: #f9fafb; } .global-search-results { background: #1f2937; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1); } .search-result-item { color: #f9fafb; } .search-result-item:hover, .search-result-item.active { background: #374151; } .search-result-title { color: #f9fafb; } } /* Responsive Design */ @media (max-width: 768px) { .global-search-container { max-width: 100%; } .global-search-wrapper { padding: 6px 12px; } .global-search-input { font-size: 13px; } .global-search-results { max-height: 400px; } .search-result-item { padding: 10px 12px; } } /* Wider results for better readability */ @media (min-width: 769px) { .global-search-results { min-width: 500px; } } /* Keyboard Shortcut Hint */ .global-search-wrapper::after { content: "⌘K"; position: absolute; right: 12px; font-size: 11px; color: #9ca3af; background: #f3f4f6; padding: 3px 8px; border-radius: 4px; font-weight: 600; opacity: 0; transition: opacity 0.2s ease; } .global-search-wrapper:not(:focus-within)::after { opacity: 1; } @media (max-width: 768px) { .global-search-wrapper::after { display: none; } } /* ============================================ Waiting Modal Animation Styles ============================================ */ /* Pulse and Scale Animation */ @keyframes waitingPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.8; } } /* Smooth Float Animation */ @keyframes waitingFloat { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-15px); } } /* Breathing Effect */ @keyframes waitingBreathe { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.08); filter: brightness(1.1); } } /* Loading Spinner Around Image */ @keyframes waitingSpinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Apply animation to waiting image in SweetAlert */ .swal2-container.swal2-center .swal2-image { animation: waitingBreathe 2s ease-in-out infinite, waitingFloat 3s ease-in-out infinite; will-change: transform; } /* Add a loading ring around the modal */ .swal2-container.swal2-center.waiting-modal::before { content: ""; position: fixed; top: 50%; left: 50%; width: 380px; height: 380px; margin-left: -190px; margin-top: -250px; border: 4px solid rgba(59, 130, 246, 0.1); border-top: 4px solid #002430; border-radius: 50%; animation: waitingSpinner 1.5s linear infinite; z-index: 9999; pointer-events: none; } /* Add subtle glow effect */ .swal2-container.swal2-center .swal2-popup { box-shadow: 0 0 40px rgba(59, 130, 246, 0.2); animation: waitingPulse 3s ease-in-out infinite; } /* Force confirmation modal (Are you sure?) buttons to use outline style – overrides SweetAlert default */ .swal2-popup .swal2-actions .swal2-confirm.btn-outline-success, .swal2-popup .swal2-actions .btn-outline-success { background-color: #e8f5e9 !important; color: #4caf50 !important; border: 1px solid #4caf50 !important; } .swal2-popup .swal2-actions .swal2-confirm.btn-outline-success:hover, .swal2-popup .swal2-actions .btn-outline-success:hover { background-color: #4caf50 !important; color: #fff !important; border-color: #4caf50 !important; box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3); } .swal2-popup .swal2-actions .swal2-cancel.btn-outline-danger, .swal2-popup .swal2-actions .btn-outline-danger { background-color: #ffebee !important; color: #e53935 !important; border: 1px solid #e53935 !important; } .swal2-popup .swal2-actions .swal2-cancel.btn-outline-danger:hover, .swal2-popup .swal2-actions .btn-outline-danger:hover { background-color: #ffcdd2 !important; color: #b71c1c !important; border-color: #b71c1c !important; box-shadow: 0 2px 8px rgba(183, 28, 28, 0.2); } /* Fallback: style SweetAlert confirm/cancel by their native class so outline style always applies */ .swal2-popup .swal2-actions .swal2-confirm { background-color: #e8f5e9 !important; color: #4caf50 !important; border: 1px solid #4caf50 !important; } .swal2-popup .swal2-actions .swal2-confirm:hover { background-color: #4caf50 !important; color: #fff !important; box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3); } .swal2-popup .swal2-actions .swal2-cancel { background-color: #ffebee !important; color: #e53935 !important; border: 1px solid #e53935 !important; } .swal2-popup .swal2-actions .swal2-cancel:hover { background-color: #ffcdd2 !important; color: #b71c1c !important; box-shadow: 0 2px 8px rgba(183, 28, 28, 0.2); } /* Optional: Add dots loading indicator below image */ .waiting-dots { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 20px; } .waiting-dots span { width: 12px; height: 12px; border-radius: 50%; animation: waitingDotBounce 1.4s ease-in-out infinite; } .waiting-dots span:nth-child(1) { background: #00ebe5; animation-delay: 0s; } .waiting-dots span:nth-child(2) { background: #ff6b6b; animation-delay: 0.2s; } .waiting-dots span:nth-child(3) { background: #4ecdc4; animation-delay: 0.4s; } @keyframes waitingDotBounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.7; } 30% { transform: translateY(-15px); opacity: 1; } } /* Progress bar animation */ .waiting-progress { width: 80%; height: 4px; background: rgba(0, 36, 48, 0.2); border-radius: 2px; margin: 20px auto 0; overflow: hidden; position: relative; } .waiting-progress::after { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, #002430, transparent); animation: waitingProgressBar 2s ease-in-out infinite; } @keyframes waitingProgressBar { 0% { left: -100%; } 100% { left: 100%; } } /* Unread Notification Styling */ .notification-unread { font-weight: 600; } .notification-unread td { font-weight: 600; } /* Notification Page Styles */ .notification-unread { background-color: #f0f8ff !important; font-weight: 500; } .notification-unread td { border-left: 3px solid #00b8d9; } .notification-row { transition: background-color 0.2s ease; } .notification-row:hover { background-color: #f8fafc; } .badge.bg-primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; } .badge.bg-success { background: #4caf50 !important; color: #fff !important; } .badge.bg-danger { background: linear-gradient(135deg, #ff5630 0%, #d93814 100%) !important; } .badge.bg-warning { background: linear-gradient(135deg, #ffab00 0%, #e09900 100%) !important; } .badge.bg-info { background: #7f48ba !important; color: #fff !important; } /* Action buttons: match outline style (View=secondary, Edit=primary, Delete=danger) */ .action-btn { transition: opacity 0.2s ease, filter 0.2s ease; } .action-btn:hover { opacity: 1; filter: none; } .action-btn a.btn, .action-btn a.mx-3.btn { margin: 0 !important; min-width: 32px; height: 32px; padding: 0.35rem 0.5rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 6px !important; border: none !important; font-weight: 500; transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; } .action-btn.bg-info a.btn, .action-btn.bg-info a.mx-3.btn { background-color: #f4eefd !important; color: #7f48ba !important; } .action-btn.bg-info a.btn:hover, .action-btn.bg-info a.mx-3.btn:hover { background-color: #7f48ba !important; color: #fff !important; box-shadow: 0 2px 8px rgba(127, 72, 186, 0.3); } .action-btn.bg-info a.btn i, .action-btn.bg-info a.mx-3.btn i { color: inherit !important; } .action-btn.bg-primary a.btn, .action-btn.bg-primary a.mx-3.btn { background-color: #ebf5fb !important; color: #2196f3 !important; } .action-btn.bg-primary a.btn:hover, .action-btn.bg-primary a.mx-3.btn:hover { background-color: #2196f3 !important; color: #fff !important; box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3); } .action-btn.bg-primary a.btn i, .action-btn.bg-primary a.mx-3.btn i { color: inherit !important; } .action-btn.bg-danger a.btn, .action-btn.bg-danger a.mx-3.btn { background-color: #ffebee !important; color: #e53935 !important; } .action-btn.bg-danger a.btn:hover, .action-btn.bg-danger a.mx-3.btn:hover { background-color: #ffcdd2 !important; color: #b71c1c !important; box-shadow: 0 2px 8px rgba(183, 28, 28, 0.2); } .action-btn.bg-danger a.btn i, .action-btn.bg-danger a.mx-3.btn i { color: inherit !important; } .action-btn.bg-warning a.btn, .action-btn.bg-warning a.mx-3.btn { background-color: #fff3e0 !important; color: #f0a73d !important; } .action-btn.bg-warning a.btn:hover, .action-btn.bg-warning a.mx-3.btn:hover { background-color: #f0a73d !important; color: #fff !important; box-shadow: 0 2px 8px rgba(240, 167, 61, 0.35); } .action-btn.bg-warning a.btn i, .action-btn.bg-warning a.mx-3.btn i { color: inherit !important; } .action-btn.bg-success a.btn, .action-btn.bg-success a.mx-3.btn { background-color: #e8f5e9 !important; color: #4caf50 !important; } .action-btn.bg-success a.btn:hover, .action-btn.bg-success a.mx-3.btn:hover { background-color: #4caf50 !important; color: #fff !important; box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3); } .action-btn.bg-success a.btn i, .action-btn.bg-success a.mx-3.btn i { color: inherit !important; } /* Cool white and blue theme for notification page */ .notification-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 1rem; border-radius: 8px 8px 0 0; margin-bottom: 1rem; } .table thead th { background-color: #f8f9fa; color: #495057; font-weight: 600; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.5px; padding: 0.5rem 0.75rem; } /* Simple table row hover effect - no layout shift, no scrollbar */ .table tbody tr { transition: background-color 0.2s ease; } .table tbody tr:hover { background-color: #f8fafc; } /* Thin scrollbars; use auto gutter — stable reserves space on the right and looks like a gap */ .table-responsive { overflow: auto; scrollbar-gutter: auto; } /* Webkit: width = vertical bar, height = horizontal bar (testers reported horizontal too thick) */ .table-responsive::-webkit-scrollbar { width: 4px; height: 4px; } .table-responsive::-webkit-scrollbar-track { background: transparent; } .table-responsive::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 3px; } .table-responsive::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.4); } /* Firefox - thin scrollbars */ .table-responsive { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.2) transparent; } /* Alternative: Force scrollbar space reservation */ body { overflow-y: scroll; } /* ============================================ Header - Mobile Responsive Styles ============================================ */ /* Hide clock on mobile devices */ @media (max-width: 767px) { .clock-time { display: none !important; } } /* Hide clock on small tablets in portrait */ @media (max-width: 991px) { .clock-time.ms-2 { display: none !important; } } /* ============================================ Notification Page - Responsive Styles ============================================ */ /* Mobile-First Responsive Design for Notifications */ /* iPad Specific Styles - Keep table format but optimize for touch */ @media only screen and (min-width: 768px) and (max-width: 1024px) { /* iPad Portrait & Landscape optimization */ .card-body.table-border-style { padding: 20px 15px; } /* Prevent horizontal scroll */ .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; } .table { font-size: 0.9rem; width: 100%; table-layout: fixed; } .table thead th { padding: 14px 10px; font-size: 0.82rem; white-space: normal; word-wrap: break-word; overflow-wrap: break-word; } .table tbody td { padding: 14px 10px; vertical-align: middle; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; } /* Column width distribution to prevent overflow */ .table thead th:nth-child(1), .table tbody td:nth-child(1) { width: 14%; } .table thead th:nth-child(2), .table tbody td:nth-child(2) { width: 12%; } .table thead th:nth-child(3), .table tbody td:nth-child(3) { width: 33%; } .table thead th:nth-child(4), .table tbody td:nth-child(4) { width: 16%; } .table thead th:nth-child(5), .table tbody td:nth-child(5) { width: 25%; } /* Optimize badge display for iPad */ .badge { font-size: 0.75rem; padding: 5px 10px; white-space: normal; line-height: 1.4; display: inline-block; max-width: 100%; } .badge i { font-size: 0.75rem; margin-right: 3px; } /* Better touch targets for iPad - Larger buttons */ .action-btn { width: 36px; height: 36px; font-size: 17px; margin: 2px; } /* Improve action column layout - Better spacing */ .table tbody td.action .d-flex { gap: 6px; flex-wrap: wrap; } /* Better text wrapping in message column */ .table tbody td small { font-size: 0.82rem; line-height: 1.5; display: block; } /* Notification unread indicator */ .notification-unread td:first-child { border-left: 4px solid #00b8d9; } /* Optimize pagination for touch */ .pagination .page-link { padding: 8px 12px; font-size: 0.9rem; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; } /* Ensure no element causes overflow */ * { max-width: 100%; } } /* iPad Portrait Specific */ @media only screen and (min-width: 768px) and (max-width: 834px) and (orientation: portrait) { /* Prevent horizontal scroll in portrait mode */ body { overflow-x: hidden; } .card-body.table-border-style { padding: 16px 12px; } /* Slightly reduce spacing for portrait iPad */ .table thead th { font-size: 0.75rem; padding: 12px 8px; } .table tbody td { font-size: 0.85rem; padding: 12px 8px; } /* Adjusted column widths - Total: 100% */ .table thead th:nth-child(1), .table tbody td:nth-child(1) { width: 13%; } .table thead th:nth-child(2), .table tbody td:nth-child(2) { width: 12%; } .table thead th:nth-child(3), .table tbody td:nth-child(3) { width: 33%; } .table thead th:nth-child(4), .table tbody td:nth-child(4) { width: 17%; font-size: 0.75rem; } .table thead th:nth-child(5), .table tbody td:nth-child(5) { width: 25%; } /* Comfortable action buttons for portrait */ .action-btn { width: 34px; height: 34px; font-size: 16px; margin: 2px; } /* Better gap between action buttons */ .table tbody td.action .d-flex { gap: 5px; } /* Readable badges */ .badge { font-size: 0.7rem; padding: 4px 8px; } } /* iPad Landscape Specific */ @media only screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) { /* Optimize for iPad Pro landscape */ body { overflow-x: hidden; } .table { font-size: 0.95rem; width: 100%; table-layout: auto; } .table thead th { padding: 15px 12px; } .table tbody td { padding: 15px 12px; } .action-btn { width: 36px; height: 36px; font-size: 18px; } .table tbody td.action .d-flex { gap: 6px; } .badge { font-size: 0.8rem; padding: 5px 10px; } } /* Tablets - General */ @media (max-width: 991px) { /* Card adjustments for tablets */ .notification-unread { border-left-width: 4px; } .table td, .table th { padding: 10px 8px; font-size: 0.9rem; } .action-btn { width: 26px; height: 26px; font-size: 18px; } } @media (max-width: 767px) { /* Stack table for mobile - Card Layout (below iPad) * Scoped to .responsive-table: notification list uses this class. Global .table rules were * hiding ALL table headers site-wide (e.g. Tenant Sales Manager sync logs). */ .notification-card-view { display: block; } .table-responsive { border: 0; } .table-responsive.responsive-table .table thead { display: none; } .table-responsive.responsive-table .table tbody tr { display: block; margin-bottom: 20px; border: 1px solid #e0e6ef; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); padding: 15px; background: #fff; position: relative; } .table-responsive.responsive-table .table tbody tr.notification-unread { border-left: 4px solid #00b8d9; background-color: #f0f8ff; } .table-responsive.responsive-table .table tbody td { display: block; text-align: left !important; padding: 8px 0; border: none !important; word-wrap: break-word; overflow-wrap: break-word; } .table-responsive.responsive-table .table tbody td:before { content: attr(data-label); font-weight: 600; display: inline-block; margin-bottom: 4px; color: #495057; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; } /* Type Badge Styling */ .table-responsive.responsive-table .table tbody td:first-child { margin-bottom: 10px; } .table-responsive.responsive-table .table tbody td:first-child:before { content: "Type: "; } .table-responsive.responsive-table .table tbody td:first-child .badge { display: inline-block; margin-top: 5px; } /* Action buttons - Full width and stacked */ .table-responsive.responsive-table .table tbody td.action { margin-top: 15px; padding-top: 15px; border-top: 1px solid #e0e6ef !important; } .table-responsive.responsive-table .table tbody td.action:before { content: "Actions: "; display: block; margin-bottom: 10px; } .table-responsive.responsive-table .table tbody td.action .d-flex { flex-wrap: wrap; gap: 8px; } .table-responsive.responsive-table .table tbody td.action .action-btn { flex: 0 0 auto; margin: 0 !important; } /* Message content - Better readability */ .table-responsive.responsive-table .table tbody td small { font-size: 0.85rem; line-height: 1.5; display: block; } /* Date & Time - Smaller text */ .table-responsive.responsive-table .table tbody td:nth-last-child(2):before { content: "Date & Time: "; } /* Pagination adjustments */ .pagination { flex-wrap: wrap; justify-content: center; gap: 5px; } .page-item .page-link { padding: 5px 10px; font-size: 0.85rem; } } @media (max-width: 576px) { /* Extra small devices */ .card-body { padding: 15px !important; } .table-responsive.responsive-table .table tbody tr { padding: 12px; margin-bottom: 15px; } .table-responsive.responsive-table .table tbody td { padding: 6px 0; font-size: 0.85rem; } .table-responsive.responsive-table .table tbody td:before { font-size: 0.7rem; } /* Badge adjustments */ .badge { font-size: 0.7rem; padding: 4px 8px; } /* Action buttons - Smaller on mobile */ .action-btn { width: 32px; height: 32px; font-size: 16px; } /* Empty state icon */ .text-center i[style*="font-size: 64px"] { font-size: 48px !important; } .text-center h5 { font-size: 1.1rem; } .text-center p { font-size: 0.9rem; } /* Better text wrapping for long notification messages */ .table-responsive.responsive-table .table tbody td { word-break: break-word; } /* Forms in action column - Full width buttons */ .table-responsive.responsive-table .table tbody td.action form { display: inline-block; } /* Improved spacing for action buttons */ .table-responsive.responsive-table .table tbody td.action .d-flex { gap: 6px; } /* Status badges in action column */ .table-responsive.responsive-table .table tbody td.action .badge { display: inline-block; margin: 2px; } } @media (max-width: 480px) { /* Very small devices */ .breadcrumb-item { font-size: 0.8rem; } .page-title h1, .page-title h2, .page-title h3 { font-size: 1.3rem; } .table-responsive.responsive-table .table tbody tr { padding: 10px; } .table-responsive.responsive-table .table tbody td { font-size: 0.8rem; } /* Compact action buttons on very small screens */ .action-btn { width: 30px; height: 30px; font-size: 14px; border-radius: 6px; } /* Adjust badge sizes */ .badge { font-size: 0.65rem; padding: 3px 6px; } } /* Mobile Landscape orientation adjustments */ @media (max-width: 767px) and (orientation: landscape) { .table-responsive.responsive-table .table tbody tr { display: flex; flex-wrap: wrap; padding: 10px; } .table-responsive.responsive-table .table tbody td { flex: 0 0 48%; margin: 5px 1%; } .table-responsive.responsive-table .table tbody td.action { flex: 0 0 98%; } } /* iPad Mini & Small tablets in landscape - Keep table but optimize */ @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { body { overflow-x: hidden; } .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } .table { width: 100%; table-layout: fixed; } /* Optimized column widths for landscape */ .table thead th:nth-child(1), .table tbody td:nth-child(1) { width: 15%; } .table thead th:nth-child(2), .table tbody td:nth-child(2) { width: 12%; } .table thead th:nth-child(3), .table tbody td:nth-child(3) { width: 35%; } .table thead th:nth-child(4), .table tbody td:nth-child(4) { width: 15%; } .table thead th:nth-child(5), .table tbody td:nth-child(5) { width: 23%; } /* Better spaced action buttons */ .table tbody td.action .d-flex { flex-wrap: wrap; gap: 5px; } .action-btn { width: 34px; height: 34px; font-size: 16px; margin: 2px; } .table thead th { padding: 12px 8px; } .table tbody td { padding: 12px 8px; } } /* Print styles for notification page */ @media print { .table tbody tr { page-break-inside: avoid; } .action-btn, .breadcrumb, .pagination { display: none !important; } .table thead { display: table-header-group; } .table tbody tr { display: table-row; } .table tbody td { display: table-cell; border: 1px solid #ddd; } } /* Mouse hover: do not translate/shadow table rows — transform widens overflow and forces a horizontal scrollbar inside .table-responsive on hover even when the table fits (see "Simple table row hover" above). */ /* Touch device optimizations (iPad, tablets, phones) */ @media (hover: none) and (pointer: coarse) { /* Better touch targets */ .action-btn { min-width: 44px; min-height: 44px; } .table tbody td.action a, .table tbody td.action button { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* Active state for touch feedback */ .table tbody tr:active { background-color: #f8f9fa; } .action-btn:active { transform: scale(0.95); opacity: 0.8; } /* Better spacing for touch scrolling */ .table tbody tr { margin-bottom: 2px; } } /* Accessibility improvements */ @media (prefers-reduced-motion: reduce) { .notification-row, .action-btn, .table tbody tr { transition: none !important; animation: none !important; } } /* Dark mode support for notification page */ @media (prefers-color-scheme: dark) { .notification-unread { background-color: rgba(0, 184, 217, 0.1) !important; } .table tbody tr { background: #1f2937; border-color: #374151; } } /* ============================================ Responsive Card Styles - PREMIUM VERSION Modern, Polished Design with Subtle Animations ============================================ */ /* Responsive card styles for mobile and tablets (iPad included) */ @media (max-width: 1024px) { .responsive-table { display: none; } .mobile-cards { display: block; animation: fadeInUp 0.4s ease-out; } /* Smooth fade-in animation */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Premium Request Details Card */ .mobile-card { background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%); border: 1px solid #e3e8ef; border-left: 4px solid #3b82f6; border-radius: 12px; padding: 18px; margin-bottom: 16px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .mobile-card:hover { transform: translateY(-3px); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08); border-left-color: #2563eb; } /* Unread notification card styling */ .mobile-card.notification-unread { background: linear-gradient(135deg, #f0f8ff 0%, #e0f2fe 100%); border-left-color: #00b8d9; box-shadow: 0 4px 6px rgba(0, 184, 217, 0.1), 0 1px 3px rgba(0, 184, 217, 0.2); } .mobile-card.notification-unread:hover { border-left-color: #0098b8; box-shadow: 0 8px 15px rgba(0, 184, 217, 0.15), 0 3px 6px rgba(0, 184, 217, 0.25); } .mobile-card-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.04); transition: all 0.2s ease; } .mobile-card-row:hover { background: linear-gradient( 90deg, rgba(59, 130, 246, 0.02) 0%, transparent 100% ); border-radius: 6px; margin: 0 -8px; padding: 12px 8px; } .mobile-card-row:last-child { border-bottom: none; } .mobile-card-label { font-weight: 600; color: #1f2937; flex: 0 0 45%; word-wrap: break-word; font-size: 0.9rem; letter-spacing: 0.01em; } .mobile-card-value { flex: 0 0 55%; text-align: right; color: #4b5563; word-wrap: break-word; font-size: 0.9rem; font-weight: 500; } /* Premium Product Card */ .product-mobile-card { background: linear-gradient(135deg, #ffffff 0%, #fefeff 100%); border: 1px solid #e5e7eb; border-left: 4px solid #10b981; border-radius: 12px; padding: 18px; margin-bottom: 16px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; position: relative; overflow: hidden; } /* Subtle accent glow on hover */ .product-mobile-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( 135deg, rgba(16, 185, 129, 0.03) 0%, transparent 50% ); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .product-mobile-card:hover::before { opacity: 1; } .product-mobile-card:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.1); border-left-color: #059669; } /* Better styling for action buttons on mobile */ .mobile-card-row .mobile-card-value .form-check-inline { display: block; margin: 8px 0; transition: transform 0.2s ease; } .mobile-card-row .mobile-card-value .form-check-inline:hover { transform: translateX(3px); } .mobile-card-row .mobile-card-value { text-align: left; } /* Modern Radio Buttons */ .mobile-card-row .form-check-input { cursor: pointer; width: 18px; height: 18px; margin-top: 2px; transition: all 0.2s ease; } .mobile-card-row .form-check-input:checked { background-color: #3b82f6; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); } .mobile-card-row .form-check-label { cursor: pointer; margin-left: 6px; font-weight: 500; transition: color 0.2s ease; user-select: none; } .mobile-card-row .form-check-input:checked + .form-check-label { color: #3b82f6; font-weight: 600; } /* Premium Process Button */ .btn-success { width: 100%; border-radius: 10px; padding: 14px; font-weight: 600; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 4px 6px rgba(34, 197, 94, 0.2), 0 1px 3px rgba(34, 197, 94, 0.1); transition: all 0.2s ease; border: none; background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); } .btn-success:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(34, 197, 94, 0.3), 0 2px 4px rgba(34, 197, 94, 0.2); background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); } .btn-success:active { transform: translateY(0); box-shadow: 0 2px 4px rgba(34, 197, 94, 0.2); } /* Modern Section Headers */ .mobile-cards h5 { font-weight: 700; color: #1f2937; margin-bottom: 24px; font-size: 1.1rem; letter-spacing: 0.02em; position: relative; padding-bottom: 12px; text-align: center; } .mobile-cards h5::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%); border-radius: 2px; box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3); } /* Stagger animation for cards */ .product-mobile-card:nth-child(2) { animation-delay: 0.05s; } .product-mobile-card:nth-child(3) { animation-delay: 0.1s; } .product-mobile-card:nth-child(4) { animation-delay: 0.15s; } .product-mobile-card:nth-child(5) { animation-delay: 0.2s; } .product-mobile-card { animation: fadeInUp 0.4s ease-out backwards; } } /* Hide mobile cards on desktop with smooth transition */ @media (min-width: 1025px) { .mobile-cards { display: none; } .responsive-table { display: block; } } /* Smooth transitions for responsive changes */ .responsive-table, .mobile-cards { transition: opacity 0.3s ease; } /* =================================== PREVENT DARK MODE FROM AFFECTING TABLES =================================== */ /* Note: We don't force color-scheme on :root, body, or html to preserve Bootstrap button colors and other styled elements */ /* Override dark mode for all tables */ .table, .table-responsive, .responsive-table, table, .datatable { color-scheme: light !important; background-color: #ffffff !important; } /* Cards - background only, no color-scheme to avoid affecting buttons */ .card, .card-body { background-color: #ffffff !important; } /* Explicitly preserve button colors - restore Bootstrap defaults */ .btn, button, a.btn, [type="button"], [type="submit"] { color-scheme: auto !important; } /* POS modern button style - normal rounded, soft pastel bg + dark accent */ .btn, .btn-sm { border-radius: 6px !important; border: none !important; font-weight: 500; padding: 0.5rem 1.25rem; transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } .btn-sm { padding: 0.35rem 1rem; font-size: 0.875rem; } /* Secondary / View — skip when theme preview tokens own outline-secondary (site-theme-tokens.css) */ body:not(.site-theme-preview) .btn-outline-secondary { background-color: #f1f3f5 !important; color: #556272 !important; } body:not(.site-theme-preview) .btn-outline-secondary:hover, body:not(.site-theme-preview) .btn-outline-secondary:focus { background-color: #e9ecef !important; color: #333333 !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06); } /* Danger outline — legacy (non–Try Colors); theme preview uses semantic danger + visible border */ body:not(.site-theme-preview) .btn-outline-danger { background-color: #ffebee !important; color: #e53935 !important; border-color: transparent !important; } body:not(.site-theme-preview) .btn-outline-danger:hover, body:not(.site-theme-preview) .btn-outline-danger:focus { background-color: #ffcdd2 !important; color: #b71c1c !important; border-color: transparent !important; box-shadow: 0 2px 8px rgba(183, 28, 28, 0.2); } /* Primary outline / Edit — legacy (non–Try Colors); theme preview uses site-theme-tokens.css */ body:not(.site-theme-preview) .btn-outline-primary { background-color: #ebf5fb !important; color: #2196f3 !important; border-color: transparent !important; } body:not(.site-theme-preview) .btn-outline-primary:hover, body:not(.site-theme-preview) .btn-outline-primary:focus { background-color: #2196f3 !important; color: #ffffff !important; border-color: transparent !important; box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3); } /* Primary: light blue + blue border (same style as confirm dialog – light bg + border) */ .btn-primary { background-color: #e0edfc !important; color: #1a87f8 !important; border: 1px solid #1a87f8 !important; } .btn-primary:hover, .btn-primary:focus { background-color: #1a87f8 !important; color: #ffffff !important; border-color: #1a87f8 !important; } .btn-primary i, .btn-primary .ti, .btn-primary svg { color: inherit !important; stroke: currentColor !important; } /* Disabled primary: .btn-primary above uses !important on color, which overrides Bootstrap's .btn:disabled (no !important) — disabled buttons kept the light blue label on grey. */ .btn-primary:disabled, .btn-primary.disabled, .btn.btn-primary:disabled, .btn.btn-primary.disabled { background-color: #adb5bd !important; border-color: #adb5bd !important; color: #ffffff !important; opacity: 1 !important; } /* Danger: light red + red border (match confirm "No" button) */ .btn-danger { background-color: #f8d7da !important; color: #721c24 !important; border: 1px solid #dc3545 !important; } .btn-danger:hover, .btn-danger:focus { background-color: #dc3545 !important; color: #ffffff !important; border-color: #dc3545 !important; } /* Info: light purple + purple border (same light + border style) */ .btn-outline-info { background-color: #f4eefd !important; color: #7f48ba !important; border: 1px solid #7f48ba !important; } .btn-outline-info:hover, .btn-outline-info:focus { background-color: #7f48ba !important; color: #ffffff !important; border-color: #7f48ba !important; } .btn-info { background-color: #f4eefd !important; color: #7f48ba !important; border: 1px solid #7f48ba !important; } .btn-info:hover, .btn-info:focus { background-color: #7f48ba !important; color: #ffffff !important; border-color: #7f48ba !important; } /* Success / warning: light fills — skip when site-theme-tokens.js + site-theme-tokens.css own semantics */ body:not(.site-theme-preview) .btn-outline-success { background-color: #d4edda !important; color: #155724 !important; border: 1px solid #28a745 !important; } body:not(.site-theme-preview) .btn-outline-success:hover, body:not(.site-theme-preview) .btn-outline-success:focus { background-color: #28a745 !important; color: #ffffff !important; border-color: #28a745 !important; } body:not(.site-theme-preview) .btn-success { background-color: #d4edda !important; color: #155724 !important; border: 1px solid #28a745 !important; } body:not(.site-theme-preview) .btn-success:hover, body:not(.site-theme-preview) .btn-success:focus { background-color: #28a745 !important; color: #ffffff !important; border-color: #28a745 !important; } body:not(.site-theme-preview) .btn-outline-warning { background-color: #fff3e0 !important; color: #e65100 !important; border: 1px solid #f0a73d !important; } body:not(.site-theme-preview) .btn-outline-warning:hover, body:not(.site-theme-preview) .btn-outline-warning:focus { background-color: #f0a73d !important; color: #ffffff !important; border-color: #f0a73d !important; } body:not(.site-theme-preview) .btn-warning { background-color: #fff3e0 !important; color: #e65100 !important; border: 1px solid #f0a73d !important; } body:not(.site-theme-preview) .btn-warning:hover, body:not(.site-theme-preview) .btn-warning:focus { background-color: #f0a73d !important; color: #ffffff !important; border-color: #f0a73d !important; } /* POS category buttons: keep dark text and light hover (no white text on mouseover) */ .cat-list-btn .btn-primary:hover, .cat-list-btn .btn-primary:focus { color: #3f3f3f !important; background-color: #f1f5f9 !important; border-color: #e2e8f0 !important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .cat-list-btn .btn-primary:hover .card-title, .cat-list-btn .btn-primary:focus .card-title { color: #3f3f3f !important; } /* Common layout for all pages: search filter and table action buttons */ .search-filter-section .btn { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; } .data-table-wrapper { --table-height-offset: 280px; } /* Action column: keep all action buttons on one line (project-wide) */ table td.Action, table td.action, table td:has(.action-btn) { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 0.35rem !important; white-space: nowrap; } table td.Action .action-btn, table td.action .action-btn, table td:has(.action-btn) .action-btn { flex-shrink: 0; } table td.Action form, table td.action form, table td:has(.action-btn) form { display: inline-flex !important; flex-shrink: 0; } .Action .d-flex { gap: 0.5rem; flex-wrap: nowrap; } .Action .btn { min-width: 32px; padding: 0.35rem 0.5rem; flex-shrink: 0; } .Action .btn:last-child { min-width: auto; } td.Action, td.action { white-space: nowrap; } .Action form.d-inline { display: inline-flex !important; } /* Force table text colors */ .table, .table th, .table td, .table thead th, .table tbody td, .datatable th, .datatable td { background-color: #ffffff !important; color: #212529 !important; } /* Table headers */ .table thead th, .table thead td, .datatable thead th { background-color: #f8f9fa !important; color: #212529 !important; border-color: #dee2e6 !important; padding: 0.5rem 0.75rem !important; } /* DataTables default (10px 18px) — match site thead rhythm */ table.dataTable > thead > tr > th, table.dataTable > thead > tr > td { padding: 0.5rem 0.75rem !important; box-sizing: border-box; } /* Table rows */ .table tbody tr, .table tbody tr:hover, .table-hover tbody tr:hover { background-color: #ffffff !important; } .table-hover tbody tr:hover td { background-color: #f8f9fa !important; color: #212529 !important; } /* Table striped */ .table-striped tbody tr:nth-of-type(odd) { background-color: #f8f9fa !important; } .table-striped tbody tr:nth-of-type(even) { background-color: #ffffff !important; } /* Table borders */ .table, .table th, .table td { border-color: #dee2e6 !important; } /* Card backgrounds */ .card { background-color: #ffffff !important; color: #212529 !important; } .card-header { background-color: #f8f9fa !important; color: #212529 !important; border-color: #dee2e6 !important; } /* Card header titles: start-aligned (left in LTR, logical start in RTL) — all cards in main shell */ .dash-content .card .card-header, .dash-content .card .card-header h1, .dash-content .card .card-header h2, .dash-content .card .card-header h3, .dash-content .card .card-header h4, .dash-content .card .card-header h5, .dash-content .card .card-header h6, .dash-content .card .card-header .h1, .dash-content .card .card-header .h2, .dash-content .card .card-header .h3, .dash-content .card .card-header .h4, .dash-content .card .card-header .h5, .dash-content .card .card-header .h6, .dash-content .card .card-header .card-title { text-align: start !important; } /* Card body tables: fill card width (no reserved gutter gap beside the table) */ .dash-content .card .card-body .table-responsive { scrollbar-gutter: auto !important; width: 100%; max-width: 100%; box-sizing: border-box; } /* * Theme (assets/css/style*.css): .card:not(.table-card) .table-responsive used negative margins * and calc(100% + 50px) for full-bleed tables — breaks inset layouts (e.g. Tenant Sales Manager). */ .card:not(.table-card) .table-responsive { margin: 0 !important; width: 100% !important; max-width: 100%; box-sizing: border-box; } .dash-content .card .card-body .table-responsive > .table { width: 100% !important; max-width: 100% !important; } .card-body { background-color: #ffffff !important; color: #212529 !important; } /* Form inputs to prevent dark mode */ input, select, textarea, .form-control { color-scheme: light !important; background-color: #ffffff !important; color: #212529 !important; border-color: #ced4da !important; } input::placeholder, textarea::placeholder, .form-control::placeholder { color: #6c757d !important; } /* DataTables specific */ .dataTables_wrapper, .dataTables_filter, .dataTables_length, .dataTables_info, .dataTables_paginate { color-scheme: light !important; background-color: transparent !important; color: #212529 !important; } /* Pagination - same color concept as account_setup left menu (Taxes, Category, Brand, etc.) */ .pagination { border-radius: 8px; overflow: hidden; border: 1px solid #e2e8f0; display: inline-flex; } .pagination .page-link { background-color: #fff !important; color: #1e293b !important; border: none !important; border-right: 1px solid #e2e8f0 !important; border-radius: 0 !important; margin: 0 !important; padding: 8px 14px !important; font-weight: 500; } .pagination .page-item:first-child .page-link { border-radius: 8px 0 0 8px; border-right: 1px solid #e2e8f0 !important; } .pagination .page-item:last-child .page-link { border-radius: 0 8px 8px 0; border-right: none !important; } .pagination .page-link:hover { background-color: #deefff !important; color: #1e40af !important; font-weight: 700 !important; } /* Active page: same as menu active (light blue + dark blue text) */ .pagination .page-item.active .page-link { background-color: #d6ebff !important; color: #1e40af !important; border-right: 1px solid #e2e8f0 !important; } .pagination .page-item.disabled .page-link { background-color: #fff !important; color: #94a3b8 !important; } /* Override any system dark mode detection for tables and forms only */ @media (prefers-color-scheme: dark) { /* Don't force color-scheme on body/html to preserve button colors */ .table, .table th, .table td { background-color: #ffffff !important; color: #212529 !important; color-scheme: light !important; } /* Cards - background only */ .card, .card-body, .card-header { background-color: #ffffff !important; color: #212529 !important; } input, select, textarea, .form-control { background-color: #ffffff !important; color: #212529 !important; color-scheme: light !important; } /* Ensure buttons maintain their colors in dark mode */ .btn, button, a.btn, [type="button"], [type="submit"] { color-scheme: auto !important; } } /* Touch device optimizations */ @media (hover: none) and (pointer: coarse) { .mobile-card:hover, .product-mobile-card:hover { transform: none; } .mobile-card:active, .product-mobile-card:active { transform: scale(0.98); } } /* Mobile Search Box */ @media (max-width: 1024px) { .mobile-search-container { display: block; margin-bottom: 20px; padding: 0 5px; } .mobile-search-box { position: relative; width: 100%; transition: transform 0.2s ease; } .mobile-search-input { width: 100%; padding: 12px 45px 12px 15px; border: 2px solid #e5e7eb; border-radius: 10px; font-size: 0.95rem; transition: all 0.3s ease; background: #ffffff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .mobile-search-input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15); background: #f8faff; } .mobile-search-icon { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: #6b7280; font-size: 18px; pointer-events: none; transition: color 0.2s ease; } .mobile-search-input:focus + .mobile-search-icon { color: #3b82f6; } .mobile-search-clear { position: absolute; right: 45px; top: 50%; transform: translateY(-50%); color: #9ca3af; font-size: 16px; cursor: pointer; display: none; padding: 5px; transition: color 0.2s ease; } .mobile-search-clear:hover { color: #ef4444; } .mobile-search-clear.active { display: block; } .no-results-message { text-align: center; padding: 40px 20px; color: #6b7280; display: none; } .no-results-message i { font-size: 48px; color: #d1d5db; margin-bottom: 15px; display: block; } .no-results-message.active { display: block; } /* Loading Indicator for Infinite Scroll */ .mobile-loading-indicator { text-align: center; padding: 20px; display: none; } .mobile-loading-indicator.active { display: block; } .mobile-loading-spinner { width: 40px; height: 40px; margin: 0 auto 10px; border: 4px solid #f3f4f6; border-top: 4px solid #3b82f6; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .mobile-loading-text { color: #6b7280; font-size: 0.9rem; font-weight: 500; } /* Hidden cards for lazy loading */ .mobile-card.lazy-hidden { display: none; } /* End of data message */ .mobile-end-message { text-align: center; padding: 20px; color: #9ca3af; font-size: 0.85rem; display: none; } .mobile-end-message.active { display: block; } .mobile-end-message i { font-size: 24px; margin-bottom: 8px; display: block; color: #d1d5db; } /* Notification message truncation */ .notification-message-content { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .notification-message-content.expanded { -webkit-line-clamp: unset; max-height: none; } /* Simple Notification Action Buttons - All same size */ .mobile-action-btn { height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; font-size: 0.85rem; font-weight: 600; border-radius: 6px; border: none; text-decoration: none; white-space: nowrap; position: relative; z-index: 10; pointer-events: auto; cursor: pointer; } .mobile-action-btn i { font-size: 0.95rem; margin-right: 4px; pointer-events: none; } /* Colors */ .mobile-action-btn.btn-success { background-color: #38c172; color: #ffffff; } .mobile-action-btn.btn-danger { background-color: #e3342f; color: #ffffff; } /* Ensure buttons in mobile cards are always clickable */ .mobile-card .mobile-action-btn, .mobile-card a.mobile-action-btn, .mobile-card button.mobile-action-btn { pointer-events: auto !important; z-index: 10 !important; position: relative !important; } /* Ensure button container allows clicks */ .mobile-card .mobile-card-row { pointer-events: auto; } /* Ensure form inside mobile card allows clicks */ .mobile-card form { pointer-events: auto; } .mobile-action-btn.btn-primary { background-color: #3490dc; color: #ffffff; } .mobile-action-btn:hover { opacity: 0.9; } /* Delete button inside form - make it fill the form */ .mobile-card form button.mobile-action-btn { width: 100%; } /* Status badges */ .mobile-card .badge.bg-danger { background-color: #e3342f; } .mobile-card .badge.bg-success { background-color: #38c172; } .mobile-card .badge.bg-primary { background-color: #3490dc; } } @media (min-width: 1025px) { .mobile-search-container { display: none; } } /* iPad Landscape Specific - Show table if there's enough space */ @media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) { .responsive-table { display: block !important; } .mobile-cards { display: none !important; } /* Optimize table for landscape tablets */ .responsive-table .table { font-size: 0.9rem; } .responsive-table .table th, .responsive-table .table td { padding: 12px 10px; white-space: normal; word-wrap: break-word; } } /* Gauge charts styling for user report */ #daily-target-gauge, #monthly-target-gauge, #monthly-forecast-gauge { position: relative; } .gauge-wrapper { position: relative; } .gauge-center-overlay { position: absolute; inset: 1% 5%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; padding: 0.3rem 0.4rem; color: #1f2937; gap: 0.1rem; background: transparent; border-radius: 16px; box-shadow: none; backdrop-filter: none; transform: translateY(-10%); } .gauge-center-overlay .gauge-overlay-label { font-size: 0.55rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #6c757d; line-height: 1.2; } .gauge-center-overlay .gauge-overlay-value { font-size: 0.7rem; font-weight: 600; color: #111; line-height: 1.2; } .gauge-center-overlay .gauge-overlay-percent { font-size: 1.3rem; font-weight: 700; line-height: 1; margin: 0.15rem 0; color: #1f8a4d; } .gauge-center-overlay.is-trend .gauge-overlay-percent { color: #ff8c00; } .gauge-center-overlay.is-blue .gauge-overlay-percent { color: #3b82f6; } .gauge-card { background: #ffffff; border-radius: 12px; padding: 12px 10px; box-shadow: 0 6px 14px rgba(32, 84, 51, 0.08); transition: transform 0.2s ease, box-shadow 0.2s ease; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; } .gauge-card:hover { transform: translateY(-3px); box-shadow: 0 10px 18px rgba(32, 84, 51, 0.12); } .gauge-card-icon { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient( 135deg, rgba(3, 102, 75, 0.15), rgba(3, 102, 75, 0.05) ); color: #03664b; font-size: 18px; margin-bottom: 4px; } .gauge-card-title { font-size: 0.85rem; font-weight: 600; color: #1f2a2d; text-transform: capitalize; margin-bottom: 4px; text-align: center; } /* Responsive styles for gauge cards */ /* iPad and tablet */ @media (max-width: 1024px) and (min-width: 769px) { .gauge-card { padding: 14px 12px; } .gauge-wrapper { max-width: 180px !important; height: 180px !important; } .gauge-card-icon { width: 36px; height: 36px; font-size: 16px; } .gauge-card-title { font-size: 0.8rem; } } /* Mobile and small tablets */ @media (max-width: 768px) { .gauge-card { padding: 14px 12px; margin-bottom: 16px; } .gauge-card:last-child { margin-bottom: 0; } .gauge-wrapper { max-width: 180px !important; height: 180px !important; } .gauge-card-icon { width: 36px; height: 36px; font-size: 16px; } .gauge-card-title { font-size: 0.8rem; } } @media (max-width: 576px) { .gauge-card { padding: 12px 10px; } .gauge-wrapper { max-width: 160px !important; height: 160px !important; } .gauge-card-icon { width: 32px; height: 32px; font-size: 14px; } .gauge-card-title { font-size: 0.75rem; } } /* Welcome Card Design */ .welcome-card { background: linear-gradient(135deg, #dff1e1 0%, #eaf7f2 100%); border-radius: 14px; border: none; box-shadow: 0 6px 14px rgba(32, 84, 51, 0.08); } .welcome-card .card-body { padding: 20px 24px; } .welcome-content { display: flex; align-items: center; gap: 16px; } .welcome-icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: linear-gradient( 135deg, rgba(3, 102, 75, 0.2), rgba(3, 102, 75, 0.1) ); color: #03664b; font-size: 28px; flex-shrink: 0; } .welcome-text { flex: 1; } .welcome-title { font-size: 1.4rem; font-weight: 700; color: #1f2a2d; margin-bottom: 4px; } .welcome-name { color: #03664b; } .welcome-subtitle { font-size: 0.9rem; color: #6c757d; margin-top: 4px; } @media (max-width: 768px) { .welcome-content { flex-direction: column; text-align: center; gap: 12px; } .welcome-icon { width: 48px; height: 48px; font-size: 24px; } .welcome-title { font-size: 1.2rem; } .welcome-subtitle { font-size: 0.85rem; } } @media (max-width: 576px) { .welcome-card .card-body { padding: 16px 20px; } .welcome-icon { width: 44px; height: 44px; font-size: 22px; } .welcome-title { font-size: 1.1rem; } } /* Sidebar column shell (no desktop collapse control) */ .dash-sidebar .navbar-wrapper { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; height: 100%; } body.admin-shell-stacked .dash-sidebar { display: flex !important; flex-direction: column !important; } /* Document Drive & Employee Documents – folder cards and icon picker */ .document-folder-card-wrap { height: 100%; } .document-folder-card { border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.25rem 1rem; text-align: center; transition: border-color 0.2s ease, box-shadow 0.2s ease; cursor: default; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); height: 100%; position: relative; } .document-folder-card:hover { border-color: #f97316 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .document-folder-card .document-folder-card-link { cursor: pointer; display: block; } /* Lock icon – top-left corner, only on locked cards */ .document-folder-lock { position: absolute; top: 0.5rem; left: 0.5rem; color: #64748b; font-size: 1rem; line-height: 1; z-index: 1; } .document-folder-lock i { font-size: 1.1rem; } /* Hidden-from-employee badge – same position and color as lock (top-left) */ .document-folder-hidden-badge { position: absolute; top: 0.5rem; left: 0.5rem; color: #64748b; font-size: 1rem; line-height: 1; z-index: 1; } .document-folder-hidden-badge i { font-size: 1.1rem; } /* Options – top-right, visible on card hover */ .document-folder-card-options { position: absolute; top: 0.35rem; right: 0.35rem; z-index: 2; opacity: 0; transition: opacity 0.2s ease; } .document-folder-card-wrap:hover .document-folder-card-options { opacity: 1; } .document-folder-options-btn { padding: 0.2rem 0.4rem; background: rgba(255, 255, 255, 0.95); border: 1px solid #e2e8f0; border-radius: 6px; color: #64748b; } .document-folder-options-btn:hover { background: #fff; color: #334155; border-color: #cbd5e1; } .document-folder-card.locked { cursor: not-allowed; } .document-folder-card.locked .document-folder-icon { color: #4a90e2; opacity: 0.9; } .document-folder-icon { font-size: 2.5rem; color: #4a90e2; opacity: 0.95; margin-bottom: 0.5rem; } .document-folder-card:hover .document-folder-icon { color: #3a7bc8; opacity: 1; } .document-folder-card.locked:hover .document-folder-icon { color: #4a90e2; } .document-folder-name { font-size: 0.95rem; font-weight: 600; color: #4a90e2; margin-bottom: 0.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .document-folder-count { font-size: 0.8rem; color: #4a90e2; margin-bottom: 0; opacity: 0.85; } .action-btn-primary { background: #2563eb; color: white; border: none; padding: 0.5rem 1.25rem; border-radius: 8px; font-weight: 500; } .action-btn-primary:hover { color: white; background: #1d4ed8; } /* Modal body scroll when it contains folder icon picker so "Upload custom icon image" is visible */ .modal:has(.folder-icon-picker) .modal-body { max-height: min(70vh, 560px); overflow-y: auto; } .folder-icon-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; max-height: 420px; overflow-y: auto; padding: 8px; border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc; } .folder-icon-picker-item { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 6px; border: 2px solid transparent; border-radius: 8px; background: #fff; cursor: pointer; transition: all 0.2s ease; font-size: 0.75rem; color: #475569; } .folder-icon-picker-item i { font-size: 1.75rem; margin-bottom: 4px; color: #64748b; } .folder-icon-picker-item:hover { border-color: #93c5fd; background: #eff6ff; color: #1e40af; } .folder-icon-picker-item:hover i { color: #2563eb; } .folder-icon-picker-item.selected { border-color: #2563eb; background: #dbeafe; color: #1d4ed8; } .folder-icon-picker-item.selected i { color: #2563eb; } .folder-icon-picker-label { text-align: center; line-height: 1.2; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Share Folder modal – tagged/chip style */ .share-modal-tagged .share-with-all-wrap { margin-bottom: 1.25rem; padding: 0.75rem 1rem; background: #f8fafc; border-radius: 10px; border: 1px solid #e2e8f0; } .share-modal-tagged .share-section { margin-bottom: 1.25rem; } .share-modal-tagged .share-section-label { font-weight: 600; color: #334155; margin-bottom: 0.5rem; font-size: 0.9rem; } .share-modal-tagged .share-tags-container { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; min-height: 42px; padding: 0.5rem 0.75rem; background: #fff; border: 1px solid #cbd5e1; border-radius: 10px; transition: border-color 0.2s, box-shadow 0.2s; } .share-modal-tagged .share-tags-container:focus-within { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); } .share-modal-tagged .share-tags-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; } /* Share folder modal – tag pills use #dbeeff (light blue) */ .share-modal-tagged .share-tag-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.5rem 0.35rem 0.65rem; background: #dbeeff !important; color: #1e3a5f !important; border-radius: 9999px; font-size: 0.8125rem; font-weight: 500; line-height: 1.2; border: none; } .share-modal-tagged .share-tag-pill .share-tag-remove { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; background: rgba(30, 58, 95, 0.2) !important; color: #1e3a5f !important; border: none; border-radius: 50%; cursor: pointer; font-size: 1rem; line-height: 1; transition: background 0.2s; } .share-modal-tagged .share-tag-pill .share-tag-remove:hover { background: rgba(30, 58, 95, 0.35) !important; } .share-modal-tagged .share-tags-add-wrap { flex: 1; min-width: 140px; position: relative; } .share-modal-tagged .share-tags-search { width: 100%; border: none; outline: none; font-size: 0.9rem; padding: 0.25rem 0; background: transparent; } .share-modal-tagged .share-tags-search::placeholder { color: #94a3b8; } .share-modal-tagged .share-tags-dropdown { display: none; position: absolute; left: 0; right: 0; min-width: 180px; top: 100%; margin-top: 2px; max-height: 220px; overflow-y: auto; background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); z-index: 1050; } .share-modal-tagged .share-tags-dropdown.show { display: block; } .share-modal-tagged .share-tags-dropdown-item { padding: 0.5rem 0.75rem; font-size: 0.9rem; cursor: pointer; transition: background 0.15s; } .share-modal-tagged .share-tags-dropdown-item:hover { background: #f1f5f9; } .share-modal-tagged .share-tags-add-select { flex: 1; min-width: 140px; border: none; outline: none; font-size: 0.9rem; padding: 0.25rem 0; } .share-modal-tagged .share-tags-select-multiple { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .share-modal-tagged .share-modal-footer { border-top: 1px solid #e2e8f0; padding-top: 1rem; margin-top: 0.5rem; } /* POS: notes & coins denomination pad (payment modals, product details, gift cards — global) */ .pos-cash-denom-pad { margin-top: 0.25rem; /* Neutral mint-gray: fits POS / Try Colors better than cornsilk “toy cash” yellow */ --pos-cash-pad-btn-bg: #f0f4f2; --pos-cash-pad-btn-bg-hover: #e2eae4; --pos-cash-pad-btn-border: #b8c9be; --pos-cash-pad-btn-fg: #1e293b; --pos-cash-pad-separator: #d8e3dc; } /* Clear separation between Notes and Coins (desktop: inset rule + padding; mobile: stacked rule) */ @media (min-width: 768px) { .pos-cash-denom-pad .pos-cash-denom-col--notes { padding-right: 0.75rem; } .pos-cash-denom-pad .pos-cash-denom-col--coins { padding-left: 1.5rem; border-left: 1px solid var(--pos-cash-pad-separator); } } @media (max-width: 767.98px) { .pos-cash-denom-pad .pos-cash-denom-col--coins { margin-top: 0.25rem; padding-top: 1rem; border-top: 1px solid var(--pos-cash-pad-separator); } } .pos-cash-denom-heading { font-size: 0.875rem; margin-bottom: 0.5rem; color: var(--bs-body-color, #1f2937); } .pos-cash-denom-grid { display: grid; gap: 8px; } .pos-cash-denom-grid--notes { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pos-cash-denom-grid--coins { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pos-cash-denom-pad--compact .pos-cash-denom-grid { gap: 6px; } .pos-cash-denom-pad .content.coins, .pos-cash-denom-pad .content.notes { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 6px 4px; background: var(--pos-cash-pad-btn-bg); border: 1px solid var(--pos-cash-pad-btn-border); border-radius: 6px; color: var(--pos-cash-pad-btn-fg); text-align: center; font-weight: 600; font-size: 0.95rem; cursor: pointer; user-select: none; transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease; } .pos-cash-denom-pad .content.coins:hover, .pos-cash-denom-pad .content.notes:hover { background: var(--pos-cash-pad-btn-bg-hover); border-color: color-mix(in srgb, var(--pos-cash-pad-btn-border) 75%, #334155); } .pos-cash-denom-pad--compact .content.coins, .pos-cash-denom-pad--compact .content.notes { min-height: 44px; font-size: 0.875rem; } .pos-cash-denom-pad .content.coins:active, .pos-cash-denom-pad .content.notes:active { transform: scale(0.98); } .pos-cash-denom-spacer { visibility: hidden; min-height: 52px; pointer-events: none; } .pos-cash-denom-pad--compact .pos-cash-denom-spacer { min-height: 44px; } @supports not (background: color-mix(in srgb, red 50%, blue)) { .pos-cash-denom-pad .content.coins:hover, .pos-cash-denom-pad .content.notes:hover { border-color: #94a3a8; } } /* Daterangepicker is appended to body. Modals in this theme use z-index up to 9999; the plugin default often sits under the dialog. */ body.modal-open .daterangepicker { z-index: 10050 !important; } /* Document preview: wide by default; optional full screen; header stays above embedded PDF. */ .document-preview-modal .document-preview-modal-dialog:not(.modal-fullscreen) { max-width: min(1760px, calc(100vw - var(--dash-sidebar-width, 216px) - 2rem)); } @media (max-width: 991.98px) { .document-preview-modal .document-preview-modal-dialog:not(.modal-fullscreen) { max-width: calc(100vw - 1rem); margin-left: 0.5rem; margin-right: 0.5rem; } } .document-preview-modal .document-preview-modal-dialog:not(.modal-fullscreen) .document-preview-modal-body { min-height: min(85vh, 920px); } .document-preview-modal .document-preview-modal-dialog.modal-fullscreen .document-preview-modal-content { height: 100%; } .document-preview-modal .document-preview-modal-header { position: relative; z-index: 20; background-color: var(--bs-modal-bg, var(--bs-body-bg, #fff)); } .document-preview-modal .document-preview-modal-body { flex: 1 1 auto; min-height: 0; } /* All Documents: preview-on-filename — reads like row text, accent on hover (Try Colors when preview body present). */ .document-upload-page .document-upload-filename-preview { color: var(--bs-body-color); text-decoration: none; font-weight: 500; font-size: inherit; line-height: inherit; border-radius: 6px; transition: color 0.15s ease, text-decoration-color 0.15s ease, background-color 0.15s ease; } .document-upload-page .document-upload-filename-preview:hover { color: var(--bs-primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; } .document-upload-page .document-upload-filename-preview:focus-visible { outline: 0; color: var(--bs-primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25); } body.site-theme-preview .document-upload-page .document-upload-filename-preview:hover, body.site-theme-preview .document-upload-page .document-upload-filename-preview:focus-visible { color: var(--preview-accent, var(--bs-primary)); box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--preview-accent, var(--bs-primary)) 30%, transparent); }