/*
 * BPBytes ListView re-skin.
 * Targets SuiteCRM's core include/ListView/ListViewGeneric.tpl + ListViewPagination.tpl markup
 * (table.list.view, oddListRowS1/evenListRowS1 rows, .paginationTable, button[name=...] nav
 * buttons) — no structural changes, CSS only, so mass-update / sort / inline-edit / row-select
 * keep working exactly as before. Visual direction: classic alternating-row table, a sticky
 * column-header row, and a slim single-line pagination toolbar with the old raster nav icons
 * replaced by the theme's own self-contained SVG mask icons.
 */

#content.bpbytes-content table.list.view {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bp-surface);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-lg);
    overflow: hidden;
    box-shadow: var(--bp-shadow);
}

/* ---- Column header row (the one genuinely inside <thead> that uses <th>; the pagination
   toolbar row is also inside <thead> but uses <td>, so this selector never touches it).
   Bold, dark, normal-case labels rather than small muted caps — reads more clearly at a
   glance. ---- */
#content.bpbytes-content table.list.view thead th {
    /* position:sticky was tried here to pin the header while scrolling a long list, but
       table.list.view itself has overflow:hidden (below, for the rounded card corners) — an
       overflow:hidden ancestor becomes the containing block position:sticky resolves against,
       so instead of sticking to the page, it was sticking 64px (--bp-topbar-height) down from
       the TABLE's own top edge, on every load, not just while scrolling. That's the "header
       shifted down, gap left behind above it" bug — not a scroll-triggered glitch, since the
       broken offset applies at rest too. Removed rather than reworked: fixing it properly means
       moving the rounded-corner clipping off this table onto a wrapper, and that wrapper already
       needs overflow-x:auto for horizontal scrolling (wrapScrollableTables() in style.js), which
       has the same containing-block problem for sticky. A plain (non-sticky) header is correct
       now; happy to revisit sticky-on-scroll separately if it's wanted back.
       A subtle tint instead of the exact same white as the rows below it — with only a 1px
       border for separation, the header barely read as a header at all against a body row
       directly underneath it. */
    background: var(--bp-surface-alt);
    border-bottom: 1px solid var(--bp-border);
    color: var(--bp-text);
    font-size: 13.5px;
    font-weight: 600;
    padding: 12px 8px !important;
    height: auto !important;
}

/*
 * A sortable header's actual markup (include/ListView/ListViewGeneric.tpl) is one <div>
 * containing the label <a> immediately followed by a small sort-direction icon (.suitepicon-
 * action-sorting-*, 14px, display:inline-block) - both just flow as normal inline content. For a
 * multi-word label narrow enough to wrap onto two lines ("Record Number", "Accountable Person"),
 * there's no room left for the icon on that last wrapped line either, so it drops to a third line
 * of its own - and since that only happens for labels that wrap, every header in the row ends up a
 * different height with its icon sitting somewhere different, instead of reading as one row.
 * Flexing this wrapper instead anchors the icon next to the label at a fixed position (vertically
 * centered against however tall the label's own box is) regardless of how many lines it wraps to.
 */
#content.bpbytes-content table.list.view thead th > div {
    display: flex;
    align-items: center;
    gap: 6px;
}

#content.bpbytes-content table.list.view thead th > div .suitepicon {
    flex: 0 0 auto;
}

/*
 * The flex `gap` above only ever fires when the label link and the sort icon are separate flex
 * items - true for the "not sortable" branch, but ListViewGeneric.tpl's actual sortable-column
 * markup puts the label text, a literal "&nbsp;&nbsp;", AND the icon <span> all inside the SAME
 * <a class="listViewThLinkS1">, so the div still only has ONE flex item (the whole anchor) and
 * `gap` never applies. The real gap is those two non-breaking spaces rendering at full width
 * before the icon, on top of the icon's own SVG glyph not filling its 14x14 box (mask-size:
 * contain leaves visible padding around the chevron shape) - core markup, so the nbsp text
 * itself can't be targeted directly; pulling the icon left with a negative margin is the only
 * lever that reaches into that gap without a template override.
 */
#content.bpbytes-content table.list.view thead a.listViewThLinkS1 {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

#content.bpbytes-content table.list.view thead a.listViewThLinkS1 .suitepicon[class*="sorting"] {
    margin-left: -4px;
}

/* Subpanel listview headers are narrower, so column labels wrap onto two lines - the -10px
   margin above (tuned for a same-line label) then drags the icon under the wrapped label
   instead of beside it. Scoped to subpanels only; the real ListView keeps -10px. */
#content.bpbytes-content [id^="list_subpanel_"] table.list.view thead a.listViewThLinkS1 .suitepicon[class*="sorting"] {
    margin-left: 4px;
}

#content.bpbytes-content table.list.view thead th.td_alt {
    text-align: center;
}

/*
 * ListViewGeneric.tpl's checkbox and quick-edit-icon header cells are <td class="td_alt">, not
 * <th> like every other header cell — the general thead th rule above never reached them, so
 * they stayed plain white with no border while every other header cell got the tinted background
 * and bottom border. Scoped to .td_alt specifically (not a blanket "thead td") since the
 * pagination toolbar row is a plain <td> in this same <thead> too, and shouldn't pick this up.
 *
 * These cells also never got the thead th padding/height rule above — with next-to-nothing of
 * their own (ListViewGeneric.tpl gives them just a &nbsp;), the row's real height ends up set by
 * the "ID Card"-style <th> cells' own 18px padding, and these near-empty <td>s just stretch to
 * match it with almost no padding of their own — an oversized, oddly-empty box rather than a
 * normal-looking header cell. Matching the same padding/height/vertical-align keeps them sized
 * and centered the same way as every other header cell in the row.
 */
#content.bpbytes-content table.list.view thead td.td_alt {
    background: var(--bp-surface-alt);
    border-bottom: 1px solid var(--bp-border);
    text-align: center;
    width: 1px;
    white-space: nowrap;
    height: auto !important;
    vertical-align: middle !important;
}

/* Same asymmetric tightening as the body's checkbox/edit-icon cells above, so the two header
   placeholder cells keep matching column widths and don't force the columns back apart. */
