:root {
    --cifr-blue: #0f6d8a;
    --cifr-blue-dark: #0c596f;
    --soft-border: #e5e7eb;
    --soft-bg: #f7f8fa;
}

body {
    background: var(--soft-bg);
}

/* --- T-BAS-like navbar (approximate) --- */
.tbas-navbar {
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.tbas-brand {
    font-weight: 700;
    letter-spacing: .2px;
}

.tbas-brand .tbas {
    color: #111827;
}

.tbas-brand .badge {
    font-weight: 600;
    margin-left: .5rem;
    background: #eef2ff;
    color: #3730a3;
}

.nav-link {
    color: #111827 !important;
}

.nav-link:hover {
    color: #0b5ed7 !important;
}

.navbar .btn-outline-primary {
    border-color: #c7d2fe;
    color: #1d4ed8;
}

.navbar .btn-outline-primary:hover {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #1d4ed8;
}

/* --- Page hero --- */
.page-hero {
    padding: 28px 0 10px 0;
}

.page-hero .kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #6b7280;
    font-size: .95rem;
}

.chip {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    font-weight: 600;
    font-size: .85rem;
}

h1 {
    font-weight: 700;
    color: #111827;
    margin-top: 10px;
}

.subhead {
    color: #6b7280;
    margin-top: 6px;
    margin-bottom: 0;
}

/* --- Centered, bounded table container --- */
.content-wrap {
    max-width: 1240px;
    /*max-width: 1320px;  chat suggestion */
    margin: 0 auto;
    padding: 0 16px 40px 16px;
}

.table-card {
    border: 1px solid #e6e8ef;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(17, 24, 39, .08);
    overflow: hidden;
}

/* --- DataTables polish --- */
.dataTables_wrapper .dataTables_length label, .dataTables_wrapper .dataTables_filter label {
    margin-bottom: 0;
    font-weight: 600;
    color: #374151;
}

.dataTables_wrapper .dataTables_filter input {
    margin-left: .5rem !important;
    min-width: 260px;
    max-width: 360px;
    width: 30vw;
}

table.dataTable thead th {
    font-weight: 700;
    color: #374151;
    background: #f9fafb;
    border-bottom: 1px solid var(--soft-border) !important;
}

table.dataTable tbody td {
    vertical-align: middle;
}

/* Airier rows */
.table td, .table th {
    padding: .9rem .9rem;
}

/* --- FIXES: keep widths stable and prevent spillover --- */
table.dataTable {
    width: 100% !important;
    min-width: 1200px;
}

/* Tree name column: fixed + ellipsis (no spill into next column) */
table.dataTable th.col-tree, table.dataTable td.col-tree {
    width: 280px;
    max-width: 280px;
}

.tree-link {
    color: #2563eb;
    font-weight: 600;
    text-decoration: none;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tree-link:hover {
    text-decoration: underline;
}

/* Classification: scroll ONLY inside the cell */
.class-scroll {
    max-width: 520px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding-bottom: 2px;
}

/* Visibility column (dot + label badge) */
th.col-vis, td.col-vis {
    width: 120px;
    text-align: center;
}

.vis-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1;
    border: 1px solid #e5e7eb;
    white-space: nowrap;
}

/* Public */
.vis-public {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}

/* Private */
.vis-private {
    background: #f3f4f6;
    color: #374151;
    border-color: #d1d5db;
}

/* Status dot */
.vis-badge .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    background: currentColor;
    opacity: 0.9;
}

/* Actions column: fixed + flex-wrap container */
th.actions-col, td.actions-col {
    width: 190px !important;
    max-width: 190px;
    min-width: 190px;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
}

.actions-wrap {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
}

/* Action buttons like screenshot */
.btn-view {
    border: 1px solid #c7d2fe;
    color: #1d4ed8;
    background: #fff;
    font-weight: 700;
    border-radius: 8px;
    padding: .4rem .75rem;
    white-space: nowrap;
}

