/* ========= Collisions Enhanced (scoped via .collisions-root) ========= */
.user-profile {
    position: relative;
    display: inline-block;
}

.profile-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #fff;
    padding: 0.5rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 1000;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #f5fff5 !important;
}

.table-striped tbody tr:has(td:empty) {
    display: none !important;
}

.table-striped-not-quickgrid tbody tr:nth-of-type(odd) {
    background-color: #f5fff5 !important;
}

.initials-circle {
    width: 40px;
    height: 40px;
    background-color: #0078D4;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    font-weight: 700;
    font-size: 1rem;
    line-height: 40px;
    cursor: pointer;
    box-sizing: border-box;
    display: inline-block;
}

.account-display {
    font-size: 1.5rem;
    color: #444;
    padding-right: 1rem;
}

.top-row {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    background-color: #f8f9fa;
}

.account-info {
    text-align: center;
    flex-grow: 1;
}

.top-border {
    margin-top: 20px;
}

/* ===================== Root variables / layouts ===================== */
.collisions-root {
    /* === 10-column grid for Collisions with User + Phone at the end ===
       [Type | Status | Dealership | Address | Txn | Loan | Vehicle | Last Activity | User | Phone] */
    --collision-cols: 132px /* Type */
    150px /* Status */
    1.25fr /* Dealership */
    2.5fr /* Address */
    140px /* Txn Id */
    140px /* Loan Date */
    1.2fr /* Vehicle */
    170px /* Last Activity */
    48px /* User (initials circle) */
    76px; /* Phone (word fits) */

    --row-x-pad: 1.25rem; /* horizontal padding used by header & row button */
    --list-header-accent: #0d6efd;
    /* Associated rows (8 columns). Last column is the phone icon */
    --assoc-cols: 80px 140px 1.15fr 2fr 180px 160px 1.15fr 120px 36px;
}

/* ===================== Category buttons ===================== */
.btn-category {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid #dee2e6;
    background-color: #fff;
    padding: .5rem .75rem;
    border-radius: .5rem;
    box-shadow: 0 .1rem .2rem rgba(0,0,0,.05);
}

.btn-category:hover {
    background-color: #f8f9fa;
}

.btn-category.active {
    outline: 2px solid var(--bs-primary);
    background-color: #eef5ff;
}

.btn-category .icon {
    font-size: 1.15rem;
    line-height: 1;
}

.btn-category .icon.critical {
    color: #dc3545;
}

.btn-category .icon.hot {
    color: #fd7e14;
}

.btn-category .icon.warm {
    color: #6cc3ff;
}

.btn-category .icon.all {
    color: #6c757d;
}

.btn-category .label {
    font-weight: 600;
}

/* ===================== Main list header ===================== */
.list-header-modern {
    /* Header and rows will use the SAME left/right padding. No chevron space here. */
    padding: .5rem var(--row-x-pad) 0 var(--row-x-pad);
    border-bottom: 1px solid rgba(0,0,0,.06);
    margin-bottom: .25rem;
}

.list-header-modern .list-grid {
    display: grid;
    grid-template-columns: var(--collision-cols);
    align-items: center;
    column-gap: 0.75rem;
    margin-right: 0 !important; /* no artificial margins; chevron is absolute in rows */
}

.list-header-modern .list-grid > div {
    font-weight: 700;
    color: var(--list-header-accent);
    text-transform: uppercase;
    font-size: 0.95rem;
    letter-spacing: .02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    text-align: left;
    justify-self: start;
}
/* Ensure "Phone" header shows fully */
.list-header-modern .list-grid > div:last-child {
    overflow: visible;
    text-overflow: clip;
}

/* ===================== Main list rows ===================== */
.list-grid {
    display: grid;
    grid-template-columns: var(--collision-cols);
    grid-auto-flow: column;
    align-items: center;
    column-gap: 0.75rem;
}

