/* =================================================================
   PAL INVENTORY — comfort.css  v2
   Aggressive eye-comfort layer.
   Must be LAST in both bundles in BundleConfig.cs
   ================================================================= */

/* =================================================================
   PALETTE
   --bg-page   : warm off-white page background
   --bg-card   : card/portlet surface
   --bg-input  : unfocused input
   --bg-stripe : table even-row tint
   --border    : soft purple-tinted border
   ================================================================= */
:root {
    --bg-page: #f6f5fc; /* was #f0eff9 — lighter */
    --bg-card: #fcfbff; /* was #f9f8fe — near white */
    --bg-input: #f7f6fd; /* was #f3f2fb — lighter */
    --bg-stripe: rgba(91,79,207,.016); /* was .028 — subtler */
    --border-c: #e8e5f5; /* was #ddd9f5 — softer */
}

/* =================================================================
   1. PAGE & BODY BACKGROUND
   ================================================================= */
html, body,
body.m-page--fluid,
body.m-page--fluid.m--skin-,
body.m-content--skin-light2 {
    background-color: var(--bg-page) !important;
}

.m-grid.m-grid--hor.m-grid--root.m-page,
.m-grid__item.m-grid__item--fluid.m-grid.m-grid--ver-desktop.m-grid--desktop.m-body,
.m-grid__item.m-grid__item--fluid.m-wrapper,
.m-content,
#content_body {
    background-color: var(--bg-page) !important;
}

/* =================================================================
   2. PORTLET / CARD
   ================================================================= */