.btn-view:hover {
    background: #eef2ff;
    color: #1d4ed8;
}

.btn-place {
    background: var(--cifr-blue);
    border: 1px solid var(--cifr-blue);
    color: #fff;
    font-weight: 800;
    border-radius: 8px;
    padding: .4rem .85rem;
    white-space: nowrap;
}

.btn-place:hover {
    background: var(--cifr-blue-dark);
    border-color: var(--cifr-blue-dark);
    color: #fff;
}

/* Tools row inside card */
.card-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;      /* match the inset spacing used by the DataTable so the left edge doesn't hit the card boundary */
    padding: 16px 16px 8px 16px;
}

.public-only {
    display: flex;
    align-items: center;
    gap: 10px;
}

.public-only .custom-control-label {
    font-weight: 700;
    color: #374151;
    cursor: pointer;
}

/* Align DataTables controls */
.dataTables_wrapper .row:first-child, .dataTables_wrapper .row:last-child {
    align-items: center;
    margin-left: 0;
    margin-right: 0;
}

.dataTables_wrapper .row:first-child > div, .dataTables_wrapper .row:last-child > div {
    padding-left: 0;
    padding-right: 0;
}

@media (max-width:992px) {
    .class-scroll {
        max-width: 280px;
    }

    table.dataTable th.col-tree, table.dataTable td.col-tree {
        width: 180px;
        max-width: 180px;
    }

}

/* --- FINAL POLISH: align Actions column consistently --- */
th.actions-col {
    text-align: center !important;
    padding-right: .9rem;
    padding-left: .9rem;
}

td.actions-col {
    text-align: center !important;
    padding-right: .9rem;
    padding-left: .9rem;
}

.actions-wrap {
    justify-content: center;   /* center buttons horizontally */
    gap: 10px;                 /* even, consistent spacing */
}

/* Ensure buttons have equal visual weight */
.btn-view, .btn-place {
    min-width: 96px;
}

/* --- FIX: keep DataTables pagination inside the card on narrow widths --- */
.dataTables_wrapper .dataTables_paginate {
    float: none !important;
    text-align: right;
    width: 100%;
}

.dataTables_wrapper .dataTables_paginate .pagination {
    justify-content: flex-end;
    flex-wrap: wrap;              /* allow Previous / Next to wrap */
    row-gap: 6px;
    margin-bottom: 0;
}

.dataTables_wrapper .dataTables_info {
    width: 100%;
    margin-top: 6px;
}

/* On very small screens, center the pagination for readability */
@media (max-width:520px) {
    .dataTables_wrapper .dataTables_paginate {
        text-align: center;
    }

    .dataTables_wrapper .dataTables_paginate .pagination {
        justify-content: center;
    }

}

/* --- UX: keep "Showing X to Y" + pagination visible without scrolling to bottom --- */

/* Make the bottom DataTables control row sticky to the bottom of the viewport while scrolling */
.dataTables_wrapper > .row:last-of-type {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: #ffffff;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 1px solid rgba(0, 0, 0, .08);
    margin-top: 0 !important;
}

/* Prevent the sticky footer from covering the last table row */
#submittedTrees {
    margin-bottom: 0 !important;
}

/* Inset ALL DataTables UI (length, search, table, pagination) to align with the card tools */
.table-card .dataTables_wrapper {
    width: 100%;
    padding: 0;
    box-sizing: border-box;
}

/* Fix bottom pagination alignment to match table area when a vertical scrollbar is present */
.table-card .dataTables_wrapper > .row:last-of-type {
    margin-left: 0;
    margin-right: 0;
    padding-left: 16px;
    padding-right: 33px;  /* 16px inset + ~17px scrollbar gutter */
    box-sizing: border-box;
}

/* --- New columns: Accession + Tree date --- */
th.col-acc, td.col-acc {
    width: 170px;
}

th.col-date, td.col-date {
    width: 160px;
    white-space: nowrap;
}

