/* ========= 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 {
    /* === Collisions grid columns (MUST match header + row order) ===
       [Txn | Odds | Type | Loans | Dealership | Loan Date | Vehicle] */

    --collision-cols: 
    180px /* Txn Id */
    220px /* Odds */
    130px /* Collision Type */
    130px /* Loan Type */
    120px /* ✅ Status (NEW) */
    80px /* Loans Count (slightly smaller) */
    1.5fr /* Dealership */
    150px /* Loan Date (slightly tighter) */
    1fr /* ✅ Vehicle (reduced from 1.2fr) */
    150px /* Actions (slightly tighter) */
    72px; /* Chevron */

    --row-x-pad: 1.25rem;
    --list-header-accent: #0d6efd;
    /* Associated rows */
    --assoc-cols: 60px /* Map (letter pin) */
    80px /* Distance */
    1.6fr /* Dealership + Address */
    160px /* Loan Date */
    1.2fr /* Vehicle */
    100px; /* Actions */
}

.collisions-root.is-superadmin {
    --collision-cols: 
    180px /* Txn Id */
    220px /* Odds */
    130px /* Collision Type */
    130px /* Loan Type */
    120px /* ✅ Status (NEW) */
    80px /* Loans Count (slightly smaller) */
    1.5fr /* Dealership */
    150px /* Loan Date (slightly tighter) */
    1fr /* ✅ Vehicle (reduced from 1.2fr) */
    150px /* Actions (slightly tighter) */
    72px; /* Chevron */
}

.collisions-root.not-superadmin {
    --collision-cols: 
    180px /* Txn Id */
    220px /* Odds */
    130px /* Loan Type */
    120px /* ✅ Status (NEW) */
    80px /* Loans Count */
    1.5fr /* Dealership */
    150px /* Loan Date */
    1fr /* ✅ Vehicle (reduced) */
    150px /* Actions */
    72px; /* Chevron */
}

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



/* 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 ===================== */
/* Associated dealerships header – compact for flat rows */
.assoc-header-modern {
    padding: .25rem 0;
    border-bottom: 1px solid rgba(0,0,0,.08);
    margin-bottom: 0;
}

/* 🔥 HERO odds — DETAILS CARD ONLY */
.assoc-details-card .odds-value {
    font-size: 3.75rem; /* large */
    font-weight: 900;
    line-height: 0.95;
    color: #0d6efd;
}

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

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

/* Remove accordion spacing for flat associated rows */
.assoc-header-modern + .list-scroll .accordion-item {
    border: none;
    margin: 0;
}

/* Flat associated dealership rows */
.assoc-row {
    padding: .4rem var(--row-x-pad);
    border-bottom: 1px solid rgba(0,0,0,.06);
}

.assoc-row:last-child {
    border-bottom: none;
}

/* Align associated headers with stacked row content */
.assoc-header-modern .assoc-grid > div {
    padding-top: 0.2rem;
}

/* Compensate header for row selection indicator width */
.assoc-header-modern .assoc-grid {
    padding-left: calc(var(--row-x-pad) + 4px);
}

/* Data rows: same 8-column template */
.assoc-grid {
    padding-left: var(--row-x-pad);
    padding-right: var(--row-x-pad);
    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;
}

/* ===== Associated Dealership header cell alignment ===== */

/* Loan Date column (match stacked date alignment) */
.assoc-header-modern .assoc-grid > div:nth-child(4) {
    justify-self: start;
}

/* Vehicle column */
.assoc-header-modern .assoc-grid > div:nth-child(5) {
    justify-self: start;
}

/* Actions column (match row-actions flex-end) */
.assoc-header-modern .assoc-grid > div:nth-child(6) {
    justify-self: end;
}


/* ===== Associated Details Card ===== */

