/* TABLES STYLES */

.sidebar::-webkit-scrollbar {
    width: 8px;
}

.sidebar::-webkit-scrollbar-track {
    background: var(--SideNavBackground);
    box-shadow: none;
    border-radius: 0;
}

.wrapper .sidebar.inner-side-nav::-webkit-scrollbar-track {
    background: #fff;
}

.sidebar::-webkit-scrollbar-thumb {
    background: var(--SideNavBackground);
    border-radius: 4px;
}

.wrapper .sidebar.inner-side-nav::-webkit-scrollbar-thumb {
    background: #fff;
}

.wrapper .sidebar.inner-side-nav::-webkit-scrollbar-thumb:hover {
    background: #fff;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--SideNavBackground);
}

.outer-width {
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    float: left;
}

.outer-width:before, .outer-width:after {
        content: " "; /* 1 */
        display: table; /* 2 */
    }

.outer-width:after {
        clear: both;
    }

/* Tables */
.lesspadding td {
    padding: 2px !important;
}

.tablegroupheader td {
    padding: 5px !important;
    text-align: center;
    background-color: var(--SectionHeaderBackGround);
    color: var(--SectionHeaderTextColor);
}

.tablestyle {
    text-align: left;
    width: 100%;
    border-radius: 4px;
    border-radius: 4px;
    position: relative;
    border: solid 1px #E5E7EB;
}

/* Base table cell wrapping (site-wide) */
.tablestyle td,
.tablestyle th {
    word-break: normal;
    overflow-wrap: break-word;
}

.tablestyle td {
    white-space: normal;
}

.table-responsive .tablestyle
{
    border:none !important;
}
/*.white-bg .tablestyle th:first-child {
    border-radius: 0 0 0 0 !important;
}

.white-bg .tablestyle th:last-child {
    border-radius: 0 0 0 0 !important;
}

.white-bg .tablestyle .roundheader th:first-child {
    border-radius: 10px 0 0 0 !important;
}

.white-bg .tablestyle .roundheader th:last-child {
    border-radius: 0 10px 0 0 !important;
}

*/
.white-bg .tablestyle .roundheader th {
    border-top: none;
}

.tablestyle table {
    width: 100%;
}

.tablestyle th {
    text-transform: uppercase;
    white-space: nowrap;
    /* Column headings should match table body background */
    background-color: var(--Surface-3) !important;
    color: var(--TableHeaderText) !important;
}

.tablestyle th a {
        color: white !important;
    }

.tablestyle th a:hover {
            color: white !important;
        }

.innerformtable th {
    background-color: var(--InnerFormTableHeaderBackgroundColor);
    color: var(--InnerFormTableHeaderTextColor);
    padding: 7px;
    vertical-align: top;
    border: 1px solid #AAA;
}

.innerformtable {
    border-bottom: 1px solid #AAA;
    border-left: 1px solid #AAA;
    border-right: 1px solid #AAA;
}

.secondarycolor th {
    background-color: var(--secondarycolor);
    color: #FFFFFF;
    padding: 7px;
    vertical-align: top;
}

.tablestyle td {
    padding: 7px 10px;
    border-top: 1px solid #CCC;
    vertical-align: top;
    font-weight: 500;
    font-size: 12px;
    background: var(--Surface-3) !important;
    color: var(--whitebgtext);
}


.tablestyle td a {
        color: var(--Interactive-Default) !important;
        text-decoration: underline;
        font-weight: bold;
    }

td {
    padding: 8px;
    vertical-align: top;
}

.tablestyle a {
    color: black;
    text-decoration: none;
}

.tablestyle a:hover {
        text-decoration: underline;
    }

.scroll-tabel table thead {
        position: sticky;
        top: 0;
    }

.scroll-tabel table thead tr {
            width: 100%;
            table-layout: fixed;
        }

.scroll-tabel table tbody tr {
        width: 100%;
        table-layout: fixed;
    }

.scroll-tabel1 table thead {
        position: sticky;
        top: 0;
    }

.scroll-tabel1 table thead tr, .scroll-tabel1 table tbody tr {
            /*  display: table;*/
            width: 100%;
            table-layout: fixed;
        }

.editremove {
    width: 170px;
}

.secondaryheaders th {
    background-color: var(--secondarycolor);
}

/* Form Layout */
.center-table table {
    width: 100%;
}

.center-table table tr {
        display: flex;
        justify-content: center;
    }

.center-table table tr td {
            padding: 3px;
        }

.strikethrough {
    position: relative;
    display: inline-block;
}

.strikethrough::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 50%;
        width: 100%;
        height: 1px;
        background-color: red;
    }

.form-feild .dropdown-check-list .form-control {
        border: 1px solid #000;
        border-radius: 5px;
        padding: 5px 20px;
        appearance: none;
        font-size: 12px;
        overflow-y: hidden;
    }

.center-table table tr {
        display: flex;
        justify-content: center;
    }

.center-table table tr td {
            padding: 3px;
        }

.shortdropdown {
    height: 30px !important;
}

.width50 {
    width: 70px !important;
}

.width75 {
    width: 75px !important;
}

.width90 {
    width: 90px !important;
}

.width100 {
    width: 100px !important;
}

.width125 {
    width: 125px !important;
}

.width130 {
    width: 130px !important;
}

.width150 {
    width: 220px !important;
}

.width160 {
    width: 160px !important;
}

.width167 {
    width: 167px !important;
}

.width175 {
    width: 175px !important;
}

.width200 {
    width: 200px !important;
}

.width225 {
    width: 225px !important;
}

.width240 {
    width: 240px !important;
}

.width250 {
    width: 250px !important;
}

.width275 {
    width: 275px !important;
}

.width300 {
    width: 300px !important;
}

.width325 {
    width: 325px !important;
}

.width350 {
    width: 350px !important;
}

.width375 {
    width: 375px !important;
}

.width400 {
    width: 400px !important;
}

.width425 {
    width: 425px !important;
}

.width450 {
    width: 450px !important;
}

.width475 {
    width: 475px !important;
}

.width500 {
    width: 500px !important;
}

.width600 {
    width: 600px !important;
    max-width: 100%;
}

.width700 {
    width: 700px !important;
    max-width: 100%;
}

.width800 {
    width: 800px !important;
    max-width: 100%;
}

.width900 {
    width: 900px !important;
    max-width: 100%;
}

.width1000 {
    width: 1000px !important;
    max-width: 100%;
}

.width1100 {
    width: 1100px !important;
    max-width: 100%;
}

.width1200 {
    width: 1200px !important;
    max-width: 100%;
}

.width1400 {
    width: 1400px !important;
    max-width: 100%;
}

.maxwidth {
    max-width: 100% !important;
}

/* Top Nav (default: not stretched) */
.topnav {
  
    display: flex;
    justify-content: space-around; /* default spacing */
    align-items: center;
    width: 100%;
}

/* Normalize any inline SVGs so they don't blow up widths */
.topnav svg {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0;
}

/* ---------------- Stretch variant (opt-in with class="topnav stretch") ---------------- */
.topnav.stretch {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start !important; /* override space-around */
    align-items: stretch;
    gap: 0;
    width: 100%;
}

/* Treat each direct child as a column (no Bootstrap class dependency) */
    .topnav.stretch > * {
        flex: 1 1 0 !important; /* equal-width columns */
        display: flex !important;
        min-width: 0;
        margin: 0 !important;
        float: none !important;
    }

/* ---------------- Mobile: horizontal slider instead of wrapping ---------------- */
@media (max-width: 768px) {
    .topnav,
    .topnav.stretch {
        flex-wrap: nowrap; /* keep tabs on one row */
        justify-content: flex-start !important;
        overflow-x: auto; /* enable horizontal scroll */
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch; /* smooth iOS scrolling */
    }
        /* each tab keeps its natural width (no shrinking) */
        .topnav > *,
        .topnav.stretch > * {
            flex: 0 0 auto !important; /* don't grow or shrink */
            min-width: max-content; /* size to content */
        }
            /* clickable area stays on one line with comfortable padding */
            .topnav a.nav-link,
            .topnav.stretch > * > a,
            .topnav.stretch > * > button {
                display: inline-flex !important;
                white-space: nowrap;
                padding: 10px 16px;
            }
}

*/
/* Mobile Phones */
@media (max-width: 600px) {
    .Email-container {
        flex-direction: column;
        gap: 10px;
    }
}

/* Tablets */
@media (min-width: 601px) and (max-width: 768px) {
    .Email-container {
        flex-direction: column;
        gap: 10px;
    }
}

/* Small Laptops */
@media (min-width: 769px) and (max-width: 1024px) {
    .Email-container {
        flex-direction: column;
        gap: 10px;
    }
}

/* Desktops */
@media (min-width: 1025px) {
    .Email-container {
        flex-direction: row;
        /*        gap: 10px;*/
    }
}

/* Desktops */
/*@media (min-width: 1025px) {
    .Email-container {
        flex-direction: row;
        gap: 10px;
    }
}

.scroll-tabel table thead {
        position: sticky;
        top: 0;
    }

.scroll-tabel table thead tr {
            width: 100%;
            table-layout: fixed;
        }

.scroll-tabel table tbody tr {
        width: 100%;
        table-layout: fixed;
    }

.scroll-tabel1 table thead {
        position: sticky;
        top: 0;
    }

.scroll-tabel1 table thead tr, .scroll-tabel1 table tbody tr {
            /*  display: table;*/
            width: 100%;
            table-layout: fixed;
        }

.paymentform td {
    padding: 0px;
}

.ccpaymentform td {
        padding: 0px;
    }

/* Signatures */
@media (min-width:600px) {
    .form-600 .signature {
        width: 320px;
        z-index: 10000;
        position: absolute;
        left: 125px;
        top: -400px;
    }
}

/*Job Assignment*/
@media (max-width: 480px) {
    #datePicker {
        width: 100px !important;
        font-size: 12px;
        padding: 4px;
    }

    #btnPrevious,
    #btnNext {
        font-size: 12px;
        padding: 4px 8px;
    }

    #dateNavBar label {
        font-size: 12px;
    }
}

/*EmailCalendar*/
@media (max-width: 768px) {
    .calendar-day-header, .calendar-slot-cell {
        min-width: 120px;
    }

    .time-column {
        min-width: 50px;
    }
}

.quote-wrapper p > strong {
            font-size: 16px;
        }

.quote-table {
    padding: 15px 0;
    border-bottom: 4px solid #5a5b5b;
    overflow: auto;
}

.quote-table table {
        width: 100%;
    }

