/* ═══════════════════════════════════════════════════════════════
   Activities List Premium — V2 Design System Overrides
   Scoped under #pageActivities to avoid leaking
   ═══════════════════════════════════════════════════════════════ */

/* ── Page Header ── */
#pageActivities .activities-list-header {
    height: 65px;
    min-height: 65px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: #ffffff;
    border-radius: 16px 16px 0 0;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: none;
}

#pageActivities .activities-list-header .activities-header-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#pageActivities .activities-list-header .nav-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #2b5797;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.01em;
}

#pageActivities .activities-list-header .nav-title img {
    height: 28px;
    vertical-align: middle;
}

#pageActivities .activities-list-header .nav-add-button {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2b5797 0%, #1e40af 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(43, 87, 151, 0.25);
    flex-shrink: 0;
    border: none;
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1;
    text-decoration: none;
}

#pageActivities .activities-list-header .nav-add-button:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 18px rgba(43, 87, 151, 0.35);
}

#pageActivities .activities-list-header .nav-add-button::before {
    content: "+";
}

/* ── Type Tabs (All / Appointments / Phone calls / Tasks) ── */
#pageActivities .cd-tab-filter-wrapper {
    height: auto;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid #e2e8f0;
    border-top: none;
    background: #f8fafc;
    position: relative;
    z-index: 2;
    margin: 0 0 10px 0;
}

#pageActivities .pt-10 {
    padding-top: 0 !important;
}

#pageActivities .activities-type-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    flex-wrap: wrap;
}

#pageActivities .activities-type-tabs .activitiesType {
    height: 28px;
    padding: 0 14px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.8rem;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

#pageActivities .activities-type-tabs .activitiesType:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #cbd5e1;
    color: #1e293b;
}

#pageActivities .activities-type-tabs .activitiesType.selectedFilter {
    background: linear-gradient(135deg, #2b5797 0%, #1e40af 100%);
    color: #ffffff;
    border-color: #2b5797;
    box-shadow: 0 4px 12px rgba(43, 87, 151, 0.3);
    transform: none;
    text-decoration: none;
}

/* ── Search Bar ── */
#pageActivities .activities-search-wrapper {
    padding: 12px 20px;
    background: #ffffff;
    border-radius: 0;
}

#pageActivities .activities-search-wrapper input {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    border-bottom: 2px solid #e2e8f0;
    border-radius: 0;
    padding: 10px 0;
    color: #1e293b;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: none;
    box-sizing: border-box;
}

#pageActivities .activities-search-wrapper input:focus {
    border-color: #2b5797;
    box-shadow: none;
    outline: none;
    background: transparent;
}

#pageActivities .activities-search-wrapper input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

/* ── Main Content Card ── */
#pageActivities .activities-content-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

/* ── Layout heights (replaces reDrawActivitiesListScreen) ── */
#pageActivities .page-region-content {
    min-height: calc(100vh - 60px);
}

#pageActivities #listview_activities {
    min-height: 200px;
    height: calc(100vh - 200px);
    overflow-y: auto;
}

/* ── Sidebar Filter — V2 Polish ── */
#pageActivities .cd-filter {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    border: 1px solid #e2e8f0;
    top: 0;
    left: 0;
    height: calc(100% - 70px);
}

#pageActivities .cd-filter.filter-is-visible {
    margin-left: 0;
}

#pageActivities .cd-main-content.is-fixed .cd-filter {
    top: 0;
}

/* Filter trigger — positioned as sidebar header */
#pageActivities .cd-filter-trigger {
    top: 10px !important;
    left: 0 !important;
    width: 210px !important;
    height: 35px !important;
    line-height: 35px !important;
    padding-left: 28px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #64748b !important;
    text-indent: 0 !important;
    background-position: 6px center !important;
}

#pageActivities .cd-main-content.is-fixed .cd-filter-trigger {
    top: 0;
}

#pageActivities .cd-gallery {
    margin-top: 0;
    padding-top: 0 !important;
}

#pageActivities .cd-filter form {
    padding: 50px 15px 20px;
}

#pageActivities .cd-filter .cd-filter-block {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}

#pageActivities .cd-filter .cd-filter-block:last-child {
    border-bottom: none;
}

#pageActivities .cd-filter .cd-filter-block h5 {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    padding: 6px 0 4px 0;
    margin-bottom: 4px;
}

#pageActivities .cd-filter .cd-filter-block h5::before {
    display: none;
}

#pageActivities .cd-filter .cd-filter-block select {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 12px;
    color: #1e293b;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

#pageActivities .cd-filter .cd-filter-block select:focus {
    border-color: #2b5797;
    box-shadow: 0 0 0 3px rgba(43, 87, 151, 0.1);
    outline: none;
}

#pageActivities .cd-filter .cd-close {
    height: 40px;
    line-height: 40px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s ease;
}

#pageActivities .cd-filter .cd-close:hover {
    color: #2b5797;
    background: transparent;
}

/* Filter trigger inherits position from above */

/* Add category buttons in filter */
#pageActivities .cd-filter .add-form-button-black {
    float: right;
    margin-top: 2px;
}

/* ── Mobile container padding override (phone) ── */
@media (max-width: 768px) {
    #container.page.container {
        padding-top: 40px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ── Leads mobile margin (no #pageLead wrapper in leadList.html) ── */
@media (max-width: 768px) {

    /* Header card */
    #container>.page-region-content .v2-list-header,
    #pageActivities .activities-list-header,
    #pageTickets .tickets-list-header {
        margin: 12px 5px 0 5px !important;
        width: auto !important;
        border-radius: 12px 12px 0 0 !important;
        border-bottom: none !important;
    }

    /* Tab filter wrapper */
    #container>.page-region-content .cd-tab-filter-wrapper {
        margin: 0 5px !important;
        width: auto !important;
        border-radius: 0 !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }

    /* Content card */
    #container>.page-region-content .v2-content-card {
        margin: 0 5px 12px 5px !important;
        width: auto !important;
        border-radius: 0 0 12px 12px !important;
    }



    /* Activities: tab wrapper + content card side margins */
    #pageActivities .cd-tab-filter-wrapper,
    #pageTickets .cd-tab-filter-wrapper {
        margin: 0 12px !important;
        width: auto !important;
        border-radius: 0 !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }

    #pageActivities .v2-content-card,
    #pageTickets .tickets-content-card {
        margin: 0 12px 12px 12px !important;
        width: auto !important;
        border-radius: 0 0 12px 12px !important;
    }
}

/* ── Responsive ── */
@media (max-width: 768px) {
    #pageActivities .activities-list-header {
        height: 52px;
        min-height: 52px;
        padding: 0 12px;
        border-radius: 12px 12px 0 0;
    }

    #pageActivities .activities-list-header .nav-title {
        font-size: 0.95rem;
    }

    #pageActivities .activities-type-tabs {
        padding: 8px 12px;
        gap: 6px;
    }

    #pageActivities .activities-type-tabs .activitiesType {
        height: 30px;
        padding: 0 14px;
        font-size: 0.8rem;
    }

    #pageActivities .activities-search-wrapper {
        padding: 8px 10px;
    }

    #pageActivities .activities-search-wrapper input,
    #pageTickets .tickets-search-wrapper input {
        padding: 10px 14px;
        font-size: 0.9rem;
        border-radius: 10px;
    }

    #pageActivities .activities-content-card {
        border-radius: 12px;
    }

    #pageActivities .cd-filter {
        border-radius: 12px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Opportunities List Premium — opportunity-specific styles only.
   Layout, filter, search, tabs, responsive: handled by grouped
   selectors in the "Accounts / Contacts / Leads" section below.
   ═══════════════════════════════════════════════════════════════ */

/* ── Opportunity premium list item badges ── */


/* ── Opportunity-specific badge styles ── */
#pageOpportunities .opp-value-pill,
#pageExpenses .opp-value-pill {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    color: #065f46;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    border: 1px solid #a7f3d0;
}

#pageOpportunities .opp-date-pill,
#pageExpenses .opp-date-pill {
    display: inline-flex;
    align-items: center;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 500;
}

#pageOpportunities .opp-prob-badge,
#pageExpenses .opp-prob-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 20px;
    background: #f1f5f9;
    color: #475569;
    margin-left: 6px;
    vertical-align: middle;
}

#pageOpportunities .list-item-meta,
#pageExpenses .list-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    flex-wrap: wrap;
}




/* ── Opportunity status tab pills ── */
#pageOpportunities .activities-type-tabs .opportunityStatus,
#pageExpenses .activities-type-tabs .opportunityStatus,
.activities-type-tabs .opportunityStatus {
    height: 28px;
    padding: 0 14px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.8rem;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
}

#pageOpportunities .activities-type-tabs .opportunityStatus:hover,
#pageExpenses .activities-type-tabs .opportunityStatus:hover,
.activities-type-tabs .opportunityStatus:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #cbd5e1;
    color: #1e293b;
}

#pageOpportunities .activities-type-tabs .opportunityStatus.selectedFilter,
#pageExpenses .activities-type-tabs .opportunityStatus.selectedFilter,
.activities-type-tabs .opportunityStatus.selectedFilter {
    background: linear-gradient(135deg, #2b5797 0%, #1e40af 100%);
    color: #ffffff;
    border-color: #2b5797;
    box-shadow: 0 4px 12px rgba(43, 87, 151, 0.3);
    transform: none;
    text-decoration: none;
}

/* ── Opportunity premium list item overrides ── */
#pageOpportunities .opp-value-pill,
#pageExpenses .opp-value-pill {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    color: #065f46;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 20px;
    border: 1px solid #a7f3d0;
}

#pageOpportunities .opp-date-pill,
#pageExpenses .opp-date-pill {
    display: inline-flex;
    align-items: center;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 500;
}

#pageOpportunities .opp-prob-badge,
#pageExpenses .opp-prob-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 20px;
    background: #f1f5f9;
    color: #475569;
    margin-left: 6px;
    vertical-align: middle;
}

#pageOpportunities .list-item-meta,
#pageExpenses .list-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    flex-wrap: wrap;
}



/* ── Page Header ── */
#pageTickets .tickets-list-header {
    height: 65px;
    min-height: 65px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: #ffffff;
    border-radius: 16px 16px 0 0;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: none;
}

#pageTickets .tickets-list-header .tickets-header-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#pageTickets .tickets-list-header .nav-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #2b5797;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.01em;
}

#pageTickets .tickets-list-header .nav-add-button {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
    flex-shrink: 0;
    border: none;
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1;
    text-decoration: none;
}

#pageTickets .tickets-list-header .nav-add-button:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.35);
}

#pageTickets .tickets-list-header .nav-add-button::before {
    content: "+";
}

/* ── Tab filter wrapper ── */
#pageTickets .cd-tab-filter-wrapper {
    height: auto;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid #e2e8f0;
    border-top: none;
    background: #f8fafc;
    position: relative;
    z-index: 2;
    margin: 0 0 10px 0;
}

#pageTickets .pt-10 {
    padding-top: 0 !important;
}

#pageTickets .activities-type-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: transparent;
    flex-wrap: wrap;
}

#pageTickets .activities-type-tabs .activitiesType {
    height: 28px;
    padding: 0 14px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.8rem;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

#pageTickets .activities-type-tabs .activitiesType:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #cbd5e1;
    color: #1e293b;
}

#pageTickets .activities-type-tabs .activitiesType.selectedFilter {
    background: linear-gradient(135deg, #2b5797 0%, #1e40af 100%);
    color: #ffffff;
    border-color: #2b5797;
    box-shadow: 0 4px 12px rgba(43, 87, 151, 0.3);
    transform: none;
    text-decoration: none;
}

/* ── Search Bar ── */
#pageTickets .tickets-search-wrapper {
    padding: 12px 20px;
    background: #ffffff;
    border-radius: 0;
}

#pageTickets .tickets-search-wrapper input {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    border-bottom: 2px solid #e2e8f0;
    border-radius: 0;
    padding: 10px 0;
    color: #1e293b;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: none;
    box-sizing: border-box;
}

#pageTickets .tickets-search-wrapper input:focus {
    border-color: #2b5797;
    box-shadow: none;
    outline: none;
    background: transparent;
}

#pageTickets .tickets-search-wrapper input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

/* ── Main Content Card ── */
#pageTickets .tickets-content-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

/* ── Layout heights ── */
#pageTickets .page-region-content {
    min-height: calc(100vh - 60px);
}

#pageTickets #listview_tickets {
    min-height: 200px;
    height: calc(100vh - 200px);
    overflow-y: auto;
}

/* ── Sidebar Filter ── */
#pageTickets .cd-filter {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    border: 1px solid #e2e8f0;
    top: 0;
    left: 0;
    height: calc(100% - 70px);
    overflow-y: auto;
}

#pageTickets .cd-filter.filter-is-visible {
    margin-left: 0;
}

#pageTickets .cd-main-content.is-fixed .cd-filter {
    top: 0;
}

#pageTickets .cd-filter-trigger {
    top: 10px !important;
    left: 0 !important;
    width: 210px !important;
    height: 35px !important;
    line-height: 35px !important;
    padding-left: 28px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #64748b !important;
    text-indent: 0 !important;
    background-position: 6px center !important;
}

#pageTickets .cd-main-content.is-fixed .cd-filter-trigger {
    top: 0;
}

#pageTickets .cd-gallery {
    margin-top: 0;
    padding-top: 0 !important;
}

#pageTickets .cd-filter form {
    padding: 50px 15px 20px;
}

#pageTickets .cd-filter .cd-filter-block {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}

#pageTickets .cd-filter .cd-filter-block h5 {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    padding: 6px 0 4px 0;
    margin-bottom: 4px;
}

#pageTickets .cd-filter .cd-filter-block h5::before {
    display: none;
}

#pageTickets .cd-filter .cd-filter-block select {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 12px;
    color: #1e293b;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

#pageTickets .cd-filter .cd-filter-block select:focus {
    border-color: #2b5797;
    box-shadow: 0 0 0 3px rgba(43, 87, 151, 0.1);
    outline: none;
}

#pageTickets .cd-filter .cd-close {
    height: 40px;
    line-height: 40px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s ease;
}

#pageTickets .cd-filter .cd-close:hover {
    color: #2b5797;
    background: transparent;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    #pageTickets .tickets-list-header {
        height: 52px;
        min-height: 52px;
        padding: 0 12px;
        border-radius: 12px 12px 0 0;
    }

    #pageTickets .cd-tab-filter-wrapper {
        border-radius: 0 0 12px 12px;
    }

    #pageTickets .tickets-list-header .nav-title {
        font-size: 0.95rem;
    }

    #pageTickets .activities-type-tabs {
        padding: 8px 12px;
        gap: 6px;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    #pageTickets .activities-type-tabs::-webkit-scrollbar {
        display: none;
    }

    #pageTickets .activities-type-tabs .activitiesType {
        height: 30px;
        padding: 0 12px;
        font-size: 0.75rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    #pageTickets .tickets-search-wrapper {
        padding: 8px 10px;
    }

    #pageTickets .tickets-search-wrapper input {
        padding: 10px 14px;
        font-size: 0.9rem;
        border-radius: 0;
        border: none;
        border-bottom: 2px solid #e2e8f0;
        background: transparent;
    }

    #pageTickets .tickets-content-card {
        border-radius: 12px;
    }

    #pageTickets .cd-filter {
        border-radius: 12px;
    }
}

/* ── Small-screen mode — toggled by JS via .tickets-mobile-mode ── */
/* FAB is shown by default Premium styles at bottom of file */

#pageTickets.tickets-mobile-mode .cd-filter.filter-is-visible {
    width: 280px;
    height: 100%;
    z-index: 20;
    border-radius: 0 16px 16px 0;
    overflow-y: auto;
}

#pageTickets.tickets-mobile-mode .cd-gallery {
    width: 100% !important;
}

/* ── Tickets mobile filter FAB ── */
.tickets-filter-fab {
    display: none;
    position: fixed;
    bottom: 70px;
    left: 16px;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    line-height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2b5797 0%, #1e40af 100%);
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(43, 87, 151, 0.35);
    z-index: 100;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
}

.tickets-filter-fab.is-visible {
    display: flex;
}

.tickets-filter-fab:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 14px rgba(43, 87, 151, 0.5);
}

.tickets-filter-fab svg {
    width: 16px;
    height: 16px;
    stroke: #ffffff;
    fill: none;
}

/* ── End of Tickets List Premium ── */

@media (max-width: 768px) {

    #pageOpportunities .opportunities-list-header,
    #pageExpenses .opportunities-list-header {
        height: 52px;
        min-height: 52px;
        padding: 0 12px;
        border-radius: 12px 12px 0 0;
    }

    #pageOpportunities .opportunities-list-header .nav-title,
    #pageExpenses .opportunities-list-header .nav-title {
        font-size: 0.95rem;
    }

    #pageOpportunities .opportunities-search-wrapper,
    #pageExpenses .opportunities-search-wrapper {
        padding: 8px 10px;
    }

    #pageOpportunities .opportunities-search-wrapper input,
    #pageExpenses .opportunities-search-wrapper input {
        padding: 10px 14px;
        font-size: 0.9rem;
        border-radius: 10px;
    }

    #pageOpportunities .opportunities-content-card,
    #pageExpenses .opportunities-content-card {
        border-radius: 12px;
    }

    #pageOpportunities .cd-filter,
    #pageExpenses .cd-filter {
        border-radius: 12px;
    }
}

/* ── Small-screen mode — toggled by JS via .opportunities-mobile-mode ── */
#pageOpportunities.opportunities-mobile-mode .cd-filter-trigger {
    display: none !important;
}

#pageOpportunities.opportunities-mobile-mode .cd-filter.filter-is-visible {
    width: 280px;
    height: 100%;
    z-index: 20;
    border-radius: 0 16px 16px 0;
    overflow-y: auto;
}

#pageOpportunities.opportunities-mobile-mode .cd-gallery {
    width: 100% !important;
}

/* ── Opportunities mobile filter FAB ── */
.opportunities-filter-fab {
    display: none;
    position: fixed;
    bottom: 70px;
    left: 16px;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    max-width: 36px;
    max-height: 36px;
    padding: 0;
    line-height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2b5797 0%, #1e40af 100%);
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(43, 87, 151, 0.35);
    z-index: 100;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
    -webkit-appearance: none;
    appearance: none;
}

.opportunities-filter-fab.is-visible {
    display: flex;
}

.opportunities-filter-fab:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 14px rgba(43, 87, 151, 0.5);
}

.opportunities-filter-fab svg {
    width: 16px;
    height: 16px;
    stroke: #ffffff;
    fill: none;
}

/* ── Activity list item classes (replace inline styles from ActivityObj) ── */
.activity-row-inner {
    width: 100%;
    padding-right: 15px;
}

.activity-icon-left {
    position: absolute;
    left: 15px;
}

.activity-icon-phone {
    position: absolute;
    left: 20px;
    top: 5px;
}

.activity-name-offset {
    left: 45px;
}

.activity-priority-right {
    position: absolute;
    float: right;
    right: 5px;
    height: 23px;
    font-size: 12px;
}

.activity-priority-phone {
    margin: 25px 5px 0 0;
    font-size: 12px;
}

.activity-percent {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 13px;
}

.activity-color-bar {
    top: 4px;
    height: 68px;
}

.activity-date-inline {
    font-size: 11px;
}

.activity-subject-margin {
    margin: 5px 0;
}

.activity-checkbox {
    top: 7px;
    left: 30px;
}

.activity-td-full {
    width: 100%;
}

.activity-td-padleft {
    padding-left: 10px;
}

.activity-td-priority {
    width: 80px;
    text-align: center;
}

.activity-list-loading {
    opacity: 0.5;
    pointer-events: none;
}

/* ── Opportunity list — replaces inline styles ── */
.opp-row-inner {
    width: 100%;
    height: 75px;
    padding-right: 15px;
}




.opp-percent {
    font-size: 12px;
    margin-top: 5px;
}

.opp-date-right {
    position: absolute;
    float: right;
    right: 5px;
    height: 23px;
    top: 50px;
    font-size: 11px;
}

.opp-value-row {
    height: 25px;
}

.opp-td-full {
    width: 100%;
}

.opp-td-color {
    width: 5px;
    /* background-color set dynamically via data-color */
}

.opp-td-percent {
    min-width: 70px;
}

.opp-td-name {
    width: 90%;
}

.opp-td-value {
    min-width: 120px;
}

/* ── Opportunity list page layout — replaces inline styles ── */
.opp-back-btn {
    float: left;
}

.opp-add-btn {
    position: relative;
    float: right;
    margin-right: 0;
}

.opp-content-wrapper {
    padding-top: 10px;
}

.opp-gallery {
    margin-top: 0;
}

.opp-list-container {
    background-color: white;
    border-radius: 7px;
}

.opp-filter-search {
    margin-bottom: 5px;
    background-color: white;
    padding: 7px;
    border-radius: 7px;
}

.opp-type-title {
    font-weight: bold;
}

.opp-filter-label {
    margin-bottom: 0;
}

/* ── Opportunity dashboard table — replaces inline styles ── */
.opp-dash-row {
    cursor: pointer;
}

.opp-dash-color {
    width: 15px;
    vertical-align: middle;
    padding-left: 5px;
}

.opp-dash-color-dot {
    width: 15px;
    height: 15px;
    /* background-color set dynamically via data-color */
}

.opp-dash-prob {
    width: 65px;
    padding-left: 10px;
    vertical-align: middle;
    white-space: nowrap;
}

.opp-dash-name {
    padding-left: 15px;
    vertical-align: middle;
}

.opp-dash-amount {
    min-width: 100px;
    vertical-align: middle;
    padding-right: 10px;
}

/* ── Small-screen mode — toggled by JS via .activities-mobile-mode ── */
#pageActivities.activities-mobile-mode .cd-filter-trigger {
    display: none !important;
}

#pageActivities.activities-mobile-mode .cd-filter.filter-is-visible {
    width: 280px;
    height: 100%;
    z-index: 20;
    border-radius: 0 16px 16px 0;
    overflow-y: auto;
}

#pageActivities.activities-mobile-mode .cd-gallery {
    width: 100% !important;
}

/* ── Mobile filter FAB — shown/hidden by JS ── */
.activities-filter-fab {
    display: none;
    position: fixed;
    bottom: 70px;
    left: 16px;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    max-width: 36px;
    max-height: 36px;
    padding: 0;
    line-height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2b5797 0%, #1e40af 100%);
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(43, 87, 151, 0.35);
    z-index: 100;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
    -webkit-appearance: none;
    appearance: none;
}

.activities-filter-fab.is-visible {
    display: flex;
}

.activities-filter-fab:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 14px rgba(43, 87, 151, 0.5);
}

.activities-filter-fab svg {
    width: 16px;
    height: 16px;
    stroke: #ffffff;
    fill: none;
}


/* ═══════════════════════════════════════════════════════════════
   Vendors List Premium — V2 (Mirrors Activities structure exactly)
   ═══════════════════════════════════════════════════════════════ */

/* ── Page Header ── */
.vendors-container .vendors-list-header {
    height: 65px;
    min-height: 65px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: #ffffff;
    border-radius: 16px 16px 0 0;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: none;
}

.vendors-container .vendors-list-header .vendors-header-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vendors-container .vendors-list-header .nav-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #2b5797;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.01em;
}

.vendors-container .vendors-list-header .nav-add-button {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(43, 87, 151, 0.25);
    flex-shrink: 0;
    border: none;
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1;
    text-decoration: none;
}

.vendors-container .vendors-list-header .nav-add-button:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 18px rgba(43, 87, 151, 0.35);
}

.vendors-container .vendors-list-header .nav-add-button::before {
    content: "+";
}

/* ── Type Tabs (All / Actives / Inactives) ── */
.vendors-container .cd-tab-filter-wrapper {
    height: auto;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid #e2e8f0;
    border-top: none;
    background: #f8fafc;
    position: relative;
    z-index: 2;
    margin: 0 0 10px 0;
}

.vendors-container .pt-10 {
    padding-top: 0 !important;
}

.vendors-container .activities-type-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: transparent;
    flex-wrap: wrap;
}

.vendors-container .activities-type-tabs .activitiesType {
    height: 28px;
    padding: 0 14px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.8rem;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.vendors-container .activities-type-tabs .activitiesType:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #cbd5e1;
    color: #1e293b;
}

.vendors-container .activities-type-tabs .activitiesType.selectedFilter {
    background: linear-gradient(135deg, #2b5797 0%, #1e40af 100%);
    color: #ffffff;
    border-color: #2b5797;
    box-shadow: 0 4px 12px rgba(43, 87, 151, 0.3);
    transform: none;
    text-decoration: none;
}

/* ── Search Bar ── */
.vendors-container .vendors-search-wrapper {
    padding: 12px 20px;
    background: #ffffff;
    border-radius: 0;
}

.vendors-container .vendors-search-wrapper input {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    border-bottom: 2px solid #e2e8f0;
    border-radius: 0;
    padding: 10px 0;
    color: #1e293b;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: none;
    box-sizing: border-box;
}

.vendors-container .vendors-search-wrapper input:focus {
    border-color: #2b5797;
    box-shadow: none;
    outline: none;
    background: transparent;
}

.vendors-container .vendors-search-wrapper input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

/* ── Main Content Card ── */
.vendors-container .vendors-content-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

/* ── Layout heights ── */
.vendors-container .page-region-content {
    min-height: calc(100vh - 60px);
}

.vendors-container #listview_vendors {
    min-height: 200px;
    height: calc(100vh - 200px);
    overflow-y: auto;
}

/* ── Sidebar Filter — V2 Polish (matches Activities) ── */
.vendors-container .cd-filter {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    border: 1px solid #e2e8f0;
    top: 0;
    left: 0;
    height: calc(100% - 70px);
}

.vendors-container .cd-filter.filter-is-visible {
    margin-left: 0;
}

.vendors-container .cd-main-content.is-fixed .cd-filter {
    top: 0;
}

/* Filter trigger — positioned as sidebar header */
.vendors-container .cd-filter-trigger {
    top: 10px !important;
    left: 0 !important;
    width: 210px !important;
    height: 35px !important;
    line-height: 35px !important;
    padding-left: 28px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #64748b !important;
    text-indent: 0 !important;
    background-position: 6px center !important;
}

.vendors-container .cd-main-content.is-fixed .cd-filter-trigger {
    top: 0;
}

.vendors-container .cd-gallery {
    margin-top: 0;
    padding-top: 0 !important;
}

.vendors-container .cd-filter form {
    padding: 50px 15px 20px;
}

.vendors-container .cd-filter .cd-filter-block {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}

.vendors-container .cd-filter .cd-filter-block:last-child {
    border-bottom: none;
}

.vendors-container .cd-filter .cd-filter-block h5 {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    padding: 6px 0 4px 0;
    margin-bottom: 4px;
}

.vendors-container .cd-filter .cd-filter-block h5::before {
    display: none;
}

.vendors-container .cd-filter .cd-filter-block select {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 12px;
    color: #1e293b;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.vendors-container .cd-filter .cd-filter-block select:focus {
    border-color: #2b5797;
    box-shadow: 0 0 0 3px rgba(43, 87, 151, 0.1);
    outline: none;
}

.vendors-container .cd-filter .cd-close {
    height: 40px;
    line-height: 40px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s ease;
}

.vendors-container .cd-filter .cd-close:hover {
    color: #2b5797;
    background: transparent;
}

/* Add category buttons in filter */
.vendors-container .cd-filter .add-form-button-black {
    float: right;
    margin-top: 2px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .page-region-content .vendors-list-header {
        height: 52px;
        min-height: 52px;
        padding: 0 12px;
        border-radius: 12px 12px 0 0 !important;
        margin: 5px 5px 0 5px !important;
        width: auto !important;
        border-bottom: none !important;
        background: #ffffff !important;
    }

    .page-region-content .vendors-list-header .nav-title {
        font-size: 0.95rem;
    }

    .page-region-content .cd-tab-filter-wrapper {
        border-radius: 0 !important;
        margin: 0 5px !important;
        width: auto !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }

    .page-region-content .activities-type-tabs {
        padding: 4px 12px 12px 12px !important;
        gap: 6px;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .page-region-content .activities-type-tabs::-webkit-scrollbar {
        display: none;
    }

    .page-region-content .activities-type-tabs .activitiesType {
        height: 30px;
        padding: 0 12px !important;
        font-size: 0.75rem !important;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .page-region-content .vendors-search-wrapper {
        padding: 8px 12px !important;
        background: #ffffff !important;
    }

    .page-region-content .vendors-search-wrapper input {
        padding: 8px 0 !important;
        font-size: 0.85rem !important;
        border-radius: 0 !important;
        border-bottom: 2px solid #e2e8f0 !important;
        background: transparent !important;
    }

    .page-region-content .vendors-content-card {
        border-radius: 0 0 12px 12px !important;
        margin: 0 5px 12px 5px !important;
        width: auto !important;
        background: #ffffff !important;
    }

    .page-region-content .cd-filter {
        border-radius: 12px;
    }
}

/* Small-screen mode — toggled by JS via .vendors-mobile-mode */
#pageVendors.vendors-mobile-mode .cd-filter-trigger {
    display: none !important;
}

#pageVendors.vendors-mobile-mode .cd-filter.filter-is-visible {
    width: 280px;
    height: 100%;
    z-index: 20;
    border-radius: 0 16px 16px 0;
    overflow-y: auto;
}

#pageVendors.vendors-mobile-mode .cd-gallery {
    width: 100% !important;
}

