/* ==========================================================================
   UPDATED PAGE CSS (Extracted from cssHeader)
   ========================================================================== */

/* --- General Overrides --- */
kbd {
    color: #fff;
    background-color: #556;
}

.breadcrumb-item a {
    color: var(--theme-default);
}

svg.feather,
.feather {
    flex-shrink: 0;
}

/* --- DataTables Pagination Controls Alignment --- */
div.dataTables_wrapper div.dataTables_paginate {
    display: inline-flex !important;
    align-items: center !important;
    padding: 2px !important;
}

div.dataTables_wrapper div.dataTables_paginate span {
    display: inline-flex !important;
    align-items: center !important;
}

div.dataTables_wrapper div.dataTables_paginate .paginate_button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 11px !important;
    line-height: 1 !important;
    padding: 0 6px !important;
    border-radius: 3px !important;
    min-width: 24px !important;
    height: 24px !important;
    margin: 0 1px !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

div.dataTables_wrapper div.dataTables_paginate .paginate_button.current,
div.dataTables_wrapper div.dataTables_paginate .paginate_button.current:hover {
    background: #0055a5 !important;
    color: #fff !important;
    border: 1px solid #00408a !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Hide Previous/Next text on mobile — icon is shown via ::before in style.css */
@media (max-width: 575.98px) {
    div.dataTables_wrapper div.dataTables_paginate .paginate_button.previous,
    div.dataTables_wrapper div.dataTables_paginate .paginate_button.next {
        font-size: 0 !important;
        padding: 0 6px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    div.dataTables_wrapper div.dataTables_paginate .paginate_button.previous:before,
    div.dataTables_wrapper div.dataTables_paginate .paginate_button.next:before {
        line-height: 1 !important;
    }
}

/* --- DataTables Body Cells (Minimal / Near-Zero Padding) --- */
table.dataTable tbody td,
table.dataTable tbody tr > td,
div.dataTables_wrapper table tbody td,
div.dataTables_wrapper table.table-lg tbody td,
div.dataTables_wrapper table.dataTable tbody td {
    font-weight: 600 !important;
    padding: 0.5px 6px !important;
    vertical-align: middle !important;
    font-size: 12.5px !important;
}

/* --- DataTables Row Hover Effect: Darker Background with Brighter Text --- */
table.dataTable tbody tr:hover,
table.dataTable tbody tr:hover > td,
table.dataTable tbody tr:hover > th,
div.dataTables_wrapper table tbody tr:hover,
div.dataTables_wrapper table tbody tr:hover > td,
div.dataTables_wrapper table.dataTable tbody tr:hover,
div.dataTables_wrapper table.dataTable tbody tr:hover > td {
    background-color: #101d33 !important;
    color: #ffffff !important;
    transition: background-color 0.15s ease, color 0.15s ease;
    /* border-color: #ffffff !important; */
}

table.dataTable tbody tr:hover > td a:not(.btn),
div.dataTables_wrapper table tbody tr:hover > td a:not(.btn) {
    color: #38bdf8 !important;
}

/* --- Table Badges & Action Buttons Uniform Sizing --- */
div.dataTables_wrapper table tbody td .btn,
div.dataTables_wrapper table.dataTable tbody td .btn,
table.dataTable tbody td .btn,
.table tbody td .btn {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    padding: 0.5px 6px !important;       
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;    
    vertical-align: middle !important;
    border-radius: 0px !important;
    font-weight: 600;    
}

div.dataTables_wrapper table tbody td .badge,
div.dataTables_wrapper table.dataTable tbody td .badge,
table.dataTable tbody td .badge,
.table tbody td .badge {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    padding: 0.5px 6px !important;       
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;    
    vertical-align: middle !important;    
    border-radius: 0px !important;
    font-weight: 600;
}

/* --- Item Stock Page: Increased Width of First Name Column --- */
#item-stock-table th:first-child,
#item-stock-table td:first-child,
table#item-stock-table th:nth-child(1),
table#item-stock-table td:nth-child(1) {
    min-width: 150px !important;
    width: 150px !important;
    white-space: normal !important;
}

/* --- Darker Table Borders for DataTables & General Tables --- */
:root{
    --datatable-border-width: 1.2px;
    --datatable-border-color: #292424;
    --datatable-border-style: solid;

    /* --- Entry Table Active & Hover Row Styling Variables --- */
    --entry-row-active-bg: #101d33;               /* Dark active row background (matches datatable dark hover theme) */
    --entry-row-active-text: #ffffff;             /* Light white text for high contrast */
    --entry-row-active-border: #1e3a5f;           /* Darker slate border for active row cells */
    --entry-row-hover-bg: #101d33;                /* Dark hover row background (matches datatable row hover) */
    --entry-row-hover-text: #ffffff;              /* Light white text on hover */

    /* Normal Entry Table Input Borders */
    --entry-input-border-color: #94a3b8;          /* Visible clean border for inputs/selects on normal rows */

    /* Active & Hover Row Unfocused Inputs & Selects */
    --entry-row-input-bg: #1a2f4c;                /* Harmonized dark slate background for inputs in active/hover row */
    --entry-row-input-text: #ffffff;              /* Crisp light white text */
    --entry-row-input-border: #4f739c;            /* Clearly defined input & select borders on dark active/hover row */
    --entry-row-placeholder-color: #cbd5e1;       /* Light placeholder text for inputs/selects in active/hover row */

    /* Active Row Focused Input or Select Box */
    --entry-row-focus-bg: #ffffff;                /* Pure white when editing so focused field stands out */
    --entry-row-focus-text: #000000;              /* Sharp black text on focus */
    --entry-row-focus-border: #38bdf8;            /* Bright cyan/sky-blue focus ring */
    --entry-row-focus-shadow: 0 0 0 1.5px rgba(56, 189, 248, 0.5); /* Crisp focus shadow */

    /* Margin Colors in Entry Tables (Normal vs Active/Hover) */
    --entry-margin-label-color: #64748b;          /* Dark slate label on normal light row */
    --entry-margin-amount-color: #0284c7;         /* Vibrant blue value on normal light row */
    --entry-row-active-margin-label: #cbd5e1;     /* Light slate label on dark active/hover row */
    --entry-row-active-margin-amount: #38bdf8;    /* Bright cyan value on dark active/hover row */

    /* --- Universal Form Input & Select Styling Variables (Forms, Modals & Everywhere) --- */
    --form-input-padding-y: 2.5px;
    --form-input-padding-x: 6px;
    --form-input-height: 27px;
    --form-input-font-size: 12px;
    --form-input-border-color: #94a3b8;
    --form-input-border-radius: 2px;
    --form-input-bg: #ffffff;
    --form-input-text: #1e293b;

    /* Focus / Highlight Color when Selected or Focused */
    --form-input-focus-bg: #f0f7ff;               /* Light highlighted background tint when focused */
    --form-input-focus-border: #0284c7;           /* Vibrant highlight border color */
    --form-input-focus-text: #0f172a;             /* Crisp focus text */
    --form-input-focus-shadow: 0 0 0 2px rgba(2, 132, 199, 0.25); /* Focus highlight glow */

    /* --- Sidebar & Navigation Styling Variables --- */
    --sidebar-link-font-size: 12px;
    --sidebar-link-font-weight: 500;
    --sidebar-link-color: #475569;
    --sidebar-link-bg: transparent;
    --sidebar-link-border: transparent;
    --sidebar-link-border-radius: 4px;
    --sidebar-link-padding-y: 4px;
    --sidebar-link-padding-x: 9px;

    /* Top-level Navigation Links - Hover State */
    --sidebar-link-hover-bg: #f0f7ff;             /* Crisp light ice-blue background */
    --sidebar-link-hover-color: #4997be;          /* Vibrant ocean blue text */
    --sidebar-link-hover-border: #bae6fd;         /* Refined subtle pill border */
    --sidebar-link-hover-icon-color: #0284c7;     /* Matching icon color */

    /* Top-level Navigation Links - Active State (Current Page / Active Menu) */
    --sidebar-link-active-bg: #0d508b;            /* Rich deep sapphire blue pill */
    --sidebar-link-active-color: #ffffff;         /* Pure crisp white text */
    --sidebar-link-active-border: #3571a7;        /* Subtle dark boundary border */
    --sidebar-link-active-icon-color: #ffffff;    /* Pure crisp white icon */
    --sidebar-link-active-shadow: 0 2px 6px rgba(15, 76, 129, 0.35); /* Soft elevated shadow */
    --sidebar-link-active-hover-bg: #0b3d68;      /* Deeper navy when active link is hovered */

    /* Submenu Dropdown Container */
    --sidebar-dropdown-bg: #ffffff;
    --sidebar-dropdown-border: #e2e8f0;
    --sidebar-dropdown-shadow: 0 6px 18px rgba(15, 23, 42, 0.10);

    /* Submenu Links (Normal, Hover & Active) */
    --sidebar-submenu-link-color: #334155;
    --sidebar-submenu-hover-bg: #f0f7ff;
    --sidebar-submenu-hover-color: #0284c7;
    --sidebar-submenu-hover-border-left: #0284c7;
    --sidebar-submenu-active-bg: #e0f2fe;
    --sidebar-submenu-active-color: #075985;
    --sidebar-submenu-active-border-left: #0284c7;
}


table.dataTable,
table.dataTable.no-footer,
div.dataTables_wrapper table,
div.dataTables_wrapper table.dataTable,
.table,
.table-bordered {
    border-width: var(--datatable-border-width) !important;
    border-style: var(--datatable-border-style) !important;
    border-color: var(--datatable-border-color) !important;
    border-collapse: collapse !important;
    --bs-table-border-color: #1b1b1b !important;
}

table.dataTable th,
table.dataTable td,
table.dataTable tbody th,
table.dataTable tbody td,
div.dataTables_wrapper table th,
div.dataTables_wrapper table td,
div.dataTables_wrapper table tbody tr > td,
div.dataTables_wrapper table.dataTable tbody tr > td,
.table > :not(caption) > * > *,
.table th,
.table td,
.table-bordered th,
.table-bordered td,
.table-bordered > :not(caption) > * > * {
    border-width: var(--datatable-border-width) !important;
    border-style: var(--datatable-border-style) !important;
    border-color: var(--datatable-border-color) !important;
}

table.dataTable thead th,
div.dataTables_wrapper table thead th,
.table thead th {
    border-width: var(--datatable-border-width) !important;
    border-style: var(--datatable-border-style) !important;
    border-color: var(--datatable-border-color) !important;
    border-bottom: 2px solid #334155 !important;
}

/* Remove double outer right border on end column */
table.dataTable th:last-child,
table.dataTable td:last-child,
div.dataTables_wrapper table th:last-child,
div.dataTables_wrapper table td:last-child,
.table th:last-child,
.table td:last-child,
.table-bordered th:last-child,
.table-bordered td:last-child {
    border-right: none !important;
}

/* Ensure td or th with .d-flex maintains table-cell display so internal borders collapse properly */
table.dataTable td.d-flex,
table.dataTable th.d-flex,
div.dataTables_wrapper table td.d-flex,
div.dataTables_wrapper table th.d-flex,
.table td.d-flex,
.table th.d-flex {
    display: table-cell !important;
}

/* ==========================================================================
   UNIVERSAL FORM INPUT & SELECT BOX STYLING (Forms, Modals, Cards, Everywhere)
   ========================================================================== */
.form-control,
.form-select,
.modal .form-control,
.modal .form-select,
.card form .form-control,
.card form .form-select,
input.form-control,
select.form-control,
select.form-select {
    padding: var(--form-input-padding-y, 2.5px) var(--form-input-padding-x, 6px) !important;
    height: var(--form-input-height, 27px) !important;
    font-size: var(--form-input-font-size, 12px) !important;
    line-height: 1.35 !important;
    border: 1px solid var(--form-input-border-color, #94a3b8) !important;
    border-radius: var(--form-input-border-radius, 2px) !important;
    background-color: var(--form-input-bg, #ffffff) !important;
    color: var(--form-input-text, #1e293b) !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Adjust select box padding for right dropdown chevron */
.form-select,
select.form-control,
select.form-select {
    padding-right: 22px !important;
    background-position: right 6px center !important;
}

/* Textarea height exception */
textarea.form-control,
.modal textarea.form-control {
    height: auto !important;
    min-height: 52px !important;
    padding: 4px 6px !important;
}

/* Universal Select2 single-selection in forms & modals */
.select2-container .select2-selection--single,
.modal .select2-container .select2-selection--single,
form .select2-container .select2-selection--single {
    height: var(--form-input-height, 27px) !important;
    line-height: var(--form-input-height, 27px) !important;
    padding: 0 !important;
    border: 1px solid var(--form-input-border-color, #94a3b8) !important;
    border-radius: var(--form-input-border-radius, 2px) !important;
    background-color: var(--form-input-bg, #ffffff) !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.select2-container--default .select2-selection--single .select2-selection__rendered,
.modal .select2-container--default .select2-selection--single .select2-selection__rendered,
form .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(var(--form-input-height, 27px) - 2px) !important;
    padding-left: 6px !important;
    padding-right: 22px !important;
    font-size: var(--form-input-font-size, 12px) !important;
    color: var(--form-input-text, #1e293b) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow,
.modal .select2-container--default .select2-selection--single .select2-selection__arrow,
form .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(var(--form-input-height, 27px) - 2px) !important;
    width: 20px !important;
}

/* --- Highlighted State When Input or Select is Focused / Selected (Forms & Modals) --- */
.form-control:focus,
.form-select:focus,
input:focus:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="file"]),
select:focus,
textarea.form-control:focus,
.modal .form-control:focus,
.modal .form-select:focus,
.modal textarea:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.modal .select2-container--default.select2-container--focus .select2-selection--single,
.modal .select2-container--default.select2-container--open .select2-selection--single,
form .select2-container--default.select2-container--focus .select2-selection--single,
form .select2-container--default.select2-container--open .select2-selection--single {
    background-color: var(--form-input-focus-bg, #f0f7ff) !important;
    border-color: var(--form-input-focus-border, #0284c7) !important;
    color: var(--form-input-focus-text, #0f172a) !important;
    box-shadow: var(--form-input-focus-shadow, 0 0 0 2px rgba(2, 132, 199, 0.25)) !important;
    outline: none !important;
}

.select2-container--default.select2-container--focus .select2-selection--single .select2-selection__rendered,
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__rendered,
.modal .select2-container--default.select2-container--focus .select2-selection--single .select2-selection__rendered,
.modal .select2-container--default.select2-container--open .select2-selection--single .select2-selection__rendered,
form .select2-container--default.select2-container--focus .select2-selection--single .select2-selection__rendered,
form .select2-container--default.select2-container--open .select2-selection--single .select2-selection__rendered {
    color: var(--form-input-focus-text, #0f172a) !important;
}

/* --- Universal Border Classes (Screen & Print) --- */
body .border-black-all {
    border: 1px solid #000 !important;
}

body .border-black-top {
    border-top: 1px solid #000 !important;
}

body .border-black-bottom {
    border-bottom: 1px solid #000 !important;
}

body .border-black-left {
    border-left: 1px solid #000 !important;
}

body .border-black-right {
    border-right: 1px solid #000 !important;
}

@media print {
    /* Universally hide all page headers, sidebars, navigation, modals on print */
    .no-print,
    .no-print *,
    header,
    header.page-header,
    .page-header,
    aside,
    aside.page-sidebar,
    .page-sidebar,
    .page-sidebar *,
    .page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar,
    .page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar *,
    .sidebar-wrapper,
    #sidebar-menu,
    #sidebar-menu *,
    .sidebar-menu,
    .sidebar-menu *,
    .overlay,
    #updatePasswordModal,
    .modal,
    .modal-backdrop,
    .tap-top,
    .loader-wrapper,
    .page-title,
    .breadcrumb,
    .breadcrumb-item,
    #printButton,
    footer {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        width: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    body .border-black-all {
        border: 1px solid #000 !important;
    }

    body .border-black-top {
        border-top: 1px solid #000 !important;
    }

    body .border-black-bottom {
        border-bottom: 1px solid #000 !important;
    }

    body .border-black-left {
        border-left: 1px solid #000 !important;
    }

    body .border-black-right {
        border-right: 1px solid #000 !important;
    }

    body .border-black-all,
    body .border-black-top,
    body .border-black-bottom,
    body .border-black-left,
    body .border-black-right {
        border-color: #000 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .container > div {
        min-width: auto !important;
        width: 100% !important;
    }

    /* Universal Font Size Overrides for Print */
    .font-xs {
        font-size: 9.5px !important;
    }

    .font-sm {
        font-size: 10.5px !important;
    }

    .font-md {
        font-size: 12px !important;
    }

    .font-lg {
        font-size: 14px !important;
    }
}

/* --- Universal Font Size Classes --- */
.font-xs {
    font-size: 11px !important;
}

.font-sm {
    font-size: 13px !important;
}

.font-md {
    font-size: 15px !important;
}

.font-lg {
    font-size: 18px !important;
}

/* --- Table Helper: Inner Cell Borders + Top/Bottom Outlines --- */
.table-bordered-light {
    border-collapse: collapse !important;
    border-top: 1px solid #333 !important;
    border-bottom: 1px solid #333 !important;
    border-left: none !important;
    border-right: none !important;
}

.table-bordered-light th,
.table-bordered-light td {
    border: 1px solid #666 !important;
    padding: 2px 4px !important;
}

.table-bordered-light tr th:first-child,
.table-bordered-light tr td:first-child {
    border-left: none !important;
}

.table-bordered-light tr th:last-child,
.table-bordered-light tr td:last-child {
    border-right: none !important;
}

/* --- Horizontal Sidebar: Link & Submenu Sizing --- */
.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-link {
    padding-left: 8px !important;        
    padding-right: 8px !important;        
}

.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-list .sidebar-submenu {
    margin-top: -3px !important;
    top: calc(var(--ho-header-h, 44px) + var(--ho-sidebar-h, 34px)) !important;
}

/* ==========================================================================
   22. GENERALIZED PRODUCT ENTRY TABLES & REUSABLE MODULE SYSTEM
   Reusable classes for BT, Sales, Purchase & ANY Future Module:
   - Base Table: .product-entry-table, .entry-table (#addProductsTable, #editProductsTable)
   - 10-Col Variant: .table-10-col, .product-entry-table-10 (BT, Sales, Returns)
   - 12-Col Variant: .table-12-col, .product-entry-table-12 (Purchase, GRN)
   - Rows: tr.product-row, tr.entry-row
   - Active Highlight: tr.active-row
   - Semantic Columns: .col-item, .col-batch, .col-exp, .col-mrp, .col-rate,
     .col-pts, .col-ptr, .col-gst, .col-qty, .col-free, .col-discount, .col-action
   - Cell Value Formats: .input-qty, .input-free, .input-batch, .input-exp,
     .input-amount, .input-rate, .input-percentage
   - History Container: .entry-history-row, .entry-history-container, .entry-history-list
   ========================================================================== */

/* --- Table Container Scrollable & Sticky Container --- */
.table-wrapper {
    overflow-x: auto !important;
    overflow-y: auto !important;
    max-height: 420px !important;
    position: relative !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px !important;
    scrollbar-width: thin !important;
}

.table-wrapper::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
    display: block !important;
}

.table-wrapper::-webkit-scrollbar-thumb {
    background: #94a3b8 !important;
    border-radius: 4px !important;
}

.table-wrapper::-webkit-scrollbar-thumb:hover {
    background: #64748b !important;
}

.table-wrapper::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
}

/* --- Base Product Entry Table --- */
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table),
.product-entry-table,
.entry-table,
#addProductsTable,
#editProductsTable {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    table-layout: fixed !important;
    margin-bottom: 0 !important;
}

/* Module Table Min-Widths */
.table-sales,
#addSalesForm #addProductsTable,
#editSalesForm #editProductsTable {
    min-width: 880px !important;
}

.table-branch-transfer,
#addBranchTransferForm #addProductsTable,
#editBranchTransferForm #editProductsTable {
    min-width: 820px !important;
}

.table-purchase,
#addPurchaseForm #addProductsTable,
#editPurchaseForm #editProductsTable {
    min-width: 1000px !important;
}

.table-10-col,
.product-entry-table-10 {
    min-width: 720px !important;
}

.table-12-col,
.product-entry-table-12 {
    min-width: 820px !important;
}

/* --- Table Headers: Sticky with Proper Contrast Color & Word Wrap --- */
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) thead,
.product-entry-table thead,
.entry-table thead,
#addProductsTable thead,
#editProductsTable thead {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
}

table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) thead th,
.product-entry-table thead th,
.entry-table thead th,
#addProductsTable thead th,
#editProductsTable thead th,
.table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    padding: 6px 8px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px;
    vertical-align: middle !important;
    text-align: left !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.25 !important;
    background-color: #2b3548 !important;
    color: #ffffff !important;
    border-top: 1px solid #3c485d !important;
    border-bottom: 2px solid #3c485d !important;
    border-left: 1px solid #3c485d !important;
    border-right: 1px solid #3c485d !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12) !important;
    text-transform: uppercase !important;
}