#content.bpbytes-content table.list.view thead td.td_alt:first-of-type {
    padding: 12px 2px 12px 6px !important;
}

#content.bpbytes-content table.list.view thead td.td_alt:first-of-type + td.td_alt {
    padding: 12px 6px 12px 2px !important;
}

#content.bpbytes-content table.list.view thead .listViewThLinkS1 {
    color: var(--bp-text);
    font-weight: inherit;
    text-decoration: none;
}

#content.bpbytes-content table.list.view thead a:hover {
    color: var(--bp-primary);
}

/* ---- Rows: flat (no zebra), generous spacing, hairline separators + hover highlight ---- */
#content.bpbytes-content table.list.view tbody tr.oddListRowS1,
#content.bpbytes-content table.list.view tbody tr.evenListRowS1 {
    background: var(--bp-surface);
}

#content.bpbytes-content table.list.view > tbody > tr:hover {
    background: var(--bp-surface-alt);
}

/* Keep compact table actions such as count buttons on one line in ListViews, subpanels, and
   related-record popups without depending on a module-specific class. */
#content.bpbytes-content table.list.view tbody td .btn,
.modal-body table.list.view tbody td .btn {
    white-space: nowrap;
}

/* Anchored to direct children, not a bare "tbody td" - the pagination row nests its own plain
   <table><td> (detailview.css's tr.pagination) inside one <td> of this table, and a bare
   descendant selector was forcing this row's generous data-row padding onto that button bar. */
#content.bpbytes-content table.list.view > tbody > tr > td {
    padding: 16px 8px !important;
    border-bottom: 1px solid var(--bp-border);
    font-size: 13px;
    color: var(--bp-text);
    vertical-align: middle !important;
}

#content.bpbytes-content table.list.view > tbody > tr:last-child > td {
    border-bottom: none;
}

/*
 * Row checkbox (always the first cell) and the quick-edit-icon column are narrow utility
 * columns, not data columns — the same generous padding used for real content made them look
 * far wider than the small icon they hold. NOT matched by td[width="2%"]: some modules also
 * give an actual image/thumbnail data column that same 2% width, and that selector was hiding
 * those images too (see the a[id^="edit-"] rule below for why this one is safe instead — the
 * quick-edit link's id is set dynamically per row by ListViewGeneric.tpl and nothing else uses
 * that "edit-" prefix).
 *
 * Direct-child combinators all the way down (table.list.view > tbody > tr > td), not a bare
 * descendant "table.list.view tbody td" — a subpanel/dashlet pagination row nests its OWN plain
 * <table><tbody><tr><td> (the Create button + prev/next layout) inside one <td> of the outer
 * table.list.view, and that inner tbody is still a descendant of the outer table no matter how
 * deep. The bare descendant version matched that inner table's own first cell too, forcing this
 * centered-utility-column look onto an unrelated Create button several levels down — direct-
 * child combinators stop this rule at the outer table's own rows, never reaching inside a
 * nested one.
 */
#content.bpbytes-content table.list.view > tbody > tr > td:first-child,
#content.bpbytes-content table.list.view > tbody > tr > td:has(> a[id^="edit-"]) {
    text-align: center;
    width: 1px;
    white-space: nowrap;
}

/*
 * Checkbox and edit-pencil are two separate <td>s side by side - tightened to read as one joined
 * pair (per feedback) rather than two evenly-spaced icons: a small gap on the side facing each
 * other, normal breathing room on the side facing the table edge / first real data column.
 */
#content.bpbytes-content table.list.view > tbody > tr > td:first-child {
    padding: 14px 2px 14px 12px !important;
}

#content.bpbytes-content table.list.view > tbody > tr > td:has(> a[id^="edit-"]) {
    padding: 14px 6px 14px 2px !important;
}

/*
 * The rule above targets the mass-select checkbox / quick-edit column that's always a real
 * ListView's first cell — but a subpanel's table.list.view has no such column, so its first
 * cell is real data (e.g. "Document Type") that was wrongly getting centered along with it.
 * Every subpanel table — inline in a DetailView (SubPanelTiles.tpl's
 * <div id="list_subpanel_{tab}"> wrapper) or standalone in the RelatedRecords popup
 * (entryPoint.php uses that same "list_subpanel_" id prefix) — sits inside that shared wrapper,
 * so scoping to it (with higher specificity than the rule above, so it wins there) restores the
 * normal left-aligned data-cell look without touching the real ListView's checkbox column.
 */
#content.bpbytes-content [id^="list_subpanel_"] table.list.view > tbody > tr > td:first-child {
    padding: 16px 10px !important;
    text-align: left;
    width: auto;
    white-space: normal;
}

/*
 * The quick-edit column's <a id="edit-{ID}"><img src="edit_inline.gif"></a> (ListViewGeneric.tpl)
 * is a raw legacy raster icon with no size control of its own — swapped for the theme's own small
 * pencil mask-icon (the same artwork as .suitepicon-action-edit) inside a compact circular hit
 * target, matching every other small icon-button in the app instead of whatever size the .gif
 * happens to be. Scoped to this link's own dynamic id prefix rather than the column's width so it
 * can never accidentally match an unrelated image-field column that happens to share a width.
 */
#content.bpbytes-content table.list.view tbody a[id^="edit-"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: var(--bp-text-faint);
}

#content.bpbytes-content table.list.view tbody a[id^="edit-"]:hover {
    background: var(--bp-surface-alt);
    color: var(--bp-primary);
}

#content.bpbytes-content table.list.view tbody a[id^="edit-"] img {
    display: none;
}

#content.bpbytes-content table.list.view tbody a[id^="edit-"]::before {
    content: "";
    display: inline-block;
    width: 13px;
    height: 13px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
}

#content.bpbytes-content table.list.view tbody td b {
    font-weight: 600;
}

/* Relate/link-type columns (Subject, Related to, Parent Type, etc.) had no color rule of their
   own here, so they fell back to whatever ambient default link color the browser/core happened
   to apply — an inconsistent warm orange, not the theme's own palette. */
#content.bpbytes-content table.list.view tbody td a {
    color: var(--bp-primary);
}

#content.bpbytes-content table.list.view tbody td a:hover {
    color: var(--bp-primary-hover);
    text-decoration: underline;
}