/* ── Vendors mobile filter FAB ── */
.vendors-filter-fab {
    display: none;
    position: fixed;
    bottom: 70px;
    left: 16px;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    line-height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2b5797 0%, #1e40af 100%);
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(43, 87, 151, 0.35);
    z-index: 100;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
}

.vendors-filter-fab.is-visible {
    display: flex;
}

.vendors-filter-fab:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 14px rgba(43, 87, 151, 0.5);
}

.vendors-filter-fab svg {
    width: 16px;
    height: 16px;
    stroke: #ffffff;
    fill: none;
}

/* ── Empty State — No Results ── */
.empty-state-message {
    display: none;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
    padding: 60px 20px;
    margin: 15px;
    text-align: center;
}

.empty-state-message .empty-state-icon {
    margin-bottom: 16px;
}

.empty-state-message p {
    font-size: 0.95rem;
    color: #64748b;
    font-weight: 500;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   Leads List Premium — V2 Design System
   Scoped under #pageLead to avoid leaking
   ═══════════════════════════════════════════════════════════════ */

/* ── Page Header ── */
#pageLead .v2-list-header {
    height: 65px;
    min-height: 65px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: #ffffff;
    border-radius: 16px 16px 0 0;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: none;
}

#pageLead .v2-list-header .v2-header-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#pageLead .v2-list-header .nav-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #2b5797;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.01em;
}

#pageLead .v2-list-header .nav-add-button {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2b5797 0%, #1e40af 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(43, 87, 151, 0.25);
    flex-shrink: 0;
    border: none;
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1;
    text-decoration: none;
}

#pageLead .v2-list-header .nav-add-button:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 18px rgba(43, 87, 151, 0.35);
}

#pageLead .v2-list-header .nav-add-button::before {
    content: "+";
}

/* ── Type Tabs (All / New / Assigned / In Progress / …) ── */
#pageLead .cd-tab-filter-wrapper {
    height: auto;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid #e2e8f0;
    border-top: none;
    background: #f8fafc;
    position: relative;
    z-index: 2;
    margin: 0 0 10px 0;
}

#pageLead .pt-10 {
    padding-top: 0 !important;
}

#pageLead .activities-type-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: transparent;
    flex-wrap: wrap;
}

#pageLead .activities-type-tabs .activitiesType,
#pageLead .activities-type-tabs .leadStatus {
    height: 28px;
    padding: 0 14px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.8rem;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

#pageLead .activities-type-tabs .activitiesType:hover,
#pageLead .activities-type-tabs .leadStatus:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #cbd5e1;
    color: #1e293b;
}

#pageLead .activities-type-tabs .activitiesType.selectedFilter,
#pageLead .activities-type-tabs .leadStatus.selectedFilter {
    background: linear-gradient(135deg, #2b5797 0%, #1e40af 100%);
    color: #ffffff;
    border-color: #2b5797;
    box-shadow: 0 4px 12px rgba(43, 87, 151, 0.3);
    transform: none;
    text-decoration: none;
}

/* ── Search Bar ── */
#pageLead .v2-search-wrapper {
    padding: 12px 20px;
    background: #ffffff;
    border-radius: 0;
}

#pageLead .v2-search-wrapper input {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    border-bottom: 2px solid #e2e8f0;
    border-radius: 0;
    padding: 10px 0;
    color: #1e293b;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: none;
    box-sizing: border-box;
}

#pageLead .v2-search-wrapper input:focus {
    border-color: #2b5797;
    box-shadow: none;
    outline: none;
    background: transparent;
}

#pageLead .v2-search-wrapper input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

/* ── Main Content Card ── */
#pageLead .v2-content-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

/* ── Layout heights ── */
#pageLead .page-region-content {
    min-height: calc(100vh - 60px);
}

#pageLead #listview_leads {
    min-height: 200px;
    height: calc(100vh - 200px);
    overflow-y: auto;
}

/* ── Sidebar Filter ── */
#pageLead .cd-filter {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    border: 1px solid #e2e8f0;
    top: 0;
    left: 0;
    height: calc(100% - 70px);
    overflow-y: auto;
}

#pageLead .cd-filter.filter-is-visible {
    margin-left: 0;
}

#pageLead .cd-main-content.is-fixed .cd-filter {
    top: 0;
}

#pageLead .cd-filter-trigger {
    top: 10px !important;
    left: 0 !important;
    width: 210px !important;
    height: 35px !important;
    line-height: 35px !important;
    padding-left: 28px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #64748b !important;
    text-indent: 0 !important;
    background-position: 6px center !important;
}

#pageLead .cd-main-content.is-fixed .cd-filter-trigger {
    top: 0;
}

#pageLead .cd-gallery {
    margin-top: 0;
    padding-top: 0 !important;
}

#pageLead .cd-filter form {
    padding: 50px 15px 40px;
}

#pageLead .cd-filter .cd-filter-block {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}

#pageLead .cd-filter .cd-filter-block:last-child {
    border-bottom: none;
}

#pageLead .cd-filter .cd-filter-block h5 {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    padding: 6px 0 4px 0;
    margin-bottom: 4px;
}

#pageLead .cd-filter .cd-filter-block h5::before {
    display: none;
}

#pageLead .cd-filter .cd-filter-block select {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 12px;
    color: #1e293b;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

#pageLead .cd-filter .cd-filter-block select:focus {
    border-color: #2b5797;
    box-shadow: 0 0 0 3px rgba(43, 87, 151, 0.1);
    outline: none;
}

#pageLead .cd-filter .cd-close {
    height: 40px;
    line-height: 40px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s ease;
}

#pageLead .cd-filter .cd-close:hover {
    color: #2b5797;
    background: transparent;
}

#pageLead .cd-filter .add-form-button-black {
    float: right;
    margin-top: 2px;
}

/* ── Mobile Responsive ── */
@media (max-width: 768px) {

    /* Header compact */
    #pageLead .v2-list-header {
        height: 52px;
        min-height: 52px;
        padding: 0 12px;
        border-radius: 12px 12px 0 0;
    }

    #pageLead .v2-list-header .nav-title {
        font-size: 0.95rem;
    }

    #pageLead .v2-list-header .v2-header-icon {
        width: 28px;
        height: 28px;
    }

    #pageLead .v2-list-header .v2-header-icon svg {
        width: 18px;
        height: 18px;
    }

    #pageLead .v2-list-header .nav-add-button {
        width: 32px;
        height: 32px;
    }

    /* Tabs: horizontal scroll instead of wrapping */
    #pageLead .cd-tab-filter-wrapper {
        border-radius: 0 0 12px 12px;
    }

    #pageLead .activities-type-tabs {
        padding: 8px 12px;
        gap: 6px;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    #pageLead .activities-type-tabs::-webkit-scrollbar {
        display: none;
    }

    #pageLead .activities-type-tabs .activitiesType,
    #pageLead .activities-type-tabs .leadStatus {
        height: 30px;
        padding: 0 12px;
        font-size: 0.75rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Search full width */
    #pageLead .v2-search-wrapper {
        padding: 8px 12px;
    }

    #pageLead .v2-search-wrapper input {
        padding: 8px 0;
        font-size: 0.85rem;
    }

    /* Content card */
    #pageLead .v2-content-card {
        border-radius: 12px;
    }

    /* List height: fill available space */
    #pageLead #listview_leads {
        height: calc(100vh - 260px);
    }

    /* Filter sidebar: completely hidden at narrow viewport */
    #pageLead .cd-filter,
    #pageLead .cd-filter.filter-is-visible {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        width: 85% !important;
        max-width: 320px !important;
        height: 100% !important;
        border-radius: 16px 0 0 16px !important;
        box-shadow: -8px 0 30px rgba(0, 0, 0, 0.15) !important;
        z-index: 9999 !important;
        transform: translateX(100%) !important;
        transition: transform 0.3s ease !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background: #f8fafc !important;
        touch-action: pan-y !important;
        overscroll-behavior: contain !important;
        visibility: hidden !important;
        pointer-events: none !important;
        margin-left: 0 !important;
    }

    /* Backdrop overlay behind filter - blocks clicks on content */
    .cd-filter-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 9998;
        touch-action: manipulation;
    }

    /* Only show when JS explicitly opens it at narrow viewport */
    #pageLead .cd-filter.cd-filter--narrow-open {
        transform: translateX(0) !important;
        visibility: visible !important;
        pointer-events: auto !important;
        z-index: 9999 !important;
    }

    /* Filter trigger: orange FAB */
    #pageLead .cd-filter-trigger {
        position: fixed !important;
        bottom: 80px !important;
        right: 16px !important;
        left: auto !important;
        top: auto !important;
        width: 52px !important;
        height: 52px !important;
        border-radius: 50% !important;
        background: #f59e0b !important;
        color: #ffffff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0 !important;
        text-indent: -9999px !important;
        text-decoration: none !important;
        z-index: 9998 !important;
        cursor: pointer !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #pageLead .cd-filter-trigger::after {
        content: '' !important;
        display: block !important;
        width: 22px !important;
        height: 22px !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='21' x2='4' y2='14'/%3E%3Cline x1='4' y1='10' x2='4' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12' y2='3'/%3E%3Cline x1='20' y1='21' x2='20' y2='16'/%3E%3Cline x1='20' y1='12' x2='20' y2='3'/%3E%3Cline x1='1' y1='14' x2='7' y2='14'/%3E%3Cline x1='9' y1='8' x2='15' y2='8'/%3E%3Cline x1='17' y1='16' x2='23' y2='16'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
        text-indent: 0 !important;
    }

    /* Gallery takes full width when filter is hidden */
    #pageLead .cd-gallery {
        width: 100% !important;
        padding-right: 0 !important;
    }

    /* Page region */
    #pageLead .page-region-content {
        min-height: auto;
    }
}

/* ── Leads select-all and sidebar buttons ── */
#pageLead .lead-list-select-all {
    font-size: 0.85rem;
    font-weight: 600;
    color: #2b5797;
    cursor: pointer;
}

#pageLead .lead-list-btn-full {
    width: 100%;
    margin-top: 6px;
}

#pageLead .lead-list-btn-export {
    width: 100%;
    margin-top: 6px;
}

/* ── Lead List Items (V2 Flex Structure from lead.js) ── */
#pageLead .premium-list-item {
    background: #ffffff;
    border-bottom: 1px solid #f1f5f9;
    padding: 0;
    transition: background 0.2s ease;
}

#pageLead .premium-list-item:hover {
    background: #f8fafc;
}

#pageLead .list-item-content {
    display: flex;
    align-items: flex-start;
    padding: 14px 16px;
    gap: 14px;
    position: relative;
}

#pageLead .list-item-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}


#pageLead .list-checkbox-wrapper {
    margin-top: 2px;
}

#pageLead .list-item-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding-right: 36px;
    padding-top: 2px;
}

#pageLead .list-title-row {
    width: 100%;
}

#pageLead .list-company {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    display: block;
    word-break: break-word;
    line-height: 1.25;
    margin-bottom: 2px;
}

#pageLead .list-info-row {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #64748b;
    font-size: 0.85rem;
    line-height: 1.4;
}

#pageLead .list-address,
#pageLead .list-street {
    display: block;
    white-space: normal;
    word-break: break-word;
}

#pageLead .list-item-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

#pageLead .action-menu-trigger {
    position: relative;
    width: 32px;
    height: 32px;
    background: #f8fafc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
}

#pageLead .action-menu-trigger:hover {
    background: #e2e8f0;
}

#pageLead .action-menu-trigger img {
    width: 16px;
    height: auto;
}

#pageLead .action-menu-trigger select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
}

/* ── Empty State ── */
#pageLead .empty-state-message {
    display: none;
    padding: 60px 20px;
    text-align: center;
}

#pageLead .empty-state-icon {
    margin-bottom: 16px;
}

#pageLead .empty-state-message p {
    color: #64748b;
    font-size: 1rem;
    font-weight: 600;
}

/* ── Legacy list item override (if old structure leaks) ── */
#pageLead hr.list {
    display: none;
}

/* ═══════════════════════════════════════════════════════
   LEAD LIST PREMIUM V2 — MOBILE-SAFE (NO #pageLead scope)
   On mobile, content is NOT inside #pageLead, so all rules
   use class selectors directly.
   ═══════════════════════════════════════════════════════ */

/* ── Pulse animation (mass mailing orange #f59e0b) ── */
@keyframes pulseFilter {
    0% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
    }

    70% {
        box-shadow: 0 0 0 20px rgba(245, 158, 11, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
    }
}

/* ── Page region: kill side margins on mobile ── */
.page-region-content {
    padding: 0 !important;
    margin: 0 !important;
}

/* Override mobileMenu.css 15px padding */
body.v2-mobile-mode .page-region-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Backdrop for filter modal */
.filter-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 9998;
}

.filter-backdrop.active {
    display: block;
}

/* ── Page Header ── */
.v2-list-header {
    height: 60px;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    background: #ffffff;
    border-radius: 16px 16px 0 0;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: none;
    position: relative;
    z-index: 10;
}

.v2-list-header .v2-header-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.v2-list-header .nav-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    color: #2b5797;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.01em;
}

.v2-list-header .nav-add-button,
#pageLead .v2-list-header .nav-add-button {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f59e0b !important;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
    flex-shrink: 0;
    border: none;
    font-size: 1.4rem;
    animation: pulseFilter 2.5s infinite;
    font-weight: 300;
    line-height: 1;
    text-decoration: none;
}

.v2-list-header .nav-add-button::before {
    content: "+";
}

/* ── Header action group (multiple buttons instead of single +) ── */
.v2-list-header .v2-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}


.pc-wizard-tab {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    background: #f59e0b;
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    margin-left: 8px;
    transition: background 0.15s ease, transform 0.15s ease;
    white-space: nowrap;
    line-height: 1.4;
    vertical-align: middle;
}

.pc-wizard-tab:hover {
    background: #d97706;
    transform: scale(1.03);
}

/* ── Status Tabs — Scrollable Pills ── */
.cd-tab-filter-wrapper {
    height: auto;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid #e2e8f0;
    border-top: none;
    background: #f8fafc;
    position: relative;
    z-index: 2;
    margin: 0 0 10px 0;
}

.pt-10 {
    padding-top: 0 !important;
}

.activities-type-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.activities-type-tabs::-webkit-scrollbar {
    display: none;
}

.activities-type-tabs .activitiesType,
.activities-type-tabs .leadStatus {
    height: 28px;
    padding: 0 14px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.8rem;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
}

.activities-type-tabs .activitiesType.selectedFilter,
.activities-type-tabs .leadStatus.selectedFilter {
    background: linear-gradient(135deg, #2b5797 0%, #1e40af 100%);
    color: #ffffff;
    border-color: #2b5797;
    box-shadow: 0 4px 12px rgba(43, 87, 151, 0.3);
}

/* ── Search Bar ── */
.v2-search-wrapper {
    padding: 12px 20px;
    background: #ffffff;
    border-radius: 0;
}

.v2-search-wrapper input {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    border-bottom: 2px solid #e2e8f0;
    border-radius: 0;
    padding: 10px 0;
    color: #1e293b;
    font-size: 0.95rem;
    font-weight: 500;
    box-shadow: none;
    box-sizing: border-box;
    outline: none;
}

.v2-search-wrapper input:focus {
    border-color: #2b5797;
}

.v2-search-wrapper input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

/* ── Main Content Card ── */
.v2-content-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

/* ── Lead List Items (V2 Flex from lead.js) ── */
/* Override modern.css .notices > div { height:90px; display:block; overflow:hidden } */
.premium-list-item,
.notices>div.premium-list-item,
.premium-list-item>.list-item-content {
    height: auto !important;
    /* Force override modern.css 90px */
    margin-bottom: 0 !important;
    /* Remove legacy 10px margin */
}

.premium-list-item {
    background: #ffffff;
    border-bottom: 1px solid #f1f5f9;
    padding: 0;
    overflow: visible !important;
    display: block !important;
    cursor: pointer;
    touch-action: manipulation;
    box-sizing: border-box;
}

.list-item-content {
    display: flex !important;
    align-items: center;
    padding: 5px 20px;
    gap: 8px;
    position: relative;
}

.premium-list-item.selected {
    background-color: #f0f7ff !important;
    border: none !important;
    /* Remove legacy blue border */
}

.premium-list-item.selected:after {
    display: none !important;
    /* Remove legacy selection triangle */
}

.premium-list-item.selected .list-item-content {
    background-color: #f0f7ff !important;
}

/* Email activity badges (Ouvert / Envoyé) — displayed inline in the list body */
.email-activity-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.email-activity-badge--opened {
    background: #dcfce7;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

.email-activity-badge--sent {
    background: #eff6ff;
    color: #3b82f6;
    border: 1px solid #bfdbfe;
}

/* Activity type icon (calendar/phone/task/mail) */
.activity-type-icon {
    padding: 4px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    object-fit: contain;
}

/* Email kind badges */
.email-kind-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 20px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    flex-shrink: 0;
}

.email-kind-badge--mass-mailing {
    background: #ede9fe;
    color: #6d28d9;
    border: 1px solid #ddd6fe;
}

.email-kind-badge--document {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #fde68a;
}

.email-kind-badge--dunning {
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.email-kind-badge--settlement {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.email-kind-badge--manual {
    background: #dbeafe;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

/* ── Email Detail Modal (shared — loaded dynamically on any page) ── */
.v2-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 100000 !important;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
}

.v2-modal-overlay.d-none {
    display: none !important;
}

.v2-modal-content {
    background: white !important;
    width: 100% !important;
    max-width: 800px !important;
    max-height: 90vh !important;
    border-radius: 24px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    animation: modal-slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes modal-slide-up {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

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

.v2-modal-header {
    padding: 20px 30px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.v2-modal-header h4 {
    color: #1e293b !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

.v2-modal-body {
    padding: 30px !important;
    overflow-y: auto !important;
    background: #fcfcfc !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
}

.email-detail-topbar {
    gap: 12px;
}

.email-detail-headers {
    padding: 16px 30px !important;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.88rem;
    background: #fafbfc;
}

.email-header-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.email-header-label {
    font-weight: 600;
    color: #64748b;
    min-width: 36px;
}

.email-header-value {
    color: #1e293b;
}

.email-contact-badge {
    display: inline-block;
    background: #eff6ff;
    color: #3b82f6;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    padding: 1px 8px;
    font-size: 0.75rem;
    font-weight: 600;
}

.email-opened-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #dcfce7;
    color: #16a34a;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    padding: 1px 8px;
    font-size: 0.75rem;
    font-weight: 600;
}

.close-modal {
    background: #f1f5f9 !important;
    border: none !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #64748b !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
}

.close-modal:hover {
    background: #e2e8f0 !important;
    color: #ef4444 !important;
}

.email-subject-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem !important;
}

.email-topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.list-item-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}

.list-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    background: #e8edf3;
    color: #2b5797;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    border: none;
    box-shadow: none;
    overflow: hidden;
}

/* ── Opportunity list-item-avatar (circle with initials) ── */
.list-item-avatar {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    background: #2b5797;
    /* overridden by JS via data-bg */
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    overflow: hidden;
}

.list-item-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.list-item-subtitle {
    font-size: 0.8rem;
    font-weight: 500;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.list-item-chevron {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.list-checkbox-wrapper {
    margin: 0;
    opacity: 1;
}

.list-item-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    padding-right: 0;
    padding-top: 0;
}

.list-title-row {
    width: 100%;
}

.list-company {
    font-size: 0.84rem;
    font-weight: 600;
    color: #1e293b;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    margin-bottom: 0;
}

.list-info-row {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #94a3b8;
    font-size: 0.73rem;
    line-height: 1.2;
}

.list-address,
.list-street {
    display: inline;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-item-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    width: 32px;
}

.list-checkbox-wrapper {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.list-checkbox-wrapper .input-control.checkbox {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.list-checkbox-wrapper .helper {
    padding-left: 0 !important;
    margin: 0 !important;
    width: 20px;
    height: 20px;
}

.action-menu-trigger {
    position: relative;
    width: 32px;
    height: 32px;
    background: #f8fafc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.action-menu-trigger img {
    width: 16px;
    height: auto;
}

.action-menu-trigger select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
}

/* ── Sidebar Filter ── */
.cd-filter {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    border: 1px solid #e2e8f0;
}

.cd-filter form {
    padding: 50px 15px 20px;
}

.cd-filter .cd-filter-block {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}

.cd-filter .cd-filter-block:last-child {
    border-bottom: none;
}

.cd-filter .cd-filter-block h5 {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    padding: 6px 0 4px 0;
    margin-bottom: 4px;
}

.cd-filter .cd-filter-block h5::before {
    display: none;
}

.cd-filter .cd-filter-block select {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 12px;
    color: #1e293b;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.cd-filter .cd-close {
    height: 40px;
    line-height: 40px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
}

.cd-filter .add-form-button-black {
    float: right;
    margin-top: 2px;
}

.cd-gallery {
    margin-top: 0;
    padding-top: 0 !important;
}

/* ── Mobile: Scrollable tabs + slide-over filter ── */
@media (max-width: 768px) {

    .page-region-content,
    body.v2-mobile-mode .page-region-content {
        padding: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
    }

    .v2-list-header {
        height: 50px;
        min-height: 50px;
        padding: 0 10px;
        border-radius: 16px 16px 0 0;
        margin: 0;
    }

    .v2-list-header .nav-title {
        font-size: 0.95rem;
    }

    .v2-list-header .v2-header-icon {
        width: 28px;
        height: 28px;
    }

    .v2-list-header .v2-header-icon svg {
        width: 18px;
        height: 18px;
    }

    .v2-list-header .nav-add-button {
        width: 34px;
        height: 34px;
        font-size: 1.2rem;
    }

    .cd-tab-filter-wrapper {
        border-radius: 0 0 16px 16px;
        margin: 0 0 12px 0;
        position: relative;
    }

    /* Scroll arrow indicator on right side of tabs (removed by user request due to overlap) */
    .cd-tab-filter-wrapper::after {
        display: none !important;
    }

    .cd-tab-filter-wrapper.tabs-scrolled-end::after {
        display: none;
    }

    .activities-type-tabs {
        padding: 8px 10px;
        padding-right: 30px;
        gap: 6px;
    }

    .activities-type-tabs .activitiesType,
    .activities-type-tabs .leadStatus {
        height: 32px;
        padding: 0 14px;
        font-size: 0.8rem;
    }

    .v2-search-wrapper {
        padding: 8px 10px;
    }

    .v2-content-card {
        border-radius: 16px;
        overflow: hidden !important;
    }

    #listview_leads {
        height: calc(100vh - 240px);
    }

    .pt-10 {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Filter: slide-over modal from right */
    .cd-filter {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        width: 85% !important;
        max-width: 320px !important;
        height: 100% !important;
        border-radius: 16px 0 0 16px !important;
        box-shadow: -8px 0 30px rgba(0, 0, 0, 0.15) !important;
        z-index: 9999 !important;
        transform: translateX(100%) !important;
        transition: transform 0.3s ease !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        margin-left: 0 !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        touch-action: pan-y !important;
    }

    .cd-filter.cd-filter--narrow-open {
        transform: translateX(0) !important;
    }

    /* Prevent page horizontal scroll when filter is open */
    html,
    body {
        overflow-x: hidden !important;
    }

    /* Filter trigger: colorful pulsing FAB */
    .cd-filter-trigger {
        position: fixed !important;
        bottom: 80px !important;
        right: 16px !important;
        left: auto !important;
        top: auto !important;
        width: 52px !important;
        height: 52px !important;
        border-radius: 50% !important;
        background: #f59e0b !important;
        color: #ffffff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0 !important;
        text-indent: -9999px !important;
        text-decoration: none !important;
        z-index: 9998 !important;
        cursor: pointer !important;
        animation: pulseFilter 2s infinite ease-in-out !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .cd-filter-trigger::after {
        content: '' !important;
        display: block !important;
        width: 22px !important;
        height: 22px !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='21' x2='4' y2='14'/%3E%3Cline x1='4' y1='10' x2='4' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12' y2='3'/%3E%3Cline x1='20' y1='21' x2='20' y2='16'/%3E%3Cline x1='20' y1='12' x2='20' y2='3'/%3E%3Cline x1='1' y1='14' x2='7' y2='14'/%3E%3Cline x1='9' y1='8' x2='15' y2='8'/%3E%3Cline x1='17' y1='16' x2='23' y2='16'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
        text-indent: 0 !important;
    }

    /* Gallery full width on mobile */
    .cd-gallery {
        width: 100% !important;
        padding-right: 0 !important;
    }
}

/* ── Empty state ── */
.empty-state-message {
    display: none;
    padding: 60px 20px;
    text-align: center;
}

.empty-state-icon {
    margin-bottom: 16px;
}

.empty-state-message p {
    color: #64748b;
    font-size: 1rem;
    font-weight: 600;
}

/* ── Legacy overrides ── */
hr.list {
    display: none;
}

.lead-list-select-all {
    font-size: 0.85rem;
    font-weight: 600;
    color: #2b5797;
    cursor: pointer;
}

.lead-list-btn-full {
    width: 100%;
    margin-top: 6px;
}

.lead-list-btn-export {
    width: 100%;
    margin-top: 6px;
}


/* ═══════════════════════════════════════════════════════════════
   ACCOUNT LIST — Premium styling (mirrors #pageLead)
   ═══════════════════════════════════════════════════════════════ */

#pageAccount .v2-list-header,
#pageContact .v2-list-header,
#pageLead .v2-list-header,
#pageActivities .v2-list-header,
#pageOpportunities .v2-list-header,
#pageExpenses .v2-list-header,
#pageProducts .v2-list-header,
#pageTickets .v2-list-header,
#pageDunningList .v2-list-header,
#pageDocument .v2-list-header {
    height: 65px;
    min-height: 65px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: #ffffff;
    border-radius: 16px 16px 0 0;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: none;
    /* Gutter 5px uniforme Mac + iOS */
    margin-left: 5px !important;
    margin-right: 5px !important;
    width: calc(100% - 10px) !important;
    box-sizing: border-box !important;
}

#pageAccount .v2-list-header .v2-header-icon,
#pageContact .v2-list-header .v2-header-icon,
#pageLead .v2-list-header .v2-header-icon,
#pageActivities .v2-list-header .v2-header-icon,
#pageOpportunities .v2-list-header .v2-header-icon,
#pageExpenses .v2-list-header .v2-header-icon,
#pageProducts .v2-list-header .v2-header-icon,
#pageTickets .v2-list-header .v2-header-icon,
#pageDunningList .v2-list-header .v2-header-icon,
#pageDocument .v2-list-header .v2-header-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#pageAccount .v2-list-header .nav-title,
#pageContact .v2-list-header .nav-title,
#pageLead .v2-list-header .nav-title,
#pageActivities .v2-list-header .nav-title,
#pageOpportunities .v2-list-header .nav-title,
#pageExpenses .v2-list-header .nav-title,
#pageProducts .v2-list-header .nav-title,
#pageTickets .v2-list-header .nav-title,
#pageDunningList .v2-list-header .nav-title,
#pageDocument .v2-list-header .nav-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #2b5797;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.01em;
}

#pageAccount .v2-list-header .nav-add-button,
#pageContact .v2-list-header .nav-add-button,
#pageLead .v2-list-header .nav-add-button,
#pageActivities .v2-list-header .nav-add-button,
#pageOpportunities .v2-list-header .nav-add-button,
#pageExpenses .v2-list-header .nav-add-button,
#pageProducts .v2-list-header .nav-add-button,
#pageTickets .v2-list-header .nav-add-button,
#pageDunningList .v2-list-header .nav-add-button,
#pageDocument .v2-list-header .nav-add-button {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2b5797 0%, #1e40af 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(43, 87, 151, 0.25);
    flex-shrink: 0;
    border: none;
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1;
    text-decoration: none;
}

#pageAccount .v2-list-header .nav-add-button:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 18px rgba(43, 87, 151, 0.35);
}

#pageAccount .v2-list-header .nav-add-button::before,
#pageContact .v2-list-header .nav-add-button::before,
#pageLead .v2-list-header .nav-add-button::before,
#pageActivities .v2-list-header .nav-add-button::before,
#pageOpportunities .v2-list-header .nav-add-button::before,
#pageExpenses .v2-list-header .nav-add-button::before,
#pageProducts .v2-list-header .nav-add-button::before,
#pageTickets .v2-list-header .nav-add-button::before,
#pageDunningList .v2-list-header .nav-add-button::before,
#pageDocument .v2-list-header .nav-add-button::before {
    content: "+";
}

/* ── Type Tabs ── */
#pageAccount .cd-tab-filter-wrapper,
#pageContact .cd-tab-filter-wrapper,
#pageLead .cd-tab-filter-wrapper,
#pageActivities .cd-tab-filter-wrapper,
#pageOpportunities .cd-tab-filter-wrapper,
#pageExpenses .cd-tab-filter-wrapper,
#pageProducts .cd-tab-filter-wrapper,
#pageDunningList .cd-tab-filter-wrapper,
#pageDocument .cd-tab-filter-wrapper,
#pageParameters .cd-tab-filter-wrapper {
    height: auto;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid #e2e8f0;
    border-top: none;
    background: #f8fafc;
    position: relative;
    z-index: 2;
    margin: 0 0 10px 0;
    /* Gutter 5px uniforme Mac + iOS */
    margin-left: 5px !important;
    margin-right: 5px !important;
    width: calc(100% - 10px) !important;
    box-sizing: border-box !important;
}