.quote-table tr:first-child {
        background: #737373;
        color: #fff;
    }

.quote-table tr th {
        padding: 8px 10px;
        font-size: 14px;
        font-weight: 500;
        line-height: 1;
    }

.quote-table tr td {
        font-size: 14px;
        padding: 3px 10px;
        vertical-align: initial;
    }

.remove-width {
    width: auto !important;
}

/* Calendars*/
@media (min-width: 1280px) and (max-width: 374px) {
    .calendarWidth {
        width: 1280px;
    }
}

.Keyboardtablestyle td {
    max-width: 10px;
    border-bottom: 1px solid #AAA;
    vertical-align: top;
    font-weight: 400;
}

.training {
    padding-left: 15px !important;
}

.wrapper .sidebar ul li a.active svg path {
        stroke: #000;
    }

.user-auth .d-flex {
    align-items: center;
    gap: 12px;
}

.user-auth .user-img {
    background: var(--UserImage);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
}

.user-auth .user-auth-name {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--Heading);
}

.user-auth .d-flex .auth-arrow {
    margin-left: auto;
}

.user-auth {
    padding: 9px 16px;
    border-bottom: 1px solid var(--Outline);
    height: 61px;
    overflow: hidden;
    min-height: 61px;
    padding-top: 50px;
    position: relative;
    background-color: var(--LogoBackground);
}

.search-area .form-control {
        background-color: var(--Surface-2);
        border: 0;
        width: 279px;
        max-width: 100%;
        border-radius: 8px;
        height: 36px;
        font-weight: 500;
        font-size: 14px;
        padding-left: 40px;
        color: var(--Text);
        box-shadow: none !important;
    }

.user-auth-area {
    margin-left: 25px;
}

.wrapper .sidebar ul li a.active svg path {
        stroke: var(--Interactive-Default);
    }

/* New css updated */
.tabs-controls {
    background-color: var(--Surface-1);
    padding: 4px;
    border-radius: 4px;
    margin-bottom: 12px;
}

.tabs-controls.pl-1.d-flex {
        margin-bottom: 0px;
    }

.tabs-controls li .nav-link {
        font-weight: 600;
        font-size: 14px;
        line-height: 100%;
        letter-spacing: 0px;
        text-transform: uppercase;
        padding: 7px 16px;
        color: var(--Text);
    }

.tabs-controls li {
        list-style: none;
    }

.tabs-controls li .nav-link:hover {
            color: var(--Heading);
        }

.tabs-controls li .nav-link.active {
            background-color: var(--buttonsecondary);
            color: var(--Heading);
            box-shadow: 0px 1px 4px 0px #090C0B14;
        }

.nav-view-toggle li .nav-link.active svg path {
                stroke: #000000;
            }

.form-signle .form-control {
    /*    height: 37px;
    border-radius: 4px;
    border: 1px solid var(--Divider);
    font-weight: 400;
    font-size: 14px;
    color: var(--Text);
    padding: 8px 12px;
    background-color: var(--Surface-3);
    box-shadow: none;*/
}

/* Table css start */

.tabulator, .tabulator-table .tabulator-tableholder {
    border: none !important;
    margin-bottom: 0;
    padding-bottom: 0;
    background: var(--Surface-4) !important;
}

.tabulator-tableholder {
    border-bottom: none !important;
    box-shadow: none !important;
}

.tabulator-cell {
    overflow: visible !important;
    position: relative; /* ensure tooltip positioning is relative to the cell */
    z-index: 1; /* help stacking above rows */
}

.tabulator-cell a {
        color: var(--Tabulatorell) !important;
    }

.tabulator-footer {
    background-color: white; /* or match table background */
    border-top: none; /* remove if not needed */
    height: 0px; /* if you want to hide it completely */
}

/* Row background and hover behavior */
.tabulator .tabulator-row {
    background: var(--Surface-4) !important;
    cursor: default !important;
}

.tabulator .tabulator-row:hover {
        background: var(--Surface-4) !important;
    }

/* Clean up all cell and header borders */
.tabulator .tabulator-cell,
.tabulator .tabulator-row,
.tabulator .tabulator-col,
.tabulator .tabulator-header {
    border: none !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: 1px solid var(--Divider) !important;
    background: var(--Surface-4) !important;
}

.tabulator-col-title {
    color: var(--TableHeaderText) !important;
}

.tablestyle th, .tablestyle td, .tabulator-row .tabulator-cell, .tabulator-col-content {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    padding: 14px 12px !important;
    color: var(--Tabulatorell) !important;
    vertical-align: middle !important;
    text-align: left !important;
    border-color: var(--Divider);
    box-shadow: none !important;
    outline: none !important;
    vertical-align: top !important;
}

.tablestyle th {
    background: var(--TableHeaderBackground);
}

.tablestyle td {
    background: var(--Surface-3);
}

/*.table-custom-main {
    border-radius: 4px;
    overflow: hidden;
}

*/
.table-custom-main thead th {
    border-bottom: 1px solid var(--Divider);
}

.table-icon {
    flex: 0 0 auto;
    width: 16px;
}

.table-icon svg {
        display: block;
    }

.tablestyle .td-dropdown {
    width: 101px;
    max-width: 101px;
    text-align: center;
}

.table-responsive.table-custom-main-wrapper .dt-layout-start,
.table-responsive.table-custom-main-wrapper .dt-layout-end {
    display: none !important;
}

.table-custom-main-wrapper .col-12.dt-layout-full.col-md {
    padding-left: 0px;
}

.tablestyle th br {
    display: none;
}

.user-auth-area .dropdown-toggle::after {
    display: none;
}

.sidebar-table-content {
    flex: 1;
    padding-left: 12px;
}

.tabbar .activetab .icon svg path {
    stroke: var(--Interactive-Default)
}

.tabbar .icon-arrow svg path {
    stroke: var(--Interactive-Default)
}

.tabbar-mobile-menu li a.active svg path {
                stroke: #000;
            }

.auth-head {
    gap: 8px;
    margin-bottom: 16px;
}

.auth-head .mid-text {
    flex: 1;
}

.auth-head .mid-text p {
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        letter-spacing: 0px;
        color: var(--Text);
        vertical-align: middle;
    }

.modal.modal-sidebar-profile .tabs-controls {
    margin-bottom: 24px;
}

.icon-filed .form-control {
        padding-left: 36px;
    }

.sidebar-table-content .form-800 {
    padding: 0px;
}

.tabulator-row .tabulator-cell svg {
    min-width: 16px;
}