/* Multi-line text/textarea-type columns (e.g. a Description field) rendered their full value,
   sometimes wrapping to 5-6 lines and making every row in the table as tall as the longest one.
   The clamp lives on .forum-content (below), the wrapper the Text field's list template puts around a long
   value. It must NOT be put on the <td> itself: "display: -webkit-box" stops a cell from being a table cell, so it
   no longer stretches to the row height, its content is not centred like the other columns, and its bottom border
   ends part-way up the row (seen on columns such as Users > Compliance Status). Only the width is limited here. */
#content.bpbytes-content table.list.view tbody td[type="text"] {
    max-width: 320px;
}

/* A list inside a cell (e.g. Users > Compliance Status) has the browser/Bootstrap bottom margin on its <ul>, which
   shifts its content up out of line with the other columns. */
#content.bpbytes-content table.list.view tbody td > ul {
    margin-bottom: 0;
}

/* A long text field is wrapped in .forum-content: clamped there (the cell itself has padding, which would show a
   further line below the clamp), so it shows two lines. */
#content.bpbytes-content table.list.view tbody td[type="text"] .forum-content {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

#content.bpbytes-content table.list.view td.inlineEdit:hover {
    background: var(--bp-accent-soft);
    cursor: text;
}

#content.bpbytes-content table.list.view .inlineEditIcon {
    opacity: 0;
    transition: opacity var(--bp-transition);
}

#content.bpbytes-content table.list.view td:hover .inlineEditIcon {
    opacity: 1;
}

#content.bpbytes-content input.checkbox,
#content.bpbytes-content input.listview-checkbox {
    width: 15px;
    height: 15px;
    accent-color: var(--bp-primary);
}

/*
 * Status pills — style.js scans enum/bool/dropdown-typed cells for a recognized status word
 * (active, expired, pending, etc.) and wraps just that text in a <span class="bpbytes-status-pill">
 * (leaving any other cell content, like the inline-edit icon, untouched). Cells with no
 * recognized word are left as plain text rather than guessing at a color.
 */
#content.bpbytes-content .bpbytes-status-pill {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.6;
}

#content.bpbytes-content .bpbytes-status-pill.is-good {
    color: var(--bp-success);
    background: var(--bp-success-soft);
}

#content.bpbytes-content .bpbytes-status-pill.is-bad {
    color: var(--bp-danger);
    background: var(--bp-danger-soft);
}

#content.bpbytes-content .bpbytes-status-pill.is-warn {
    color: var(--bp-warning);
    background: var(--bp-warning-soft);
}

/* A colour set by the module itself: a soft tint of it behind slightly darkened text. */
#content.bpbytes-content .bpbytes-status-pill.is-custom {
    color: color-mix(in srgb, var(--pill) 70%, #000) !important;
    background: color-mix(in srgb, var(--pill) 16%, #fff);
    border-radius: 12px;
    font-style: normal !important;
}

/* A filled colour box (e.g. a risk rating) keeps its colour but loses the black frame and fixed 75px box. */
#content.bpbytes-content table.list.view td .bpbytes-badge {
    display: inline-block;
    width: auto !important;
    min-width: 72px;
    padding: 3px 12px !important;
    border: 0 !important;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.6;
}

/*
 * Pagination/action toolbar (the first row inside <thead>, and repeated at the bottom of the
 * table body). Kept deliberately slim — a single compact line, not a bulky bar.
 */
#content.bpbytes-content tr#pagination {
    background: var(--bp-surface-alt);
}

#content.bpbytes-content tr#pagination td {
    border: none !important;
    background: transparent !important;
    padding: 3px 12px !important;
}

#content.bpbytes-content .paginationTable {
    background: transparent;
}

#content.bpbytes-content .paginationActionButtons,
#content.bpbytes-content .paginationChangeButtons {
    vertical-align: middle;
}

/*
 * The action-menu markup mixes <ul> widgets with a plain <div class="selectActionsDisabled">
 * sitting between them — since divs are block-level by default that forces a line break,
 * pushing the filter/column-chooser icons onto their own row below. Flexing the cell keeps
 * every child (whatever its own display type) on one row instead.
 *
 * ListViewPagination.tpl reuses the SAME "paginationActionButtons" class on three different
 * <td>s in one row: this action-menu cell, the "(1-50 of 69)" count cell, and the start/prev/
 * next/end nav-button cell — the latter two both carry width="1%", the action-menu one doesn't.
 * Flexing all three took the count/nav cells out of normal table-cell flow too, which is what
 * was dropping the nav buttons onto their own line under the count text instead of beside it.
 * :not([width]) scopes the flex fix to just the one cell that actually needs it.
 */
/*
 * This cell (the action-menu one, no width attr — see comment below) is the only one of the
 * three paginationActionButtons cells that actually holds the select-all checkbox, so its own
 * left inset can be nudged independently of the shared "tr#pagination td" 12px base (immediately
 * above) without affecting the count/nav cells that reuse the same class. Needs the id-heavy
 * selector (repeating #content and tr#pagination) to out-specify that base rule's own !important.
 */
#content.bpbytes-content tr#pagination td.paginationActionButtons:not([width]) {
    padding-left: 6px !important;
}

#content.bpbytes-content td.paginationActionButtons:not([width]) {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}

#content.bpbytes-content .pageNumbers {
    color: var(--bp-text-muted);
    font-size: 12px;
    white-space: nowrap;
    vertical-align: middle;
}

/* The three pagination cells (nav buttons, count, action-menu) each inherit this row's 12px
   left+right padding, doubling up at each boundary - tightened to just enough breathing room. */
#content.bpbytes-content tr#pagination td.paginationChangeButtons[width],
#content.bpbytes-content tr#pagination td.paginationActionButtons[width] {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

/* Plain icon buttons — no background/rounded chip, matching the final look settled on for
   dashlet pagination (a chip background there was tried first and dropped per feedback); hover
   just tints the icon color instead. */
#content.bpbytes-content .paginationChangeButtons .button,
#content.bpbytes-content .paginationActionButtons .button {
    height: 28px;
    width: 28px;
    padding: 0;
    justify-content: center;
    background: transparent;
    border: none;
}