#pageAccount .pt-10,
#pageContact .pt-10,
#pageLead .pt-10,
#pageActivities .pt-10,
#pageOpportunities .pt-10,
#pageExpenses .pt-10,
#pageProducts .pt-10,
#pageDunningList .pt-10,
#pageDocument .pt-10,
#pageParameters .pt-10 {
    padding-top: 0 !important;
}

#pageAccount .activities-type-tabs,
#pageContact .activities-type-tabs,
#pageLead .activities-type-tabs,
#pageActivities .activities-type-tabs,
#pageOpportunities .activities-type-tabs,
#pageExpenses .activities-type-tabs,
#pageProducts .activities-type-tabs,
#pageDunningList .activities-type-tabs,
#pageDocument .activities-type-tabs,
#pageParameters .activities-type-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    flex-wrap: wrap;
}

#pageAccount .activities-type-tabs .activitiesType,
#pageAccount .activities-type-tabs .accountStatus,
#pageContact .activities-type-tabs .activitiesType,
#pageContact .activities-type-tabs .accountStatus,
#pageContact .activities-type-tabs .contactStatus,
#pageLead .activities-type-tabs .activitiesType,
#pageLead .activities-type-tabs .leadStatus,
#pageActivities .activities-type-tabs .activitiesType,
#pageOpportunities .activities-type-tabs .activitiesType,
#pageExpenses .activities-type-tabs .activitiesType,
#pageOpportunities .activities-type-tabs .opportunityStatus,
#pageExpenses .activities-type-tabs .opportunityStatus,
#pageProducts .activities-type-tabs .activitiesType,
#pageProducts .activities-type-tabs .productStatus,
#pageDunningList .activities-type-tabs .activitiesType,
#pageDunningList .activities-type-tabs .dunningStatus,
#pageDocument .activities-type-tabs .activitiesType,
#pageParameters .activities-type-tabs .activitiesType {
    height: 28px;
    padding: 0 14px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.8rem;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

#pageAccount .activities-type-tabs .activitiesType:hover,
#pageAccount .activities-type-tabs .accountStatus:hover,
#pageContact .activities-type-tabs .activitiesType:hover,
#pageContact .activities-type-tabs .accountStatus:hover,
#pageContact .activities-type-tabs .contactStatus:hover,
#pageLead .activities-type-tabs .activitiesType:hover,
#pageLead .activities-type-tabs .leadStatus:hover,
#pageActivities .activities-type-tabs .activitiesType:hover,
#pageOpportunities .activities-type-tabs .activitiesType:hover,
#pageExpenses .activities-type-tabs .activitiesType:hover,
#pageOpportunities .activities-type-tabs .opportunityStatus:hover,
#pageExpenses .activities-type-tabs .opportunityStatus:hover,
#pageProducts .activities-type-tabs .activitiesType:hover,
#pageProducts .activities-type-tabs .productStatus:hover,
#pageDunningList .activities-type-tabs .activitiesType:hover,
#pageDunningList .activities-type-tabs .dunningStatus:hover,
#pageDocument .activities-type-tabs .activitiesType:hover,
#pageParameters .activities-type-tabs .activitiesType:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #cbd5e1;
    color: #1e293b;
}

#pageAccount .activities-type-tabs .activitiesType.selectedFilter,
#pageAccount .activities-type-tabs .accountStatus.selectedFilter,
#pageContact .activities-type-tabs .activitiesType.selectedFilter,
#pageContact .activities-type-tabs .accountStatus.selectedFilter,
#pageContact .activities-type-tabs .contactStatus.selectedFilter,
#pageLead .activities-type-tabs .activitiesType.selectedFilter,
#pageLead .activities-type-tabs .leadStatus.selectedFilter,
#pageActivities .activities-type-tabs .activitiesType.selectedFilter,
#pageOpportunities .activities-type-tabs .activitiesType.selectedFilter,
#pageExpenses .activities-type-tabs .activitiesType.selectedFilter,
#pageOpportunities .activities-type-tabs .opportunityStatus.selectedFilter,
#pageExpenses .activities-type-tabs .opportunityStatus.selectedFilter,
#pageProducts .activities-type-tabs .activitiesType.selectedFilter,
#pageProducts .activities-type-tabs .productStatus.selectedFilter,
#pageDunningList .activities-type-tabs .activitiesType.selectedFilter,
#pageDunningList .activities-type-tabs .dunningStatus.selectedFilter,
#pageDocument .activities-type-tabs .activitiesType.selectedFilter,
#pageParameters .activities-type-tabs .activitiesType.selectedFilter {
    background: linear-gradient(135deg, #2b5797 0%, #1e40af 100%);
    color: #ffffff;
    border-color: #2b5797;
    box-shadow: 0 4px 12px rgba(43, 87, 151, 0.3);
    transform: none;
    text-decoration: none;
}

/* ── Search Bar ── */
#pageAccount .v2-search-wrapper,
#pageContact .v2-search-wrapper,
#pageLead .v2-search-wrapper,
#pageActivities .v2-search-wrapper,
#pageOpportunities .v2-search-wrapper,
#pageExpenses .v2-search-wrapper,
#pageProducts .v2-search-wrapper,
#pageTickets .v2-search-wrapper,
#pageDunningList .v2-search-wrapper,
#pageDocument .v2-search-wrapper,
#pageParameters .v2-search-wrapper {
    padding: 12px 20px;
    background: #ffffff;
    border-radius: 0;
}

#pageAccount .v2-search-wrapper input,
#pageContact .v2-search-wrapper input,
#pageLead .v2-search-wrapper input,
#pageActivities .v2-search-wrapper input,
#pageOpportunities .v2-search-wrapper input,
#pageExpenses .v2-search-wrapper input,
#pageProducts .v2-search-wrapper input,
#pageTickets .v2-search-wrapper input,
#pageDunningList .v2-search-wrapper input,
#pageDocument .v2-search-wrapper input,
#pageParameters .v2-search-wrapper input {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    border-bottom: 2px solid #e2e8f0;
    border-radius: 0;
    padding: 10px 0;
    color: #1e293b;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: none;
    box-sizing: border-box;
}

#pageAccount .v2-search-wrapper input:focus,
#pageContact .v2-search-wrapper input:focus,
#pageLead .v2-search-wrapper input:focus,
#pageActivities .v2-search-wrapper input:focus,
#pageOpportunities .v2-search-wrapper input:focus,
#pageExpenses .v2-search-wrapper input:focus,
#pageProducts .v2-search-wrapper input:focus,
#pageTickets .v2-search-wrapper input:focus,
#pageDunningList .v2-search-wrapper input:focus,
#pageDocument .v2-search-wrapper input:focus,
#pageParameters .v2-search-wrapper input:focus {
    border-color: #2b5797;
    box-shadow: none;
    outline: none;
    background: transparent;
}

#pageAccount .v2-search-wrapper input::placeholder,
#pageContact .v2-search-wrapper input::placeholder,
#pageLead .v2-search-wrapper input::placeholder,
#pageActivities .v2-search-wrapper input::placeholder,
#pageOpportunities .v2-search-wrapper input::placeholder,
#pageExpenses .v2-search-wrapper input::placeholder,
#pageProducts .v2-search-wrapper input::placeholder,
#pageTickets .v2-search-wrapper input::placeholder,
#pageDunningList .v2-search-wrapper input::placeholder,
#pageDocument .v2-search-wrapper input::placeholder,
#pageParameters .v2-search-wrapper input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

/* ── Main Content Card ── */
#pageAccount .v2-content-card,
#pageContact .v2-content-card,
#pageLead .v2-content-card,
#pageActivities .v2-content-card,
#pageOpportunities .v2-content-card,
#pageExpenses .v2-content-card,
#pageProducts .v2-content-card,
#pageTickets .v2-content-card,
#pageDunningList .v2-content-card,
#pageDocument .v2-content-card,
#pageParameters .v2-content-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

/* ── Layout heights ── */
#pageAccount .page-region-content,
#pageContact .page-region-content,
#pageLead .page-region-content,
#pageActivities .page-region-content,
#pageProducts .page-region-content,
#pageDunningList .page-region-content,
#pageDocument .page-region-content,
#pageParameters .page-region-content {
    min-height: calc(100vh - 60px);
}

#pageAccount #listview_accounts,
#pageContact #listview_contacts,
#pageLead #listview_leads,
#pageActivities #listview_activities,
#pageOpportunities #listview_opportunity,
#pageExpenses #listview_opportunity,
#pageProducts #listview_products,
#pageDunningList #listview_dunning,
#pageDocument #listview_documents {
    min-height: 200px;
    height: calc(100vh - 200px);
    overflow-y: auto;
}

/* ── Sidebar Filter ── */
#pageAccount .cd-filter,
#pageContact .cd-filter,
#pageLead .cd-filter,
#pageActivities .cd-filter,
#pageOpportunities .cd-filter,
#pageExpenses .cd-filter,
#pageProducts .cd-filter,
#pageDunningList .cd-filter,
#pageDocument .cd-filter,
#pageParameters .cd-filter {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    border: 1px solid #e2e8f0;
    top: 0;
    left: 0;
    height: calc(100% - 70px);
    overflow-y: auto;
}

/* ── Price list sidebar: offset below breadcrumb ── */
#pageParameters .cd-filter {
    top: 70px;
    height: calc(100% - 140px);
}

#pageAccount .cd-filter.filter-is-visible,
#pageContact .cd-filter.filter-is-visible,
#pageLead .cd-filter.filter-is-visible,
#pageActivities .cd-filter.filter-is-visible,
#pageOpportunities .cd-filter.filter-is-visible,
#pageExpenses .cd-filter.filter-is-visible,
#pageProducts .cd-filter.filter-is-visible,
#pageDunningList .cd-filter.filter-is-visible,
#pageDocument .cd-filter.filter-is-visible,
#pageParameters .cd-filter.filter-is-visible {
    margin-left: 0;
}

#pageAccount .cd-main-content.is-fixed .cd-filter,
#pageContact .cd-main-content.is-fixed .cd-filter,
#pageLead .cd-main-content.is-fixed .cd-filter,
#pageActivities .cd-main-content.is-fixed .cd-filter,
#pageOpportunities .cd-main-content.is-fixed .cd-filter,
#pageExpenses .cd-main-content.is-fixed .cd-filter,
#pageProducts .cd-main-content.is-fixed .cd-filter,
#pageDunningList .cd-main-content.is-fixed .cd-filter,
#pageDocument .cd-main-content.is-fixed .cd-filter,
#pageParameters .cd-main-content.is-fixed .cd-filter {
    top: 0;
}

/* ── Filter trigger: FAB icon on all screens (V2 standard) ── */
#pageAccount .cd-filter-trigger,
#pageContact .cd-filter-trigger,
#pageLead .cd-filter-trigger,
#pageActivities .cd-filter-trigger,
#pageOpportunities .cd-filter-trigger,
#pageExpenses .cd-filter-trigger,
#pageProducts .cd-filter-trigger,
#pageTickets .cd-filter-trigger,
#pageDunningList .cd-filter-trigger,
#pageVendors .cd-filter-trigger,
#pageDocument .cd-filter-trigger,
#pageParameters .cd-filter-trigger {
    position: fixed !important;
    bottom: 80px !important;
    right: 16px !important;
    left: auto !important;
    top: auto !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: #f59e0b !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
    text-indent: -9999px !important;
    text-decoration: none !important;
    z-index: 9998 !important;
    cursor: pointer !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35) !important;
    transition: all 0.3s ease !important;
    pointer-events: auto !important;
    isolation: isolate !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
}

/* Hide FAB on desktop where filter sidebar is visible by default */
@media (min-width: 1024px) {

    #pageAccount .cd-filter-trigger,
    #pageContact .cd-filter-trigger,
    #pageLead .cd-filter-trigger,
    #pageActivities .cd-filter-trigger,
    #pageOpportunities .cd-filter-trigger,
    #pageExpenses .cd-filter-trigger,
    #pageProducts .cd-filter-trigger,
    #pageTickets .cd-filter-trigger,
    #pageDunningList .cd-filter-trigger,
    #pageVendors .cd-filter-trigger,
    #pageDocument .cd-filter-trigger,
    #pageParameters .cd-filter-trigger {
        display: none !important;
    }
}

#pageAccount .cd-filter-trigger:hover,
#pageContact .cd-filter-trigger:hover,
#pageLead .cd-filter-trigger:hover,
#pageActivities .cd-filter-trigger:hover,
#pageOpportunities .cd-filter-trigger:hover,
#pageExpenses .cd-filter-trigger:hover,
#pageProducts .cd-filter-trigger:hover,
#pageTickets .cd-filter-trigger:hover,
#pageDunningList .cd-filter-trigger:hover,
#pageVendors .cd-filter-trigger:hover,
#pageDocument .cd-filter-trigger:hover,
#pageParameters .cd-filter-trigger:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.45) !important;
}

#pageAccount .cd-filter-trigger::after,
#pageContact .cd-filter-trigger::after,
#pageLead .cd-filter-trigger::after,
#pageActivities .cd-filter-trigger::after,
#pageOpportunities .cd-filter-trigger::after,
#pageExpenses .cd-filter-trigger::after,
#pageProducts .cd-filter-trigger::after,
#pageTickets .cd-filter-trigger::after,
#pageDunningList .cd-filter-trigger::after,
#pageVendors .cd-filter-trigger::after,
#pageDocument .cd-filter-trigger::after,
#pageParameters .cd-filter-trigger::after {
    content: '' !important;
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='21' x2='4' y2='14'/%3E%3Cline x1='4' y1='10' x2='4' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12' y2='3'/%3E%3Cline x1='20' y1='21' x2='20' y2='16'/%3E%3Cline x1='20' y1='12' x2='20' y2='3'/%3E%3Cline x1='1' y1='14' x2='7' y2='14'/%3E%3Cline x1='9' y1='8' x2='15' y2='8'/%3E%3Cline x1='17' y1='16' x2='23' y2='16'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    text-indent: 0 !important;
}

/* Old text-based trigger styles removed — now using FAB icon above */

#pageAccount .cd-gallery,
#pageContact .cd-gallery,
#pageLead .cd-gallery,
#pageActivities .cd-gallery,
#pageOpportunities .cd-gallery,
#pageExpenses .cd-gallery,
#pageProducts .cd-gallery,
#pageVendors .cd-gallery,
#pageDunningList .cd-gallery,
#pageDocument .cd-gallery,
#pageParameters .cd-gallery {
    margin-top: 0;
    padding-top: 0 !important;
}

/* ── Filter sidebar: compact layout (V2 standard) ── */
#pageAccount .cd-filter form,
#pageContact .cd-filter form,
#pageLead .cd-filter form,
#pageActivities .cd-filter form,
#pageOpportunities .cd-filter form,
#pageExpenses .cd-filter form,
#pageProducts .cd-filter form,
#pageTickets .cd-filter form,
#pageVendors .cd-filter form,
#pageDunningList .cd-filter form,
#pageDocument .cd-filter form,
#pageParameters .cd-filter form {
    padding: 15px 15px 40px;
}

#pageAccount .cd-filter .cd-close,
#pageContact .cd-filter .cd-close,
#pageLead .cd-filter .cd-close,
#pageActivities .cd-filter .cd-close,
#pageOpportunities .cd-filter .cd-close,
#pageExpenses .cd-filter .cd-close,
#pageProducts .cd-filter .cd-close,
#pageTickets .cd-filter .cd-close,
#pageVendors .cd-filter .cd-close,
#pageDunningList .cd-filter .cd-close,
#pageDocument .cd-filter .cd-close,
#pageParameters .cd-filter .cd-close {
    display: none;
}

/* ── Native date inputs in filter sidebar ── */
#pageDocument .cd-filter input[type="date"] {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 12px;
    color: #1e293b;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
    margin-bottom: 6px;
}

#pageDocument .cd-filter input[type="date"]:focus {
    border-color: #2b5797;
    box-shadow: 0 0 0 3px rgba(43, 87, 151, 0.1);
    outline: none;
    background: #ffffff;
}

#pageAccount .cd-filter .cd-filter-block {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}

#pageAccount .cd-filter .cd-filter-block:last-child {
    border-bottom: none;
}

#pageAccount .cd-filter .cd-filter-block h5 {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    padding: 6px 0 4px 0;
    margin-bottom: 4px;
}

#pageAccount .cd-filter .cd-filter-block h5::before {
    display: none;
}

#pageAccount .cd-filter .cd-filter-block select {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 12px;
    color: #1e293b;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

#pageAccount .cd-filter .cd-filter-block select:focus {
    border-color: #2b5797;
    box-shadow: 0 0 0 3px rgba(43, 87, 151, 0.1);
    outline: none;
}

#pageAccount .cd-filter .cd-close {
    height: 40px;
    line-height: 40px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s ease;
}

#pageAccount .cd-filter .cd-close:hover {
    color: #2b5797;
    background: transparent;
}

#pageAccount .cd-filter .add-form-button-black {
    float: right;
    margin-top: 2px;
}

#pageAccount .lead-list-select-all {
    font-size: 0.85rem;
    font-weight: 600;
    color: #2b5797;
    cursor: pointer;
}

#pageAccount .lead-list-btn-full {
    width: 100%;
    margin-top: 6px;
}

/* ── Dunning Filter (mirrors Account) ── */
#pageDunningList .cd-filter .cd-filter-block {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}

#pageDunningList .cd-filter .cd-filter-block:last-child {
    border-bottom: none;
}

#pageDunningList .cd-filter .cd-filter-block h5 {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    padding: 6px 0 4px 0;
    margin-bottom: 4px;
}

#pageDunningList .cd-filter .cd-filter-block h5::before {
    display: none;
}

#pageDunningList .cd-filter .cd-filter-block select {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 12px;
    color: #1e293b;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

#pageDunningList .cd-filter .cd-filter-block select:focus {
    border-color: #2b5797;
    box-shadow: 0 0 0 3px rgba(43, 87, 151, 0.1);
    outline: none;
}

#pageDunningList .cd-filter .cd-close {
    height: 40px;
    line-height: 40px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s ease;
}

#pageDunningList .cd-filter .cd-close:hover {
    color: #2b5797;
    background: transparent;
}

/* ── Products Filter (mirrors Account) ── */
#pageProducts .cd-filter .cd-filter-block {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}

#pageProducts .cd-filter .cd-filter-block:last-child {
    border-bottom: none;
}

#pageProducts .cd-filter .cd-filter-block h5 {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    padding: 6px 0 4px 0;
    margin-bottom: 4px;
}

#pageProducts .cd-filter .cd-filter-block h5::before {
    display: none;
}

#pageProducts .cd-filter .cd-filter-block select {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 12px;
    color: #1e293b;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

#pageProducts .cd-filter .cd-filter-block select:focus {
    border-color: #2b5797;
    box-shadow: 0 0 0 3px rgba(43, 87, 151, 0.1);
    outline: none;
}

#pageProducts .cd-filter .cd-close {
    height: 40px;
    line-height: 40px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s ease;
}

#pageProducts .cd-filter .cd-close:hover {
    color: #2b5797;
    background: transparent;
}

#pageProducts .cd-filter .add-form-button-black {
    float: right;
    margin-top: 2px;
}

#pageProducts .lead-list-select-all {
    font-size: 0.85rem;
    font-weight: 600;
    color: #2b5797;
    cursor: pointer;
}

#pageProducts .lead-list-btn-full {
    width: 100%;
    margin-top: 6px;
}

/* ── Mobile Responsive ── */
@media (max-width: 768px) {

    #pageAccount .v2-list-header,
    #pageContact .v2-list-header,
    #pageLead .v2-list-header,
    #pageActivities .v2-list-header,
    #pageOpportunities .v2-list-header,
    #pageExpenses .v2-list-header,
    #pageProducts .v2-list-header,
    #pageDunningList .v2-list-header,
    #pageParameters .v2-list-header {
        height: 52px;
        min-height: 52px;
        padding: 0 12px;
        border-radius: 12px 12px 0 0;
        margin: 5px 5px 0 5px !important;
        width: calc(100% - 10px) !important;
        border-bottom: none !important;
    }

    #pageAccount .v2-list-header .nav-title,
    #pageContact .v2-list-header .nav-title,
    #pageLead .v2-list-header .nav-title,
    #pageActivities .v2-list-header .nav-title,
    #pageOpportunities .v2-list-header .nav-title,
    #pageExpenses .v2-list-header .nav-title,
    #pageProducts .v2-list-header .nav-title,
    #pageDunningList .v2-list-header .nav-title,
    #pageParameters .v2-list-header .nav-title {
        font-size: 0.95rem;
    }

    #pageAccount .v2-list-header .v2-header-icon,
    #pageContact .v2-list-header .v2-header-icon,
    #pageLead .v2-list-header .v2-header-icon,
    #pageActivities .v2-list-header .v2-header-icon,
    #pageOpportunities .v2-list-header .v2-header-icon,
    #pageExpenses .v2-list-header .v2-header-icon,
    #pageProducts .v2-list-header .v2-header-icon,
    #pageDunningList .v2-list-header .v2-header-icon,
    #pageParameters .v2-list-header .v2-header-icon {
        width: 28px;
        height: 28px;
    }

    #pageAccount .v2-list-header .v2-header-icon svg,
    #pageContact .v2-list-header .v2-header-icon svg,
    #pageLead .v2-list-header .v2-header-icon svg,
    #pageActivities .v2-list-header .v2-header-icon svg,
    #pageOpportunities .v2-list-header .v2-header-icon svg,
    #pageExpenses .v2-list-header .v2-header-icon svg,
    #pageProducts .v2-list-header .v2-header-icon svg,
    #pageDunningList .v2-list-header .v2-header-icon svg,
    #pageParameters .v2-list-header .v2-header-icon svg {
        width: 18px;
        height: 18px;
    }

    #pageAccount .v2-list-header .nav-add-button,
    #pageContact .v2-list-header .nav-add-button,
    #pageLead .v2-list-header .nav-add-button,
    #pageActivities .v2-list-header .nav-add-button,
    #pageOpportunities .v2-list-header .nav-add-button,
    #pageExpenses .v2-list-header .nav-add-button,
    #pageProducts .v2-list-header .nav-add-button,
    #pageDunningList .v2-list-header .nav-add-button,
    #pageParameters .v2-list-header .nav-add-button {
        width: 32px;
        height: 32px;
    }

    #pageAccount .cd-tab-filter-wrapper,
    #pageContact .cd-tab-filter-wrapper,
    #pageLead .cd-tab-filter-wrapper,
    #pageActivities .cd-tab-filter-wrapper,
    #pageOpportunities .cd-tab-filter-wrapper,
    #pageExpenses .cd-tab-filter-wrapper,
    #pageProducts .cd-tab-filter-wrapper,
    #pageDunningList .cd-tab-filter-wrapper,
    #pageParameters .cd-tab-filter-wrapper {
        border-radius: 0 !important;
        margin: 0 10px !important;
        width: calc(100% - 10px) !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }

    #pageAccount .activities-type-tabs,
    #pageContact .activities-type-tabs,
    #pageLead .activities-type-tabs,
    #pageActivities .activities-type-tabs,
    #pageOpportunities .activities-type-tabs,
    #pageExpenses .activities-type-tabs,
    #pageProducts .activities-type-tabs,
    #pageDunningList .activities-type-tabs,
    #pageDocument .activities-type-tabs,
    #pageParameters .activities-type-tabs {
        padding: 4px 12px 12px 12px;
        gap: 6px;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    #pageAccount .activities-type-tabs::-webkit-scrollbar,
    #pageContact .activities-type-tabs::-webkit-scrollbar,
    #pageLead .activities-type-tabs::-webkit-scrollbar,
    #pageActivities .activities-type-tabs::-webkit-scrollbar,
    #pageOpportunities .activities-type-tabs::-webkit-scrollbar,
    #pageExpenses .activities-type-tabs::-webkit-scrollbar,
    #pageProducts .activities-type-tabs::-webkit-scrollbar,
    #pageDunningList .activities-type-tabs::-webkit-scrollbar,
    #pageDocument .activities-type-tabs::-webkit-scrollbar,
    #pageParameters .activities-type-tabs::-webkit-scrollbar {
        display: none;
    }

    #pageAccount .activities-type-tabs .activitiesType,
    #pageAccount .activities-type-tabs .accountStatus,
    #pageContact .activities-type-tabs .activitiesType,
    #pageContact .activities-type-tabs .accountStatus,
    #pageLead .activities-type-tabs .activitiesType,
    #pageLead .activities-type-tabs .accountStatus,
    #pageActivities .activities-type-tabs .activitiesType,
    #pageActivities .activities-type-tabs .accountStatus,
    #pageOpportunities .activities-type-tabs .activitiesType,
    #pageExpenses .activities-type-tabs .activitiesType,
    #pageOpportunities .activities-type-tabs .opportunityStatus,
    #pageExpenses .activities-type-tabs .opportunityStatus,
    #pageProducts .activities-type-tabs .activitiesType,
    #pageProducts .activities-type-tabs .productStatus,
    #pageDunningList .activities-type-tabs .activitiesType,
    #pageDunningList .activities-type-tabs .dunningStatus,
    #pageDocument .activities-type-tabs .activitiesType,
    #pageParameters .activities-type-tabs .activitiesType {
        height: 30px;
        padding: 0 12px;
        font-size: 0.75rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    #pageAccount .v2-search-wrapper,
    #pageContact .v2-search-wrapper,
    #pageLead .v2-search-wrapper,
    #pageActivities .v2-search-wrapper,
    #pageOpportunities .v2-search-wrapper,
    #pageExpenses .v2-search-wrapper,
    #pageProducts .v2-search-wrapper,
    #pageDunningList .v2-search-wrapper,
    #pageDocument .v2-search-wrapper,
    #pageParameters .v2-search-wrapper {
        padding: 8px 12px;
    }

    #pageAccount .v2-search-wrapper input,
    #pageContact .v2-search-wrapper input,
    #pageLead .v2-search-wrapper input,
    #pageActivities .v2-search-wrapper input,
    #pageOpportunities .v2-search-wrapper input,
    #pageExpenses .v2-search-wrapper input,
    #pageProducts .v2-search-wrapper input,
    #pageDunningList .v2-search-wrapper input,
    #pageDocument .v2-search-wrapper input,
    #pageParameters .v2-search-wrapper input {
        padding: 8px 0;
        font-size: 0.85rem;
    }

    #pageAccount .v2-content-card,
    #pageContact .v2-content-card,
    #pageLead .v2-content-card,
    #pageActivities .v2-content-card,
    #pageOpportunities .v2-content-card,
    #pageExpenses .v2-content-card,
    #pageProducts .v2-content-card,
    #pageDunningList .v2-content-card,
    #pageDocument .v2-content-card,
    #pageParameters .v2-content-card {
        border-radius: 0 0 12px 12px !important;
        margin: 0 5px 5px 5px !important;
        width: calc(100% - 10px) !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    }

    #pageAccount #listview_accounts,
    #pageContact #listview_contacts,
    #pageLead #listview_leads,
    #pageActivities #listview_activities,
    #pageOpportunities #listview_opportunity,
    #pageExpenses #listview_opportunity,
    #pageProducts #listview_products,
    #pageDunningList #listview_dunning {
        height: calc(100vh - 260px);
    }

    #pageAccount .cd-filter,
    #pageAccount .cd-filter.filter-is-visible,
    #pageContact .cd-filter,
    #pageContact .cd-filter.filter-is-visible,
    #pageLead .cd-filter,
    #pageLead .cd-filter.filter-is-visible,
    #pageActivities .cd-filter,
    #pageActivities .cd-filter.filter-is-visible,
    #pageOpportunities .cd-filter,
    #pageExpenses .cd-filter,
    #pageOpportunities .cd-filter.filter-is-visible,
    #pageExpenses .cd-filter.filter-is-visible,
    #pageProducts .cd-filter,
    #pageProducts .cd-filter.filter-is-visible,
    #pageDunningList .cd-filter,
    #pageDunningList .cd-filter.filter-is-visible {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        width: 85% !important;
        max-width: 320px !important;
        height: 100% !important;
        border-radius: 16px 0 0 16px !important;
        box-shadow: -8px 0 30px rgba(0, 0, 0, 0.15) !important;
        z-index: 9999 !important;
        transform: translateX(100%) !important;
        transition: transform 0.3s ease !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background: #f8fafc !important;
        touch-action: pan-y !important;
        overscroll-behavior: contain !important;
        visibility: hidden !important;
        pointer-events: none !important;
        margin-left: 0 !important;
    }

    /* Remove old Activity FAB in favor of standardized trigger */
    #pageActivities .activities-filter-fab {
        display: none !important;
    }

    #pageAccount .cd-filter.cd-filter--narrow-open,
    #pageContact .cd-filter.cd-filter--narrow-open,
    #pageLead .cd-filter.cd-filter--narrow-open,
    #pageActivities .cd-filter.cd-filter--narrow-open,
    #pageOpportunities .cd-filter.cd-filter--narrow-open,
    #pageExpenses .cd-filter.cd-filter--narrow-open,
    #pageProducts .cd-filter.cd-filter--narrow-open,
    #pageDunningList .cd-filter.cd-filter--narrow-open,
    #pageParameters .cd-filter.cd-filter--narrow-open {
        transform: translateX(0) !important;
        visibility: visible !important;
        pointer-events: auto !important;
        z-index: 9999 !important;
    }

    #pageAccount .cd-filter-trigger,
    #pageContact .cd-filter-trigger,
    #pageLead .cd-filter-trigger,
    #pageActivities .cd-filter-trigger,
    #pageOpportunities .cd-filter-trigger,
    #pageExpenses .cd-filter-trigger,
    #pageTickets .cd-filter-trigger,
    #pageProducts .cd-filter-trigger,
    #pageDunningList .cd-filter-trigger,
    #pageParameters .cd-filter-trigger {
        position: fixed !important;
        bottom: 80px !important;
        right: 16px !important;
        left: auto !important;
        top: auto !important;
        width: 52px !important;
        height: 52px !important;
        border-radius: 50% !important;
        background: #f59e0b !important;
        color: #ffffff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0 !important;
        text-indent: -9999px !important;
        text-decoration: none !important;
        z-index: 9998 !important;
        cursor: pointer !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #pageAccount .cd-filter-trigger::after,
    #pageContact .cd-filter-trigger::after,
    #pageLead .cd-filter-trigger::after,
    #pageActivities .cd-filter-trigger::after,
    #pageOpportunities .cd-filter-trigger::after,
    #pageExpenses .cd-filter-trigger::after,
    #pageTickets .cd-filter-trigger::after,
    #pageProducts .cd-filter-trigger::after,
    #pageDunningList .cd-filter-trigger::after,
    #pageParameters .cd-filter-trigger::after {
        content: '' !important;
        display: block !important;
        width: 22px !important;
        height: 22px !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='21' x2='4' y2='14'/%3E%3Cline x1='4' y1='10' x2='4' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12' y2='3'/%3E%3Cline x1='20' y1='21' x2='20' y2='16'/%3E%3Cline x1='20' y1='12' x2='20' y2='3'/%3E%3Cline x1='1' y1='14' x2='7' y2='14'/%3E%3Cline x1='9' y1='8' x2='15' y2='8'/%3E%3Cline x1='17' y1='16' x2='23' y2='16'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
        text-indent: 0 !important;
    }

    #pageAccount .cd-gallery,
    #pageContact .cd-gallery,
    #pageLead .cd-gallery,
    #pageActivities .cd-gallery,
    #pageOpportunities .cd-gallery,
    #pageExpenses .cd-gallery,
    #pageDunningList .cd-gallery,
    #pageParameters .cd-gallery {
        width: 100% !important;
        padding-right: 0 !important;
    }

    #pageAccount .page-region-content,
    #pageContact .page-region-content,
    #pageLead .page-region-content,
    #pageActivities .page-region-content,
    #pageOpportunities .page-region-content,
    #pageExpenses .page-region-content,
    #pageDunningList .page-region-content {
        min-height: auto;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Product List Items — V2 Premium Card Layout
   ═══════════════════════════════════════════════════════════════ */