.assoc-details-card {
    border-radius: .75rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.assoc-details-header {
    background: #0b0f14;
    color: #e5f6ff;
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.loan-status {
    color: #22c55e;
    font-weight: 800;
    letter-spacing: .04em;
}

.loan-date {
    color: #38bdf8;
    font-size: .9rem;
}

/* Odds */
.assoc-odds {
    padding: 1.5rem 1.25rem;
}

.odds-prefix {
    color: #94a3b8;
    margin-right: .25rem;
}

.odds-value {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
}

.odds-label {
    color: #c084fc;
    margin-left: .5rem;
    font-weight: 600;
}

/* Dealer */
.assoc-dealer {
    padding: 1.25rem;
}

.dealer-label {
    font-size: .7rem;
    color: #14b8a6;
    font-weight: 700;
}

.dealer-name {
    font-size: 1.2rem;
    font-weight: 700;
}

.dealer-location,
.dealer-contact {
    color: #64748b;
}

.dealer-actions {
    margin-top: .5rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.dealer-phone {
    color: #14b8a6;
    font-weight: 700;
}

.icon-btn {
    background: none;
    border: none;
    color: #0ea5e9;
}

/* Footer */
.assoc-footer {
    margin-top: auto;
    background: #f1f5f9;
    display: flex;
    justify-content: space-between;
    padding: .75rem 1.25rem;
}

.footer-label {
    font-size: .7rem;
    color: #64748b;
    font-weight: 700;
}

.footer-value {
    font-weight: 600;
}

/* Associated row base */
.assoc-row {
    padding: .4rem 0;
    border-bottom: 1px solid rgba(0,0,0,.06);
    background-color: #ffffff;
    transition: background-color .15s ease, box-shadow .15s ease;
}


/* Base associated row */
.assoc-row {
    background-color: transparent;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.assoc-row {
    position: relative;
    background-color: #ffffff;
}

/* Hover */
.assoc-row:hover {
    background-color: #f3f8ff;
    cursor: pointer;
}

.assoc-row.assoc-selected::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background-color: #0d6efd;
}

.assoc-row.selected {
    background-color: #e6f0ff;
    border-left: 4px solid #0d6efd;
}

.icon-btn.icon-large:hover {
    background-color: rgba(13, 110, 253, 0.08);
    border-radius: 50%;
}


/* Make phone number readable again in details card */
.dealer-phone {
    font-size: 1.05rem; /* slightly larger than body text */
    font-weight: 800;
    line-height: 1.3;
}


/* Larger action icons in details card */
.icon-btn.icon-large i {
    font-size: 1.25rem; /* bigger than row icons */
}

/* Slightly larger click target */
.icon-btn.icon-large {
    padding: .35rem;
}


.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 60%;
        max-width: 60%;
    }

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

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

/* Move chevron LEFT from the right edge (authoritative override) */
.accordion-button.row-line::after,
.accordion-button::after {
    right: calc(var(--row-x-pad) + 24px) !important;
}


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


.card-soft-blue {
    background-color: #eef4fa; /* soft blue */
    border: 1px solid #d9e3ef;
}

.card-soft-green {
    background-color: #eef7f2; /* soft green option */
    border: 1px solid #d6eadf;
}

.card-soft-purple {
    background-color: #ede4fa; /* soft green option */
    border: 1px solid #e2d6f3;
}

.dealership-cell {
    display: flex;
    flex-direction: column;
    line-height: 1.15; /* tighter than default */
}

.dealership-name {
    font-weight: 600;
    font-size: 1.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dealership-location {
    font-size: 0.8rem;
}

/* Header: center text vertically and horizontally */
.loans-header-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}



/* Row cell: same centering rules as header */
.loan-count-cell {
    display: flex;
    align-items: center;
    justify-content: left;
}

/* Badge styling (slightly refined spacing) */
.loan-count-badge {
    background-color: #dc3545;
    color: #ffffff;
    border-radius: 50%;
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    margin-top: 2px; /* critical: visually places badge "under" header */
}

/* ===================== Row Action Buttons ===================== */

.row-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: .35rem;
}

/* Shared button */
.row-action-btn {
    width: 30px;
    height: 30px;
    border-radius: .5rem;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #f8f9fa;
    transition: background-color .15s ease, transform .1s ease, box-shadow .1s ease;
}

.row-action-btn .bi {
    font-size: .9rem;
}

/* Contacts – blue */
.row-action-btn.contacts {
    background-color: #eef4ff;
    color: #0d6efd;
    border-color: rgba(13,110,253,.25);
}

.row-action-btn.contacts:hover {
    background-color: #dae8ff;
}

.row-action-btn.clear {
    background-color: #f3f4f6; /* light neutral */
    color: #6b7280; /* gray */
    border-color: #d1d5db;
}

.row-action-btn.clear:hover {
    background-color: #ffdede;
}

/* Map – green */
.row-action-btn.map {
    background-color: #e7f7ef;
    color: #198754;
    border-color: rgba(25,135,84,.25);
}

.row-action-btn.map:hover {
    background-color: #dcf4e7;
}

/* Press feedback */
.row-action-btn:active {
    transform: translateY(1px);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.15);
}