#content.bpbytes-content .paginationChangeButtons .button:hover,
#content.bpbytes-content .paginationActionButtons .button:hover {
    background: transparent;
    color: var(--bp-primary);
}

#content.bpbytes-content button[name="listViewStartButton"],
#content.bpbytes-content button[name="listViewPrevButton"],
#content.bpbytes-content button[name="listViewNextButton"],
#content.bpbytes-content button[name="listViewEndButton"] {
    position: relative;
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--bp-text-muted);
    /* Default baseline left these floating slightly off from the "(1-50 of 58)" text beside
       them (itself baseline-aligned) once the icon inside grew taller than a line of text -
       part of what read as buttons and count "not being inlined" with each other. */
    vertical-align: middle;
}

/* Subpanels' and the Related Records popup's generic pagination row falls back to the bare
   ".button" class (built for a labelled button), leaving a big empty gap around a lone icon.
   Dashlets keep their own smaller, more specific version of this rule further below. */
#content.bpbytes-content tr.pagination .button {
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

#content.bpbytes-content button[name="listViewStartButton"]:hover,
#content.bpbytes-content button[name="listViewPrevButton"]:hover,
#content.bpbytes-content button[name="listViewNextButton"]:hover,
#content.bpbytes-content button[name="listViewEndButton"]:hover {
    background: var(--bp-surface);
    color: var(--bp-primary);
}

/* Full --bp-text-muted color, only lightly thinned by opacity, so the disabled glyph stays
   clearly visible instead of washing out to near-invisible against a light background. */
#content.bpbytes-content button[name="listViewStartButton"]:disabled,
#content.bpbytes-content button[name="listViewPrevButton"]:disabled,
#content.bpbytes-content button[name="listViewNextButton"]:disabled,
#content.bpbytes-content button[name="listViewEndButton"]:disabled {
    opacity: 0.85;
    color: var(--bp-text-muted);
    background: transparent !important;
}

/* Main listview's own pagination bar renders start/prev/next/end as plain raster <img> icons,
   unlike every other pagination bar's <span class="suitepicon">. Hidden and replaced with the
   same mask-image chevrons, scoped to tr#pagination so it never doubles up elsewhere. */
#content.bpbytes-content tr#pagination button[name="listViewStartButton"] img,
#content.bpbytes-content tr#pagination button[name="listViewPrevButton"] img,
#content.bpbytes-content tr#pagination button[name="listViewNextButton"] img,
#content.bpbytes-content tr#pagination button[name="listViewEndButton"] img {
    display: none;
}

#content.bpbytes-content tr#pagination button[name="listViewStartButton"]::before,
#content.bpbytes-content tr#pagination button[name="listViewPrevButton"]::before,
#content.bpbytes-content tr#pagination button[name="listViewNextButton"]::before,
#content.bpbytes-content tr#pagination button[name="listViewEndButton"]::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

#content.bpbytes-content tr#pagination button[name="listViewStartButton"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='5' x2='6' y2='19'/%3E%3Cpolyline points='18 5 9 12 18 19'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='5' x2='6' y2='19'/%3E%3Cpolyline points='18 5 9 12 18 19'/%3E%3C/svg%3E");
}

#content.bpbytes-content tr#pagination button[name="listViewPrevButton"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 6 9 12 15 18'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 6 9 12 15 18'/%3E%3C/svg%3E");
}

#content.bpbytes-content tr#pagination button[name="listViewNextButton"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 15 12 9 18'/%3E%3C/svg%3E");
}

#content.bpbytes-content tr#pagination button[name="listViewEndButton"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='5' x2='18' y2='19'/%3E%3Cpolyline points='6 5 15 12 6 19'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='5' x2='18' y2='19'/%3E%3Cpolyline points='6 5 15 12 6 19'/%3E%3C/svg%3E");
}

/* Bumped to 16px, matching the ::before-drawn icon size above, so every pagination bar shares
   one consistent icon size. */
#content.bpbytes-content button[name="listViewStartButton"] .suitepicon,
#content.bpbytes-content button[name="listViewPrevButton"] .suitepicon,
#content.bpbytes-content button[name="listViewNextButton"] .suitepicon,
#content.bpbytes-content button[name="listViewEndButton"] .suitepicon {
    width: 16px;
    height: 16px;
}

/* Filter / column-chooser / saved-search icon buttons: plain circular icon buttons, no box */
#content.bpbytes-content ul.clickMenu.selectmenu > li,
#content.bpbytes-content ul.action-link > li,
#content.bpbytes-content ul.searchAppliedAlert > li {
    background: transparent;
    border: none;
    padding: 0;
}

/*
 * ListViewSearchLink.tpl's "an active filter is applied" indicator renders TWO parallel
 * <li class="sugar_action_button desktopOnly"> / <li class="... mobileOnly"> siblings inside
 * <ul class="searchAppliedAlert">, each with its OWN pair of list-alt/remove icons - meant to
 * show only one pair at a time via SuiteP's own breakpoint rule (themes/SuiteP/css/suitep-base/
 * listview.scss: desktopOnly hidden below 768px, mobileOnly hidden at/above it). BPBytes never
 * defined that rule at all (same class of bug as the hidden-mobile/hidden-desktop Bulk Action
 * labels below), so both li's kept their inherited `ul.clickMenu > li { display: inline-flex }`
 * (components.css) and rendered permanently side by side - four icons (list-alt, remove, list-
 * alt, remove) instead of two.
 */
#content.bpbytes-content ul.searchAppliedAlert > li.desktopOnly,
#content.bpbytes-content ul.searchAppliedAlert > li.mobileOnly {
    display: none;
}

@media (min-width: 768px) {
    #content.bpbytes-content ul.searchAppliedAlert > li.desktopOnly {
        display: inline-flex;
    }
}

@media (max-width: 767px) {
    #content.bpbytes-content ul.searchAppliedAlert > li.mobileOnly {
        display: inline-flex;
    }
}

/*
 * This label's <span class="suitepicon-action-caret"> is the real "Select this page / Select
 * all / Deselect" dropdown arrow, not just a decorative checkbox replacement - sugarActionMenu's
 * init() looks for it as the handle to wire its open/close click to. A previous pass hid this
 * label outright, which removed the only visible trigger for that dropdown. Now that
 * sugarActionMenu is correctly wired for this element again (above), showing it restores the
 * actual arrow, with the checkbox next to it untouched.
 */