/* Accession link styling (only public rows will render as link) */
.acc-link {
    color: #2563eb;
    font-weight: 700;
    text-decoration: none;
}

.acc-link:hover {
    text-decoration: underline;
}

.acc-plain {
    color: #111827;
    font-weight: 700;
}

/* Remove old Actions sizing if present */
th.actions-col, td.actions-col {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
}

/* --- Classification label + tooltip --- */
.class-cell {
    display: block;
}

.class-label {
    cursor: help;
    font-weight: 700;
    color: #374151;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.class-label .info-dot {
    color: #9ca3af;
    font-weight: 800;
    flex: 0 0 auto;
}

/* --- Expandable taxonomy (click info icon) --- */
.taxonomy-full {
    display: none;
    margin-top: 6px;
    font-size: 0.85rem;
    color: #6b7280;
    line-height: 1.3;
    white-space: normal;
}

.class-label {
    cursor: pointer;
}

.class-label.open .info-dot {
    color: #2563eb;
}

/* --- Column width tuning + Markers column --- */
th.col-acc, td.col-acc {
    width: 120px;
}

th.col-vis, td.col-vis {
    width: 110px;
}

th.col-date, td.col-date {
    width: 120px;
    white-space: nowrap;
}

.marker-pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 800;
    font-size: .82rem;
    background: #eef2ff;
    color: #3730a3;
    border: 1px solid rgba(0, 0, 0, .06);
    white-space: nowrap;
}

/* --- Marker expand (click info icon) --- */
.marker-cell {
    display: block;
}

.marker-label {
    cursor: pointer;
    font-weight: 800;
    color: #3730a3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.marker-label .info-dot {
    color: #9ca3af;
    font-weight: 900;
}

/* --- Marker display rules (1 locus show locus; 2 loci show both; 3+ show "N loci" expandable) --- */
.marker-cell {
    display: block;
}

.marker-label {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.marker-label .info-dot {
    color: #9ca3af;
    font-weight: 900;
}

/* Tabs */
.type-tabs {
    display: inline-flex;
    border: 1px solid #c7d2fe;
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
    margin-right: 12px;
}

.tab-btn {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 10px 14px;
    font-weight: 600;
    color: #1d4ed8;
    cursor: pointer;
    line-height: 1;
}

.tab-btn + .tab-btn {
    border-left: 1px solid #c7d2fe;
}

.tab-btn.is-active {
    background: #1d4ed8;
    color: #fff;
}

/* New column widths (fixed layout to keep table bounded) */
table#submittedTrees {
    table-layout: fixed;
}

th.col-type, td.col-type {
    width: 110px;
    max-width: 110px;
}

th.col-tree, td.col-tree {
    width: 180px;
    max-width: 180px;
}

th.col-class, td.col-class {
    width: 240px;
    max-width: 240px;
}

th.col-marker, th.col-project, td.col-project {
    width: 170px;
    max-width: 170px;
}

th.col-year, td.col-year {
    width: 80px;
    max-width: 80px;
}

th.col-annot, td.col-annot {
    width: 220px;
    max-width: 220px;
}

th.col-baseline, td.col-baseline {
    width: 120px;
    max-width: 120px;
}

th.col-acc, td.col-acc {
    width: 120px;
    max-width: 120px;
}

th.col-vis, td.col-vis {
    width: 120px;
    max-width: 120px;
}

th.col-date, td.col-date {
    width: 120px;
    max-width: 120px;
}

td.col-project, td.col-annot {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

td.col-year {
    white-space: nowrap;
}

.type-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
    border: 1px solid #e5e7eb;
    white-space: nowrap;
}

.pill-ref {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.pill-place {
    background: #f5f3ff;
    color: #6d28d9;
    border-color: #ddd6fe;
}

.table-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid #eef1f6;
    max-height: calc(100vh - 360px);
}

@media (max-width:768px) {
    .table-scroll {
        max-height: calc(100vh - 320px);
    }

}

