/* =========================================================
   PAL INVENTORY — pal_style.css
   Elevated UI | Cairo | Purple #5b4fcf
   ========================================================= */

/* ── Global font ── */
body,
.m-aside-menu,
.m-header,
.m-portlet,
.modal,
.m-form,
.select2-container,
.dataTables_wrapper {
    font-family: 'Cairo', sans-serif !important;
}


.field-validation-valid {
    display: none !important;
}

.status-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 25px;
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    font-family: NeoSans;
    overflow: hidden;
    box-shadow: none;
    cursor: default;
    width: fit-content;
    pointer-events: none;
}

.btn-production {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-family: NeoSans;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-start-production {
    background: linear-gradient(135deg, #5b4fcf, #a89ef9);
    box-shadow: 0 4px 15px rgba(91, 79, 207, 0.4);
}

    .btn-start-production:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(91, 79, 207, 0.5);
    }

.btn-complete-production {
    background: linear-gradient(135deg, #21885d, #a2f99e);
    box-shadow: 0 4px 15px rgba(33, 136, 93, 0.4);
}

    .btn-complete-production:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(33, 136, 93, 0.5);
    }

.btn-production-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    font-size: 14px;
}

.btn-start-production .btn-production-icon i {
    animation: pulse-icon 1.5s ease-in-out infinite;
}

.btn-production::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 40%;
    height: 200%;
    background: rgba(255, 255, 255, 0.2);
    transform: skewX(-20deg);
    animation: shine 3s ease-in-out infinite;
}

@keyframes pulse-icon {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }
}

@keyframes shine {
    0% {
        left: -60%;
    }

    100% {
        left: 160%;
    }
}

.status-badge:hover {
    transform: none;
    box-shadow: none;
}

.status-inprogress .status-icon {
    animation: spin 1.5s linear infinite;
}

.status-pending .status-pulse {
    position: absolute;
    left: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.6);
    animation: pulse 1.5s ease-in-out infinite;
}

.status-completed::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 40%;
    height: 200%;
    background: rgba(255,255,255,0.25);
    transform: skewX(-20deg);
    animation: shine 3s ease-in-out infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.4);
    }
}

@keyframes shine {
    0% {
        left: -60%;
    }

    100% {
        left: 160%;
    }
}

.field-validation-error,
.field-validation-error.label-danger,
.m-login .label-danger,
.m-form .label-danger.field-validation-error {
    display: block !important;
    color: #e53e3e !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-top: 0.35rem !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    text-align: initial !important;
}

    .field-validation-error span,
    .label-danger.field-validation-error span {
        background: transparent !important;
        background-color: transparent !important;
        color: inherit !important;
        padding: 0 !important;
    }


/* =========================================================
   SELECT2 INTERNAL SEARCH FIELD FIX (CAIRO BASELINE FIX)
   ========================================================= */

/* 1. Dropdown Search Box (Single Select Search) */
.select2-dropdown .select2-search {
    padding: 6px !important;
    background-color: #fff !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field,
.select2-dropdown .select2-search__field {
    height: auto !important; /* Nuke fixed height so Cairo doesn't clip */
    padding: 5px 8px !important; /* Tight vertical padding, spacious horizontal padding */
    font-family: 'Cairo', sans-serif !important;
    font-size: .85rem !important;
    line-height: 1.2 !important; /* Keeps Cairo perfectly balanced vertically */
    color: #1e1740 !important; /* Forces your dark purple-black text color */
    background-color: #ffffff !important; /* Guarantees no white-on-white text issues */
    border: 1.5px solid #d4d0f0 !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    text-indent: 0 !important;
}

    .select2-dropdown .select2-search__field:focus {
        border-color: #a89ef9 !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(91,79,207,.1) !important;
        background-color: #ffffff !important;
    }

/* 2. Inline Search Box (Multi-Select Tag Box Search) */
.select2-container--default .select2-selection--multiple .select2-search--inline {
    margin: 0 !important;
    padding: 0 !important;
    line-height: normal !important;
    display: inline-flex !important;
    align-items: center !important;
}

.select2-container--default .select2-selection--multiple .select2-search__field {
    margin: 2px 0 2px 6px !important;
    padding: 2px 30px !important;
    font-family: 'Cairo', sans-serif !important;
    font-size: .85rem !important;
    height: auto !important; /* Let it size naturally to matching elements */
    line-height: 1.2 !important;
    color: #1e1740 !important;
    background-color: transparent !important;
    box-sizing: border-box !important;
}
/* =========================================================
   LOGIN
   ========================================================= */
.m-login .label-danger {
    font-weight: 600;
    font-size: .82rem;
    display: block;
    color: #e53e3e !important;
    background: none !important;
    margin-top: .25rem;
}

    .m-login .label-danger span {
        background: none !important;
    }

.m-login__container .form-control {
    height: auto;
}

.m-stack.m-stack--desktop.m-stack--ver > .m-stack__item.m-stack__item--left {
    text-align: center !important;
}

/* =========================================================
   TOPBAR DROPDOWN
   ========================================================= */
#m_header_topbar .m-dropdown.m-dropdown--align-right.m-dropdown--align-push .m-dropdown__wrapper {
    margin-top: 14px;
}

