/* TABLES STYLES */

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

.sidebar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
    border-radius: 0;
}

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

.sidebar::-webkit-scrollbar-thumb {
    background: #9ca3af;
    border-radius: 4px;
}

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

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

.sidebar::-webkit-scrollbar-thumb:hover {
    background: #b0b0b0;
}

.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(--LinkText, 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;
}

/* Name column: wrap at word boundaries only (no mid-word breaks); beats .table-card-data-table td nowrap */
.product-list-category-table.table-card-data-table td.name,
.product-list-category-table.table-card-data-table td.name a {
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    line-height: 1.25;
}

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

/* Product / dev queue list cards — toolbar chrome (shared; was inline in ProductList_Partial) */
.product-list-table-card,
.dev-queue-list-table-card,
.feedback-list-table-card,
.requirements-list-table-card,
.feedback-notes-list-table-card,
.exception-log-list-table-card,
.closed-list-table-card,
.feedback-categories-list-table-card {
    overflow: visible;
}

.product-list-table-card .product-list-toolbar,
.makes-list-table-card .product-list-toolbar,
.dev-queue-list-table-card .product-list-toolbar,
.feedback-list-table-card .product-list-toolbar,
.requirements-list-table-card .product-list-toolbar,
.feedback-notes-list-table-card .product-list-toolbar,
.exception-log-list-table-card .product-list-toolbar,
.closed-list-table-card .product-list-toolbar,
.feedback-categories-list-table-card .product-list-toolbar {
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.05),
        0 3px 10px rgba(0, 0, 0, 0.07);
}