.product-list-item {
    display: flex;
    align-items: stretch;
    padding: 12px 20px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background 0.15s ease;
}

.product-list-item:hover {
    background: #f8fafc;
}

.product-list-item:last-child {
    border-bottom: none;
}

.product-list-stripe {
    width: 3px;
    border-radius: 2px;
    margin-right: 12px;
    flex-shrink: 0;
}

.product-list-checkbox {
    display: flex;
    align-items: center;
    margin-right: 10px;
    flex-shrink: 0;
}

.product-list-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #2b5797;
}

.product-list-body {
    flex: 1;
    min-width: 0;
}

.product-list-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.product-list-code {
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-list-price {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: #2b5797 !important;
    white-space: nowrap;
    flex-shrink: 0;
}

.product-list-name {
    font-size: 0.82rem !important;
    color: #64748b !important;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-list-price-ttc {
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    white-space: nowrap;
    flex-shrink: 0;
}

.product-list-stock {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 20px;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    font-size: 0.72rem;
    font-weight: 600;
    color: #2563eb;
}

.product-list-stock-icon {
    font-size: 0.7rem;
}

/* Hide old product list inline styles */
#pageProducts .notices .notice-header {
    padding: 0;
}

#pageProducts hr.list {
    display: none;
}

/* ── Override legacy .notices styles for new product layout ── */
.product-list-item.notices {
    height: auto !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
    display: flex !important;
    position: relative;
}

.product-list-item.notices>div {
    height: auto !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
    width: auto !important;
}

.product-list-item.notices>.product-list-body {
    display: block !important;
    flex: 1;
    min-width: 0;
}

.product-list-item.notices>.product-list-stripe {
    display: block !important;
    width: 3px !important;
    flex-shrink: 0;
}

.product-list-item.notices>.product-list-checkbox {
    display: flex !important;
    align-items: center;
}

/* ════════════════════════════════════════════════════
   DOCUMENT LIST V2 — Premium Card Items
   (aligned with product-list-item pattern)
   ════════════════════════════════════════════════════ */

.doc-list-item {
    display: flex;
    align-items: stretch;
    padding: 12px 20px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background 0.15s ease;
}

.doc-list-item:hover {
    background: #f8fafc;
}

.doc-list-item:last-child {
    border-bottom: none;
}

.doc-list-stripe {
    width: 3px;
    border-radius: 2px;
    margin-right: 12px;
    flex-shrink: 0;
}

.doc-list-checkbox {
    display: flex;
    align-items: center;
    margin-right: 10px;
    flex-shrink: 0;
}

.doc-list-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #2b5797;
}

.doc-list-body {
    flex: 1;
    min-width: 0;
}

.doc-list-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.doc-list-number {
    font-size: 0.85rem;
    font-weight: 500;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    white-space: nowrap;
}

.doc-list-amount-ht {
    font-size: 0.85rem;
    font-weight: 700;
    color: #2b5797;
    white-space: nowrap;
    flex-shrink: 0;
}

.doc-list-customer {
    font-size: 0.82rem;
    color: #64748b;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-list-amount-ttc {
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
    flex-shrink: 0;
}

.doc-list-date {
    font-size: 0.78rem;
    color: #94a3b8;
    margin-top: 2px;
}

.doc-list-description {
    font-size: 0.78rem;
    color: #94a3b8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    margin-top: 2px;
}

/* ── Badges ── */
.doc-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.4;
}

.doc-badge-draft {
    background: #fff7ed;
    color: #ea580c;
    border: 1px solid #fed7aa;
}

.doc-badge-unpaid {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.doc-badge-partial {
    background: #fffbeb;
    color: #d97706;
    border: 1px solid #fde68a;
}

.doc-badge-error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
}

.doc-badge-canceled {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.doc-badge-paid {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

.doc-badge-dunning-excluded {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

/* ── Action dropdown ── */
.doc-list-actions {
    display: flex;
    align-items: center;
    padding: 0 8px;
    flex-shrink: 0;
    position: relative;
}

.doc-list-actions select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 30px;
    height: 30px;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.doc-list-actions img {
    width: 20px;
    height: 28px;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.doc-list-item:hover .doc-list-actions img {
    opacity: 0.8;
}

/* ── Legacy .notices overrides ── */
.doc-list-item.notices {
    height: auto !important;
    overflow: visible !important;
    display: flex !important;
    margin-bottom: 0 !important;
    position: relative;
}

.doc-list-item.notices>div {
    height: auto !important;
    overflow: visible !important;
    width: auto !important;
}

.doc-list-item.notices>.doc-list-body {
    display: block !important;
    flex: 1;
    min-width: 0;
}

.doc-list-item.notices>.doc-list-stripe {
    display: block !important;
    width: 3px !important;
    height: auto !important;
}

.doc-list-item.notices>.doc-list-checkbox {
    display: flex !important;
    align-items: center;
}

.doc-list-item.notices>.doc-list-actions {
    display: flex !important;
    width: auto !important;
    height: auto !important;
}

#pageDocument hr.list {
    display: none;
}

/* ════════════════════════════════════════════════════
   V2 Empty State — Generic reusable component
   ════════════════════════════════════════════════════ */

.v2-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 70px 30px 60px;
    text-align: center;
    background: radial-gradient(ellipse at center, rgba(43, 87, 151, 0.03) 0%, transparent 70%);
}

.v2-empty-state-icon {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    box-shadow: 0 8px 24px rgba(43, 87, 151, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.v2-empty-state:hover .v2-empty-state-icon {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(43, 87, 151, 0.15);
}

.v2-empty-state-icon svg {
    stroke: #2b5797;
    opacity: 0.7;
}

.v2-empty-state-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 8px 0;
    letter-spacing: -0.02em;
}

.v2-empty-state-text {
    font-size: 0.88rem;
    color: #94a3b8;
    line-height: 1.7;
    max-width: 380px;
    margin: 0 0 28px 0;
    font-weight: 400;
}

.v2-empty-state-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 32px;
    border-radius: 30px;
    background: linear-gradient(135deg, #2b5797 0%, #1e40af 100%);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 14px rgba(43, 87, 151, 0.3);
    text-decoration: none;
    letter-spacing: 0.01em;
}

.v2-empty-state-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 24px rgba(43, 87, 151, 0.4);
}

/* ── Sidebar Filter Utilities ── */
.cd-filter-link {
    cursor: pointer;
}

.cd-filter-btn-full {
    width: 100%;
}

/* ══════════════════════════════════════════════════════════════
   DUNNING-SPECIFIC STYLES
   ═══════════════════════════════════════════════════════════════ */

/* ── List item badges ── */
.dunning-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.dunning-badge-active {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}

.dunning-badge-inactive {
    background: rgba(148, 163, 184, 0.15);
    color: #64748b;
}

/* ── List item layout ── */
#pageDunningList .dunning-item.list-item-premium {
    display: flex !important;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background 0.2s ease;
    height: auto !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
    position: relative;
}

#pageDunningList .dunning-item.list-item-premium>div {
    height: auto !important;
    overflow: visible !important;
    display: block !important;
    margin-bottom: 0 !important;
}

#pageDunningList .list-item-premium:hover {
    background: #f8fafc;
}

#pageDunningList .list-item-body {
    flex: 1;
    min-width: 0;
}

#pageDunningList .list-item-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#pageDunningList .list-item-subtitle {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 2px;
}

#pageDunningList .list-item-right {
    flex-shrink: 0;
    margin-left: 12px;
}

#pageDunningList .dunning-badge {
    white-space: nowrap;
    margin-right: 8px;
}

#pageDunningList #listview_dunning {
    padding-right: 12px;
}

/* ── Filter sidebar visual fix: top alignment ── */
#pageDunningList .cd-filter {
    border-radius: 16px;
    margin-top: 0;
}

#pageDunningList .cd-gallery {
    border-radius: 16px;
}

/* ── Details: Days table ── */
.dunning-days-table {
    width: 100%;
    border-collapse: collapse;
}

.dunning-days-table td {
    padding: 6px 12px 6px 0;
}

.dunning-days-table .form-control {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    color: #334155;
}

/* ── Details: Send button alignment ── */
.dunning-send-action {
    display: flex;
    align-items: flex-end;
    padding-bottom: 4px;
}

.dunning-send-btn {
    white-space: nowrap;
}

/* ── Details: Warning title ── */
.dunning-warning-title {
    color: #dc2626 !important;
    font-weight: 700;
    line-height: 1.3;
}

/* ── Modal: Language tabs ── */
.dunning-lang-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    background: #e2e8f0;
    border-radius: 8px;
    padding: 4px;
    list-style: none;
    margin: 0;
}

.dunning-lang-tabs li a {
    display: block;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #475569;
    text-decoration: none;
    transition: all 0.2s ease;
}

.dunning-lang-tabs li.active a {
    background: #ffffff;
    color: #2b5797;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.dunning-email-frames {
    min-height: 320px;
}

/* ═══════════════════════════════════════════════════════════════
   DUNNING DETAILS — V2 Compact Styling
   ═══════════════════════════════════════════════════════════════ */

/* ── Page layout: full width on desktop ── */
#pageDunningDetails .frames.formFrame {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 16px !important;
    height: auto !important;
    overflow: visible !important;
}

#pageDunningDetails .frames.formFrame .frame {
    padding: 0 !important;
    min-height: auto !important;
    height: auto !important;
}

/* Override h-full on main container */
#pageDunningDetails .cd-main-content.h-full,
#pageDunningDetails.cd-main-content.h-full,
main.cd-main-content.h-full:has(.dunningFrame) {
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
}

/* ── Cards: compact V2 card ── */
#pageDunningDetails .v2-card {
    background: #ffffff !important;
    border-radius: 14px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    padding: 10px 14px !important;
    margin-top: 6px !important;
}

/* ── Grid: compact gap ── */
#pageDunningDetails .appt-grid {
    margin-bottom: 0 !important;
}

#pageDunningDetails .appt-row {
    display: flex !important;
    gap: 10px !important;
    margin: 0 !important;
    margin-bottom: 2px !important;
}

#pageDunningDetails .appt-col-4 {
    flex: 0 0 calc(33.333% - 6px) !important;
    padding: 0 !important;
}

#pageDunningDetails .appt-col-6 {
    flex: 0 0 calc(50% - 5px) !important;
    padding: 0 !important;
}

#pageDunningDetails .appt-col-8 {
    flex: 0 0 calc(66.666% - 4px) !important;
    padding: 0 !important;
}

#pageDunningDetails .appt-col-12 {
    flex: 0 0 100% !important;
    padding: 0 !important;
}

/* ── Labels: tight V2 style ── */
#pageDunningDetails .v2-label-modern {
    display: block !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    color: #64748b !important;
    margin-bottom: 1px !important;
    margin-top: 2px !important;
    padding: 0 !important;
}

/* ── Inputs & Selects: compact ── */
#pageDunningDetails .v2-input {
    padding: 4px 8px !important;
    font-size: 0.78rem !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    background: #f8fafc !important;
    color: #1e293b !important;
    height: auto !important;
    line-height: 1.3 !important;
    min-height: 0 !important;
}

#pageDunningDetails .v2-input:focus {
    border-color: #2b5797 !important;
    box-shadow: 0 0 0 2px rgba(43, 87, 151, 0.1) !important;
    outline: none !important;
}

#pageDunningDetails .v2-select-wrapper {
    position: relative;
}

#pageDunningDetails .v2-select-wrapper select.v2-input {
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: pointer;
    padding-right: 24px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
}

/* ── Section titles ── */
#pageDunningDetails .config-section-title {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 0 0 4px 0 !important;
    padding: 0 0 4px 0 !important;
    border-bottom: 1px solid #f1f5f9;
}

#pageDunningDetails .dunning-warning-title {
    color: #dc2626 !important;
    border-bottom-color: #fecaca;
}

/* ── Tables: V2 styling ── */
#pageDunningDetails .table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem !important;
}

#pageDunningDetails .table thead th {
    background: #f1f5f9 !important;
    color: #475569 !important;
    font-weight: 600 !important;
    font-size: 0.65rem !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 4px 8px !important;
    border-bottom: 2px solid #e2e8f0;
    text-align: left;
}

#pageDunningDetails .table tbody td {
    padding: 4px 8px !important;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: middle;
    font-size: 0.72rem !important;
}

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

/* ── Days table: compact ── */
#pageDunningDetails .dunning-days-table {
    width: 100%;
    border-collapse: collapse;
}

#pageDunningDetails .dunning-days-table td {
    padding: 2px 6px 2px 0 !important;
}

#pageDunningDetails .dunning-days-table .form-control {
    display: flex !important;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-size: 0.72rem !important;
    color: #334155;
    font-weight: 500;
}

#pageDunningDetails .dunning-days-table input[type="checkbox"] {
    width: 14px !important;
    height: 14px !important;
    accent-color: #2b5797;
    cursor: pointer;
}

/* ── Buttons: V2 styled ── */
#pageDunningDetails .btnconfirm {
    background: #2b5797 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 4px 12px !important;
    font-size: 0.72rem !important;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

#pageDunningDetails .btnconfirm:hover {
    background: #1e4580 !important;
}

#pageDunningDetails .dunning-send-btn {
    white-space: nowrap;
    border-radius: 6px !important;
    padding: 4px 14px !important;
    font-size: 0.72rem !important;
    font-weight: 600;
}

#pageDunningDetails .dunning-send-action {
    display: flex;
    align-items: flex-end;
    padding-bottom: 1px;
}

/* ── Nav header: compact ── */
#pageDunningDetails .v2-unified-nav-block {
    padding: 10px 16px 0;
}

#pageDunningDetails .v2-nav-header {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
}

#pageDunningDetails .v2-nav-header .pageTitle {
    flex: 1;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

#pageDunningDetails .v2-nav-actions ul {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

#pageDunningDetails .v2-tabs-container {
    margin-top: 6px;
    padding-bottom: 8px;
}

/* ── Tabs: pill style ── */
#pageDunningDetails #dunningTabs {
    display: flex;
    gap: 4px;
    background: #f1f5f9;
    border-radius: 10px;
    padding: 4px;
}

#pageDunningDetails #dunningTabs span {
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

#pageDunningDetails #dunningTabs span.scroll_tabs_active {
    background: #ffffff;
    color: #2b5797;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ── Fix: formFrame margin top ── */
#pageDunningDetails .frames.formFrame.mt-0 {
    margin-top: 0 !important;
}

/* ── Responsive: mobile compact ── */
@media (max-width: 768px) {
    #pageDunningDetails .frames.formFrame {
        padding: 0 10px;
    }

    #pageDunningDetails .appt-row {
        flex-direction: column;
        gap: 6px;
    }

    #pageDunningDetails .appt-col-4,
    #pageDunningDetails .appt-col-6,
    #pageDunningDetails .appt-col-8,
    #pageDunningDetails .appt-col-12 {
        flex: 0 0 100%;
    }

    #pageDunningDetails .v2-card {
        padding: 12px 14px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   DUNNING DETAILS — Selection Logic Summary Card
   ═══════════════════════════════════════════════════════════════ */
.dunning-summary-card {
    background: #fefce8;
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
    border-radius: 12px;
    padding: 14px 18px;
    margin-top: 0;
}

/* ── Compact variant inside V2 modals ────────────────────────── */
.v2-shipping-modal-body .dunning-summary-card {
    margin-bottom: 16px;
    padding: 10px 14px;
}

.v2-shipping-modal-body .dunning-summary-card p {
    font-size: 0.78rem;
    color: #78350f;
    margin: 0 0 4px;
    line-height: 1.4;
}

.v2-shipping-modal-body .dunning-summary-card p:last-child {
    margin-bottom: 0;
}

.v2-shipping-modal-body .dunning-summary-header {
    align-items: flex-start;
    margin-bottom: 0;
}

.dunning-summary-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.dunning-summary-icon {
    width: 24px;
    height: 24px;
    background: #f59e0b;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.dunning-summary-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #92400e;
    margin: 0;
}

.dunning-summary-steps {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dunning-summary-step {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 0.82rem;
    line-height: 1.5;
}

.dunning-step-number {
    width: 20px;
    height: 20px;
    min-width: 20px;
    background: #fbbf24;
    color: #78350f;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 700;
    flex-shrink: 0;
}

.dunning-step-label {
    color: #92400e;
    font-weight: 600;
    white-space: nowrap;
}

.dunning-step-value {
    color: #78350f;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid #fde68a;
    border-radius: 6px;
    padding: 1px 8px;
    display: inline-block;
}

/* ═══════════════════════════════════════════════════════════════
   SUBSCRIPTION LIST — V2 Premium (mirrors Dunning / Account)
   ═══════════════════════════════════════════════════════════════ */

/* ── Page Header ── */
#pageSubscription .v2-list-header {
    height: 65px;
    min-height: 65px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: #ffffff;
    border-radius: 16px 16px 0 0;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: none;
}

#pageSubscription .v2-list-header .v2-header-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#pageSubscription .v2-list-header .nav-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #2b5797;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.01em;
}

#pageSubscription .v2-list-header .nav-add-button {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2b5797 0%, #1e40af 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(43, 87, 151, 0.25);
    flex-shrink: 0;
    border: none;
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1;
    text-decoration: none;
}

#pageSubscription .v2-list-header .nav-add-button:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 18px rgba(43, 87, 151, 0.35);
}

#pageSubscription .v2-list-header .nav-add-button::before {
    content: "+";
}

/* ── Type Tabs ── */
#pageSubscription .cd-tab-filter-wrapper {
    height: auto;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid #e2e8f0;
    border-top: none;
    background: #f8fafc;
    position: relative;
    z-index: 2;
    margin: 0 0 10px 0;
}

#pageSubscription .pt-10 {
    padding-top: 0 !important;
}

#pageSubscription .activities-type-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    flex-wrap: wrap;
}

#pageSubscription .activities-type-tabs .activitiesType,
#pageSubscription .activities-type-tabs .subscriptionFrequency {
    height: 28px;
    padding: 0 14px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.8rem;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

#pageSubscription .activities-type-tabs .activitiesType:hover,
#pageSubscription .activities-type-tabs .subscriptionFrequency:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #cbd5e1;
    color: #1e293b;
}

#pageSubscription .activities-type-tabs .activitiesType.selectedFilter,
#pageSubscription .activities-type-tabs .subscriptionFrequency.selectedFilter {
    background: linear-gradient(135deg, #2b5797 0%, #1e40af 100%);
    color: #ffffff;
    border-color: #2b5797;
    box-shadow: 0 4px 12px rgba(43, 87, 151, 0.3);
    transform: none;
    text-decoration: none;
}

/* ── Search Bar ── */
#pageSubscription .v2-search-wrapper {
    padding: 12px 20px;
    background: #ffffff;
    border-radius: 0;
}

#pageSubscription .v2-search-wrapper input {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    border-bottom: 2px solid #e2e8f0;
    border-radius: 0;
    padding: 10px 0;
    color: #1e293b;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: none;
    box-sizing: border-box;
}

#pageSubscription .v2-search-wrapper input:focus {
    border-color: #2b5797;
    box-shadow: none;
    outline: none;
    background: transparent;
}

#pageSubscription .v2-search-wrapper input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

/* ── Main Content Card ── */
#pageSubscription .v2-content-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

/* ── Layout heights ── */
#pageSubscription .page-region-content {
    min-height: calc(100vh - 60px);
}

#pageSubscription #listview_subscription {
    min-height: 200px;
    height: calc(100vh - 200px);
    overflow-y: auto;
}

/* ── Gallery ── */
#pageSubscription .cd-gallery {
    margin-top: 0;
    padding-top: 0 !important;
}

/* ── Sidebar Filter ── */
#pageSubscription .cd-filter {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    border: 1px solid #e2e8f0;
    top: 0;
    left: 0;
    height: calc(100% - 70px);
    overflow-y: auto;
}

#pageSubscription .cd-filter.filter-is-visible {
    margin-left: 0;
}

#pageSubscription .cd-main-content.is-fixed .cd-filter {
    top: 0;
}

#pageSubscription .cd-filter form {
    padding: 15px 15px 40px;
}

#pageSubscription .cd-filter .cd-close {
    display: none;
}

#pageSubscription .cd-filter .cd-filter-block {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}

#pageSubscription .cd-filter .cd-filter-block:last-child {
    border-bottom: none;
}

#pageSubscription .cd-filter .cd-filter-block h5 {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    padding: 6px 0 4px 0;
    margin-bottom: 4px;
}

#pageSubscription .cd-filter .cd-filter-block h5::before {
    display: none;
}

#pageSubscription .cd-filter .cd-filter-block select {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 12px;
    color: #1e293b;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

#pageSubscription .cd-filter .cd-filter-block select:focus {
    border-color: #2b5797;
    box-shadow: 0 0 0 3px rgba(43, 87, 151, 0.1);
    outline: none;
}

/* ── Filter trigger FAB ── */
#pageSubscription .cd-filter-trigger {
    position: fixed !important;
    bottom: 80px !important;
    right: 16px !important;
    left: auto !important;
    top: auto !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: #f59e0b !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
    text-indent: -9999px !important;
    text-decoration: none !important;
    z-index: 9998 !important;
    cursor: pointer !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35) !important;
    transition: all 0.3s ease !important;
    pointer-events: auto !important;
    isolation: isolate !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
}

#pageSubscription .cd-filter-trigger:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.45) !important;
}

#pageSubscription .cd-filter-trigger::after {
    content: '' !important;
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='21' x2='4' y2='14'/%3E%3Cline x1='4' y1='10' x2='4' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12' y2='3'/%3E%3Cline x1='20' y1='21' x2='20' y2='16'/%3E%3Cline x1='20' y1='12' x2='20' y2='3'/%3E%3Cline x1='1' y1='14' x2='7' y2='14'/%3E%3Cline x1='9' y1='8' x2='15' y2='8'/%3E%3Cline x1='17' y1='16' x2='23' y2='16'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    text-indent: 0 !important;
}

@media (min-width: 1024px) {
    #pageSubscription .cd-filter-trigger {
        display: none !important;
    }
}

/* ── Subscription List Item — Premium Card ── */
#pageSubscription .subscription-item.list-item-premium {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background 0.15s ease;
}

#pageSubscription .subscription-item.list-item-premium>div {
    pointer-events: none;
}

#pageSubscription .subscription-item.list-item-premium:hover {
    background: #f8fafc;
}

#pageSubscription .subscription-item.list-item-premium:last-child {
    border-bottom: none;
}

/* ── List item icon circle ── */
#pageSubscription .list-item-icon.sub-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #dbeafe, #eff6ff);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2b5797;
    flex-shrink: 0;
}

/* ── List item body ── */
#pageSubscription .list-item-body {
    flex: 1;
    min-width: 0;
}

#pageSubscription .list-item-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#pageSubscription .list-item-subtitle {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#pageSubscription .list-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    flex-wrap: wrap;
}

/* ── List item right ── */
#pageSubscription .list-item-right {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Subscription-specific badges ── */
.sub-frequency-badge {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    color: #065f46;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid #a7f3d0;
    white-space: nowrap;
}

.sub-date-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 500;
}

.sub-date-pill svg {
    flex-shrink: 0;
    stroke: #94a3b8;
}

/* ── Mobile Responsive ── */
@media (max-width: 768px) {
    #pageSubscription .v2-list-header {
        height: 52px;
        min-height: 52px;
        padding: 0 12px;
        border-radius: 12px 12px 0 0;
        margin: 12px 12px 0 12px !important;
        width: calc(100% - 24px) !important;
        border-bottom: none !important;
    }

    #pageSubscription .v2-list-header .nav-title {
        font-size: 0.95rem;
    }

    #pageSubscription .v2-list-header .v2-header-icon {
        width: 28px;
        height: 28px;
    }

    #pageSubscription .v2-list-header .v2-header-icon svg {
        width: 18px;
        height: 18px;
    }

    #pageSubscription .v2-list-header .nav-add-button {
        width: 32px;
        height: 32px;
    }

    #pageSubscription .cd-tab-filter-wrapper {
        border-radius: 0 !important;
        margin: 0 12px !important;
        width: calc(100% - 24px) !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }

    #pageSubscription .activities-type-tabs {
        padding: 4px 12px 12px 12px;
        gap: 6px;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    #pageSubscription .activities-type-tabs::-webkit-scrollbar {
        display: none;
    }

    #pageSubscription .activities-type-tabs .activitiesType,
    #pageSubscription .activities-type-tabs .subscriptionFrequency {
        height: 30px;
        padding: 0 12px;
        font-size: 0.75rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    #pageSubscription .v2-search-wrapper {
        padding: 8px 10px;
    }

    #pageSubscription .v2-search-wrapper input {
        padding: 10px 14px;
        font-size: 0.9rem;
        border-radius: 10px;
    }

    #pageSubscription .v2-content-card {
        margin: 0 12px 12px 12px !important;
        width: calc(100% - 24px) !important;
        border-radius: 0 0 12px 12px !important;
    }

    #pageSubscription .subscription-item.list-item-premium {
        padding: 10px 12px;
        gap: 10px;
    }

    #pageSubscription .list-item-icon.sub-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
        border-radius: 10px;
    }

    #pageSubscription .list-item-icon.sub-icon svg {
        width: 16px;
        height: 16px;
    }

    #pageSubscription .list-item-title {
        font-size: 0.85rem;
    }

    #pageSubscription .list-item-subtitle {
        font-size: 0.75rem;
    }

    .sub-frequency-badge {
        font-size: 0.65rem;
        padding: 2px 8px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   MASS MAILING LIST — V2 Design (mirrors #pageDunningList)
   ═══════════════════════════════════════════════════════════════ */

/* ── Page Header ── */
#pageMassMailingList .v2-list-header {
    height: 65px;
    min-height: 65px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: #ffffff;
    border-radius: 16px 16px 0 0;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: none;
}

#pageMassMailingList .v2-list-header .v2-header-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#pageMassMailingList .v2-list-header .nav-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #2b5797;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.01em;
}

#pageMassMailingList .v2-list-header .nav-add-button {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2b5797 0%, #1e40af 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(43, 87, 151, 0.25);
    flex-shrink: 0;
    border: none;
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1;
    text-decoration: none;
}

#pageMassMailingList .v2-list-header .nav-add-button::before {
    content: "+";
}

#pageMassMailingList .v2-list-header .nav-add-button:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 18px rgba(43, 87, 151, 0.35);
}

/* ── Type Tabs ── */
#pageMassMailingList .cd-tab-filter-wrapper {
    height: auto;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid #e2e8f0;
    border-top: none;
    background: #f8fafc;
    position: relative;
    z-index: 2;
    margin: 0 0 10px 0;
}

#pageMassMailingList .pt-10 {
    padding-top: 0 !important;
}

#pageMassMailingList .activities-type-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    flex-wrap: wrap;
}

#pageMassMailingList .activities-type-tabs .activitiesType,
#pageMassMailingList .activities-type-tabs .massMailingStatus {
    height: 28px;
    padding: 0 14px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.8rem;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

#pageMassMailingList .activities-type-tabs .activitiesType:hover,
#pageMassMailingList .activities-type-tabs .massMailingStatus:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #cbd5e1;
    color: #1e293b;
}