.m-card-user .m-card-user__pic img {
    width: 70px !important;
    height: 70px !important;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ede9fb;
}

/* =========================================================
   BUTTONS & ICONS
   ========================================================= */
.m-btn--icon > span {
    margin: 0 auto;
}

.label-danger {
    color: #fff;
    background-color: #e53e3e;
    border-radius: 4px !important;
    font-size: .78rem;
    font-weight: 600;
    padding: 2px 8px;
}

    .label-danger span {
        color: #fff;
        padding-left: 8px;
        padding-right: 8px;
    }

    .label-danger.repeated-row span {
        padding-right: 4px !important;
        padding-left: 4px !important;
        font-size: 9px !important;
    }

.btn-icon-xs {
    width: 30px !important;
    height: 30px !important;
    border-radius: 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background .15s !important;
}

    .btn-icon-xs .la {
        font-size: 17px;
    }

.input-group-append .dropdown-item .form-control {
    margin-top: 10px;
}

/* =========================================================
   SELECT2
   ========================================================= */
.select2-container {
    width: 100% !important;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1.5px solid #d4d0f0 !important;
    border-radius: 8px !important;
    transition: border-color .15s, box-shadow .15s !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #a89ef9 !important;
    box-shadow: 0 0 0 3.5px rgba(91,79,207,.1) !important;
    outline: none !important;
}

.select2-dropdown {
    z-index: 999999999;
    border: 1.5px solid #ede9fb !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 32px rgba(91,79,207,.12) !important;
    overflow: hidden;
}

.select2-results__option--highlighted {
    background-color: #f0eeff !important;
    color: #5b4fcf !important;
}

.select2-results__option[aria-selected="true"] {
    background-color: #f0eeff !important;
    color: #5b4fcf !important;
    font-weight: 600 !important;
}

/* =========================================================
   TABLES
   ========================================================= */
.table td {
    vertical-align: middle;
}

.table thead th {
    background: #f9f8ff !important;
    color: #4e4a72 !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
    border-bottom: 2px solid #eaebf5 !important;
    padding: 10px 8px !important;
}

.table tbody tr td {
    border-bottom: 1px solid #f2f0fb !important;
    font-size: .88rem;
    color: #1e1740;
}

.table tbody tr:hover td {
    background: #f9f8ff !important;
}

table.dataTable tbody > tr.selected td,
table.dataTable tbody > tr > .selected td {
    background-color: #f0eeff !important;
    color: #5b4fcf !important;
}

tfoot th {
    vertical-align: inherit !important;
}

.custom-padding-tb td {
    padding-left: 2px !important;
    padding-right: 2px !important;
}

/* =========================================================
   FORMS
   ========================================================= */
