/*====================================
General Styles
====================================*/

:root {
    /* Main Color Palette - Purple Theme */
    --primary: #604feb;                    /* Main brand color */
    --primary-hover: #4c3dd4;             /* Darker for hover states */
    --primary-light: #919bf6;             /* Lighter variant */
    --primary-lighter: #b8c2ff;           /* Even lighter for backgrounds */
    --primary-dark: #3a2f2b;              /* Dark accent */
    
    /* Legacy variable mappings for backward compatibility */
    --orange: var(--primary);
    --orange-dark: var(--primary-dark);
    --orange-hover: var(--primary-hover);

    /* Chart Color Palettes */
    --chart-primary: #604feb;
    --chart-primary-hover: #4c3dd4;
    --chart-primary-light: #919bf6;
    --chart-primary-lighter: #b8c2ff;
    --chart-secondary: #667fed;
    --chart-accent: #3a2f2b;
    --chart-vibrant: #8b5cf6;
    --chart-soft: #a78bfa;
    --chart-pale: #c4b5fd;
    --chart-very-light: #e0e7ff;

    /* Chart Palette Arrays (comma-separated for easy parsing) */
    --chart-palette-primary: #604feb, #4c3dd4, #919bf6, #b8c2ff, #667fed;
    --chart-palette-extended: #604feb, #4c3dd4, #919bf6, #b8c2ff, #667fed, #3a2f2b, #8b5cf6, #a78bfa, #c4b5fd, #e0e7ff;
    --chart-palette-minimal: #604feb, #4c3dd4, #919bf6;
}

/* Vendor prefixes for cross-browser compatibility */
@supports (-webkit-appearance: none) {
    /* Webkit browsers (Chrome, Safari, Edge) */
}

@supports (-moz-appearance: none) {
    /* Firefox */
}

@supports (appearance: none) {
    /* Modern browsers */
}

@font-face {
    font-family: "IBX";
    src: url("../fonts/IBM_Plex_Sans_Arabic/IBMPlexSansArabic-Regular.ttf");
}

body {
    font-family: 'IBX', sans-serif;
}

a {
    transition: color .3s ease-in-out,
    background-color .3s ease-in-out;
}

body .wrapper {
    min-height: 1000px;
}

html.dark-theme .card a:hover,
html.dark-theme .card a:focus,
.quantity a,
.features-header a {
    text-decoration: underline;
}

.form-control,
.form-select,
html.dark-theme .accordion-button:not(.collapsed),
html.dark-theme .accordion-button {
    -webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, .3) !important;
    -moz-box-shadow: 0 0 2px 0 rgba(0, 0, 0, .3) !important;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, .3) !important;
}

.form-control:focus,
.form-select:focus {
    -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .3) !important;
    -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .3) !important;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, .3) !important;
}

/* Color Orange Group */

html.dark-theme .sidebar-wrapper .sidebar-header .logo-text,
.page-breadcrumb .breadcrumb li.breadcrumb-item ion-icon,
.export-icon a,
html.dark-theme .btn-close,
.text-reset,
.paginate-links nav a,
html.dark-theme .nav-tabs .nav-link,
html.dark-theme .nav-tabs .nav-item.show .nav-link,
html.dark-theme .nav-tabs .nav-link.active,
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover,
.export-icon .dropdown-menu ion-icon,
.export-icon .dropdown-menu ion-icon,
.imageuploadify,
.imageuploadify .imageuploadify-images-list span.imageuploadify-message,
.imageuploadify .imageuploadify-images-list button.btn-default,
.ff_fileupload_wrap .ff_fileupload_dropzone,
.btn-outline-secondary,
.date-icon ion-icon,
.delete-category ion-icon {
    color: var(--orange) !important;
}

.export-icon a:hover,
.export-icon a:focus,
html.dark-theme .btn-close:hover,
html.dark-theme .btn-close:focus,
.text-reset:hover,
.text-reset:focus {
    color: var(--orange-dark) !important;
}

.btn-primary,
.btn-primary:active,
.form-check-input:checked,
.page-item.active .page-link,
.page-item .page-link:hover,
.pace .pace-progress,
.back-to-top,
/*html.dark-theme .border-bottom,*/
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.dataTable thead tr,
.form-range::-webkit-slider-thumb,
.added-features thead tr,
.suppliers thead tr,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected=true],
.edit-btn:not(:hover),
.accordion-header,
html.dark-theme .card-header,
html.dark-theme .accordion-button:not(.collapsed),
html.dark-theme .accordion-button,
.features-units-wrapper thead tr,
.reports-charts-2-2 thead tr {
    background-color: var(--orange);
    color: #FFF !important;
   
}