.list-grid > * {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.list-grid a {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Accordion header (row) padding — EXACTLY matches header’s left/right padding */
.accordion-button.row-line {
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: var(--row-x-pad);
    padding-right: var(--row-x-pad); /* no extra chevron space in flow */
    position: relative; /* for absolute chevron */
    white-space: nowrap;
}

/* === Chevron: remove from layout; place absolutely so it never steals width === */
.accordion-button.row-line::after,
.accordion-button::after {
    display: block !important;
    content: "";
    background-image: var(--bs-accordion-btn-icon);
    background-repeat: no-repeat;
    background-size: 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
    position: absolute;
    right: var(--row-x-pad); /* hugs the right padding */
    left: .05rem;
    top: 50%;
    transform: translateY(-50%); /* centered vertically */
}

.accordion-button:not(.collapsed)::after {
    background-image: var(--bs-accordion-btn-active-icon);
    transform: translateY(-50%) rotate(180deg);
}

/* Inner row grids: do NOT reserve space; the chevron is absolute now */
.accordion-button .list-grid,
.accordion-button .assoc-grid {
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 0 !important;
}

/* ===== Pills / icons ===== */
.badge {
    white-space: nowrap;
}

.row-line .badge .bi {
    font-size: 1rem;
    vertical-align: -1px;
}

.row-line .badge.rounded-pill {
    padding: .3rem .6rem;
}

.row-line .badge {
    font-size: 0.95rem;
}

.collision-type-pill {
    padding: .28rem .56rem;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}

.collision-type-pill .collision-type-icon {
    font-size: 1rem;
    vertical-align: -1px;
}

.collision-type-pill .bi {
    line-height: 1;
    font-size: 1rem;
    display: inline-block;
    vertical-align: middle;
}


.collision-expanded {
    background-color: #f8fafc; /* subtle contrast against table bg */
    border: 1px solid #dbe3ec;
    border-right: 4px solid #3b82f6; /* accent edge */
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    margin: 8px 0 16px 0; /* spacing from surrounding rows */
    padding: 12px 16px; /* breathing room for content */
    position: relative; /* required for ::after */
    z-index: 0;
}

.collision-expanded::after {
    content: "";
    position: absolute;
    left: 10px; /* keep left inset for rounded corner */
    right: -4px; /* extend under the right accent border */
    bottom: 0;
    height: 2px; /* half thickness */
    background-color: #3b82f6;
    border-radius: 0 0 6px 0; /* match card radius on bottom-right */
    opacity: 0.9;
    pointer-events: none;
}

.row-line .badge.collision-type-pill {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    padding: .28rem .56rem;
}

.collision-type-pill .bi.me-1 {
    margin-right: 0 !important;
}

.warm-pill {
    background-color: #cfeffd;
    color: #055160 !important;
    border: 1px solid #a6e4f7;
}

.warm-count {
    background-color: #cfeffd;
    color: #055160 !important;
    font-weight: 700;
    border-radius: 12px;
    padding: 0.2rem 0.55rem;
    border: 1px solid #a6e4f7;
}

.badge.bg-primary .bi {
    color: #ffffff !important;
}

.status-text {
    font-weight: 600;
    color: #0b5ed7;
}

/* Horizontal scroll for small or narrow pages */
.list-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    .list-grid {
        min-width: 1100px;
    }
}

/* ===================== Main row icon alignments ===================== */
.initials-circle.initials-sm {
    width: 28px;
    height: 28px;
    line-height: 28px;
    font-size: 0.85rem;
    font-weight: 700;
}

.user-initials-cell {
    display: flex;
    align-items: center;
    justify-content: start;
}

.collisions-root .grid-phone {
    justify-self: start;
    align-self: center;
    display: flex;
    align-items: center;
}

.collisions-root .grid-phone .bi {
    font-size: 0.95rem;
    line-height: 1;
}

/* ===================== Associated list (always open) ===================== */
.assoc-header-modern {
    /* Same left/right padding as main header; chevron is absolute in rows, so no extra reserve */
    padding: .5rem var(--row-x-pad) 0 var(--row-x-pad);
    border-bottom: 1px solid rgba(0,0,0,.06);
    margin-bottom: .25rem;
}
/* Header grid: EXACT same template as rows */
.assoc-header-modern .assoc-grid {
    display: grid;
    grid-template-columns: var(--assoc-cols);
    align-items: center;
    column-gap: 0.75rem;
    margin-right: 0 !important;
}
/* Add an extra, empty header cell so header has 8 columns like the rows */
.assoc-header-modern .assoc-grid::after {
    content: "";
}
/* Header cells */
.assoc-header-modern .assoc-grid > div {
    font-weight: 700;
    color: var(--list-header-accent);
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: .02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    text-align: left;
    justify-self: start;
}

/* Data rows: same 8-column template */
.assoc-grid {
    display: grid;
    grid-template-columns: var(--assoc-cols);
    align-items: center;
    column-gap: 0.75rem;
}

.assoc-grid > * {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

@media (max-width: 768px) {
    .assoc-grid {
        min-width: 1100px;
    }
}

.assoc-letter-pin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #0d6efd;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

.assoc-grid > :first-child {
    overflow: visible;
}

.collisions-root .assoc-phone-icon-cell {
    justify-self: end;
    align-self: center;
    display: flex;
    align-items: center;
}

.collisions-root .assoc-phone-icon-cell .bi {
    font-size: 0.95rem;
    line-height: 1;
}

/* ===================== Map blocks ===================== */
.dealership-map-small {
    width: 100%;
    height: 320px;
    border-radius: .5rem;
    border: 1px solid rgba(0,0,0,.08);
    background: #f8fafc;
}

.dealership-map-large {
    width: 100%;
    height: 60vh;
    min-height: 380px;
    border-radius: .25rem;
}

.map-actions {
    display: flex;
    gap: .5rem;
    align-items: center;
}

/* ===================== Split: 70/30 (map 30%) ===================== */
.details-row {
    display: block;
}

    .details-row .left-pane, .details-row .right-pane {
        width: 100%;
    }

@media (min-width: 992px) {
    .details-row {
        display: flex;
        align-items: stretch;
        gap: 1rem;
    }

        .details-row .left-pane {
            flex: 0 0 70%;
            max-width: 70%;
        }

        .details-row .right-pane {
            flex: 0 0 30%;
            max-width: 30%;
        }
}

/* ===================== Backgrounds & Selection (distinct) ===================== */
/* Expanded header row (button) */
.collisions-root .accordion-button.row-line:not(.collapsed) {
    background-color: #e3efff !important; /* NEW darker blue */
    transition: background-color .15s ease-in
}
/* Expanded body region */
.collisions-root .accordion-item .accordion-collapse.show,
.collisions-root .accordion-item .accordion-collapse.show .accordion-body {
    background-color: #f5faff !important;
}

/* Collapsed row hover/selection: slightly darker blue so it is distinct */
.collisions-root .accordion-button.row-line.collapsed:hover,
.collisions-root .accordion-button.row-line.collapsed:focus {
    background-color: #eaf2ff !important; /* darker than expanded */
}

/* Active press feedback (optional) */
.collisions-root .accordion-button.row-line.collapsed:active {
    background-color: #e1ecff !important;
}

/* Optional: subtle focus ring */
.collisions-root .accordion-button.row-line:focus {
    box-shadow: 0 0 0 .15rem rgba(13,110,253,.25);
}

/* Leaflet DivIcon styling to match list pins */
.letter-marker .assoc-letter-pin {
    width: 28px;
    height: 28px;
    font-size: 13px;
    font-weight: 800;
    border: 1px solid rgba(255,255,255,.35);
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
    user-select: none;
}

/* ====== Count circle for Contacts ====== */
.count-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: #eef5ff;
    color: #0d6efd;
    font-weight: 700;
    font-size: 0.85rem;
    border: 1px solid rgba(13,110,253,.25);
    line-height: 1;
}

.count-circle.small {
    width: 22px;
    height: 22px;
    font-size: 0.8rem;
}

/* ---- Chevron footprint for Associated Dealerships (header + rows) ---- */
/* Size matches the chevron we draw with ::after (1.25rem) plus its gap (.5rem) */
:root {
    --assoc-chevron-w: 1.25rem;
    --assoc-chevron-gap: .5rem;
    --assoc-phone-offset: 1.25rem; /* try .5rem, .625rem (10px), or .75rem as you prefer */
}


/* Reserve the same right-side buffer inside BOTH assoc header & assoc row grids
   so the last column (phone icon) never sits under the chevron. */
.assoc-header-modern .assoc-grid,
.accordion-button .assoc-grid {
    padding-right: calc(var(--assoc-chevron-w) + var(--assoc-chevron-gap));
}


/* Make sure no right margin fights the shift */
.collisions-root .assoc-phone-icon-cell {
    justify-self: end; /* keep it visually right-aligned in its column */
    margin-right: 0 !important; /* don't push it back to the chevron */
    transform: translateX(calc(-1 * var(--assoc-phone-offset)));
}

/* If the <a> has extra internal padding, tighten it so the shift is exact */
.collisions-root .assoc-phone-icon-cell .phone-icon {
    padding-right: 0; /* ensure there isn't hidden padding re-adding space on the right */
}

/* Keep the phone in the last column visually right-aligned but inside the buffer */
.collisions-root .assoc-phone-icon-cell {
    justify-self: end;
    margin-right: 0; /* ensure no negative margins fight the buffer */
}

/* Status select in the grid: compact, single-line, no overflow */
.collisions-root .status-cell {
    display: flex;
    align-items: center;
    min-width: 0; /* allow truncation if grid is tight */
}

.collisions-root .status-select {
    padding-top: .15rem;
    padding-bottom: .15rem;
    padding-left: .5rem;
    padding-right: 1.5rem; /* leave room for select caret */
    font-size: .9rem; /* small to match row density */
    height: 28px; /* aligns nicely with your initials circle */
    line-height: 1.2;
    min-width: 110px; /* enough to show "Historical" */
    max-width: 100%;
}

/* Prevent the select from expanding the column on narrow screens */
.collisions-root .status-cell .status-select {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* Optional: colorize the select text by status (subtle) */
.collisions-root .status-select option[value="Open"] {
    color: #198754; /* Bootstrap success tone */
}

.collisions-root .status-select option[value="Pending"] {
    color: #fd7e14; /* orange-ish */
}

.collisions-root .status-select option[value="Closed"] {
    color: #6c757d; /* muted */
}

.collisions-root .status-select option[value="Historical"] {
    color: #0d6efd; /* blue */
}

/* (We keep the chevron absolute so it does not steal grid width) */
.accordion-button.row-line::after,
.accordion-button::after {
    right: var(--row-x-pad); /* already set in your current CSS */
}

/* Contacted select cell */
.collisions-root .assoc-contacted-cell {
    display: flex;
    align-items: center;
    min-width: 0;
}

.collisions-root .assoc-contacted-select {
    padding-top: .15rem;
    padding-bottom: .15rem;
    padding-left: .5rem;
    padding-right: 1.5rem; /* caret room */
    font-size: .9rem;
    height: 28px;
    line-height: 1.2;
    min-width: 120px; /* enough for "Phone/Email" */
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* Optional: subtle coloring inside options (browser dependent) */
.collisions-root .assoc-contacted-select option[value="No"] {
    color: #6c757d;
}

.collisions-root .assoc-contacted-select option[value="Phone"] {
    color: #0d6efd;
}

.collisions-root .assoc-contacted-select option[value="PhoneEmail"] {
    color: #0d6efd;
}

.collisions-root .assoc-contacted-select option[value="Email"] {
    color: #198754;
}

.collisions-root .assoc-contacted-select option[value="Other"] {
    color: #fd7e14;
}

/* ============================================================
   GREEN EXPANDED STATE
   For: 
   1. Main Contacts accordion header (inside collision detail)
   2. Associated Dealership accordion headers
   ============================================================ */

/* 1) MAIN CONTACTS HEADER (e.g., "North Star Motors Contacts") */
.collisions-root .accordion-button:not(.collapsed)[data-bs-target*="contacts-"],
.collisions-root .accordion-button:not(.collapsed)[data-bs-target^="#contacts-"] {
    background-color: #e7f7e7 !important; /* light green */
    border-color: #d1efd1 !important;
}

/* 2) ASSOCIATED DEALERSHIP HEADERS (rows that expand contact tables) */
.collisions-root .accordion-button:not(.collapsed)[data-bs-target*="assoc-body-"],
.collisions-root .accordion-button:not(.collapsed)[data-bs-target^="#assoc-body-"] {
    background-color: #e7f7e7 !important; /* same light green */
    border-color: #d1efd1 !important;
}

/* Optional: make expanded green a bit richer if desired */
.collisions-root .accordion-button:not(.collapsed)[data-bs-target*="contacts-"]:hover,
.collisions-root .accordion-button:not(.collapsed)[data-bs-target*="assoc-body-"]:hover {
    background-color: #ddf3dd !important;
}

/* Keep expanded body content matching the new green header */
.collisions-root .accordion-item .accordion-collapse.show .accordion-body {
    background-color: #f7fff7 !important; /* very light companion green */
}

/* ============================================================
   Subtle 3D shaded contrast for the three main boxes
   (Contacts accordion, Associated card, Map card)
   ============================================================ */

/* ---- Shared elevation tokens (tweak once to taste) ---- */
:root {
    --elev-bg: #ffffff;
    --elev-grad-top: rgba(255,255,255,0.92);
    --elev-grad-bot: rgba(248,250,255,0.92); /* whisper of blue to match theme */
    --elev-border: rgba(16,24,40,0.08);
    --elev-inset-top: rgba(255,255,255,0.8); /* top inner highlight */
    --elev-shadow-1: 0 .5px 1px rgba(16,24,40,.06);
    --elev-shadow-2: 0 6px 14px -8px rgba(16,24,40,.16);
    --elev-shadow-1-hover: 0 1px 2px rgba(16,24,40,.08);
    --elev-shadow-2-hover: 0 10px 20px -10px rgba(16,24,40,.18);
    --elev-radius: .5rem;
    --elev-lift: translateY(-1px);
}

/* ========== 1) CONTACTS BOX (the first accordion-item in the left pane) ========== */
/* Box shell */
.collisions-root .left-pane .accordion > .accordion-item:first-child {
    background: linear-gradient(180deg, var(--elev-grad-top), var(--elev-grad-bot));
    border: 1px solid var(--elev-border) !important;
    border-radius: var(--elev-radius);
    box-shadow: var(--elev-shadow-1), var(--elev-shadow-2);
    overflow: hidden; /* keep inner corners rounded */
}

/* Inner top “inset” highlight */
.collisions-root .left-pane .accordion > .accordion-item:first-child .accordion-header {
    position: relative;
}

.collisions-root .left-pane .accordion > .accordion-item:first-child .accordion-header::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 10px;
    background: linear-gradient(180deg, var(--elev-inset-top), transparent);
    pointer-events: none;
}

/* Slight lift on hover/focus of the header button */
.collisions-root .left-pane .accordion > .accordion-item:first-child .accordion-button {
    transition: transform .12s ease, box-shadow .12s ease;
}

.collisions-root .left-pane .accordion > .accordion-item:first-child .accordion-button:focus,
.collisions-root .left-pane .accordion > .accordion-item:first-child .accordion-button:hover {
    transform: var(--elev-lift);
}

/* Keep body background clean inside the elevated shell */
.collisions-root .left-pane .accordion > .accordion-item:first-child .accordion-body {
    background: transparent;
}

/* ========== 2) ASSOCIATED DEALERSHIPS CARD (left pane > .card.mt-3) ========== */
.collisions-root .left-pane > .card.mt-3 {
    background: linear-gradient(180deg, var(--elev-grad-top), var(--elev-grad-bot));
    border: 1px solid var(--elev-border);
    border-radius: var(--elev-radius);
    box-shadow: var(--elev-shadow-1), var(--elev-shadow-2);
    overflow: hidden;
}

/* Header subtle depth */
.collisions-root .left-pane > .card.mt-3 .card-header {
    background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(246,248,255,.85));
    border-bottom: 1px solid rgba(16,24,40,.06);
}

/* Hover lift on the card itself (optional) */
.collisions-root .left-pane > .card.mt-3 {
    transition: transform .12s ease, box-shadow .12s ease;
}

.collisions-root .left-pane > .card.mt-3:hover {
    transform: var(--elev-lift);
    box-shadow: var(--elev-shadow-1-hover), var(--elev-shadow-2-hover);
}

/* ========== 3) MAP CARD (right pane) ========== */
.collisions-root .right-pane > .card {
    background: linear-gradient(180deg, var(--elev-grad-top), var(--elev-grad-bot));
    border: 1px solid var(--elev-border);
    border-radius: var(--elev-radius);
    box-shadow: var(--elev-shadow-1), var(--elev-shadow-2);
    overflow: hidden;
    transition: transform .12s ease, box-shadow .12s ease;
}

.collisions-root .right-pane > .card:hover {
    transform: var(--elev-lift);
    box-shadow: var(--elev-shadow-1-hover), var(--elev-shadow-2-hover);
}

/* Header slight gradient + divider */
.collisions-root .right-pane > .card .card-header {
    background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(246,248,255,.85));
    border-bottom: 1px solid rgba(16,24,40,.06);
}