.form-control {
    border-color: #d4d0f0 !important;
    border-radius: 8px !important;
    font-family: 'Cairo', sans-serif !important;
    font-size: .9rem !important;
    transition: border-color .15s, box-shadow .15s !important;
}

    .form-control:focus {
        border-color: #a89ef9 !important;
        box-shadow: 0 0 0 3.5px rgba(91,79,207,.1) !important;
        outline: none !important;
        background-color: #fff !important;
    }

    .form-control[readonly] {
        border-color: #eaebf5 !important;
        color: #9b96bf !important;
        background-color: #f9f8ff !important;
    }

    .form-control[disabled] {
        border-color: #d4d0f0 !important;
        background-color: #f4f3ff !important;
        color: #9b96bf !important;
    }

.m-form.m-form--group-seperator-dashed .m-form__group,
.m-form.m-form--group-seperator .m-form__group {
    padding-top: 14px;
    padding-bottom: 14px;
}

.m-form .m-form__heading {
    padding: 0;
    margin: 0;
    padding-top: 14px;
    border-top: 1px dashed #ede9fb;
}

    .m-form .m-form__heading .m-form__heading-title {
        font-size: 1rem;
    }

.input-group .input-group-append > .input-group-text,
.input-group .input-group-prepend > .input-group-text {
    border-color: #d4d0f0 !important;
    background: #f9f8ff !important;
    color: #9b96bf;
    border-radius: 0px;
    border-left: none !important;
    border-right: none !important;
}

.table .m-radio > input,
.table .m-checkbox > input {
    position: initial !important;
}

/* =========================================================
   INPUT GROUP
   ========================================================= */
.input-group-text {
    padding: .35rem 1rem;
    border-color: #d4d0f0 !important;
    background: #f9f8ff !important;
    font-family: 'Cairo', sans-serif !important;
}

/* =========================================================
   MODALS
   ========================================================= */
.modal .modal-content {
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 24px 72px rgba(0,0,0,.13) !important;
    overflow: hidden;
}

    .modal .modal-content .modal-header {
        background: #fff !important;
        border-bottom: 1.5px solid #eaebf5 !important;
        padding: 16px 22px !important;
    }

        .modal .modal-content .modal-header .modal-title {
            font-size: 1rem !important;
            font-weight: 700 !important;
            color: #1a1535 !important;
            font-family: 'Cairo', sans-serif !important;
        }

    .modal .modal-content .modal-body {
        padding: 10px 0 !important;
        background: #fff !important;
    }

    .modal .modal-content .modal-footer {
        background: #f9f8ff !important;
        border-top: 1.5px solid #eaebf5 !important;
        padding: 10px 20px !important;
        justify-content: flex-start;
    }

@media (min-width: 992px) {
    .modal-lg {
        max-width: 98% !important;
    }

    .modal-md {
        max-width: 60% !important;
    }

    .modal-md80 {
        max-width: 80% !important;
    }
}

/* =========================================================
   PORTLET CARDS
   ========================================================= */
.m-portlet {
    border-radius: 14px !important;
    border: 1.5px solid #eaebf5 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.04) !important;
    overflow: hidden !important;
    background: #fff !important;
    margin-bottom: 1.2rem;
}

    .m-portlet .m-portlet__head {
        background: #f9f8ff !important;
        border-bottom: 1.5px solid #eaebf5 !important;
        height: 52px !important;
        padding: 0 1.4rem !important;
    }

        .m-portlet .m-portlet__head .m-portlet__head-caption .m-portlet__head-title .m-portlet__head-text {
            font-size: 1rem !important;
            font-weight: 700 !important;
            color: #1a1535 !important;
            font-family: 'Cairo', sans-serif !important;
        }

        .m-portlet .m-portlet__head .m-portlet__head-caption .m-portlet__head-title .m-portlet__head-icon [class^="flaticon-"],
        .m-portlet .m-portlet__head .m-portlet__head-caption .m-portlet__head-title .m-portlet__head-icon [class*=" flaticon-"] {
            font-size: 1.5rem;
        }

        .m-portlet .m-portlet__head .m-portlet__head-tools .btn {
            padding: .35rem 1rem;
        }

    .m-portlet .m-portlet__body {
        background: #fff !important;
        padding: 1.2rem 1.4rem !important;
    }