#content.bpbytes-content label.glyphicon.bootstrap-checkbox {
    /* !important: bootstrap.min.css's .hidden utility (display:none !important) wins over a
       plain display value regardless of selector specificity, and this label also carries a
       literal "hidden" class. */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: -4px;
    cursor: pointer;
    color: var(--bp-text-muted);
    /* Core renders this label BEFORE the checkbox in markup order - reordered visually (not
       moved in the DOM, so JS references to it stay valid) to put the arrow after it. */
    order: 2;
}

#content.bpbytes-content ul.clickMenu.selectmenu > li > input.massall {
    order: 1;
}

/*
 * The shared "ul.clickMenu > li { gap: ... }" base rule (components.css) spaces every clickMenu
 * item pair generously - fine for unrelated toolbar icons, but this <li> holds only the massall
 * checkbox and its own select-all dropdown arrow, meant to read as one joined control rather
 * than two separate ones. Scoped to just the li that actually wraps the checkbox so it doesn't
 * touch the single-icon Filter/Columns chips sharing the same base "ul.clickMenu.selectmenu"
 * class further down this file.
 */
#content.bpbytes-content ul.clickMenu.selectmenu > li:has(> input.massall) {
    gap: 0;
}

/* ListViewSelectObjects.tpl hardcodes id="selectedRecordsTop" with no location variant, so the
   bottom pagination bar's counter span uses this same id too - one rule already covers both. */
#content.bpbytes-content ul.clickMenu.selectmenu > li > #selectedRecordsTop {
    order: 3;
}

/* Bumped up from the shared 10px/opacity:0.6 default - this arrow needs to be spotted and
   clicked, same full-size treatment as the Bulk Actions caret below. */
#content.bpbytes-content label.glyphicon.bootstrap-checkbox .suitepicon-action-caret {
    width: 18px;
    height: 18px;
    opacity: 1;
}

/* Suppresses the unstyled glyphicon-webfont character (font not shipped - see comment above)
   this label's own "glyphicon glyphicon-unchecked" classes would otherwise still try to draw
   via ::before, leaving only the real suitepicon-action-caret span (sized above) visible
   inside it. */
#content.bpbytes-content label.glyphicon.bootstrap-checkbox::before {
    content: none;
}

#content.bpbytes-content label.glyphicon.bootstrap-checkbox:hover {
    color: var(--bp-primary);
}

/* ListView.php still emits this empty, dead anchor (leftover from an older select-menu
   implementation, nothing calls it anymore) - it inherited the icon-button look below, reading
   as a stray, purposeless circle. Matched by exact id, not ":empty", since Filter/Column
   Chooser's own trigger anchors are also childless (their icon is a CSS background). */
#content.bpbytes-content a#select_link {
    display: none;
}

/* !important on color: the blanket "td a { color: var(--bp-primary) }" rule below (for genuine
   data links like Subject/Related-to) has more type-selectors in its chain (table tbody td a vs
   li a here) and so out-specifies this rule despite neither having an ID otherwise — without
   this these icon-only utility buttons went bold-blue along with actual record links, which read
   as everything shouting for attention instead of a clear data-link-vs-toolbar-control hierarchy. */
#content.bpbytes-content ul.clickMenu.selectmenu > li > a,
#content.bpbytes-content ul.action-link > li > a,
#content.bpbytes-content ul.searchAppliedAlert > li > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: var(--bp-text-muted) !important;
}

#content.bpbytes-content ul.clickMenu.selectmenu > li > a:hover,
#content.bpbytes-content ul.action-link > li > a:hover,
#content.bpbytes-content ul.searchAppliedAlert > li > a:hover {
    background: var(--bp-surface);
    color: var(--bp-primary) !important;
}

/*
 * Nothing selected yet — don't show a "Bulk Action" placeholder at all, the button should only
 * appear once a row is actually selected. !important since core's toggleSelected() sets this via
 * addClass("show")/removeClass("hide") (or the reverse), not inline style, so it must always lose.
 */
#content.bpbytes-content .selectActionsDisabled {
    display: none !important;
}

/*
 * Core's sugarListView.prototype.toggleSelected() (include/javascript/sugar_3.js) swaps between
 * the disabled hint and the real select-all/bulk-action dropdown by toggling a "show"/"hide"
 * class on ul[name=selectActions*] — it only runs once the user actually selects a row, so on
 * first page load neither class is present yet and the dropdown must default to hidden too.
 */
#content.bpbytes-content ul[name="selectActions"],
#content.bpbytes-content ul[name="selectActionsBottom"] {
    display: none;
}

/*
 * !important: core's toggleSelected() only ever ADDS "show"/"hide" via addClass, never removing
 * the opposite one first, so after one deselect this element permanently carries BOTH classes.
 * Bootstrap's bare ".hide { display:none!important }" (vendor/bootstrap.min.css) would then win
 * forever on every later reselect unless this rule matches its !important with higher specificity.
 */
#content.bpbytes-content ul[name="selectActions"].show,
#content.bpbytes-content ul[name="selectActionsBottom"].show {
    display: inline-block !important;
}

#content.bpbytes-content .selectActionsDisabled.hide {
    display: none;
}

/*
 * ListViewDisplay::buildBulkActionButton() renders the trigger as TWO labels in the same <a> —
 * one classed "hidden-mobile" (text "ACTION"), one "hidden-desktop" (text "BULK ACTION") — and
 * relies on SuiteP's own stylesheet (themes/SuiteP/css/suitep-base/listview.scss, a >=480px
 * media query) to hide whichever one doesn't apply. BPBytes has no parentTheme and never loads
 * SuiteP's CSS, so both labels rendered side by side, permanently, reading as if "Action" were
 * its own separate control sitting next to the real "Bulk Action" dropdown.
 */
#content.bpbytes-content label.selected-actions-label.hidden-mobile {
    display: none;
}

#content.bpbytes-content label.selected-actions-label.hidden-desktop {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