/* Add left/right padding to the TOP DataTables controls row (Show entries + Search) */
.table-card .dataTables_wrapper > .row:first-of-type {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
}

/* Hover / focus */

/* Visibility badge aliases (in case any legacy markup remains) */
.vis-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1;
    border: 1px solid #e5e7eb;
    white-space: nowrap;
}

.vis-pill.vis-public {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}

.vis-pill.vis-private {
    background: #f3f4f6;
    color: #374151;
    border-color: #d1d5db;
}

/* === Light info icon (single, centered) === */
.info-icon::before, .info-icon::after {
    content: none !important;
    display: none !important;
}

.info-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    margin-left: 6px !important;
    border-radius: 50% !important;
    border: 1px solid #cbd5e1 !important;
    background: #fff !important;
    box-shadow: none !important;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: #64748b !important;
    vertical-align: middle !important;
    padding-top: 0.5px; /* optical centering */
}

/* === Expanded loci list: let row grow vertically (no clipping) === */
td.col-marker {
    overflow: visible !important;
}

/* IMPORTANT: allow growth */
.marker-full {
    display: block;               /* JS toggles to block */
    margin-top: 6px;
    font-size: 0.85rem;
    color: #6b7280;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* === Prevent Loci pills from overlapping into Accession column (allow vertical growth only) === */
td.col-marker {
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

/* Tighten pill inside fixed-width loci column */
td.col-marker .marker-pill {
    padding: 4px 8px !important;
    font-size: .80rem !important;
    max-width: 100%;
}

td.col-marker .marker-label {
    max-width: 100%;
}

/* === Force Loci (marker) column to stay visible === */
th.col-marker, td.col-marker {
    display: table-cell !important;
    min-width: 110px !important;
}

/* === Keep DataTables controls visible while table scrolls === */
.table-card {
    position: relative;
}

/* Make the top controls (Show entries + Search) sticky */
.table-card .dataTables_wrapper > .row:first-child {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
    padding-top: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}

/* Scroll only the table body (controls remain visible) */
.table-scroll {
    max-height: calc(100vh - 280px);
    overflow-y: auto;
}

/* === Robust split scrolling: horizontal on outer wrapper; vertical on table area === */
.hscroll-wrap {
    /*width: 100%;*/
    /*JBW prevent horizontal scrolling unless needed*/
    width: 101%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Let the whole card become as wide as needed so controls/table/pagination stay aligned */
.hscroll-wrap > .table-card {
    width: max-content;
    min-width: 100%;
}

/* Vertical scrolling ONLY inside the table area */
.table-scroll {
    max-height: calc(100vh - 320px);
    overflow-y: auto;
    overflow-x: hidden;           /* prevent inner horizontal scroll */
    width: max-content;           /* makes outer wrapper handle horizontal scroll */
    min-width: 100%;              /* but never smaller than viewport */
    box-sizing: border-box;
}

/* Make the DataTable itself size to content (drives horizontal scroll) */
table.dataTable {
    width: max-content !important;
}

/* === ALIGN DataTables controls with horizontal scroll === */

/* Top controls (Show entries + Search) */
.table-card .dataTables_wrapper > .row:first-of-type {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
}

/* Bottom controls (Showing X + pagination) */
.table-card .dataTables_wrapper > .row:last-of-type {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
}

/* IMPORTANT: let them scroll horizontally with the table */
.hscroll-wrap .dataTables_wrapper > .row:first-of-type, .hscroll-wrap .dataTables_wrapper > .row:last-of-type {
    min-width: max-content;
}

/* === Keep Search + Pagination in initial field of view (place on left) === */
.table-card .dataTables_wrapper .dataTables_filter {
    float: left !important;
    text-align: left !important;
    margin-left: 24px !important;  /* small nudge right from "Show entries" */
}

.table-card .dataTables_wrapper .dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.table-card .dataTables_wrapper .dataTables_filter input {
    width: 260px;
    max-width: 260px;
}

/* Bottom pagination: keep near left so it's always visible */
.table-card .dataTables_wrapper .dataTables_paginate {
    float: left !important;
    text-align: left !important;
    margin-left: 16px !important;
}

/* Keep info on the far left above pagination */
.table-card .dataTables_wrapper .dataTables_info {
    float: left !important;
}

/* === Unified table control bar === */
.table-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem .75rem;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
}

.table-controls-left, .table-controls-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.table-controls select, .table-controls input[type="search"] {
    height: 32px;
    font-size: .85rem;
}

.public-only-toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
}

/* === Control bar polish (subtle tint + better affordance) === */
.table-controls {
    background: #f8fafc;           /* slate-50 */
    border: 1px solid #eef2f7;
    border-left: 0;
    border-right: 0;
}

/* Add a small search icon inside the input without breaking DataTables */
.dataTables_filter {
    position: relative;
}

.dataTables_filter input[type="search"] {
    padding-left: 28px !important;
}

.dataTables_filter:before {
    content: "⌕";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #94a3b8;               /* slate-400 */
    pointer-events: none;
}

/* === Make pagination easier to find (sticky footer within table area) === */
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate {
    background: #ffffff;
}

.dataTables_wrapper .dataTables_paginate {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding: .65rem .75rem !important;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -6px 18px rgba(17, 24, 39, .06);
}

/* Keep info visible too (left) */
.dataTables_wrapper .dataTables_info {
    position: sticky;
    bottom: 0;
    z-index: 4;
    padding: .65rem .75rem !important;
    border-top: 1px solid #e5e7eb;
}

/* Ensure both sit on one line when possible */
.dataTables_wrapper .dataTables_info {
    float: left !important;
}

.dataTables_wrapper .dataTables_paginate {
    float: right !important;
}

/* Slightly emphasize buttons */
.dataTables_wrapper .paginate_button {
    border-radius: 8px !important;
}

/* === Keep search box anchored consistently across tabs === */
.table-controls {
    width: 100%;
    box-sizing: border-box;
}

.table-controls-left {
    flex: 1 1 auto;
    min-width: 0;
}

.table-controls-right {
    flex: 0 0 auto;
    margin-left: auto;            /* force right alignment */
}

/* Ensure DataTables filter block doesn't change width by tab */
.table-controls-right .dataTables_filter {
    margin-left: auto !important;
    text-align: right !important;
}

.table-controls-right .dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.table-controls-right .dataTables_filter input[type="search"] {
    width: 260px !important;      /* fixed width prevents shifting */
    max-width: 260px !important;
}

/* If the left side gets too wide, allow wrapping but keep search right */
@media (max-width:820px) {
    .table-controls {
        flex-wrap: wrap;
    }

    .table-controls-right {
        width: 100%;
    }

    .table-controls-right .dataTables_filter {
        justify-content: flex-end;
        width: 100%;
    }

}

/* === Remove search icon + keep search fixed === */
.dataTables_filter label::before {
    content: none !important;
}

.dataTables_filter input[type="search"] {
    background-image: none !important;
    padding-left: .75rem !important;
}

/* === HARD REMOVE: any injected search icon (from earlier CSS) === */
.dataTables_filter:before, .dataTables_filter::before, .table-controls-right .dataTables_filter:before, .table-controls-right .dataTables_filter::before {
    content: none !important;
    display: none !important;
}

/* Undo any left-padding that was added for an icon */
.dataTables_filter input[type="search"] {
    padding-left: .75rem !important;
}

/* === Stable control placement across tabs === */
.tabs-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.tabs-row .tabs {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tabs-row .public-only {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 4px;
}

/* Table controls: Show entries + Search always together */
.table-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: .5rem .75rem;
    border-bottom: 1px solid #e5e7eb;
    background: #f8fafc;
}

.table-controls-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.table-controls .dataTables_length, .table-controls .dataTables_filter {
    margin: 0 !important;
    display: flex;
    align-items: center;
}

.table-controls .dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.table-controls .dataTables_filter input[type="search"] {
    width: 260px !important;
    max-width: 260px !important;
}

/* === Compact + stable DataTables controls === */

/* Wrap controls row cleanly */
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

/* Make "Show X entries" inline and compact */
.dataTables_length label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #374151; /* slate-700 */
}