.m-portlet__foot {
    background: #f9f8ff !important;
    border-top: 1.5px solid #eaebf5 !important;
}

/* =========================================================
   BUTTONS (global upgrade)
   ========================================================= */
.btn {
    border-radius: 9px !important;
    font-family: 'Cairo', sans-serif !important;
    font-weight: 600 !important;
    transition: all .15s ease !important;
}

.btn-brand,
.btn-brand:not(:disabled):not(.disabled) {
    background: #5b4fcf !important;
    border-color: #5b4fcf !important;
    color: #fff !important;
}

    .btn-brand:hover {
        background: #4a3fb8 !important;
        border-color: #4a3fb8 !important;
        box-shadow: 0 4px 14px rgba(91,79,207,.3) !important;
        transform: translateY(-1px) !important;
    }

.m-form__actions .btn {
    padding: .65rem 1.15rem;
}

.m-form__actions .btnSave {
    background: #5b4fcf !important;
    border-color: #5b4fcf !important;
    color: #fff !important;
    border-radius: 9px !important;
    font-weight: 700 !important;
    font-family: 'Cairo', sans-serif !important;
    box-shadow: 0 4px 14px rgba(91,79,207,.22) !important;
    transition: all .15s !important;
    min-width: 130px !important;
    padding: .65rem 1.15rem;
}

    .m-form__actions .btnSave:hover {
        background: #4a3fb8 !important;
        transform: translateY(-1px) !important;
    }