@media (max-width: 480px) {
    #content.bpbytes-content label.selected-actions-label.hidden-mobile {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin: 0;
    }

    #content.bpbytes-content label.selected-actions-label.hidden-desktop {
        display: none;
    }
}

/*
 * Bulk Action button — scoped to the listview toolbar only (not the shared ul.clickMenu chip
 * used by DetailView/EditView's own Actions menu in .actionsContainer) so it can stand out as
 * the one colored, primary control in the row instead of reading as plain link text.
 */
#content.bpbytes-content td.paginationActionButtons ul.clickMenu.selectActions > li {
    border: none;
    background: var(--bp-primary);
    padding: 7px 14px;
}

#content.bpbytes-content td.paginationActionButtons ul.clickMenu.selectActions > li:hover {
    background: var(--bp-primary-hover);
}

#content.bpbytes-content td.paginationActionButtons ul.clickMenu.selectActions > li > a,
#content.bpbytes-content td.paginationActionButtons ul.clickMenu.selectActions > li .selected-actions-label {
    color: #fff !important;
}

/* .suitepicon-action-caret is a CSS mask painted with background-color: currentColor (icons.css)
   so it already follows the white text color set above once .selected-actions-label is white.
   The shared default (components.css: 10x10px, opacity 0.6, sized for a quiet neutral chip) read
   as barely-there against a solid blue pill and easy to miss as "this thing opens a menu" — sized
   up and fully opaque here, scoped to just this button rather than every clickMenu caret app-wide. */
#content.bpbytes-content td.paginationActionButtons ul.clickMenu.selectActions > li .suitepicon-action-caret {
    width: 16px;
    height: 16px;
    opacity: 1;
    margin-left: 3px;
}

/* :focus-visible alone doesn't reliably cover a plain mouse click - the browser's heuristic can
   skip it and leave the raw black UA outline showing. Cover plain :focus too. */
#content.bpbytes-content td.paginationActionButtons ul.clickMenu.selectActions > li a:focus,
#content.bpbytes-content td.paginationActionButtons ul.clickMenu.selectActions > li a:focus-visible {
    outline: 2px solid var(--bp-primary-soft);
    outline-offset: 2px;
    border-radius: var(--bp-radius-sm);
}

/*
 * ListViewSelectObjects.tpl renders the "Selected: N" count as a readonly <input type="text">
 * with border/background stripped inline, but no width — so it kept the browser's default
 * text-input width (a bare <input> with no size/width is ~170px+ in Chrome). That invisible box
 * was what pushed the Bulk Action button far away from the checkbox as soon as a row got
 * selected, even though nothing about it was visually there to explain the gap.
 */
/* jquery.sugarMenu.js's init() has a bug: it re-queries every <span> under the <li> (this one
   included) and binds the same dropdown-toggle click handler to all of them. pointer-events:none
   makes the browser skip this element during hit-testing so a real click no longer hits it. */
#content.bpbytes-content #selectedRecordsTop {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--bp-text-muted);
    white-space: nowrap;
    pointer-events: none;
}

#content.bpbytes-content #selectCountTop {
    width: 1.5em;
    min-width: 14px;
    padding: 0 !important;
    text-align: left;
    font-weight: 700;
    color: var(--bp-primary);
    pointer-events: none;
}

/*
 * Filter / column-chooser / active-filter icon buttons — colored, filled chips (not just a thin
 * gray outline that only tints in on hover, and easy to lose entirely against a white toolbar)
 * so this row reads as a deliberate group of controls next to the colored Bulk Action pill, and
 * a bigger glyph inside each one — the shared 14px size (icons.css's base .suitepicon/
 * .glyphicon-* rule) was fine for a plain inline icon but got lost inside a 30px button. Filter
 * and column chooser share the theme's primary colour; amber is kept for "a filter is currently
 * applied".
 */
#content.bpbytes-content ul.clickMenu.selectmenu.searchLink > li,
#content.bpbytes-content ul.clickMenu.selectmenu.columnsFilterLink > li {
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    border-radius: var(--bp-radius-sm);
    box-shadow: var(--bp-shadow-sm);
}

#content.bpbytes-content ul.clickMenu.selectmenu.searchLink > li,
#content.bpbytes-content ul.clickMenu.selectmenu.columnsFilterLink > li {
    background: var(--bp-primary-soft);
}

#content.bpbytes-content ul.clickMenu.selectmenu.searchLink > li:hover,
#content.bpbytes-content ul.clickMenu.selectmenu.columnsFilterLink > li:hover {
    background: var(--bp-primary);
    border-color: var(--bp-primary);
}

/* The glyphicon-filter/glyphicon-th-list icon IS the <a> (icons.css paints it as a masked
   background on the anchor itself, no separate icon child) — sizing the anchor box to fill the
   32px chip would otherwise also blow the icon glyph up to 32px since the base rule's mask-size
   is "contain". Keeping the box full-size (a bigger, easier click target) while pinning
   mask-size down to a fixed 16px keeps the two independent: a 32px button with a 16px glyph
   centered in it, instead of one glyph stretched to fill the whole button. Icon color (painted
   via background-color: currentColor in icons.css) follows the anchor's own `color`, so each
   chip's glyph picks up its accent at rest and flips to white once the chip goes solid on hover. */
#content.bpbytes-content ul.clickMenu.selectmenu.searchLink > li > a,
#content.bpbytes-content ul.clickMenu.selectmenu.columnsFilterLink > li > a {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    -webkit-mask-size: 16px 16px;
    mask-size: 16px 16px;
}

#content.bpbytes-content ul.clickMenu.selectmenu.searchLink > li > a,
#content.bpbytes-content ul.clickMenu.selectmenu.columnsFilterLink > li > a {
    color: var(--bp-primary) !important;
}

#content.bpbytes-content ul.clickMenu.selectmenu.searchLink > li:hover > a,
#content.bpbytes-content ul.clickMenu.selectmenu.columnsFilterLink > li:hover > a {
    color: #fff !important;
}

