/* ── Drillhole Version Compare ─────────────────────────────────────────── */

/* Split pane container */
.dh-split-pane {
    display: flex;
    height: 42rem;
    overflow: hidden;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
}

.dh-split-left,
.dh-split-right {
    display: flex;
    flex-direction: column;
    width: 50%;
    min-width: 80px;
    overflow: hidden;
}

/* Draggable divider */
.dh-split-divider {
    width: 6px;
    flex-shrink: 0;
    background: #dee2e6;
    cursor: col-resize;
    transition: background 0.15s;
    position: relative;
    z-index: 10;
}

.dh-split-divider:hover,
.dh-split-divider:active {
    background: #0070B9;
}

/* Version banner pinned above each scroll area */
.dh-split-version-header {
    flex-shrink: 0;
    padding: 0.35rem 0.6rem;
    font-weight: 600;
    font-size: 0.82rem;
    border-bottom: 2px solid transparent;
}

.dh-banner-old {
    background-color: #f1f3f5;
    border-bottom-color: #adb5bd;
    color: #343a40;
}

.dh-banner-new {
    background-color: #f1f3f5;
    border-bottom-color: #adb5bd;
    color: #343a40;
}

.dh-banner-meta {
    font-size: 0.72rem;
    opacity: 0.75;
    font-weight: 400;
}

/* Scrollable area inside each pane */
.dh-split-scroll {
    flex: 1;
    overflow: auto;
}

.dh-compare-table {
    font-size: 0.78rem;
    white-space: nowrap;
    border-collapse: separate; /* separate required for sticky cells to paint correctly */
    border-spacing: 0;
    width: max-content;
    min-width: 100%;
}

/* Normalise borders for border-collapse:separate — right+bottom only, restore left/top at edges */
.dh-compare-table th,
.dh-compare-table td {
    border-top: none !important;
    border-left: none !important;
    border-right: 1px solid #dee2e6 !important;
    border-bottom: 1px solid #dee2e6 !important;
}

.dh-compare-table thead tr:first-child th {
    border-top: 1px solid #dee2e6 !important;
}

.dh-compare-table th:first-child,
.dh-compare-table td:first-child {
    border-left: 1px solid #dee2e6 !important;
}

.dh-compare-table thead th {
    position: sticky;
    top: 0;
    z-index: 3; /* header row must sit above the sticky-left row-number column */
    background: #fff;
}

.dh-compare-rownum {
    position: sticky;
    left: 0;
    z-index: 2; /* sticky-left column — below the header row, above normal cells */
    background: #f8f9fa !important; /* !important overrides row-diff colour classes */
    min-width: 2.5rem;
    text-align: center;
    font-weight: 600;
    color: #6c757d;
}

/* Small change-type marker beside the row number (edited/added/removed) */
.dh-rownum-icon {
    margin-left: 0.25rem;
    font-size: 0.85rem;
    vertical-align: middle;
}

/* Top-left "#" corner is sticky on both axes — keep it above every other sticky cell */
.dh-compare-table thead th.dh-compare-rownum {
    z-index: 4;
}

/* Column-level diff headers */
.dh-col-removed {
    background-color: #f8d7da !important;
    color: #842029;
}

.dh-col-added {
    background-color: #d1e7dd !important;
    color: #0a3622;
}

.dh-col-ghost-header {
    background-image: repeating-linear-gradient(
        -45deg,
        #d5d5d5 0px, #d5d5d5 2px,
        #ebebeb 2px, #ebebeb 10px
    ) !important;
    color: transparent;
    user-select: none;
}

.dh-col-badge {
    margin-left: 0.3rem;
    font-size: 0.67rem;
    opacity: 0.75;
    font-style: italic;
}

/* Version-number cell with a small "Latest" badge sitting inline next to the number. */
.dh-version-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.dh-latest-badge {
    font-size: 0.55rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.2em 0.4em;
    white-space: nowrap;
}

/* Add/remove marker on added/removed column headers (carries the explanatory tooltip) */
.dh-col-info {
    margin-left: 0.2rem;
    font-size: 0.85rem;
    vertical-align: middle;
    cursor: help;
}

/* Row-level diff colours */
.dh-row-changed td {
    background-color: #fff9c4;
}

.dh-row-removed td {
    background-color: #fde8e8;
}

.dh-row-added td {
    background-color: #e6f4ea;
}

/* Cell-level diff highlight (within a changed row — brighter yellow) */
.dh-cell-changed {
    background-color: #ffe082 !important;
}

/* Column-level cell tints (applied to individual cells in same/changed rows) */
.dh-cell-col-added {
    background-color: #e6f4ea !important;
}

.dh-cell-col-removed {
    background-color: #fde8e8 !important;
}

/* Ghost cells — plain flat fill, no pattern */
.dh-cell-ghost {
    background-image: none !important;
    background-color: #eceef0 !important;
}

/* Force ghost cells to the same height as data rows via a zero-width line-height trigger */
.dh-cell-ghost::before {
    content: '\00a0';
    display: inline-block;
    width: 0;
}

/* Change-summary badges — solid when that row type is shown, faded when hidden.
   The `.faded` variant is a desaturated tint of the same hue so a glance still
   reads which counts are currently filtered out. */
.dh-badge-changed {
    background-color: #e0a800;
    color: #fff;
}

.dh-badge-added {
    background-color: #198754;
    color: #fff;
}

.dh-badge-removed {
    background-color: #dc3545;
    color: #fff;
}

/* Unchanged: primary (blue) when shown, secondary (grey) when hidden */
.dh-badge-unchanged {
    background-color: #0070b9;
    color: #fff;
}

.dh-badge-changed.faded {
    background-color: #f6eccc;
    color: #b3912f;
}

.dh-badge-added.faded {
    background-color: #d7e9e0;
    color: #5a917a;
}

.dh-badge-removed.faded {
    background-color: #f3d9dc;
    color: #b06b73;
}

.dh-badge-unchanged.faded {
    background-color: #6c757d;
    color: #fff;
}

/* ── Compare toolbar (grouped controls above the split panes) ─────────── */
.dh-compare-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    background: #fff;
}

.dh-toolbar-group {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.4rem;
    padding: 0.6rem 1.1rem;
    border-left: 1px solid #e9ecef;
}

.dh-toolbar-group:first-child {
    border-left: none;
}

.dh-toolbar-heading {
    font-size: 0.8rem;
    font-weight: 600;
    color: #495057;
}

/* Show Rows multiselect needs a fixed width (the dropdown fills its container) */
.dh-toolbar-rows {
    width: 12rem;
}

/* Change-summary badges — inline */
.dh-summary-badges {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

/* Toggle + label rows (column diff / sync scroll) */
.dh-toolbar-switch {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #495057;
}