.input-group-append .btn {
    padding: .3rem 1rem;
}
.input-group .input-group-append .btn,
.input-group .input-group-append .btn-brand {
    border-radius: 0 8px 8px 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    height: calc(2.2rem + 2px) !important;
    padding: .35rem .9rem !important;
    line-height: 1 !important;
}.input-group .input-group-append .btn-brand {
    border-radius: 0 8px 8px 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.input-group .form-control:first-child {
    border-radius: 8px 0 0 8px !important;
}

.btnAddEntry {
    padding: .35rem 1rem;
}

.m-btn--icon.m-btn--icon-only {
    width: 30px;
    height: 30px;
    border-radius: 7px !important;
}

    .m-btn--icon.m-btn--icon-only [class^="la-"],
    .m-btn--icon.m-btn--icon-only [class*=" la-"] {
        font-size: 1.1rem;
    }

/* =========================================================
   TABS
   ========================================================= */
.m-tabs-line .m-tabs__link {
    padding: 5px 0;
    font-size: .9rem;
    font-family: 'Cairo', sans-serif !important;
}

.nav.nav-pills .nav-link [class^="flaticon-"],
.nav.nav-pills .nav-link [class*=" flaticon-"],
.nav.nav-tabs .nav-link [class^="flaticon-"],
.nav.nav-tabs .nav-link [class*=" flaticon-"] {
    font-size: 1.35rem;
}

/* =========================================================
   SMALLFY DENSITY
   ========================================================= */
.form-control {
    height: calc(2.2rem + 2px);
    padding: .35rem .55rem;
}

.table th {
    padding: .45rem;
    font-size: .8rem;
}

.table td {
    font-size: .88rem;
    padding: .28rem;
}

.table th, .table td {
    padding: .28rem;
}

.table th {
    padding: .45rem;
}

.table {
    margin-bottom: 0;
}

.m-form .form-control-label,
.m-form label {
    font-size: .88rem;
    font-family: 'Cairo', sans-serif !important;
}

label {
    margin-bottom: 0;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: .45rem .55rem;
}

.btnLoadFile {
    padding: .35rem .85rem;
    line-height: initial;
}

.m-body .m-content {
    padding: 15px 28px;
}

.section-head {
    margin: 0;
    font-size: 12px;
    padding: 5px 10px !important;
    border-radius: 4px !important;
    margin-left: -5px;
    margin-right: -5px;
    width: 160px;
}

.btn-xs {
    padding: 2px 9px !important;
    font-size: 11px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 8px;
}

/* =========================================================
   INVOICES
   ========================================================= */
.m-invoice-2 {
    margin-top: 20px;
}

    .m-invoice-2 .m-invoice__wrapper .m-invoice__footer {
        background-color: #f9f8ff;
        border-top: 1.5px solid #eaebf5;
        margin-top: 0;
        padding: 1rem 0;
    }

    .m-invoice-2.sales-inv .m-invoice__wrapper .m-invoice__footer .m-invoice__table.m-invoice__table--centered {
        width: 85%;
    }

    .m-invoice-2.sales-inv2 .m-invoice__wrapper .m-invoice__footer .m-invoice__table.m-invoice__table--centered {
        width: 95%;
    }

.vat-discount {
    width: 150px;
}

.line-sum.m--font-danger,
.line-sum-lc.m--font-success {
    font-size: 14px;
    font-weight: 700;
}

.lines-total-sum.m--font-danger,
.lines-total-sum-lc.m--font-success {
    font-size: 20px;
    font-weight: 800;
}

/* =========================================================
   ITEMS / ACCORDION TABS
   ========================================================= */
.Items-Tabs .m-section__heading {
    margin-bottom: 0;
}

.Items-Tabs .m-section {
    margin-bottom: 5px;
    padding-right: 28px;
    padding-left: 28px;
}

.Items-Tabs .m-accordion .m-accordion__item .m-accordion__item-body > span,
.m-accordion .m-accordion__item .m-accordion__item-body .m-accordion__item-content {
    padding: 0;
}

.m-accordion .m-accordion__item .m-accordion__item-head {
    padding: .5rem 2rem;
}

/* =========================================================
   SCANNED IMAGES
   ========================================================= */
.scanned-imgs {
    position: relative;
    padding: 0 2px 2px;
}

    .scanned-imgs img {
        border: 1.5px solid #a89ef9;
        border-radius: 8px;
        padding: 8px;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        cursor: pointer;
        transition: border-color .15s, box-shadow .15s;
    }

        .scanned-imgs img:hover {
            border-color: #5b4fcf;
            box-shadow: 0 4px 14px rgba(91,79,207,.18);
        }

    .scanned-imgs:hover .scanned-file-delete {
        display: inline-block;
    }

.scanned-file-delete {
    position: absolute;
    top: 15px;
    left: 18px;
    display: none;
}

.modalScannedImgPreview canvas {
    max-width: 100%;
}

.file-type {
    width: 30px;
}

.EZView-container .image-collection img {
    max-height: initial !important;
}

.EZView-container {
    background: rgba(87,89,98,.4);
}

/* =========================================================
   THUMBNAIL
   ========================================================= */
.thumbnail {
    padding: 6px;
    border-radius: 8px;
    border: 1.5px solid #ede9fb;
    background: #f9f8ff;
    width: 250px;
    transition: border-color .15s, box-shadow .15s;
}

    .thumbnail:hover {
        border-color: #a89ef9;
        box-shadow: 0 4px 14px rgba(91,79,207,.1);
    }

/* =========================================================
   TREE / CORRESPONDENCE
   ========================================================= */
.corrs-tree .jstree-node {
    padding-bottom: 10px;
}

    .corrs-tree .jstree-node:first-child {
        padding-top: 15px;
    }

    .corrs-tree .jstree-node .jstree-anchor {
        color: #5b4fcf !important;
        font-weight: 500 !important;
        font-size: 1.1rem !important;
        transition: color .15s !important;
    }

        .corrs-tree .jstree-node .jstree-anchor:hover {
            color: #4a3fb8 !important;
        }

.corrs-tree .jstree-default .jstree-icon {
    color: #7c6ff7;
}

.corrs-tree .jstree-node .jstree-anchor.jstree-clicked,
.corrs-tree .jstree-node .jstree-anchor.jstree-hovered {
    width: 80%;
}

.vakata-context {
    z-index: 10000;
}

#treeMailFolders {
    padding-left: 15px;
    padding-right: 15px;
}