.m-portlet,
.m-portlet .m-portlet__body,
.m-portlet .m-portlet__body > div,
.panel,
.card,
.card-body {
    background-color: var(--bg-card) !important;
}

    .m-portlet .m-portlet__head {
        background: linear-gradient(135deg, #ece9fc 0%, #e6e2f9 100%) !important;
        border-bottom: 1.5px solid var(--border-c) !important;
    }

.m-portlet {
    border-color: var(--border-c) !important;
    box-shadow: 0 1px 10px rgba(91,79,207,.07) !important;
}

.m-portlet__foot {
    background-color: #eeedf8 !important;
    border-top-color: var(--border-c) !important;
}

/* =================================================================
   3. INPUTS, SELECTS, TEXTAREAS
   ================================================================= */
.form-control,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
textarea,
select {
    background-color: var(--bg-input) !important;
    border-color: #cdc9ec !important;
    color: #1a1535 !important;
}

    .form-control:focus,
    input[type="text"]:focus,
    input[type="number"]:focus,
    textarea:focus,
    select:focus {
        background-color: #ffffff !important;
        border-color: #a89ef9 !important;
        box-shadow: 0 0 0 3px rgba(91,79,207,.1) !important;
    }

    .form-control[readonly],
    .form-control[disabled] {
        background-color: #eceaf7 !important;
        border-color: #ddd9f5 !important;
        color: #9b96bf !important;
    }

/* select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color: var(--bg-input) !important;
    border-color: #cdc9ec !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    background-color: #fff !important;
    border-color: #a89ef9 !important;
}

.select2-dropdown {
    background-color: var(--bg-card) !important;
    border-color: var(--border-c) !important;
}

.select2-results__option {
    background-color: transparent !important;
}

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

/* =================================================================
   INPUT GROUP — unified shell, perfectly centred addons & checkboxes
   ================================================================= */

/* 1. Shell — owns the border & radius, children are borderless */
.input-group {
    display: flex !important;
    align-items: stretch !important; /* all children same height */
    flex-wrap: nowrap !important;
    height: 36px !important; /* single source of truth for height */
    border: 1.5px solid #cdc9ec !important;
    border-radius: 9px !important;
    overflow: visible !important;
    background: #f9f8fd !important;
    box-shadow: none !important;
    transition: border-color .15s, box-shadow .15s !important;
}

    .input-group:focus-within {
        border-color: #a89ef9 !important;
        box-shadow: 0 0 0 3px rgba(91,79,207,.1) !important;
        background: #ffffff !important;
    }

    /* 2. Input inside group — fills remaining width, no own border */
    .input-group .form-control,
    .input-group > .form-control {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        height: 100% !important; /* fills the 36px shell */
        padding: 0 10px !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        outline: none !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        color: #1a1535 !important;
        font-family: 'Cairo', sans-serif !important;
        line-height: 36px !important;
    }

        .input-group .form-control:focus,
        .input-group > .form-control:focus {
            border: none !important;
            box-shadow: none !important;
            background: transparent !important;
        }

    /* 3. Addon wrapper — stretch fills height, children centred */
    .input-group .input-group-prepend,
    .input-group .input-group-append {
        display: flex !important;
        align-items: stretch !important;
        height: 100% !important;
    }

/* 4. input-group-text (%, text labels, icon spans) */
.input-group-text,
.input-group-prepend .input-group-text,
.input-group-append .input-group-text {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    min-width: 36px !important;
    padding: 0 10px !important;
    background-color: #edeafc !important;
    border: none !important;
    border-radius: 0 !important;
    color: #5b4fcf !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    font-family: 'Cairo', sans-serif !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    transition: background .15s, border-color .15s !important;
    /* internal separator */
    border-left: 1.5px solid #cdc9ec !important;
}
/* RTL: prepend sits on the right, separator faces inward */
.input-group-prepend .input-group-text {
    border-left: none !important;
    border-right: 1.5px solid #cdc9ec !important;
}

.input-group:focus-within .input-group-text {
    background-color: #e6e2f9 !important;
    border-color: #a89ef9 !important;
    color: #4a3fb8 !important;
}

/* 5. m-checkbox inside input-group-text */
.input-group-text .m-checkbox,
.input-group-prepend .input-group-text .m-checkbox,
.input-group-append .input-group-text .m-checkbox {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
}
    /* the visual box */
    .input-group-text .m-checkbox > span,
    .input-group-prepend .input-group-text .m-checkbox > span,
    .input-group-append .input-group-text .m-checkbox > span {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 16px !important;
        height: 16px !important;
        border: 1.5px solid #a89ef9 !important;
        border-radius: 5px !important;
        background: #fff !important;
        flex-shrink: 0 !important;
        top: 0 !important;
    }
    /* checked */
    .input-group-text .m-checkbox input:checked ~ span,
    .input-group-prepend .input-group-text .m-checkbox input:checked ~ span,
    .input-group-append .input-group-text .m-checkbox input:checked ~ span {
        background: #5b4fcf !important;
        border-color: #5b4fcf !important;
    }

        .input-group-text .m-checkbox input:checked ~ span::after,
        .input-group-prepend .input-group-text .m-checkbox input:checked ~ span::after,
        .input-group-append .input-group-text .m-checkbox input:checked ~ span::after {
            border-color: #fff !important;
        }

/* 6. Buttons inside group */
.input-group .input-group-append .btn,
.input-group .input-group-prepend .btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    height: 100% !important;
    padding: 0 14px !important;
    border: none !important;
    border-left: 1.5px solid #cdc9ec !important;
    border-radius: 0 !important;
    font-size: 12.5px !important;
    font-family: 'Cairo', sans-serif !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    transition: background .15s !important;
}

.input-group .input-group-append .btn-brand {
    background: #5b4fcf !important;
    color: #fff !important;
    border-left-color: #5b4fcf !important;
}

    .input-group .input-group-append .btn-brand:hover {
        background: #4a3fb8 !important;
    }

.input-group .input-group-append .btn-info {
    background: #eef5ff !important;
    color: #185fa5 !important;
}

.input-group .input-group-append .btn-warning {
    background: #fff8e8 !important;
    color: #854f0b !important;
}

.input-group .input-group-append .btn-success {
    background: #eef7e2 !important;
    color: #3b6d11 !important;
}

.input-group .input-group-append .btn-danger {
    background: #fef2f2 !important;
    color: #dc2626 !important;
}

/* 7. Kill Bootstrap first/last-child radius overrides */
.input-group > :first-child,
.input-group > :last-child,
.input-group .form-control:first-child,
.input-group .form-control:last-child,
.input-group .input-group-prepend:first-child > .btn,
.input-group .input-group-prepend:first-child > .input-group-text,
.input-group .input-group-append:last-child > .btn,
.input-group .input-group-append:last-child > .input-group-text {
    border-radius: 0 !important;
}

/* =================================================================
   4. TABLES
   ================================================================= */