.btn-primary,
.btn-primary:active,
.form-check-input:checked,
.page-item.active .page-link,
.imageuploadify .imageuploadify-images-list span.imageuploadify-message,
.imageuploadify .imageuploadify-images-list button.btn-default,
.ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_actions button,
.ff_fileupload_wrap .ff_fileupload_dropzone,
.btn-outline-secondary,
.btn-outline-primary {
    border-color: var(--orange) !important;
}
.btn-primary {
    border-radius: 13px;
    padding: 10px;
}
.form-check-input:focus,
.form-check-input:checked,
.btn-check:focus + .btn-primary,
.btn-primary:focus,
.btn-primary:active:focus,
.btn-secondary:focus,
.btn-secondary:active:focus {
    -webkit-box-shadow: 0 0 0 0.25rem var(--primary-dark);
    -moz-box-shadow: 0 0 0 0.25rem var(--primary-dark);
    box-shadow: 0 0 0 0.25rem var(--primary-dark);
}

.form-range:focus::-webkit-slider-thumb {
    -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem var(--primary-dark);
    box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem var(--primary-dark);
}

.form-range:focus::-moz-range-thumb {
    -moz-box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem var(--primary-dark);
    box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem var(--primary-dark);
}

/* Background-Color Dark Orange Group */

.btn-primary:hover,
.btn-primary:focus,
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus,
.back-to-top:hover,
.back-to-top:focus,
html.dark-theme .modal-header,
.form-range::-webkit-slider-thumb:active,
.edit-btn:hover,
.edit-btn:focus,
.edit-btn:active,
html.dark-theme .sidebar-wrapper .metismenu .mm-active > a,
html.dark-theme .sidebar-wrapper .metismenu a:active,
html.dark-theme .sidebar-wrapper .metismenu a:focus,
html.dark-theme .sidebar-wrapper .metismenu a:hover {
    background-color: var(--orange) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.form-control:focus,
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus,
.ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_actions button:hover {
    border-color: var(--orange-dark) !important;
}

/* Color White Group */

html.dark-theme .sidebar-wrapper .metismenu > a,
.sidebar-wrapper .metismenu a .parent-icon ion-icon,
[dir=rtl] .metismenu .has-arrow:after,
html.dark-theme .sidebar-wrapper .sidebar-header .toggle-icon,
.btn-primary ion-icon,
.page-item.active .page-link,
.page-item .page-link:hover,
.modal-content,
.btn-warning,

.dataTable thead tr,
table.dataTable > thead .sorting_asc:before,
table.dataTable > thead .sorting_desc:after,
.added-features thead tr,
.suppliers thead tr,
.select2-container--default,
.select2-container--default .select2-results__option[aria-selected=true],
html.dark-theme .card .pagination .page-item.active a,
.edit-btn,
.features-units-wrapper thead tr,
.reports-charts-2-2 thead tr {
    color: #000 !important;
}
html.dark-theme .accordion-header html.dark-theme.card-header {
    color: #FFF !important;
}
.offcanvas-title {
    color: #fff !important;
}
.modal-title {
    color: #fff !important;
}
.sidebar-wrapper .metismenu .mm-active > a {
    color: #fff !important;
    border-radius: 13px;
}
.sidebar-wrapper .metismenu li:hover a {
    color:#000;
}

/*html.dark-theme .top-header,*/
/*html.dark-theme .form-control,*/
/*html.dark-theme .form-select:not(:disabled),*/
/*html.dark-theme .card,*/
/*html.dark-theme .footer,*/
/*html.dark-theme .page-link,*/
/*html.dark-theme .modal-content,*/
/*html.dark-theme .dropdown-menu,*/
/*.dropdown-item:focus,*/
/*.dropdown-item:hover,*/
/*html.dark-theme .top-header .navbar .dropdown-large .dropdown-menu::after,*/
/*html.dark-theme .top-header .navbar .dropdown-user-setting .dropdown-menu::after,*/
/*html.dark-theme .nav-tabs .nav-item.show .nav-link,*/
/*html.dark-theme .nav-tabs .nav-link.active,*/
/*.nav-tabs .nav-link:focus,*/
/*.nav-tabs .nav-link:hover,*/
/*html.dark-theme .offcanvas,*/
/*html.dark-theme .picker__input,*/
/*html.dark-theme .picker__holder,*/
/*html.dark-theme .picker__button--today,*/
/*html.dark-theme .picker__button--clear,*/
/*html.dark-theme .picker__button--close,*/
/*html.dark-theme .select2-container--bootstrap4 .select2-selection,*/
/*.accordion-body {*/
/*    background-color: #fff !important;*/
/*}*/

html.dark-theme .top-header .navbar .dropdown-large .dropdown-menu::after,
html.dark-theme .top-header .navbar .dropdown-user-setting .dropdown-menu::after {
    border-color: #fff;
}

html.dark-theme body,
html.dark-theme .top-header .navbar .dropdown-large .dropdown-item:hover,
html.dark-theme .top-header .navbar .dropdown-user-setting .dropdown-item:hover,
html.dark-theme .card-footer,
.export-icon .dropdown-menu a:hover,
.export-icon .dropdown-menu a:focus,
.input-group.barcode-input-group,
html.dark-theme .select2-dropdown,
html.dark-theme .ff_fileupload_wrap .ff_fileupload_dropzone,
html.dark-theme .imageuploadify,
table tr.odd,
html.dark-theme .accordion-item {
    background-color: #f7f8fa !important;
}

/*html.dark-theme .ff_fileupload_wrap .ff_fileupload_dropzone,*/
/*html.dark-theme .imageuploadify {*/
/*    border-color: #f7f8fa !important;*/
/*}*/

/* Color Black Group */

html.dark-theme .top-header .navbar .top-navbar-right .nav-link,
.page-breadcrumb .breadcrumb li a,
.page-breadcrumb .breadcrumb-item + .breadcrumb-item::before,
html.dark-theme .form-control,
html.dark-theme .form-select,
html.dark-theme .form-control::placeholder,
html.dark-theme .dropdown-item,
/*html.dark-theme .card,*/
html.dark-theme .table,
.table-striped > tbody > tr:nth-of-type(odd),
html.dark-theme .footer,
html.dark-theme .modal-content,
html.dark-theme .dropdown-large .msg-header .msg-header-title,
.offcanvas .form-label,
.offcanvas div,
html.dark-theme .table, .form-select,
html.dark-theme .select2-search--dropdown .select2-search__field {
    color: #252525 !important;
}
.offcanvas-header {
    background-color: var(--orange) !important;
}
/* Color 50% Black Group */

html.dark-theme .breadcrumb-item.active {
    color: rgba(0, 0, 0, .5);
}

/* Border Color Black Group */

html.dark-theme .table,
.form-select,
html.dark-theme .select2-search--dropdown .select2-search__field {
    border-color: #dbdcdf;
}

html.dark-theme .sidebar-wrapper,
html.dark-theme .sidebar-wrapper .sidebar-header {
    background-color: #FFF;
}

/* Font size grouping */

.btn,
.form-control,
.form-control::placeholder,
.form-select,
.page-breadcrumb .breadcrumb li:not(.active) a,
.page-breadcrumb .breadcrumb li.breadcrumb-item.active,
.card-body > * {
    font-size: 14px !important;
}

.price p,
.quantity p,
.min-quantity p,
.added-features th,
.added-features table p {
    font-size: 12px;
}

/* Breadcrumb */

.page-breadcrumb .breadcrumb li.breadcrumb-item ion-icon {
    font-size: 20px;
    margin-left: 5px;
}

.page-breadcrumb .breadcrumb li:not(.active) a {
    font-size: 14px;
    font-weight: bold;
}

.page-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    font-size: 10px;
    margin-top: 3px;
}