/* Phone – purple (tool/utility) */
.row-action-btn.phone {
    background-color: #f1eafe;
    color: #6f42c1;
    border-color: rgba(111,66,193,.25);
}

.row-action-btn.phone:hover {
    background-color: #e6dcfa;
}

/* Email – slate / teal‑gray */
.row-action-btn.email {
    background-color: #eef2f5;
    color: #475569; /* slate */
    border-color: rgba(71,85,105,.25);
}

.row-action-btn.email:hover {
    background-color: #e2e8ed;
}

/* Primary section headers (Details, Associated Dealerships) */
.section-header {
    font-size: 1.1rem;
    font-weight: 700;
    color: #000000;
    letter-spacing: 0.02em;
}

.card-header .section-header {
    padding: 0.25rem 0;
}

.odds-cell {
    white-space: nowrap;
}

.odds-prefix {
    color: #6c757d; /* muted */
    margin-right: 0.25rem;
}

/* Make the odds number ~50% of current size */
.odds-value {
    font-weight: 600;
    font-size: 1.5em; 
    color: #0d6efd; /* primary blue */
}

.btn-category {
    border: 1px solid #d0d7de;
    background-color: #ffffff;
    font-weight: 600;
    padding: 0.45rem 0.75rem;
    border-radius: 0.5rem;
    transition: all 0.15s ease;
}

    /* Hover */
    .btn-category:hover {
        background-color: #f5f8ff;
        border-color: #0d6efd;
    }

    /* ✅ Active filter */
    .btn-category.active {
        background-color: #e7f0ff;
        border-color: #0d6efd;
        box-shadow: inset 0 0 0 2px #0d6efd;
    }

    /* Badge pop */
    .btn-category .badge {
        font-weight: 700;
    }



