:root {
    --apex-red: #eb1d5e;
    --apex-red-tint: #bc174b;

    --apex-purple: #6d2a68;
    --apex-purple-tint: #572253;

    --apex-blue: #1138bf;
    --apex-blue-tint: #0a1172;

    --apex-blue-light: #274597;
    --apex-grey: #808080;
}

/* Scroll to top */
.scrolltop {
    background-color: var(--apex-blue);
    color: var(--apex-blue-tint);
}
.scrolltop:hover {
    background-color: var(--apex-blue-tint);
    color: #fff;
}

.btn.btn-primary {
    color: var(--bs-primary-inverse);
    border-color: var(--apex-blue-light);
    background-color: var(--apex-blue);
}

.bg-apex-mustard {
    background-color: var(--apex-red-light) !important;
}

/* Datatables custom CSS */
.dataTables_wrapper .dataTables_processing {
    background: var(--apex-grey);
    border-radius: 3px;
    color: #fff;
}

.dataTables_wrapper
    .dataTables_paginate
    .pagination
    .page-item.active
    > .page-link {
    background-color: var(--apex-blue);
}

.dataTables_wrapper
    .dataTables_paginate
    .pagination
    .page-item:hover:not(.disabled)
    > .page-link {
    background-color: var(--apex-blue);
    color: #fff;
}

.dt-buttons.btn-group.flex-wrap {
    border-radius: 20px;
}

div.dt-button-collection .dt-button {
    min-width: auto;
}

.dt-button.dropdown-item.active {
    background-color: var(--apex-blue);
}

.dt-button.dropdown-item:active {
    background-color: var(--apex-blue);
}

div.dt-button-collection .dropdown-menu {
    max-height: 400px;
    overflow-y: scroll !important;
}

.aside-menu .menu-nav > .menu-item.menu-item-open > .menu-heading .menu-icon,
.aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link .menu-icon {
    color: var(--apex-blue);
}

.aside-menu
    .menu-nav
    > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(
        .menu-item-here
    ):not(.menu-item-active):hover
    > .menu-heading
    .menu-icon,
.aside-menu
    .menu-nav
    > .menu-item:not(.menu-item-parent):not(.menu-item-open):not(
        .menu-item-here
    ):not(.menu-item-active):hover
    > .menu-link
    .menu-icon {
    color: var(--apex-blue);
}

.aside-menu
    .menu-nav
    > .menu-item
    .menu-submenu
    .menu-item.menu-item-active
    > .menu-heading
    .menu-icon,
.aside-menu
    .menu-nav
    > .menu-item
    .menu-submenu
    .menu-item.menu-item-active
    > .menu-link
    .menu-icon {
    color: var(--apex-blue);
}

.aside-menu .menu-nav > .menu-item.menu-item-active > .menu-heading .menu-icon,
.aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-icon {
    color: var(--apex-blue);
}

.aside-menu
    .menu-nav
    > .menu-item
    .menu-submenu
    .menu-item:not(.menu-item-parent):not(.menu-item-open):not(
        .menu-item-here
    ):not(.menu-item-active):hover
    > .menu-heading
    .menu-icon,
.aside-menu
    .menu-nav
    > .menu-item
    .menu-submenu
    .menu-item:not(.menu-item-parent):not(.menu-item-open):not(
        .menu-item-here
    ):not(.menu-item-active):hover
    > .menu-link
    .menu-icon {
    color: var(--apex-blue);
}

.btn.btn-primary:hover:not(.btn-text):not(:disabled):not(.disabled),
.btn.btn-primary:focus:not(.btn-text),
.btn.btn-primary.focus:not(.btn-text) {
    color: #fff;
    background-color: var(--apex-blue-tint);
    border-color: var(--apex-blue-tint);
}

.btn.btn-light-pri {
    background-color: var(--apex-blue-light);
    color: #fff;
}

.btn.btn-light-pri i,
.btn.btn-light-pri.dropdown-toggle:after {
    background-color: var(--apex-blue-light);
    color: #fff;
}

.btn.btn-light-pri i:hover,
.btn.btn-light-pri.dropdown-toggle:after:hover {
    background-color: var(--apex-blue-light);
    color: #fff;
}