/* Icons Styles*/

ion-icon {
    pointer-events: none;
}

/* Modal Styles */

.modal-header .btn-close {
    margin-right: 0;
}

/* Pagination Styles */

.pagination {
    justify-content: center;
}

.pace .pace-progress-inner {
    -webkit-box-shadow: 0 0 10px var(--primary), 0 0 5px var(--primary) !important;
    -moz-box-shadow: 0 0 10px var(--primary), 0 0 5px var(--primary) !important;
    box-shadow: 0 0 10px var(--primary), 0 0 5px var(--primary) !important;
}

.pace .pace-activity {
    border-top-color: var(--primary) !important;
    border-left-color: var(--primary) !important;
}

/*====================================
Top Header
====================================*/

.top-header {
    padding: 0 0.5rem;
    /*z-index: 2001 !important;*/
}

.top-header .navbar .user-img,
.user-profile-inner img {
    height: auto;
}

/*====================================
Sidebar
====================================*/

.wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header .toggle-icon {
    display: block;
    margin-right: 0 !important;
}

/*====================================
Breadcrumb
====================================*/

.page-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    display: inline-block;
    padding-left: 0.5rem;
    font-family: LineIcons;
    content: "\ea5a";
}

/*====================================
Searchbar
====================================*/



.languages-tabs-wrapper {
    padding: 15px 15px 0;
}

.searchbar {
    position: relative;
}

.searchbar .search-icon {
    color: #41464b;
    font-size: 1.2rem;
    opacity: 0.5;
    font-size: 20px;
}

.searchbar .form-control {
    padding-right: 2.5rem;
    padding-left: 2.5rem;
    border: 1px solid #e9ecef;
    background-color: #fff;
}

.searchbar .search-close-icon {
    left: 2rem;
    opacity: 0.5;
    cursor: pointer;
    display: none;
    font-size: 20px;
}

/*.filter-icon {*/
/*    flex: 0 0 auto;*/
/*    width: 5%;*/
/*    position: absolute;*/
/*    left: 6px;*/
/*    top: 0px;*/
/*}*/