#pageMassMailingList .activities-type-tabs .activitiesType.selectedFilter,
#pageMassMailingList .activities-type-tabs .massMailingStatus.selectedFilter {
    background: linear-gradient(135deg, #2b5797 0%, #1e40af 100%);
    color: #ffffff;
    border-color: #2b5797;
    box-shadow: 0 4px 12px rgba(43, 87, 151, 0.3);
    transform: none;
    text-decoration: none;
}

/* ── Search Bar ── */
#pageMassMailingList .v2-search-wrapper {
    padding: 12px 20px;
    background: #ffffff;
    border-radius: 0;
}

#pageMassMailingList .v2-search-wrapper input {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    border-bottom: 2px solid #e2e8f0;
    border-radius: 0;
    padding: 10px 0;
    color: #1e293b;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: none;
    box-sizing: border-box;
}

#pageMassMailingList .v2-search-wrapper input:focus {
    border-color: #2b5797;
    box-shadow: none;
    outline: none;
    background: transparent;
}

#pageMassMailingList .v2-search-wrapper input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

/* ── Main Content Card ── */
#pageMassMailingList .v2-content-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

/* ── Layout heights ── */
#pageMassMailingList .page-region-content {
    min-height: calc(100vh - 60px);
}

#pageMassMailingList #listview_massMailing {
    min-height: 200px;
    height: calc(100vh - 200px);
    overflow-y: auto;
}

/* ── Sidebar Filter ── */
#pageMassMailingList .cd-filter {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    border: 1px solid #e2e8f0;
    top: 0;
    left: 0;
    height: calc(100% - 70px);
    overflow-y: auto;
}

#pageMassMailingList .cd-filter.filter-is-visible {
    margin-left: 0;
}

#pageMassMailingList .cd-main-content.is-fixed .cd-filter {
    top: 0;
}

#pageMassMailingList .cd-filter-trigger {
    position: fixed !important;
    bottom: 80px !important;
    right: 16px !important;
    left: auto !important;
    top: auto !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: #f59e0b !important;
    color: #ffffff !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
    text-indent: -9999px !important;
    text-decoration: none !important;
    z-index: 9998 !important;
    cursor: pointer !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35) !important;
    transition: all 0.3s ease !important;
    pointer-events: auto !important;
}

#pageMassMailingList .cd-filter-trigger:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.5) !important;
}

#pageMassMailingList .cd-filter-trigger::after {
    content: '' !important;
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='21' x2='4' y2='14'/%3E%3Cline x1='4' y1='10' x2='4' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12' y2='3'/%3E%3Cline x1='20' y1='21' x2='20' y2='16'/%3E%3Cline x1='20' y1='12' x2='20' y2='3'/%3E%3Cline x1='1' y1='14' x2='7' y2='14'/%3E%3Cline x1='9' y1='8' x2='15' y2='8'/%3E%3Cline x1='17' y1='16' x2='23' y2='16'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    text-indent: 0 !important;
}

#pageMassMailingList .cd-gallery {
    margin-top: 0;
    padding-top: 0 !important;
}

#pageMassMailingList .cd-filter form {
    padding: 50px 15px 20px;
}

#pageMassMailingList .cd-filter .cd-close {
    height: 40px;
    line-height: 40px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
}

#pageMassMailingList .cd-filter .cd-close:hover {
    color: #2b5797;
}

#pageMassMailingList .cd-filter .cd-filter-block {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}

#pageMassMailingList .cd-filter .cd-filter-block:last-child {
    border-bottom: none;
}

#pageMassMailingList .cd-filter .cd-filter-block h5 {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    padding: 6px 0 4px 0;
    margin-bottom: 4px;
}

#pageMassMailingList .cd-filter .cd-filter-block h5::before {
    display: none;
}

#pageMassMailingList .cd-filter .cd-filter-block select {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 12px;
    color: #1e293b;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

#pageMassMailingList .cd-filter .cd-filter-block select:focus {
    border-color: #2b5797;
    outline: none;
    box-shadow: 0 0 0 3px rgba(43, 87, 151, 0.1);
}

/* ── List items ── */
#pageMassMailingList .massmailing-item.list-item-premium {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background 0.2s ease;
}

#pageMassMailingList .massmailing-item.list-item-premium:hover {
    background: #f8fafc;
}

#pageMassMailingList .massmailing-item .list-item-body {
    flex: 1;
    min-width: 0;
}

#pageMassMailingList .massmailing-item .list-item-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#pageMassMailingList .massmailing-item .list-item-subtitle {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 2px;
}

#pageMassMailingList .massmailing-item .list-item-meta {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 2px;
}

#pageMassMailingList .massmailing-item .last-sent-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 7px;
    background: #f0f4ff;
    color: #3b5fc0;
    border: 1px solid #c7d2fe;
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 600;
    white-space: nowrap;
}

#pageMassMailingList .massmailing-item .list-item-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
    width: auto;
}

/* ── Status badges (shared with dunning) ── */
#pageMassMailingList .dunning-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.3px;
}

#pageMassMailingList .dunning-badge-active {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #a7f3d0;
}

#pageMassMailingList .dunning-badge-inactive {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

/* ── Mobile responsive ── */
@media (max-width: 768px) {
    #pageMassMailingList .v2-list-header {
        height: 50px;
        min-height: 50px;
        padding: 0 10px;
        border-radius: 16px 16px 0 0;
        margin: 0;
    }

    #pageMassMailingList .v2-list-header .nav-title {
        font-size: 0.95rem;
    }

    #pageMassMailingList .v2-list-header .v2-header-icon {
        width: 28px;
        height: 28px;
    }

    #pageMassMailingList .v2-list-header .v2-header-icon svg {
        width: 18px;
        height: 18px;
    }

    #pageMassMailingList .v2-list-header .nav-add-button {
        width: 34px;
        height: 34px;
        font-size: 1.2rem;
    }

    #pageMassMailingList .cd-tab-filter-wrapper {
        border-radius: 0 0 16px 16px;
        margin: 0 0 12px 0;
        position: relative;
    }

    #pageMassMailingList .activities-type-tabs {
        padding: 8px 10px;
        padding-right: 30px;
        gap: 6px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #pageMassMailingList .activities-type-tabs::-webkit-scrollbar {
        display: none;
    }

    #pageMassMailingList .activities-type-tabs .activitiesType,
    #pageMassMailingList .activities-type-tabs .massMailingStatus {
        height: 32px;
        padding: 0 14px;
        font-size: 0.8rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    #pageMassMailingList .v2-search-wrapper {
        padding: 8px 10px;
    }

    #pageMassMailingList .v2-content-card {
        border-radius: 16px;
        overflow: hidden !important;
    }

    #pageMassMailingList #listview_massMailing {
        height: calc(100vh - 240px);
    }

    #pageMassMailingList .cd-filter {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        width: 85% !important;
        max-width: 320px !important;
        height: 100% !important;
        border-radius: 16px 0 0 16px !important;
        box-shadow: -8px 0 30px rgba(0, 0, 0, 0.15) !important;
        z-index: 9999 !important;
        transform: translateX(100%) !important;
        transition: transform 0.3s ease !important;
        overflow-y: auto !important;
        margin-left: 0 !important;
    }

    #pageMassMailingList .cd-filter.cd-filter--narrow-open {
        transform: translateX(0) !important;
    }

    #pageMassMailingList .cd-filter-trigger {
        display: flex !important;
    }

    #pageMassMailingList .cd-gallery {
        width: 100% !important;
        padding-right: 0 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   SYSTEM USER LIST — V2 Premium Design
   ═══════════════════════════════════════════════════════════════ */

#pageSystemUserList .v2-list-header {
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 54px;
    min-height: 54px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    gap: 14px;
    position: relative;
    margin-bottom: 12px;
}

#pageSystemUserList .v2-list-header .v2-header-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    background: linear-gradient(135deg, #2b5797 0%, #1e40af 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#pageSystemUserList .v2-list-header .v2-header-icon svg {
    stroke: #ffffff;
}

#pageSystemUserList .v2-list-header .nav-title {
    flex: 1 1 auto;
    color: #1e293b;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#pageSystemUserList .v2-list-header .nav-add-button {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    background: #f59e0b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
    border: none;
    position: relative;
}

#pageSystemUserList .v2-list-header .nav-add-button::before {
    content: '+';
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1;
}

#pageSystemUserList .v2-list-header .nav-add-button:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.5);
}

#pageSystemUserList .pt-10 {
    padding-top: 0 !important;
}

#pageSystemUserList .v2-content-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

#pageSystemUserList .v2-search-wrapper {
    padding: 12px 20px;
}

#pageSystemUserList .v2-search-wrapper input {
    width: 100%;
    padding: 12px 18px;
    border: none;
    border-bottom: 2px solid #e2e8f0;
    border-radius: 0;
    font-size: 0.92rem;
    color: #1e293b;
    background: transparent;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

#pageSystemUserList .v2-search-wrapper input:focus {
    border-bottom-color: #2b5797;
    box-shadow: 0 2px 0 0 rgba(43, 87, 151, 0.15);
}

#pageSystemUserList .v2-search-wrapper input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

#pageSystemUserList .page-region-content {
    min-height: calc(100vh - 60px);
}

#pageSystemUserList #listview_systemUser {
    min-height: 200px;
    height: calc(100vh - 200px);
    overflow-y: auto;
}

/* ── List items ── */
#pageSystemUserList .systemuser-item.list-item-premium {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background 0.2s ease;
    gap: 14px;
}

#pageSystemUserList .systemuser-item.list-item-premium:hover {
    background: #f8fafc;
}

#pageSystemUserList .systemuser-item .list-item-avatar {
    flex-shrink: 0;
}

#pageSystemUserList .systemuser-item .avatar-img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e2e8f0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

#pageSystemUserList .systemuser-item .avatar-initials {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

#pageSystemUserList .systemuser-item .list-item-body {
    flex: 1;
    min-width: 0;
}

#pageSystemUserList .systemuser-item .list-item-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#pageSystemUserList .systemuser-item .list-item-subtitle {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#pageSystemUserList .systemuser-item .list-item-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

#pageSystemUserList .systemuser-item .list-item-meta {
    font-size: 0.8rem;
    color: #475569;
    font-weight: 500;
}

#pageSystemUserList .systemuser-item .list-item-meta-secondary {
    font-size: 0.75rem;
    color: #94a3b8;
}

/* ── Free account info ── */
#pageSystemUserList .systemuser-free-info {
    padding: 20px 16px;
    text-align: center;
    border-top: 1px solid #f1f5f9;
}

#pageSystemUserList .systemuser-free-info .free-info-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 6px 0;
}

#pageSystemUserList .systemuser-free-info .free-info-text {
    font-size: 0.82rem;
    color: #64748b;
    margin: 0;
}

/* ── Add paid user ── */
#pageSystemUserList .systemuser-add-paid {
    padding: 24px 16px;
    text-align: center;
    border-top: 1px solid #f1f5f9;
}

/* ── Mobile responsive ── */
@media (max-width: 768px) {
    #pageSystemUserList .v2-list-header {
        height: 50px;
        min-height: 50px;
        padding: 0 10px;
        border-radius: 16px 16px 0 0;
    }

    #pageSystemUserList .v2-list-header .nav-title {
        font-size: 0.95rem;
    }

    #pageSystemUserList .v2-list-header .v2-header-icon {
        width: 28px;
        height: 28px;
    }

    #pageSystemUserList .v2-list-header .v2-header-icon svg {
        width: 18px;
        height: 18px;
    }

    #pageSystemUserList .v2-list-header .nav-add-button {
        width: 34px;
        height: 34px;
        font-size: 1.2rem;
    }

    #pageSystemUserList .v2-content-card {
        border-radius: 16px;
        overflow: hidden;
    }

    #pageSystemUserList .systemuser-item .avatar-img {
        width: 36px;
        height: 36px;
    }

    #pageSystemUserList .systemuser-item .list-item-right {
        display: none;
    }

    #pageSystemUserList #listview_systemUser {
        height: calc(100vh - 240px);
    }
}

/* ═══════════════════════════════════════════════════════════════
   SYSTEM USER DETAILS — V2 Premium Design
   ═══════════════════════════════════════════════════════════════ */

/* ── hideLi utility ── */
.systemUserFrame .hideLi {
    visibility: hidden;
}

/* ── Row action buttons (delete/config in email table) ── */
.systemUserFrame .action-buttons {
    display: flex;
    justify-content: start;
    gap: 6px;
}

.systemUserFrame .delete-btn,
.systemUserFrame .config-btn {
    padding: 5px 10px;
    cursor: pointer;
    color: #fff;
    border-radius: 6px;
    border: none;
    font-size: 0.78rem;
    font-weight: 600;
    transition: opacity 0.2s ease;
}

.systemUserFrame .delete-btn:hover,
.systemUserFrame .config-btn:hover {
    opacity: 0.85;
}

.systemUserFrame .delete-btn {
    background-color: #ef4444;
}

.systemUserFrame .config-btn {
    background-color: #10b981;
}

/* ── V2 Body container ── */
.systemUserFrame .v2-body-container {
    padding: 10px 12px !important;
}

/* ── V2 Card ── */
.systemUserFrame .v2-card {
    background: #ffffff !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}




/* ── Config Section Title — COMPACT OVERRIDE ── */
.systemUserFrame .config-section-title {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 0 0 8px 0 !important;
}

.systemUserFrame .config-section-title i {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 8px !important;
    font-size: 0.82rem !important;
}

/* ═══ Organization Details — Compact Override Pattern ═══ */
/* Duplicates .systemUserFrame compact CSS for the organization page context */

/* ── Nav Block — Compact Override ── */
.organizationFrame .v2-unified-nav-block {
    margin-bottom: 10px !important;
}

/* ── Hidden tabs: collapse instead of invisible ── */
.organizationFrame .hideLi {
    display: none !important;
}

.organizationFrame .lead-detail-grid {
    display: grid !important;
    gap: 6px 14px !important;
}

.organizationFrame .lead-detail-grid-2 {
    grid-template-columns: repeat(2, 1fr) !important;
}

.organizationFrame .lead-detail-grid-3 {
    grid-template-columns: repeat(3, 1fr) !important;
}

.organizationFrame .v2-select-wrapper {
    margin: 0 !important;
}

.organizationFrame .v2-select-wrapper::after {
    display: none !important;
}

.organizationFrame .v2-select-wrapper select {
    width: 100% !important;
    border: none !important;
    border-bottom: 1.5px solid #e2e8f0 !important;
    border-radius: 0 !important;
    padding: 5px 2px !important;
    font-size: 0.82rem !important;
    color: #1e293b !important;
    background: transparent !important;
    cursor: pointer !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
}

.organizationFrame .v2-select-wrapper select:focus {
    border-bottom-color: #2b5797 !important;
    box-shadow: none !important;
}

.organizationFrame .v2-body-container {
    padding: 10px 12px !important;
}

.organizationFrame .v2-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

.organizationFrame .config-section-title {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 0 0 8px 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

.organizationFrame .config-section-title i {
    background: linear-gradient(135deg, #3b5998, #2b5797) !important;
    color: #fff !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.82rem !important;
}





/* ── Organization Tables — Compact Override ── */
.organizationFrame .table {
    border-collapse: collapse;
    border-radius: 10px;
    overflow: hidden;
}

.organizationFrame .table thead th {
    background: #f8fafc;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 7px 10px;
    border-bottom: 2px solid #e2e8f0;
}

.organizationFrame .table tbody td {
    padding: 6px 10px;
    font-size: 0.8rem;
    color: #1e293b;
    border-bottom: 1px solid #f1f5f9;
}

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

/* ── Organization Buttons — Compact Override ── */
.organizationFrame .btnconfirm {
    background: #2b5797;
    color: #ffffff;
    border: none;
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(43, 87, 151, 0.2);
}

.organizationFrame .btnconfirm:hover {
    background: #1e40af;
    box-shadow: 0 4px 10px rgba(43, 87, 151, 0.3);
}

/* ── Organization Text — Compact Override ── */
.organizationFrame .fg-color-blueDark-title {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
}

.organizationFrame .org-text-small {
    font-size: 0.78rem !important;
    line-height: 1.5 !important;
}

/* ── Organization Spacing — Compact Override ── */
.organizationFrame .mt-10 {
    margin-top: 8px !important;
}

.organizationFrame .mt-15 {
    margin-top: 12px !important;
}

.organizationFrame .mb-30 {
    margin-bottom: 20px !important;
}

/* ── Lead Detail Grid ── */

.systemUserFrame .lead-detail-grid {
    display: grid !important;
    gap: 6px 14px !important;
}

.systemUserFrame .lead-detail-grid-2 {
    grid-template-columns: repeat(2, 1fr) !important;
}

.systemUserFrame .lead-detail-grid-3 {
    grid-template-columns: repeat(3, 1fr) !important;
}

/* ── V2 Select Wrapper — COMPACT OVERRIDE ── */
.systemUserFrame .v2-select-wrapper {
    margin: 0 !important;
}

.systemUserFrame .v2-select-wrapper::after {
    display: none !important;
}

.systemUserFrame .v2-select-wrapper select {
    width: 100% !important;
    border: none !important;
    border-bottom: 1.5px solid #e2e8f0 !important;
    border-radius: 0 !important;
    padding: 5px 2px !important;
    font-size: 0.82rem !important;
    color: #1e293b !important;
    background: transparent !important;
    cursor: pointer !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
}

.systemUserFrame .v2-select-wrapper select:focus {
    border-bottom-color: #2b5797 !important;
    box-shadow: none !important;
}

/* ── V2 List Header (title + action button in flex row) ── */
.systemUserFrame .v2-list-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 8px !important;
}

.systemUserFrame .v2-list-header .config-section-title {
    margin: 0 !important;
}

/* ── V2 Chart Container ── */
.systemUserFrame .v2-chart-container {
    width: 100%;
    height: 220px;
    min-height: 200px;
}

/* ── Identity Header (photo + color + last connection) ── */
.systemUserFrame .sysuser-identity-header {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: 10px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.systemUserFrame .sysuser-photo-section {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}

.systemUserFrame .sysuser-photo {
    border-radius: 50% !important;
    border: 2px solid #e2e8f0 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    cursor: pointer !important;
    transition: box-shadow 0.2s ease !important;
    object-fit: cover !important;
}

.systemUserFrame .sysuser-photo:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* ── Color picker ── */
.systemUserFrame .sysuser-color-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
}

.systemUserFrame .sysuser-color-wrapper .v2-label-modern {
    margin: 0 !important;
    font-size: 0.65rem !important;
}

.systemUserFrame .sysuser-color-picker {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 50% !important;
    padding: 0 !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background: none !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
    transition: box-shadow 0.2s ease !important;
}

.systemUserFrame .sysuser-color-picker::-webkit-color-swatch-wrapper {
    padding: 0 !important;
}

.systemUserFrame .sysuser-color-picker::-webkit-color-swatch {
    border: none !important;
    border-radius: 50% !important;
}

.systemUserFrame .sysuser-color-picker:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
}

/* ── Last connection badge ── */
.systemUserFrame .sysuser-last-connection {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-left: auto !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 4px 12px !important;
    flex-shrink: 0 !important;
}

.systemUserFrame .sysuser-last-connection i {
    color: #94a3b8 !important;
    font-size: 0.75rem !important;
    width: calc(100% - 10px) !important;
    height: auto !important;
    min-width: auto !important;
    background: none !important;
}

.systemUserFrame .sysuser-last-connection-text {
    font-size: 0.72rem !important;
    color: #64748b !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}

/* ── Table full width ── */
.systemUserFrame .sysuser-table-full {
    width: 100%;
}

/* ── Inline action button (role, office lookups) ── */
.systemUserFrame .sysuser-inline-btn {
    float: right;
    margin: 0 0 5px 0;
}

/* ── Add button wrapper (align button) ── */
.systemUserFrame .sysuser-add-btn-wrapper {
    display: flex;
    align-items: flex-end;
    padding-bottom: 4px;
}

/* ── Tables (territories, emails) ── */
.systemUserFrame .table {
    border-collapse: collapse;
    border-radius: 10px;
    overflow: hidden;
}

.systemUserFrame .table thead th {
    background: #f8fafc;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 7px 10px;
    border-bottom: 2px solid #e2e8f0;
}

.systemUserFrame .table tbody td {
    padding: 6px 10px;
    font-size: 0.8rem;
    color: #1e293b;
    border-bottom: 1px solid #f1f5f9;
}

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

/* ── Account table wrapper ── */
.systemUserFrame .account-table-wrapper {
    overflow-x: auto;
}

/* ── Confirm buttons ── */
.systemUserFrame .btnconfirm {
    background: #2b5797;
    color: #ffffff;
    border: none;
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(43, 87, 151, 0.2);
}

.systemUserFrame .btnconfirm:hover {
    background: #1e40af;
    box-shadow: 0 4px 10px rgba(43, 87, 151, 0.3);
}

/* ── Spacing utilities ── */
.systemUserFrame .mt-10 {
    margin-top: 10px;
}

.systemUserFrame .mt-15 {
    margin-top: 15px;
}

.systemUserFrame .mb-30 {
    margin-bottom: 30px;
}

/* ═══════════════════════════════════════════════════════
   HISTORY TAB — V2 Premium Design
   ═══════════════════════════════════════════════════════ */

/* ── Filter bar ── */
.systemUserFrame .history-filter-bar {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.systemUserFrame .history-filter-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 140px;
}

.systemUserFrame .history-filter-field.history-filter-action {
    flex: 2;
    min-width: 200px;
}

/* ── Scrollable table container ── */
.systemUserFrame .history-table-wrapper {
    max-height: 55vh;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.systemUserFrame .history-table-wrapper::-webkit-scrollbar {
    width: 5px;
}

.systemUserFrame .history-table-wrapper::-webkit-scrollbar-track {
    background: #f8fafc;
    border-radius: 0 10px 10px 0;
}

.systemUserFrame .history-table-wrapper::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

.systemUserFrame .history-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ── History table ── */
.systemUserFrame .history-table {
    width: 100%;
    border-collapse: collapse;
}

.systemUserFrame .history-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.systemUserFrame .history-table thead th {
    background: #f8fafc;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 9px 12px;
    border-bottom: 2px solid #e2e8f0;
    text-align: left;
    white-space: nowrap;
}

.systemUserFrame .history-table tbody td {
    padding: 7px 12px;
    font-size: 0.8rem;
    color: #1e293b;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.systemUserFrame .history-table tbody tr {
    transition: background 0.15s ease;
    cursor: pointer;
}

.systemUserFrame .history-table tbody tr:nth-child(even) {
    background: #fafbfc;
}

.systemUserFrame .history-table tbody tr:hover {
    background: #eff6ff;
}

/* ── Action type badges ── */
.systemUserFrame .history-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.4;
}

.systemUserFrame .history-badge i {
    font-size: 0.68rem;
    width: auto;
    height: auto;
    min-width: auto;
    background: none;
}

.systemUserFrame .history-badge-create {
    background: #ecfdf5;
    color: #065f46;
}

.systemUserFrame .history-badge-modify {
    background: #fffbeb;
    color: #92400e;
}

.systemUserFrame .history-badge-delete {
    background: #fef2f2;
    color: #991b1b;
}

.systemUserFrame .history-badge-login {
    background: #eff6ff;
    color: #1e40af;
}

.systemUserFrame .history-badge-print {
    background: #f5f3ff;
    color: #5b21b6;
}

.systemUserFrame .history-badge-import {
    background: #fdf4ff;
    color: #86198f;
}

.systemUserFrame .history-badge-valid {
    background: #f0fdf4;
    color: #166534;
}

.systemUserFrame .history-badge-other {
    background: #f1f5f9;
    color: #475569;
}

/* ── Date column ── */
.systemUserFrame .history-date {
    font-size: 0.78rem;
    color: #475569;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── Name column ── */
.systemUserFrame .history-name {
    font-weight: 500;
    color: #1e293b;
}

/* ── Result counter ── */
.systemUserFrame .history-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.systemUserFrame .history-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
}

.systemUserFrame .history-count-badge i {
    font-size: 0.7rem;
    width: auto;
    height: auto;
    min-width: auto;
    background: none;
}

/* ── Empty state ── */
.systemUserFrame .history-empty {
    text-align: center;
    padding: 40px 20px;
    color: #94a3b8;
}

.systemUserFrame .history-empty i {
    font-size: 2rem;
    display: block;
    margin-bottom: 10px;
    width: auto;
    height: auto;
    min-width: auto;
    background: none;
    color: #cbd5e1;
}

.systemUserFrame .history-empty-text {
    font-size: 0.82rem;
    font-weight: 500;
}

/* ── Mobile responsive ── */
@media (max-width: 768px) {

    .systemUserFrame .lead-detail-grid-2,
    .systemUserFrame .lead-detail-grid-3 {
        grid-template-columns: 1fr;
    }

    .systemUserFrame .v2-body-container {
        padding: 10px;
    }

    .systemUserFrame .v2-card {
        padding: 14px;
    }

    .systemUserFrame .history-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .systemUserFrame .history-filter-field {
        min-width: 100%;
    }

    .systemUserFrame .history-table-wrapper {
        max-height: 45vh;
    }
}

/* ── Removed-inline-style replacements ── */
#modalPassword .modal-title-dark {
    color: #000;
}

.systemUserFrame .btn-left-float {
    position: relative;
    float: left;
}

.systemUserFrame .history-section-title {
    margin: 0 !important;
}

/* ═══════════════════════════════════════════════════════
   EMAIL CONFIGURATION WIZARD — V2 Design
   ═══════════════════════════════════════════════════════ */

/* ── Remodal override for wizard ── */
.remodal--v2-wizard {
    max-width: 600px !important;
    padding: 30px 28px !important;
    border-radius: 16px !important;
    background: #ffffff !important;
}

/* ── Step indicator ── */
.v2-wizard-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 24px;
}

.v2-wizard-step-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.v2-wizard-step-dot.active {
    background: #2b5797;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(43, 87, 151, 0.3);
}

.v2-wizard-step-dot.completed {
    background: #10b981;
    color: #ffffff;
}

.v2-wizard-step-line {
    width: 50px;
    height: 3px;
    background: #e2e8f0;
    transition: background 0.3s ease;
}

.v2-wizard-step-line.active {
    background: #10b981;
}

/* ── Panels ── */
.v2-wizard-panel {
    display: none;
    animation: wizardFadeIn 0.3s ease;
}

.v2-wizard-panel.active {
    display: block;
}

@keyframes wizardFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

/* ── Wizard title ── */
.v2-wizard-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 0 0 18px 0 !important;
    text-align: center;
}

/* ── Provider grid ── */
.v2-provider-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-width: 450px;
    margin: 0 auto;
}

.v2-provider-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 10px;
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.v2-provider-card:hover {
    border-color: #94a3b8;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.v2-provider-card.selected {
    border-color: #2b5797;
    background: #eff6ff;
    box-shadow: 0 4px 12px rgba(43, 87, 151, 0.15);
}

.v2-provider-icon {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.v2-provider-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: #334155;
}

/* ── Step 2 header ── */
.v2-wizard-panel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.v2-step2-provider-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
}

.v2-wizard-panel-header .v2-wizard-title {
    text-align: left !important;
    margin: 0 !important;
}

/* ── Gmail warning ── */
.v2-gmail-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 10px;
    margin-bottom: 14px;
    font-size: 0.78rem;
    color: #9a3412;
    line-height: 1.4;
}

.v2-gmail-warning i {
    color: #ea580c;
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.v2-gmail-link {
    color: #2b5797 !important;
    text-decoration: underline !important;
    font-weight: 600;
}

/* ── Form grid ── */
.v2-wizard-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.v2-wizard-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 16px;
}

.v2-wizard-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ── Wizard input overrides ── */
#modalEmailConfigurationForm .v2-input {
    border: none !important;
    border-bottom: 1.5px solid #e2e8f0 !important;
    border-radius: 0 !important;
    padding: 6px 2px !important;
    font-size: 0.85rem !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

#modalEmailConfigurationForm .v2-input:focus {
    border-bottom-color: #2b5797 !important;
    box-shadow: none !important;
    outline: none !important;
}

#modalEmailConfigurationForm .v2-label-modern {
    font-size: 0.68rem !important;
    margin-bottom: 1px !important;
}

#modalEmailConfigurationForm .v2-select-wrapper {
    margin: 0 !important;
}

#modalEmailConfigurationForm .v2-select-wrapper::after {
    display: none !important;
}

/* ── Actions bar ── */
.v2-wizard-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    gap: 12px;
}

/* ── Success card ── */
.v2-wizard-success {
    text-align: center;
    padding: 20px 0;
}

.v2-wizard-success-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2b5797 0%, #1e40af 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px auto;
    box-shadow: 0 4px 15px rgba(43, 87, 151, 0.3);
}

.v2-wizard-success-icon i {
    font-size: 1.6rem;
}

.v2-wizard-success-text {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
    margin: 12px 0 0 0;
}

.v2-wizard-success .v2-wizard-actions {
    justify-content: center;
}

/* ── Responsive ── */
@media (max-width: 500px) {
    .v2-provider-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .v2-wizard-form-grid {
        grid-template-columns: 1fr;
    }

    .remodal--v2-wizard {
        padding: 20px 16px !important;
    }
}

/* ═══════════════════════════════════════════════════════
   EMAIL SIGNATURE — V2 Dropzone
   ═══════════════════════════════════════════════════════ */

.v2-signature-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 20px;
    border: 2px dashed #cbd5e1;
    border-radius: 14px;
    background: #f8fafc;
    cursor: pointer;
    transition: all 0.25s ease;
    margin: 16px 0;
}