.product-list-table-card .product-list-toolbar-search,
.makes-list-table-card .product-list-toolbar-search,
.dev-queue-list-table-card .product-list-toolbar-search,
.feedback-list-table-card .product-list-toolbar-search,
.requirements-list-table-card .product-list-toolbar-search,
.feedback-notes-list-table-card .product-list-toolbar-search,
.exception-log-list-table-card .product-list-toolbar-search,
.closed-list-table-card .product-list-toolbar-search,
.feedback-categories-list-table-card .product-list-toolbar-search {
    padding: 0 !important;
    margin: 0 !important;
    background: var(--Surface-3, #fbfbfb);
}

.product-list-table-card .product-list-toolbar-search .product-list-search-input,
.makes-list-table-card .product-list-toolbar-search .product-list-search-input,
.dev-queue-list-table-card .product-list-toolbar-search .product-list-search-input,
.feedback-list-table-card .product-list-toolbar-search .product-list-search-input,
.requirements-list-table-card .product-list-toolbar-search .product-list-search-input,
.feedback-notes-list-table-card .product-list-toolbar-search .product-list-search-input,
.exception-log-list-table-card .product-list-toolbar-search .product-list-search-input,
.closed-list-table-card .product-list-toolbar-search .product-list-search-input,
.feedback-categories-list-table-card .product-list-toolbar-search .product-list-search-input {
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0.5rem;
    padding-bottom: 0;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

/* Active-filter count badge. Keyed off the .product-list-filter-btn--has-filters
   modifier alone (added only when filters are active), so it works on any
   filter button across the repo without needing a per-page card class.
   The badge shows the count from the button's data-filter-count attribute and
   overflows the top-right corner of the button (image 2 reference). */
.table-card-filter-btn.product-list-filter-btn--has-filters {
    position: relative;
    overflow: visible;
}

.table-card-filter-btn.product-list-filter-btn--has-filters::after {
    content: attr(data-filter-count);
    position: absolute;
    top: -7px;
    right: -7px;
    width: auto;
    height: 18px;
    min-width: 18px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 9px;
    background: #FB383C;
    border: 1.5px solid var(--Surface-3, #fbfbfb);
    color: #fff;
    font-size: 11px;
    font-weight: 400;
    line-height: 1;
    box-sizing: border-box;
    pointer-events: none;
}

.table-group.product-list-category-group,
.table-group.makes-make-group,
.table-group.dev-queue-status-group,
.table-group.feedback-list-status-group,
.table-group.requirement-set-block {
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.05),
        0 3px 10px rgba(0, 0, 0, 0.07);
}

.table-group.product-list-category-group {
    /* Match Company Profile .table-card outer rounding (12px) */
    --table-card-chrome-radius: 12px;
    /* Each category is its own white card; grey gaps come from the body background */
    background: var(--Surface-3, #fff);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.05),
        0 3px 10px rgba(0, 0, 0, 0.07);
    padding: 0 !important;
    margin: 0;
    border-radius: 0 0 var(--table-card-chrome-radius, 12px) var(--table-card-chrome-radius, 12px);
    /*
     * Clip white table cells to the card radius (fixes the bottom-corner “streak”).
     * Use overflow:clip — not hidden — so sticky category/column headers still work
     * (see ProductList_Partial sticky notes; overflow:hidden creates a scrollport).
     */
    overflow: clip;
}

.table-group.product-list-category-group .table-group-header {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

/* Later categories: grey gap above + fully rounded card */
.table-group.product-list-category-group:not(:first-child):not(.product-list-category-group--flush-top) {
    margin-top: 10px;
    border-radius: var(--table-card-chrome-radius, 12px);
}

.table-group.product-list-category-group:not(:first-child):not(.product-list-category-group--flush-top) .table-group-header {
    border-top-left-radius: var(--table-card-chrome-radius, 12px) !important;
    border-top-right-radius: var(--table-card-chrome-radius, 12px) !important;
}

/* First / flush category: square top under search, rounded bottom into the card */
.table-group.product-list-category-group:first-child,
.table-group.product-list-category-group.product-list-category-group--flush-top {
    margin-top: 0;
    border-radius: 0 0 var(--table-card-chrome-radius, 12px) var(--table-card-chrome-radius, 12px);
}

.table-group.product-list-category-group:first-child .table-group-header,
.table-group.product-list-category-group.product-list-category-group--flush-top .table-group-header {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.table-group.product-list-category-group .product-list-category-table.tablestyle.responsive-table {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    /* separate + spacing 0 so last-cell border-radius can paint (collapse ignores cell radius) */
    border-collapse: separate;
    border-spacing: 0;
}

.table-group.product-list-category-group .product-list-category-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* Round last-row corners into the card (pairs with overflow:clip; needed when table cells ignore parent radius) */
.table-group.product-list-category-group .product-list-category-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: var(--table-card-chrome-radius, 12px) !important;
}

.table-group.product-list-category-group .product-list-category-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: var(--table-card-chrome-radius, 12px) !important;
}

@media (max-width: 767px) {
    .table-group.product-list-category-group .product-list-category-table tbody tr {
        border-radius: 12px;
    }
}

/* Let grey page background show between category cards */
.product-list-table-card > .table-card-body {
    overflow: visible;
    border-radius: 0;
    background: var(--BodyBackground);
}

.product-list-table-card > .table-card-body > .white-bg.table-card-body-white-bg {
    background: var(--BodyBackground) !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.table-group.feedback-list-status-group#feedback-list-new,
.table-group.feedback-list-status-group#feedback-categories-list,
.table-group.feedback-list-status-group#closed-items-list,
.table-group.feedback-list-status-group#exception-log-list,
.table-group.feedback-list-status-group#feedback-notes-list {
    padding-top: 0;
}

.table-group.dev-queue-status-group .dev-queue-items-table,
.table-group.feedback-list-status-group .feedback-list-items-table {
    width: 100%;
    margin-bottom: 0;
}

/* Feedback items can each be many lines tall, so a 1px divider isn't enough separation.
   A gap in the page background colour makes every item read as its own card. */
.table-group.feedback-list-separated-items .feedback-list-items-table tr.feedback-list-item-row > td {
    border-top: 10px solid var(--BodyBackground) !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

/* First item sits flush under the group header (rows come in mobile + desktop pairs) */
.table-group.feedback-list-separated-items .feedback-list-items-table tr.feedback-list-item-row:nth-of-type(1) > td,
.table-group.feedback-list-separated-items .feedback-list-items-table tr.feedback-list-item-row:nth-of-type(2) > td {
    border-top: none !important;
}

.feedback-list-content img {
    max-width: 900px;
}

.feedback-list-hidden-trigger {
    display: none;
}

.feedback-list-header-filters {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.feedback-list-table-card .table-card-header {
    flex-wrap: nowrap;
    align-items: center;
}

.feedback-list-table-card .table-card-header > h3:first-of-type {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.feedback-list-table-card .table-card-header-actions {
    flex-wrap: nowrap;
    flex: 0 0 auto;
}

.feedback-list-table-card .table-card-header-actions .feedback-list-header-filter,
.dev-queue-list-table-card .table-card-header-actions .feedback-list-header-filter {
    min-width: 130px;
    max-width: 170px;
    width: auto;
    flex-shrink: 0;
}

/* New Feedback company quick filter: room for longer customer names */
.feedback-list-table-card .table-card-header-actions .feedback-list-header-filters .feedback-list-header-filter {
    min-width: 180px;
    max-width: 260px;
}

.dev-queue-list-table-card .table-card-header {
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.dev-queue-list-table-card .table-card-header > h3:first-of-type {
    flex: 0 1 auto;
    min-width: 0;
}

.dev-queue-list-table-card .table-card-header-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    flex: 1 1 auto;
    min-width: 0;
}

.dev-queue-list-table-card .table-card-header-actions .feedback-list-header-filter {
    min-width: 100px;
    max-width: 130px;
}

.dev-queue-list-table-card .feedback-list-header-filters {
    flex-wrap: wrap;
}

.feedback-list-header-filter {
    min-width: 140px;
    max-width: 220px;
    margin-bottom: 0;
}

.table-card-header-actions .btn.table-card-outline-btn,
.table-card-header-actions .feedback-list-header-filter {
    height: 34px;
    box-sizing: border-box;
}

.table-card-header-actions .feedback-list-header-filter {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--buttonbordercolor) 72%, var(--Heading) 28%) !important;
    background: transparent;
    color: var(--CardHeaderText);
    align-self: center;
}

.table-card-header-actions .btn-group {
    align-self: center;
}

.requirements-filters .feedback-list-header-filter {
    height: auto;
}

.requirements-empty-state,
.requirements-search-no-results {
    padding: 15px 20px;
}

.requirements-list-table-card .table-group-header .requirements-set-name {
    color: var(--linkcolor);
}

.requirements-list-table-card .table-group-header .requirements-set-project {
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

.requirements-list-table-card .requirements-items-table {
    width: 100%;
    margin-bottom: 0;
}

.feedback-notes-list-table-card .table-card-header-actions .btn.table-card-outline-btn svg {
    margin-right: 4px;
}

.feedback-notes-editor {
    padding: 16px 20px;
}

.feedback-notes-editor-field {
    margin-bottom: 16px;
}

.feedback-notes-editor-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: var(--CardHeaderText);
}

.feedback-notes-quill-textarea {
    height: 600px !important;
}

.feedback-notes-editor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 8px 0 4px;
}

.feedback-notes-items-table {
    width: 100%;
    margin-bottom: 0;
}

.feedback-notes-items-table .feedback-notes-header-row th {
    font-weight: 600;
}

.feedback-notes-meta-col {
    width: 220px;
    vertical-align: top;
}

.feedback-notes-actions-col {
    width: 180px;
    vertical-align: top;
}

.feedback-notes-content-col {
    vertical-align: top;
}

.feedback-notes-body {
    overflow-wrap: anywhere;
}

.feedback-notes-item-row.feedback-list-row-filtered-out {
    display: none;
}

.exception-log-items-table,
.feedback-categories-items-table {
    width: 100%;
    margin-bottom: 0;
}

.exception-log-header-row th {
    font-weight: 600;
}

.exception-log-meta-col {
    width: 220px;
    vertical-align: top;
}

.exception-log-actions-col,
.feedback-categories-actions-col {
    width: 120px;
    vertical-align: top;
}

.exception-log-message {
    font-weight: 600;
    margin-bottom: 4px;
    overflow-wrap: anywhere;
}

.exception-log-detail {
    padding: 16px 20px;
}

.exception-log-detail-value {
    overflow-wrap: anywhere;
}

.exception-log-detail-value--wrap {
    word-wrap: break-word;
    white-space: pre-wrap;
}

.exception-log-item-row.feedback-list-row-filtered-out,
.feedback-categories-item-row.feedback-list-row-filtered-out {
    display: none;
}

.feedback-categories-list-table-card .table-card-header-actions .btn.table-card-outline-btn svg {
    margin-right: 4px;
}

.feedback-categories-name-col {
    vertical-align: middle;
}

.requirements-list-table-card .table-card-header-actions .btn.table-card-outline-btn svg {
    margin-right: 4px;
}

.feedback-list-item-actions-col {
    width: 300px;
}

.feedback-list-view-icon-btn {
    padding-top: 0;
    padding-bottom: 0;
    height: 25px;
    vertical-align: middle;
}

.feedback-list-view-icon-btn svg {
    position: relative;
    top: 3px;
}

.feedback-list-status-group.feedback-list-status-group--filtered-out,
.feedback-list-item-row.feedback-list-row-filtered-out {
    display: none !important;
}

.dev-queue-items-table tbody tr.dev-queue-drag-slot td {
    padding: 0 !important;
    height: 1px;
    border-top: none !important;
}

.dev-queue-items-table tbody tr.dev-queue-item-row > td {
    padding: 0 !important;
}

.dev-queue-items-table .dev-queue-item-inner-table {
    width: 100%;
}

.dev-queue-items-table .dev-queue-item-inner-row--odd {
    background-color: var(--TableOddRow);
}

.dev-queue-items-table .dev-queue-item-inner-row--even {
    background-color: var(--TableEvenRow);
}

.dev-queue-description {
    overflow-wrap: anywhere;
}

.dev-queue-meta {
    font-size: 10px;
    color: #666;
}

.dev-queue-anchor {
    position: relative;
    top: -30px;
}

.dev-queue-item-meta-col {
    width: 175px;
}

.dev-queue-item-actions-col {
    width: 350px;
}

.dev-queue-mobile-col {
    padding-left: 15px;
    padding-right: 15px;
}

.dev-queue-mobile-actions {
    width: 350px;
}

.dev-queue-dropdown-menu {
    font-size: 12px;
}

.dev-queue-status-group.dev-queue-status-group--filtered-out,
.dev-queue-item-row.dev-queue-row-filtered-out {
    display: none !important;
}

.makes-make-group.makes-make-group--filtered-out,
.makes-model-row.makes-model-row--filtered-out {
    display: none !important;
}

.dev-queue-save-sort-btn {
    display: none;
}

.dev-queue-priority-order {
    display: none;
}

/* 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;
        /* Match adjacent h3 (not --PageTitleTextColor, which is white on Long Range / dark title bars). */
        color: var(--CardHeaderText, var(--Heading, #154a7e));
    }

.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);
}

/* Row action menus live in .table-card-body (z-index 1); header/toolbar chrome stacks above, so open row menus paint underneath on narrow viewports. */
.table-card:has(.table-card-body .dropdown-menu.show) .table-card-body {
    z-index: calc(var(--table-card-z-header-elevated, 5) + 1);
}

/*
 * Row action menus open downward past the last row. The body (overflow:hidden — bottom-corner clip)
 * and the horizontal-scroll wrappers (overflow-x:auto forces the cross axis to auto/hidden) otherwise
 * clip them, so the menu appears cut off / "under" the card. While a row menu is open, let it escape
 * the clip; raising z-index alone (rule above) is not enough against an overflow clip.
 */
.table-card:has(.table-card-body .dropdown-menu.show) .table-card-body,
.table-card-scroll-top:has(.dropdown-menu.show),
.table-card-scroll-inner:has(.dropdown-menu.show) {
    overflow: visible !important;
}

/*
 * Same escape for the per-category group card (Product list categories, Event list
 * Upcoming/Past sections). It carries overflow:clip (see .product-list-category-group)
 * to round white cells into the card corners, which also clips a row action menu opened
 * on the LAST row — the menu is cut off at the card's bottom edge. Unclipping only while
 * a menu is open keeps the corner clipping for every other state; the last row's corners
 * stay rounded meanwhile via the explicit tbody tr:last-child td radii above.
 */
.table-group.product-list-category-group:has(.dropdown-menu.show) {
    overflow: visible;
}

/* 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;
}

/*
 * Event workspace table cards (Attendees / Tasks / Staffing / Invoices / Quotes):
 * first content column lines up with .table-card-header h3 (padding 15px 20px).
 */
.event-section .table-card table.tablestyle.table-card-data-table > thead > tr > th:first-child,
.event-section .table-card table.tablestyle.table-card-data-table > tbody > tr > td:first-child {
    padding-left: 20px !important;
}

/* Attendees: bulk-select is first but usually display:none — pad the name column instead. */
.event-section #event-attendees-table > thead > tr > th:nth-child(2),
.event-section #event-attendees-table > tbody > tr > td:nth-child(2) {
    padding-left: 20px !important;
}

/* Staffing: empty spacer is first — pad Role; collapse the spacer so it does not add a gutter. */
.event-section .table-card table.timeslot-staffing-table tr > th:first-child,
.event-section .table-card table.timeslot-staffing-table tr > td:first-child {
    width: 0 !important;
    max-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border: none !important;
    overflow: hidden;
}

.event-section .table-card table.timeslot-staffing-table tr > th:nth-child(2),
.event-section .table-card table.timeslot-staffing-table tr > td:nth-child(2) {
    padding-left: 20px !important;
}

/*
 * Event module list + Event Details tab tables: Customers-style column titles —
 * all-caps navy. Beats layout.css `.event-section .tablestyle th { text-transform: none }`.
 * Includes Staffing (header row, no thead) and Attendees / Tasks / Quotes / Invoices.
 */
.event-section .table-card table.tablestyle:not(.timeslot-staffing-table) thead th,
.event-section .table-card table.tablestyle:not(.timeslot-staffing-table) thead th .buttonaslink,
.event-section .table-card table.tablestyle:not(.timeslot-staffing-table) tr.roundheader > th,
.event-section .table-card table.tablestyle:not(.timeslot-staffing-table) tr.roundheader > th .buttonaslink,
.event-section .table-card table.tablestyle:not(.timeslot-staffing-table) > tr:first-child > th,
.event-section .table-card table.tablestyle:not(.timeslot-staffing-table) > tbody > tr:first-child > th,
.event-section.event-details-page table.tablestyle:not(.timeslot-staffing-table) thead th,
.event-section.event-details-page table.tablestyle:not(.timeslot-staffing-table) thead th .buttonaslink,
.event-section.event-details-page table.tablestyle:not(.timeslot-staffing-table) tr.roundheader > th,
.event-section.event-details-page table.tablestyle:not(.timeslot-staffing-table) tr.roundheader > th .buttonaslink,
.event-section.event-details-page table.tablestyle:not(.timeslot-staffing-table) > tr:first-child > th,
.event-section.event-details-page table.tablestyle:not(.timeslot-staffing-table) > tbody > tr:first-child > th,
.event-section .event-details-workspace-embed table.tablestyle:not(.timeslot-staffing-table) thead th,
.event-section .event-details-workspace-embed table.tablestyle:not(.timeslot-staffing-table) thead th .buttonaslink,
.event-section .event-details-workspace-embed table.tablestyle:not(.timeslot-staffing-table) tr.roundheader > th,
.event-section .event-details-workspace-embed table.tablestyle:not(.timeslot-staffing-table) tr.roundheader > th .buttonaslink,
.event-section .event-details-workspace-embed table.tablestyle:not(.timeslot-staffing-table) > tr:first-child > th,
.event-section .event-details-workspace-embed table.tablestyle:not(.timeslot-staffing-table) > tbody > tr:first-child > th {
    text-transform: uppercase !important;
    letter-spacing: 0.02em;
    color: var(--TableHeaderText, var(--Heading, #03183C)) !important;
    font-weight: 600;
    font-size: 12px;
}

.event-section .table-card table.tablestyle:not(.timeslot-staffing-table) thead th.primarycolumn,
.event-section .table-card table.tablestyle:not(.timeslot-staffing-table) thead th.secondarycolumn,
.event-section .table-card table.tablestyle:not(.timeslot-staffing-table) tr.roundheader > th.primarycolumn,
.event-section .table-card table.tablestyle:not(.timeslot-staffing-table) tr.roundheader > th.secondarycolumn,
.event-section.event-details-page table.tablestyle:not(.timeslot-staffing-table) thead th.primarycolumn,
.event-section.event-details-page table.tablestyle:not(.timeslot-staffing-table) thead th.secondarycolumn,
.event-section.event-details-page table.tablestyle:not(.timeslot-staffing-table) tr.roundheader > th.primarycolumn,
.event-section.event-details-page table.tablestyle:not(.timeslot-staffing-table) tr.roundheader > th.secondarycolumn,
.event-section .event-details-workspace-embed table.tablestyle:not(.timeslot-staffing-table) thead th.primarycolumn,
.event-section .event-details-workspace-embed table.tablestyle:not(.timeslot-staffing-table) thead th.secondarycolumn,
.event-section .event-details-workspace-embed table.tablestyle:not(.timeslot-staffing-table) tr.roundheader > th.primarycolumn,
.event-section .event-details-workspace-embed table.tablestyle:not(.timeslot-staffing-table) tr.roundheader > th.secondarycolumn {
    color: var(--TableHeaderText, var(--Heading, #03183C)) !important;
}

.event-section .table-card table.tablestyle:not(.timeslot-staffing-table) thead th .sort.buttonaslink,
.event-section .table-card table.tablestyle:not(.timeslot-staffing-table) tr.roundheader > th .sort.buttonaslink,
.event-section.event-details-page table.tablestyle:not(.timeslot-staffing-table) thead th .sort.buttonaslink,
.event-section.event-details-page table.tablestyle:not(.timeslot-staffing-table) tr.roundheader > th .sort.buttonaslink,
.event-section .event-details-workspace-embed table.tablestyle:not(.timeslot-staffing-table) thead th .sort.buttonaslink,
.event-section .event-details-workspace-embed table.tablestyle:not(.timeslot-staffing-table) tr.roundheader > th .sort.buttonaslink {
    color: var(--TableHeaderText, var(--Heading, #03183C)) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em;
    text-decoration: none !important;
}

/* Sort chevrons: idle grey / active Interactive (List.js asc/desc on the button). */
.event-section table.tablestyle.table-card-data-table thead th .sort.buttonaslink:not(.asc):not(.desc)::after,
.event-section table.tablestyle.table-card-data-table tr.roundheader > th .sort.buttonaslink:not(.asc):not(.desc)::after {
    background-color: #94a3b8 !important;
    opacity: 0.72 !important;
}

.event-section table.tablestyle.table-card-data-table thead th .sort.buttonaslink.asc::after,
.event-section table.tablestyle.table-card-data-table thead th .sort.buttonaslink.desc::after,
.event-section table.tablestyle.table-card-data-table tr.roundheader > th .sort.buttonaslink.asc::after,
.event-section table.tablestyle.table-card-data-table tr.roundheader > th .sort.buttonaslink.desc::after {
    background-color: var(--Interactive-Default, #0b5ed7) !important;
    opacity: 1 !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;
    box-sizing: border-box;
}

.table-toolbar ul.pagination li.active a.page {
    font-weight: 600;
    background: var(--InnerNavActiveTabBackground, #EEF3FB);
}

.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 states inside table cards: flush under the header strip so header +
 * white body read as one continuous card (not a floating inset with mt-2/shadow).
 * Compact promos under a list keep their inset separation.
 */
.table-card-body .empty-state-wrap {
    padding: 20px;
    margin-top: 0 !important;
    margin-bottom: 0;
    border-radius: 0;
    box-shadow: none;
}

.table-card-body .empty-state-wrap.empty-state-wrap--compact {
    margin-top: 14px !important;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    box-shadow: none;
}

/* Same flush treatment for Jobs / workflow bodies that are not .table-card-body */
.product-list-card-body > .empty-state-wrap,
.service-workflow-card-body > .empty-state-wrap,
.mja-jobs-workflow-body > .empty-state-wrap {
    padding: 20px;
    margin-top: 0 !important;
    margin-bottom: 0;
    border-radius: 0;
    box-shadow: none;
}

/* ---------------------------------------------------------------------------
   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 Name: wrap at spaces only — override td > * / a overflow-wrap:anywhere */
                .responsive-table.pos-grid.product-list-category-table.table-card-data-table td.name,
                .responsive-table.pos-grid.product-list-category-table.table-card-data-table td.name a {
                    overflow-wrap: normal !important;
                    word-break: normal !important;
                    hyphens: none !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.
   --------------------------------------------------------------------------- */
/* 24 distinctive tones: light + deep versions of each hue, plus a full neutral range
   (grey, slate, charcoal, brown, deep brown, beige, cream, white). */
.tag-pill-tone--0  { background: #d3e8fb; color: #1a4a7a; border: 1px solid #a9cdec; } /* light blue */
.tag-pill-tone--1  { background: #8fb8ea; color: #10233f; border: 1px solid #5f92d4; } /* deep blue */
.tag-pill-tone--2  { background: #cdeede; color: #14663f; border: 1px solid #9bd6bd; } /* light green */
.tag-pill-tone--3  { background: #86c99f; color: #0c3d24; border: 1px solid #57ad7d; } /* deep green */
.tag-pill-tone--4  { background: #a7e0dc; color: #0b4a45; border: 1px solid #74c7c0; } /* light teal */
.tag-pill-tone--5  { background: #57b3ab; color: #06302d; border: 1px solid #369089; } /* deep teal */
.tag-pill-tone--6  { background: #fbf3c4; color: #6b5311; border: 1px solid #e6d98a; } /* light yellow */
.tag-pill-tone--7  { background: #f0c96a; color: #5c4410; border: 1px solid #d9ad3e; } /* gold */
.tag-pill-tone--8  { background: #ffe0c2; color: #7a3d0f; border: 1px solid #ecbd8f; } /* light peach */
.tag-pill-tone--9  { background: #f3a35f; color: #5c2a08; border: 1px solid #db8438; } /* deep orange */
.tag-pill-tone--10 { background: #fbd3dd; color: #7a1330; border: 1px solid #eda8b8; } /* light rose */
.tag-pill-tone--11 { background: #e88a8a; color: #5c1010; border: 1px solid #d45f5f; } /* deep red */
.tag-pill-tone--12 { background: #e2d3f7; color: #431a80; border: 1px solid #c3aae6; } /* light lavender */
.tag-pill-tone--13 { background: #b98fe0; color: #2f1052; border: 1px solid #9a63d1; } /* deep purple */
.tag-pill-tone--14 { background: #f7d3ef; color: #6b1060; border: 1px solid #e6a8d9; } /* light pink */
.tag-pill-tone--15 { background: #db8fc9; color: #4a0d42; border: 1px solid #c563ad; } /* deep magenta */
.tag-pill-tone--16 { background: #e2e6ea; color: #333a42; border: 1px solid #c2c9d0; } /* light grey */
.tag-pill-tone--17 { background: #b8c2cc; color: #2a323a; border: 1px solid #94a1ad; } /* slate grey */
.tag-pill-tone--18 { background: #d8b89a; color: #4a2f18; border: 1px solid #c09872; } /* light brown */
.tag-pill-tone--19 { background: #b08858; color: #3a2410; border: 1px solid #8a6338; } /* deep brown */
.tag-pill-tone--20 { background: #ece0cc; color: #5c4a2e; border: 1px solid #d6c4a3; } /* beige */
.tag-pill-tone--21 { background: #fbf5e3; color: #6b5a35; border: 1px solid #e8dcc0; } /* cream */
.tag-pill-tone--22 { background: #ffffff; color: #5a6470; border: 1px solid #cbd2d9; } /* white */
.tag-pill-tone--23 { background: #9aa4ad; color: #1f262d; border: 1px solid #7c8892; } /* charcoal */

.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,
.form-1600 .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),
.form-1600 .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;
    /* Card-header ink (not PageTitle — title can be white on a dark bar). */
    color: var(--CardHeaderText, var(--Heading, #154a7e)) !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,
.form-1400 .table-card .table-card-header .dropdown-menu,
.form-1000 .table-card .table-card-header .dropdown-menu {
    z-index: 2500;
}

/* CRM and table list action dropdowns — full-width hover band on every item */
.table-card .dropdown-menu:not(.filter-card-form) .dropdown-item,
.tablestyle .dropdown-menu:not(.filter-card-form) .dropdown-item,
.icon-button .dropdown-menu .dropdown-item,
.btn-group.icon-button .dropdown-menu .dropdown-item,
.form-800 .table-card .dropdown-menu:not(.filter-card-form) .dropdown-item,
.form-1200 .table-card .dropdown-menu:not(.filter-card-form) .dropdown-item,
.form-1400 .table-card .dropdown-menu:not(.filter-card-form) .dropdown-item,
.form-1000 .table-card .dropdown-menu:not(.filter-card-form) .dropdown-item,
.sidebar-table-content .table-card .dropdown-menu:not(.filter-card-form) .dropdown-item,
.sidebar-table-content .dropdown-menu:not(.filter-card-form) .dropdown-item {
    display: block;
    width: 100%;
    box-sizing: border-box;
    color: #212529 !important;
    text-align: left;
    background: transparent;
    border: 0;
    font-weight: 400;
    cursor: pointer;
    text-decoration: none;
}

.table-card .dropdown-menu:not(.filter-card-form) .dropdown-item:hover,
.table-card .dropdown-menu:not(.filter-card-form) .dropdown-item:focus,
.tablestyle .dropdown-menu:not(.filter-card-form) .dropdown-item:hover,
.tablestyle .dropdown-menu:not(.filter-card-form) .dropdown-item:focus,
.icon-button .dropdown-menu .dropdown-item:hover,
.icon-button .dropdown-menu .dropdown-item:focus,
.btn-group.icon-button .dropdown-menu .dropdown-item:hover,
.btn-group.icon-button .dropdown-menu .dropdown-item:focus,
.form-800 .table-card .dropdown-menu:not(.filter-card-form) .dropdown-item:hover,
.form-800 .table-card .dropdown-menu:not(.filter-card-form) .dropdown-item:focus,
.form-1200 .table-card .dropdown-menu:not(.filter-card-form) .dropdown-item:hover,
.form-1200 .table-card .dropdown-menu:not(.filter-card-form) .dropdown-item:focus,
.form-1400 .table-card .dropdown-menu:not(.filter-card-form) .dropdown-item:hover,
.form-1400 .table-card .dropdown-menu:not(.filter-card-form) .dropdown-item:focus,
.form-1000 .table-card .dropdown-menu:not(.filter-card-form) .dropdown-item:focus,
.form-1000 .table-card .dropdown-menu:not(.filter-card-form) .dropdown-item:hover,
.sidebar-table-content .table-card .dropdown-menu:not(.filter-card-form) .dropdown-item:hover,
.sidebar-table-content .table-card .dropdown-menu:not(.filter-card-form) .dropdown-item:focus,
.sidebar-table-content .dropdown-menu:not(.filter-card-form) .dropdown-item:hover,
.sidebar-table-content .dropdown-menu:not(.filter-card-form) .dropdown-item:focus {
    color: #16181b !important;
    background-color: #f8f9fa !important;
    text-decoration: none;
}

.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;
    background: var(--buttonprimarybackground, #154a7e) !important;
    color: #fff !important;
    box-shadow: none !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%;
}

/* ===== Pipeline settings — shared card + action styling =====
   Single source of truth for BOTH CompanyLeadStage (Pipeline Settings) and CompanyDealStage
   (Deal Settings) so the two pages match. Lead-only styling (Lead Advancement Automation
   .setting-group*) stays inline on the Lead page. */
.lead-pipelines-hint {
    color: #6b7280;
    font-size: .85rem;
    margin: 0 0 12px 0;
}

.pipeline-card {
    background: #fff;
    border: 1px solid var(--Outline, #e3e6eb);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
}
    .pipeline-card:last-child { margin-bottom: 0; }

.pipeline-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--Outline, #e3e6eb);
}

.pipeline-card-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--Heading, #1e2a3b);
    text-transform: uppercase;
    letter-spacing: .02em;
}

.pipeline-card-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
}

.pipeline-card-body { background: #fff; }
    .pipeline-card-body table { width: 100%; margin: 0; background: #fff !important; }
    .pipeline-card-body table td { background: #fff !important; }
    .pipeline-card-body table.tablestyle td { vertical-align: middle !important; }
    .pipeline-card-body table.tablestyle td:first-child { line-height: 1; }

.pipeline-empty { color: #888; padding: 12px 14px; font-size: .9rem; }

.pipeline-list-input,
.pipeline-stage-input { max-width: 320px; }

.pipeline-create-form { margin-bottom: 12px; }
.pipeline-create-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
    .pipeline-create-name-row .form-control { max-width: 320px; flex: 0 1 320px; }

/* Stage-row action cluster (up/down + edit + delete). */
.pipeline-card .icon-button {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}

/* Move (up/down) buttons render as a bordered square; edit/delete are bare icon buttons. */
.pipeline-card-actions .btn.p-0[title^="Move"],
.pipeline-card .btn.p-0.pipeline-sort-btn {
    font-size: 14px;
    line-height: 1;
    padding: 0 !important;
    min-width: 26px;
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: transparent;
    border: 1px solid var(--IconDefault, #989998);
    border-radius: 6px;
}
/* Pipeline-move buttons (card header) read dark; stage-sort buttons (card body) use the muted icon color. */
.pipeline-card-actions .btn.p-0[title^="Move"] { color: #212529; }
.pipeline-card .btn.p-0.pipeline-sort-btn { color: var(--IconDefault, #989998); }

.pipeline-card-actions .btn.p-0[title^="Move"]:hover,
.pipeline-card .btn.p-0.pipeline-sort-btn:hover {
    background: var(--Surface-2, #f3f4f6);
    border-color: var(--IconDefault, #989998);
}
.pipeline-card-actions .btn.p-0[title^="Move"]:hover { color: #212529; }

.pipeline-card .btn.p-0 { background: transparent; border: 0; cursor: pointer; color: #212529; }
    .pipeline-card .btn.p-0 svg { display: block; }

/* Ensure mobile-only elements are hidden on desktop, and desktop elements on mobile.
   Must beat `.responsive-table tr { display: table-row !important }` (specificity 0,1,1). */
@media (min-width: 768px) {
    .responsive-table tr.mobileportrait-mobilewide,
    .responsive-table tr.mobileportrait,
    .responsive-table tr.mobilewide,
    .mobileportrait-mobilewide,
    .mobileportrait,
    .mobilewide {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .responsive-table tr.desktop,
    .desktop {
        display: none !important;
    }
}

/* ===== Settings option panels (checkbox + label header strip) =====
   Shared by Company Settings, User Settings, Shipping, Contacts, Campaigns, Task Categories, etc. */
.setting-group {
    border: 1px solid #b8c0cc;
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.setting-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 14px;
    background: #e2e8f0;
    border-bottom: 1px solid #c5ced9;
    min-height: 0;
}

.setting-group-header .formvalue {
    margin: 0;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 0;
}

.setting-group-header .formvalue input[type="checkbox"],
.setting-group-header input[type="checkbox"] {
    margin: 0 !important;
    display: block;
    width: 16px;
    height: 16px;
    accent-color: #4b5563;
    cursor: pointer;
    flex-shrink: 0;
}

.setting-group-header .formlabel,
.setting-group-title {
    margin: 0 !important;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.3;
    color: #111827;
    align-self: center;
}

.setting-group-body {
    padding: 10px 14px;
    background: #fff;
}

.setting-group-body .tablestyle td:first-child,
.setting-group-body .tablestyle th:first-child {
    padding-left: 0;
}

.setting-group-hint {
    color: #4b5563;
    font-size: 0.85rem;
    margin: 6px 0 0 0;
    line-height: 1.35;
}

/* ============================================================
   Resizable table columns (shared)
   Opt in per table with class="resizable-columns"; behaviour lives in
   /js/tableColumnResize.js. Widths are saved per page in localStorage.
   ============================================================ */

table.resizable-columns thead th {
    position: relative;
}

.col-resizer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 8px;
    cursor: col-resize;
    user-select: none;
    touch-action: none;
    z-index: 2;
}

.col-resizer::after {
    content: '';
    position: absolute;
    right: 3px;
    top: 15%;
    bottom: 15%;
    width: 2px;
    border-radius: 1px;
    background: var(--Outline, #d1d5db);
    opacity: 0.5;
    transition: opacity 0.15s, background 0.15s;
}

.col-resizer:hover::after,
.col-resizer--active::after {
    opacity: 1;
    background: var(--Primary, #6b7280);
}

/* While dragging, keep the resize cursor and stop the drag selecting cell text */
body.col-resizing,
body.col-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}

/* Resizing is a pointer affordance - hide the grips on touch/narrow layouts */
@media (max-width: 800px) {
    .col-resizer {
        display: none;
    }
}

/* ============================================================
   Cell truncation (shared)

   A fixed-layout table does not stop a cell's content at the column edge - an
   unbreakable token like an email address or a long URL simply paints over the
   next column. Clip it to the column and end it with an ellipsis instead.

   Applied automatically to resizable tables; add "truncate-cells" to opt any
   other table in. Wrapping still works normally - only content that cannot fit
   the column is cut.
   ============================================================ */

/*
   The !important here is deliberate: .table-card-data-table th/td above sets
   "overflow: visible !important" (so dropdowns can escape their cell), which
   otherwise wins and the clipping never happens. The escape hatches at the
   bottom of this block put that back for the cells that actually need it.
*/
table.resizable-columns > thead > tr > th,
table.resizable-columns > tbody > tr > td,
table.truncate-cells > thead > tr > th,
table.truncate-cells > tbody > tr > td {
    overflow: hidden !important;
    text-overflow: ellipsis;
}

/*
   Per-column wrapping, set on the HEADER cell only:

     <th class="col-nowrap">Email</th>   one line, clipped with an ellipsis
     <th class="col-wrap">Notes</th>     wraps at word boundaries, never mid-word

   tableColumnResize.js mirrors the header's choice onto every body cell in that
   column (via a generated nth-child rule), so you only mark it in one place.
   Columns left unmarked keep whatever the page already does.
*/
table.resizable-columns > thead > tr > th.col-nowrap,
table.truncate-cells > thead > tr > th.col-nowrap {
    white-space: nowrap !important;
}

table.resizable-columns > thead > tr > th.col-wrap,
table.truncate-cells > thead > tr > th.col-wrap {
    white-space: normal !important;
}

/* Force every cell onto a single clipped line (opt in per table) */
table.single-line-cells > thead > tr > th,
table.single-line-cells > tbody > tr > td {
    white-space: nowrap !important;
}

/*
   Escape hatches. Anything that has to paint outside its cell - a dropdown, a
   popover, a tooltip, a nested table - must not be clipped, so exclude those cells.
   Add "no-truncate" to a th/td to opt a column out by hand.
*/
table.resizable-columns > tbody > tr > td:has(.dropdown-menu),
table.resizable-columns > tbody > tr > td:has(.send-comm-contact-popover),
table.resizable-columns > tbody > tr > td:has(.popover),
table.resizable-columns > tbody > tr > td:has(.custom-tooltip),
table.resizable-columns > tbody > tr > td:has(.tooltip-box),
table.resizable-columns > tbody > tr > td:has(table),
table.truncate-cells > tbody > tr > td:has(.dropdown-menu),
table.truncate-cells > tbody > tr > td:has(.send-comm-contact-popover),
table.truncate-cells > tbody > tr > td:has(.popover),
table.truncate-cells > tbody > tr > td:has(.custom-tooltip),
table.truncate-cells > tbody > tr > td:has(.tooltip-box),
table.truncate-cells > tbody > tr > td:has(table),
table.resizable-columns .no-truncate,
table.truncate-cells .no-truncate {
    overflow: visible !important;
    text-overflow: clip;
}

/*
   Hover tooltip for a truncated cell. Inherits the .tooltip-portal card (white,
   #154a7e hairline, 6px radius) so it reads exactly like the Contacts column
   tooltip; it only adds that tooltip's fade-in, since this one is positioned by
   script rather than by :hover.
*/
.col-truncate-tooltip {
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    white-space: normal;
    text-align: left;
}

.col-truncate-tooltip.is-visible {
    opacity: 1;
}