/* Reduce dropdown width */
.dataTables_length select {
    min-width: 64px;
    padding: 4px 6px;
    font-size: 13px;
}

/* Make search box same visual scale */
.dataTables_filter label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

/* Tighten search input */
.dataTables_filter input {
    padding: 6px 10px;
    font-size: 13px;
    min-width: 220px;
}

/* === Vertical divider between Show entries and Search (visible, non-breaking) === */
.dataTables_wrapper .dataTables_length {
    padding-right: 14px;
    margin-right: 14px;
    border-right: 1px solid #e5e7eb; /* light gray */
}

.dataTables_wrapper .dataTables_filter {
    margin-left: 0 !important; /* keep tight after divider */
    padding-left: 0 !important;
}

/* === Bottom bar: keep info + pagination on one aligned strip === */
.dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.dataTables_wrapper .dataTables_paginate {
    float: none !important;          /* avoid float gaps */
    text-align: right !important;
    white-space: nowrap;
}

/* If DataTables is using a row container, make it flex for perfect alignment */
.dataTables_wrapper .row.dt-bottom, .dataTables_wrapper .row:last-of-type {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* === Bottom controls aesthetic fix (no weird right "box") === */
.dataTables_wrapper > .row:last-of-type {
    position: relative !important;   /* disable earlier sticky behavior */
    bottom: auto !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin: 0 !important;
    padding: 14px 16px !important;   /* match card inset */
    background: transparent !important;
    border-top: 1px solid #eef1f6 !important;
    box-sizing: border-box;
}

/* kill clearfix pseudo elements that can create odd widths */
.dataTables_wrapper > .row:last-of-type::before, .dataTables_wrapper > .row:last-of-type::after {
    content: none !important;
    display: none !important;
}

.dataTables_wrapper > .row:last-of-type .dataTables_info {
    flex: 1 1 auto;
    margin: 0 !important;
    width: auto !important;
}

.dataTables_wrapper > .row:last-of-type .dataTables_paginate {
    flex: 0 0 auto;
    width: auto !important;
    text-align: right !important;
    margin: 0 !important;
}

/* === Explicit visible divider between "Show entries" and "Search" === */
.dt-controls-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.dt-controls-divider {
    width: 1px;
    height: 32px;
    background: #d1d5db;   /* slightly darker than before */
    align-self: center;
}

/* Make the moved DataTables blocks size to content (so the divider sits between them) */
.dt-controls-row .dataTables_length, .dt-controls-row .dataTables_filter {
    width: auto !important;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0 !important;
}

.dt-controls-row .dataTables_length > label, .dt-controls-row .dataTables_filter > label {
    margin: 0 !important;
}

/* keep DataTables blocks from adding odd spacing */
.dt-controls-row .dataTables_length, .dt-controls-row .dataTables_filter {
    margin: 0 !important;
}

/* === Sticky table header + sticky bottom pagination (inside scroll area) === */
.table-scroll {
    position: relative;
}

/* Header sticks when scrolling table body */
.table-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 8;
    background: #f8fafc; /* match header background */
}