#filter-form {
    position: relative;
    height: 100%;
}

#filter-form .offcanvas-body {
    height: 100%;
}

#filter-form .offcanvas-footer {
    position: absolute;
    bottom: 0;
    left: 0;
}

.picker__button--today:before,
.picker__button--clear:before,
.picker__button--close:before {
    margin-left: .5em;
}

.single-select {
    width: 100%;
}

html.dark-theme .btn-close {
    filter: unset;
}

.offcanvas-end {
    width: 350px !important;
}

html.dark-theme .select2-container--bootstrap4 .select2-selection {
    color: #444 !important;
    line-height: 28px;
    border: 1px solid #aaa !important;
}

html.dark-theme .select2-container--bootstrap4 .select2-selection b {
    border-color: #888 transparent transparent transparent !important;
}

.ff_fileupload_wrap .ff_fileupload_dropzone {
    background-image: none !important;
    height: 200px !important;
}

.ff_fileupload_wrap .ff_fileupload_uploads {
    direction: ltr;
}

html.dark-theme .ff_fileupload_wrap .ff_fileupload_dropzone,
html.dark-theme .imageuploadify {
    padding: 10px;
}

.ff_fileupload_wrap .ff_fileupload_dropzone > a {
    margin-left: 10px;
}

.ff_fileupload_wrap table.ff_fileupload_uploads td.ff_fileupload_actions button {
    margin-right: 5px;
}

/*.categories-table .row:first-child {*/
/*    margin-bottom: 20px !important;*/
/*    margin-top: 10px !important;*/
/*    align-items: center;*/
/*}*/

/*.categories-table .row:first-child > div:first-child {*/
/*    padding-right: 0;*/
/*}*/

/*div.dataTables_wrapper {*/
/*    flex-basis: 100%;*/
/*}*/

/*.table-custom-controls {*/
/*    display: flex;*/
/*    justify-content: space-around;*/
/*    align-items: center;*/
/*}*/

.rows-count {
    display: flex;
    align-items: center;
}

.rows-count .form-label {
    margin-bottom: 0;

}

.table-search {
    position: relative;
}

.table-search i{
    position: absolute;
    top: calc(50% - 20%);
    font-size: 18px;
    color: rgba(0, 0, 0, .2);
}

div.dataTables_wrapper div.dataTables_filter input {
    margin-left: 0;
}

div.dataTables_wrapper div.dataTables_filter {
    text-align: left !important;
}

div.dataTables_wrapper div.dataTables_length label,
#categories_filter label,
#products_filter label,
table#categories.dataTable > thead th:nth-child(4):after,
table#categories.dataTable > thead th:nth-child(4):before,
table#categories.dataTable > thead th:nth-child(7):after,
table#categories.dataTable > thead th:nth-child(7):before,
table.dataTable > thead th:nth-child(8):after,
table.dataTable > thead th:nth-child(8):before,
table.dataTable > thead th:last-child:after,
table.dataTable > thead th:last-child:before,
table#products.dataTable > thead th:nth-child(9):after,
table#products.dataTable > thead th:nth-child(9):before {
    display: none;
}

table.table-bordered.dataTable td:last-child,
table.table-bordered.dataTable td:last-child {
    border-right-width: 0 !important;
}

div.dataTables_wrapper div.dataTables_length span {
    margin-left: 5px;
}

#categories_filter,
#products_filter {
    position: relative;
}

#categories_filter ion-icon,
#products_filter ion-icon {
    position: absolute;
    color: #a0a3a5;
    font-size: 1.2rem;
    top: 5px;
    right: 10px;
}

#categories_filter input,
#products_filter input {
    padding-right: 35px;
    width: 100%;
}

table.dataTable > thead .sorting:before,
table.dataTable > thead .sorting:after,
table.dataTable > thead .sorting_asc:before,
table.dataTable > thead .sorting_asc:after,
table.dataTable > thead .sorting_desc:before,
table.dataTable > thead .sorting_desc:after,
table.dataTable > thead .sorting_asc_disabled:before,
table.dataTable > thead .sorting_asc_disabled:after,
table.dataTable > thead .sorting_desc_disabled:before,
table.dataTable > thead .sorting_desc_disabled:after {
    opacity: .7 !important;
}

table.dataTable > thead .sorting:before,
table.dataTable > thead .sorting_asc:before,
table.dataTable > thead .sorting_desc:before,
table.dataTable > thead .sorting_asc_disabled:before,
table.dataTable > thead .sorting_desc_disabled:before {
    right: auto !important;
    left: 1em !important;
}

table.dataTable > thead .sorting:after,
table.dataTable > thead .sorting_asc:after,
table.dataTable > thead .sorting_desc:after,
table.dataTable > thead .sorting_asc_disabled:after,
table.dataTable > thead .sorting_desc_disabled:after {
    right: auto !important;
    left: .5em !important;
}

