body {
    background-color: #f8f9fa;
}

.bg-orange {
    background-color: #fd7e14 !important;
    color: #fff;
}

.table .badge {
    font-size: 0.85em;
    min-width: 55px;
}

.form-range {
    margin-top: 0.25rem;
}

.card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
    font-weight: 600;
}

/* ── Modern table styling ────────────────────────────────────────────────────── */

/* All data tables: stretch to fill container, consistent spacing */
.table {
    width: 100%;
    font-size: 0.9rem;
    border-collapse: separate;
    border-spacing: 0;
}

/* Main results table */
#resultsTable td,
#createContactsTable td {
    vertical-align: middle;
}

/* Light header with subtle bottom border — replaces dark header */
#resultsTable thead th,
#createContactsTable thead th {
    background-color: #e9ecef;
    color: #212529;
    border-bottom: 2px solid #ced4da;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.55rem 0.5rem;
    user-select: none;
    white-space: nowrap;
}

/* Hover on header cells — darker shade, always readable */
#resultsTable thead th:hover,
#createContactsTable thead th:hover {
    background-color: #dee2e6;
}

/* Alternating row stripes for readability */
#resultsTable tbody tr:nth-child(even),
#createContactsTable tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

/* Row hover — subtle blue tint */
#resultsTable tbody tr:hover,
#createContactsTable tbody tr:hover {
    background-color: #e8f0fe;
}

/* Compact cell padding */
#resultsTable td,
#resultsTable th,
#createContactsTable td,
#createContactsTable th {
    padding: 0.4rem 0.5rem;
}

/* Excluded rows — dimmed and struck through */
tr.row-excluded td {
    opacity: 0.4;
    text-decoration: line-through;
    color: #6c757d;
}

/* Override input panel */
.override-panel {
    min-width: 220px;
}

/* Legacy row-level flash kept for any other use case; per-cell flash below
   is the active visual feedback for manual overrides. */
tr.table-success td {
    transition: background-color 0.3s ease;
}

/* ── Per-cell flash on override ─────────────────────────────────────────────── */
/* Highlights only the cells whose values changed after a manual override or
   rematch. Yellow attention pop → green confirmation → fade back to the
   table's normal background (alternating stripe / hover restored). */