/*
 * "Active filter" indicator + clear (ListViewSearchLink.tpl's <ul class="searchAppliedAlert">,
 * shown only once a search/filter has actually been submitted for this list) ships as TWO
 * icons with the byte-identical onclick — both the list-alt "clearSearchIcon" and the remove
 * (X) anchor call the exact same SUGAR.savedViews.shortcutDropdown('_none', ...) — so as shipped
 * they're two buttons that do one thing. The tooltip listing the actually-applied filter values
 * (footerPopup.tpl's $('.searchAppliedAlertLink').qtip(...)) is bound to the whole <ul>, not to
 * either icon individually, so hiding one of the two redundant triggers loses no functionality:
 * one clear (X) button, colored to stand out as "a filter is applied, click to clear it", same
 * chip mechanics as the Filter/Columns buttons above.
 */
/* !important: the li.sugar_action_button > a rule below (added later, for centering the
   remaining X) matches this same anchor too and ties with this rule's specificity, so being
   later in the file it would otherwise win and set display:flex, undoing this hide. */
#content.bpbytes-content ul.searchAppliedAlertLink > li > a.clearSearchIcon {
    display: none !important;
}

/* .sugar_action_button is required in the selector to out-specify the "plain icon button, no
   box" reset above - this <ul> also carries "clickMenu selectmenu", whose 3-class alternative
   otherwise beats this rule's 2 classes on pure specificity and strips the background/border. */
#content.bpbytes-content ul.searchAppliedAlertLink > li.sugar_action_button {
    /* content-box (the browser default), NOT border-box - matching the Filter/Columns chips
       above, which never set box-sizing and so render at 32px content + 1px border each side =
       34x34 total. border-box here would make this chip exactly 32x32 total, 2px shorter than
       its siblings - invisible horizontally (a toolbar row doesn't center items against each
       other's width), but the row's align-items:center on td.paginationActionButtons centers
       the shorter box vertically against its taller neighbors, showing up as a gap above and
       below it that the same-width siblings don't have. */
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--bp-radius-sm);
    background: var(--bp-danger-soft);
    box-shadow: var(--bp-shadow-sm);
}

/*
 * Explicit display/align/justify/margin/padding/box-sizing here — not just width/height — since
 * the X is painted as a mask directly on this <a> (no separate icon child), so ANY box-model
 * mismatch between the anchor and its 32px li (a stray margin, a content-box width calc that
 * adds the SVG's own intrinsic size on top of the 100% we set, this <a> re-becoming a flex
 * container with its lone invisible text node thrown off-center by leftover align/justify from
 * a lower-specificity rule) shows up as the glyph sitting off-center inside an otherwise
 * correctly-centered chip. .sugar_action_button (present on this <li> in ListViewSearchLink.tpl)
 * is added to the selector purely to out-specify components.css's competing
 * "ul.clickMenu > li > a:not(.primary)" color rule (its :not(.primary) argument counts toward
 * specificity same as a real class, otherwise tying this rule and winning on source order alone
 * — fragile against any later edit to that file).
 */
#content.bpbytes-content ul.searchAppliedAlertLink > li.sugar_action_button > a {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: inherit;
    /* background-color, not the "background" shorthand - the X glyph itself is painted by
       icons.css's shared background-color: currentColor + mask-image rule; the shorthand also
       resets background-image/position/etc, but more importantly it was overriding
       background-color straight to transparent, which fed the mask nothing to paint and made
       the icon disappear entirely (not just the unwanted white patch this was meant to fix). */
    background-color: currentColor !important;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 16px 16px;
    mask-size: 16px 16px;
    color: var(--bp-danger) !important;
}

#content.bpbytes-content ul.searchAppliedAlertLink > li.sugar_action_button:hover {
    background: var(--bp-danger);
    border-color: var(--bp-danger);
}

/*
 * Without this, the shared "ul.searchAppliedAlert > li > a:hover { background: var(--bp-surface)
 * }" rule further up (still needed for the bookmark/saved-search dropdown, which has no chip
 * fill of its own) also matches THIS anchor - and since the anchor fills the chip edge-to-edge,
 * its white hover background painted over almost the whole button, leaving only a sliver of the
 * li's red border ring visible around it instead of a solid red fill (looking like the button
 * lost its left/right margin next to the solid-filled Filter/Columns chips beside it).
 */
#content.bpbytes-content ul.searchAppliedAlertLink > li.sugar_action_button > a:hover {
    background-color: currentColor !important;
}

#content.bpbytes-content ul.searchAppliedAlertLink > li.sugar_action_button:hover > a {
    color: #fff !important;
}

#content.bpbytes-content .list.view.listViewEmpty {
    background: var(--bp-surface);
    border: 1px dashed var(--bp-border-strong);
    border-radius: var(--bp-radius-lg);
    padding: 40px 20px;
    text-align: center;
    color: var(--bp-text-muted);
}

#content.bpbytes-content .list.view.listViewEmpty .msg {
    font-size: 14px;
    font-weight: 600;
    color: var(--bp-text);
}

/*
 * Bootstrap-modal compliance popups (custom/include/javascript/custom_popup.js's
 * showCustomPopup(), triggered from a dashlet/subpanel "View X/Y" button) render their own table
 * with the exact same class="list view" as a real ListView table — custom/modules/Users/tpls/
 * view_compliance.tpl, view_compliance_learning.tpl, view_compliance_document.tpl. But the modal
 * itself is appended straight to <body> ($('body').append(modalHtml)), entirely outside
 * #content.bpbytes-content, so every rule above — all scoped to that ancestor — never reaches it:
 * the table rendered with zero spacing/borders at all, columns run together with no gap. Same
 * core look, re-scoped to .modal-body instead — including the rounded card border/shadow, row
 * hover, and link coloring, so these hand-built popup tables read the same as the real listview-
 * generated popup tables (e.g. a RelatedRecords "View X/Y" button that opens an actual SubPanel,
 * like a Tasks subpanel popup) rather than a flatter, unstyled version of the same class.
 */
.modal-body table.list.view {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bp-surface);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-lg);
    overflow: hidden;
    box-shadow: var(--bp-shadow);
}

.modal-body table.list.view thead th {
    background: var(--bp-surface-alt);
    border-bottom: 1px solid var(--bp-border);
    color: var(--bp-text);
    font-size: 13.5px;
    font-weight: 600;
    padding: 14px 12px;
    text-align: left;
}

.modal-body table.list.view tbody tr:hover {
    background: var(--bp-surface-alt);
}