table.dataTable > thead > tr > th:not(.sorting_disabled),
table.dataTable > thead > tr > td:not(.sorting_disabled) {
    padding-left: 30px !important;
    padding-right: 8px !important;
}

table.dataTable thead th {
    text-align: center;
}

table.dataTable tbody td {
    border-width: 1px 0;
    text-align: center;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    justify-content: center !important;
}

html.dark-theme .card table a:hover,
html.dark-theme .card table a:focus,
html.dark-theme .card .pagination a:hover,
html.dark-theme .card .pagination a:focus {
    text-decoration: none;
}

html.dark-theme .card .page-link:focus {
    box-shadow: none;
}

.paginate_button.page-item {
    margin: 0 2px;
}

/*====================================
Categories Products
====================================*/

#categories-products {
    text-align: center;
    vertical-align: middle;
}

table .modal {
    text-align: right;
}

#categories-products th {
    position: relative;
}

#categories-products td:not(:last-child) a {
    display: block;
}

#categories-products .sort:before,
#categories-products .sort:after {
    position: absolute;
    bottom: 0.7em;
    display: block;
}

#categories-products .sort:before {
    left: 1em;
    content: "↑";
}

#categories-products .sort:after {
    left: .5em;
    content: "↓";
}

/*.select2-container {*/
/*    width: auto !important;*/
/*    min-width: 115px;*/
/*}*/

.delete-category {
    width: 20px;
    height: 20px;
    position: relative;
    top: 3px;
}

.delete-category input {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 9;
    width: 100%;
    height: 100%;
}

.delete-category ion-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

tr.sub-parent {
    background-color: #edeef1;
}

tr.sub-child {
    background-color: #d2d4d9;
}

/*====================================
Products
====================================*/

table#products {
    vertical-align: middle;
}

table#products th {
    font-size: 12px;
    vertical-align: middle;
}

table#products th span:last-child {
    font-size: 10px;
}

table.dataTable > thead .sorting:before,
table.dataTable > thead .sorting:after,
table.dataTable > thead .sorting_asc:before,
table.dataTable > thead .sorting_asc:after,
table.dataTable > thead .sorting_desc:before,
table.dataTable > thead .sorting_desc:after,
table.dataTable > thead .sorting_asc_disabled:before,
table.dataTable > thead .sorting_asc_disabled:after,
table.dataTable > thead .sorting_desc_disabled:before,
table.dataTable > thead .sorting_desc_disabled:after {
    bottom: auto;
    top: calc(50% - 9px);
}

table#products td {
    font-size: 12px;
}

table#products td ion-icon {
    font-size: 18px;
}

.range-values {
    display: flex;
    justify-content: space-between;
}

.show-product-modal .accordion-body .input-group,
.show-product-modal .quantity {
    align-items: center;
}

.show-product-modal .accordion-body .input-group label,
.show-product-modal .quantity label {
    margin-bottom: 0;
    margin-left: 16px;
    min-width: 125px;
}

.show-product-modal .input-group :disabled,
.show-product-modal .quantity :disabled
.show-product-modal .description :disabled,
html.dark-theme .form-control:disabled,
html.dark-theme .form-select:disabled {
    background-color: rgb(238, 238, 238) !important;
}

.show-product-modal .name-barcode {
    flex-wrap: wrap;
}

.show-product-modal .name-barcode .input-group {
    flex-basis: 100%;
}

.show-product-modal .name-barcode .input-group:first-child {
    margin-bottom: 24px;
}

.select2-container .select2-selection--single {
    height: 35px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 35px !important;
}

.show-product-modal .images .field-show {
    display: flex;
    flex-wrap: wrap;
}

.show-product-modal .images .field-show img {
    margin-bottom: 10px;
}

.show-product-modal .features .select2 {
    margin-left: 10px;
}

table#products td:last-child > div > * {
    margin-left: 7px;
}

table#products td:last-child > div .modal-dialog {
    margin-left: auto;
}

/*====================================
Create Products
====================================*/

html.dark-theme .nav-tabs {
    border-bottom: 1px solid var(--primary);
}

html.dark-theme .nav-tabs .nav-item.show .nav-link,
html.dark-theme .nav-tabs .nav-link.active,
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
    border-color: var(--primary) var(--primary) #fff !important;
}

html.dark-theme .card-header,
html.dark-theme .card-footer {
    border: 1px solid #dbdcdf;
}

.card-header ion-icon {
    margin-left: 5px;
}
:dir(rtl) .card-header ion-icon {
    margin-left: 5px;
    margin-right: 0;
}

:dir(ltr) .card-header ion-icon {
    margin-right: 5px;
    margin-left: 0;
}
/*.add-item-form .card-body > div {*/
/*    justify-content: space-between;*/
/*}*/