/* =========================================================
   EMPLOYEE TABS & PROFILE
   ========================================================= */
.emp-tabs .m-tabs-line.m-tabs-line--2x a.m-tabs__link {
    border-bottom-width: 4px !important;
}

.emp-tabs .nav.nav-pills .nav-item,
.emp-tabs .nav.nav-tabs .nav-item {
    width: 180px;
    margin-bottom: 9px !important;
}

    .emp-tabs .nav.nav-pills .nav-item:first-child,
    .emp-tabs .nav.nav-tabs .nav-item:first-child {
        margin-left: 5px !important;
    }

.empImg {
    position: absolute;
    top: -105px;
    right: 14px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #fff, 0 4px 16px rgba(91,79,207,.18);
    background-color: #fff;
    z-index: 1;
    width: 146px;
    height: 146px;
    padding: 5px;
    object-fit: cover;
}

/* =========================================================
   ON-THE-FLY ADD BUTTON
   ========================================================= */
.divOnFlyAdd:hover .btnOnFlyAdd {
    display: inline-block !important;
}

.btnOnFlyAdd {
    display: none !important;
    position: absolute !important;
    bottom: 2px !important;
    right: 16px !important;
    height: 27px !important;
}

/* =========================================================
   DATEPICKER
   ========================================================= */
.datepicker table tr td.day:hover,
.datepicker table tr td.focused {
    background: #5b4fcf !important;
    color: #fff !important;
    border-radius: 6px !important;
}

.datepicker.datepicker-orient-top {
    z-index: 999999 !important;
}

/* =========================================================
   SCROLLBAR (content area)
   ========================================================= */
.m-scroller:not(.m-scrollable--track) > .ps__rail-y > .ps__thumb-y,
.m-scrollable:not(.m-scrollable--track) > .ps__rail-y > .ps__thumb-y {
    width: 5px !important;
    background: #ede9fb !important;
    border-radius: 4px !important;
}

.m-scroller:not(.m-scrollable--track) > .ps__rail-y,
.m-scrollable:not(.m-scrollable--track) > .ps__rail-y {
    width: 5px !important;
}

    .m-scroller:not(.m-scrollable--track) > .ps__rail-y > .ps__thumb-y:hover,
    .m-scroller:not(.m-scrollable--track) > .ps__rail-y > .ps__thumb-y:focus,
    .m-scrollable:not(.m-scrollable--track) > .ps__rail-y > .ps__thumb-y:hover,
    .m-scrollable:not(.m-scrollable--track) > .ps__rail-y > .ps__thumb-y:focus {
        width: 5px !important;
        background: #a89ef9 !important;
    }

/* =========================================================
   STORE ROW / BADGES
   ========================================================= */
.store-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    white-space: nowrap;
}

.store-name {
    min-width: 140px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #1a1535;
}