/* ===== Contacts Modal Header ===== */
.contacts-modal-header {
    background: linear-gradient(to right, #0b0f14, #111827);
    color: #ffffff; /* ✅ force white text */
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.contacts-modal-header .modal-title {
    color: #ffffff; /* ✅ ensure title is white */
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.9rem;
}



/* ===== Contact Actions ===== */
.contact-action {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: none;
    padding: 0;
    color: #0d6efd;
    font-weight: 500;
    cursor: pointer;
}

.contact-action.phone {
    color: #0ea5e9;
}

.contact-action:hover span {
    text-decoration: underline;
}


/* ===== Contacts Table ===== */
.modal-body table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #475569;
}

.modal-body table td {
    vertical-align: middle;
}

.modal-body table tbody tr:hover {
    background-color: #f8fafc;
}

.modal-content {
    border-radius: 0.75rem;
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

.sortable-header {
    cursor: pointer;
    user-select: none;
}

.sortable-header:hover {
    text-decoration: underline;
}



.txn-group-blue {
    color: #2563eb;
}
/* blue-600 */
.txn-group-teal {
    color: #0d9488;
}

.txn-group-purple {
    color: #7c3aed;
}

.txn-group-orange {
    color: #ea580c;
}

.txn-group-indigo {
    color: #4f46e5;
}

.txn-group-green {
    color: #15803d;
}

.txn-group-pink {
    color: #db2777;
}

.txn-group-cyan {
    color: #0891b2;
}

.txn-group-amber {
    color: #d97706;
}

.txn-group-slate {
    color: #475569;
}

/* Txn cell container */
.txn-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    overflow: visible !important;
}

/* Txn ID text */
.txn-id {
    font-size: 1.02rem; /* ✅ slightly larger than body */
    font-weight: 600;
    letter-spacing: 0.01em;
    color: inherit; /* ✅ THIS is the missing piece */
}

/* Icon */
.txn-group-icon {
    font-size: 1.45rem;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
}

/* ---- Color inheritance ---- */
/* Apply color to the cell; text + icon follow */
.txn-cell.txn-group-blue,
.txn-cell.txn-group-teal,
.txn-cell.txn-group-purple,
.txn-cell.txn-group-orange,
.txn-cell.txn-group-indigo,
.txn-cell.txn-group-green,
.txn-cell.txn-group-pink,
.txn-cell.txn-group-cyan,
.txn-cell.txn-group-amber,
.txn-cell.txn-group-slate {
    color: currentColor;
}

/* Override accordion button text color for grouped transactions */
.accordion-button .txn-cell.txn-group-blue {
    color: #2563eb;
}

.accordion-button .txn-cell.txn-group-teal {
    color: #0d9488;
}

.accordion-button .txn-cell.txn-group-purple {
    color: #7c3aed;
}

.accordion-button .txn-cell.txn-group-orange {
    color: #ea580c;
}

.accordion-button .txn-cell.txn-group-indigo {
    color: #4f46e5;
}

.accordion-button .txn-cell.txn-group-green {
    color: #15803d;
}

.accordion-button .txn-cell.txn-group-pink {
    color: #db2777;
}

.accordion-button .txn-cell.txn-group-cyan {
    color: #0891b2;
}

.accordion-button .txn-cell.txn-group-amber {
    color: #d97706;
}

.accordion-button .txn-cell.txn-group-slate {
    color: #475569;
}


.odds-cutoff-highlight {
    background-color: #fff9db !important; /* soft pale yellow */
}

.odds-cutoff-highlight:hover {
    background-color: #fff3bf !important;
}

.accordion-button.odds-cutoff-highlight:not(.collapsed) {
    box-shadow: inset 4px 0
}


/* ✅ Force row cells to align LEFT inside grid columns */
.collisions-root .list-grid > div {
    justify-self: start;
}



.history-container {
    background-color: #f4f1eb !important;
}


.vehicle-cell {
    display: flex;
    flex-direction: column;
    line-height: 1.3; /* ✅ increase from ~1.15 */
}

/* Top line (already good) */
.vehicle-main {
    font-weight: 600;
    font-size: 0.95rem;
}

/* Bottom line */
.vehicle-sub {
    font-size: 0.85rem; /* ✅ slightly bigger */
    color: #0d6efd;
    margin-top: 2px; /* ✅ add spacing like Loan Date */
}

/* Optional: refine pieces */
.vehicle-type {
    color: #6c757d; /* muted like "Today" */
}

.vehicle-msrp {
    color: #0d6efd; /* matches date link color */
    font-weight: 500;
}

.status-cell {
    display: flex;
    align-items: center;
}

/* Badge base */
.status-badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}

.status-badge.Active {
    background-color: #e6f4ea;
    color: #198754;
}

.status-badge.Cleared {
    background-color: #eef2f6;
    color: #6c757d;
}

.status-badge.Historical {
    background-color: #e7f0ff;
    color: #0d6efd;
}

.status-badge.Archived {
    background-color: #f3e8ff;
    color: #7c3aed;
}


/* ============================================================
   Move Vehicle header + Vehicle cell slightly right
   Keep Loan Date exactly where it is
   ============================================================ */

/* SUPERADMIN layout
   Columns:
   1 Txn Id
   2 Odds
   3 Collision Type
   4 Loan Type
   5 Status
   6 Loans Count
   7 Dealership
   8 Loan Date
   9 Vehicle
   10 Actions
   11 Chevron
*/

.collisions-root.is-superadmin .accordion-button .list-grid > *:nth-child(9) {
    padding-left: 24px;
}
.collisions-root.is-superadmin .list-header-modern .list-grid > div:nth-child(9){
    padding-left: 18px;
}

/* NOT-SUPERADMIN layout
   Columns:
   1 Txn Id
   2 Odds
   3 Loan Type
   4 Status
   5 Loans Count
   6 Dealership
   7 Loan Date
   8 Vehicle
   9 Actions
   10 Chevron
*/


.collisions-root.not-superadmin .accordion-button .list-grid > *:nth-child(8) {
    padding-left: 24px;
}

.collisions-root.not-superadmin .list-header-modern .list-grid > div:nth-child(8) {
    padding-left: 18px;
}


/* Move only the LOAN DATE header slightly left */
.collisions-root.is-superadmin .list-header-modern .list-grid > div:nth-child(8) {
    padding-left: 0 !important;
    margin-left: -10px;
}

/* Non-superadmin fallback */
.collisions-root.not-superadmin .list-header-modern .list-grid > div:nth-child(7) {
    padding-left: 0 !important;
    margin-left: -10px;
}