.add-item-form .card-body > div > .input-group {
    width: 48%;
    display: flex;
    align-items: center;
}

.add-item-form .form-label {
    margin-left: 1rem;
    margin-bottom: 0;
}

.input-group.barcode-input-group {
    padding: 5px 10px;
    border-radius: 6px;
}

.description .form-label {
    margin-bottom: .75rem;
}

.accordion-button::after,
.accordion-button:not(.collapsed)::after {
    display: none;
}

.accordion-button:not(.collapsed) ion-icon:last-child {
    margin-right: auto;
    transform: rotate(180deg);
    transition: transform .3s ease-in-out;
}

.accordion-button.collapsed ion-icon:last-child {
    margin-right: auto;
    transform: rotate(0deg);
}

.added-features thead tr th:not(:first-child),
.suppliers thead tr th:not(:first-child) {
    border-right-width: 1px;
}

/*====================================
Upload Images and Files
====================================*/

.images label,
.files label {
    flex-basis: 60px;
}

.images ion-icon,
.files ion-icon,
.features ion-icon,
.added-features ion-icon,
.suppliers ion-icon,
.ingredients ion-icon,
.manufact-procs ion-icon,
.modal-content .modal-title,
.ff_fileupload_dropzone ion-icon,
.btn ion-icon {
    margin: auto;
}

.images p,
.files p {
    font-size: 12px;
    margin-right: 85px;
    color: rgba(0, 0, 0, .5);
}

.quantity .form-select,
.features select,
.config-features select,
.manufact-procs select {
    width: auto;
}

.min-quantity .form-control,
.ingredients input[type=number] {
    width: 75px;
}

.quantity .form-control,
.features input,
.added-features input:not([type=checkbox],[type=search]),
.suppliers input[type=number] {
    width: 120px;
}

.features select:not(:first-child),
.features select:not(:first-child) + input {
    display: none;
}

.config-features .form-check-input,
.config-features .form-check-label {
    cursor: pointer;
}

.form-switch .form-check-input:not(:checked):focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
    box-shadow: none;
    border-color: rgba(0, 0, 0, .25);
}

.add-feature-btn button,
.add-supplier-btn button {
    width: 200px;
    height: 25px;
    display: flex;
    align-items: center;
    line-height: 25px;
    justify-content: center;
}

.add-feature-btn button ion-icon {
    margin-top: -2px;
}

html.dark-theme .added-features .table,
html.dark-theme .suppliers .table,
html.dark-theme .ingredients .table {
    vertical-align: middle;
}

#supplier-code {
    width: 155px;
}

#ingredient-main-item,
#ingredient-sub-item {
    width: 220px;
}

.form-actions button {
    position: relative;
}

/*.form-actions ion-icon {*/
/*    position: absolute;*/
/*    top: calc(100% - 7px);*/
/*    right: calc(50% - 40px);*/
/*    font-size: 20px;*/
/*}*/

.hidden,
.hidden + .ff_fileupload_wrap {
    display: none !important;
}

/*====================================
Edit Products
====================================*/

.copy-product {
    position: absolute;
    top: -40px;
    width: auto;
}
/* For LTR */
:dir(ltr) .copy-product {
    left: auto;
    right: 0;
}

/* For RTL */
:dir(rtl) .copy-product {
    left: 0;
    right: auto;
}

/*====================================
Inventory Settings
====================================*/

.features-units-wrapper table {
    vertical-align: middle !important;
    text-align: center;
}

.min-quantity-settings form {
    width: 100%;
    display: flex;
    align-items: center;
}

.min-quantity-settings form label {
    margin-bottom: 0;
}

/*====================================
Inventory Reports
====================================*/

.reports-icons {
    position: absolute;
    left: 0;
    top: -49px;
}

.date-icon {
    width: 24px;
    height: 24px;
}

.date-icon ion-icon {
    position: absolute;
    cursor: pointer;
}

.date-icon .datepicker-custom {
    width: 100%;
    opacity: 0;
    cursor: pointer;
    position: absolute;
}

.date-icon .picker {
    left: 0;
    top: 25px;
    width: 300px;
}

.reports-totals {
    align-items: center;
}

.report-total {
    border: 1px solid var(--primary);
    border-radius: 4px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 120px;
    text-align: center;
}

.report-total span {
    flex-basis: 50%;
}

.report-total span:first-child {
    font-size: .8rem;
}

.report-total span:last-child {
    font-size: 1.5rem;
}

.reports-charts {
    text-align: center;
}

.reports-charts .reports-charts-1 > div > span {
    margin-bottom: 25px;
    display: inline-block;
}

.categories-main-sub .apexcharts-legend {
    display: flex;
    justify-content: space-around;
}

.categories-main-sub .apexcharts-tooltip-series-group {
    color: #fff;
}

#items-categories-main-sub,
#products-categories-main-sub {
    min-height: 400px !important;
}