.store-units {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.unit-badge {
    font-size: 12px;
}

.m-badge.m-badge--wide {
    padding: 1px 16px !important;
}

/* =========================================================
   MISC
   ========================================================= */
.hide {
    display: none;
}

.room-icon {
    margin-top: 10px;
    margin-bottom: 8px;
}

.TreeColor0 {
    color: #0e7747;
}

.TreeColor1 {
    color: #f40000;
}

.TreeColor2 {
    color: #0e7747;
}

.TreeColor3 {
    color: #d4a017;
}

/* e-treegrid fix */
.e-treegrid .e-rowcell:not(.e-gridclip) .e-treecolumn-container {
    overflow: initial !important;
}

/* =========================================================
   TOAST / ALERTS (elevated)
   ========================================================= */
.m-alert.m-alert--outline {
    border-radius: 10px !important;
    font-family: 'Cairo', sans-serif !important;
    font-size: .88rem !important;
}

/* =========================================================
   PAGE LOADER
   ========================================================= */
.m-page-loader.m-page-loader--base {
    background: rgba(255,255,255,.9) !important;
    backdrop-filter: blur(6px);
}

.m-page-loader .m-blockui {
    border-radius: 14px !important;
    padding: 1.25rem 2rem !important;
    box-shadow: 0 12px 40px rgba(91,79,207,.14) !important;
    border: 1px solid #ede9fb !important;
    font-family: 'Cairo', sans-serif !important;
    font-size: .9rem !important;
    color: #4e4a72 !important;
}

/* =========================================================
   DATATYPE BADGES
   ========================================================= */
.m-badge {
    border-radius: 6px !important;
    font-family: 'Cairo', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .03em !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 768px) {
    .m-body .m-content {
        padding: 10px 14px;
    }

    .m-portlet .m-portlet__body {
        padding: .9rem 1rem !important;
    }
}

/* =========================================================
   PORTLET HEAD — stronger brand presence
   ========================================================= */
.m-portlet .m-portlet__head {
    background: linear-gradient(135deg, #f8f7ff 0%, #f0eeff 100%) !important;
    border-bottom: 2px solid #e4dffa !important;
    height: 52px !important;
    padding: 0 1.4rem !important;
}

    .m-portlet .m-portlet__head .m-portlet__head-caption .m-portlet__head-title .m-portlet__head-text {
        color: #1a1535 !important;
        font-weight: 800 !important;
        font-size: 1rem !important;
        font-family: 'Cairo', sans-serif !important;
    }

/* =================================================================
   TABS — m-tabs-line global override
   ================================================================= */
.m-tabs-line .nav-link,
.m-tabs-line .m-tabs__link {
    color: #4e4a72 !important;
    background: transparent !important;
    opacity: 1 !important;
    filter: none !important;
    border: none !important;
    border-bottom: 2.5px solid transparent !important;
    border-radius: 0 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    font-family: 'Cairo', sans-serif !important;
    transition: background .15s, color .15s, border-color .15s !important;
    padding: 8px 16px !important;
}

    .m-tabs-line .nav-link:hover,
    .m-tabs-line .m-tabs__link:hover {
        color: #5b4fcf !important;
        background: #f0eeff !important;
        border-bottom-color: transparent !important;
    }

    .m-tabs-line .nav-link.active,
    .m-tabs-line .m-tabs__link.active {
        color: #5b4fcf !important;
        background: #f0eeff !important;
        border-bottom: 2.5px solid #5b4fcf !important;
        font-weight: 700 !important;
    }

    .m-tabs-line .nav-link > i,
    .m-tabs-line .m-tabs__link > i {
        color: #7c6ff7 !important;
        margin-left: 5px !important;
    }

    .m-tabs-line .nav-link.active > i,
    .m-tabs-line .m-tabs__link.active > i {
        color: #5b4fcf !important;
    }

/* portlet brand head — white background so tabs are readable */
.m-portlet--brand.m-portlet--head-solid-bg .m-portlet__head {
    background: #fff !important;
    border-bottom: 1.5px solid #eaebf5 !important;
}

.m-portlet--brand.m-portlet--head-solid-bg .m-portlet__head-text {
    color: #1a1535 !important;
}

.m-portlet--brand.m-portlet--head-solid-bg .m-portlet__head-icon i {
    color: #5b4fcf !important;
}
/* =========================================================
   SUBHEADER — purple tinted instead of flat gray
   ========================================================= */
.m-subheader {
    background: linear-gradient(135deg, #f8f7ff 0%, #f0eeff 100%) !important;
    border-bottom: 1.5px solid #e4dffa !important;
    padding: 10px 28px !important;
}

    .m-subheader .m-subheader__title {
        color: #1a1535 !important;
        font-family: 'Cairo', sans-serif !important;
        font-weight: 700 !important;
        font-size: 1rem !important;
    }

    .m-subheader .m-subheader__breadcrumbs .m-nav__link-text,
    .m-subheader .m-subheader__breadcrumbs .m-nav__separator {
        color: #7c6ff7 !important;
        font-family: 'Cairo', sans-serif !important;
        font-size: .82rem !important;
    }

/* =========================================================
   OUTLINE BUTTONS — brand purple instead of gray
   (covers جديد / بحث / تصدير / استيراد buttons)
   ========================================================= */
.btn-outline-secondary,
.btn-outline-secondary:not(:disabled):not(.disabled) {
    color: #5b4fcf !important;
    border-color: #c4bef5 !important;
    background: #fff !important;
    font-family: 'Cairo', sans-serif !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    transition: all .15s ease !important;
}

    .btn-outline-secondary:hover,
    .btn-outline-secondary:focus {
        color: #fff !important;
        background: #5b4fcf !important;
        border-color: #5b4fcf !important;
        box-shadow: 0 4px 12px rgba(91,79,207,.25) !important;
        transform: translateY(-1px) !important;
    }

    /* Pill variant (m-btn--pill) */
    .btn-outline-secondary.m-btn--pill,
    .btn-outline-secondary.m-btn--pill:not(:disabled):not(.disabled) {
        border-radius: 50px !important;
    }

/* =========================================================
   PORTLET HEAD TOOLS — pill buttons
   ========================================================= */
.m-portlet .m-portlet__head .m-portlet__head-tools .btn-outline-secondary {
    color: #5b4fcf !important;
    border-color: #d4cff5 !important;
    background: #f8f7ff !important;
    font-size: .82rem !important;
    padding: .3rem .9rem !important;
}

    .m-portlet .m-portlet__head .m-portlet__head-tools .btn-outline-secondary:hover {
        color: #fff !important;
        background: #5b4fcf !important;
        border-color: #5b4fcf !important;
    }

/* =========================================================
   DATATABLE TOOLBAR — entries / search strip
   ========================================================= */
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    color: #4e4a72 !important;
    font-family: 'Cairo', sans-serif !important;
    font-size: .82rem !important;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border: 1.5px solid #d4d0f0 !important;
    border-radius: 8px !important;
    padding: .25rem .55rem !important;
    font-family: 'Cairo', sans-serif !important;
    color: #1a1535 !important;
    background: #fff !important;
    transition: border-color .15s, box-shadow .15s !important;
}

    .dataTables_wrapper .dataTables_length select:focus,
    .dataTables_wrapper .dataTables_filter input:focus {
        border-color: #a89ef9 !important;
        box-shadow: 0 0 0 3px rgba(91,79,207,.1) !important;
        outline: none !important;
    }

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 7px !important;
    font-family: 'Cairo', sans-serif !important;
    font-size: .82rem !important;
    border: 1.5px solid #e4dffa !important;
    color: #4e4a72 !important;
    padding: .28rem .65rem !important;
    margin: 0 2px !important;
    transition: all .15s !important;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background: #f0eeff !important;
        border-color: #a89ef9 !important;
        color: #5b4fcf !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.current,
    .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
        background: #5b4fcf !important;
        border-color: #5b4fcf !important;
        color: #fff !important;
        box-shadow: 0 3px 10px rgba(91,79,207,.25) !important;
    }

/* =========================================================
   SMALLFY — override with proper density + purple
   ========================================================= */
.form-control {
    height: calc(2.2rem + 2px) !important;
    padding: .35rem .55rem !important;
    border-color: #c4bef5 !important;
    border-radius: 8px !important;
}

.m-portlet .m-portlet__head {
    height: 52px !important;
}

.m-form .m-form__actions {
    padding: 14px;
}

.m-portlet {
    margin-bottom: 1.2rem;
}

    .m-portlet .m-portlet__body {
        padding: 1.2rem 1.4rem !important;
    }

.m-invoice-2 .m-invoice__wrapper .m-invoice__footer {
    padding-bottom: 20px;
}

.dataTables_length select {
    padding: .28rem 1.5rem .28rem .55rem !important;
}

/* disabled select2 */
.select2-container--default.select2-container--disabled .select2-selection--multiple,
.select2-container--default.select2-container--disabled .select2-selection--single {
    border-color: #eaebf5 !important;
    background: #f9f8ff !important;
}

/* table row and column density */
.table .row label {
    font-size: .8rem;
    margin-bottom: 0;
}

.table .row div {
    padding-left: 4px;
    padding-right: 4px;
}