/* Sticky footer bar */
.dt-sticky-footer {
    position: sticky;
    bottom: 0;
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(2px);
    border-top: 1px solid #e5e7eb;
}

/* Ensure moved DT nodes look normal */
.dt-sticky-footer .dataTables_info, .dt-sticky-footer .dataTables_paginate {
    padding: 0 !important;
    margin: 0 !important;
    white-space: nowrap;
}

.dt-sticky-footer .dataTables_paginate {
    text-align: right !important;
}

/* Keep footer buttons visible above scrollbars */
.dt-sticky-footer .paginate_button {
    margin: 0 2px !important;
}

/* === FORCE sticky table header (do not affect footer) === */
.table-scroll {
    overflow-y: auto;               /* ensure sticky context */
    position: relative;             /* containing block */
}

/* Apply to both th and td in thead just in case */
.table-scroll thead th, .table-scroll thead td {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;         /* above body cells and row expand */
    background: #f8fafc !important; /* match header bg */
    background-clip: padding-box;
}

/* Optional subtle separation line when header sticks */
.table-scroll thead th {
    box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}

/* === COMPACT MODE OVERRIDES (surgical) === */
body {
    font-size: 14px;
}

.table td, .table th {
    padding: .55rem .55rem !important;
}

.page-hero {
    padding: 16px 0 6px 0 !important;
}