html.dark-theme .apexcharts-text tspan {
    fill: #252525;
}

.reports-charts-2-2 th,
.reports-charts-2-2 td {
    border-right-width: 0;
    border-left-width: 0;
}

/*====================================
Inventory Processes
====================================*/

.withdraw-add-btn {
    top: -55px;
    left: 0;
}

.withdraw-add-btn .modal label {
    margin-bottom: 0;
}

.withdraw-add-btn .modal input[type="number"] {
    width: 100px;
}

.processes-filter {
    width: 370px;
}

.processes-filter .offcanvas-body > * {
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(37, 37, 37, .3);
    display: flex;
    align-items: center;
    font-size: 14px;
    padding-right: 0;
}

.processes-filter .offcanvas-body > *:last-child {
    border-bottom: 0;
}

.processes-filter .offcanvas-body > * label {
    margin-bottom: 0;
    margin-left: 8px;
}

.processes-filter .form-check .form-check-input {
    margin-right: 0;
    margin-left: 7px;
}

.processes-filter .left-quantity-wrapper {
    flex-wrap: wrap;
}

.processes-filter .left-quantity-wrapper > * {
    flex-basis: 29%;
}

.processes-filter .left-quantity-wrapper label {
    flex-basis: 100%;
    margin-bottom: 8px;
}

.processes-filter .left-quantity-wrapper select {
    flex-basis: 35%;
}

.show-process-modal .input-group {
    align-items: center;
}

.show-process-modal .input-group label {
    margin-left: 10px;
    margin-bottom: 0;
    font-size: 14px;
    min-width: 140px;
}

.show-process-modal .input-group input {
    font-size: 12px !important;
}
.custom-dropdown-menu {
    margin-top:2px;
}
.custom-dropdown-menu a:hover {
    background-color: var(--primary);
    color:#FFF !important;
}
.dropdown-item-delete:hover {
    background-color:#F00 !important;
}

.modal-backdrop.show , .offcanvas-backdrop.show {
    /* lighten the tint a bit so it doesn't sit too heavy on your eyes */
    background-color: rgba(96, 79, 235, 0.15) !important;
    /* boost saturation before we blur to keep colors vibrant */
    backdrop-filter: saturate(100%) blur(9px);
    -webkit-backdrop-filter: saturate(150%) blur(20px);
    opacity: 1 !important;
    will-change: backdrop-filter;
}

.modal-content {
    /* gradient border from your purple into a deep violet */
    border: 2px solid transparent !important;
    -webkit-border-image: -webkit-linear-gradient(135deg, #604feb, #919bf6) 1;
    -moz-border-image: -moz-linear-gradient(135deg, #604feb, #919bf6) 1;
    border-image: linear-gradient(135deg, #604feb, #919bf6) 1;
    /* warm purple ambient glow + depth */
    -webkit-box-shadow:
        0 0 30px rgba(96, 79, 235, 0.25),
        0 16px 48px rgba(0, 0, 0, 0.3);
    -moz-box-shadow:
        0 0 30px rgba(96, 79, 235, 0.25),
        0 16px 48px rgba(0, 0, 0, 0.3);
    box-shadow:
        0 0 30px rgba(96, 79, 235, 0.25),
        0 16px 48px rgba(0, 0, 0, 0.3);
    -webkit-border-radius: .5rem;
    -moz-border-radius: .5rem;
    border-radius: .5rem;
}

.btn-outline-primary {
    color: var(--primary) !important;
}
.btn-outline-primary.active {
    background-color: var(--primary) !important;
    color: #FFF !important;
}
.locked-blur-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    padding: 10px;
}

.locked-feature {
    position: relative;
    overflow: hidden;
}

.locked-feature a {
    padding: 10px 15px;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.02);
    pointer-events: none; /* block clicks */
}

.locked-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    background: rgba(0, 0, 0, 0.6);
    z-index: 5;
    padding: 8px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-size: 15px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
    -moz-box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* The trick: swap lock to unlock icon on hover */
.locked-feature:hover .lock-icon::before {
    content: "\f09c"; /* Unicode for fa-unlock */
    font-family: "Font Awesome 6 Free"; /* make sure FA is loaded */
    font-weight: 900;
    transform: rotate(0deg);
}

/* Optional animation bounce */
.locked-feature:hover .lock-icon {
    -webkit-transform: rotate(-10deg) scale(1.2);
    -moz-transform: rotate(-10deg) scale(1.2);
    transform: rotate(-10deg) scale(1.2);
    -webkit-transition: transform 0.3s ease;
    -moz-transition: transform 0.3s ease;
    transition: transform 0.3s ease;
}
.bgForPlan {
    background-color: #ffab4d !important;

    font-weight: bold;
}
.btn-primary.disabled, .btn-primary:disabled {
    background-color: var(--orange) !important;
    border-color: var(--orange) !important;
    opacity: 0.5;
    cursor: not-allowed !important;
    pointer-events: all !important;
}
.fl-wrapper {
    z-index: 10000000000 !important;
}


.metismenu {
    flex-grow: 1; /* so it takes remaining space */
    overflow-y: auto;
}

.sidebar-footer {
    /* padding: 1rem; */
    border-top: 1px solid #ddd;
}
/* Hide logout text when sidebar is collapsed */
.wrapper.toggled .logout-text {
    display: none;
}
/* but show text when hovered */
.wrapper.toggled.sidebar-hovered .logout-text {
    display: inline;
}
.stats-change.neutral {
    color: #6c757d; /* grey */
}

/* Close Shift Button */
.btn-close-shift {
    background-color: var(--primary);
    border-color: var(--primary);
    color: white;
    padding: 12px 30px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.btn-close-shift:hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    color: white;
    -webkit-transform: translateY(-1px);
    -moz-transform: translateY(-1px);
    transform: translateY(-1px);
    -webkit-box-shadow: 0 4px 8px rgba(96, 79, 235, 0.3);
    -moz-box-shadow: 0 4px 8px rgba(96, 79, 235, 0.3);
    box-shadow: 0 4px 8px rgba(96, 79, 235, 0.3);
}

.btn-close-shift:active {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0);
}