.btn.btn-light-pri:hover:not(.btn-text):not(:disabled):not(.disabled),
.btn.btn-light-pri:active:not(.btn-text):not(:disabled):not(.disabled),
.btn.btn-light-pri:focus:not(.btn-text) {
    background-color: var(--apex-blue-light);
    color: #fff;
}

.btn.btn-light-pri:hover:not(.btn-text):not(:disabled):not(.disabled) i,
.btn.btn-light-pri:active:not(.btn-text):not(:disabled):not(.disabled) i,
.btn.btn-light-pri:focus:not(.btn-text) i {
    /* background-color: var(--apex-purple-tint); */
    background-color: var(--apex-blue-light);
    color: #fff;
}

.btn.btn-hover-primary:hover:not(.btn-text):not(:disabled):not(.disabled),
.btn.btn-hover-primary:focus:not(.btn-text),
.btn.btn-hover-primary.focus:not(.btn-text) {
    color: #fff !important;
    background-color: var(--apex-blue-tint) !important;
    border-color: var(--apex-blue-tint) !important;
}

.select2-results__option .product-name {
    font-weight: bold;
}

.select2-results__option .product-code {
    font-size: 0.85em;
}

.tooltip-inner {
    max-width: 500px !important;
    white-space: normal;
}
.warning-row {
    background-color: yellow;
    color: red;
}
/* Example of custom CSS if needed */
#material_request_quotation_products,
#material_request_sale_products {
    font-size: 1rem; /* Adjust font size */
    padding: 0.5rem; /* Adjust padding if needed */
}

.fs-6 {
    font-size: 1rem !important; /* Bootstrap size classes can sometimes be overridden */
}

.highlight-low-stock {
    background-color: #f5c6cb !important; /* Light red shade */
}

.highlight-awaiting-approval {
    background-color: #f5c6cb !important; /* Light red shade */
}

/* Smooth scrollbar for search results */
#search-results::-webkit-scrollbar {
    width: 6px;
}
#search-results::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 10px;
}
.select2-selection.loading {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23999999' d='M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50'%3E%3CanimateTransform attributeName='transform' attributeType='XML' type='rotate' dur='1s' from='0 50 50' to='360 50 50' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
}

/* Container for horizontal scroll */
.table-scroll-wrapper {
    overflow-x: auto;
    position: relative;
}

/* Sticky columns */
#monthly-sales-table th:nth-child(1),
#monthly-sales-table td:nth-child(1),
#monthly-sales-table th:nth-child(2),
#monthly-sales-table td:nth-child(2),
#monthly-sales-table th:nth-child(3),
#monthly-sales-table td:nth-child(3) {
    position: sticky;
    background-color: white;
    z-index: 10;
}

/* Column positions */
#monthly-sales-table th:nth-child(1),
#monthly-sales-table td:nth-child(1) {
    left: 0;
    width: 50px;
    min-width: 50px;
    text-align: left;
}

#monthly-sales-table th:nth-child(2),
#monthly-sales-table td:nth-child(2) {
    left: 50px;
    width: 280px;
    min-width: 280px;
    max-width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#monthly-sales-table th:nth-child(3),
#monthly-sales-table td:nth-child(3) {
    left: 330px;
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    text-align: left;
    padding-left: 8px;
    padding-right: 8px;
}

/* Header sticky background */
#monthly-sales-table thead th:nth-child(1),
#monthly-sales-table thead th:nth-child(2),
#monthly-sales-table thead th:nth-child(3) {
    background-color: #f8f9fa;
}

/* Shadow effect for sticky columns */
#monthly-sales-table th:nth-child(3)::after,
#monthly-sales-table td:nth-child(3)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 10px;
    background: linear-gradient(to right, rgba(0,0,0,0.08), transparent);
    pointer-events: none;
}

/* Month columns min-width */
#monthly-sales-table th:nth-child(n+4),
#monthly-sales-table td:nth-child(n+4) {
    min-width: 100px;
    white-space: nowrap;
    padding-left: 10px;
}

.customer-profile-card {
    background-position: center right -8rem;
    background-size: 700px;
    background-repeat: no-repeat;
}

.custom-card-bg {
    background-position: center right -8rem;
    background-size: 700px;
    background-repeat: no-repeat;
}