/* Keep the small map’s own border subtle so it feels inset inside the card */
.collisions-root .dealership-map-small {
    border: 1px solid rgba(16,24,40,.08);
    border-radius: calc(var(--elev-radius) - .25rem);
    background-color: #f8fafc;
}

/* ========== Fine-tune the accordion header corners so the 3D shell is crisp ========== */
.collisions-root .left-pane .accordion > .accordion-item:first-child .accordion-button {
    border-radius: var(--elev-radius) var(--elev-radius) 0 0;
}

.collisions-root .left-pane .accordion > .accordion-item:first-child .accordion-collapse {
    border-top: 1px solid rgba(16,24,40,.06);
}
/* ============================================================
   Associated Dealerships -> Contacts: light neutral surround
   (Overrides the global expanded-body blue, but ONLY for assoc rows)
   ============================================================ */

/* Light neutral behind the contacts card/table (ONLY for assoc bodies) */
.collisions-root .accordion-collapse.show[id^="assoc-body-"] > .accordion-body {
    background-color: #f4f6f8 !important; /* light neutral that contrasts with the green header */
    padding: .75rem; /* breathing room around the inner contacts card */
    border-radius: .5rem; /* soften edges to match the rest of the UI */
}

/* Keep the inner contacts card crisp and elevated on the neutral surround */
.collisions-root .accordion-collapse.show[id^="assoc-body-"] > .accordion-body > .card {
    background: #ffffff;
    border: 1px solid rgba(16,24,40,.10);
    border-radius: .5rem;
    box-shadow: 0 .5px 1px rgba(16,24,40,.05);
    overflow: hidden;
    }