/* table container / wrapper */
.dataTables_wrapper,
.m-datatable,
.table-responsive {
    background-color: var(--bg-card) !important;
    border-radius: 10px;
    overflow: hidden;
}

/* table itself — transparent so bg-card shows through */
.table,
table.dataTable {
    background-color: transparent !important;
}

    /* header row */
    .table thead th,
    .table > thead > tr > th,
    table.dataTable thead th {
        background: linear-gradient(135deg, #edeafc 0%, #e7e3fa 100%) !important;
        color: #4e4a72 !important;
        border-bottom: 2px solid #d4cff5 !important;
    }

    /* body rows */
    .table > tbody > tr > td,
    .table > tbody > tr > th,
    table.dataTable tbody td {
        background-color: var(--bg-card) !important;
        border-bottom-color: #eae8f7 !important;
    }

    /* zebra */
    .table > tbody > tr:nth-child(even) > td,
    table.dataTable tbody tr.even td {
        background-color: #f0eefb !important;
    }

    .table > tbody > tr:nth-child(odd) > td,
    table.dataTable tbody tr.odd td {
        background-color: var(--bg-card) !important;
    }

    /* hover */
    .table > tbody > tr:hover > td,
    table.dataTable tbody tr:hover td {
        background-color: #e8e5f7 !important;
    }

    /* selected */
    table.dataTable tbody > tr.selected td {
        background-color: #ddd9f5 !important;
        color: #3c3489 !important;
    }

    /* foot */
    .table > tfoot > tr > th,
    .table > tfoot > tr > td {
        background-color: #eceaf7 !important;
        border-top-color: var(--border-c) !important;
    }

/* DataTable pager */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    background-color: var(--bg-input) !important;
    border-color: #cdc9ec !important;
    color: #4e4a72 !important;
}

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

    .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        background: #5b4fcf !important;
        border-color: #5b4fcf !important;
        color: #fff !important;
    }

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background-color: var(--bg-input) !important;
    border-color: #cdc9ec !important;
}

/* =================================================================
   5. MODALS
   ================================================================= */
.modal-content {
    background-color: var(--bg-card) !important;
    border-color: var(--border-c) !important;
}