.v2-signature-dropzone:hover,
.v2-signature-dropzone.dragover {
    border-color: #2b5797;
    background: #eff6ff;
}

.v2-dropzone-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease;
}

.v2-signature-dropzone:hover .v2-dropzone-icon,
.v2-signature-dropzone.dragover .v2-dropzone-icon {
    background: #2b5797;
}

.v2-dropzone-icon i {
    font-size: 1.3rem;
    color: #64748b;
    transition: color 0.25s ease;
}

.v2-signature-dropzone:hover .v2-dropzone-icon i,
.v2-signature-dropzone.dragover .v2-dropzone-icon i {
    color: #ffffff;
}

.v2-dropzone-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
    margin: 0;
}

.v2-dropzone-subtitle {
    font-size: 0.72rem;
    color: #94a3b8;
    margin: 0;
}

/* ── Preview ── */
.v2-signature-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px;
    margin: 16px 0;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
}

.v2-signature-preview-img {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ── Danger button (small) ── */
.v2-btn-danger-sm {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border: none;
    border-radius: 8px;
    background: #fee2e2;
    color: #dc2626;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.v2-btn-danger-sm:hover {
    background: #fecaca;
}

.v2-btn-danger-sm i {
    font-size: 0.8rem;
}

/* ── Signature image position toggle ── */
.v2-signature-position-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 8px 12px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.v2-signature-position-row .v2-label-modern {
    margin: 0;
    white-space: nowrap;
    font-size: 13px;
}

.v2-select-compact {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
    color: #334155;
}

/* ── Signature text editor ── */
.v2-signature-text-section {
    margin-top: 16px;
}

.v2-signature-editor-container {
    margin-top: 4px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

#modalEmailSignatureForm .jqte {
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

#modalEmailSignatureForm .jqte_editor {
    min-height: 80px;
    font-size: 0.85rem;
    padding: 10px;
}

/* ═══════════════════════════════════════════════════════════
   V2 Organization Details — Card-based compact layout
   ═══════════════════════════════════════════════════════════ */

/* Container overrides for V2 compact */
.v2-compact-content {
    margin-top: 5px !important;
    padding: 0 10px;
}

.v2-page-control {
    width: 100% !important;
    height: 100% !important;
}

/* Legacy inline styles moved to CSS */
.hideLi {
    visibility: hidden;
}

.frame {
    padding-left: 0px;
}

.link-destacado {
    color: blue;
    font-weight: bold;
    text-decoration: underline;
}

/* V2 Detail Cards */
.v2-detail-card {
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.v2-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #2b5797;
    margin: 0 0 10px 0;
    padding: 0;
    border-bottom: 1px solid #e8eaed;
    padding-bottom: 6px;
}

.v2-card-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.v2-card-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.v2-row-2col {
    flex-direction: row;
    gap: 20px;
}

.v2-row-2col>.v2-card-col {
    flex: 1;
    min-width: 0;
}

.v2-card-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* V2 Field label */
.v2-field-label {
    font-size: 11px;
    font-weight: 500;
    color: #5f6368;
    margin: 4px 0 0 0;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* V2 Input fields */
.v2-input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #dadce0;
    border-radius: 4px;
    font-size: 13px;
    color: #333;
    background: #fafafa;
    transition: border-color 0.2s, background 0.2s;
    box-sizing: border-box;
}

.v2-input:focus {
    border-color: #2b5797;
    background: #fff;
    outline: none;
}

.v2-input:disabled {
    background: #f8f9fa;
    color: #555;
    border-color: #e8eaed;
    cursor: default;
}

/* V2 Select fields */
.v2-select {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #dadce0;
    border-radius: 4px;
    font-size: 13px;
    color: #333;
    background: #fafafa;
    cursor: pointer;
    box-sizing: border-box;
}

.v2-select:disabled {
    background: #f8f9fa;
    color: #555;
    border-color: #e8eaed;
    cursor: default;
}

/* Responsive for mobile */
@media (max-width: 768px) {
    .v2-row-2col {
        flex-direction: column;
        gap: 6px;
    }

    .v2-detail-card {
        padding: 12px 14px;
        margin-bottom: 8px;
    }
}

/* ═══ Organization Details — Inline style replacements ═══ */
.org-modal-verifactu {
    min-width: 250px;
}

.org-modal-img {
    width: 200px;
}

.org-modal-title {
    color: black;
}

.org-text-left {
    text-align: left;
}

.org-btn-full-width {
    width: 100%;
}

.org-btn-change-card {
    margin: 0px;
    width: 200px;
}

.org-table-full {
    width: 100%;
}

.org-text-small {
    font-size: 12px;
}

.org-text-medium {
    font-size: 14px;
}

.org-form-hidden {
    display: none;
}

.org-verifactu-img {
    max-width: 200px;
    height: auto;
}

.org-verifactu-padding {
    padding-left: 15px;
}

.org-ticket-textarea {
    height: 150px;
    width: 100%;
}

.org-chart-container {
    margin-left: 15px;
    margin-right: 15px;
}

.org-badge-ml {
    margin-left: 5px;
}

.org-chart-box {
    width: 100%;
    height: 220px;
}

.org-settlement-modal {
    max-height: 85vh;
    overflow-y: auto;
}

.org-settlement-tabs {
    background-color: #C7C4C8;
    border-radius: 7px;
}

.org-settlement-frames {
    height: 300px;
    overflow-y: auto;
}

/* ── Settlement modal V2 visual polish ── */
.org-settlement-modal {
    border-radius: 16px !important;
    padding: 24px 28px !important;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0;
}

/* Title takes remaining space on the left */
.org-settlement-modal h2 {
    order: 1;
    flex: 1 1 auto;
    font-size: 1.15rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    text-align: left;
    line-height: 34px;
}

/* Cancel button — right of title */
.org-settlement-modal .remodal-cancel {
    order: 2;
    background: #ffffff;
    color: #334155 !important;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 7px 16px;
    font-weight: 700;
    font-size: 0.78rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
    margin-left: 8px;
    white-space: nowrap;
}

.org-settlement-modal .remodal-cancel:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

/* OK button — rightmost */
.org-settlement-modal .remodal-confirm {
    order: 3;
    background: #10b981;
    color: #ffffff !important;
    border-radius: 8px;
    padding: 7px 20px;
    font-weight: 700;
    font-size: 0.78rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background 0.2s ease;
    margin-left: 8px;
    white-space: nowrap;
}

.org-settlement-modal .remodal-confirm:hover {
    background: #059669;
}

/* All other content spans full width below the header */
.org-settlement-modal .grid,
.org-settlement-modal .page-control,
.org-settlement-modal hr {
    order: 10;
    width: 100%;
}

/* Reduce jqte toolbar — hide excess buttons */
.org-settlement-modal .jqte_tool.jqte_tool_1,
.org-settlement-modal .jqte_tool.jqte_tool_2,
.org-settlement-modal .jqte_tool.jqte_tool_3,
.org-settlement-modal .jqte_tool.jqte_tool_10,
.org-settlement-modal .jqte_tool.jqte_tool_11,
.org-settlement-modal .jqte_tool.jqte_tool_14,
.org-settlement-modal .jqte_tool.jqte_tool_15,
.org-settlement-modal .jqte_tool.jqte_tool_16,
.org-settlement-modal .jqte_tool.jqte_tool_17,
.org-settlement-modal .jqte_tool.jqte_tool_18,
.org-settlement-modal .jqte_tool.jqte_tool_19,
.org-settlement-modal .jqte_tool.jqte_tool_20,
.org-settlement-modal .jqte_tool.jqte_tool_21 {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   V2 Info Tip — Reusable amber info box
   ═══════════════════════════════════════════════════════════ */
.v2-info-tip {
    display: flex;
    gap: 14px;
    padding: 16px 18px;
    background: #FFF8E1;
    border: 1px solid #FFE082;
    border-radius: 12px;
    border-left: 4px solid #FFB300;
}

.v2-info-tip-icon {
    display: none;
}

.v2-info-tip-content {
    font-size: 13px;
    color: #333;
    line-height: 1.6;
}

.v2-info-tip-line {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
}

.v2-info-tip-line::before {
    content: '';
    width: 8px;
    height: 8px;
    min-width: 8px;
    border-radius: 50%;
    background: #F57C00;
    display: inline-block;
    position: relative;
    top: -1px;
}

.v2-info-tip-line:last-child {
    margin-bottom: 0;
}

.v2-info-tip-content b {
    font-weight: 600;
}


.org-settlement-modal .row {
    display: flex;
    gap: 16px;
}

.org-settlement-modal .row>.input-control.text {
    flex: 1;
    min-width: 0;
}

.org-settlement-modal .input-control.text h4 {
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
    margin: 8px 0 4px 0;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.org-settlement-modal .input-control.text .input {
    border: none;
    border-bottom: 1.5px solid #e2e8f0;
    border-radius: 0;
    padding: 6px 2px;
    font-size: 0.85rem;
    background: transparent;
    box-shadow: none;
    width: 100%;
}

.org-settlement-modal .input-control.text .input:focus {
    border-bottom-color: #2b5797;
    outline: none;
}

.org-settlement-modal .cl-switch .label {
    font-size: 0.82rem;
    font-weight: 500;
    color: #334155;
}

/* Hide the X close button — OK button replaces it */
.org-settlement-modal .remodal-close {
    display: none;
}

/* Align both toggle switches flush-left */
.org-settlement-modal .page-control>.row,
.org-settlement-modal .page-control>label.cl-switch {
    text-align: left;
    padding-left: 0;
    margin-left: 0;
}

.org-settlement-modal .cl-switch {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}

.org-settlement-modal hr {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 12px 0;
}

/* Tabs inside the modal */
.org-settlement-tabs {
    background-color: #f1f5f9;
    border-radius: 10px;
    padding: 4px;
    display: flex;
    gap: 2px;
}

.org-settlement-tabs li {
    list-style: none;
    flex: 1;
}

.org-settlement-tabs li a {
    display: block;
    text-align: center;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-decoration: none;
    transition: all 0.2s ease;
}

.org-settlement-tabs li.active a,
.org-settlement-tabs li a:hover {
    background: #ffffff;
    color: #2b5797;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* Modal category table */
.org-settlement-modal .contactCategory .table {
    border-collapse: separate;
    border-spacing: 0;
}

.org-settlement-modal .contactCategory .table th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 12px;
    border-bottom: 2px solid #e2e8f0;
}

.org-settlement-modal .contactCategory .table td {
    padding: 10px 12px;
    font-size: 0.82rem;
    border-bottom: 1px solid #f1f5f9;
}

.org-settlement-modal .contactCategory .table td.delete {
    color: #dc2626;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.75rem;
}

.org-settlement-modal .contactCategory .table td.delete:hover {
    color: #991b1b;
}

.org-settlement-modal .btnconfirm {
    background: #2b5797;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 8px 20px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.org-settlement-modal .btnconfirm:hover {
    background: #1e40af;
}



/* ── Settlement list (in the tab) — card style ── */
.settlement-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.settlement-card:hover {
    background: #eff6ff;
    border-color: #2b5797;
    box-shadow: 0 2px 8px rgba(43, 87, 151, 0.12);
    transform: translateY(-1px);
}

.settlement-card .settlement-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #2b5797 0%, #1e40af 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.settlement-card .settlement-icon i {
    font-size: 1rem;
}

.settlement-card .settlement-text {
    font-size: 0.85rem;
    font-weight: 500;
    color: #334155;
}

.settlement-card .settlement-arrow {
    margin-left: auto;
    color: #94a3b8;
    font-size: 0.8rem;
}

/* ═══════════════════════════════════════════════════════
   CALENDAR INTEGRATIONS — V2
   ═══════════════════════════════════════════════════════ */

/* ── Header ── */
.v2-integrations-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    position: relative;
}

.v2-integrations-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.v2-integrations-title {
    font-size: 22px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.v2-badge-advanced {
    background: #3b82f6;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    text-transform: capitalize;
}

.v2-integrations-subtitle {
    width: 100%;
    margin: -8px 0 0 0;
    font-size: 13px;
    color: #64748b;
}

.v2-sync-now-btn {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    color: #334155;
    cursor: pointer;
    transition: all 0.2s ease;
}

.v2-sync-now-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

/* ── Warning Banner ── */
.v2-integrations-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 18px;
    background: #fefce8;
    border: 1px solid #fde68a;
    border-radius: 10px;
    margin-bottom: 24px;
    font-size: 13px;
    color: #92400e;
    line-height: 1.5;
}

.v2-integrations-warning i {
    font-size: 16px;
    margin-top: 2px;
    color: #f59e0b;
}

/* ── Provider Cards Grid ── */
.v2-provider-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 900px) {
    .v2-provider-cards {
        grid-template-columns: 1fr;
    }
}

.v2-provider-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.v2-provider-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    border-color: #cbd5e1;
}

.v2-provider-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

/* ── Provider Icons ── */
.v2-provider-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    flex-shrink: 0;
}

.v2-provider-icon-google {
    background: #fef2f2;
    color: #dc2626;
}

.v2-provider-icon-outlook {
    background: #eff6ff;
    color: #2563eb;
}

.v2-provider-icon-icloud {
    background: #f5f5f5;
    color: #333;
}

.v2-provider-info {
    flex: 1;
}

.v2-provider-name {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 4px 0;
}

.v2-provider-status-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #64748b;
}

/* ── Status Badges ── */
.v2-status-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 10px;
}

.v2-status-connected {
    background: #dcfce7;
    color: #166534;
}

.v2-status-disconnected {
    background: #f1f5f9;
    color: #64748b;
}

.v2-provider-description {
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
    flex: 1;
    margin: 0;
}

.v2-provider-divider {
    border: none;
    border-top: 1px solid #f1f5f9;
    margin: 14px 0;
}

.v2-provider-manage-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    color: #334155;
    cursor: pointer;
    align-self: flex-start;
    transition: all 0.2s ease;
}

.v2-provider-manage-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.v2-provider-manage-btn.v2-btn-disabled {
    opacity: 0.55;
    cursor: default;
    pointer-events: none;
    background: #f8fafc;
}

.v2-provider-icon svg {
    display: block;
}

/* ── Info Card ── */
.v2-integrations-info-card {
    background: #fafbff;
    border: 1px solid #e8ecf4;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 24px;
}

.v2-info-title {
    font-size: 15px;
    font-weight: 700;
    color: #f97316;
    margin: 0 0 8px 0;
}

.v2-info-text {
    font-size: 13px;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

/* ── Sync Log ── */
.v2-sync-log-section {
    margin-top: 8px;
}

.v2-sync-log-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.v2-sync-log-title {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.v2-sync-active-badge {
    font-size: 11px;
}

.v2-sync-log-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.v2-sync-log-table thead th {
    background: #f8fafc;
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    color: #475569;
    border-bottom: 1px solid #e2e8f0;
}

.v2-sync-log-table tbody td {
    padding: 10px 14px;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
}

.v2-sync-log-table tbody tr:hover {
    background: #fafbff;
}

.v2-sync-log-empty {
    text-align: center;
    padding: 40px 20px;
    color: #94a3b8;
}

.v2-sync-log-empty i {
    font-size: 28px;
    display: block;
    margin-bottom: 8px;
}

.v2-sync-log-empty p {
    margin: 0;
    font-size: 13px;
}

/* ── Tracking Filter Pills ── */
.v2-pill,
.v2-pill-active {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    transition: all 0.2s ease;
}

.v2-pill:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.v2-pill-active {
    background: #3b82f6;
    color: #fff;
    border-color: #3b82f6;
}

.v2-pill-active:hover {
    background: #2563eb;
    border-color: #2563eb;
}

/* ═══════════════════════════════════════════════════════════════
   EXPENSE LIST — V2 Premium Design
   ═══════════════════════════════════════════════════════════════ */

#pageExpenses .v2-list-header {
    display: flex;
    align-items: center;
    padding: 0 20px;
    height: 65px;
    min-height: 65px;
    background: #ffffff;
    border-radius: 16px 16px 0 0;
    box-shadow: none;
    border: none;
    border-bottom: 1px solid #e2e8f0;
    gap: 14px;
    position: relative;
    margin-top: 5px;
    margin-bottom: 0;
}

#pageExpenses .cd-tab-filter-wrapper {
    height: auto;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid #e2e8f0;
    border-top: none;
    background: #f8fafc;
    position: relative;
    z-index: 2;
    margin: 0 0 10px 0;
}

/* Responsive mobile: add side margins */
@media (max-width: 768px) {
    #pageExpenses .v2-list-header {
        margin: 12px 12px 0 12px;
        width: calc(100% - 24px);
        border-radius: 12px 12px 0 0;
    }

    #pageExpenses .cd-tab-filter-wrapper {
        margin: 0 12px 10px 12px;
        width: calc(100% - 24px);
        border-radius: 0 0 12px 12px;
    }
}

#pageExpenses .pt-10 {
    padding-top: 0 !important;
}

#pageExpenses .v2-list-header .v2-header-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    background: #e8ecf1;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#pageExpenses .v2-list-header .v2-header-icon svg {
    stroke: #2b5797;
}

#pageExpenses .v2-list-header .nav-title {
    flex: 1 1 auto;
    color: #1e293b;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#pageExpenses .v2-list-header .nav-add-button {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    background: #f59e0b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
    border: none;
    position: relative;
}

#pageExpenses .v2-list-header .nav-add-button::before {
    content: '+';
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1;
}

#pageExpenses .v2-list-header .nav-add-button:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.5);
}

#pageExpenses .v2-content-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

/* ── Field + Add button layout ── */
.v2-field-with-action {
    display: flex;
    align-items: center;
    gap: 6px;
}

.v2-field-with-action .v2-label-modern {
    flex: 1;
}

.v2-add-btn {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #2b5797;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.v2-add-btn:hover {
    background: #2b5797;
    color: #fff;
    border-color: #2b5797;
}

#pageExpenses .v2-search-wrapper {
    padding: 12px 20px;
}

#pageExpenses .v2-search-wrapper input {
    width: 100%;
    padding: 12px 0;
    border: none;
    border-bottom: 2px solid #e2e8f0;
    border-radius: 0;
    font-size: 0.92rem;
    color: #1e293b;
    background: transparent;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

#pageExpenses .v2-search-wrapper input:focus {
    border-bottom-color: #2b5797;
    box-shadow: 0 2px 0 0 rgba(43, 87, 151, 0.15);
}

#pageExpenses .v2-search-wrapper input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

#pageExpenses {
    overflow: hidden !important;
    max-width: 100%;
}

#pageExpenses .page-region-content {
    min-height: calc(100vh - 60px);
    max-width: 100%;
    overflow: hidden;
}

#pageExpenses .cd-main-content {
    max-width: 100%;
    overflow: hidden;
}

#pageExpenses .cd-gallery {
    margin-top: 0;
    padding-top: 0 !important;
    max-width: 100%;
    overflow: hidden;
}

#pageExpenses .cd-gallery.filter-is-visible {
    padding-left: 220px;
}

#pageExpenses .v2-content-card {
    max-width: 100%;
    overflow: hidden;
}

#pageExpenses #listview_expenses {
    min-height: 200px;
    height: calc(100vh - 200px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* ── Expense list items ── */
#pageExpenses .notices,
#pageVendors .notices {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    gap: 16px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #ffffff;
    min-height: 65px;
}

#pageExpenses .notices:hover,
#pageVendors .notices:hover {
    background: #f8fafc;
}

#pageExpenses .v2-row-body,
#pageVendors .v2-row-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#pageExpenses .v2-row-main,
#pageVendors .v2-row-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

#pageExpenses .v2-row-title,
#pageVendors .v2-row-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#pageExpenses .v2-row-meta,
#pageVendors .v2-row-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

#pageExpenses .categoryColorList,
#pageVendors .categoryColorList {
    width: 6px;
    height: 32px;
    border-radius: 4px;
    flex-shrink: 0;
}

#pageExpenses .notices hr.list,
#pageVendors .notices hr.list {
    display: none;
}


/* ── Sidebar Filter (compact V2) ── */
#pageExpenses .cd-filter {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    border: 1px solid #e2e8f0;
    top: 0;
    left: 0;
    height: calc(100% - 70px);
    overflow-y: auto;
}

#pageExpenses .cd-filter.filter-is-visible {
    margin-left: 0;
}

#pageExpenses .cd-main-content.is-fixed .cd-filter {
    top: 0;
}

#pageExpenses .cd-filter form {
    padding: 10px 12px 30px;
}

#pageExpenses .cd-filter .cd-close {
    display: none;
}

#pageExpenses .cd-filter .cd-filter-block {
    margin-bottom: 2px;
    padding-bottom: 2px;
    border-bottom: 1px solid #f1f5f9;
}

#pageExpenses .cd-filter .cd-filter-block:last-child {
    border-bottom: none;
}

#pageExpenses .cd-filter .cd-filter-content {
    padding: 0;
    margin: 0;
}

#pageExpenses .cd-filter .cd-filter-block h5 {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    padding: 4px 0 2px 0;
    margin-bottom: 2px;
}

#pageExpenses .cd-filter .cd-filter-block h5::before {
    display: none;
}

#pageExpenses .cd-filter .cd-filter-block select {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 5px 10px;
    color: #1e293b;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

#pageExpenses .cd-filter .cd-filter-block select:focus {
    border-color: #2b5797;
    box-shadow: 0 0 0 2px rgba(43, 87, 151, 0.1);
    outline: none;
}

#pageExpenses .cd-filter input[type="date"] {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 5px 10px;
    color: #1e293b;
    font-size: 0.78rem;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    box-sizing: border-box;
    margin-bottom: 4px;
}

#pageExpenses .cd-filter .btnconfirm {
    background: #2b5797;
    color: #fff;
    border: none;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 4px;
    transition: all 0.2s ease;
    width: 100%;
}

#pageExpenses .cd-filter .btnconfirm:hover {
    background: #1e40af;
}

/* ── Filter trigger FAB ── */
#pageExpenses .cd-filter-trigger {
    position: fixed !important;
    bottom: 80px !important;
    right: 16px !important;
    left: auto !important;
    top: auto !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: #f59e0b !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
    text-indent: -9999px !important;
    text-decoration: none !important;
    z-index: 9998 !important;
    cursor: pointer !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35) !important;
    transition: all 0.3s ease !important;
    pointer-events: auto !important;
    isolation: isolate !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
}

#pageExpenses .cd-filter-trigger:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.45) !important;
}

#pageExpenses .cd-filter-trigger::after {
    content: '' !important;
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='21' x2='4' y2='14'/%3E%3Cline x1='4' y1='10' x2='4' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12' y2='3'/%3E%3Cline x1='20' y1='21' x2='20' y2='16'/%3E%3Cline x1='20' y1='12' x2='20' y2='3'/%3E%3Cline x1='1' y1='14' x2='7' y2='14'/%3E%3Cline x1='9' y1='8' x2='15' y2='8'/%3E%3Cline x1='17' y1='16' x2='23' y2='16'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    text-indent: 0 !important;
}

@media (min-width: 1024px) {
    #pageExpenses .cd-filter-trigger {
        display: none !important;
    }
}

/* ── Empty state ── */
#pageExpenses .v2-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

#pageExpenses .v2-empty-state-icon {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

#pageExpenses .v2-empty-state-icon svg {
    width: 42px;
    height: 42px;
    stroke: #2b5797;
}

#pageExpenses .v2-empty-state-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
}

#pageExpenses .v2-empty-state-text {
    font-size: 0.88rem;
    color: #64748b;
    max-width: 400px;
    line-height: 1.5;
    margin-bottom: 20px;
}

#pageExpenses .v2-empty-state .v2-btn-blue {
    padding: 10px 24px;
    border-radius: 12px;
    background: #2b5797;
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

#pageExpenses .v2-empty-state .v2-btn-blue:hover {
    background: #1e40af;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(43, 87, 151, 0.3);
}

/* ── Mobile responsive ── */
@media (max-width: 768px) {
    #pageExpenses .v2-list-header {
        height: 50px;
        min-height: 50px;
        padding: 0 10px;
        border-radius: 16px 16px 0 0;
    }

    #pageExpenses .v2-list-header .nav-title {
        font-size: 0.95rem;
    }

    #pageExpenses .v2-list-header .v2-header-icon {
        width: 28px;
        height: 28px;
    }

    #pageExpenses .v2-list-header .v2-header-icon svg {
        width: 18px;
        height: 18px;
    }

    #pageExpenses .v2-list-header .nav-add-button {
        width: 34px;
        height: 34px;
        font-size: 1.2rem;
    }

    #pageExpenses #listview_expenses {
        height: calc(100vh - 240px);
    }
}

/* ── Expense List Item — Premium Card ── */
#pageExpenses .expense-item.list-item-premium {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background 0.15s ease;
    overflow: hidden;
    box-sizing: border-box;
}

#pageExpenses .expense-item.list-item-premium>div {
    pointer-events: none;
}

#pageExpenses .expense-item.list-item-premium:hover {
    background: #f8fafc;
}

#pageExpenses .expense-item.list-item-premium:last-child {
    border-bottom: none;
}

/* ── List item icon circle ── */
#pageExpenses .list-item-icon.expense-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 12px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2b5797;
    flex-shrink: 0;
}

/* ── Category color bar ── */
#pageExpenses .expense-color-bar {
    width: 4px;
    height: 32px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* ── List item body ── */
#pageExpenses .list-item-body {
    flex: 1;
    min-width: 0;
}

#pageExpenses .list-item-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#pageExpenses .list-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    flex-wrap: wrap;
}

/* ── List item right ── */
#pageExpenses .list-item-right {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Expense-specific badges ── */
.expense-amount-badge {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: #1e40af;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid #bfdbfe;
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.expense-date-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 500;
}

.expense-date-pill svg {
    flex-shrink: 0;
    stroke: #94a3b8;
}

/* ═══════════════════════════════════════════════════════════════
   EXPENSE DETAILS — V2 Compact (page-specific overrides only)
   Standard v2-card / v2-label / v2-input rules provided
   by global compact selectors in v2-entity-details.css
   ═══════════════════════════════════════════════════════════════ */

/* ── Hidden utility ── */
#pageExpenseDetails .hideLi,
.expenseFrame .hideLi {
    visibility: hidden;
}

/* ── Frame padding ── */
#pageExpenseDetails,
#pageExpenseFiles,
#pageExpenseHistory {
    padding: 10px 10px 0 10px !important;
    min-height: auto !important;
}

/* ── Override listPremium frame reset ── */
.expenseFrame {
    display: none;
}

.expenseFrame.active {
    display: block;
}

/* ── Grid columns (appt-col-6 not in global CSS) ── */
.expenseFrame .appt-col-6 {
    flex: 1 1 50% !important;
    max-width: 50% !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
}

/* ── Row margins compact ── */
.expenseFrame .appt-row {
    margin-bottom: 6px !important;
}

.expenseFrame .appt-row:last-child {
    margin-bottom: 0 !important;
}

/* ── Total amount display ── */
.expenseFrame .expense-total-display {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: #2b5797 !important;
    margin: 0 !important;
    padding: 4px 0 !important;
}

/* ── Description editor ── */
.expenseFrame .jqte {
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.expenseFrame .jqte_editor {
    min-height: 150px !important;
    font-size: 0.85rem !important;
    padding: 10px !important;
}

/* ── Regarding / Vendor buttons ── */
.expenseFrame .erase-button-black {
    float: right;
    cursor: pointer;
}

/* ── Mobile responsive ── */
@media (max-width: 768px) {
    .expenseFrame .appt-row {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .expenseFrame .appt-col-4,
    .expenseFrame .appt-col-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   SHIPPING LIST — V2 Premium Design
   ═══════════════════════════════════════════════════════════════ */

#pageParameters .v2-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 54px;
    min-height: 54px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    gap: 14px;
    position: relative;
    margin-bottom: 12px;
}


#pageParameters .v2-list-header .v2-header-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    background: linear-gradient(135deg, #2b5797 0%, #1e40af 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#pageParameters .v2-list-header .v2-header-icon svg {
    stroke: #ffffff;
}

#pageParameters .v2-list-header .nav-title {
    flex: 1 1 auto;
    color: #1e293b;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#pageParameters .v2-list-header .nav-add-button {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    background: #f59e0b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
    border: none;
    position: relative;
}

#pageParameters .v2-list-header .nav-add-button::before {
    content: '+';
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1;
}

#pageParameters .v2-list-header .nav-add-button:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.5);
}

#pageParameters .v2-content-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

#pageParameters .v2-search-wrapper {
    padding: 12px 20px;
}

#pageParameters .v2-search-wrapper input {
    width: 100%;
    padding: 12px 18px;
    border: none;
    border-bottom: 2px solid #e2e8f0;
    border-radius: 0;
    font-size: 0.92rem;
    color: #1e293b;
    background: transparent;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

#pageParameters .v2-search-wrapper input:focus {
    border-bottom-color: #2b5797;
    box-shadow: 0 2px 0 0 rgba(43, 87, 151, 0.15);
}

#pageParameters .v2-search-wrapper input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

#pageParameters {
    max-width: 100%;
}

#pageParameters .page-region-content {
    min-height: calc(100vh - 60px);
    max-width: 100%;
}


#pageParameters #listview_shipping {
    min-height: 200px;
    height: calc(100vh - 200px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* ── Shipping list items ── */
#pageParameters .shipping-item.list-item-premium {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background 0.15s ease;
    overflow: hidden;
}

#pageParameters .shipping-item.list-item-premium>div {
    pointer-events: none;
}

#pageParameters .shipping-item.list-item-premium:hover {
    background: #f8fafc;
}