table.dataTable thead th {
    font-size: 0.85rem;
}

table.dataTable tbody td {
    font-size: 0.85rem;
}

th.col-type, td.col-type {
    width: 90px !important;
    max-width: 90px !important;
}

th.col-tree, td.col-tree {
    width: 160px !important;
    max-width: 160px !important;
}

th.col-class, td.col-class {
    width: 210px !important;
    max-width: 210px !important;
}

th.col-marker, td.col-marker {
    width: 95px !important;
    max-width: 95px !important;
}

th.col-project, td.col-project {
    width: 140px !important;
    max-width: 140px !important;
}

th.col-annot, td.col-annot {
    width: 180px !important;
    max-width: 180px !important;
}

th.col-acc, td.col-acc {
    width: 100px !important;
    max-width: 100px !important;
}

th.col-vis, td.col-vis {
    width: 100px !important;
    max-width: 100px !important;
}

th.col-date, td.col-date {
    width: 100px !important;
    max-width: 100px !important;
}

.marker-pill, .type-pill, .vis-badge {
    padding: 3px 8px !important;
    font-size: 0.78rem !important;
}

.dataTables_wrapper .dataTables_filter input {
    min-width: 200px !important;
    max-width: 220px !important;
    height: 30px;
}

.dataTables_wrapper .dataTables_length select {
    height: 30px;
}

.table-scroll {
    max-height: calc(100vh - 240px) !important;
}

/* --- Column selector dropdown (scoped; does NOT affect table sizing) --- */
.dt-colsel{ position:relative; display:inline-block; margin-left:8px; }
.dt-colsel .btn{ padding: .375rem .6rem; }

/* === FIX: make "Search in" button light (match other file) === */
.dt-colsel > button.btn{
  background:#f3f4f6 !important;
  border-color:#d1d5db !important;
  color:#374151 !important;
}
.dt-colsel > button.btn:hover{
  background:#e5e7eb !important;
  border-color:#cbd5e1 !important;
  color:#111827 !important;
}

.dt-colsel-menu{
  position:absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 260px;
  background:#fff;
  border:1px solid rgba(0,0,0,.15);
  border-radius:.25rem;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  padding:10px 12px 8px 12px;
  z-index: 2000;
  display:none;
}
.dt-colsel-menu .dt-colsel-title{
  font-size:.9rem;
  color:#6b7280;
  margin-bottom:8px;
}
.dt-colsel-menu .dt-colsel-list{
  display:grid;
  grid-template-columns: 1fr;
  row-gap:6px;
  margin:0;
  padding:0;
  list-style:none;
}
.dt-colsel-menu label{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  font-weight:500;
  color:#111827;
  white-space:nowrap;
}
.dt-colsel-menu input[type="checkbox"]{
  margin:0;
  flex:0 0 auto;
}
.dt-colsel-menu .dt-colsel-actions{
  border-top:1px solid rgba(0,0,0,.08);
  margin-top:10px;
  padding-top:8px;
  display:flex;
  gap:18px;
  font-weight:600;
}
.dt-colsel-menu .dt-colsel-actions a{ cursor:pointer; }