.modal-body table.list.view tbody td {
    padding: 12px 12px;
    border-bottom: 1px solid var(--bp-border);
    font-size: 13px;
    color: var(--bp-text);
    vertical-align: middle;
}

.modal-body table.list.view tbody tr:last-child td {
    border-bottom: none;
}

/*
 * RelatedRecords "View X/Y" popups (custom/include/SugarFields/Fields/RelatedRecords/, e.g. the
 * Tasks button on bp_EventRegister's listview) render the actual SubPanelDynamic.tpl a real
 * SubPanel uses — sort-link headers and a pagination toolbar row (include/ListView/
 * ListViewSubPanel.php's processListNavigation(), <tr class="pagination"> with the same
 * button[name=listView*Button] markup a full ListView page uses) — because it IS a live SubPanel
 * view, just displayed in this custom_popup.js modal instead of inline on a DetailView. Wanted
 * kept (pagination, sorting) rather than stripped, but with no styling of its own here it fell
 * back to bare unstyled buttons/text — this gives it the same pagination-bar and sort-link
 * treatment #content.bpbytes-content's listview gets, re-scoped to .modal-body since (per the
 * comment above) nothing under #content.bpbytes-content reaches a modal appended to <body>.
 * entryPoint.php tags its wrapper div "bpbytes-relatedrecords-popup" so this is scoped to just
 * these SubPanel-backed popups, not the hand-built compliance popups (view_compliance.tpl and
 * friends) which have no pagination/sort markup to style in the first place.
 *
 * The nav row itself was moved from <thead> (above the column headers, core's default) down to
 * a <tfoot> at the bottom of the table — custom/include/SugarFields/Fields/RelatedRecords/
 * SubPanelDynamicPopup.tpl, our own copy of core's SubPanelDynamic.tpl with just that one change
 * (not a core override: entryPoint.php points SubPanel::setTemplateFile() at this copy, core's
 * own template is untouched). Scoped to "tfoot tr.pagination" specifically, not a bare
 * "tr.pagination", because {$SUBPANEL_SEARCH}'s row still shares that same "pagination" class
 * and stays up in <thead> (hidden by default) — this toolbar look shouldn't apply to that one.
 */
.modal-body .bpbytes-relatedrecords-popup table.list.view tfoot tr.pagination td {
    border: none;
    background: transparent;
    padding: 8px 12px;
}

.modal-body .bpbytes-relatedrecords-popup table.list.view tfoot {
    background: var(--bp-surface-alt);
    border-top: 1px solid var(--bp-border);
}

.modal-body .bpbytes-relatedrecords-popup table.list.view thead th a {
    color: var(--bp-text);
    font-weight: inherit;
    text-decoration: none;
}

.modal-body .bpbytes-relatedrecords-popup table.list.view thead th a:hover {
    color: var(--bp-primary);
}

.modal-body .bpbytes-relatedrecords-popup .pageNumbers {
    color: var(--bp-text-muted);
    font-size: 12px;
    white-space: nowrap;
    vertical-align: middle;
}

/* A modal lives outside #content entirely, so none of the #content-scoped pagination rules
   above - including the vertical-align fix - ever reach this copy of the same row. */
.modal-body .bpbytes-relatedrecords-popup button[name="listViewStartButton"],
.modal-body .bpbytes-relatedrecords-popup button[name="listViewPrevButton"],
.modal-body .bpbytes-relatedrecords-popup button[name="listViewNextButton"],
.modal-body .bpbytes-relatedrecords-popup button[name="listViewEndButton"] {
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--bp-text-muted);
    height: 28px;
    width: 28px;
    padding: 0;
    vertical-align: middle;
}

.modal-body .bpbytes-relatedrecords-popup button[name="listViewStartButton"]:hover,
.modal-body .bpbytes-relatedrecords-popup button[name="listViewPrevButton"]:hover,
.modal-body .bpbytes-relatedrecords-popup button[name="listViewNextButton"]:hover,
.modal-body .bpbytes-relatedrecords-popup button[name="listViewEndButton"]:hover {
    background: var(--bp-surface);
    color: var(--bp-primary);
}

/* Same "outside #content, needs its own copy" gap as the vertical-align fix above - every
   other pagination bar's icon got bumped to 16px, this one was still sitting at icons.css's
   14px default. */
.modal-body .bpbytes-relatedrecords-popup button[name="listViewStartButton"] .suitepicon,
.modal-body .bpbytes-relatedrecords-popup button[name="listViewPrevButton"] .suitepicon,
.modal-body .bpbytes-relatedrecords-popup button[name="listViewNextButton"] .suitepicon,
.modal-body .bpbytes-relatedrecords-popup button[name="listViewEndButton"] .suitepicon {
    width: 16px;
    height: 16px;
}

.modal-body .bpbytes-relatedrecords-popup button[name="listViewStartButton"]:disabled,
.modal-body .bpbytes-relatedrecords-popup button[name="listViewPrevButton"]:disabled,
.modal-body .bpbytes-relatedrecords-popup button[name="listViewNextButton"]:disabled,
.modal-body .bpbytes-relatedrecords-popup button[name="listViewEndButton"]:disabled {
    opacity: 0.85;
    color: var(--bp-text-muted);
    background: transparent !important;
}

.modal-body table.list.view tbody td a {
    color: var(--bp-primary);
}

.modal-body table.list.view tbody td a:hover {
    color: var(--bp-primary-hover);
    text-decoration: underline;
}

/*
 * Related-record counts ("View 3/26") and PDF icons render as <div>…</div>&nbsp;, so a bare
 * non-breaking space sits on its own line under the button and pushes it above the row's
 * centre, out of line with the plain text cells. The stray line is collapsed by zeroing the
 * cell's own font size; the wrapper div gets the normal size back.
 */
#content.bpbytes-content table.list.view td[type="RelatedRecords"],
#content.bpbytes-content table.list.view td[type="pdf"] {
    font-size: 0;
    line-height: 0;
}

#content.bpbytes-content table.list.view td[type="RelatedRecords"] > div,
#content.bpbytes-content table.list.view td[type="pdf"] > div {
    font-size: 13px;
    line-height: normal;
}