/* Optional: very subtle header / table tweaks inside the contacts card */
.collisions-root .accordion-collapse.show[id^="assoc-body-"] > .accordion-body > .card .card-header {
    background: linear-gradient(180deg, #ffffff, #fafbfc);
    border-bottom: 1px solid rgba(16,24,40,.08);
}

.collisions-root .accordion-collapse.show[id^="assoc-body-"] > .accordion-body > .card .table {
    background-color: #ffffff;
}

.collisions-root .accordion-collapse.show[id^="assoc-body-"] > .accordion-body > .card .table thead.table-light th {
    background-color: #f8f9fb;
}


/* Stronger contrast for every expanded accordion body on this page */
.collisions-root .accordion-item .accordion-collapse.show .accordion-body {
    background-color: #fff7d6 !important; /* neutral light gray */
}

/* INNER accordion bodies (restore original color) */
.collisions-root
.accordion-body
.accordion
.accordion-item
.accordion-collapse.show > .accordion-body {
    background-color: #f5faff !important; /* original inner color */
}

/* Make ONLY the associated-header labels smaller; keep everything else unchanged */
.assoc-header-modern .assoc-grid > div {
  font-size: 0.75rem;  /* ~12px; adjust to taste (e.g., 0.70rem if needed) */
  line-height: 1.1;    /* slightly tighter to avoid vertical crowding */
  white-space: nowrap; /* prevent wrap -> no overlap between stacked lines */
  letter-spacing: 0;   /* neutralize any all-caps tracking */
}