.btn-close-shift:disabled {
    background-color: #6c757d;
    border-color: #6c757d;
    opacity: 0.65;
    transform: none;
}

/* Section Transitions */
.cash-count-section,
.password-auth-section,
.success-section {
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    opacity: 1;
}

.cash-count-section.fade-out,
.password-auth-section.fade-out,
.success-section.fade-out {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -moz-transform: translateX(-20px);
    transform: translateX(-20px);
}

.cash-count-section.fade-in,
.password-auth-section.fade-in,
.success-section.fade-in {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    transform: translateX(0);
}
/* Success Animation */
.success-animation {
    -webkit-animation: successPulse 0.6s ease-out;
    -moz-animation: successPulse 0.6s ease-out;
    animation: successPulse 0.6s ease-out;
}

@keyframes successPulse {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* Loading Animation */
.fa-spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Form Validation Animation */
.shake {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Alert Animations */
.alert {
    animation: slideInDown 0.5s ease-out;
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Card Hover Effects */
.card {
    transition: all 0.3s ease;
}

.card:hover {
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* Button Hover Effects */
.btn {
    transition: all 0.2s ease;
}

.btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

/* Custom Scrollbar for Modal Body */
/*.modal-body {*/
/*    max-height: 70vh;*/
/*    overflow-y: auto;*/
/*}*/

.modal-body::-webkit-scrollbar {
    width: 6px;
}

.modal-body::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.modal-body::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Badge Animations */
.badge {
    transition: all 0.2s ease;
}

.badge:hover {
    transform: scale(1.05);
}

/* Responsive */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 1rem;
    }

    .btn-close-shift {
        width: 100%;
        margin-bottom: 1rem;
    }

    /* .modal-body {
        max-height: 60vh;
    } */
}
.status-returned {
    background-color: red;
}
/*====================================
Select2 Upward Dropdown Styles
====================================*/

/* Select2 dropdown upward positioning */
.select2-dropdown.select2-dropdown-upward {
    z-index: 9998 !important;
    animation: slideUp 0.15s ease-out;
    pointer-events: auto !important;
    position: absolute !important;
    transform: none !important;
    bottom: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.select2-dropdown.select2-dropdown-upward .select2-results {
    max-height: 200px !important;
    overflow-y: auto !important;
}

/* Override Select2's positioning completely */
.select2-dropdown.select2-dropdown-upward[style] {
    position: absolute !important;
    transform: none !important;
    bottom: auto !important;
}

/* Ensure select element remains clickable */
.select2-container--bootstrap4.select2-container--open .select2-selection--single {
    z-index: 9999 !important;
    position: relative !important;
}

/* Container styling for upward positioning */
.select2-container.select2-container-upward {
    z-index: 9999 !important;
    position: relative !important;
}

.select2-container.select2-container-upward .select2-selection--single {
    z-index: 10000 !important;
    position: relative !important;
}

/* Remove any default margins/padding that might create gaps */
.select2-dropdown.select2-dropdown-upward {
    padding: 0 !important;
    border-top: none !important;
}

.select2-dropdown.select2-dropdown-upward .select2-results__options {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.select2-results__options {
    -webkit-overflow-scrolling: touch; 
  }

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
    left: 1px !important;
    right: auto !important;
}
/* Debug styles - remove after testing */
/* .select2-dropdown.select2-dropdown-upward {
    border: 2px solid red !important;
    background-color: rgba(255, 0, 0, 0.1) !important;
} */
.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
    padding-right:16px !important
}
.items-table-rows-count {
    width: 40% !important;
}