#pageParameters .shipping-item.list-item-premium:last-child {
    border-bottom: none;
}

/* ── Shipping icon circle ── */
#pageParameters .list-item-icon.shipping-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #dbeafe, #eff6ff);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2b5797;
    flex-shrink: 0;
}

#pageParameters .list-item-icon.shipping-icon svg {
    width: 20px;
    height: 20px;
}

/* ── List item body ── */
#pageParameters .list-item-body {
    flex: 1;
    min-width: 0;
}

#pageParameters .list-item-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#pageParameters .list-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    flex-wrap: wrap;
}

#pageParameters .shipping-description {
    font-size: 0.82rem;
    color: #64748b;
    font-weight: 400;
}

/* ── List item right ── */
#pageParameters .list-item-right {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Default badge ── */
.shipping-default-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    color: #16a34a;
    border: 1px solid #86efac;
}

.shipping-default-badge svg {
    width: 14px;
    height: 14px;
}


/* ═══════════════════════════════════════════════════════════════
   SHIPPING MODAL — V2 Premium Design
   ═══════════════════════════════════════════════════════════════ */

.v2-remodal.v2-shipping-modal {
    width: 520px !important;
    max-width: 95vw;
    padding: 0 !important;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    border: 1px solid #e2e8f0;
}

.v2-shipping-modal-row {
    display: flex;
    gap: 16px;
}

.v2-shipping-modal-row>.v2-shipping-modal-field {
    flex: 1;
    min-width: 0;
}

.v2-shipping-modal-header {
    background: #fff;
    padding: 20px 24px;
    color: #1e293b;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1.5px solid #f1f5f9;
}

.v2-shipping-modal-header-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
    color: #1e293b;
    letter-spacing: -0.01em;
}

/* Close button override */
.v2-remodal.v2-shipping-modal .remodal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    left: auto;
    width: 32px;
    height: 32px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 50%;
}

.v2-remodal.v2-shipping-modal .remodal-close:hover {
    background: #f1f5f9;
}

.v2-remodal.v2-shipping-modal .remodal-close:after {
    content: "×";
    font-family: Arial, sans-serif;
    font-size: 24px;
    line-height: 1;
    color: #94a3b8;
    display: block;
}

.v2-remodal.v2-shipping-modal .remodal-close:hover:after {
    color: #1e293b;
}

.v2-shipping-modal-body {
    padding: 24px 24px 16px;
}

.v2-shipping-modal-field {
    margin-bottom: 20px;
}

.v2-shipping-modal-field:last-child {
    margin-bottom: 0;
}

.v2-shipping-modal-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
}

.v2-shipping-modal-input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    color: #1e293b;
    background: #fafbff;
    transition: all 0.2s ease;
    outline: none;
    box-sizing: border-box;
}

.v2-shipping-modal-input:focus {
    border-color: #2b5797;
    box-shadow: 0 0 0 3px rgba(43, 87, 151, 0.1);
    background: #fff;
}

.v2-shipping-modal-select {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    color: #1e293b;
    background: #fafbff;
    transition: all 0.2s ease;
    outline: none;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
}

.v2-shipping-modal-select:focus {
    border-color: #2b5797;
    box-shadow: 0 0 0 3px rgba(43, 87, 151, 0.1);
    background-color: #fff;
}

.v2-shipping-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px 24px;
    border-top: 1px solid #f1f5f9;
}

.v2-shipping-modal-btn {
    padding: 9px 22px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    text-align: center;
}

.v2-shipping-modal-btn:active {
    transform: scale(0.97);
}

.v2-shipping-modal-btn-delete {
    background: #fef2f2;
    color: #dc2626;
    margin-right: auto;
}

.v2-shipping-modal-btn-delete:hover {
    background: #fee2e2;
    color: #b91c1c;
}

.v2-shipping-modal-btn-cancel {
    background: #f1f5f9;
    color: #475569;
}

.v2-shipping-modal-btn-cancel:hover {
    background: #e2e8f0;
    color: #1e293b;
}

.v2-shipping-modal-btn-save {
    background: #2b5797;
    color: #fff;
}

.v2-shipping-modal-btn-save:hover {
    background: #1d3e6e;
    box-shadow: 0 4px 12px rgba(43, 87, 151, 0.25);
}

@media (max-width: 480px) {
    .v2-remodal.v2-shipping-modal {
        width: 95vw !important;
    }

    .v2-shipping-modal-footer {
        flex-wrap: wrap;
    }

    .v2-shipping-modal-btn-delete {
        width: 100%;
        justify-content: center;
        margin-right: 0;
        order: 3;
    }
}

/* ────────────────────────────────────────────────
   Currency List V2 — Scoped to #pageParameters
   ──────────────────────────────────────────────── */

/* ── Currency list items ── */
#pageParameters .currency-item.list-item-premium {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background 0.15s ease;
    overflow: hidden;
}

#pageParameters .currency-item.list-item-premium>div {
    pointer-events: none;
}

#pageParameters .currency-item.list-item-premium:hover {
    background: #f8fafc;
}

#pageParameters .currency-item.list-item-premium:last-child {
    border-bottom: none;
}

/* ── Currency icon circle ── */
#pageParameters .list-item-icon.currency-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 12px;
    background: rgba(16, 185, 129, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #10b981;
    flex-shrink: 0;
}

#pageParameters .list-item-icon.currency-icon svg {
    width: 20px;
    height: 20px;
}

#pageParameters .currency-code {
    font-size: 12px;
    color: #94a3b8;
}

#pageParameters .currency-symbol-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 4px;
    padding: 1px 6px;
    margin-left: 8px;
}

/* ── Currency mobile responsive ── */
@media (max-width: 768px) {
    #pageParameters .currency-item.list-item-premium {
        padding: 10px 12px;
        gap: 10px;
    }

    #pageParameters .list-item-icon.currency-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }
}

/* ────────────────────────────────────────────────
   Payment List V2 — Scoped to #pageParameters
   ──────────────────────────────────────────────── */

/* ── Payment list items ── */
#pageParameters .payment-item.list-item-premium {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background 0.15s ease;
    overflow: hidden;
}

#pageParameters .payment-item.list-item-premium>div {
    pointer-events: none;
}

#pageParameters .payment-item.list-item-premium:hover {
    background: #f8fafc;
}

#pageParameters .payment-item.list-item-premium:last-child {
    border-bottom: none;
}

/* ── Payment icon circle ── */
#pageParameters .list-item-icon.payment-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #e0e7ff, #eef2ff);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4f46e5;
    flex-shrink: 0;
}

#pageParameters .list-item-icon.payment-icon svg {
    width: 20px;
    height: 20px;
}

/* ── Payment meta badges ── */
#pageParameters .payment-days-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    color: #4f46e5;
    background: rgba(79, 70, 229, 0.1);
    border-radius: 4px;
    padding: 1px 6px;
}

#pageParameters .payment-endmonth-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    background: #f1f5f9;
    border-radius: 4px;
    padding: 1px 6px;
    margin-left: 6px;
}

/* ── Payment mobile responsive ── */
@media (max-width: 768px) {
    #pageParameters .payment-item.list-item-premium {
        padding: 10px 12px;
        gap: 10px;
    }


    #pageParameters .list-item-icon.payment-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }
}

/* ────────────────────────────────────────────────
   VAT List V2 — Scoped to #pageParameters
   ──────────────────────────────────────────────── */

/* ── VAT list items ── */
#pageParameters .vat-item.list-item-premium {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background 0.15s ease;
    overflow: hidden;
}

#pageParameters .vat-item.list-item-premium>div {
    pointer-events: none;
}

#pageParameters .vat-item.list-item-premium:hover {
    background: #f8fafc;
}

#pageParameters .vat-item.list-item-premium:last-child {
    border-bottom: none;
}

/* ── VAT icon circle ── */
#pageParameters .list-item-icon.vat-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #dcfce7, #f0fdf4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #16a34a;
    flex-shrink: 0;
}

#pageParameters .list-item-icon.vat-icon svg {
    width: 20px;
    height: 20px;
}

/* ── VAT meta badges ── */
#pageParameters .vat-percent-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    color: #16a34a;
    background: rgba(22, 163, 74, 0.1);
    border-radius: 4px;
    padding: 1px 6px;
}

#pageParameters .vat-recargo-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    color: #d97706;
    background: rgba(217, 119, 6, 0.1);
    border-radius: 4px;
    padding: 1px 6px;
    margin-left: 6px;
}

#pageParameters .vat-code-text {
    font-size: 11px;
    color: #94a3b8;
    margin-left: 8px;
}

/* ── VAT rate display (right side) ── */
#pageParameters .vat-rate-display {
    font-size: 15px;
    font-weight: 700;
    color: #16a34a;
    white-space: nowrap;
}

/* ── VAT mobile responsive ── */
@media (max-width: 768px) {
    #pageParameters .vat-item.list-item-premium {
        padding: 10px 12px;
        gap: 10px;
    }

    #pageParameters .list-item-icon.vat-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }
}

/* ────────────────────────────────────────────────
   IRPF List V2 — Scoped to #pageParameters
   ──────────────────────────────────────────────── */

/* ── IRPF list items ── */
#pageParameters .irpf-item.list-item-premium {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background 0.15s ease;
    overflow: hidden;
}

#pageParameters .irpf-item.list-item-premium>div {
    pointer-events: none;
}

#pageParameters .irpf-item.list-item-premium:hover {
    background: #f8fafc;
}

#pageParameters .irpf-item.list-item-premium:last-child {
    border-bottom: none;
}

/* ── IRPF icon circle ── */
#pageParameters .list-item-icon.irpf-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ffe4e6, #fff1f2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e11d48;
    flex-shrink: 0;
}

#pageParameters .list-item-icon.irpf-icon svg {
    width: 20px;
    height: 20px;
}

/* ── IRPF meta badges ── */
#pageParameters .irpf-percent-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    color: #e11d48;
    background: rgba(225, 29, 72, 0.1);
    border-radius: 4px;
    padding: 1px 6px;
}

/* ── IRPF rate display (right side) ── */
#pageParameters .irpf-rate-display {
    font-size: 15px;
    font-weight: 700;
    color: #e11d48;
    white-space: nowrap;
}

/* ── IRPF mobile responsive ── */
@media (max-width: 768px) {
    #pageParameters .irpf-item.list-item-premium {
        padding: 10px 12px;
        gap: 10px;
    }


    #pageParameters .list-item-icon.irpf-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }
}

/* ────────────────────────────────────────────────
   Territory List V2 — Scoped to #pageParameters
   ──────────────────────────────────────────────── */

/* ── Territory list items ── */
#pageParameters .territory-item.list-item-premium {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background 0.15s ease;
    overflow: hidden;
}

#pageParameters .territory-item.list-item-premium>div {
    pointer-events: none;
}

#pageParameters .territory-item.list-item-premium:hover {
    background: #f8fafc;
}

#pageParameters .territory-item.list-item-premium:last-child {
    border-bottom: none;
}

/* ── Territory icon circle ── */
#pageParameters .list-item-icon.territory-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ccfbf1, #f0fdfa);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0d9488;
    flex-shrink: 0;
}

#pageParameters .list-item-icon.territory-icon svg {
    width: 20px;
    height: 20px;
}

/* ── Territory description text ── */
#pageParameters .territory-desc-text {
    font-size: 12px;
    color: #94a3b8;
}

/* ── Territory chevron ── */
#pageParameters .territory-chevron {
    flex-shrink: 0;
}

/* ── Territory mobile responsive ── */
@media (max-width: 768px) {
    #pageParameters .territory-item.list-item-premium {
        padding: 10px 12px;
        gap: 10px;
    }

    #pageParameters .list-item-icon.territory-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }
}

/* ────────────────────────────────────────────────
   Office List V2 — Scoped to #pageParameters
   ──────────────────────────────────────────────── */

/* ── Office list items ── */
#pageParameters .office-item.list-item-premium {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background 0.15s ease;
    overflow: hidden;
}

#pageParameters .office-item.list-item-premium>div {
    pointer-events: none;
}

#pageParameters .office-item.list-item-premium:hover {
    background: #f8fafc;
}

#pageParameters .office-item.list-item-premium:last-child {
    border-bottom: none;
}

/* ── Office icon circle ── */
#pageParameters .list-item-icon.office-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fef3c7, #fffbeb);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d97706;
    flex-shrink: 0;
}

#pageParameters .list-item-icon.office-icon svg {
    width: 20px;
    height: 20px;
}

/* ── Office meta ── */
#pageParameters .office-address-text {
    font-size: 12px;
    color: #64748b;
    margin-right: 8px;
}

#pageParameters .office-city-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    color: #d97706;
    background: rgba(217, 119, 6, 0.1);
    border-radius: 4px;
    padding: 1px 6px;
}

#pageParameters .office-phone-text {
    font-size: 12px;
    color: #64748b;
    white-space: nowrap;
}

/* ── Office mobile responsive ── */
@media (max-width: 768px) {
    #pageParameters .office-item.list-item-premium {
        padding: 10px 12px;
        gap: 10px;
    }


    #pageParameters .list-item-icon.office-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }
}

/* ────────────────────────────────────────────────
   Time Tracking List V2 — Scoped to #pageParameters
   ──────────────────────────────────────────────── */

/* ── Tracking list items ── */
#pageParameters .tracking-item.list-item-premium {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background 0.15s ease;
    overflow: hidden;
}

#pageParameters .tracking-item.list-item-premium>div {
    pointer-events: none;
}

#pageParameters .tracking-item.list-item-premium:hover {
    background: #f8fafc;
}

#pageParameters .tracking-item.list-item-premium:last-child {
    border-bottom: none;
}

/* ── Tracking icon circle ── */
#pageParameters .list-item-icon.tracking-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #dbeafe, #eff6ff);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    flex-shrink: 0;
}

#pageParameters .list-item-icon.tracking-icon svg {
    width: 20px;
    height: 20px;
}

/* ── Tracking meta badges ── */
#pageParameters .tracking-category-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    color: #2563eb;
    background: rgba(37, 99, 235, 0.1);
    border-radius: 4px;
    padding: 1px 6px;
}

#pageParameters .tracking-title-text {
    font-size: 12px;
    color: #64748b;
    margin-left: 6px;
}

/* ── Tracking price display ── */
#pageParameters .tracking-price-display {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
}

/* ── Tracking mobile responsive ── */
@media (max-width: 768px) {
    #pageParameters .tracking-item.list-item-premium {
        padding: 10px 12px;
        gap: 10px;
    }

    #pageParameters .list-item-icon.tracking-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }
}

/* ────────────────────────────────────────────────
   Document Numbering List V2 — Scoped to #pageParameters
   ──────────────────────────────────────────────── */

/* ── Document numbering list items ── */
#pageParameters .docno-item.list-item-premium {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background 0.15s ease;
    overflow: hidden;
}

#pageParameters .docno-item.list-item-premium>div {
    pointer-events: none;
}

#pageParameters .docno-item.list-item-premium:hover {
    background: #f8fafc;
}

#pageParameters .docno-item.list-item-premium:last-child {
    border-bottom: none;
}

/* ── Document numbering icon ── */
#pageParameters .list-item-icon.docno-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ede9fe, #f5f3ff);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7c3aed;
    flex-shrink: 0;
}

#pageParameters .list-item-icon.docno-icon svg {
    width: 20px;
    height: 20px;
}

/* ── Document numbering badges ── */
#pageParameters .docno-range-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    color: #7c3aed;
    background: rgba(124, 58, 237, 0.1);
    border-radius: 4px;
    padding: 1px 6px;
}

#pageParameters .docno-last-text {
    font-size: 12px;
    color: #64748b;
    margin-left: 6px;
}

#pageParameters .docno-code-badge {
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    background: #f1f5f9;
    border-radius: 4px;
    padding: 2px 8px;
    white-space: nowrap;
}

/* ── Help text in modal ── */
.v2-shipping-modal-help-text {
    background: #f8fafc;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
    border-left: 3px solid #2563eb;
}

.v2-shipping-modal-help-text p {
    font-size: 12px;
    color: #475569;
    line-height: 1.5;
    margin: 0 0 4px;
    text-align: left;
}

.v2-shipping-modal-help-text p:last-child {
    margin-bottom: 0;
}

/* ── Document numbering mobile responsive ── */
@media (max-width: 768px) {
    #pageParameters .docno-item.list-item-premium {
        padding: 10px 12px;
        gap: 10px;
    }

    #pageParameters .list-item-icon.docno-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Document Options — V2 Premium Design
   ═══════════════════════════════════════════════════════════════ */

#documentsOptions .docopt-wrapper {
    padding-top: 10px;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 5px;
    padding-right: 5px;
    box-sizing: border-box;
}

#documentsOptions .cd-gallery {
    margin-top: 10px;
    color: black;
}

#documentsOptions .page-control {
    width: 100%;
    height: 100%;
}

#documentsOptions #pageDocumentOptionsDetails {
    padding-left: 0;
}

/* ── Document Preview Template ── */
#documentsOptions #mainDocument {
    background-color: white;
    width: 100%;
    height: 100%;
    padding: 5px;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

#documentsOptions #imgLogo {
    width: 110px;
    height: 85px;
    vertical-align: text-top;
}

#documentsOptions .docopt-org-name {
    font-size: 14px;
    font-weight: bold;
}

#documentsOptions .docopt-title-table {
    width: 100%;
}

#documentsOptions .docopt-cell-left-half {
    text-align: left;
    width: 50%;
}

#documentsOptions .docopt-doc-title {
    font-size: 24px;
    font-weight: bold;
}

#documentsOptions .docopt-doc-date {
    font-size: 14px;
    font-weight: bold;
}

#documentsOptions #firstTableBorder {
    width: 100%;
    font-size: 11px;
    color: black;
}

#documentsOptions #firstTableBorder tr {
    width: 100%;
}

#documentsOptions #tableDetails {
    background: #e5e5e5;
    color: #000000;
    border: solid;
    font-size: 11px;
}

#documentsOptions #tableDetails>tr:first-child {
    font-size: 11px;
    font-weight: bold;
}

#documentsOptions .docopt-col-code {
    text-align: left;
    width: 16%;
}

#documentsOptions .docopt-col-desc {
    width: 28%;
}

#documentsOptions .docopt-col-qty {
    text-align: right;
    width: 10%;
}

#documentsOptions .docopt-col-price {
    text-align: right;
    width: 10%;
}

#documentsOptions .docopt-col-discount {
    text-align: right;
    width: 10%;
}

#documentsOptions .docopt-col-amount {
    text-align: right;
    width: 15%;
}

#documentsOptions .docopt-col-vat {
    text-align: right;
    width: 6%;
}

#documentsOptions .docopt-lines-table {
    width: 100%;
    color: black;
}

#documentsOptions .docopt-line-row {
    font-size: 11px;
    font-weight: normal;
}

#documentsOptions .docopt-notes-wrapper {
    width: 100%;
}

#documentsOptions .docopt-notes-cell {
    width: 64%;
    font-size: 11px;
}

#documentsOptions .docopt-total-cell {
    width: 36%;
}

#documentsOptions #tableTotal {
    background: #e5e5e5;
    color: #000000;
    border: solid;
    width: 100%;
}

#documentsOptions .docopt-bold {
    font-weight: bold;
}

#documentsOptions #notesAndInformations {
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
}

#documentsOptions .docopt-notes-header {
    font-size: 11px;
}

#documentsOptions .docopt-notes-header td {
    text-align: left;
    width: 100%;
}

#documentsOptions .docopt-notes-body {
    font-size: 10px;
}

#documentsOptions .docopt-notes-body td {
    text-align: left;
    height: 50px;
}

#documentsOptions .docopt-info-text {
    color: black;
}

#documentsOptions #footer {
    width: 100%;
}

#documentsOptions .docopt-footer-row {
    font-size: 11px;
}

#documentsOptions .docopt-footer-center {
    text-align: center;
    width: 100%;
}

#documentsOptions .docopt-footer-center-small {
    text-align: center;
    width: 100%;
    font-size: 11px;
}

#documentsOptions .docopt-remove-link {
    font-size: 13px;
}

#documentsOptions .docopt-page-cell {
    text-align: right;
    width: 50%;
    font-size: 11px;
}

#documentsOptions .docopt-showword-table {
    width: 100%;
}

#documentsOptions .docopt-showword-cell {
    text-align: right;
    width: 100%;
}

#documentsOptions .docopt-sc-input {
    width: 100%;
}

/* Progress bar (moved from inline) */
#documentsOptions .progress {
    position: relative;
    width: 400px;
    border: 1px solid #ddd;
    padding: 1px;
    border-radius: 3px;
    height: 10px;
}

#documentsOptions .bar {
    background-color: #B4F5B4;
    width: 0%;
    height: 6px;
    border-radius: 1px;
}

#documentsOptions .v2-unified-nav-block {
    position: relative;
    z-index: 10;
}

#documentsOptions .cd-main-content {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 20px;
    padding: 15px 0 0 0;
}

#documentsOptions .cd-gallery {
    flex: 1;
    width: auto;
    margin-top: 0;
}

#documentsOptions .cd-filter {
    position: static;
    width: 280px;
    height: auto;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    padding: 15px 20px;
    transform: none;
    visibility: visible;
}

#documentsOptions .cd-filter-trigger {
    display: none; /* Hide toggle button in desktop since sidebar is static */
}

/* ── Inline <style> CSS (moved from documentOptions.html) ── */
#documentsOptions div.gallery {
    margin: 8px;
    border: 1px solid #e0e4ea;
    border-radius: 10px;
    float: left;
    width: 180px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#documentsOptions div.gallery:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(43, 87, 151, 0.15);
    border-color: #a0b4d0;
}

#documentsOptions div.gallery img {
    width: 100%;
    height: auto;
    display: block;
}

#documentsOptions div.gallery .white {
    display: block;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    background: #f8fafc;
    border-top: 1px solid #e0e4ea;
}

#documentsOptions div.desc {
    padding: 10px;
    text-align: center;
    background: #f8fafc;
}

#documentsOptions .docopt-template-btn {
    display: inline-block;
    padding: 6px 20px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #2b5797, #3b7ddd);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.3px;
}

#documentsOptions .docopt-template-btn:hover {
    background: linear-gradient(135deg, #1e3f6f, #2b5797);
    box-shadow: 0 3px 8px rgba(43, 87, 151, 0.3);
}

#documentsOptions .docopt-btn-delete {
    display: inline-block;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #dc3545;
    background: #fff;
    border: 1.5px solid #dc3545;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
}

#documentsOptions .docopt-btn-delete:hover {
    color: #fff;
    background: #dc3545;
    box-shadow: 0 3px 8px rgba(220, 53, 69, 0.3);
}

#documentsOptions .document-items {
    background: #e5e5e5;
    border: solid 1px #440000;
    width: 100%;
    font-family: Times;
}

#documentsOptions .document-total {
    background: #e5e5e5;
    border: solid 1px black;
}

#documentsOptions .tr-total {
    text-align: right;
    width: 40%;
}

#documentsOptions .document-notes {
    text-align: left;
    padding-bottom: 30px;
    width: 100%;
    border-top: 2px solid #dddddd;
    border-bottom: 2px solid #dddddd;
}

#documentsOptions .document-to {
    font-size: 13px;
}

#documentsOptions table tbody tr td {
    border-right: 0;
    border-bottom: 0;
}

#documentsOptions .classHover:hover {
    border: 2px solid #1c98cc;
}

.helpico {
    background: url('../images/edit.png') left top;
    width: 24px;
    height: 24px;
    display: inline-block;
}

/* ── V2 Email modal textarea ── */
.docopt-email-body-v2 {
    min-height: 140px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.6;
}

/* ── V2 Email modal button overrides (remodal CSS reset) ── */
#modalConfigureEmail .v2-shipping-modal-btn-cancel.remodal-cancel {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: none !important;
    padding: 9px 22px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    width: calc(100% - 10px) !important;
}

#modalConfigureEmail .v2-shipping-modal-btn-cancel.remodal-cancel:hover {
    background: #e2e8f0 !important;
    color: #1e293b !important;
}

#modalConfigureEmail .v2-shipping-modal-btn-save.remodal-confirm {
    background: #2b5797 !important;
    color: #fff !important;
    border: none !important;
    padding: 9px 22px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    width: calc(100% - 10px) !important;
}

#modalConfigureEmail .v2-shipping-modal-btn-save.remodal-confirm:hover {
    background: #1d3e6e !important;
    box-shadow: 0 4px 12px rgba(43, 87, 151, 0.25) !important;
}

/* ── Reduce jqte toolbar in email modal ── */
/* Hide all tools first, then selectively show useful ones */
#modalConfigureEmail .jqte_tool {
    display: none !important;
}

/* Show: Format(1), Color(3), Bold(4), Italic(5), Underline(6), OL(7), UL(8), Link(18) */
#modalConfigureEmail .jqte_tool.jqte_tool_1,
#modalConfigureEmail .jqte_tool.jqte_tool_3,
#modalConfigureEmail .jqte_tool.jqte_tool_4,
#modalConfigureEmail .jqte_tool.jqte_tool_5,
#modalConfigureEmail .jqte_tool.jqte_tool_6,
#modalConfigureEmail .jqte_tool.jqte_tool_7,
#modalConfigureEmail .jqte_tool.jqte_tool_8,
#modalConfigureEmail .jqte_tool.jqte_tool_18 {
    display: inline-block !important;
}

/* Conflict blocks removed to ensure stable V2 layout */

/* ── V2 Sidebar Options (cd-filter) ── */
#documentsOptions .cd-filter h5 {
    font-size: 11px;
    font-weight: 700;
    color: #2b5797;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 14px 0 6px;
    margin: 0;
    border-top: 1.5px solid #f1f5f9;
}

#documentsOptions .cd-filter h5:first-child {
    border-top: none;
}

#documentsOptions .cd-filter h6 {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 4px;
}

#documentsOptions .cd-filter .cd-select select.filter {
    width: 100%;
    padding: 7px 10px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    color: #1e293b;
    background: #fafbff;
    transition: all 0.2s ease;
    outline: none;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

#documentsOptions .cd-filter .cd-select select.filter:focus {
    border-color: #2b5797;
    box-shadow: 0 0 0 3px rgba(43, 87, 151, 0.1);
    background-color: #fff;
}

#documentsOptions .cd-filter .cd-filter-content {
    margin-bottom: 10px;
}

#documentsOptions .docopt-sidebar-link,
#documentsOptions .docopt-sidebar-link-sm {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #2b5797;
    text-decoration: none;
    padding: 6px 0;
    transition: color 0.2s;
}

#documentsOptions .docopt-sidebar-link:hover,
#documentsOptions .docopt-sidebar-link-sm:hover {
    color: #1d3e6e;
}

#documentsOptions .docopt-btn-delete {
    width: 100%;
    padding: 9px 16px;
    border: 1.5px solid #fecaca;
    border-radius: 10px;
    background: #fef2f2;
    color: #dc2626;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

#documentsOptions .docopt-btn-delete:hover {
    background: #fee2e2;
    border-color: #fca5a5;
}

/* ── V2 Help Button in nav ── */
.docopt-help-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    color: #2b5797 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none !important;
    border: 1.5px solid #e2e8f0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.docopt-help-btn:hover {
    background: #2b5797 !important;
    color: #fff !important;
    border-color: #2b5797 !important;
}

/* ── V2 Help Modal Steps ── */
.docopt-help-body {
    padding: 16px 24px !important;
}

.docopt-help-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px;
    border-radius: 10px;
    margin-bottom: 8px;
    background: #f8fafc;
    transition: background 0.2s;
}

.docopt-help-step:last-child {
    margin-bottom: 0;
}

.docopt-help-step:hover {
    background: #f1f5f9;
}

.docopt-help-step-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2b5797, #1e40af);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.docopt-help-step-content {
    flex: 1;
    min-width: 0;
}

.docopt-help-step-title {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 4px;
}

.docopt-help-step-text {
    font-size: 13px;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

/* ── V2 Help Modal button override ── */
#modalDocHelp .v2-shipping-modal-btn-save.remodal-confirm {
    background: #2b5797 !important;
    color: #fff !important;
    border: none !important;
    padding: 9px 22px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    width: calc(100% - 10px) !important;
}

#modalDocHelp .v2-shipping-modal-btn-save.remodal-confirm:hover {
    background: #1d3e6e !important;
}

/* ── Mobile ── */
@media (max-width: 767px) {
    #documentsOptions .v2-unified-nav-block {
        border-radius: 10px;
    }
}

/* ═══════════════════════════════════════════════════════════
   V2 List Item — reusable card-row for list pages
   ═══════════════════════════════════════════════════════════ */
.v2-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid #eef0f5;
    cursor: pointer;
    transition: background 0.15s ease;
}

.v2-list-item:hover {
    background: #f0f4ff;
}

.v2-list-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, #eef2ff, #dbeafe);
    color: #2b5797;
    flex-shrink: 0;
}

.v2-list-item-content {
    flex: 1;
    min-width: 0;
}

.v2-list-item-title {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.v2-list-item-subtitle {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}

/* ── V2 Modal Link ─────────────────────────────────────── */
.v2-shipping-modal-link {
    display: inline-block;
    font-size: 13px;
    font-weight: 500;
    color: #2b5797;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease;
}

.v2-shipping-modal-link:hover {
    color: #1e3f6f;
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════
   V2 Empty State Card — premium centered state
   ═══════════════════════════════════════════════════════════ */
.v2-empty-state-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 30px;
    text-align: center;
}

.v2-empty-state-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: linear-gradient(135deg, #eef2ff, #dbeafe);
    margin-bottom: 18px;
}

.v2-empty-state-title {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 10px 0;
    letter-spacing: -0.3px;
}

.v2-empty-state-text {
    font-size: 1.05rem;
    color: #64748b !important;
    line-height: 1.6;
    margin-bottom: 24px;
    max-width: 320px;
}

/* ── Price Level Filters ─────────────────────────────── */
.v2-pricelevel-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 14px 14px 8px 14px;
}






