@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

/*
html, body, .search-panel {
font-family: 'Inter', sans-serif;
font-size: 14px!important;
} 
*/


html, body {
    font-family: 'Roboto', sans-serif;
    font-size: 14px !important;
}

.view-quote-history-box .rz-data-grid {
    max-height: 500px !important;
}

input:disabled,
textarea:disabled,
select:disabled,
.form-control:disabled,
.form-select:disabled,
.rz-inputtext:disabled,
.rz-state-disabled .rz-inputtext,
.rz-state-disabled .rz-dropdown-label,
.rz-state-disabled .rz-multiselect-label {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    opacity: 1 !important;
}

.search-panel {
    font-family: 'Roboto', sans-serif;
    font-size: 14px !important;
}

    /*
html, body, .search-panel {
font-family: "Helvetica Neue LT Std", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px!important;
}
*/

    .search-panel .rz-checkbox-list-vertical {
        margin-top: 10px !important;
        margin-left: 15px !important;
    }

    .search-panel .rz-chkbox-label {
        margin-inline: .5rem !important;
    }

/* can be ste as a vairaible for material-base.css instead of an override here */
.rz-grid-table-striped tbody > tr:not(.rz-expanded-row-content):nth-child(even) > td {
    background-color: #e9e9e9 !important;
}

.rz-grid-table thead th {
    background-color: #e9e9e9 !important;
    border-bottom: 1px solid #c8c8c8 !important;
}


.rz-grid-table tr:hover > * {
    background-color: #dbe7f3 !important;
}

.rz-grid-table-striped tbody > tr:hover:not(.rz-expanded-row-content):nth-child(even) > td {
    background-color: #dbe7f3 !important;
}


@media (min-width: 641px) {
    .sidebar {
        width: 200px !important;
        min-width: 200px !important;
        max-width: 200px !important;
        flex: 0 0 200px !important;
    }
}

.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    background-color: #F2F0EF;
}

.login-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.login-col-form {
    background-color: rgb(5, 39, 103);
}

    .login-col-form .login-btn {
        background-color: #F2F0EF;
    }

body.dark-mode .login-col-image {
    background-color: #1a1a1a !important;
}

body.dark-mode .login-col-form {
    background-color: rgb(5, 39, 103) !important;
}

    body.dark-mode .login-col-form .login-btn,
    body.dark-mode .login-col-form .btn-login {
        background-color: #1a1a1a !important;
        border-color: #ffffff !important;
        color: #ffffff !important;
    }

.remove-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-weight: bold;
    color: #888;
    display: inline-block;
}

    .remove-btn:hover {
        color: #ff0000;
    }

.selected-drop {
    border-radius: 4px 4px 0px 0px !important;
    border-bottom: 0px !important;
}

.tag {
    display: inline-block !important;
}

.rz-grid-table td .rz-cell-data, .rz-column-title-content {
    font-size: 1rem !important;
}

.input-container .tb {
    border-radius: 0px 0px 4px 4px !important;
    width: 100%;
}

.rz-listbox {
    width: 100% !important;
}

.rz-multiselect, .rz-dropdown, .rz-listbox-header {
    background: #e9e9e9 !important;
}

.rz-multiselect-label-container, .rz-dropdown-label {
    color: #000000 !important;
}

.rz-listbox-header {
    padding-block: 0px !important;
    border-bottom: 1px solid #bdbdbd !important;
}

.sidebar-footer {
    margin-top: 20px !important;
}

.rz-data-grid {
    border-radius: 10px !important;
}

.inventory-container {
    padding: 0px 20px !important;
    /* background-color: #FFFFFF !important; */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/*.table-content {
    flex: 1 !important;
    flex-grow: 1;
    min-height: calc(100vh - 166px) !important;
    max-height: calc(100vh - 166px) !important;
    height: calc(100vh - 166px) !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;    
    padding: 10px 20px !important;
}

.table-content {
    flex-grow: 1; /* Takes up the remaining horizontal space */
padding: 24px;
/* background-color: #f9fafb; */
min-height: 100vh;
}

*/
/* Inventory Search: keep existing Radzen table styling while enabling sticky headers */
.inv .table-content .rz-data-grid,
.inv .table-content .rz-datatable {
    border-radius: 10px !important;
}

/*nv .table-content .rz-datatable-tablewrapper,
.inv .table-content .rz-data-grid-data {
    overflow: visible !important;
} */