.modal-header {
    background: linear-gradient(135deg, #ece9fc 0%, #e6e2f9 100%) !important;
    border-bottom-color: var(--border-c) !important;
}

.modal-body {
    background-color: var(--bg-card) !important;
}

.modal-footer {
    background-color: #eceaf7 !important;
    border-top-color: var(--border-c) !important;
}

/* =================================================================
   6. SUBHEADER / BREADCRUMB BAR
   ================================================================= */
.m-subheader {
    background: linear-gradient(135deg, #eceaf7 0%, #e6e2f9 100%) !important;
    border-bottom: 1.5px solid var(--border-c) !important;
}

/* =================================================================
   7. TABS
   ================================================================= */
.nav-tabs, .m-tabs-line {
    border-bottom-color: var(--border-c) !important;
}

    .nav-tabs .nav-link,
    .m-tabs-line .nav-link,
    .m-tabs-line .m-tabs__link {
        background-color: transparent !important;
        color: #4e4a72 !important;
    }

        .nav-tabs .nav-link.active,
        .m-tabs-line .nav-link.active,
        .m-tabs-line .m-tabs__link.active {
            background-color: #ece9fc !important;
            color: #5b4fcf !important;
            border-color: var(--border-c) var(--border-c) var(--bg-card) !important;
        }

        .nav-tabs .nav-link:hover,
        .m-tabs-line .nav-link:hover {
            background-color: #f0eeff !important;
        }

/* =================================================================
   8. ACCORDION
   ================================================================= */
.m-accordion .m-accordion__item {
    background-color: var(--bg-card) !important;
    border-color: var(--border-c) !important;
}

    .m-accordion .m-accordion__item .m-accordion__item-head {
        background: linear-gradient(135deg, #edeafc 0%, #e7e3fa 100%) !important;
    }

    .m-accordion .m-accordion__item .m-accordion__item-body {
        background-color: var(--bg-card) !important;
    }

/* =================================================================
   9. DROPDOWNS
   ================================================================= */
.dropdown-menu {
    background-color: var(--bg-card) !important;
    border-color: var(--border-c) !important;
    box-shadow: 0 8px 32px rgba(91,79,207,.1) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #ece9fc !important;
    color: #5b4fcf !important;
}

.dropdown-item {
    color: #1a1535 !important;
}

/* =================================================================
   10. CHECKBOXES / RADIO backgrounds in tables
   ================================================================= */
.m-checkbox > span,
.m-radio > span {
    background-color: var(--bg-input) !important;
    border-color: #cdc9ec !important;
}

/* =================================================================
   11. PAGE LOADER
   ================================================================= */
.m-page-loader.m-page-loader--base {
    background: rgba(240,239,249,.94) !important;
}

.m-page-loader .m-blockui {
    background: var(--bg-card) !important;
    border-color: var(--border-c) !important;
}

/* =================================================================
   12. ALERTS & TOASTS
   ================================================================= */
.m-alert,
.alert {
    background-color: #edeafc !important;
    border-color: var(--border-c) !important;
}

.alert-success {
    background-color: #e8f8f0 !important;
    border-color: #b2dfc9 !important;
}

.alert-danger {
    background-color: #fdf0f0 !important;
    border-color: #f5c6c6 !important;
}

.alert-warning {
    background-color: #fdf6e8 !important;
    border-color: #f5dea0 !important;
}

.alert-info {
    background-color: #edeafc !important;
    border-color: #c4beff !important;
}

/* =================================================================
   13. TREE / JSTREE
   ================================================================= */
.jstree-default .jstree-wholerow-clicked {
    background: #e6e2f9 !important;
}

.jstree-default .jstree-wholerow-hovered {
    background: #edeafc !important;
}

/* =================================================================
   14. SCROLLBAR
   ================================================================= */
* {
    scrollbar-width: thin;
    scrollbar-color: #c9c4ee transparent;
}

    *::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }

    *::-webkit-scrollbar-track {
        background: transparent;
    }

    *::-webkit-scrollbar-thumb {
        background: #c9c4ee;
        border-radius: 4px;
    }

        *::-webkit-scrollbar-thumb:hover {
            background: #a89ef9;
        }

/* =================================================================
   15. INVOICE
   ================================================================= */
.m-invoice-2 .m-invoice__wrapper .m-invoice__footer {
    background-color: #eceaf7 !important;
    border-top-color: var(--border-c) !important;
}

/* =================================================================
   16. MISC WHITE SURFACES
   ================================================================= */
/* any raw white div that sits directly in content */
.m-content > div,
#content_body > div {
    background-color: transparent;
}

/* fix any inline style="background:#fff" or background-color:white on rows */
.table tr[style*="background:#fff"],
.table tr[style*="background-color:#fff"],
.table tr[style*="background-color: #fff"],
.table tr[style*="background-color:white"],
.table tr[style*="background: white"] {
    background-color: var(--bg-card) !important;
}

/* =================================================================
   PORTLET BODY — override sidebar.css and pal_style.css #fff wins
   Must stay at the bottom of comfort.css
   ================================================================= */
.m-portlet .m-portlet__body,
.m-portlet .m-portlet__body > div,
.m-portlet .m-portlet__body > .row,
.m-portlet .m-portlet__body > form,
.m-portlet .m-portlet__body > .m-form {
    background-color: var(--bg-card) !important;
    background: var(--bg-card) !important;
}

/* portlet foot */
.m-portlet .m-portlet__foot,
.m-portlet__foot {
    background-color: #eeedf8 !important;
    background: #eeedf8 !important;
}

/* =================================================================
   DATATABLES SEARCH RE-RENDER FIX — targets exact style.bundle.css
   selectors that win after search re-render
   ================================================================= */

/* The exact selectors from style.bundle.css that cause the problem */
table.table-bordered.dataTable tbody th,
table.table-bordered.dataTable tbody td,
table.table-bordered.dataTable tbody tr td,
table.table-bordered.dataTable tbody tr th,
table.dataTable.table-striped tbody th,
table.dataTable.table-striped tbody td,
.table.table-striped tbody th,
.table.table-striped tbody td {
    background-color: var(--bg-card) !important;
    color: #1a1535 !important;
}

/* Odd rows */
table.table-bordered.dataTable tr.odd td,
table.dataTable tbody tr.odd td,
table.dataTable tbody tr:nth-child(odd) td,
.table tbody tr:nth-child(odd) td {
    background-color: var(--bg-card) !important;
    color: #1a1535 !important;
}

/* Even rows */
table.table-bordered.dataTable tr.even td,
table.dataTable tbody tr.even td,
table.dataTable tbody tr:nth-child(even) td,
.table tbody tr:nth-child(even) td {
    background-color: #f0eefb !important;
    color: #1a1535 !important;
}

/* Hover */
table.table-bordered.dataTable tbody tr:hover td,
table.dataTable tbody tr:hover td,
.table tbody tr:hover td {
    background-color: #e8e5f7 !important;
    color: #1a1535 !important;
}

/* Kill inline styles on tr set by DataTables JS */
.table tbody tr[style],
table.dataTable tbody tr[style] {
    background-color: transparent !important;
}

/* =================================================================
   INPUT GROUP + SELECT2 — fix duplicate/double select appearance
   When Select2 initializes inside an .input-group it creates a
   .select2-container next to the hidden original <select>.
   The original gets select2-hidden-accessible but still takes space
   in the flex layout unless explicitly removed from flow.
   ================================================================= */

/* 1. Hide the original select from flex layout once Select2 takes over */
.input-group .select2-hidden-accessible {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    display: block !important; /* keep in DOM for Select2 JS */
    flex: 0 0 0 !important;
    min-width: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 2. Select2 container fills the remaining space in the group */
.input-group .select2-container {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 100% !important;
    align-self: stretch !important;
}

/* 3. Select2 selection box matches the group height, no own border */
.input-group .select2-container--default .select2-selection--single,
.input-group .select2-container--default .select2-selection--multiple {
    height: 100% !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
}

    /* 4. Rendered text inside the selection */
    .input-group .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 1 !important;
        padding: 0 10px !important;
        color: #1a1535 !important;
        font-size: 13px !important;
        font-family: 'Cairo', sans-serif !important;
        width: 100% !important;
    }

   
/* 6. Focus ring on the group shell when Select2 is open */
.input-group:has(.select2-container--open) {
    border-color: #a89ef9 !important;
    box-shadow: 0 0 0 3px rgba(91,79,207,.1) !important;
    background: #ffffff !important;
}

/* =================================================================
   SELECT2 INLINE WIDTH OVERRIDE
   Select2 sometimes sets style="width:20px" on the container
   when it measures a hidden select. Force it to fill the parent.
   ================================================================= */
.input-group .select2-container,
.input-group span.select2 {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
}

/* Also fix when select2 is direct child of a col (no input-group) */
.col-md-4 > .select2-container,
.col-md-4 > span.select2,
.col-lg-4 > .select2-container,
.col-lg-4 > span.select2,
.col-md-6 > .select2-container,
.col-md-6 > span.select2,
[class*="col-"] > .select2-container,
[class*="col-"] > span.select2 {
    width: 100% !important;
}

/* =================================================================
   SELECT2 RENDERED TEXT — nudge right for RTL alignment
   ================================================================= */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-right: 12px !important;
    padding-left: 30px !important;
}

/* =================================================================
   SELECT2 — BASELINE STYLING (applies everywhere, not just .input-group)
   ================================================================= */
.select2-container--default .select2-selection--single {
    height: 36px !important;
    border: 1.5px solid #cdc9ec !important;
    border-radius: 9px !important;
    background-color: var(--bg-input) !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: none !important;
    transition: border-color .15s, box-shadow .15s !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #a89ef9 !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 3px rgba(91,79,207,.1) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1 !important;
    color: #1a1535 !important;
    font-size: 13px !important;
    font-family: 'Cairo', sans-serif !important;
    width: 100% !important;
}


/* =================================================================
   SELECT2 ARROW — final override, works standalone AND inside .input-group
   ================================================================= */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    position: static !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    border-style: solid !important;
    border-width: 5px 4px 0 4px !important;
    border-color: #9b96bf transparent transparent transparent !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    position: absolute !important;
    top: 0 !important;
    left: 8px !important;
    right: auto !important;
    height: 100% !important;
    width: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: none !important;
}

/* RTL: Select2 selection needs relative positioning so the absolute arrow has a reference box */
.select2-container--default .select2-selection--single {
    position: relative !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #9b96bf !important;
}

.input-group .dropdown-menu {
    z-index: 1050;
}