/* ═══════════════════════════════════════════════════════════════
   PRICE LEVEL — MIRRORING SUBSCRIPTION STRUCTURE (V2 Premium)
   ═══════════════════════════════════════════════════════════════ */

/* ── Page Header ── */
#pageParameters .v2-list-header {
    height: 65px;
    min-height: 65px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: #ffffff;
    border-radius: 16px 16px 0 0;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════ */
/* PRICE LEVEL LIST — V2 Premium (exact mirror of Subscription)*/
/* ═══════════════════════════════════════════════════════════ */

/* ── Page Header ── */
#pageParameters .v2-price-level-mirror .v2-list-header {
    height: 65px;
    min-height: 65px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: #ffffff;
    border-radius: 16px 16px 0 0;
    border-bottom: 1px solid #e2e8f0;
    box-shadow: none;
    gap: 12px;
}

#pageParameters .v2-price-level-mirror .v2-list-header .v2-header-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #e8ecf1;
    border-radius: 50%;
}

#pageParameters .v2-price-level-mirror .v2-list-header .nav-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #2b5797;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.01em;
}

#pageParameters .v2-price-level-mirror .v2-list-header .nav-add-button {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2b5797 0%, #1e40af 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(43, 87, 151, 0.25);
    flex-shrink: 0;
    border: none;
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1;
    text-decoration: none;
}

#pageParameters .v2-price-level-mirror .v2-list-header .nav-add-button:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 18px rgba(43, 87, 151, 0.35);
}

#pageParameters .v2-price-level-mirror .v2-list-header .nav-add-button::before {
    content: "+";
}

/* ── Type Tabs ── */
#pageParameters .v2-price-level-mirror .cd-tab-filter-wrapper {
    height: auto;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid #e2e8f0;
    border-top: none;
    background: #f8fafc;
    position: relative;
    z-index: 2;
    margin: 0 0 10px 0;
}

#pageParameters .v2-price-level-mirror .pt-10 {
    padding-top: 0 !important;
}

#pageParameters .v2-price-level-mirror .activities-type-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    flex-wrap: wrap;
}

#pageParameters .v2-price-level-mirror .activities-type-tabs .activitiesType {
    height: 28px;
    padding: 0 14px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.8rem;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

#pageParameters .v2-price-level-mirror .activities-type-tabs .activitiesType:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #cbd5e1;
    color: #1e293b;
}

#pageParameters .v2-price-level-mirror .activities-type-tabs .activitiesType.selectedFilter {
    background: linear-gradient(135deg, #2b5797 0%, #1e40af 100%);
    color: #ffffff;
    border-color: #2b5797;
    box-shadow: 0 4px 12px rgba(43, 87, 151, 0.3);
    transform: none;
    text-decoration: none;
}

/* ── Search Bar ── */
#pageParameters .v2-price-level-mirror .v2-search-wrapper {
    padding: 12px 20px;
    background: #ffffff;
    border-radius: 0;
}

#pageParameters .v2-price-level-mirror .v2-search-wrapper input {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    border-bottom: 2px solid #e2e8f0;
    border-radius: 0;
    padding: 10px 0;
    color: #1e293b;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: none;
    box-sizing: border-box;
}

#pageParameters .v2-price-level-mirror .v2-search-wrapper input:focus {
    border-color: #2b5797;
    box-shadow: none;
    outline: none;
    background: transparent;
}

#pageParameters .v2-price-level-mirror .v2-search-wrapper input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

/* ── Main Content Card ── */
#pageParameters .v2-price-level-mirror .v2-content-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

/* ── Layout heights ── */
#pageParameters .v2-price-level-mirror {
    min-height: calc(100vh - 60px);
}

#pageParameters .v2-price-level-mirror #listview_pricelevel {
    min-height: 200px;
    height: calc(100vh - 200px);
    overflow-y: auto;
}

/* ── Gallery ── */
#pageParameters .v2-price-level-mirror .cd-gallery {
    margin-top: 0;
    padding-top: 0 !important;
}

/* ── Sidebar Filter (exact copy of #pageSubscription .cd-filter) ── */
#pageParameters .v2-price-level-mirror .cd-filter {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    border: 1px solid #e2e8f0;
    top: 0;
    left: 0;
    height: calc(100% - 70px);
    overflow-y: auto;
}

#pageParameters .v2-price-level-mirror .cd-filter.filter-is-visible {
    margin-left: 0;
}

#pageParameters .v2-price-level-mirror .cd-main-content.is-fixed .cd-filter {
    top: 0;
}

#pageParameters .v2-price-level-mirror .cd-filter form {
    padding: 15px 15px 40px;
}

#pageParameters .v2-price-level-mirror .cd-filter .cd-close {
    display: none;
}

#pageParameters .v2-price-level-mirror .cd-filter .cd-filter-block {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}

#pageParameters .v2-price-level-mirror .cd-filter .cd-filter-block:last-child {
    border-bottom: none;
}

#pageParameters .v2-price-level-mirror .cd-filter .cd-filter-block h5 {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    padding: 6px 0 4px 0;
    margin-bottom: 4px;
}

#pageParameters .v2-price-level-mirror .cd-filter .cd-filter-block h5::before {
    display: none;
}

#pageParameters .v2-price-level-mirror .cd-filter .cd-filter-block select {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 8px 12px;
    color: #1e293b;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

#pageParameters .v2-price-level-mirror .cd-filter .cd-filter-block select:focus {
    border-color: #2b5797;
    box-shadow: 0 0 0 3px rgba(43, 87, 151, 0.1);
    outline: none;
}

/* ── Filter trigger FAB ── */
#pageParameters .v2-price-level-mirror .cd-filter-trigger {
    position: fixed !important;
    bottom: 80px !important;
    right: 16px !important;
    left: auto !important;
    top: auto !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: #f59e0b !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
    text-indent: -9999px !important;
    text-decoration: none !important;
    z-index: 9998 !important;
    cursor: pointer !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35) !important;
    transition: all 0.3s ease !important;
    pointer-events: auto !important;
    isolation: isolate !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
}

#pageParameters .v2-price-level-mirror .cd-filter-trigger:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.45) !important;
}

#pageParameters .v2-price-level-mirror .cd-filter-trigger::after {
    content: '' !important;
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='21' x2='4' y2='14'/%3E%3Cline x1='4' y1='10' x2='4' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12' y2='3'/%3E%3Cline x1='20' y1='21' x2='20' y2='16'/%3E%3Cline x1='20' y1='12' x2='20' y2='3'/%3E%3Cline x1='1' y1='14' x2='7' y2='14'/%3E%3Cline x1='9' y1='8' x2='15' y2='8'/%3E%3Cline x1='17' y1='16' x2='23' y2='16'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    text-indent: 0 !important;
}

@media (min-width: 1024px) {
    #pageParameters .v2-price-level-mirror .cd-filter-trigger {
        display: none !important;
    }
}

/* ── Mobile Responsive (exact mirror of Subscription) ── */
@media (max-width: 768px) {
    #pageParameters .v2-price-level-mirror .v2-list-header {
        height: 52px;
        min-height: 52px;
        padding: 0 12px;
        border-radius: 12px 12px 0 0;
        margin: 12px 12px 0 12px !important;
        width: calc(100% - 24px) !important;
        border-bottom: none !important;
    }

    #pageParameters .v2-price-level-mirror .v2-list-header .nav-title {
        font-size: 0.95rem;
    }

    #pageParameters .v2-price-level-mirror .v2-list-header .v2-header-icon {
        width: 28px;
        height: 28px;
    }

    #pageParameters .v2-price-level-mirror .v2-list-header .v2-header-icon svg {
        width: 18px;
        height: 18px;
    }

    #pageParameters .v2-price-level-mirror .v2-list-header .nav-add-button {
        width: 32px;
        height: 32px;
    }

    #pageParameters .v2-price-level-mirror .cd-tab-filter-wrapper {
        border-radius: 0 !important;
        margin: 0 12px !important;
        width: calc(100% - 24px) !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }

    #pageParameters .v2-price-level-mirror .activities-type-tabs {
        padding: 4px 12px 12px 12px;
        gap: 6px;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    #pageParameters .v2-price-level-mirror .activities-type-tabs::-webkit-scrollbar {
        display: none;
    }

    #pageParameters .v2-price-level-mirror .activities-type-tabs .activitiesType {
        height: 30px;
        padding: 0 12px;
        font-size: 0.75rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    #pageParameters .v2-price-level-mirror .v2-search-wrapper {
        padding: 8px 10px;
    }

    #pageParameters .v2-price-level-mirror .v2-search-wrapper input {
        padding: 10px 14px;
        font-size: 0.9rem;
        border-radius: 10px;
    }

    #pageParameters .v2-price-level-mirror .v2-content-card {
        margin: 0 12px 12px 12px !important;
        width: calc(100% - 24px) !important;
        border-radius: 0 0 12px 12px !important;
    }
}

/* ── Price Level List Item — Premium Card (mirrors Subscription) ── */
#pageParameters .pricelevel-item.list-item-premium {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background 0.15s ease;
}

#pageParameters .pricelevel-item.list-item-premium>div {
    pointer-events: none;
}

#pageParameters .pricelevel-item.list-item-premium:hover {
    background: #f8fafc;
}

#pageParameters .pricelevel-item.list-item-premium:last-child {
    border-bottom: none;
}

/* ── List item icon circle ── */
#pageParameters .list-item-icon.pl-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #dbeafe, #eff6ff);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2b5797;
    flex-shrink: 0;
}

/* ── List item body ── */
#pageParameters .v2-price-level-mirror .list-item-body {
    flex: 1;
    min-width: 0;
}

#pageParameters .v2-price-level-mirror .list-item-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#pageParameters .v2-price-level-mirror .list-item-subtitle {
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── List item right ── */
#pageParameters .v2-price-level-mirror .list-item-right {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Price / Discount badges ── */
.pl-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.pl-badge--price {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.pl-badge--discount {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    color: #065f46;
    border: 1px solid #a7f3d0;
}

/* ── Price Level empty state description ── */
#pageParameters .v2-price-level-mirror .pl-empty-desc {
    font-size: 0.88rem;
    line-height: 1.6;
    color: #64748b;
    max-width: 460px;
    margin: 8px auto 16px auto;
    text-align: center;
}

/* ════════════════════════════════════════════════════════════
   V2 VCard Import Page
════════════════════════════════════════════════════════════ */

/* ── Filters bar ── */
.v2-filters-bar {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding: 12px 15px 10px;
    background: #fff;
    border-bottom: 1px solid #e8edf3;
    flex-wrap: wrap;
}

.v2-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 150px;
}

.v2-filter-group--grow {
    flex: 1;
    min-width: 180px;
}

.v2-filter-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
}

.v2-filter-select {
    height: 36px;
    padding: 0 10px;
    border: 1px solid #dde3ec;
    border-radius: 8px;
    font-size: 0.82rem;
    color: #1e293b;
    background: #f8fafc;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
}

.v2-filter-select:focus {
    border-color: #2b5797;
}

/* ── Results bar ── */
.v2-list-results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 15px;
    background: #f8fafc;
    border-bottom: 1px solid #e8edf3;
}

.v2-results-count {
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
}

.v2-results-action {
    font-size: 0.8rem;
    font-weight: 600;
    color: #2b5797;
    cursor: pointer;
    text-decoration: none;
}

.v2-results-action:hover {
    text-decoration: underline;
}

/* ── Contact row ── */
.v2-vcard-contact-row {
    border-bottom: 1px solid #f0f4f8;
}

.v2-vcard-checkbox-label {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    cursor: pointer;
    gap: 0;
    width: 100%;
    box-sizing: border-box;
    transition: background 0.15s;
}

.v2-vcard-checkbox-label:hover {
    background: #f8fafc;
}

.v2-vcard-checkbox {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: #2b5797;
    cursor: pointer;
    margin-right: 12px;
}

.v2-vcard-contact-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.v2-vcard-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid #dde3ec;
}

.v2-vcard-avatar-placeholder {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2b5797, #4a90d9);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 700;
    flex-shrink: 0;
}

.v2-vcard-contact-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.v2-vcard-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.v2-vcard-org {
    font-size: 0.76rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Empty state ── */
/* ── VCard page body — white fill prevents dark frame bleed ── */
.v2-vcard-body {
    background: #ffffff;
    min-height: calc(100vh - 130px);
}

.v2-vcard-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px 60px;
    background: #ffffff;
    min-height: calc(100vh - 200px);
}

.v2-vcard-empty-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 380px;
    gap: 12px;
}

.v2-vcard-empty-icon {
    width: 88px;
    height: 88px;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.v2-vcard-empty-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.v2-vcard-empty-desc {
    font-size: 0.84rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

/* ── Primary button ── */
.v2-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: linear-gradient(135deg, #2b5797, #1a3d6e);
    color: #fff;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.2s, transform 0.15s;
    margin-top: 4px;
}

.v2-btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    color: #fff;
}

/* ── VCard header: ensure border-radius always ── */
.v2-vcard-header {
    border-radius: 16px 16px 0 0 !important;
    height: 65px;
    min-height: 65px;
    padding: 0 20px;
}

/* ── VCard: inline selects in tab bar ── */
.vcard-inline-select {
    height: 28px;
    padding: 0 10px;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    background: #ffffff;
    font-size: 0.8rem;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    outline: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    -webkit-appearance: none;
    appearance: none;
}

.vcard-inline-select:focus {
    border-color: #2b5797;
}

.vcard-tab-sep {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.vcard-count {
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
}

/* ── v2-btn-primary as <button> ── */
button.v2-btn-primary {
    border: none;
    cursor: pointer;
}

/* ═══════════════════════════════════════════════
   SUPPORT EMAIL PAGE — V2
   ═══════════════════════════════════════════════ */

/* Help quick-links */
.support-links-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.support-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    background: #f1f5f9;
    color: #2b5797;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.support-link:hover {
    background: #2b5797;
    color: #ffffff;
    text-decoration: none;
}

.support-link svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Language notice */
.support-lang-notice {
    font-size: 0.82rem;
    color: #4caf50;
    font-weight: 600;
    background: rgba(76, 175, 80, 0.08);
    border-left: 3px solid #4caf50;
    padding: 8px 14px;
    border-radius: 0 8px 8px 0;
    margin: 0 0 8px 0;
}

/* Form container */
.support-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 860px;
}

/* Field wrapper */
.support-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.support-field-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}

/* Input */
.support-input {
    height: 40px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 0.9rem;
    color: #1e293b;
    background: #f8fafc;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    box-sizing: border-box;
}

.support-input:focus {
    border-color: #2b5797;
    box-shadow: 0 0 0 3px rgba(43, 87, 151, 0.1);
    background: #fff;
}

/* Textarea */
.support-textarea {
    min-height: 220px;
    resize: vertical;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 0.9rem;
    color: #1e293b;
    background: #f8fafc;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    line-height: 1.6;
}

.support-textarea:focus {
    border-color: #2b5797;
    box-shadow: 0 0 0 3px rgba(43, 87, 151, 0.1);
    background: #fff;
}

/* Counter row */
.support-counter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.support-counter {
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 500;
}

/* ═══════════════════════════════════════════════
   SUPPORT PAGE — SCOPED OVERRIDES (#pageParameters)
   ═══════════════════════════════════════════════ */

/* 1) Content card: add internal padding */
#pageParameters .v2-content-card:has(.support-form),
#pageParameters .v2-content-card {
    padding: 24px 28px;
}

/* 2) Header top border-radius (matches the card) */
#pageParameters .v2-vcard-header {
    border-radius: 16px 16px 0 0 !important;
}

/* 3) Send button — same amber orange as #pageParameters nav-add-button */
@keyframes pulse-amber {
    0% {
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
    }

    50% {
        box-shadow: 0 4px 20px rgba(245, 158, 11, 0.6);
    }

    100% {
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35);
    }
}

#pageParameters .v2-list-header #support-send-btn {
    width: calc(100% - 10px) !important;
    height: 36px !important;
    padding: 0 20px !important;
    border-radius: 8px !important;
    background: #f59e0b !important;
    color: #ffffff !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35) !important;
    border: none !important;
    cursor: pointer !important;
    animation: pulse-amber 2s ease-in-out infinite !important;
    transition: opacity 0.2s, transform 0.2s !important;
}

#pageParameters .v2-list-header #support-send-btn::before {
    content: '' !important;
}

#pageParameters .v2-list-header #support-send-btn:hover {
    opacity: 0.9 !important;
    transform: translateY(-1px) !important;
    animation: none !important;
    text-decoration: none !important;
    color: #fff !important;
}

/* 4) Apple relay email warning */
.support-apple-warning {
    display: none;
    align-items: flex-start;
    gap: 10px;
    background: rgba(255, 149, 0, 0.08);
    border: 1.5px solid rgba(255, 149, 0, 0.4);
    border-radius: 10px;
    padding: 12px 20px;
    margin-top: -4px;
}

.support-apple-warning.visible {
    display: flex;
}

.support-apple-warning-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: #f59e0b;
    margin-top: 1px;
}

.support-apple-warning-text {
    font-size: 0.82rem;
    color: #92400e;
    line-height: 1.5;
    font-weight: 500;
}

/* ── Utility Classes ── */
.hide,
.hideLi {
    display: none !important;
}

/* ── Premium Empty State ── */
.v2-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 40px;
    background: #ffffff !important;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    margin: 20px auto;
    max-width: 500px;
    animation: fadeInScale 0.5s ease-out;
    z-index: 100 !important;
}

.auth-header-fix {
    color: #2b5797 !important;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.v2-empty-state-icon,
.empty-icon-wrapper {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    position: relative;
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 1), 0 4px 12px rgba(0, 0, 0, 0.05);
}

.v2-empty-state-icon img,
.empty-icon-wrapper img {
    width: 56px;
    height: 56px;
    opacity: 0.85;
}

.v2-empty-state-title,
.v2-empty-state h2,
#activityTypeTitle {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1e293b !important;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.v2-empty-state-text,
.v2-empty-state p {
    font-size: 1rem;
    line-height: 1.6;
    color: #64748b;
    margin-bottom: 32px;
    max-width: 400px;
}

.v2-empty-state-btn,
.btn-primary-v2 {
    background: linear-gradient(135deg, #2b5797 0%, #1e40af 100%);
    color: #ffffff;
    padding: 12px 28px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(43, 87, 151, 0.25);
    text-decoration: none;
}

.v2-empty-state-btn:hover,
.btn-primary-v2:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(43, 87, 151, 0.35);
}

@media (max-width: 768px) {
    .v2-empty-state {
        padding: 40px 20px;
        margin: 12px;
        border-radius: 16px;
    }

    .v2-empty-state-title,
    .v2-empty-state h2 {
        font-size: 1.25rem;
    }

    .v2-empty-state-text,
    .v2-empty-state p {
        font-size: 0.9rem;
    }
}




/* ============================================================
   ACCOUNTANT DASHBOARD V2
   ============================================================ */

.accountant-company-header {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.accountant-hero-img {
    width: 100px;
    height: auto;
    flex-shrink: 0;
    object-fit: contain;
}

.accountant-selector-block {
    flex: 1;
    min-width: 200px;
}

.accountant-select-wrapper {
    margin-top: 8px;
    max-width: 400px;
}

/* Actions grid */
.accountant-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.accountant-action-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: #ffffff;
    border: 1px solid #e8edf5;
    border-radius: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
    position: relative;
}

.accountant-action-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.09);
    transform: translateY(-2px);
    border-color: #c8d6ef;
    text-decoration: none;
}

.accountant-action-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.accountant-action-icon svg {
    stroke-width: 1.8;
}

.accountant-icon-blue {
    background: #eff6ff;
    color: #2563eb;
}

.accountant-icon-blue svg {
    stroke: #2563eb;
}

.accountant-icon-purple {
    background: #f5f3ff;
    color: #7c3aed;
}

.accountant-icon-purple svg {
    stroke: #7c3aed;
}

.accountant-icon-orange {
    background: #fff7ed;
    color: #ea580c;
}

.accountant-icon-orange svg {
    stroke: #ea580c;
}

.accountant-icon-teal {
    background: #f0fdfa;
    color: #0d9488;
}

.accountant-icon-teal svg {
    stroke: #0d9488;
}

.accountant-icon-indigo {
    background: #eef2ff;
    color: #4338ca;
}

.accountant-icon-indigo svg {
    stroke: #4338ca;
}

.accountant-icon-green {
    background: #f0fdf4;
    color: #16a34a;
}

.accountant-icon-green svg {
    stroke: #16a34a;
}

.accountant-icon-red {
    background: #fef2f2;
    color: #dc2626;
}

.accountant-icon-red svg {
    stroke: #dc2626;
}

.accountant-icon-dark {
    background: #f1f5f9;
    color: #334155;
}

.accountant-icon-dark svg {
    stroke: #334155;
}

.accountant-action-content {
    flex: 1;
}

.accountant-action-title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 3px;
    line-height: 1.3;
}

.accountant-action-desc {
    font-size: 12px;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}

.accountant-action-arrow {
    color: #94a3b8;
    font-size: 14px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.accountant-action-card:hover .accountant-action-arrow {
    transform: translateX(3px);
    color: #3b82f6;
}

@media (max-width: 768px) {
    .accountant-company-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .accountant-hero-img {
        width: 72px;
    }

    .accountant-actions-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   ACCOUNTANT DASHBOARD V2 — aligned with v2-kpi-card system
   ============================================================ */

/* Selector card */
.accountant-selector-card {
    padding: 16px 20px !important;
}

.accountant-company-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.accountant-hero-img {
    width: 64px;
    height: auto;
    flex-shrink: 0;
    opacity: .9;
}

.accountant-select-col {
    flex: 1;
    min-width: 180px;
}

/* Action KPI cards */
.accountant-kpi-card {
    cursor: pointer;
    transition: box-shadow .18s, transform .15s;
    text-decoration: none !important;
    position: relative;
}

.accountant-kpi-card:hover {
    box-shadow: 0 4px 18px rgba(0, 0, 0, .1);
    transform: translateY(-1px);
}

.accountant-kpi-desc {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 3px;
    line-height: 1.4;
}

.accountant-kpi-arrow {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #cbd5e1;
    font-size: 13px;
    transition: color .15s, right .15s;
}

.accountant-kpi-card:hover .accountant-kpi-arrow {
    color: #3b82f6;
    right: 12px;
}

/* Extra kpi-icon colours not in dashboard */
.kpi-icon.icon-teal {
    background: #f0fdfa;
    color: #0d9488;
}

.kpi-icon.icon-indigo {
    background: #eef2ff;
    color: #4338ca;
}

.kpi-icon.icon-green {
    background: #f0fdf4;
    color: #16a34a;
}

/* ============================================================
   ACCOUNTANT DASHBOARD — XL Cards + Disconnect Button
   ============================================================ */

/* Disconnect button — visible text button */
.accountant-disconnect-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: #ef4444;
    color: #ffffff !important;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s;
    white-space: nowrap;
}

.accountant-disconnect-btn:hover {
    background: #dc2626;
}

.accountant-disconnect-btn i {
    font-size: 14px;
    color: #ffffff !important;
}

/* XL Grid — 2 colonnes */
.accountant-xl-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

/* XL Card */
.accountant-xl-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 22px;
    background: #ffffff;
    border: 1px solid #e8edf5;
    border-radius: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: box-shadow .2s, transform .15s, border-color .2s;
}

.accountant-xl-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, .09);
    transform: translateY(-2px);
    border-color: #c8d6ef;
    text-decoration: none;
}

/* XL Icon badge */
.accountant-xl-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 22px;
}

.accountant-icon-blue {
    background: #eff6ff;
    color: #2563eb;
}

.accountant-icon-purple {
    background: #f5f3ff;
    color: #7c3aed;
}

.accountant-icon-orange {
    background: #fff7ed;
    color: #ea580c;
}

.accountant-icon-indigo {
    background: #eef2ff;
    color: #4338ca;
}

.accountant-icon-green {
    background: #f0fdf4;
    color: #16a34a;
}

.accountant-icon-red {
    background: #fef2f2;
    color: #dc2626;
}

.accountant-icon-dark {
    background: #f1f5f9;
    color: #334155;
}

/* XL Text */
.accountant-xl-body {
    flex: 1;
}

.accountant-xl-title {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
}

.accountant-xl-desc {
    font-size: 12px;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}

/* Responsive */
@media (max-width: 768px) {
    .accountant-xl-grid {
        grid-template-columns: 1fr;
    }

    .accountant-xl-card {
        padding: 15px 16px;
    }

    .accountant-xl-icon {
        width: 42px;
        height: 42px;
        font-size: 18px;
    }
}

/* Accountant XL gap — margin between selector and action cards */
.accountant-xl-gap {
    margin-top: 20px;
}

/* Accountant disconnect button — override v2-entity-details.css constraints */
.v2-nav-header .accountant-disconnect-btn,
.accountant-disconnect-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: auto !important;
    min-height: 34px !important;
    padding: 6px 16px !important;
    background: #ef4444 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    min-width: 110px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    line-height: 1.4 !important;
}

.v2-nav-header .accountant-disconnect-btn:hover,
.accountant-disconnect-btn:hover {
    background: #dc2626 !important;
}

.v2-nav-header .accountant-disconnect-btn i,
.accountant-disconnect-btn i {
    color: #ffffff !important;
    font-size: 14px !important;
}

.v2-nav-header .accountant-disconnect-btn span,
.accountant-disconnect-btn span {
    color: #ffffff !important;
    font-size: 13px !important;
    line-height: 1 !important;
}

/* Accountant selector card — compact version */
.accountant-selector-card {
    padding: 12px 18px !important;
}

.accountant-selector-card .v2-chart-title {
    margin-bottom: 8px !important;
    font-size: 13px !important;
    padding-bottom: 8px !important;
}

.accountant-company-row {
    margin-top: 0 !important;
    gap: 14px !important;
}

.accountant-hero-img {
    width: 48px !important;
}

.accountant-select-col .v2-select-wrapper {
    margin-top: 0 !important;
}


/* ═══════════════════════════════════════════════════════════
   ACTIVITY FILTERS — Account / Contact / Lead detail pages
   (Same style as activitiesList page filters)
   ═══════════════════════════════════════════════════════════ */

.v2-filter-tags,
.lead-activity-filters {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: transparent;
    flex-wrap: wrap;
}

a.filterActivities {
    height: 28px;
    padding: 0 14px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.8rem;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

a.filterActivities:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #cbd5e1;
    color: #1e293b;
}

a.filterActivities.active {
    background: linear-gradient(135deg, #2b5797 0%, #1e40af 100%);
    color: #ffffff;
    border-color: #2b5797;
    box-shadow: 0 4px 12px rgba(43, 87, 151, 0.3);
    transform: none;
    text-decoration: none;
}

a.filterActivities.active:hover {
    background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
    color: #ffffff;
}

.ticket-progress-badge {
    display: inline-block;
    color: #fff;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 700;
    margin-left: 4px;
}

.v2-tag-list-wrapper {
    margin-left: 50px;
    float: left;
}

.tickets-header-life-ring {
    font-size: 22px;
    color: #2b5797;
}

.v2-tag-dropdown-svg {
    min-width: 12px;
}

.transparent-border {
    border: 1px solid #cbd5e1;
    background: transparent;
}

.v2-tag-filter-check.active {
    display: block;
}

/* ── Generic Action Buttons (Tables) ── */
.systemUserFrame .action-buttons button,
.systemUserFrame .delete-btn,
.systemUserFrame .config-btn,
.delete-btn,
.config-btn {
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin-right: 4px;
}

.systemUserFrame .delete-btn,
.delete-btn {
    background: #fef2f2 !important;
    color: #ef4444 !important;
    border: 1px solid #fecaca !important;
}

.systemUserFrame .delete-btn:hover,
.delete-btn:hover {
    background: #fee2e2 !important;
    border-color: #f87171 !important;
}

.systemUserFrame .config-btn,
.config-btn {
    background: #f0fdf4 !important;
    color: #16a34a !important;
    border: 1px solid #bbf7d0 !important;
}

.systemUserFrame .config-btn:hover,
.config-btn:hover {
    background: #dcfce7 !important;
    border-color: #86efac !important;
}


/* ═══════════════════════════════════════════════════════════
   GLOBAL UNIFICATION: 10PX ISLAND MARGIN EVERYWHERE! (MOBILE ONLY)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    #container .page-region-content .v2-list-header,
    #container #pageActivities .activities-list-header,
    #container #pageTickets .tickets-list-header,
    #container .page-region-content .vendors-list-header {
        margin: 12px 10px 0 10px !important;
        width: calc(100% - 20px) !important;
        background: #ffffff !important;
        border-radius: 12px 12px 0 0 !important;
        border-bottom: none !important;
    }

    #container .page-region-content .cd-tab-filter-wrapper {
        margin: 0 10px !important;
        width: calc(100% - 20px) !important;
        border-radius: 0 !important;
        border-bottom: none !important;
    }

    #container .page-region-content .v2-content-card,
    #container .page-region-content .vendors-content-card {
        margin: 0 10px 12px 10px !important;
        width: calc(100% - 20px) !important;
        border-radius: 0 0 12px 12px !important;
    }
}