.product-entry-table thead th.col-item,
.entry-table thead th.col-item {
    text-align: left !important;
    padding-left: 8px !important;
}

.product-entry-table thead th.col-index,
.entry-table thead th.col-index {
    text-align: center !important;
    padding: 6px 2px !important;
}

td.row-index {
    text-align: center !important;
    font-weight: 700 !important;
    font-size: 12px !important;
}

.product-total {
    text-align: right !important;
    background-color: #f8f9fa !important;
}

/* Added To Style Readonly Fields In focus Mode And Added To Resolve Enter => + Issue */
.product-total:focus,
.product-total:focus-visible,
input[readonly].product-total:focus,
input[readonly].product-total:focus-visible {
    background-color: #ffffff !important;
    border-color: var(--theme-default, #7366ff) !important;
    box-shadow: 0 0 0 0.25rem rgba(115, 102, 255, 0.35) !important;
    outline: none !important;
    cursor: default;
}

/* Focused styling ONLY for + and x action buttons */
.addProductRowIconBtn:focus,
.addProductRowIconBtn:focus-visible,
.removeProductRowBtn:focus,
.removeProductRowBtn:focus-visible {
    background-color: var(--theme-default, #7366ff) !important;
    border-color: var(--theme-default, #7366ff) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.25rem rgba(115, 102, 255, 0.45) !important;
    outline: 2px solid var(--theme-default, #7366ff) !important;
    outline-offset: 1px;
}

/* --- Table Data Cells & Inputs (Clean, Readable & Compact) --- */
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody td,
tr.product-row td,
tr.entry-row td,
.product-entry-table tbody td {
    padding: 0px 1.2px !important;
    vertical-align: middle !important;
    border: 1px solid #64748b !important;
}

table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody td .form-control,
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody td input:not([type="checkbox"]):not([type="radio"]):not(.btn),
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody td select,
tr.product-row td .form-control,
tr.entry-row td .form-control,
.product-entry-table tbody td .form-control,
.table-input {
    padding: 1px 3px !important;
    height: 24px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    border-radius: 0px !important;
    box-shadow: none !important;
    border: 1px solid var(--entry-input-border-color, #94a3b8) !important;
    width: 100% !important;
}

table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody td .form-control:focus,
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody td input:not([type="checkbox"]):not([type="radio"]):not(.btn):focus,
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody td select:focus,
tr.product-row td .form-control:focus,
tr.entry-row td .form-control:focus,
.product-entry-table tbody td .form-control:focus,
.entry-table tbody td .form-control:focus,
.table-input:focus {
    background-color: var(--entry-row-focus-bg, #ffffff) !important;
    color: var(--entry-row-focus-text, #000000) !important;
    border: 1px solid var(--entry-row-focus-border, #38bdf8) !important;
    box-shadow: var(--entry-row-focus-shadow, 0 0 0 1.5px rgba(56, 189, 248, 0.5)) !important;
    outline: none !important;
}

table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody td .select2-container--focus .select2-selection--single,
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody td .select2-container--open .select2-selection--single,
tr.product-row td .select2-container--focus .select2-selection--single,
tr.product-row td .select2-container--open .select2-selection--single,
tr.entry-row td .select2-container--focus .select2-selection--single,
tr.entry-row td .select2-container--open .select2-selection--single,
.product-entry-table td .select2-container--focus .select2-selection--single,
.product-entry-table td .select2-container--open .select2-selection--single,
.table-select2.select2-container--focus .select2-selection--single,
.table-select2.select2-container--open .select2-selection--single {
    background-color: var(--entry-row-focus-bg, #ffffff) !important;
    border: 1px solid var(--entry-row-focus-border, #38bdf8) !important;
    box-shadow: var(--entry-row-focus-shadow, 0 0 0 1.5px rgba(56, 189, 248, 0.5)) !important;
    outline: none !important;
}

table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody td .select2-container--focus .select2-selection--single .select2-selection__rendered,
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody td .select2-container--open .select2-selection--single .select2-selection__rendered,
tr.product-row td .select2-container--focus .select2-selection--single .select2-selection__rendered,
tr.product-row td .select2-container--open .select2-selection--single .select2-selection__rendered,
tr.entry-row td .select2-container--focus .select2-selection--single .select2-selection__rendered,
tr.entry-row td .select2-container--open .select2-selection--single .select2-selection__rendered,
.product-entry-table td .select2-container--focus .select2-selection--single .select2-selection__rendered,
.product-entry-table td .select2-container--open .select2-selection--single .select2-selection__rendered {
    color: var(--entry-row-focus-text, #000000) !important;
}

/* Hide HTML5 number spin-buttons for clean appearance */
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody td input[type="number"]::-webkit-inner-spin-button,
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody td input[type="number"]::-webkit-outer-spin-button,
tr.product-row td input[type="number"]::-webkit-inner-spin-button,
tr.product-row td input[type="number"]::-webkit-outer-spin-button,
tr.entry-row td input[type="number"]::-webkit-inner-spin-button,
tr.entry-row td input[type="number"]::-webkit-outer-spin-button,
.product-entry-table input[type="number"]::-webkit-inner-spin-button,
.product-entry-table input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody td input[type="number"],
tr.product-row td input[type="number"],
tr.entry-row td input[type="number"],
.product-entry-table input[type="number"] {
    -moz-appearance: textfield;
}

/* Value-based input alignment & sizing (Generalized Classes) */
tr.product-row td .product-quantity,
tr.product-row td .product-free,
tr.entry-row td .product-quantity,
tr.entry-row td .product-free,
.input-qty,
.input-free,
.cell-align-center {
    text-align: center !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    padding: 1px 2px !important;
}

tr.product-row td .product-batchno,
tr.entry-row td .product-batchno,
.input-batch,
.cell-batch {
    text-align: center !important;
    font-size: 11.5px !important;
    letter-spacing: 0.2px !important;
    padding: 1px 2px !important;
    background-color: #f8f9fa !important;
}

tr.product-row td .exp,
tr.entry-row td .exp,
.input-exp,
.input-date,
.cell-exp {
    text-align: center !important;
    font-size: 11px !important;
    padding: 1px 1px !important;
}

tr.product-row td .mrp,
tr.product-row td .branchrate,
tr.product-row td .branch-rate,
tr.product-row td .rate,
tr.product-row td .purchaserate,
tr.product-row td .pts,
tr.product-row td .ptr,
tr.product-row td .gst,
tr.product-row td .discount,
tr.entry-row td .mrp,
tr.entry-row td .rate,
tr.entry-row td .discount,
.input-rate,
.input-amount,
.input-currency,
.input-percentage,
.cell-align-right {
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
    font-size: 12px !important;
    padding: 1px 3px !important;
}

/* Margin text under Rate in Sales, BT, Quotations */
tr.product-row td .margin-amount,
tr.entry-row td .margin-amount,
.product-entry-table td .margin-amount,
.entry-table td .margin-amount {
    font-size: 11px !important;
    color: var(--entry-margin-amount-color, #0284c7) !important;
    transition: color 0.15s ease-in-out !important;
}

tr.product-row td .margin-label,
tr.entry-row td .margin-label,
.product-entry-table td .margin-label,
.entry-table td .margin-label,
tr.product-row td .rate-margin-wrapper,
tr.entry-row td .rate-margin-wrapper,
.product-entry-table td .rate-margin-wrapper,
.entry-table td .rate-margin-wrapper,
tr.product-row td div.text-muted:has(> .margin-amount),
tr.entry-row td div.text-muted:has(> .margin-amount) {
    color: var(--entry-margin-label-color, #64748b) !important;
    transition: color 0.15s ease-in-out !important;
}

/* Select2 Product Dropdown in Column 1 */
tr.product-row td[id^="product_item_parent"] > div,
tr.entry-row td[id^="product_item_parent"] > div {
    top: 0 !important;
    position: static !important;
    margin: 0 !important;
}

table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody td .select2-container,
tr.product-row td .select2-container,
tr.entry-row td .select2-container,
.product-entry-table .select2-container,
.table-select2 {
    margin: 0 !important;
    width: 100% !important;
}

table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody td .select2-container .select2-selection--single,
tr.product-row td .select2-container .select2-selection--single,
tr.entry-row td .select2-container .select2-selection--single,
.product-entry-table .select2-container .select2-selection--single,
.table-select2 .select2-selection--single {
    height: 24px !important;
    line-height: 24px !important;
    padding: 0 !important;
    border-radius: 0px !important;
    display: flex !important;
    align-items: center !important;
    border: 1px solid var(--entry-input-border-color, #94a3b8) !important;
}

table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody td .select2-container--default .select2-selection--single .select2-selection__rendered,
tr.product-row td .select2-container--default .select2-selection--single .select2-selection__rendered,
tr.entry-row td .select2-container--default .select2-selection--single .select2-selection__rendered,
.product-entry-table .select2-container--default .select2-selection--single .select2-selection__rendered,
.table-select2 .select2-selection__rendered {
    line-height: 22px !important;
    padding-left: 3px !important;
    padding-right: 14px !important;
    font-size: 12px !important;
}

table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody td .select2-container--default .select2-selection--single .select2-selection__arrow,
tr.product-row td .select2-container--default .select2-selection--single .select2-selection__arrow,
tr.entry-row td .select2-container--default .select2-selection--single .select2-selection__arrow,
.product-entry-table .select2-container--default .select2-selection--single .select2-selection__arrow,
.table-select2 .select2-selection__arrow {
    height: 22px !important;
    width: 14px !important;
}

/* Action Icon Buttons */
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody td .btn-sm,
tr.product-row td .btn-sm,
tr.entry-row td .btn-sm,
.product-entry-table td .btn-sm,
.table-action-btn {
    padding: 1px 4px !important;
    height: 22px !important;
    min-width: 20px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    margin: 0 !important;
    border-radius: 0px !important;
}

/* --- Criteria-based Column Roles (Zero-Config Semantic Layout) --- */
/* First column: row index (#) */
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) thead th:first-child,
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody td:first-child {
    text-align: center !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    width: 3.5% !important;
    min-width: 30px !important;
    padding: 6px 2px !important;
}

/* Last column: action buttons (+ / x) */
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) thead th:last-child,
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody td:last-child {
    text-align: center !important;
    width: 5% !important;
    min-width: 45px !important;
    padding: 0 2px !important;
}

/* Dates */
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody td input[type="date"] {
    text-align: center !important;
    font-size: 11px !important;
    padding: 1px 1px !important;
}

/* Amounts & currency / step=0.01 / tabular-nums */
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody td input[step="0.01"],
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody td input[step="any"],
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody td input.product-total {
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
    font-size: 12px !important;
}

/* Quantities and Free */
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody td input[name*="quantity" i],
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody td input[name*="free" i] {
    text-align: center !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}

/* Footer Totals */
.product-entry-table tfoot td,
.entry-table tfoot td,
#addProductsTable tfoot td,
#editProductsTable tfoot td {
    padding: 4px 6px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    border: 1px solid #64748b !important;
    background-color: #f8f9fa !important;
}

#addProductsTable tfoot td.total-quantity,
#editProductsTable tfoot td.total-quantity,
#addProductsTable tfoot td.total-free-quantity,
#editProductsTable tfoot td.total-free-quantity,
#addProductsTable tfoot td.total-branch-rate,
#editProductsTable tfoot td.total-branch-rate,
#addProductsTable tfoot td.total-gst,
#editProductsTable tfoot td.total-gst,
#addProductsTable tfoot td.total-discount,
#editProductsTable tfoot td.total-discount,
#addProductsTable tfoot td.total-purchase-rate,
#editProductsTable tfoot td.total-purchase-rate,
.total-quantity,
.total-free-quantity,
.total-branch-rate,
.total-gst,
.total-discount,
.total-purchase-rate,
.total-rate,
.total-amount,
.tfoot-align-left {
    text-align: left !important;
}

/* --- COLUMN SIZING: Semantic Column Classes for Product Entry Tables --- */
.product-entry-table th.col-index,
.product-entry-table td.col-index,
th.col-index,
td.col-index {
    width: 3.5% !important;
    min-width: 38px !important;
    max-width: 48px !important;
}

.product-entry-table th.col-item,
.product-entry-table td.col-item,
th.col-item,
td.col-item {
    width: 24% !important;
    min-width: 180px !important;
}

.product-entry-table th.col-batch,
.product-entry-table td.col-batch,
th.col-batch,
td.col-batch {
    width: 7% !important;
    min-width: 65px !important;
}

.product-entry-table th.col-exp,
.product-entry-table td.col-exp,
th.col-exp,
td.col-exp {
    width: 8.5% !important;
    min-width: 88px !important;
}

.product-entry-table th.col-mrp,
.product-entry-table td.col-mrp,
th.col-mrp,
td.col-mrp {
    width: 6.5% !important;
    min-width: 58px !important;
}

.product-entry-table th.col-branch-rate,
.product-entry-table td.col-branch-rate,
th.col-branch-rate,
td.col-branch-rate {
    width: 7% !important;
    min-width: 60px !important;
}

.product-entry-table th.col-rate,
.product-entry-table td.col-rate,
th.col-rate,
td.col-rate {
    width: 7.5% !important;
    min-width: 65px !important;
}

.product-entry-table th.col-pts,
.product-entry-table td.col-pts,
th.col-pts,
td.col-pts {
    width: 5.5% !important;
    min-width: 50px !important;
}

.product-entry-table th.col-ptr,
.product-entry-table td.col-ptr,
th.col-ptr,
td.col-ptr {
    width: 5.5% !important;
    min-width: 50px !important;
}

.product-entry-table th.col-purchase-rate,
.product-entry-table td.col-purchase-rate,
th.col-purchase-rate,
td.col-purchase-rate {
    width: 7% !important;
    min-width: 60px !important;
}

.product-entry-table th.col-gst,
.product-entry-table td.col-gst,
th.col-gst,
td.col-gst {
    width: 5.5% !important;
    min-width: 48px !important;
}

.product-entry-table th.col-qty,
.product-entry-table td.col-qty,
th.col-qty,
td.col-qty {
    width: 6% !important;
    min-width: 48px !important;
}

.product-entry-table th.col-free,
.product-entry-table td.col-free,
th.col-free,
td.col-free {
    width: 5% !important;
    min-width: 42px !important;
}

.product-entry-table th.col-discount,
.product-entry-table td.col-discount,
th.col-discount,
td.col-discount {
    width: 5.5% !important;
    min-width: 48px !important;
}

.product-entry-table th.col-total,
.product-entry-table td.col-total,
th.col-total,
td.col-total {
    width: 8% !important;
    min-width: 72px !important;
}

.product-entry-table th.col-action,
.product-entry-table td.col-action,
th.col-action,
td.col-action {
    width: 5.5% !important;
    min-width: 45px !important;
}

/* ==========================================================================
   22.1 SPECIFIC 16-COLUMN PURCHASE TABLE OVERRIDES (HIGH SPECIFICITY)
   ========================================================================== */
table.table-purchase thead th,
.table-purchase thead th {
    padding: 4px 2px !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    line-height: 1.15 !important;
    text-align: center !important;
    white-space: nowrap !important;
}

table.table-purchase thead th.col-item,
.table-purchase thead th.col-item {
    text-align: left !important;
    padding-left: 6px !important;
}

table.table-purchase tbody td,
.table-purchase tbody td {
    padding: 2px 2px !important;
    font-size: 11px !important;
    vertical-align: middle !important;
}

table.table-purchase input.form-control,
.table-purchase input.form-control {
    font-size: 11px !important;
    padding: 2px 3px !important;
    height: 28px !important;
    min-height: 28px !important;
}

table.table-purchase .select2-container .select2-selection,
.table-purchase .select2-container .select2-selection {
    font-size: 11px !important;
    min-height: 28px !important;
    height: 28px !important;
}

table.table-purchase .select2-container--default .select2-selection--single .select2-selection__rendered,
.table-purchase .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 26px !important;
    padding-left: 4px !important;
    padding-right: 18px !important;
    font-size: 11px !important;
}

table.table-purchase .select2-container--default .select2-selection--single .select2-selection__arrow,
.table-purchase .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 26px !important;
    width: 16px !important;
}

table.table-purchase tfoot td,
.table-purchase tfoot td {
    padding: 4px 2px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
}

table.table-purchase .btn-sm,
.table-purchase .btn-sm {
    padding: 1px 4px !important;
    font-size: 10px !important;
}

table.table-purchase th.col-index,
table.table-purchase td.col-index,
.table-purchase th.col-index,
.table-purchase td.col-index {
    width: 2.5% !important;
    min-width: 25px !important;
    max-width: 32px !important;
}

table.table-purchase th.col-item,
table.table-purchase td.col-item,
.table-purchase th.col-item,
.table-purchase td.col-item {
    width: 15% !important;
    min-width: 130px !important;
}

table.table-purchase th.col-batch,
table.table-purchase td.col-batch,
.table-purchase th.col-batch,
.table-purchase td.col-batch {
    width: 6.5% !important;
    min-width: 55px !important;
}

table.table-purchase th.col-exp,
table.table-purchase td.col-exp,
.table-purchase th.col-exp,
.table-purchase td.col-exp {
    width: 7% !important;
    min-width: 75px !important;
}

table.table-purchase th.col-mrp,
table.table-purchase td.col-mrp,
.table-purchase th.col-mrp,
.table-purchase td.col-mrp {
    width: 5% !important;
    min-width: 45px !important;
}

table.table-purchase th.col-pts,
table.table-purchase td.col-pts,
.table-purchase th.col-pts,
.table-purchase td.col-pts {
    width: 4.5% !important;
    min-width: 42px !important;
}

table.table-purchase th.col-ptr,
table.table-purchase td.col-ptr,
.table-purchase th.col-ptr,
.table-purchase td.col-ptr {
    width: 4.5% !important;
    min-width: 42px !important;
}

table.table-purchase th.col-rate,
table.table-purchase td.col-rate,
.table-purchase th.col-rate,
.table-purchase td.col-rate {
    width: 5% !important;
    min-width: 48px !important;
}

table.table-purchase th.col-purchase-rate,
table.table-purchase td.col-purchase-rate,
.table-purchase th.col-purchase-rate,
.table-purchase td.col-purchase-rate {
    width: 5.5% !important;
    min-width: 50px !important;
}

table.table-purchase th.col-qty,
table.table-purchase td.col-qty,
.table-purchase th.col-qty,
.table-purchase td.col-qty {
    width: 5% !important;
    min-width: 45px !important;
}

table.table-purchase th.col-free,
table.table-purchase td.col-free,
.table-purchase th.col-free,
.table-purchase td.col-free {
    width: 4% !important;
    min-width: 38px !important;
}

table.table-purchase th.col-discount,
table.table-purchase td.col-discount,
.table-purchase th.col-discount,
.table-purchase td.col-discount {
    width: 5% !important;
    min-width: 45px !important;
}

table.table-purchase th.col-taxable,
table.table-purchase td.col-taxable,
.table-purchase th.col-taxable,
.table-purchase td.col-taxable {
    width: 6.5% !important;
    min-width: 60px !important;
}

table.table-purchase th.col-gst,
table.table-purchase td.col-gst,
.table-purchase th.col-gst,
.table-purchase td.col-gst {
    width: 4.5% !important;
    min-width: 42px !important;
}

table.table-purchase th.col-total,
table.table-purchase td.col-total,
.table-purchase th.col-total,
.table-purchase td.col-total {
    width: 7.5% !important;
    min-width: 65px !important;
}

table.table-purchase th.col-action,
table.table-purchase td.col-action,
.table-purchase th.col-action,
.table-purchase td.col-action {
    width: 4% !important;
    min-width: 36px !important;
}

/* --- Universal Standalone Column Width Classes (Mix-and-Match for ANY Custom Table) --- */
.col-w-item     { width: 28% !important; min-width: 170px !important; }
.col-w-batch    { width: 8% !important;  min-width: 65px !important; }
.col-w-exp      { width: 10% !important; min-width: 100px !important; }
.col-w-mrp      { width: 6% !important;  min-width: 50px !important; }
.col-w-rate     { width: 8% !important;  min-width: 60px !important; }
.col-w-pts      { width: 5.5% !important; min-width: 50px !important; }
.col-w-ptr      { width: 5.5% !important; min-width: 50px !important; }
.col-w-qty      { width: 6.5% !important; min-width: 50px !important; }
.col-w-free     { width: 5.5% !important; min-width: 44px !important; }
.col-w-gst      { width: 6% !important;  min-width: 48px !important; }
.col-w-discount { width: 6% !important;  min-width: 48px !important; }
.col-w-action   { width: 4% !important;  min-width: 40px !important; }

/* --- Hide Theme Customizer floating gear button and panel --- */
.sidebar-pannle-main,
.setting-sidebar,
#cog-click {
    display: none !important;
}

/* ==========================================================================
   [REVIVABLE] Horizontal Sidebar Arrow Navigation CSS
   Uncomment this block if returning to single-row arrow scrolling.
   ========================================================================== */
/*
.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .left-arrow,
.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .right-arrow {
    width: 26px !important;
    height: 100% !important;
    top: 0 !important;
    bottom: 0 !important;
    padding: 0 !important;
    background: var(--card-color, #fff) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
    cursor: pointer !important;
    border: none !important;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.15) !important;
}
.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .left-arrow { left: 0 !important; }
.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .right-arrow { right: 0 !important; }
.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .left-arrow.disabled,
.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .right-arrow.disabled { display: none !important; }
.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .left-arrow svg,
.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .right-arrow svg {
    width: 14px !important;
    height: 14px !important;
    stroke: var(--body-font-color, #333) !important;
}
*/

/* Arrows hidden in wrapped sidebar design */
.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .left-arrow,
.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .right-arrow {
    display: none !important;
}

/* --- Solid Opaque Header: Sleek Single-Row Bar (Never wraps to 2 rows) --- */
header.page-header,
.page-header.row,
.page-wrapper.horizontal-sidebar .page-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* STRICTLY 1 ROW - NEVER WRAP */
    align-items: center !important;
    justify-content: space-between !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    background-color: #ffffff !important;
    background: #ffffff !important;
    z-index: 1000 !important;
    border-bottom: 1px solid #dcdcdc !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    box-sizing: border-box !important;
}

header.page-header .logo-wrapper,
header.page-header .page-main-header {
    background-color: transparent !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}

/* --- Completely Hide Sidebar Toggle Icon / Arrow Box --- */
.page-header .close-btn,
.page-header .toggle-sidebar,
.page-header .logo-wrapper .close-btn {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Header Brand Group (Logo + Title + Divider + Branch) - Single Line */
.page-header .header-brand-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
}

.page-header .header-logo-img,
.page-header .logo-wrapper img {
    width: 38px !important;
    height: 38px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}

.page-header .header-brand-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #1e293b !important;
    margin: 0 !important;
    letter-spacing: -0.2px !important;
    white-space: nowrap !important;
    display: inline-block !important;
}

/* Clean vertical divider between brand and branch */
.page-header .header-branch-divider {
    width: 2px !important;
    height: 20px !important;
    background-color: #cbd5e1 !important;
    margin: 0 14px !important;
    flex-shrink: 0 !important;
}

/* Branch / Head Office Title */
.page-header .header-branch-title {
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    margin: 0 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Header Right Nav (Profile Dropdown, Admin Button) */
.page-header .nav-right {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
}

.page-header .header-right {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 8px !important;
    list-style: none !important;
}

/* Bigger Desktop Screens (>= 1200px) */
@media (min-width: 1200px) {
    .page-header .header-brand-title {
        font-size: 18px !important;
        letter-spacing: -0.3px !important;
    }

    .page-header .header-branch-title {
        font-size: 15px !important;
    }

    .page-header .header-logo-img {
        width: 40px !important;
        height: 40px !important;
    }
}

/* Responsive (< 768px) */
@media (max-width: 767.98px) {
    .page-header {
        padding: 0 10px !important;
    }

    .page-header .header-brand-title {
        font-size: 14px !important;
    }

    .page-header .header-branch-title {
        font-size: 12.5px !important;
    }

    .page-header .header-branch-divider {
        margin: 0 8px !important;
    }

    .page-header .header-logo-img {
        width: 32px !important;
        height: 32px !important;
    }
}

/* ==========================================================================
   NEW WRAPPED HORIZONTAL SIDEBAR DESIGN
   - Sidebar container expands naturally when menu items exceed screen width
   - Items wrap cleanly onto multiple rows under the same container
   - Modern pill navigation design with clear hover & active states
   - Dropdown submenus positioned cleanly below parent
   ========================================================================== */
.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar {
    display: flex !important;
    position: fixed !important;
    top: var(--ho-header-h, 44px) !important;
    margin-top: -1px !important; /* 1px overlap eliminates hairline seam */
    left: 0 !important;
    width: 100% !important;
    height: auto !important; /* Expands height automatically when wrapped */
    min-height: 32px !important;
    max-height: none !important;
    z-index: 999 !important;
    overflow: visible !important;
    background-color: #ffffff !important;
    background: #ffffff !important;
    border-bottom: 1px solid #dcdcdc !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 3px 12px !important;
    box-sizing: border-box !important;
}

/* Container for wrapped menu */
.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar #sidebar-menu {
    display: flex !important;
    align-items: center !important;
    height: auto !important;
    width: 100% !important;
    margin-left: 0 !important;
    position: relative !important;
    overflow: visible !important;
}

/* Menu list: Wraps items under the same container */
.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important; /* WRAPS UNDER THE SAME CONTAINER */
    align-items: center !important;
    height: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 3px 6px !important;
    list-style: none !important;
    white-space: normal !important;
}

.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-list {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
}

/* Modern Pill / Tab Link Styling */
.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-list .sidebar-link,
.page-sidebar .sidebar-menu .sidebar-list .sidebar-link {
    display: inline-flex !important;
    align-items: center !important;
    padding: var(--sidebar-link-padding-y, 4px) var(--sidebar-link-padding-x, 8px) !important;
    font-size: var(--sidebar-link-font-size, 12px) !important;
    font-weight: var(--sidebar-link-font-weight, 500) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    color: var(--sidebar-link-color, #334155) !important;
    background-color: var(--sidebar-link-bg, transparent) !important;
    border: 1px solid var(--sidebar-link-border, transparent) !important;
    border-radius: var(--sidebar-link-border-radius, 4px) !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
    cursor: pointer !important;
}

/* Sidebar Link Hover State */
.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-list .sidebar-link:hover,
.page-sidebar .sidebar-menu .sidebar-list .sidebar-link:hover {
    background-color: var(--sidebar-link-hover-bg, #e0f2fe) !important;
    color: var(--sidebar-link-hover-color, #004b91) !important;
    border-color: var(--sidebar-link-hover-border, #bae6fd) !important;
}

.page-sidebar .sidebar-link.active span{
    color: #ffffff !important;
}

.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-list .sidebar-link:hover i,
.page-sidebar .sidebar-menu .sidebar-list .sidebar-link:hover i {
    color: var(--sidebar-link-hover-icon-color, #004b91) !important;
}

.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-list .sidebar-link:hover svg,
.page-sidebar .sidebar-menu .sidebar-list .sidebar-link:hover svg {
    stroke: var(--sidebar-link-hover-icon-color, #004b91) !important;
    color: var(--sidebar-link-hover-icon-color, #004b91) !important;
}

/* Sidebar Link Active State (Current Page / Active Menu) */
.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-list .sidebar-link.active,
.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-list.active > .sidebar-link,
.page-sidebar .sidebar-menu .sidebar-list .sidebar-link.active,
.page-sidebar .sidebar-menu .sidebar-list.active > .sidebar-link {
    background-color: var(--sidebar-link-active-bg, #0055a5) !important;
    color: var(--sidebar-link-active-color, #ffffff) !important;
    border-color: var(--sidebar-link-active-border, #004488) !important;
    box-shadow: var(--sidebar-link-active-shadow, 0 2px 6px rgba(0, 85, 165, 0.35)) !important;
    font-weight: 600 !important;
}

.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-list .sidebar-link.active:hover,
.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-list.active > .sidebar-link:hover,
.page-sidebar .sidebar-menu .sidebar-list .sidebar-link.active:hover,
.page-sidebar .sidebar-menu .sidebar-list.active > .sidebar-link:hover {
    background-color: var(--sidebar-link-active-hover-bg, #00498c) !important;
    color: var(--sidebar-link-active-color, #ffffff) !important;
    border-color: var(--sidebar-link-active-border, #004488) !important;
}

.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-list .sidebar-link.active i,
.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-list.active > .sidebar-link i,
.page-sidebar .sidebar-menu .sidebar-list .sidebar-link.active i,
.page-sidebar .sidebar-menu .sidebar-list.active > .sidebar-link i {
    color: var(--sidebar-link-active-icon-color, #ffffff) !important;
}

.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-list .sidebar-link.active svg,
.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-list.active > .sidebar-link svg,
.page-sidebar .sidebar-menu .sidebar-list .sidebar-link.active svg,
.page-sidebar .sidebar-menu .sidebar-list.active > .sidebar-link svg {
    stroke: var(--sidebar-link-active-icon-color, #ffffff) !important;
    color: var(--sidebar-link-active-icon-color, #ffffff) !important;
    fill: none !important;
}

.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-list .sidebar-link svg,
.page-sidebar .sidebar-menu .sidebar-list .sidebar-link svg {
    width: 13px !important;
    height: 13px !important;
    margin-right: 4px !important;
    flex-shrink: 0 !important;
}

.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-list .sidebar-link i,
.page-sidebar .sidebar-menu .sidebar-list .sidebar-link i {
    font-size: 12px !important;
    margin-right: 4px !important;
    flex-shrink: 0 !important;
}

.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .pin-title,
.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .line,
.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .pinned-icon,
.page-sidebar .sidebar-menu .pin-title,
.page-sidebar .sidebar-menu .line,
.page-sidebar .sidebar-menu .pinned-icon {
    display: none !important;
}

/* Dropdown Submenus in Horizontal Wrapped Layout */
.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-list .sidebar-submenu,
.page-sidebar .sidebar-menu .sidebar-list .sidebar-submenu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 1050 !important;
    min-width: 175px !important;
    background: var(--sidebar-dropdown-bg, #ffffff) !important;
    border: 1px solid var(--sidebar-dropdown-border, #cbd5e1) !important;
    border-radius: 4px !important;
    box-shadow: var(--sidebar-dropdown-shadow, 0 4px 14px rgba(0, 0, 0, 0.12)) !important;
    padding: 4px 0 !important;
    margin: 2px 0 0 0 !important;
    list-style: none !important;
    display: none;
}

.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-list:hover > .sidebar-submenu,
.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-list.hover > .sidebar-submenu,
.page-sidebar .sidebar-menu .sidebar-list:hover > .sidebar-submenu,
.page-sidebar .sidebar-menu .sidebar-list.hover > .sidebar-submenu {
    display: block !important;
}

.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-list .sidebar-submenu li,
.page-sidebar .sidebar-menu .sidebar-list .sidebar-submenu li {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
}

.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-list .sidebar-submenu li a,
.page-sidebar .sidebar-menu .sidebar-list .sidebar-submenu li a {
    display: flex !important;
    align-items: center !important;
    padding: 5px 12px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--sidebar-submenu-link-color, #334155) !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    border-left: 3px solid transparent !important;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, padding-left 0.15s ease !important;
}

.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-list .sidebar-submenu li a:hover,
.page-sidebar .sidebar-menu .sidebar-list .sidebar-submenu li a:hover {
    background-color: var(--sidebar-submenu-hover-bg, #f0f7ff) !important;
    color: var(--sidebar-submenu-hover-color, #0055a5) !important;
    border-left-color: var(--sidebar-submenu-hover-border-left, #0055a5) !important;
    padding-left: 15px !important;
}

.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-list .sidebar-submenu li a.active,
.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-list .sidebar-submenu li.active > a,
.page-sidebar .sidebar-menu .sidebar-list .sidebar-submenu li a.active,
.page-sidebar .sidebar-menu .sidebar-list .sidebar-submenu li.active > a {
    background-color: var(--sidebar-submenu-active-bg, #e0f2fe) !important;
    color: var(--sidebar-submenu-active-color, #004085) !important;
    border-left-color: var(--sidebar-submenu-active-border-left, #0055a5) !important;
    font-weight: 600 !important;
    padding-left: 15px !important;
}

.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-list .sidebar-submenu li a svg,
.page-sidebar .sidebar-menu .sidebar-list .sidebar-submenu li a svg {
    margin-right: 6px !important;
    width: 12px !important;
    height: 12px !important;
}

.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-list .sidebar-submenu li a:hover svg,
.page-sidebar .sidebar-menu .sidebar-list .sidebar-submenu li a:hover svg {
    stroke: var(--sidebar-submenu-hover-color, #0055a5) !important;
    fill: var(--sidebar-submenu-hover-color, #0055a5) !important;
}

.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-list .sidebar-submenu li a.active svg,
.page-sidebar .sidebar-menu .sidebar-list .sidebar-submenu li a.active svg {
    stroke: var(--sidebar-submenu-active-color, #004085) !important;
    fill: var(--sidebar-submenu-active-color, #004085) !important;
}

/* --- Horizontal Sidebar: Second-Level Submenu (.according-submenu) & Dropdown Positioning --- */
.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-list .sidebar-submenu li .according-submenu {
    display: none !important;
    position: absolute !important;
    top: 0 !important;
    left: 100% !important;
    right: auto !important;
    min-width: 220px !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.12) !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    list-style: none !important;
    z-index: 1060 !important;
}

/* Second-level Submenu: Display on Hover / Active */
.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-list .sidebar-submenu li:hover > .according-submenu,
.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-list .sidebar-submenu li.hover > .according-submenu,
.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-list .sidebar-submenu li.active > .according-submenu {
    display: block !important;
}

/* Auto-flip to Left when near the right edge of the screen */
.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-list .sidebar-submenu li .according-submenu.open-left,
.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-list .sidebar-submenu li.sub-open-left > .according-submenu {
    left: auto !important;
    right: 100% !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.12) !important;
}

/* First-level dropdown align right when overflowing right edge */
.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-list .sidebar-submenu.dropdown-align-right {
    left: auto !important;
    right: 0 !important;
}

/* Clean styling for second-level menu items */
.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-list .sidebar-submenu li .according-submenu li a {
    white-space: nowrap !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--sidebar-submenu-link-color, #334155) !important;
    letter-spacing: normal !important;
    display: flex !important;
    align-items: center !important;
    border-left: 3px solid transparent !important;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, padding-left 0.15s ease !important;
}

.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-list .sidebar-submenu li .according-submenu li a:hover {
    background-color: var(--sidebar-submenu-hover-bg, #f0f7ff) !important;
    color: var(--sidebar-submenu-hover-color, #0055a5) !important;
    border-left-color: var(--sidebar-submenu-hover-border-left, #0055a5) !important;
    padding-left: 18px !important;
    letter-spacing: normal !important;
}

/* Submenu Title: ensure proper flex layout and chevron placement without overlap */
.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-list .sidebar-submenu li a.submenu-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
}

.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-list .sidebar-submenu li a.submenu-title .feather {
    margin-left: auto !important;
    margin-right: 0 !important;
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s ease !important;
}

/* Point arrow to the left when submenu opens to the left */
.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-list .sidebar-submenu li.sub-open-left > a.submenu-title .feather,
.page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-list .sidebar-submenu li:has(.according-submenu.open-left) > a.submenu-title .feather {
    transform: rotate(180deg) !important;
}

/* Mobile Screens (< 768px): collapse submenu inline as an accordion */
@media (max-width: 767.98px) {
    .page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-list .sidebar-submenu li .according-submenu {
        position: static !important;
        display: none !important;
        width: 100% !important;
        box-shadow: none !important;
        border: none !important;
        border-left: 2px solid #e2e8f0 !important;
        margin-left: 14px !important;
        padding: 2px 0 !important;
    }

    .page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-list .sidebar-submenu li.active > .according-submenu {
        display: block !important;
    }

    .page-wrapper.horizontal-sidebar .page-body-wrapper .page-sidebar .sidebar-menu .sidebar-list .sidebar-submenu li.active > a.submenu-title .feather {
        transform: rotate(90deg) !important;
    }
}

/* Page body sits directly below the horizontal sidebar with minimal gap */
.page-wrapper.horizontal-sidebar .page-body-wrapper .page-body {
    margin-top: var(--ho-sidebar-h, 34px) !important;
    padding: 6px 12px 16px 12px !important;
}

.page-wrapper.horizontal-sidebar .page-body-wrapper .page-title {
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    padding: 0 !important;
}

.page-wrapper.horizontal-sidebar .card {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
}

/* Remove wasted empty space from empty card-header */
.page-wrapper.horizontal-sidebar .card-header.card-no-border:has(h4:empty):not(:has(> :not(h4))),
.card-header.card-no-border:has(h4:empty):not(:has(> :not(h4))) {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.page-wrapper.horizontal-sidebar .card .card-body {
    padding: 10px 14px !important;
}

/* Active & Hover Product Row Highlight - clean background color only, NO vertical strip */
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody tr,
tr.product-row,
tr.entry-row,
.product-entry-table tbody tr,
.entry-table tbody tr,
#addProductsTable tbody tr,
#editProductsTable tbody tr {
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody tr:focus-within,
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody tr:focus-within > td,
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody tr.active-row,
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody tr.active-row > td,
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody tr:hover:not(.entry-history-row):not(.prev-transfers-row):not(.prev-sales-row):not(.prev-purchase-row),
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody tr:hover:not(.entry-history-row):not(.prev-transfers-row):not(.prev-sales-row):not(.prev-purchase-row) > td,
tr.product-row.active-row,
tr.product-row.active-row > td,
tr.entry-row.active-row,
tr.entry-row.active-row > td,
tr.active-row,
tr.active-row > td,
.product-entry-table tbody tr.active-row > td,
.entry-table tbody tr.active-row > td,
#addProductsTable tbody tr.active-row > td,
#editProductsTable tbody tr.active-row > td,
tr.product-row:hover:not(.entry-history-row):not(.prev-transfers-row):not(.prev-sales-row):not(.prev-purchase-row),
tr.product-row:hover:not(.entry-history-row):not(.prev-transfers-row):not(.prev-sales-row):not(.prev-purchase-row) > td,
tr.entry-row:hover:not(.entry-history-row):not(.prev-transfers-row):not(.prev-sales-row):not(.prev-purchase-row),
tr.entry-row:hover:not(.entry-history-row):not(.prev-transfers-row):not(.prev-sales-row):not(.prev-purchase-row) > td,
.product-entry-table tbody tr:hover:not(.entry-history-row):not(.prev-transfers-row):not(.prev-sales-row):not(.prev-purchase-row) > td,
.entry-table tbody tr:hover:not(.entry-history-row):not(.prev-transfers-row):not(.prev-sales-row):not(.prev-purchase-row) > td,
#addProductsTable tbody tr:hover:not(.entry-history-row):not(.prev-transfers-row):not(.prev-sales-row):not(.prev-purchase-row) > td,
#editProductsTable tbody tr:hover:not(.entry-history-row):not(.prev-transfers-row):not(.prev-sales-row):not(.prev-purchase-row) > td {
    background-color: var(--entry-row-active-bg, #101d33) !important;
    color: var(--entry-row-active-text, #ffffff) !important;
    box-shadow: none !important;
}

/* Active & Hover Row Subtext, Margin Label & Details */
tr.product-row.active-row td .margin-amount,
tr.entry-row.active-row td .margin-amount,
tr.active-row td .margin-amount,
.product-entry-table tbody tr.active-row td .margin-amount,
.entry-table tbody tr.active-row td .margin-amount,
#addProductsTable tbody tr.active-row td .margin-amount,
#editProductsTable tbody tr.active-row td .margin-amount,
tr.product-row:hover td .margin-amount,
tr.entry-row:hover td .margin-amount,
.product-entry-table tbody tr:hover td .margin-amount,
.entry-table tbody tr:hover td .margin-amount,
#addProductsTable tbody tr:hover td .margin-amount,
#editProductsTable tbody tr:hover td .margin-amount {
    color: var(--entry-row-active-margin-amount, #38bdf8) !important;
}

tr.product-row.active-row td .margin-label,
tr.entry-row.active-row td .margin-label,
tr.active-row td .margin-label,
.product-entry-table tbody tr.active-row td .margin-label,
.entry-table tbody tr.active-row td .margin-label,
#addProductsTable tbody tr.active-row td .margin-label,
#editProductsTable tbody tr.active-row td .margin-label,
tr.product-row:hover td .margin-label,
tr.entry-row:hover td .margin-label,
.product-entry-table tbody tr:hover td .margin-label,
.entry-table tbody tr:hover td .margin-label,
#addProductsTable tbody tr:hover td .margin-label,
#editProductsTable tbody tr:hover td .margin-label,
tr.product-row.active-row td .rate-margin-wrapper,
tr.entry-row.active-row td .rate-margin-wrapper,
tr.active-row td .rate-margin-wrapper,
.product-entry-table tbody tr.active-row td .rate-margin-wrapper,
.entry-table tbody tr.active-row td .rate-margin-wrapper,
tr.product-row:hover td .rate-margin-wrapper,
tr.entry-row:hover td .rate-margin-wrapper,
.product-entry-table tbody tr:hover td .rate-margin-wrapper,
.entry-table tbody tr:hover td .rate-margin-wrapper,
tr.product-row.active-row td div:has(> .margin-amount),
tr.entry-row.active-row td div:has(> .margin-amount),
tr.active-row td div:has(> .margin-amount),
.product-entry-table tbody tr.active-row td div:has(> .margin-amount),
.entry-table tbody tr.active-row td div:has(> .margin-amount),
tr.product-row:hover td div:has(> .margin-amount),
tr.entry-row:hover td div:has(> .margin-amount),
.product-entry-table tbody tr:hover td div:has(> .margin-amount),
.entry-table tbody tr:hover td div:has(> .margin-amount),
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody tr:focus-within td .text-muted,
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody tr.active-row td .text-muted,
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody tr:hover td .text-muted,
tr.product-row.active-row td .text-muted,
tr.entry-row.active-row td .text-muted,
tr.active-row td .text-muted,
.product-entry-table tbody tr.active-row td .text-muted,
.entry-table tbody tr.active-row td .text-muted,
tr.product-row:hover td .text-muted,
tr.entry-row:hover td .text-muted,
.product-entry-table tbody tr:hover td .text-muted,
.entry-table tbody tr:hover td .text-muted {
    color: var(--entry-row-active-margin-label, #cbd5e1) !important;
}

tr.product-row.active-row td a:not(.btn),
tr.entry-row.active-row td a:not(.btn),
tr.active-row td a:not(.btn),
tr.product-row:hover td a:not(.btn),
tr.entry-row:hover td a:not(.btn),
.product-entry-table tbody tr:hover td a:not(.btn),
.entry-table tbody tr:hover td a:not(.btn) {
    color: #38bdf8 !important;
}

table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody tr:focus-within td small,
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody tr:focus-within td:first-child,
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody tr.active-row td small,
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody tr.active-row td:first-child,
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody tr:hover td small,
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody tr:hover td:first-child,
tr.product-row.active-row td small,
tr.entry-row.active-row td small,
tr.product-row.active-row td.row-index,
tr.entry-row.active-row td.row-index,
tr.active-row td.row-index,
tr.product-row:hover td small,
tr.entry-row:hover td small,
tr.product-row:hover td.row-index,
tr.entry-row:hover td.row-index,
.product-entry-table tbody tr:hover td small,
.product-entry-table tbody tr:hover td.row-index,
.entry-table tbody tr:hover td small,
.entry-table tbody tr:hover td.row-index {
    color: var(--entry-row-active-text, #ffffff) !important;
}

/* Active & Hover Row Unfocused Inputs & Selects */
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody tr:focus-within td .form-control:not(:focus),
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody tr:focus-within td input:not([type="checkbox"]):not([type="radio"]):not(.btn):not(:focus),
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody tr:focus-within td select:not(:focus),
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody tr.active-row td .form-control:not(:focus),
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody tr.active-row td input:not([type="checkbox"]):not([type="radio"]):not(.btn):not(:focus),
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody tr.active-row td select:not(:focus),
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody tr:hover td .form-control:not(:focus),
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody tr:hover td input:not([type="checkbox"]):not([type="radio"]):not(.btn):not(:focus),
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody tr:hover td select:not(:focus),
tr.product-row.active-row td .form-control:not(:focus),
tr.entry-row.active-row td .form-control:not(:focus),
tr.active-row td .form-control:not(:focus),
tr.product-row.active-row td .table-input:not(:focus),
tr.entry-row.active-row td .table-input:not(:focus),
tr.active-row td .table-input:not(:focus),
tr.product-row.active-row td .product-batchno:not(:focus),
tr.entry-row.active-row td .product-batchno:not(:focus),
tr.product-row.active-row td .product-total:not(:focus),
tr.entry-row.active-row td .product-total:not(:focus),
.product-entry-table tr.active-row td .form-control:not(:focus),
.entry-table tr.active-row td .form-control:not(:focus),
tr.product-row:hover td .form-control:not(:focus),
tr.entry-row:hover td .form-control:not(:focus),
tr.product-row:hover td .table-input:not(:focus),
tr.entry-row:hover td .table-input:not(:focus),
tr.product-row:hover td .product-batchno:not(:focus),
tr.entry-row:hover td .product-batchno:not(:focus),
tr.product-row:hover td .product-total:not(:focus),
tr.entry-row:hover td .product-total:not(:focus),
.product-entry-table tbody tr:hover td .form-control:not(:focus),
.entry-table tbody tr:hover td .form-control:not(:focus) {
    background-color: var(--entry-row-input-bg, #1a2f4c) !important;
    color: var(--entry-row-input-text, #ffffff) !important;
    border: 1px solid var(--entry-row-input-border, #4f739c) !important;
}

/* Active & Hover Row Unfocused Select2 Dropdown */
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody tr:focus-within td .select2-container:not(.select2-container--focus):not(.select2-container--open) .select2-selection--single,
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody tr.active-row td .select2-container:not(.select2-container--focus):not(.select2-container--open) .select2-selection--single,
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody tr:hover td .select2-container:not(.select2-container--focus):not(.select2-container--open) .select2-selection--single,
tr.product-row.active-row td .select2-container:not(.select2-container--focus):not(.select2-container--open) .select2-selection--single,
tr.entry-row.active-row td .select2-container:not(.select2-container--focus):not(.select2-container--open) .select2-selection--single,
tr.active-row td .select2-container:not(.select2-container--focus):not(.select2-container--open) .select2-selection--single,
.product-entry-table tr.active-row td .select2-container:not(.select2-container--focus):not(.select2-container--open) .select2-selection--single,
tr.product-row:hover td .select2-container:not(.select2-container--focus):not(.select2-container--open) .select2-selection--single,
tr.entry-row:hover td .select2-container:not(.select2-container--focus):not(.select2-container--open) .select2-selection--single,
.product-entry-table tbody tr:hover td .select2-container:not(.select2-container--focus):not(.select2-container--open) .select2-selection--single,
.entry-table tbody tr:hover td .select2-container:not(.select2-container--focus):not(.select2-container--open) .select2-selection--single {
    background-color: var(--entry-row-input-bg, #1a2f4c) !important;
    border: 1px solid var(--entry-row-input-border, #4f739c) !important;
}

table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody tr:focus-within td .select2-container:not(.select2-container--focus):not(.select2-container--open) .select2-selection--single .select2-selection__rendered,
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody tr.active-row td .select2-container:not(.select2-container--focus):not(.select2-container--open) .select2-selection--single .select2-selection__rendered,
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody tr:hover td .select2-container:not(.select2-container--focus):not(.select2-container--open) .select2-selection--single .select2-selection__rendered,
tr.product-row.active-row td .select2-container:not(.select2-container--focus):not(.select2-container--open) .select2-selection--single .select2-selection__rendered,
tr.entry-row.active-row td .select2-container:not(.select2-container--focus):not(.select2-container--open) .select2-selection--single .select2-selection__rendered,
tr.active-row td .select2-container:not(.select2-container--focus):not(.select2-container--open) .select2-selection--single .select2-selection__rendered,
.product-entry-table tr.active-row td .select2-container:not(.select2-container--focus):not(.select2-container--open) .select2-selection--single .select2-selection__rendered,
tr.product-row:hover td .select2-container:not(.select2-container--focus):not(.select2-container--open) .select2-selection--single .select2-selection__rendered,
tr.entry-row:hover td .select2-container:not(.select2-container--focus):not(.select2-container--open) .select2-selection--single .select2-selection__rendered,
.product-entry-table tbody tr:hover td .select2-container:not(.select2-container--focus):not(.select2-container--open) .select2-selection--single .select2-selection__rendered,
.entry-table tbody tr:hover td .select2-container:not(.select2-container--focus):not(.select2-container--open) .select2-selection--single .select2-selection__rendered {
    color: var(--entry-row-input-text, #ffffff) !important;
}

/* Active & Hover Row Placeholder Text Color (Light for dark row) */
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody tr:focus-within td input::placeholder,
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody tr.active-row td input::placeholder,
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody tr:hover td input::placeholder,
tr.product-row.active-row td .form-control::placeholder,
tr.entry-row.active-row td .form-control::placeholder,
tr.active-row td .form-control::placeholder,
tr.product-row.active-row td .table-input::placeholder,
tr.entry-row.active-row td .table-input::placeholder,
tr.active-row td .table-input::placeholder,
.product-entry-table tr.active-row td input::placeholder,
.entry-table tr.active-row td input::placeholder,
tr.product-row:hover td .form-control::placeholder,
tr.entry-row:hover td .form-control::placeholder,
tr.product-row:hover td .table-input::placeholder,
tr.entry-row:hover td .table-input::placeholder,
.product-entry-table tbody tr:hover td input::placeholder,
.entry-table tbody tr:hover td input::placeholder {
    color: var(--entry-row-placeholder-color, #cbd5e1) !important;
    opacity: 1 !important;
}

table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody tr:focus-within td .select2-container .select2-selection__placeholder,
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody tr.active-row td .select2-container .select2-selection__placeholder,
table:has(tbody td input, tbody td select):not(.dataTable):not(.common-fields table) tbody tr:hover td .select2-container .select2-selection__placeholder,
tr.product-row.active-row td .select2-container .select2-selection__placeholder,
tr.entry-row.active-row td .select2-container .select2-selection__placeholder,
tr.active-row td .select2-container .select2-selection__placeholder,
.product-entry-table tr.active-row td .select2-container .select2-selection__placeholder,
.entry-table tr.active-row td .select2-container .select2-selection__placeholder,
tr.product-row:hover td .select2-container .select2-selection__placeholder,
tr.entry-row:hover td .select2-container .select2-selection__placeholder,
.product-entry-table tbody tr:hover td .select2-container .select2-selection__placeholder,
.entry-table tbody tr:hover td .select2-container .select2-selection__placeholder {
    color: var(--entry-row-placeholder-color, #cbd5e1) !important;
}

/* --- History Containers: Strict No-Horizontal-Scrollbar (BT, Sales, Purchase & Generalized Modules) --- */
.prev-transfers-row td,
.prev-sales-row td,
.prev-purchase-row td,
.entry-history-row td {
    overflow: hidden !important;
}

.prev-transfers-container,
.prev-sales-container,
.prev-purchase-container,
.entry-history-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    box-sizing: border-box !important;
}

.prev-transfers-list,
.prev-sales-list,
.prev-purchase-list,
.entry-history-list {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    scrollbar-width: thin !important;
}

.prev-transfers-list .row,
.prev-sales-list .row,
.prev-purchase-list .row,
.entry-history-list .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Strictly hide horizontal scrollbar */
.prev-transfers-list::-webkit-scrollbar,
.prev-sales-list::-webkit-scrollbar,
.prev-purchase-list::-webkit-scrollbar,
.entry-history-list::-webkit-scrollbar {
    width: 4px !important;
    height: 0px !important;
}

.prev-transfers-list::-webkit-scrollbar-thumb,
.prev-sales-list::-webkit-scrollbar-thumb,
.prev-purchase-list::-webkit-scrollbar-thumb,
.entry-history-list::-webkit-scrollbar-thumb {
    background: #bbb !important;
    border-radius: 2px !important;
}

/* Temporary Addition */
.select2-container--open{
    z-index: 1000 !important;
}