@keyframes cellFlash {
    0%   { background-color: #fff3cd; }  /* warning yellow — draws the eye */
    40%  { background-color: #d1e7dd; }  /* success green — confirmation */
    100% { background-color: transparent; }
}
.cell-flash {
    animation: cellFlash 1.5s ease-out;
}

/* ── Sortable columns ──────────────────────────────────────────────────────── */
th.sortable {
    cursor: pointer;
    user-select: none;
}

th.sortable:hover {
    background-color: #d6dce2 !important;
}

th.sort-asc::after {
    content: " \25B2";
    font-size: 0.7em;
}

th.sort-desc::after {
    content: " \25BC";
    font-size: 0.7em;
}

/* ── Responsive tables ─────────────────────────────────────────────────────── */
/* Ensure table-responsive wrappers stretch full width */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Independent scrollable sections ───────────────────────────────────────── */
/* Each major section (Match Results, Non-FI, Create Contacts, Campaign Upsert)
   becomes its own card-like container with a sticky header and its own
   horizontal+vertical scroll area. Lets you jump between sections by scrolling
   the page, then scroll inside a section without losing the page context. */
.results-section {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    /* Cap each section's height so it scrolls internally instead of pushing
       the next section off-screen. Tunable via --section-max-height. */
    max-height: var(--section-max-height, 70vh);
    overflow: hidden;
}

.results-section .section-header,
.results-section .card-header {
    flex: 0 0 auto;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid #dee2e6;
    background: #f8f9fa;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    display: flex;
    align-items: center;
}

.results-section .section-scroll,
.results-section .card-body {
    flex: 1 1 auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* Controls that must survive scrolling (Lead Source, action buttons, filters).
   These sit BETWEEN the card header and the scroll container, not inside it —
   anything inside .card-body scrolls away with the table, which is what used to
   happen to the Lead Source picker and the Preview Creates button. */
.results-section .section-controls {
    flex: 0 0 auto;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid #dee2e6;
    background: #fff;
}

/* Sticky table headers within a scrollable section */
.results-section table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Sticky controls bar (threshold + FI filter) — keep visible while scrolling page */
.sticky-controls {
    position: sticky;
    top: 0;
    z-index: 1020;
    margin-bottom: 1rem;
}

/* ── Column color pairing ──────────────────────────────────────────────────── */
/* Pairs a CSV column with its SF counterpart visually, so the eye can scan a
   row and follow each pair down the table. Headers get a stronger tinted
   background; every cell in the column gets a 3px colored left border that
   forms a continuous vertical line. Unpaired columns (Lifecycle Stage, Mobile,
   RSSD ID, ZI IDs, etc.) stay neutral so they don't compete for attention. */

/* Person — CSV Name ↔ SF Contact (blue) */
th.col-pair-person { background-color: #cfe2ff !important; }
td.col-pair-person { border-left: 3px solid #0d6efd; }

/* Company — CSV Account/Company ↔ SF Account (green) */
th.col-pair-company { background-color: #d1e7dd !important; }
td.col-pair-company { border-left: 3px solid #198754; }

/* Title — CSV Title ↔ SF Title (purple) */
th.col-pair-title { background-color: #e2d9f3 !important; }
td.col-pair-title { border-left: 3px solid #6f42c1; }

/* Email — CSV Email ↔ SF Email (teal) */
th.col-pair-email { background-color: #cff4fc !important; }
td.col-pair-email { border-left: 3px solid #0dcaf0; }

/* ── Account picker (typeahead) ─────────────────────────────────────────────── */
/* Results float over the table rather than pushing it around. Absolute so a
   long list doesn't reflow every row below it. */
.account-picker { position: relative; }

.picker-results {
    /* fixed, not absolute: the Create Contacts panel and the results table are
       both overflow containers, and an absolutely-positioned child gets clipped
       by them. Fixed escapes that; JS sets top/left from the input's rect. */
    position: fixed;
    z-index: 1060;
    min-width: 320px;
    max-width: 460px;
    max-height: 340px;
    overflow-y: auto;
    /* Reaching the end of the list must not chain-scroll the table behind it —
       that page scroll would close the picker. */
    overscroll-behavior: contain;
    background: #fff;
    border: 1px solid #ced4da;
    border-radius: .375rem;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .18);
}

.picker-option {
    display: block;
    width: 100%;
    text-align: left;
    padding: .4rem .6rem;
    border: 0;
    border-bottom: 1px solid #f1f3f5;
    background: transparent;
    cursor: pointer;
    line-height: 1.25;
}
.picker-option:last-child { border-bottom: 0; }
.picker-option:hover,
.picker-option:focus { background: #e7f1ff; }

.picker-name  { display: block; font-weight: 600; font-size: .8125rem; color: #212529; }
.picker-meta  { display: block; font-size: .75rem; color: #6c757d; }
.picker-empty { padding: .5rem .6rem; font-size: .8125rem; color: #6c757d; }

/* ── Column pair dividers ───────────────────────────────────────────────────── */
/* CSV and SF columns now sit next to each other, so the colour coding only has
   to delimit where one pair ends and the next begins. */
th.pair-start, td.pair-start { border-left: 2px solid #adb5bd; }

/* ── Below-threshold rows ───────────────────────────────────────────────────── */
/* These used to be hidden. They're the rows most worth a human look — a
   candidate was found, it just scored under the bar. */
tr.row-below-threshold > td { background-color: #fffbea; }

/* Pair members sit next to each other now, so the coloured rule belongs only at
   the START of a pair. Leaving it on both drew a line down the middle of every
   pair — visually splitting exactly what the colour is meant to group. */
td.col-pair-person:not(.pair-start),
td.col-pair-company:not(.pair-start),
td.col-pair-title:not(.pair-start),
td.col-pair-email:not(.pair-start) { border-left: 0; }

td.col-pair-person.pair-start  { border-left: 3px solid #0d6efd; }
td.col-pair-company.pair-start { border-left: 3px solid #198754; }
td.col-pair-title.pair-start   { border-left: 3px solid #6f42c1; }
td.col-pair-email.pair-start   { border-left: 3px solid #0dcaf0; }

/* ── Wide-screen layout ─────────────────────────────────────────────────────── */
/* The results page opts into .container-fluid (see base.html's container_class
   block). Bootstrap's fixed .container caps at 1320px, which hid most of the
   17-column results table behind a horizontal scroll on any larger monitor. */

/* The duplicate-resolution modal is a side-by-side comparison, so it benefits
   from the same room. modal-xl alone stops at 1140px. */
#dupResolveModal .modal-dialog {
    max-width: min(1600px, 94vw);
}

/* Each section caps its height at 70vh so the next one stays reachable. On a
   short window that leaves too little for the table itself, so give it a floor
   and let taller windows have more. */
.results-section {
    max-height: var(--section-max-height, clamp(320px, 70vh, 900px));
}

/* ── Upload: make the file picker impossible to miss ─────────────────────────── */
/* Bootstrap's default file button is light grey on white and reads as disabled. */
input[type="file"].form-control {
    border: 2px dashed #0d6efd;
    background: #f5f9ff;
    padding: .5rem;
}
input[type="file"].form-control::file-selector-button {
    background: #0d6efd;
    color: #fff;
    font-weight: 600;
    border: 0;
    border-radius: .375rem;
    padding: .45rem 1rem;
    margin: -.1rem 1rem -.1rem 0;
}
input[type="file"].form-control:hover:not(:disabled)::file-selector-button {
    background: #0b5ed7 !important;
    color: #fff;
}