.truncated-text {
    display: inline;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.action-with-filter .controls-setting-right.ml-auto {
    margin-bottom: 0;
}

.tablestyle svg {
    fill: none;
    stroke: var(--IconDefault) !important;
}

.controls-setting-right {
    margin-bottom: 12px;
}

table.product-table > tr {
    display: table;
}

.tablestyle .tablestyle.mytablestyle tr td {
    border: 0;
}

.user-auth img {
    width: 100%;
    height: 100%;
    right: 0;
    max-width: calc(100% - 15px);
    max-height: calc(100% - 15px);
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.scroll-tabel .sticky-top td {
    border: 0;
}

.sidebar-table-content.email-sidebar {
    width: 100%;
}

.tablestyle td.box-ic-left {
    text-align: center !important;
    font-size: 10px;
}

.tablestyle td.box-ic-left i {
        display: block
    }

.sec-product-table .flex-grow-1 {
    padding-left: 15px;
}

.tabs-controls.mx-width {
    width: max-content;
    margin-left: auto;
}

/* Desktop table polish + Mobile responsive cards (full set) */

/* Base */
.responsive-table td,
.responsive-table th {
    vertical-align: top;
}

/* ---------------------------------------------------------------------------
   Table cards (header + actions bar)
   --------------------------------------------------------------------------- */
.table-card {
/*    background: var(--Surface-3);
    border: 1px solid var(--Divider);*/
    --table-card-chrome-radius: 11px; /* inner clip: pairs with header top + body/list bottom corners */
    /*
     * Stacking (low → high): table/list body (1) < header title/chrome strip (2) < list search toolbar (3) < header filters/actions (4).
     * Dense tabbed headers override these to the 200+ range so dropdowns stay modal-safe; see :has(.table-card-header--with-tabs).
     */
    --table-card-z-list-body: 1;
    --table-card-z-header-title: 1;
    --table-card-z-header-chrome: 2;
    --table-card-z-list-search: 3;
    --table-card-z-header-filters: 4;
    /* Whole body lifts above header chrome while search is focused (upward glow); beaten by --table-card-z-header-elevated when menus open */
    --table-card-z-body-search-focus: 3;
    --table-card-z-header-elevated: 5;
    border-radius: 12px;
    /* visible so header .dropdown-menu can extend over .table-card-body (was hidden, clipped menus) */
    overflow: visible;
    margin-bottom: 0; 
}

/* Tabbed/dense header pages: keep filter row above list search + glow (200+) — mirror former fixed z-index values */
.table-card:has(> .table-card-header.table-card-header--with-tabs) {
    --table-card-z-header-chrome: 200;
    --table-card-z-header-filters: 201;
    --table-card-z-body-search-focus: 202;
    --table-card-z-header-elevated: 204;
}

.table-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 15px 20px;
    background: var(--CardHeaderBackground);
    /* Use --Outline so the rule stays visible over page grey ( Divider often matches BodyBackground ) */
    border-bottom: 1px solid var(--Outline, #e5e5e5);
    position: relative;
    z-index: var(--table-card-z-header-chrome, 2);
    border-top-left-radius: var(--table-card-chrome-radius);
    border-top-right-radius: var(--table-card-chrome-radius);
}

.table-card-header > h3:first-of-type,
.table-card-header-title {
    position: relative;
    z-index: var(--table-card-z-header-title, 1);
}

    .table-card-header h3 {
        font-size: 15px;
        font-weight: 600;
        line-height: 1.3;
        margin: 0;
        color: var(--CardHeaderText);
        text-transform: none;
    }

/* Vendor orders list: keep column labels in title case (overrides .tablestyle th uppercase) */
.vendor-orders-list-table.tablestyle th {
    text-transform: none;
}

/* ---------------------------------------------------------------------------
   Products module — list tables: widths & typography (avoid inline th/td/header)
   --------------------------------------------------------------------------- */
.tablestyle.table-list-w-full {
    width: 100%;
}

.tablestyle .list-col-w-7p { width: 7%; }
.tablestyle .list-col-w-10p { width: 10%; }
.tablestyle .list-col-w-12p { width: 12%; }
.tablestyle .list-col-w-15p { width: 15%; }
.tablestyle .list-col-w-27p { width: 27%; }
.tablestyle .list-col-w-30p { width: 30%; }
.tablestyle .list-col-w-31p { width: 31%; }
.tablestyle .list-col-w-35p { width: 35%; }
.tablestyle .list-col-w-40p { width: 40%; }
.tablestyle .list-col-w-70p { width: 70%; }
.tablestyle .list-col-w-fit { width: fit-content; }
.tablestyle .list-col-actions-72 { width: 72px; }
.tablestyle .list-col-w-50px { width: 50px; }

.tablestyle .list-td-actions-right {
    width: 72px;
    text-align: right;
}

.tablestyle .list-cell-align-right {
    text-align: right !important;
}

/* Product list: toolbar + category tables under group header */
.product-list-toolbar {
    margin-bottom: 0;
}

.product-list-toolbar-search {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.product-list-toolbar-search .product-list-search-input {
    flex: 1;
    min-width: 0;
}

.product-list-category-table.tablestyle.responsive-table.pos-grid.table-card-data-table {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.product-list-thumb {
    height: 30px;
}

/* Product list empty state action layout */
.empty-state-actions.empty-state-actions--stacked {
    display: grid;
}

.empty-state-actions-row {
    display: flex;
    gap: 20px;
}

/* Discount code name links in list */
.discount-code-name-link {
    background: none;
    border: none;
    color: var(--linkcolor);
    text-decoration: underline;
}

/* Package list — empty state (shared chrome; was inline in partial) */
.package-empty-wrap {
    width: 100%;
    background: #ffffff;
    border-radius: 8px;
    padding: 60px 16px 80px;
}

.package-empty-wrap--compact-padding {
    padding: 40px 12px 40px;
}

.package-empty-state {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.package-empty-icon {
    width: 100%;
    max-width: 320px;
    min-height: 0;
    height: auto;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .package-empty-icon img {
        max-width: min(320px, 100%);
        max-height: 260px;
        width: auto;
        height: auto;
        object-fit: contain;
        display: block;
        margin: 0 auto;
    }

.package-empty-title {
    font-weight: 800;
    font-size: 28px;
    line-height: 1.2;
    margin: 8px 0 10px;
    color: #0f172a;
}

.package-empty-title--secondary {
    font-size: 24px;
}

.package-empty-help {
    margin: 0 auto 18px;
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
    max-width: 620px;
}

.package-empty-help--secondary {
    font-size: 12px;
    max-width: 560px;
}

.package-empty-state .button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    min-height: 36px;
}

.package-empty-state .button.package-empty-cta--secondary {
    padding: 6px 15px;
    font-size: 12px;
}

    .package-empty-state .button svg {
        width: 12px;
        height: 12px;
    }

    .package-empty-state .button.package-empty-cta--secondary svg {
        width: 12px;
        height: 12px;
    }

@media (max-width: 768px) {
    .package-empty-wrap {
        padding: 40px 12px 60px;
    }

    .package-empty-icon {
        max-width: 260px;
        margin-bottom: 16px;
    }

        .package-empty-icon img {
            max-width: 200px;
            max-height: 172px;
        }

    .package-empty-title {
        font-size: 24px;
    }
}

/* Action Required — status group header (matches table-card list chrome) */
.action-required-status-group {
    margin: 0;
    padding: 0;
}

.action-required-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px;
    margin: 0;
    background: var(--CardHeaderBackground);
    border-bottom: 1px solid var(--Divider);
    border-radius: 0 !important;
}

    .action-required-section-header h3 {
        font-size: 15px;
        font-weight: 600;
        line-height: 1.3;
        margin: 0;
        color: var(--CardHeaderText);
        text-transform: none;
    }

/* Service edit: associated categories toolbar */
.service-associated-categories-header .button {
    margin: 0 !important;
}

/* Discount codes list — empty state (same chrome pattern as package list) */
.discount-codes-empty-wrap {
    width: 100%;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e3e6ea;
    padding: 60px 16px 80px;
}

.discount-codes-empty-state {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.discount-codes-empty-title {
    font-weight: 800;
    font-size: 28px;
    line-height: 1.2;
    margin: 8px 0 10px;
    color: #0f172a;
}

.discount-codes-empty-help {
    margin: 0 auto 18px;
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
    max-width: 620px;
}

.discount-codes-empty-state .button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    min-height: 36px;
}

    .discount-codes-empty-state .button svg {
        width: 12px;
        height: 12px;
    }

@media (max-width: 768px) {
    .discount-codes-empty-wrap {
        padding: 40px 12px 60px;
    }

    .discount-codes-empty-title {
        font-size: 24px;
    }
}

/* Title row with optional back control (e.g. edit screens, report viewers) */
.table-card-header-title {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
    gap: 0;
}

    .table-card-header-title .back-btn {
        flex-shrink: 0;
        margin-right: 12px;
    }

.table-card-header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    position: relative;
    z-index: var(--table-card-z-header-filters, 4);
}

    .table-card-header-actions .buttons {
        display: flex;
        align-items: center;
    }

    /*
     * Outline toolbar buttons on table cards (header chrome + order line-item actions).
     * Apply class `table-card-outline-btn` on each `.btn` in `.table-card-header-actions` or `td.order-product-actions`.
     */
    .btn.table-card-outline-btn {
        /* Transparent fill; border slightly darker than --buttonbordercolor for definition */
        background: transparent !important;
        border: 1px solid var(--Outline) !important;
        border: 1px solid color-mix(in srgb, var(--buttonbordercolor) 72%, var(--Heading) 28%) !important;
        padding: 6px 14px !important;
        border-radius: 8px !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        cursor: pointer;
        color: var(--CardHeaderText) !important;
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        margin: 0 !important;
        box-shadow: none !important;
    }

        .btn.table-card-outline-btn:hover {
            background: var(--Surface-2) !important;
            border-color: var(--Outline) !important;
            border-color: color-mix(in srgb, var(--buttonbordercolor) 55%, var(--Heading) 45%) !important;
            color: var(--CardHeaderText) !important;
        }

        .btn.table-card-outline-btn svg path[stroke] {
            stroke: currentColor;
        }

    .btn-group.icon-button .btn.dropdown-toggle.table-card-outline-btn {
        background: transparent !important;
        color: var(--CardHeaderText) !important;
        border: 1px solid var(--Outline) !important;
        border: 1px solid color-mix(in srgb, var(--buttonbordercolor) 72%, var(--Heading) 28%) !important;
    }

        /* Same spec as `.btn.table-card-outline-btn:hover` — without this the rule above overrides hover (transparent wins). */
        .btn-group.icon-button .btn.dropdown-toggle.table-card-outline-btn:hover,
        .btn-group.icon-button .btn.dropdown-toggle.table-card-outline-btn:focus,
        .btn-group.icon-button .btn.dropdown-toggle.table-card-outline-btn.focus,
        .btn-group.icon-button.show > .btn.dropdown-toggle.table-card-outline-btn {
            background: var(--Surface-2) !important;
            border-color: var(--Outline) !important;
            border-color: color-mix(in srgb, var(--buttonbordercolor) 55%, var(--Heading) 45%) !important;
            color: var(--CardHeaderText) !important;
            box-shadow: none !important;
        }

    /* Compact padding on filter icon buttons */
    .btn.table-card-outline-btn.table-card-filter-btn {
        padding: 6px 10px !important;
    }

    .dropdown.btn-filter-drop .btn.table-card-outline-btn[data-toggle="dropdown"] {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }

.table-card-body {
    padding: 0;
    position: relative;
    z-index: var(--table-card-z-list-body, 1);
    /* clip inner table to card bottom corners; overflow not on .table-card so header dropdowns are not clipped */
    overflow: hidden;
    /* Let list search focus ring / soft glow extend slightly past the clip edge (notably upward); keeps bottom radius clipping intact */
    overflow-clip-margin: 20px;
    border-bottom-left-radius: var(--table-card-chrome-radius, 11px);
    border-bottom-right-radius: var(--table-card-chrome-radius, 11px);
}

/* Event attendee / signup: name-search autosuggest is position:absolute below the field — must not be clipped by .table-card-body */
.table-card-body:has(.event-customer-reg) {
    overflow: visible;
    overflow-clip-margin: unset;
}

/* Customer questionnaires: header is omitted until ≥1 row; match header’s top rounding on body */
.customer-questionnaires-card.customer-questionnaires-card--headerless > .table-card-body {
    border-top-left-radius: var(--table-card-chrome-radius, 11px);
    border-top-right-radius: var(--table-card-chrome-radius, 11px);
}

/* Customer module tabs (Orders, Quotes, Returns, Subscriptions list, Payments list): grid width + optional headerless form body */
.customer-module-table-card > .table-card-body .tablestyle {
    width: 100%;
}

.customer-module-table-card.customer-module-table-card--headerless > .table-card-body {
    border-top-left-radius: var(--table-card-chrome-radius, 11px);
    border-top-right-radius: var(--table-card-chrome-radius, 11px);
}

.customer-tab-row-cursor {
    cursor: pointer;
}

.customer-tab-table-footer-actions {
    padding: 16px 20px;
}

/* Stacked flushed sections inside one card (e.g. Returns) */
.customer-returns-card .table-card-body > .white-bg.table-card-body-white-bg + .white-bg.table-card-body-white-bg {
    border-top: 1px solid var(--Outline, #e5e5e5);
}

.customer-payments-table .customer-payments-col-actions {
    width: 1px;
    white-space: nowrap;
}

.customer-orders-card .customer-orders-header-actions-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 10px;
    row-gap: 8px;
}

.customer-returns-card .customer-returns-rounded-block {
    border-radius: 14px;
}

.customer-returns-card .customer-returns-summary-amount {
    font-size: large;
    font-weight: 700;
}

.customer-returns-card .customer-returns-main-table thead th:nth-child(1) {
    width: 140px;
}

.customer-returns-card .customer-returns-main-table thead th:nth-child(2) {
    width: 150px;
}

.customer-returns-card .customer-returns-main-table thead th:nth-child(3) {
    width: 140px;
}

.customer-returns-card .customer-returns-main-table thead th:nth-child(4) {
    width: 120px;
}

.customer-returns-card .customer-returns-main-table thead th:nth-child(5) {
    width: 120px;
}

.customer-returns-card .customer-returns-main-table thead th:nth-child(6) {
    width: 140px;
}

.customer-returns-card .customer-returns-main-table thead th:nth-child(7) {
    width: 90px;
}

.customer-returns-card .customer-returns-credit-history-empty {
    margin: 0;
    padding: 20px 16px;
    text-align: center;
    font-size: 14px;
    color: var(--SecondaryText, #6b7280);
}

.customer-returns-card .customer-returns-list-empty-wrap {
    padding: 16px;
}

.customer-subscriptions-tab-card .subscription-empty-btn-group {
    column-gap: 18px;
    row-gap: 10px;
}

.customer-subscriptions-tab-card .customer-subscription-product-link.buttonaslink {
    text-align: left !important;
}

@supports not (overflow-clip-margin: 20px) {
    .table-card-body:has(.table-toolbar) .table-toolbar {
        padding-top: 14px;
    }
}

/*
 * Focus glow sits on the body's search control and blurs upward. Sibling stacking would keep
 * header chrome above the body, hiding the top blur. Lift the body while search is focused
 * (still below --table-card-z-header-filters inside the header, but body sibling can exceed header chrome).
 * When header dropdown menus are open, elevate the whole header above the lifted body.
 */
.table-card:has(.table-toolbar .search.form-control:is(:focus, :focus-visible)) .table-card-body,
.table-card:has(.table-list-shell > input.search.form-control:is(:focus, :focus-visible)) .table-card-body {
    z-index: var(--table-card-z-body-search-focus, 3);
}

.table-card:has(.table-card-header .dropdown-menu.show) .table-card-header {
    z-index: var(--table-card-z-header-elevated, 5);
}

/* Flush: header + search + table, full width; no outer inset */
.table-card-body .white-bg {
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Flush list tables: edge-to-edge in card body */
.table-card-body > .white-bg.table-card-white-bg-flush {
    padding: 0 !important;
    margin: 0 !important;
}

@media (min-width: 768px) {
    .table-card-body > .white-bg.table-card-white-bg-flush > table.table-card-data-table.responsive-table {
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .table-card-body > .white-bg.table-card-white-bg-flush > table.table-card-data-table.responsive-table tbody tr:nth-child(even) {
        background: transparent;
    }
}

/* List view (warm leads / opps / cold / customers): no white inset panel behind the data table */
.form-1200.lead-dashboard-pipeline .table-card-body .white-bg:has(#lead-list),
.form-1200.cold-leads-page .table-card-body .white-bg:has(#lead-list),
.form-800 .table-card-body .white-bg:has(#customer-table),
.form-800 .table-card-body .white-bg:has(#deals-table),
.form-1000 .table-card-body .white-bg:has(#event-attendees-table),
.form-1200.portal-support-tickets-page .table-card-body .white-bg:has(#portal-support-tickets-list) {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

.form-800 .table-card-body .white-bg:has(#customer-table) #customer-list.table-list-shell,
.form-800 .table-card-body .white-bg:has(#deals-table) #deals-list.table-list-shell,
.form-1000 .table-card-body .white-bg:has(#event-attendees-table) #event-attendees-list.table-list-shell,
.form-1200.portal-support-tickets-page .table-card-body .white-bg:has(#portal-support-tickets-list) #portal-support-tickets-list.table-list-shell {
    padding: 0 !important;
    margin: 0 !important;
}

/* Search-only strip above list: same flush background (no extra white band) */
.form-1200.lead-dashboard-pipeline .table-card-body .white-bg:has(.table-toolbar):not(:has(#lead-list)),
.form-1200.cold-leads-page .table-card-body .white-bg:has(.table-toolbar):not(:has(#lead-list)) {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Toolbar row below table-card header: search (+ optional List.js pagination) */
.table-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 1rem;
    row-gap: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: var(--table-card-z-list-search, 3);
    background: transparent;
}

/* Rule under search-only row spans the flex-grown field width */
.table-toolbar .search.form-control {
    flex: 1 1 0%;
    min-width: 0;
    max-width: none;
    margin-bottom: 0;
    /* Horizontal 20px matches .table-card-header (15px 20px) so placeholder aligns with title text */
    padding: 12px 20px;
    border-bottom: 1px solid var(--Outline, #e5e5e5) !important;
}

/* Pagination siblings: underline must span entire toolbar row, not stop at search field edge */
.table-toolbar:has(.pagination) {
    border-bottom: 1px solid var(--Outline, #e5e5e5);
}

.table-toolbar:has(.pagination) .search.form-control {
    border-bottom: none !important;
}

/* List search strips: soft primary glow above and below the bar on focus */
.table-toolbar .search.form-control:focus,
.table-toolbar .search.form-control:focus-visible,
.table-card-body input.search.form-control:focus,
.table-card-body input.search.form-control:focus-visible,
.product-list-card-body > input.search.form-control:focus,
.product-list-card-body > input.search.form-control:focus-visible,
.service-workflow-card-body > input.search.form-control:focus,
.service-workflow-card-body > input.search.form-control:focus-visible,
#feature-list .feature-search-wrap .search.form-control:focus,
#feature-list .feature-search-wrap .search.form-control:focus-visible {
    outline: none !important;
    border-color: color-mix(in srgb, var(--buttonprimarybackground, #2563eb) 62%, var(--Outline, #9ca8b8) 38%) !important;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--buttonprimarybackground, #2563eb) 26%, transparent),
        0 0 0 6px color-mix(in srgb, var(--buttonprimarybackground, #2563eb) 9%, transparent),
        0 -14px 36px color-mix(in srgb, var(--buttonprimarybackground, #2563eb) 17%, transparent),
        0 14px 36px color-mix(in srgb, var(--buttonprimarybackground, #2563eb) 17%, transparent) !important;
    position: relative;
    /* Slightly above .table-toolbar strip so the field paints over sibling controls (e.g. pagination) */
    z-index: calc(var(--table-card-z-list-search, 3) + 1);
}

/* Same color as .table-card-header border-bottom + .table-toolbar search rules (--Outline) */
.table-card-body .table-toolbar + .table-card-scroll-top .table-card-scroll-inner,
.table-card-body .table-list-shell > input.search.form-control + .table-card-scroll-top .table-card-scroll-inner {
    border-top: 1px solid var(--Outline, #e5e5e5);
}

/* One edge between toolbar and grid: .tablestyle outer border conflicts with inner divider + toolbar rules */
.table-card-body .table-toolbar + table.tablestyle {
    border-top: none !important;
}

.table-card-body .table-toolbar + .table-card-scroll-top table.tablestyle {
    border-top: none !important;
}

/* List.js pagination; override .white-bg list markers */
.table-toolbar ul.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    list-style: none;
    list-style-type: none;
    padding: 0;
    padding-inline-start: 0;
    margin: 0 0 0 auto;
    flex: 0 0 auto;
}

.table-toolbar ul.pagination li {
    margin: 0;
    padding: 0;
    list-style: none !important;
    list-style-type: none !important;
}

.table-toolbar ul.pagination li::marker {
    display: none;
}

.table-toolbar ul.pagination li a.page {
    display: inline-block;
    padding: 0.35rem 0.65rem;
    border-radius: 4px;
    text-decoration: none;
    border: 1px solid var(--Outline, #ccc);
    color: var(--Text, #333);
    background: var(--buttonsecondary, #fafafa);
    min-width: 2.25rem;
    text-align: center;
}

.table-toolbar ul.pagination li.active a.page {
    font-weight: 600;
    border-color: var(--buttonprimarybackground, #226989);
    background: var(--ActiveTabBackground, #e8eef5);
}

.table-toolbar ul.pagination li.disabled a.page {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

.table-card-body input.search.form-control {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding: 12px 20px;
    border-radius: 0 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid var(--Outline, #e5e5e5) !important;
}

/* Same inset as above; Jobs / Service Workflow use these bodies instead of .table-card-body */
.product-list-card-body > input.search.form-control,
.service-workflow-card-body > input.search.form-control {
    padding: 12px 20px;
}

.table-card-body .tablestyle {
    border-radius: 0 !important;
    margin-bottom: 0 !important;
}

/* Empty / compact promo blocks: restore comfortable inset (no table) */
.table-card-body .empty-state-wrap {
    padding: 20px;
}

/* ---------------------------------------------------------------------------
   Group headers inside table cards (e.g. Product Category sections)
   --------------------------------------------------------------------------- */
.table-group {
    /* spacing between groups should show page background, not white */
    margin: 0;
    padding: 10px 0 0 0;
    background: var(--BodyBackground);
}

.table-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px;
    margin: 0;
    background: var(--TableGroupHeaderBackground);
    border-bottom: 1px solid var(--Divider);
    border-radius: 0 !important;
}

    .table-group-header h3 {
        font-size: 15px;
        font-weight: 600;
        line-height: 1.3;
        margin: 0;
        color: var(--CardHeaderText);
        text-transform: none;
    }

    .table-group-header .btn {
        background: transparent !important;
        border: 1px solid var(--Outline) !important;
        border: 1px solid color-mix(in srgb, var(--buttonbordercolor) 72%, var(--Heading) 28%) !important;
        padding: 6px 14px !important;
        border-radius: 8px !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        cursor: pointer;
        color: var(--CardHeaderText) !important;
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        margin: 0 !important;
        box-shadow: none !important;
    }

        .table-group-header .btn:hover {
            background: var(--Surface-2) !important;
            border-color: var(--Outline) !important;
            border-color: color-mix(in srgb, var(--buttonbordercolor) 55%, var(--Heading) 45%) !important;
            color: var(--CardHeaderText) !important;
        }

        .table-group-header .btn svg path {
            stroke: currentColor;
        }

.table-group .tablestyle.responsive-table {
    margin-bottom: 0 !important;
    border-radius: 0 !important;
}

.table-group .tablestyle .roundheader th {
    border-top: none !important;
}

/* =========================
   DESKTOP / TABLET (>=768px)
   Force true table layout so "card" rules never leak into desktop
   ========================= */
@media (min-width: 768px) {
    .responsive-table {
        display: table !important;
        width: 100%;
        table-layout: fixed; /* honors your % widths consistently */
        border-collapse: separate;
        border-spacing: 0;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        background: #fff;
    }

        .responsive-table thead {
            display: table-header-group !important;
        }

        .responsive-table tbody {
            display: table-row-group !important;
        }

        .responsive-table tr {
            display: table-row !important;
            background: transparent;
            border: 0;
            border-radius: 0;
            box-shadow: none;
            padding: 0;
            margin: 0;
        }

        .responsive-table th,
        .responsive-table td {
            display: table-cell !important;
            width: auto; /* allow your inline % widths to do their thing on desktop */
            padding: 12px 14px;
            background: transparent;
            vertical-align: middle;
        }

        .responsive-table thead th {
            position: sticky;
            top: 0;
            z-index: 2;
            background: #f9fafb;
            font-weight: 700;
            text-transform: uppercase;
            font-size: 12px;
            letter-spacing: .02em;
            border-bottom: 2px solid #e5e7eb;
        }

        .responsive-table tbody td {
            border-bottom: 1px solid #e5e7eb;
        }

        .responsive-table tbody tr:nth-child(even) {
            background: #fbfdff;
        }

        .responsive-table tbody tr:hover {
            background: #f8fafc;
        }

        .responsive-table td a {
            text-decoration: underline;
            font-weight: 600;
        }

            .responsive-table td a:hover {
                text-decoration: underline;
            }

        .responsive-table td.phone,
        .responsive-table th.phone,
        .responsive-table td.actions,
        .responsive-table th.actions,
        .responsive-table td.row-actions,
        .responsive-table th.row-actions {
            text-align: right;
            white-space: nowrap;
        }
        /* Desktop: never show mobile labels */
        .responsive-table td:before {
            content: none !important;
            display: none !important;
        }
}

/* =========================
   MOBILE (<768px): cards
   ========================= */
@media (max-width: 767px) {
    /* Standard label width for mobile field column */
    .responsive-table {
        --mobile-label-width: 95px; /* tweak 90-110 */
        border-radius: 0; /* optional: remove outer rounding on mobile */
        border: 0; /* avoid double borders with cards */
        background: transparent;
    }
        /* 1) Hide header */
        .responsive-table thead {
            display: none;
        }
        /* 2) Force ALL table layers to be transparent so the page/wrapper background shows between cards */
        table.responsive-table,
        table.responsive-table.tablestyle,
        .table-card-data-table.responsive-table,
        table.revenuereport-sort-table.responsive-table,
        #email-calendar-table.responsive-table,
        #vendor-table.responsive-table,
        .responsive-table tbody,
        .responsive-table tbody.list,
        .responsive-table tr,
        .responsive-table td,
        .responsive-table th {
            background: transparent !important;
        }
        /* 3) Block layout */
        .responsive-table,
        .responsive-table tbody,
        .responsive-table tr,
        .responsive-table td {
            display: block;
            width: 100%;
        }
            /*
             * Desktop column helpers (.tablestyle .list-col-w-27p { width: 27%; } etc.) use two classes
             * and beat the rule above (one class + td). Product list (and any responsive card row) then
             * stays ~27% wide → flex value column collapses → overflow-wrap:anywhere stacks one character per line.
             */
            .responsive-table.tablestyle td[class*="list-col-w-"] {
                width: 100% !important;
                max-width: none !important;
            }
            /* 4) Card styling */
            .responsive-table tr {
                background: #fff !important;
                border: 1px solid #e5e7eb;
               
                box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 6px 16px rgba(0,0,0,0.06);
                padding: 6px 10px;
              
            }
            /* 5) Cells become a label/value row (standard height) */
            .responsive-table td {
                border: 0 !important;
                padding: 6px 0 !important; /* keep consistent row height */
                display: flex !important;
                gap: 10px;
                align-items: flex-start;
                justify-content: flex-start;
                text-align: left;
                background: transparent !important;
            }
                /* Prevent desktop inline widths affecting mobile */
                .responsive-table td[style],
                .responsive-table th[style] {
                    width: auto !important;
                    max-width: none !important;
                }
                /* Label column */
                .responsive-table td:before {
                    content: attr(data-label);
                    font-weight: 600;
                    color: #6b7280;
                    flex: 0 0 var(--mobile-label-width);
                    min-width: var(--mobile-label-width);
                }
                /* Value column (keeps it from drifting far right, wraps normally) */
                .responsive-table td > * {
                    flex: 0 1 auto;
                    min-width: 0;
                    max-width: calc(100% - var(--mobile-label-width));
                    white-space: normal;
                    word-break: normal;
                    overflow-wrap: anywhere;
                    text-align: left;
                    margin-left: 0;
                }

                /* Product list: inventory/price used bare text; as a flex td child it collapsed + overflow-wrap:anywhere broke per character. One wrapper + grow fixes it. */
                .responsive-table.pos-grid.product-list-category-table.table-card-data-table td.inventory > .product-list-td-value,
                .responsive-table.pos-grid.product-list-category-table.table-card-data-table td.price > .product-list-td-value {
                    flex: 1 1 0% !important;
                    min-width: 0 !important;
                    max-width: none !important;
                    overflow-wrap: break-word !important;
                    word-break: normal !important;
                }

                /* Product list mobile: delete is in desktop last column only; hiding avoids orphan trash row on cards. */
                .responsive-table.pos-grid.product-list-category-table.table-card-data-table td.row-actions,
                .responsive-table.pos-grid.product-list-category-table.table-card-data-table td.actions {
                    display: none !important;
                }

                .responsive-table td .buttonaslink,
                .responsive-table td a {
                    display: inline;
                    white-space: normal;
                }
                /* Invoice Items: td is flex-row; keep all lines in one value column (stacked). */
                .responsive-table td.invoice-items .invoice-items-stack {
                    display: flex;
                    flex-direction: column;
                    align-items: stretch;
                    gap: 6px;
                    flex: 1 1 auto;
                    min-width: 0;
                    width: 100%;
                }
                /* Actions cell label is empty (data-label=""), so hide it */
                .responsive-table td[data-label=""]:before {
                    content: "";
                    min-width: 0;
                    flex: 0 0 auto;
                }
                /* Actions row: same height as other rows, centered horizontally */
                .responsive-table td.row-actions,
                .responsive-table td.actions {
                    justify-content: center !important;
                    padding: 6px 0 !important; /* same as other rows */
                    margin: 0 !important;
                    border-top: 0;
                    align-items: center;
                }
                    /* Remove label gutter entirely for actions row */
                    .responsive-table td.row-actions:before,
                    .responsive-table td.actions:before {
                        content: "" !important;
                        flex: 0 0 0 !important;
                        min-width: 0 !important;
                        margin: 0 !important;
                        padding: 0 !important;
                    }
                    /* Center action buttons with safe spacing */
                    .responsive-table td.row-actions .icon-button,
                    .responsive-table td.actions .icon-button,
                    .responsive-table td.row-actions .buttons,
                    .responsive-table td.actions .buttons {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        gap: 18px;
                        width: 100%;
                        margin: 0 !important;
                        padding: 0 !important;
                    }
                    /* Tap target without adding extra vertical row height */
                    .responsive-table td.row-actions button.btn,
                    .responsive-table td.actions button.btn {
                        min-width: 40px;
                        min-height: 40px;
                        padding: 0 !important;
                        border-radius: 10px;
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        line-height: 1;
                    }

                        .responsive-table td.row-actions button.btn svg,
                        .responsive-table td.actions button.btn svg {
                            display: block;
                            margin: 0;
                        }
}

.scroll-horizontal {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.scroll-horizontaltable {
    min-width: 1200px;
    width: max-content;
}

    .scroll-horizontaltable th,
    .scroll-horizontaltable td {
        white-space: nowrap;
    }

/* ---------------------------------------------------------------------------
   Soft pill tones (shared: subscription-style pills, avatars, company tags,
   lead funnel tags). Richer than the old pastel set; still light UI chips.
   --------------------------------------------------------------------------- */
.tag-pill-tone--0 { background: #c8e2f9; color: #0f3561; }
.tag-pill-tone--1 { background: #b8ead8; color: #0a4a32; }
.tag-pill-tone--2 { background: #ffe3bc; color: #6b3b00; }
.tag-pill-tone--3 { background: #e2cff9; color: #4a1a88; }
.tag-pill-tone--4 { background: #f7c9da; color: #861040; }
.tag-pill-tone--5 { background: #c8f0de; color: #134c29; }
.tag-pill-tone--6 { background: #d6defc; color: #2d2777; }
.tag-pill-tone--7 { background: #dceca8; color: #35530f; }
.tag-pill-tone--8 { background: #f7c8e4; color: #861040; }
.tag-pill-tone--9 { background: #b0dff5; color: #064a6d; }
.tag-pill-tone--10 { background: #ffd6a8; color: #7d2a0f; }
.tag-pill-tone--11 { background: #dbe4ee; color: #243546; }

.tag-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.tag-pill-soft {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    max-width: 100%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   Table card list pages (list shell + primary data table + shared column UX)
   --------------------------------------------------------------------------- */

.table-card-scroll-inner.no-x-scroll {
    overflow-x: hidden;
}

.table-card-scroll-inner {
    overflow-x: auto;
    width: auto;
    overflow-y: visible !important;
    max-height: none !important;
}

.table-card-scroll-top {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    transform: rotateX(180deg);
    -webkit-overflow-scrolling: touch;
    margin-top: 0;
    padding-top: 0;
}

.table-card-scroll-top > * {
    transform: rotateX(180deg);
    display: inline-block;
    vertical-align: top;
}

.table-list-shell {
    overflow: visible !important;
}

.table-list-shell .email {
    word-break: break-all;
}

/* Plain-text List.js sort keys (plain strings; links stay visible in the cell) */
.list-sort-key-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.table-list-shell table td.name,
.table-list-shell table td.company,
.table-list-shell table td.createdate-cell,
.table-card-data-table td.name {
    position: relative;
}

.table-list-shell .table-card-data-table.tablestyle th,
.table-list-shell .table-card-data-table.tablestyle td {
    vertical-align: middle !important;
}

.table-card-data-table {
    border-collapse: collapse;
    border-spacing: 0;
}

.table-card-data-table th,
.table-card-data-table td {
    white-space: nowrap;
    overflow: visible !important;
    box-sizing: border-box;
}

.table-card-data-table.tablestyle th {
    font-weight: 600;
}

.table-card-data-table th.primarycolumn {
    color: #1f2937;
}

.table-card-data-table th.secondarycolumn {
    color: #6b7280;
}

.table-card-data-table td.primarycolumn {
    font-weight: 600;
    color: #1f2937;
}

.table-card-data-table td.secondarycolumn {
    font-weight: 400;
    color: #6b7280;
}

.table-card-data-table th.primarycolumn .buttonaslink,
.table-card-data-table td.primarycolumn a,
.table-card-data-table td.primarycolumn .buttonaslink {
    font-weight: inherit;
    color: inherit;
}

.table-card-data-table th.secondarycolumn .buttonaslink {
    font-weight: inherit;
    color: inherit;
}

.table-card-data-table th.primarycolumn .sort.buttonaslink,
.table-card-data-table th.secondarycolumn .sort.buttonaslink {
    /* Sort labels use header ink, not gray primary/secondary column tokens (.buttonaslink inherits gray on those th) */
    color: var(--TableHeaderText, var(--Heading, #03183C)) !important;
}

/* portal-support-tickets-table: class tablestyle — List.js sort headers use styles.css tokens */

.table-card-data-table td.secondarycolumn .subscription-line-pill,
.table-card-data-table td.secondarycolumn .extra-count-badge {
    font-weight: 500;
}

.custom-tooltip {
    position: relative;
    display: inline-block;
}

.tooltip-box {
    z-index: 999999;
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid #154a7e;
    padding: 6px 10px;
    border-radius: 6px;
    width: max-content;
    max-width: 400px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.custom-tooltip:hover .tooltip-box {
    visibility: visible;
    opacity: 1;
}

@media (max-width: 768px) {
    .tooltip-box {
        max-width: 300px;
        left: 20vw;
        transform: translateX(-60%);
    }
}

@media (max-width: 480px) {
    .tooltip-box {
        left: 25vw;
        transform: translateX(-50%);
        max-width: 300px;
    }
}

.tooltip-portal {
    position: fixed;
    z-index: 2147483647;
    background: #fff;
    border: 1px solid #154a7e;
    padding: 6px 10px;
    border-radius: 6px;
    width: auto;
    max-width: min(400px, 90vw);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-height: 260px;
    overflow-y: auto;
    box-shadow: 0 6px 18px rgba(0,0,0,.15);
}

.table-card-data-table td.subscriptions-col {
    white-space: normal;
    max-width: 440px;
    vertical-align: middle;
}

.subscription-pills-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.subscription-line-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    max-width: 100%;
    word-break: break-word;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.extra-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    color: #0f3561;
    background: #c8e2f9;
    border: 1px solid #93b9e4;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
    vertical-align: middle;
    box-sizing: border-box;
}

.form-800 .dropdown-check-list .itm {
    height: auto !important;
}

/* Dense table-card header + grid/list toggle — scoped to .form-800 / .form-1200 to avoid overrides elsewhere */
.form-800 .table-card-header .table-card-header-actions,
.form-1200 .table-card-header .table-card-header-actions {
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.form-800 .btn.table-card-outline-btn:not(.table-card-filter-btn),
.form-1200 .btn.table-card-outline-btn:not(.table-card-filter-btn),
.form-1400 .btn.table-card-outline-btn:not(.table-card-filter-btn) {
    min-height: 36px;
    padding: 0 12px !important;
    gap: 8px !important;
    line-height: 1.2;
}

/* Gear-only "Customize columns": flex defaults to main-axis start, so the SVG hugged the top-left; center + kill SVG baseline gap */
.table-card-header-actions button.btn.table-card-outline-btn[title="Customize columns"] {
    justify-content: center;
    align-items: center;
    line-height: 0;
}

.table-card-header-actions button.btn.table-card-outline-btn[title="Customize columns"] svg {
    display: block;
    flex-shrink: 0;
}

.form-800 .table-card-header .table-card-header-actions button.btn.table-card-outline-btn[title="Customize columns"],
.form-1200 .table-card-header .table-card-header-actions button.btn.table-card-outline-btn[title="Customize columns"] {
    padding: 0 !important;
    width: 36px;
    min-width: 36px;
}

.form-800 .table-card-header .table-card-header-actions > .buttons .btn.table-card-outline-btn svg path,
.form-1200 .table-card-header .table-card-header-actions > .buttons .btn.table-card-outline-btn svg path {
    stroke: currentColor;
}

.form-800 .btn.table-card-outline-btn.dropdown-toggle::after,
.form-1200 .btn.table-card-outline-btn.dropdown-toggle::after,
.form-1400 .btn.table-card-outline-btn.dropdown-toggle::after {
    border-top-color: currentColor;
}

.dropdown.btn-filter-drop .btn.table-card-outline-btn svg path {
    fill: currentColor;
}

.table-card-header .toolbar-view-segmented {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid color-mix(in srgb, var(--buttonbordercolor) 72%, var(--Heading) 28%);
    border-radius: 8px;
    overflow: hidden;
    background: transparent;
}

.table-card-header .toolbar-view-segmented .tabs-controls {
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}

.table-card-header .toolbar-view-segmented .nav-link {
    min-height: 36px !important;
    width: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: rgba(21, 74, 126, 0.45) !important;
}

.table-card-header .toolbar-view-segmented .nav-link svg path {
    stroke: currentColor;
}

.table-card-header .toolbar-view-segmented li + li .nav-link {
    border-left: 1px solid color-mix(in srgb, var(--buttonbordercolor) 72%, var(--Heading) 28%) !important;
}

.table-card-header .toolbar-view-segmented .nav-link.active {
    background: var(--buttonprimarybackground, #154a7e) !important;
    color: #fff !important;
}

/*
 * table-card-header--with-tabs: stacking vars are set on .table-card via :has(> .table-card-header.table-card-header--with-tabs) above.
 * Legacy explicit z-index rules removed — chrome uses var(--table-card-z-header-chrome), filters via .table-card-header-actions / .btn-group use var(--table-card-z-header-filters).
 */
.sidebar-table-content > .table-card,
.form-800 > .table-card,
.form-1200 > .table-card {
    overflow: visible;
}

.form-800 .table-card .table-card-header .btn-group,
.sidebar-table-content .table-card .table-card-header .btn-group,
.form-1200 .table-card .table-card-header .btn-group {
    position: relative;
    z-index: var(--table-card-z-header-filters, 4);
}

/*
 * Bootstrap modal backdrop is z-index 1040. Header chrome above uses z-index 200+ so filter dropdowns
 * stack over the card body; combined with layout stacking contexts that can paint above the backdrop
 * (e.g. Customers create-modal). While a modal is open, drop header stacking so the grey overlay covers it.
 */
body.modal-open .form-800 .table-card > .table-card-header.table-card-header--with-tabs,
body.modal-open .sidebar-table-content .table-card > .table-card-header.table-card-header--with-tabs,
body.modal-open .form-1200 .table-card > .table-card-header.table-card-header--with-tabs {
    z-index: auto !important;
}

body.modal-open .form-800 .table-card .table-card-header .btn-group,
body.modal-open .sidebar-table-content .table-card .table-card-header .btn-group,
body.modal-open .form-1200 .table-card .table-card-header .btn-group {
    z-index: auto !important;
}

.form-800 .table-card .table-card-header .dropdown-menu,
.sidebar-table-content .table-card .table-card-header .dropdown-menu,
.form-1200 .table-card .table-card-header .dropdown-menu {
    z-index: 2500;
}

.form-800 .table-card .table-card-header .dropdown-menu button.dropdown-item,
.sidebar-table-content .table-card .table-card-header .dropdown-menu button.dropdown-item,
.form-1200 .table-card .table-card-header .dropdown-menu button.dropdown-item {
    color: #212529 !important;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    font-weight: 400;
    cursor: pointer;
}

.form-800 .table-card .table-card-header .dropdown-menu button.dropdown-item:hover,
.form-800 .table-card .table-card-header .dropdown-menu button.dropdown-item:focus,
.sidebar-table-content .table-card .table-card-header .dropdown-menu button.dropdown-item:hover,
.sidebar-table-content .table-card .table-card-header .dropdown-menu button.dropdown-item:focus,
.form-1200 .table-card .table-card-header .dropdown-menu button.dropdown-item:hover,
.form-1200 .table-card .table-card-header .dropdown-menu button.dropdown-item:focus {
    color: #16181b !important;
    background-color: #f8f9fa !important;
}

.table-card-header.table-card-header--with-tabs > h3:first-child {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 12px;
}

.table-card-header-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    flex: 0 1 auto;
    min-width: 0;
}

.table-header-tabs {
    flex: 0 1 auto;
    min-width: 0;
}

.table-card-header--with-tabs .table-header-tabs .tabs-controls {
    display: flex;
    flex-direction: row !important;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-card-header--with-tabs .table-header-tabs .tabs-controls .nav-item {
    flex: 0 0 auto;
}

.table-card-header--with-tabs .table-header-tabs .tabs-controls .nav-link {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 8px 14px;
    border-radius: 8px;
    box-sizing: border-box !important;
    border: 1px solid transparent !important;
}

.table-card-header--with-tabs .table-header-tabs .tabs-controls .nav-link:not(.active) {
    border: 1px solid var(--Outline) !important;
    border: 1px solid color-mix(in srgb, var(--buttonbordercolor) 72%, var(--Heading) 28%) !important;
    background: var(--Surface-3) !important;
    color: var(--Heading) !important;
    box-shadow: none !important;
}

.table-card-header--with-tabs .table-header-tabs .tabs-controls .nav-link:not(.active):hover {
    border: 1px solid var(--Outline) !important;
    border: 1px solid color-mix(in srgb, var(--buttonbordercolor) 55%, var(--Heading) 45%) !important;
    background: var(--Surface-2) !important;
    color: var(--Heading) !important;
}

.table-card-header--with-tabs .table-header-tabs .tabs-controls .nav-link.active {
    border: 1px solid transparent !important;
}

/* Account / member credit history buckets — same segmented pill look as inventory (.table-card-header--with-tabs). */
.acct-credit-history-tabs .table-header-tabs .tabs-controls {
    display: flex;
    flex-direction: row !important;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.acct-credit-history-tabs .table-header-tabs .tabs-controls .nav-item {
    flex: 0 0 auto;
}

.acct-credit-history-tabs .nav-item .nav-link.acct-credit-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: row !important;
    margin-right: 0 !important;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 8px 14px;
    border-radius: 8px;
    box-sizing: border-box !important;
    border: 1px solid transparent !important;
    cursor: pointer;
}

.acct-credit-history-tabs .table-header-tabs .tabs-controls .nav-link.acct-credit-pill:not(.active) {
    border: 1px solid var(--Outline) !important;
    border: 1px solid color-mix(in srgb, var(--buttonbordercolor) 72%, var(--Heading) 28%) !important;
    background: var(--Surface-3) !important;
    color: var(--Heading) !important;
    box-shadow: none !important;
}

.acct-credit-history-tabs .table-header-tabs .tabs-controls .nav-link.acct-credit-pill:not(.active):hover {
    border: 1px solid var(--Outline) !important;
    border: 1px solid color-mix(in srgb, var(--buttonbordercolor) 55%, var(--Heading) 45%) !important;
    background: var(--Surface-2) !important;
    color: var(--Heading) !important;
}

.acct-credit-history-tabs .table-header-tabs .tabs-controls .nav-link.acct-credit-pill.active {
    border: 1px solid transparent !important;
    background: var(--buttonprimarybackground, #154a7e) !important;
    color: #fff !important;
    box-shadow: none !important;
}

@media (max-width: 991.98px) {
    .form-800 .table-card-header {
        flex-wrap: wrap !important;
        row-gap: .5rem;
    }

    .form-800 .table-card > .table-card-header.table-card-header--with-tabs,
    .form-1200 .sidebar-table-content .table-card-header.table-card-header--with-tabs,
    .form-1200 .table-card > .table-card-header.table-card-header--with-tabs {
        flex-wrap: wrap !important;
        row-gap: .5rem;
    }

    /* Customer list + lead pipeline: title row + actions (tabs + buttons) on narrow viewports */
    .form-800 .table-card-header--with-tabs .table-card-header-right,
    .form-1200 .table-card-header--with-tabs .table-card-header-right {
        flex: 1 1 100%;
        width: 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 10px;
    }

    .form-1200 .table-card-header--with-tabs .table-header-tabs {
        flex: 1 1 auto;
        min-width: 0;
    }

    .form-1200 .table-card-header--with-tabs .table-header-tabs .tabs-controls {
        flex-wrap: wrap !important;
    }

    .form-800 .table-card-header--with-tabs .table-card-header-actions,
    .form-1200 .table-card-header--with-tabs .table-card-header-actions {
        flex: 0 1 auto;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        max-width: 100%;
    }

    .form-800 .table-card-header--with-tabs .table-card-header-actions > *,
    .form-1200 .table-card-header--with-tabs .table-card-header-actions > * {
        flex: 0 0 auto;
    }
}

@media (max-width: 767.98px) {
    .table-card-data-table,
    .table-list-search-input {
        width: 100% !important;
        max-width: 100% !important;
    }

    .table-card-data-table th,
    .table-card-data-table td {
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }

    /* Event attendees: same responsive-table card rows as #customer-table — avoid per-character breaks on bare text cells */
    .table-card-data-table#event-attendees-table th,
    .table-card-data-table#event-attendees-table td {
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    #event-attendees-table.responsive-table td > .evt-attendee-cell-value {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        max-width: none !important;
        overflow-wrap: break-word !important;
        word-break: normal !important;
    }
}

/* ==========================================================================
   Lead pipeline (LeadDashboardPipeline.cshtml) — kanban + list; mirrors CustomerList_Partial table/list shell tokens from tables.css.
   Root wrapper: .lead-dashboard-pipeline on the same element as .form-1200.
   ========================================================================== */

.lead-dashboard-pipeline {
    --tile-bg: #F6F4FB;
    --tile-bg-top: #F4F1FB;
    --tile-border: rgba(15,39,66,.05);
    --tile-shadow: 0 16px 30px rgba(24,32,51,.16);
    --tile-shadow-hover: 0 20px 40px rgba(24,32,51,.20);
    --text: #1C2430;
    --text-soft: rgba(28,36,48,.78);
    --section: rgba(28,36,48,.55);
    --brand-navy: #0F2742;
    --icon-greyblue: #6E7C8C;
    --icon-bg: #EAF1FF;
    --panel-bg: #E9ECF7;
    --panel-border: rgba(15,39,66,.06);
    --row-divider: rgba(15,39,66,.10);
    --pill-blue-1: #7FB1FF;
    --pill-blue-2: #5A93F8;
    --pill-purple-1: #BDA5FF;
    --pill-purple-2: #9A78FF;
    --stageHdrBg: #E9ECF7;
    --stageHdrHi: #F5F7FA;
    --stageHdrBorderOuter: rgba(15,39,66,.22);
    --stageHdrBorderInner: rgba(15,39,66,.10);
    --stageHdrHighlight: rgba(245,247,250,.95);
    --stageHdrShadow: 0 10px 18px rgba(24,32,51,.16);
    --stageHdrRadius: 10px;
}

.scroll-top {
        overflow-x: auto;
        overflow-y: hidden !important;
        white-space: nowrap;
        transform: rotateX(180deg);
        -webkit-overflow-scrolling: touch;
    }

        .scroll-top > * {
            transform: rotateX(180deg);
        }

    .lead-stage-container {
        display: inline-flex;
        flex-wrap: nowrap;
        gap: 0;
        width: max-content;
        min-width: 100%;
        overflow: visible;
    }

    .stage-column {
        padding-left: 6px !important;
        padding-right: 6px !important;
        flex: 0 0 var(--col-width, 280px) !important;
        max-width: var(--col-width, 280px) !important;
        min-width: var(--col-width, 280px) !important;
    }

    .lead-stage-container.is-scroll {
        overflow: visible;
        -webkit-overflow-scrolling: touch;
    }

        .lead-stage-container.is-scroll .stage-column {
            flex: 0 0 var(--col-width, 280px) !important;
            max-width: var(--col-width, 280px) !important;
            min-width: var(--col-width, 280px) !important;
        }

    .label-stage {
        display: block;
        width: 100%;
        box-sizing: border-box;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .label-inprogress {
        background: var(--LeadStageBackground);
        border-radius: 10px;
        color: var(--LeadStageText);
        padding: 10px;
        width: 100%;
        box-sizing: border-box;
    }

    .lead-container {
        margin-bottom: 12px;
        cursor: pointer;
    }

    .placeholder-clone {
        border: 1px dashed #9aa;
        border-radius: 6px;
    }

    .tabs-inline > .topnav {
        width: auto;
        justify-content: flex-start;
    }

        .tabs-inline > .topnav > .nav-item {
            flex: 0 0 auto;
        }

    .flex-grow-1 {
        min-width: 0;
    }

    @media (max-width: 767.98px) {
        .lead-dashboard-pipeline.form-1200 .table-card-body .table-toolbar .table-list-search-input {
            width: 100% !important;
            max-width: 100% !important;
        }
    }

    .lead-container {
        background: transparent !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .lead-item.lead-card-v2 {
        background-color: #FFFFFF !important;
        border: 1px solid var(--tile-border) !important;
        border-radius: 10px !important;
        padding: 10px 10px 10px 10px !important;
        box-shadow: var(--tile-shadow) !important;
        transition: transform .15s ease, box-shadow .15s ease;
        min-width: 0 !important;
        max-width: 100%;
        box-sizing: border-box;
        width: 100%;
        position: relative;
        overflow: hidden;
    }

        .lead-item.lead-card-v2::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(244,241,251,.85) 0%, rgba(255,255,255,0) 60%);
            pointer-events: none;
            z-index: 0;
        }

        .lead-item.lead-card-v2 > * {
            position: relative;
            z-index: 1;
        }

    .lead-container:hover .lead-item.lead-card-v2 {
        transform: translateY(-1px);
        box-shadow: var(--tile-shadow-hover) !important;
    }

    .lead-card-v2 .lead-name {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        margin: 0 0 10px 0 !important;
        padding-bottom: 10px !important;
        border-bottom: 1px solid rgba(15,39,66,.08) !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .lead-card-v2 .lead-name-text {
        flex: 1;
        min-width: 0;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: var(--text) !important;
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        line-height: 1.25 !important;
    }

    .lead-card-v2 .lead-tags {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        margin: 0 0 12px 0 !important;
    }

    .lead-card-v2 .lead-tag-pill {
        display: inline-block !important;
        padding: 5px 12px !important;
        border-radius: 999px !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06) !important;
        border: 1px solid rgba(0, 0, 0, 0.06) !important;
        box-sizing: border-box;
    }

    .lead-card-v2 .lead-contact {
        display: grid !important;
        grid-template-columns: 34px minmax(0, 1fr) !important;
        gap: 0px !important;
        align-items: center !important;
        margin-bottom: 12px !important;
    }

    .lead-card-v2 .icon-square {
        width: 28px !important;
        height: 25px !important;
        border-radius: 10px !important;
        background: var(--icon-bg) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto;
    }

    .lead-card-v2 .contact-text {
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        color: var(--text) !important;
        min-width: 0 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    .lead-card-v2 .lead-contact.lead-contact--questionnaires {
        align-items: flex-start !important;
        padding-top: 5px !important;
    }

    .lead-card-v2 .lead-contact--questionnaires .icon-square {
        margin-top: 2px !important;
    }

    .lead-card-v2 .lead-questionnaire-names {
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }

    .lead-card-v2 .lead-questionnaire-name-line {
        padding-top: 5px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        color: var(--text) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }

    .lead-questionnaire-names--list .lead-questionnaire-name-line {
        padding-top: 5px !important;
        font-size: inherit !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }

    .lead-list-questionnaires-cell .lead-questionnaire-names--list {
        min-width: 0 !important;
        max-width: 280px !important;
    }

    .lead-card-v2 .lead-divider {
        height: 1px !important;
        background: rgba(15,39,66,.10) !important;
        margin: 12px 0 10px 0 !important;
    }

    .lead-card-v2 .activity-title {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--section) !important;
        margin: 0 0 10px 0 !important;
    }

    .lead-card-v2 .activity-panel {
        background: var(--panel-bg) !important;
        border: 1px solid var(--panel-border) !important;
        border-radius: 14px !important;
        overflow: hidden !important;
    }

    .lead-card-v2 .activity-row {
        display: grid !important;
        grid-template-columns: 22px minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: center !important;
        padding: 6px 8px !important;
    }

        .lead-card-v2 .activity-row + .activity-row {
            border-top: 1px solid var(--row-divider) !important;
        }

        .lead-card-v2 .activity-row .icon-square {
            background: transparent !important;
            width: 20px !important;
            height: 20px !important;
            border-radius: 0 !important;
        }

    .lead-card-v2 .activity-label {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: var(--text) !important;
        line-height: 1.25 !important;
        min-width: 0 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

        .lead-card-v2 .activity-label .lbl {
            font-weight: 600 !important;
        }

        .lead-card-v2 .activity-label .val {
            color: var(--text-soft) !important;
            font-weight: 600 !important;
        }

        .lead-card-v2 .activity-label.note-text {
            font-style: italic !important;
            color: rgba(28,36,48,.72) !important;
            font-weight: 600 !important;
        }

            .lead-card-v2 .activity-label.note-text,
            .lead-card-v2 .activity-label.note-text .lbl,
            .lead-card-v2 .activity-label.note-text .val {
                font-weight: 600 !important;
            }

    .lead-card-v2 svg {
        width: 18px !important;
        height: 18px !important;
    }

    .lead-card-v2 .icon-navy svg,
    .lead-card-v2 .icon-navy svg * {
        fill: #36506A !important;
    }

    .lead-card-v2 .icon-navy svg.deal-dollar-tile-icon circle {
        fill: none !important;
        stroke: #36506A !important;
    }
    .lead-card-v2 .icon-navy svg.deal-dollar-tile-icon text {
        fill: #36506A !important;
    }

    .lead-card-v2 .icon-greyblue svg,
    .lead-card-v2 .icon-greyblue svg * {
        fill: #6C8EAF !important;
    }

    .label-inprogress {
        position: relative;
        width: 100%;
        box-sizing: border-box;
        background: var(--KanbanHeaderBackground);
        border-radius: var(--stageHdrRadius);
        padding: 10px 14px;
        min-height: 44px;
        display: flex;
        align-items: center;
        color: var(--KanbanHeaderText) !important;
        border: 1px solid var(--stageHdrBorderOuter);
        box-shadow: 0 5px 5px rgba(24,32,51,.16), inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(15,39,66,.06);
    }

        .label-inprogress::before {
            content: "";
            position: absolute;
            inset: 1px;
            border-radius: calc(var(--stageHdrRadius) - 1px);
            border: 1px solid var(--stageHdrHighlight);
            pointer-events: none;
        }

        .label-inprogress::after {
            content: "";
            position: absolute;
            inset: 2px;
            border-radius: calc(var(--stageHdrRadius) - 2px);
            border: 1px solid var(--stageHdrBorderInner);
            pointer-events: none;
        }

    .label-stage {
        font-weight: 500;
        font-size: 12px;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: #2f4a5e;
    }
.lead-dashboard-pipeline,
.lead-dashboard-pipeline .table-card,
.lead-dashboard-pipeline .table-card-body {
    max-width: 100%;
}

.lead-board-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
}

.lead-board-scroll-inner {
    display: block;
    width: max-content;
    min-width: max-content;
}

.lead-stage-container {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 12px;
    width: max-content;
    min-width: max-content;
}

    .lead-stage-container .stage-column {
        flex: 0 0 var(--col-width, 280px);
        width: var(--col-width, 280px);
        min-width: var(--col-width, 280px);
    }

        .lead-stage-container .stage-column.no-leads {
            min-height: 420px;
        }

@media (max-width: 767px) {
    .lead-dashboard-pipeline {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .lead-board-scroll {
        width: 100%;
        max-width: 100%;
        padding-bottom: 10px;
    }

    .lead-board-scroll-inner {
        width: max-content;
        min-width: max-content;
    }

    .lead-stage-container {
        width: max-content;
        min-width: max-content;
    }

        .lead-stage-container .stage-column {
            flex: 0 0 280px;
            width: 280px;
            min-width: 280px;
        }
}
    /* ✅ Customers-list style name link for list view */
    .entity-name-link {
        color: #707271 !important;
        text-decoration: underline !important;
        font-weight: 600;
    }


    .table-scroll.no-x-scroll {
        overflow-x: hidden;
    }

    #lead-list,
    #pipeline-kanban-list {
        overflow: visible !important;
    }

    .customer-scroll-top {
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        transform: rotateX(180deg);
        -webkit-overflow-scrolling: touch;
    }

        .customer-scroll-top > * {
            transform: rotateX(180deg);
            display: inline-block;
        }

    .table-scroll {
        width: auto;
        overflow-x: hidden;
        overflow-y: visible !important;
        max-height: none !important;
    }

    #lead-table {
        border-collapse: collapse;
        border-spacing: 0;
    }

        #lead-table th,
        #lead-table td {
            white-space: nowrap;
            overflow: visible !important;
            box-sizing: border-box;
        }

    @media (min-width: 502px) {
        #lead-table th.phone, #lead-table td.phone {
            width: 130px !important;
            min-width: 130px !important;
            max-width: 130px !important;
        }
    }

    #lead-list,
    #pipeline-kanban-list {
        width: 100%;
        padding: 0;
    }

        #lead-list .customer-scroll-top,
        #pipeline-kanban-list .customer-scroll-top {
            width: 100%;
        }

        #lead-list .table-scroll,
        #pipeline-kanban-list .table-scroll {
            width: auto;
            display: inline-block;
            overflow-x: hidden;
            overflow-y: visible !important;
        }

            #lead-list .table-scroll.no-x-scroll,
            #pipeline-kanban-list .table-scroll.no-x-scroll {
                width: 100%;
                display: block;
            }

    #lead-table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
    }

        #lead-table th,
        #lead-table td {
            white-space: nowrap;
            box-sizing: border-box;
        }

    #lead-list .customer-scroll-top,
    #pipeline-kanban-list .customer-scroll-top {
        width: 100%;
        --colw: 0px;
    }

    #lead-list .table-scroll,
    #pipeline-kanban-list .table-scroll {
        width: auto;
        display: inline-block;
        overflow-x: hidden;
        overflow-y: visible !important;
    }

    #lead-table {
        table-layout: fixed;
        border-collapse: collapse;
        border-spacing: 0;
    }

        #lead-table th,
        #lead-table td {
            width: var(--colw);
            min-width: var(--colw);
            max-width: var(--colw);
            white-space: nowrap;
            box-sizing: border-box;
        }

            #lead-table td.name,
            #lead-table td.name .desktop,
            #lead-table td.name .mobileportrait-mobilewide {
                white-space: normal !important;
                overflow-wrap: anywhere !important;
                word-break: break-word !important;
                line-height: 1.25;
            }

            #lead-table td.name {
                overflow: hidden !important;
            }

    @media (max-width: 767.98px) {
        #lead-table td.stage,
        #lead-table td.stage .mobileportrait-mobilewide,
        #lead-table td.stage .desktop {
            white-space: normal !important;
            word-break: normal !important;
            overflow-wrap: normal !important;
        }

        #lead-table td {
            word-break: normal;
            overflow-wrap: normal;
        }

            #lead-table td.name,
            #lead-table td.name .mobileportrait-mobilewide {
                white-space: normal !important;
                word-break: break-word !important;
                overflow-wrap: break-word !important;
            }

        #lead-table {
            table-layout: auto !important;
            width: 100% !important;
        }

            #lead-table th,
            #lead-table td {
                width: auto !important;
                min-width: 0 !important;
                max-width: none !important;
            }
    }

    #lead-table tr.lead-row.is-hidden,
    #opp-table tr.lead-row.is-hidden {
        display: none !important;
    }

    /* ✅ Do NOT show pointer cursor for list rows (copy/paste friendly) */
    #lead-table tr.lead-row,
    #opp-table tr.lead-row {
        cursor: default !important;
    }

/* ---------------------------------------------------------------------------
   List toolbar — mobile: wrap + full-width action strip with horizontal scroll
   Apply .table-list-toolbar to the flex row; .table-list-toolbar-actions on the trailing controls block.
   --------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .table-list-toolbar {
        flex-wrap: wrap !important;
        row-gap: 0.5rem;
    }

    .table-list-toolbar-actions {
        flex: 0 0 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
    }

    .table-list-toolbar-actions > .d-flex {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        gap: 0.5rem;
        white-space: nowrap;
        padding-bottom: 0.25rem;
        scrollbar-width: thin;
    }

    .table-list-toolbar-actions > .d-flex > * {
        flex: 0 0 auto;
    }
}

/* Wide data table + sticky last column (actions) */
.table-data-wide-sticky-actions {
    width: max-content !important;
    min-width: 100% !important;
    table-layout: auto !important;
    border-collapse: separate;
    border-spacing: 0;
}

    .table-data-wide-sticky-actions th,
    .table-data-wide-sticky-actions td {
        padding: 10px 12px;
        vertical-align: middle;
    }

    .table-data-wide-sticky-actions th {
        white-space: normal;
        text-align: left;
        line-height: 1.2;
        max-width: 85px;
        word-break: keep-all;
        overflow-wrap: break-word;
    }

    .table-data-wide-sticky-actions td {
        white-space: nowrap;
        text-align: center;
    }

    .table-data-wide-sticky-actions th .buttonaslink {
        display: inline-block;
        white-space: normal;
        text-align: left;
        line-height: 1.2;
    }

    .table-data-wide-sticky-actions td.item {
        text-align: left;
    }

    .table-data-wide-sticky-actions td.item .buttonaslink {
        padding: 0;
    }

    .table-data-wide-sticky-actions th:last-child,
    .table-data-wide-sticky-actions td:last-child {
        position: sticky;
        right: 0;
        background: #fff;
        z-index: 3;
        box-shadow: -6px 0 10px rgba(0, 0, 0, 0.03);
    }

/* Card variant: filled surface, uppercase title, solid toolbar buttons (wide reports) */
.table-card.table-card-variant-solid-chrome {
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 12px;
    overflow: visible;
    margin-bottom: 0;
}

    .table-card.table-card-variant-solid-chrome .table-card-header h3 {
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    .table-card.table-card-variant-solid-chrome .table-card-header .btn.table-card-outline-btn,
    .table-card.table-card-variant-solid-chrome .table-card-header .button {
        background: #f1f3f7 !important;
        border: 1px solid #94a0b0 !important;
        padding: 6px 14px !important;
        border-radius: 8px !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        cursor: pointer;
        color: #1e2a3b !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin: 0 !important;
        box-shadow: none !important;
        min-height: 36px;
    }

        .table-card.table-card-variant-solid-chrome .table-card-header .btn.table-card-outline-btn:hover,
        .table-card.table-card-variant-solid-chrome .table-card-header .button:hover {
            border-color: #7d8a9c !important;
            background: #e6eaf0 !important;
            color: #1e2a3b !important;
        }

        .table-card.table-card-variant-solid-chrome .table-card-header .btn.table-card-outline-btn svg path[stroke],
        .table-card.table-card-variant-solid-chrome .table-card-header .button svg path[stroke] {
            stroke: currentColor;
        }

        .table-card.table-card-variant-solid-chrome .table-card-header .btn.table-card-outline-btn svg path[fill]:not([fill="none"]),
        .table-card.table-card-variant-solid-chrome .table-card-header .button svg path[fill]:not([fill="none"]) {
            fill: currentColor;
        }

    .table-card.table-card-variant-solid-chrome .table-card-header-actions .dropdown.btn-filter-drop > .btn.table-card-outline-btn,
    .table-card.table-card-variant-solid-chrome .table-card-header-actions > .btn.table-card-outline-btn {
        padding: 6px 10px !important;
        min-width: 36px;
    }

    .table-card.table-card-variant-solid-chrome .table-card-header-actions .btn-group.icon-button {
        position: relative;
        z-index: var(--table-card-z-header-filters, 4);
    }

.table-page-sidebar-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

.table-card-iframe-embed {
    border: 0;
    display: block;
    width: 100%;
}