.inv .table-content .rz-grid-table thead th,
.inv .table-content .rz-datatable-table thead th,
.inv .table-content .rz-datatable-thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    background: var(--rz-grid-header-background-color, #f9fafb) !important;
    color: var(--rz-grid-header-color, inherit) !important;
    border-bottom: 1px solid var(--rz-grid-border-color, #e5e7eb) !important;
}



.inv .search-panel {
    height: calc(100vh - 146px) !important;
    overflow-y: auto !important;
    overflow-x: hidden;
    flex-shrink: 0 !important;
    width: 280px !important;
    max-width: 280px !important;
    background: transparent !important;
}

.rz-multiselect-item .rz-multiselect-item-content {
    flex: 1 !important;
    font-size: 14px !important;
}

.rz-listbox .rz-inputtext {
    flex: 1 !important;
    font-size: 14px !important;
}


.filter-group {
    margin-bottom: 0px !important;
}

.rz-grid-table thead th {
    background: var(--rz-grid-header-background-color, #f9fafb) !important;
    color: var(--rz-grid-header-color, inherit) !important;
    border-bottom: 1px solid var(--rz-grid-border-color, #e5e7eb) !important;
}



.sidebar {
    overflow: hidden !important;
}

/* Right drawer + overlay — make sure these rules are present where the wrapper lives */
.panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 80;
}

.sidepanel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 420px;
    max-width: 92vw;
    background: #fff;
    border-left: 1px solid #e5e7eb;
    box-shadow: -4px 0 16px rgba(0,0,0,.12);
    z-index: 90;
    display: flex;
    flex-direction: column;
    padding: 12px 12px 16px;
    overflow: auto;
    animation: sp-slide-in .18s ease-out both;
}

@@keyframes sp-slide-in {
    from {
        transform: translateX(12px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Green accent for Order drawer */
.sidepanel.order {
    border-left: 3px solid #10b981;
    box-shadow: -6px 0 22px rgba(16,185,129,.18);
}

/* Mobile full-width */
@@media (max-width: 480px) {
    .sidepanel {
        width: 100%;
        max-width: 100vw;
    }
}

/* Gray background for disabled Radzen components */
.rz-dropdown.rz-state-disabled,
.rz-textbox:disabled,
.rz-numeric:disabled,
.rz-chkbox-list.rz-state-disabled {
    background-color: #cccccc !important;
    cursor: not-allowed;
}

    .rz-dropdown.rz-state-disabled .rz-dropdown-label {
        background-color: #cccccc !important;
    }

.rz-state-disabled input {
    background-color: #cccccc !important;
}

.rz-chkbox-list.rz-state-disabled label {
    color: #999;
}

:root {
    --sidebar-bg: #ffffff;
    --border-color: #d1d5db;
    --text-main: #374151;
    --accent-purple: #8b5cf6;
    --accent-blue: #3b82f6;
}


.sidebar {
    border-right: none;
    padding: 16px !important;
}

.nav-item.px-3 {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.nav-item {
    font-size: 1rem !important;
}

.section-title {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 8px;
}

/* Inputs */

.search-panel .filter-group input.rz-textbox, .search-panel .filter-group input.rz-inputtext {
    max-width: 150px !important;
}

    .search-panel .input-container input.rz-textbox, .search-panel .filter-group input.rz-textbox.tb-small {
        max-width: 100% !important;
    }

input.rz-textbox {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 1rem;
    box-sizing: border-box;
}

.input-with-icon {
    position: relative;
}

.input-with-button {
    display: flex;
    align-items: stretch;
    gap: 4px;
}

    .input-with-button .rz-textbox {
        flex: 1;
    }

    .input-with-button .rz-button {
        align-self: center;
    }

    .input-with-button .btn-sm {
        min-width: 30px;
        height: 30px;
    }

.input-with-label-button {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

    .input-with-label-button .rz-label {
        white-space: nowrap;
        flex-shrink: 0;
    }

    .input-with-label-button .rz-textbox {
        flex: 1 1 auto;
        min-width: 80px;
    }

    .input-with-label-button .btn-sm {
        min-width: 30px;
        height: 30px;
        flex-shrink: 0;
    }

.search-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
}

/* Badges (The 'H' icons) */
.badge {
    background: var(--accent-purple);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    margin-left: 5px;
}

    .badge.blue {
        background: var(--accent-blue);
    }

/* Checkboxes */
.checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

    .checkbox-list label {
        font-size: 0.85rem;
        display: flex;
        align-items: center;
        gap: 8px;
    }

/* Tag/Chip System */
.tag-container {
    border: 1px solid var(--text-main);
    border-radius: 4px;
    margin-top: 10px;
    display: inline-block;
    margin-right: 12px;
    padding: 4px 8px;
}

/*.tag {
        border: 1px solid var(--text-main);
        border-radius: 4px;
        padding: 2px 8px;
        font-size: 0.75rem;
    }*/

/* Clear Button */
.btn-clear {
    background: #374151;
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

hr {
    border: 0;
    border-top: 1px solid #eee;
    margin: 6px 0;
}

.app-layout {
    height: calc(100vh - 130px) !important;
    display: flex; /* This creates the side-by-side columns */
    align-items: flex-start;
    width: 100%;
    /* background-color: #ffffff; */
}

.inventory-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* This pushes the dropdown to the right */

.header-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
    background-color: #052767 !important;
    position: relative !important;
    padding-bottom: 5px !important;
    width: 100%;
    box-sizing: border-box;
}

.app-layout .header-actions {
    background-color: inherit !important;
}

.top-actions-divider {
    border: 0 !important;
    border-top: 2px solid #000000 !important;
    margin: 0 20px 10px 20px !important;
}

.inventory-responsive-grid .rz-grid-table thead th {
    height: auto !important;
    vertical-align: middle;
}

.inventory-responsive-grid .rz-column-title {
    white-space: normal !important;
    overflow-wrap: anywhere;
    line-height: 1.1;
}

.view-quote-lineitems-box .rz-grid-table thead th {
    height: auto !important;
    vertical-align: middle;
}

    .view-quote-lineitems-box .rz-grid-table thead th .rz-column-title,
    .view-quote-lineitems-box .rz-grid-table thead th .rz-column-title-content {
        white-space: normal !important;
        overflow-wrap: anywhere;
        line-height: 1.1;
    }

.quotes-divider {
    border: 0 !important;
    border-top: 3px solid #000000 !important;
    margin: 4px 12px 8px 12px !important;
}

.view-quote-sections-row {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    gap: 8px;
    flex: 1;
    min-height: 0;
}

.view-quote-page {
    height: auto;
    max-height: none;
    overflow-y: visible;
    overflow-x: visible;
    padding-bottom: 4px;
    display: flex;
    flex-direction: column;
    font-size: clamp(10px, 0.75vw, 13px);
}

    .view-quote-page .rz-button {
        min-height: 30px;
        font-size: 0.82rem;
        padding-top: 0;
        padding-bottom: 0;
    }

    .view-quote-page .rz-label {
        font-size: 0.86rem;
        line-height: 1.1;
    }

    .view-quote-page .rz-inputtext,
    .view-quote-page .rz-dropdown,
    .view-quote-page .rz-datepicker,
    .view-quote-page .rz-textarea {
        font-size: 0.9rem;
    }

        .view-quote-page .rz-textbox,
        .view-quote-page .rz-dropdown,
        .view-quote-page .rz-datepicker .rz-inputtext,
        .view-quote-page .rz-inputtext {
            min-height: 36px !important;
            height: 36px !important;
            line-height: 1.2;
        }

            .view-quote-page .rz-datepicker,
            .view-quote-page .rz-dropdown .rz-inputtext,
            .view-quote-page .rz-dropdown-label,
            .view-quote-page .rz-dropdown-trigger {
                min-height: 36px !important;
                height: 36px !important;
            }

.view-quote-entry-section {
    width: 60%;
    box-sizing: border-box;
    padding: 0 10px;
    min-height: 0;
}

.view-quote-secondary-section {
    width: 40%;
    box-sizing: border-box;
    padding: 0 10px;
    min-height: 0;
}

.view-quote-history-box {
    /* border: 1px solid #d1d5db; */
    border-radius: 6px;
    background: #ffffff;
    overflow: hidden;
}

.view-quote-history-row {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr 1fr 1fr;
    gap: 6px;
    padding: 6px;
    font-size: 0.78rem;
}

.view-quote-history-header {
    font-weight: 600;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}

.view-quote-lineitems-box {
    margin: 4px 12px 0 12px;
    /* border: 1px solid #d1d5db; */
    border-radius: 6px;
    background: #ffffff;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: calc(100% - 40px);
    -webkit-overflow-scrolling: touch;
}

.view-quote-lineitems-row {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 6px;
    padding: 6px;
    font-size: 0.72rem;
}

.view-quote-lineitems-header {
    font-weight: 600;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}

.view-quote-entry-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.view-quote-entry-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .view-quote-entry-col .rz-textarea {
        min-height: unset;
        max-height: none;
    }

/* Styling the dropdown to match the UI */
.view-dropdown {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: white;
    min-width: 200px;
    cursor: pointer;
}

.add-part-dialog .rz-dialog-titlebar {
    justify-content: center;
}

.add-part-dialog .rz-dialog-title {
    margin: 0 auto;
    text-align: center;
}

/* Table styling */
.table-wrapper {
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}


th, td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

th {
    background-color: #fff;
    color: #333;
    font-weight: 600;
}

/* Sticky headers for all tables (native + Radzen) */
table thead th,
.rz-grid-table thead th,
.rz-datatable-table thead th,
.rz-datatable-thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    background: var(--rz-grid-header-background-color, #f9fafb) !important;
    color: var(--rz-grid-header-color, inherit) !important;
    border-bottom: 1px solid var(--rz-grid-border-color, #e5e7eb) !important;
}

/* Filter inputs styling */
.filter-row td {
    padding: 5px 12px 15px 12px;
}

.filter-row input {
    width: 100%;
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Ensures padding doesn't break width */
}

.quote-panel-content {
    width: 100%;
    max-width: 700px;
    box-sizing: border-box;
    padding: 12px;
}

.quote-create-row {
    display: flex;
    align-items: end;
    gap: 8px;
}

.quote-input-group {
    flex: 1;
    min-width: 0;
}

.quote-create-row .rz-textbox {
    height: 30px;
}

.quote-create-btn {
    flex-shrink: 0;
    height: 30px;
}

.quote-added-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

    .quote-added-header h3 {
        margin: 0;
    }

.quote-added-icon {
    color: #000000;
}

.quote-added-details {
    margin-bottom: 20px;
    font-size: 16px;
}

.quote-description {
    margin-bottom: 10px;
}

.quote-divider {
    border: 0 !important;
    border-top: 3px solid #000000 !important;
    margin: 24px 0 16px 0 !important;
    margin-left: -12px !important;
    width: calc(100% + 24px);
    display: block;
}

.quote-divider-black {
    border: 0 !important;
    border-top: 4px solid #000000 !important;
    margin: 12px 0 16px 0 !important;
    margin-left: -12px !important;
    width: calc(100% + 24px);
    display: block;
}

.quote-continue-btn {
    margin-top: 50px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 240px;
    white-space: nowrap;
}

.quote-view-btn {
    margin-top: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 240px;
}

.quotes-grid-host {
    max-height: calc(100vh - 230px);
    overflow: auto;
}

.quotes-grid .rz-datatable-thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background-color: #fff;
}

@media (max-width: 560px) {
    .quote-panel-content {
        padding: 10px;
    }

    .quote-create-row {
        flex-wrap: wrap;
    }

    .quote-create-btn {
        width: 100%;
    }

    .quote-divider,
    .quote-divider-black {
        margin-left: -10px !important;
        width: calc(100% + 20px);
    }
}

/* put refhesh and view open quotes in the same row */

.inventory-container {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}

    .inventory-container .header-actions {
        flex: 0 0 auto !important;
    }

.open-quotes-notice {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin-left: 20px !important;
}

.table-content {
    flex: 0 0 100% !important;
}

.inventory-container .header-actions {
    padding: 10px 20px 0px 20px !important;
}


/* dark mode */

body.dark-mode {
    background: #1f1f1f;
    color: #e5e5e5;
}

    body.dark-mode .table {
        color: #e5e5e5;
    }

        body.dark-mode .table td,
        body.dark-mode .table th {
            background-color: #2b2b2b;
            border-color: #555;
        }

    body.dark-mode .table-striped tbody tr:nth-of-type(odd) > * {
        background-color: #333;
    }

    body.dark-mode a {
        color: #66bfff;
    }



/* row focus */

/* hover */
.rz-grid-table-striped tbody > tr:hover > td {
    background-color: #dbe7f3 !important;
}

/* focused/selected row */
.rz-grid-table-striped tbody > tr.row-focused > td {
    background-color: #bcd6ee !important;
}


.rz-grid-table-striped tbody > tr.row-focused > td {
    box-shadow: inset 0 2px 0 #006bb7, inset 0 -2px 0 #006bb7 !important;
}

    /* optional left accent */
    .rz-grid-table-striped tbody > tr.row-focused > td:first-child {
        box-shadow: inset 2px 0 0 #006bb7, inset 0 2px 0 #006bb7, inset 0 -2px 0 #006bb7 !important;
    }

    .rz-grid-table-striped tbody > tr.row-focused > td:last-child {
        box-shadow: inset -2px 0 0 #006bb7, inset 0 2px 0 #006bb7, inset 0 -2px 0 #006bb7 !important;
    }




.rz-grid-table-striped tbody > tr.row-focused:not(.rz-expanded-row-content) > td {
    background-color: #dbe7f3 !important;
}

.rz-dialog-wrapper.orders-front-wrapper {
    z-index: 11000 !important;
}

.orders-front-dialog {
    z-index: 11001 !important;
}

.rz-dialog-wrapper.price-front-wrapper {
    z-index: 11000 !important;
}

.price-front-dialog {
    z-index: 11001 !important;
}

body.dark-mode .rz-grid-table-striped tbody > tr:not(.rz-expanded-row-content):nth-child(even) > td {
    background-color: #45565e !important;
}

body.dark-mode .rz-grid-table thead th {
    background: #45565e !important;
}

body.dark-mode .inv .open-quotes-notice {
    background: #45565e !important;
}


    body.dark-mode .inv .open-quotes-notice span {
        color: #f6f7fa !important;
    }

body.dark-mode .rz-grid-table-striped tbody > tr:not(.rz-expanded-row-content):nth-child(even) > td {
    background-color: #45565e !important;
}

body.dark-mode .view-quote-history-box {
    border: none !important;
    background: transparent !important;
}

body.dark-mode input.rz-textbox {
    border: 1px solid #45565e !important;
}



body.dark-mode .rz-form-field-content, body.dark-mode .rz-timespanpicker > .rz-inputtext, body.dark-mode .rz-colorpicker, body.dark-mode .rz-lookup-search input, body.dark-mode .rz-numeric, body.dark-mode .rz-datepicker > .rz-inputtext, body.dark-mode .rz-multiselect, body.dark-mode .rz-dropdown, body.dark-mode .mask, body.dark-mode .rz-textarea, body.dark-mode .rz-textbox {
    border: 1px solid #45565e !important;
}

body.dark-mode .inv .search-panel {
    border: 1px solid #45565e !important;
}

body.dark-mode .rz-timespanpicker > .rz-inputtext, body.dark-mode .rz-colorpicker, body.dark-mode .rz-lookup-search input, body.dark-mode .rz-numeric, body.dark-mode .rz-datepicker > .rz-inputtext, body.dark-mode .rz-multiselect, body.dark-mode .rz-dropdown, body.dark-mode .mask, body.dark-mode .rz-textarea, body.dark-mode .rz-textbox {
    color: #f6f7fa !important;
    font-size: 1rem !important;
}

body.dark-mode .rz-multiselect, body.dark-mode .rz-dropdown, body.dark-mode .rz-listbox-header {
    background: #45565e !important;
}

body.dark-mode .rz-multiselect-label-container, body.dark-mode .rz-dropdown-label {
    color: #f6f7fa !important;
}

body.dark-mode .rz-grid-table thead th .rz-column-title {
    text-transform: none !important;
}

body.dark-mode .rz-pager-element .rz-button-box, body.dark-mode .rz-button-md .rz-button-box {
    text-transform: uppercase !important;
}

body.dark-mode .rz-grid-table-striped tbody > tr:hover > td {
    background-color: #2c363b !important;
}

body.dark-mode .rz-grid-table-striped tbody > tr:not(.rz-expanded-row-content):nth-child(even):hover > td {
    background-color: #2c363b !important;
}

body.dark-mode .rz-button.rz-primary.rz-shade-default {
    background-color: #4340D2 !important;
}

body.dark-mode .rz-grid-table-striped tbody > tr.row-focused:not(.rz-expanded-row-content) > td {
    background-color: #2c363b !important;
}

body.dark-mode .rz-grid-table td, body.dark-mode .rz-grid-table th {
    padding: 0.625rem 1rem !important;
}

body.dark-mode .rz-cell-filter {
    padding: 0.5rem !important;
}

body.dark-mode .rz-grid-table thead th.rz-unselectable-text {
    padding: 0 !important;
}

body.dark-mode .rz-grid-table thead th > div:not(.rz-cell-filter) {
    padding: 0.75rem 0 !important;
}

body.dark-mode .rz-grid-table thead th .rz-column-title {
    padding-inline: 1rem 0 !important;
}

body.dark-mode .rz-switch {
    width: 2.25rem !important;
    min-width: 2.25rem !important;
    height: .875rem !important;
}


body.dark-mode .rz-button-md {
    letter-spacing: 1.25px !important;
}

    /* body.dark-mode .rz-button-md {
    padding: .5rem 1rem!important;
    letter-spacing: 1.25px!important;
    text-transform: uppercase!important;
} */

    .rz-pager-element .rz-button-box, .rz-button-md .rz-button-box, body.dark-mode .rz-pager-element .rz-button-box, body.dark-mode .rz-button-md .rz-button-box {
        line-height: 1.5rem !important;
        gap: .25rem !important;
    }

.navbar-dark, .navbar, body.dark-mode .navbar {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    color: #ffffff !important;
}

    body.dark-mode .navbar a {
        color: #ffffff !important;
    }

.nav-item a, body.dark-mode .nav-item a {
    height: 3rem !important;
    line-height: 3rem !important;
}

body.dark-mode hr {
    border-top: 1px solid transparent !important;
}


body.dark-mode .rz-timespanpicker > .rz-inputtext, body.dark-mode .rz-colorpicker, body.dark-mode .rz-lookup-search input, body.dark-mode .rz-numeric, body.dark-mode .rz-datepicker > .rz-inputtext, body.dark-mode .rz-multiselect, body.dark-mode .rz-dropdown, body.dark-mode .mask, body.dark-mode .rz-textarea, body.dark-mode .rz-textbox {
    line-height: 20px !important;
    height: 35px !important;
}

.rz-timespanpicker > .rz-inputtext, .rz-colorpicker, .rz-lookup-search input, .rz-numeric, .rz-datepicker > .rz-inputtext, .rz-multiselect, .rz-dropdown, .mask, .rz-textarea, .rz-textbox {
    line-height: 20px !important;
    height: 35px !important;
}

.view-quote-page .quote-price-messaging-textarea {
    width: 100%;
    display: block;
    box-sizing: border-box;
    height: auto !important;
    min-height: 78px !important;
    line-height: 1.3 !important;
    overflow: auto;
    resize: vertical !important;
}

main, article.content {
    overflow-x: inherit !important;
}


/* horizontal scroll fixes */

/* =============================
   DATA GRID - Horizontal Scroll
   ============================= */
.hs-table-scrollable .rz-data-grid {
    display: flex !important;
    flex-direction: column !important;
    /* height: calc(100vh - 300px) !important; */
}

.hs-table-scrollable .rz-data-grid-data {
    overflow-x: auto !important;
    overflow-y: auto !important;
    max-width: 100% !important;
    flex: 1 !important;
}

.hs-table-scrollable .rz-grid-table-fixed {
    table-layout: auto !important;
    width: max-content !important;
    min-width: 100% !important;
}

.hs-table-scrollable .rz-grid-table th,
.hs-table-scrollable .rz-grid-table td {
    min-width: 100px !important;
}




.quotes-filters-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
    gap: 12px !important;
    padding: 0 20px !important;
    align-items: end !important;
}

    .quotes-filters-row > div {
        min-width: unset !important;
        width: 100% !important;
    }

.app-layout-header ::deep .sidebar-trigger {
    flex: 0 0 auto;
}

.app-layout-header {
    height: 3rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid var(--header-border);
    position: sticky;
    top: 0;
    z-index: 30;
    padding: 0 1rem;
}

.main > .app-layout-env-strip,
.main > .app-layout-header {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}


/* stick thead */


.rz-data-grid-data {
    overflow-y: auto !important;
}

.rz-grid-table thead {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
}

/*
.customers-grid .rz-data-grid-data {
   max-height: calc(100vh - 350px)!important; 
}

.inventory-grid .rz-data-grid-data {   
	max-height: calc(100vh - 245px)!important; 

}

.quotes-grid .rz-data-grid-data {   
	max-height: calc(100vh - 320px)!important; 
}  */

/* sticky column table */

.hs-sticky-first-col .rz-grid-table td:first-child,
.hs-sticky-first-col .rz-grid-table th:first-child {
    position: sticky !important;
    left: 0 !important;
    z-index: 1 !important;
    background-color: var(--rz-grid-row-background-color, var(--rz-base-background-color)) !important;
    box-shadow: 4px 0 6px -2px rgba(0, 0, 0, 0.2);
}

.hs-sticky-first-col .rz-grid-table th:first-child {
    z-index: 999 !important; /* higher than both sticky header and sticky column */
    background-color: var(--rz-grid-header-background-color, var(--rz-base-background-color)) !important;
    box-shadow: 4px 0 6px -2px rgba(0, 0, 0, 0.2);
}

/* table cell width overrides for specific table and columns */



.quotes-grid .rz-grid-table thead th:nth-child(1),
.quotes-grid .rz-grid-table tbody td:nth-child(1) {
    width: 125px !important;
    max-width: 125px !important;
    min-width: 125px !important;
}

.quotes-grid colgroup col:nth-child(1) {
    width: 125px !important;
}

.view-quote-history-box .rz-data-grid {
    max-height: 200px !important;
}

.quote-comments-table .rz-data-grid {
    max-height: 200px !important;
}

.view-quote-lineitems-box .rz-data-grid .rz-data-grid-data {
    max-height: 100% !important;
}

.page {
    max-height: 100vh !important;
    overflow-y: hidden !important;
}

.main {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    overflow: hidden !important;
}

main {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

article.content {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

.rz-numeric {
    position: relative;
    display: inline-block;
    width: 100%;
    min-height: 34px; /* force enough vertical room for two buttons */
}

    .rz-numeric .rz-numeric-input {
        width: 100%;
        height: 34px;
        padding-right: 22px;
        box-sizing: border-box;
    }

    .rz-numeric .rz-numeric-up,
    .rz-numeric .rz-numeric-down {
        position: absolute;
        right: 0;
        left: auto;
        width: 20px;
        height: 17px; /* fixed px, not % — this is the key change */
        min-width: 0;
        min-height: 0;
        padding: 0;
        margin: 0;
        line-height: 17px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        border-left: 1px solid #d3d3d3;
    }

    .rz-numeric .rz-numeric-up {
        top: 0;
        border-bottom: 1px solid #d3d3d3; /* clear divider between the two */
    }

    .rz-numeric .rz-numeric-down {
        bottom: 0;
    }

    .rz-numeric .rz-numeric-button-icon {
        font-size: 9px;
        line-height: 1;
    }

    /* Optional: subtle hover feedback so users can tell they're separate hit targets */
    .rz-numeric .rz-numeric-up:hover,
    .rz-numeric .rz-numeric-down:hover {
        background: rgba(0, 0, 0, 0.06);
    }


/* Inventory Search: horizontal scroll under 1800px, same pattern as hs-table-scrollable */
@media (max-width: 1800px) {

    .inv,
    .inv .app-layout,
    .inv .inventory-main,
    .inv .inventory-container,
    .inv .table-content {
        min-width: 0 !important;
    }


        .inv .table-content .rz-data-grid {
            display: flex !important;
            flex-direction: column !important;
        }

        .inv .table-content .rz-data-grid-data {
            overflow-x: auto !important;
            overflow-y: auto !important;
            max-width: 100% !important;
            flex: 1 !important;
        }

        .inv .table-content .rz-grid-table,
        .inv .table-content .rz-grid-table-fixed {
            table-layout: auto !important;
            width: max-content !important;
            min-width: 100% !important;
        }

            .inv .table-content .rz-grid-table th,
            .inv .table-content .rz-grid-table td {
                min-width: 100px !important;
                white-space: nowrap !important;
            }

        /* Override the header-wrap rule so column titles push the column wider
       instead of wrapping onto multiple lines */
        .inv .table-content .inventory-responsive-grid .rz-column-title,
        .inv .table-content .inventory-responsive-grid .rz-column-title-content {
            white-space: nowrap !important;
            overflow-wrap: normal !important;
        }
}