/*
 * BPBytes DetailView re-skin.
 * Targets SuiteCRM's core include/DetailView/DetailView.tpl markup: the YUI TabView shell
 * (.yui-navset/.yui-nav/.yui-content), one <table class="panelContainer"> per panel with
 * alternating label/value <td> pairs per row, and h4.collapseLink/.expandLink panel toggles.
 * CSS only — YUI TabView + collapsePanel()/expandPanel() JS keep working unmodified.
 */

/*
 * "Activities and Notes" panel (custom/modules/Notes/comments/tpls/comments.tpl) — a Notes
 * quick-add widget hooked on after_ui_frame (custom/modules/logic_hooks.php:8), which fires
 * AFTER the page frame — #content included — has already been echoed. Its markup lands as a
 * sibling after #content closes, not inside it, so every rule anywhere in this theme (all
 * scoped "#content.bpbytes-content ...") misses it entirely. Exact same root cause as the
 * Column Chooser dialog before it got fixed: a real DOM position nothing ever accounted for.
 * comments.css (its own stylesheet, loaded by the tpl itself) supplies only #tabContent's plain
 * gray background/padding — nothing else here was ever styled, hence the raw textarea/file
 * input/button and the coral heading (bootstrap.min.css's global, unscoped "a { color: #E56455
 * }" default, which this markup — being outside #content — has no theme override to beat).
 * Scoped to .panel-content (this widget's own unique outer wrapper) rather than bare Bootstrap
 * .panel/.btn-group classes, which other admin pages may also use.
 */
.panel-content {
    margin: 12px 0 4px;
    font-family: var(--bp-font);
}

/*
 * Card treatment matching the main record panel above it (#content.bpbytes-content
 * .detail.view.detail508 below — same background/border/radius/shadow/margin) rather than a
 * bare subpanel-style heading — now that subpanels themselves live in tabs
 * (custom/themes/BPBytes/js/detailViewTabs.js) instead of being visible alongside this widget,
 * matching a subpanel's bare-heading look no longer has anything to visually agree with; the
 * record panel above is the only other section on the page now, so this matches that instead.
 * padding is 0 on every side but the top (just enough room to clear the header above) so
 * #tabContent's own gray band sits flush against the card's left/right/bottom border, the same
 * way it's already flush on the sides - not just an inset content well floating inside a
 * bigger card, which is what left a band of plain white showing below it before.
 */
.panel-content .panel.panel-default {
    background: var(--bp-surface);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-lg);
    box-shadow: var(--bp-shadow);
    padding: 4px 0 0;
    margin-bottom: 20px;
}

.panel-content .panel-heading {
    padding: 14px 20px;
    background: var(--bp-header-tint);
    border-bottom: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-lg) var(--bp-radius-lg) 0 0;
}

/* Matches the record panel's own <h4> above (#content.bpbytes-content .detail.view.detail508 >
   h4 in this file, further down) exactly — small muted uppercase "eyebrow" label, not a large
   heading — now that the record panel is the only other section on the page this reads next to
   (see the .panel.panel-default card comment above for why this whole widget was re-matched to
   that panel instead of a subpanel's own title). */
.panel-content .panel-heading a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--bp-title) !important;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.1;
    text-decoration: none;
    outline: none;
    border: none;
}

/* role="button" on this <a> (Bootstrap's collapse trigger) is what drew the browser's default
   focus-ring rectangle on click — plain <a> subpanel titles don't have that role and never
   show one. :focus-visible only (not plain :focus) — browsers already suppress :focus-visible
   for a mouse click on a plain link, reserving it for real keyboard navigation, so this only
   ever shows up exactly when subpanels' own default outline would too. */
.panel-content .panel-heading a:focus-visible {
    outline: 2px solid var(--bp-primary-soft);
    outline-offset: 2px;
}

/* Using the actual themes/default/images/basic_search.gif ("expanded", pointing up) and
   advanced_search.gif ("collapsed", pointing down) subpanels render (verified by opening both
   files directly) instead of a hand-drawn SVG approximation — pixel-identical to the real icons
   rather than a similar-looking guess. url() in CSS resolves relative to the STYLESHEET's own
   location (custom/themes/BPBytes/css/), not the site root or the page URL — needs
   ../../../../ to climb back up to the site root first.
   Direction actually flips with real expanded/collapsed state, same as subpanels — :has()
   checks #commentsPanel's own "in" class (Bootstrap 3's collapse plugin adds/removes it when
   toggling), re-evaluating live as that class changes, rather than a static icon that never
   matched what clicking it actually did. */
.panel-content .panel-heading a::before {
    content: "";
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    opacity: 0.55;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
}

.panel-content .panel:has(#commentsPanel.in) .panel-heading a::before {
    background-image: url("../../../../themes/default/images/basic_search.gif");
}

.panel-content .panel:not(:has(#commentsPanel.in)) .panel-heading a::before {
    background-image: url("../../../../themes/default/images/advanced_search.gif");
}

.panel-content #tabContent {
    border-radius: var(--bp-radius-lg);
    background: var(--bp-surface-alt) !important;
    padding: 20px !important;
}

/* comments.tpl's own table rows (#UA-table-CommentsView) include a couple of empty spacer
   <tr><td></td></tr> rows between the compose box and the file/Add Note controls, and again
   before the notes feed — harmless but pure clutter now that real spacing exists elsewhere. */
.panel-content #UA-table-CommentsView > tbody > tr:has(> td:empty),
.panel-content #UA-table-CommentsView > tr:has(> td:empty) {
    display: none;
}

/* Activities and Notes is one full-width column (compose box, its controls, the feed), not label/value pairs. */
#content.bpbytes-content table#UA-table-CommentsView,
#content.bpbytes-content table#UA-table-CommentsView > tbody,
#content.bpbytes-content table#UA-table-CommentsView > tbody > tr,
#content.bpbytes-content table#UA-table-CommentsView > tbody > tr > td {
    display: block;
}

#content.bpbytes-content table#UA-table-CommentsView > tbody > tr:not(:has(td > *)) {
    display: none;
}

#content.bpbytes-content #UA-table-CommentsView > tbody > tr > td {
    width: auto;
    max-width: none !important;
    color: var(--bp-text);
    font-weight: 400;
}

.panel-content #note_comment {
    width: 100%;
}

.panel-content #comment_section .btn-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.panel-content #comment_section .btn-group br {
    display: none;
}

.panel-content #comment_section .inline-button {
    margin-left: auto;
}

/* comments.tpl hardcodes rows="6" on its textarea, which is what was making it this tall —
   overriding with an explicit height (~2 lines + padding) instead; still resize:vertical, so
   anyone who wants more room can still drag it open. Targets any textarea in this widget
   generically (not the one field's own id) - width comes from the element itself
   (style="width:100%" in the template), not from anything field-specific here either. */
.panel-content textarea {
    box-sizing: border-box;
    height: 64px;
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius);
    padding: 12px;
    font-family: var(--bp-font);
    font-size: 13px;
    line-height: 1.4;
    color: var(--bp-text);
    resize: vertical;
}

.panel-content textarea:focus {
    outline: none;
    border-color: var(--bp-primary);
    box-shadow: 0 0 0 3px var(--bp-primary-soft);
}

.panel-content #show_note_error {
    color: var(--bp-danger);
    font-size: 12.5px;
    margin-top: 6px;
}

.panel-content input[type="file"] {
    font-size: 12.5px;
    color: var(--bp-text-muted);
}

#content.bpbytes-content .panel-content .inline-button input.ua_comment_submit {
    display: inline-flex;
    align-items: center;
    height: var(--bp-btn-h);
    padding: 0 18px;
    border-radius: var(--bp-radius-sm);
    border: 1px solid var(--bp-primary);
    background: var(--bp-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

#content.bpbytes-content .panel-content .inline-button input.ua_comment_submit:hover {
    background: var(--bp-primary-hover);
    border-color: var(--bp-primary-hover);
}

.panel-content #no_activity_found_row strong {
    color: var(--bp-text-faint) !important;
    font-style: italic;
    font-weight: 400;
}

/*
 * The notes feed itself (comment.tpl, one <tr><td colspan="2"><div>...</div></td></tr> per
 * note in #UA-CommentsViewContent) — inline styles throughout hardcode a coral color
 * (#f08377/#E56455-family) onto the note author's name AND the note's own body text alike, so
 * everything read as the same attention-grabbing orange regardless of what it actually was.
 * !important is required everywhere here specifically to beat those inline styles (an inline
 * style otherwise always wins over any stylesheet rule, !important or not); real hierarchy
 * instead: the author's name is the one thing that stays a bold, colored highlight, the note's
 * own text is normal dark body copy, and metadata (timestamp/Comment) is small and muted.
 */
.panel-content #UA-CommentsViewContent > tr > td {
    padding: 14px 4px;
    border-bottom: 1px solid var(--bp-border);
}

.panel-content #UA-CommentsViewContent > tr:last-child > td {
    border-bottom: none;
}

/* One entry: the avatar sits in a fixed column on the left, and the name line, the note and the meta line all start
   at the same edge (the template indents each of them by a different inline amount). */
.panel-content #UA-CommentsViewContent > tr > td > div {
    position: relative;
    padding: 0 0 0 48px !important;
    color: var(--bp-text-muted);
    font-size: 12.5px;
    font-style: normal !important;
}

.panel-content #UA-CommentsViewContent > tr > td > div div {
    margin-left: 0 !important;
}

.panel-content #UA-CommentsViewContent > tr > td > div > span:first-child {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0 !important;
}

.panel-content #UA-CommentsViewContent span[style*="font-size"] {
    color: var(--bp-text-faint) !important;
    font-style: normal !important;
    font-size: 12px !important;
}

.panel-content .social_collabs_avatar {
    background: var(--bp-primary-soft);
    width: 36px !important;
    height: 36px !important;
    max-width: 36px !important;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
}

.panel-content #UA-CommentsViewContent strong > a {
    font-style: normal !important;
    font-weight: 700;
    color: var(--bp-primary) !important;
    text-decoration: none;
}

.panel-content #UA-CommentsViewContent strong > a:hover {
    text-decoration: underline;
}

.panel-content .commentText,
.panel-content .commentTextChild {
    margin-top: 4px !important;
    color: var(--bp-text) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 13.5px;
    line-height: 1.5;
}

.panel-content #UA-CommentsViewContent > tr > td > div > span[style*="font-size"] {
    color: var(--bp-text-faint) !important;
    font-style: normal !important;
    font-size: 12px !important;
}

.panel-content #UA-CommentsViewContent a[onclick^="show_reply_box"] {
    color: var(--bp-primary);
    font-weight: 600;
    text-decoration: none;
}

.panel-content #UA-CommentsViewContent a[onclick^="show_reply_box"]:hover {
    text-decoration: underline;
}

.panel-content .ua_comment_reply > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.panel-content .ua_comment_reply input[type="text"] {
    flex: 1;
    box-sizing: border-box;
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-sm);
    padding: 7px 10px;
    font-family: var(--bp-font);
    font-size: 13px;
}

.panel-content .ua_comment_reply input[type="text"]:focus {
    outline: none;
    border-color: var(--bp-primary);
    box-shadow: 0 0 0 3px var(--bp-primary-soft);
}

#content.bpbytes-content .panel-content .ua_reply_submit {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 14px;
    border-radius: var(--bp-radius-sm);
    border: 1px solid var(--bp-primary);
    background: var(--bp-primary);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

#content.bpbytes-content .panel-content .ua_reply_submit:hover {
    background: var(--bp-primary-hover);
    border-color: var(--bp-primary-hover);
}

#content.bpbytes-content [id$="_detailview_tabs"] {
    background: transparent;
}

/*
 * SugarView::getModuleTitle() always renders a .favorite (star toggle) and a .utils
 * (#create_image/#create_link, the "+Create" shortcut) inside the page's top .moduleTitle bar —
 * on a DetailView, redundant with the record's own Edit action and the subpanels' own Create
 * buttons, and .favorite renders as a plain folder glyph anyway since
 * .suitepicon-favorite-star(-outline) was never given its own icon (falls back to the theme's
 * generic folder mask-image). Hidden on DetailView only — :has(.detail.view.detail508) detects
 * that context (that class only appears on a DetailView's own panel table) so ListView's
 * "+Create" at the top of e.g. Roles/Event Register is untouched.
 */
#content.bpbytes-content:has(.detail.view.detail508) .moduleTitle .favorite,
#content.bpbytes-content:has(.detail.view.detail508) .moduleTitle .utils {
    display: none;
}

/*
 * Detail view header row — include/DetailView/header.tpl: <tr><td class="buttons" width="80%">
 * the Edit/Duplicate/Delete action menu</td><td width="20%">{$PAGINATION}</td></tr>. Per
 * request, the VCR record navigation ("(1 of 30)" + prev/next, include/EditView/SugarVCR.tpl)
 * is dropped entirely rather than restyled — "+ td" hides that sibling cell outright (its own
 * width="20%" attribute would otherwise still reserve a blank gap on the right even once its
 * content is invisible), and td.buttons is widened to take the row's full width now that
 * it's the only thing left in it. :has(.detail.view.detail508) scopes this to DetailView only —
 * EditView's header (include/EditView/header.tpl) has the exact same "td.buttons then a plain
 * sibling <td>" shape (its own copy of the same VCR widget, in a td.edit-view-pagination) and
 * this file loads on every page, not just DetailView, so an unqualified "td.buttons + td" would
 * have silently hit EditView too.
 */
#content.bpbytes-content:has(.detail.view.detail508) td.buttons {
    width: 100%;
    padding: 0 0 12px;
}

#content.bpbytes-content:has(.detail.view.detail508) td.buttons + td {
    display: none;
}

#content.bpbytes-content .actionsContainer {
    display: flex;
    align-items: center;
    gap: 8px;
}

/*
 * Subpanel's own Create-button + pagination row (include/ListView/ListViewSubPanel.php's
 * processListNavigation(), echoed by SubPanelDynamic.tpl inside the subpanel's <thead>) — a
 * <tr class="pagination"><td colspan align="right"><table width="100%"><tr>
 * <td align="left">{Create button}</td><td align="right">{prev/next links}</td>
 * </tr></table></td></tr>. Never had any styling of its own before (only ever touched, by
 * class-name accident, by a bare .pagination pill rule that used to style the DetailView header's
 * now-removed VCR record-nav widget — that rule was what was collapsing this row and clipping
 * the Create button). Left plain now that the collision is fixed: the legacy
 * align="left"/"right" attributes already put the Create button on the left and the nav links
 * on the right on their own — this just adds breathing room and a subtle band to match the
 * other pagination strips in the app instead of a bare white row.
 */
#content.bpbytes-content tr.pagination {
    background: var(--bp-surface-alt);
}

/* Border on the <td>, not the <tr> - border-collapse:separate never paints a border declared
   directly on a row, only on cells. */
#content.bpbytes-content tr.pagination > td {
    padding: 6px 14px;
    border-bottom: 1px solid var(--bp-border);
}

/* This row's nested Create-button+pagination <table> has no classes of its own, so it needs its
   own compact padding now that listview.css's generic tbody td rule no longer bleeds into it. */
#content.bpbytes-content tr.pagination table td {
    padding: 4px 6px;
    vertical-align: middle;
}

#content.bpbytes-content tr.pagination table td[align="right"] {
    color: var(--bp-text-muted);
    font-size: 12px;
    white-space: nowrap;
}

/* The Create button's own cell — explicit text-align:left (not just relying on the legacy
   align="left" attribute) since an empty subpanel's nav-links cell next to it can otherwise
   leave this one reading as centered in the row rather than flush left. */
#content.bpbytes-content tr.pagination table td[align="left"] {
    text-align: left;
}

/* Bumped from the shared .button's default padding (0 14px) — a short label like "Create" or
   "Edit" reads a little cramped as the one prominent colored action in an otherwise-empty row. */
#content.bpbytes-content tr.pagination table td[align="left"] .button {
    width: auto;
    height: var(--bp-btn-h);
    padding: 0 22px;
    min-width: 110px;
    justify-content: center;
}

/*
 * Subpanel title (SubPanelTiles.tpl's <div id="subpanel_title_X">, wrapping the same
 * get_form_header() output dashlet headers use) sits flush against the page's left edge —
 * dashlet headers already get an inset via dashboard.css's own .hd-center padding, but that
 * selector doesn't reach this context, so the subpanel case never got one at all.
 */
[id^="subpanel_title_"] {
    padding-left: 12px;
}

#content.bpbytes-content .detail.view.detail508 {
    background: var(--bp-surface);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-lg);
    box-shadow: var(--bp-shadow);
    margin-bottom: 20px;
    padding: 4px 0 8px;
}

/* Deliberately NOT styled like the page title (.moduleTitle) — a small muted uppercase
   "eyebrow" label reads clearly as a section divider rather than competing with it. */
#content.bpbytes-content .detail.view.detail508 > h4 {
    margin: 0;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--bp-title);
    background: var(--bp-header-tint);
    border-radius: var(--bp-radius-lg) var(--bp-radius-lg) 0 0;
    border-bottom: 1px solid var(--bp-border);
    display: flex;
    align-items: center;
    gap: 8px;
}

#content.bpbytes-content .detail.view.detail508.collapsed table.panelContainer {
    display: none;
}

#content.bpbytes-content .collapseLink,
#content.bpbytes-content .expandLink {
    display: inline-flex;
    width: 16px;
    height: 16px;
}

#content.bpbytes-content .detail.view.detail508.expanded .expandLink,
#content.bpbytes-content .detail.view.detail508.collapsed .collapseLink {
    display: none;
}

#content.bpbytes-content .detail.view.detail508 .collapseLink img,
#content.bpbytes-content .detail.view.detail508 .expandLink img {
    width: 12px;
    height: 12px;
    opacity: 0.55;
}

/*
 * table-layout:fixed, not the browser default (auto) - style.js's addColumnWidthHints()
 * injects a <colgroup> declaring all 4 columns' widths explicitly (240px/37.5%/240px/37.5%)
 * so every row's label/value columns line up consistently, but a <col> width is only ever
 * BINDING for fixed layout - under auto layout (what this table was using) it's merely a
 * hint the browser can override based on each column's own content, which is exactly why the
 * left label column ("Contractor/Customer/Visitor Details:") and the right one ("Event
 * Date/Time:") were landing at visibly different widths despite sharing the exact same CSS -
 * auto layout sizes each column independently off its own widest content. Matches EditView's
 * own table.panelContainer.edit, which already uses fixed layout for the same reason.
 */
#content.bpbytes-content table.panelContainer {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

#content.bpbytes-content table.panelContainer > tbody > tr {
    border-bottom: 1px solid var(--bp-border);
}

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

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

/*
 * Anchored to direct children, not a bare descendant selector - a field's value can be its own
 * nested <table> (e.g. SugarEmailAddress's address + "(Primary)" table), and a plain
 * "table.panelContainer td" selector also matched that inner <td>, doubling up its padding and
 * pushing the email address into wrapping. The nth-child(odd)/(even) rules below have the same
 * issue and are anchored the same way.
 */
#content.bpbytes-content table.panelContainer > tbody > tr > td {
    padding: 10px 20px;
    vertical-align: top;
    font-size: 13px;
}

/* Rows alternate label / value <td> pairs (odd = label, even = value). white-space was nowrap
   with width:1% - fine for a short label, but with no cap on how wide a long one could force
   the column (auto table layout sizes a column off its widest content), a long question-style
   label (e.g. "Are workers trained in manual handling techniques and the use of mechanical
   aids?:") never wrapped and instead ran on as one line, wide enough to visually run into the
   value column beside it. A fixed max-width lets normal wrapping take over past that point,
   same fix as table.panelContainer.edit's own label column below (editview.css). */
#content.bpbytes-content table.panelContainer > tbody > tr > td:nth-child(odd) {
    color: var(--bp-text-muted);
    font-weight: 600;
    white-space: normal;
    overflow-wrap: break-word;
    max-width: 240px;
    width: 240px;
}

/* Same edge case as editview.css's own tr:has(> td[colspan]) rule: a single-field row whose
   value cell spans the other columns via colspan (a bool checkbox with a long label is the
   common case) needs this repeated with !important to actually hold at 240px - belt-and-
   suspenders alongside the general rule above, which already covers the common case. */
#content.bpbytes-content table.panelContainer > tbody > tr:has(> td[colspan]) > td:nth-child(odd) {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    max-width: 240px !important;
}

#content.bpbytes-content table.panelContainer > tbody > tr > td:nth-child(even) {
    color: var(--bp-text);
}

/*
 * A plain bool field's checkbox and its swapped label text (style.js's moveCheckboxBeforeLabel()).
 * Right-aligning the checkbox puts it at this cell's edge, next to the label in the next cell -
 * same treatment as EditView's td.bpbytes-checkbox-label-cell (editview.css).
 */
#content.bpbytes-content table.panelContainer td.bpbytes-checkbox-label-cell {
    text-align: right;
    vertical-align: middle;
    padding-right: 0;
}

/* The checkbox carries Bootstrap's .checkbox class, which makes it a full-width block, so text-align above cannot move it
   and it sat at the far left of its cell, a whole column away from its text. Pushed to the cell's right edge instead. */
#content.bpbytes-content table.panelContainer td.bpbytes-checkbox-label-cell > input.checkbox {
    display: block;
    margin: 0 0 0 auto;
}

#content.bpbytes-content table.panelContainer td.bpbytes-checkbox-value-cell {
    color: var(--bp-text-muted);
    font-weight: 600;
    vertical-align: middle;
}

#content.bpbytes-content table.panelContainer .sugar_field {
    font-size: 13px;
}

#content.bpbytes-content table.panelContainer td.inlineEdit:hover {
    background: var(--bp-accent-soft);
    border-radius: var(--bp-radius-sm);
    cursor: text;
}

/*
 * DetailView subpanel tabs (custom/themes/BPBytes/js/detailViewTabs.js) - built entirely in JS
 * since #subpanel_list (include/SubPanel/tpls/SubPanelTiles.tpl) can't be reached via a
 * DetailView.tpl override (see this file's header comment). The JS relocates the whole
 * #subpanel_list column to sit right after the main record panel and adds this bar directly
 * above both, so switching "tabs" is really just toggling which one of [main panel, one
 * <li id="whole_subpanel_X">] is visible - no scrolling to the bottom of the page needed.
 */
.bpbytes-detail-tabnav {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    border-bottom: 1px solid var(--bp-border);
}

.bpbytes-detail-tabnav > li {
    list-style: none;
}

.bpbytes-detail-tabnav__link {
    display: inline-block;
    padding: 10px 16px;
    font-family: var(--bp-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--bp-text-muted);
    text-decoration: none;
    border-radius: var(--bp-radius-sm) var(--bp-radius-sm) 0 0;
    white-space: nowrap;
}

.bpbytes-detail-tabnav__link:hover {
    color: var(--bp-primary);
    background: var(--bp-surface-alt);
    text-decoration: none;
}

.bpbytes-detail-tabnav__link.is-active {
    color: var(--bp-primary);
    box-shadow: inset 0 -2px 0 var(--bp-primary);
}

.bpbytes-detail-tabnav__count {
    color: var(--bp-text-faint);
    font-weight: 600;
}

/* The subpanel column's own title bar (get_form_header() - just an <h3>, no buttons of its
   own; Create/search/pagination live in the body below it) is redundant once its label is
   already the active tab above it. Scoped to "bpbytes-tabs-list" - the marker
   detailViewTabs.js only adds once it has actually built the tab bar for this page - so a
   subpanel's title stays visible (its normal, untouched look) if that script doesn't run. */
#subpanel_list.bpbytes-tabs-list > li[id^="whole_subpanel_"] > div[id^="subpanel_title_"] {
    display: none;
}

/*
 * Role (ACLRoles) detail page: the name/description summary and the permissions matrix. The page is old table markup
 * with no classes of its own, apart from the access values, which carry aclAll / aclOwner / aclGroup / aclNone /
 * aclNotSet / aclEnabled / aclDisabled. Everything below is scoped to a page that has the matrix (#ACLEditView).
 */
#content.bpbytes-content #pagecontent:has(#ACLEditView) > table.detail.view {
    /* the same card as a record's detail panel (.detail.view.detail508): label column on the left, value beside it */
    width: 100% !important;
    margin: 6px 0 16px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    background: var(--bp-surface);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-lg);
    box-shadow: var(--bp-shadow);
}

#content.bpbytes-content #pagecontent:has(#ACLEditView) > table.detail.view td {
    padding: 10px 20px;
    font-size: 13px;
    vertical-align: top;
    color: var(--bp-text);
    border: none;
    border-bottom: 1px solid var(--bp-border);
    text-align: left !important;
    width: auto !important;
}

#content.bpbytes-content #pagecontent:has(#ACLEditView) > table.detail.view tr:last-child td {
    border-bottom: none;
}

#content.bpbytes-content #pagecontent:has(#ACLEditView) > table.detail.view tr:hover td {
    background: var(--bp-surface-alt);
}

#content.bpbytes-content #pagecontent:has(#ACLEditView) > table.detail.view td:first-child {
    width: 240px !important;
    color: var(--bp-text-muted);
    font-weight: 600;
}

#content.bpbytes-content #pagecontent:has(#ACLEditView) > table.detail.view td:first-child b {
    font-weight: 600;
}

/* "Double click on a cell to change value." */
#content.bpbytes-content #pagecontent:has(#ACLEditView) > p > b {
    display: inline-block;
    margin: 4px 0 12px;
    padding: 6px 12px;
    border-radius: var(--bp-radius-sm);
    background: var(--bp-accent-soft);
    color: var(--bp-info);
    font-size: 12.5px;
    font-weight: 600;
}

/* The matrix: one card, a header row that stays put while the long list scrolls, a row per module */
#content.bpbytes-content #category_data > form > table.detail.view {
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bp-surface);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-lg);
}

#content.bpbytes-content #category_data table.detail.view td {
    padding: 7px 12px;
    border: none;
    border-bottom: 1px solid var(--bp-border);
    font-size: 13px;
    vertical-align: middle;
}

#content.bpbytes-content #category_data tr[id^="ACLEditView_Access_"]:not(#ACLEditView_Access_Header) > td:first-child {
    width: 28%;
    padding-left: 20px;
    text-align: left;
    color: var(--bp-text);
}

#content.bpbytes-content #category_data tr[id^="ACLEditView_Access_"]:not(#ACLEditView_Access_Header) > td:first-child b {
    font-weight: 600;
}

#content.bpbytes-content #category_data tr#ACLEditView_Access_Header > td {
    position: sticky;
    top: var(--bp-topbar-height);
    z-index: 3;
    padding: 12px;
    background: var(--bp-surface-alt);
    border-bottom: 1px solid var(--bp-border-strong);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bp-text-muted);
}

#content.bpbytes-content #category_data tr#ACLEditView_Access_Header > td b {
    font-weight: 700;
}

#content.bpbytes-content #category_data tr#ACLEditView_Access_Header > td > div[onclick] {
    cursor: pointer;
}

#content.bpbytes-content #category_data tr#ACLEditView_Access_Header > td > div[onclick]:hover {
    color: var(--bp-primary);
}

#content.bpbytes-content #category_data tr[id^="ACLEditView_Access_"]:not(#ACLEditView_Access_Header):nth-child(even) > td {
    background: var(--bp-surface-alt);
}

#content.bpbytes-content #category_data tr[id^="ACLEditView_Access_"]:not(#ACLEditView_Access_Header):hover > td {
    background: var(--bp-primary-soft);
}

#content.bpbytes-content #category_data tr:last-child > td {
    border-bottom: none;
}

/* The access values as pills: green = full, blue = limited to own/group records, red = none, grey = not set */
#content.bpbytes-content #category_data div[class^="acl"] {
    display: inline-block;
    min-width: 66px;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    cursor: pointer;
    background: var(--bp-border);
    color: var(--bp-text-muted);
    transition: filter var(--bp-transition);
}

#content.bpbytes-content #category_data div[class^="acl"]:hover {
    filter: brightness(0.95);
    outline: 1px dashed var(--bp-border-strong);
    outline-offset: 2px;
}

#content.bpbytes-content #category_data div.aclAll,
#content.bpbytes-content #category_data div.aclEnabled {
    background: var(--bp-success-soft);
    color: #166534;
}

#content.bpbytes-content #category_data div.aclOwner,
#content.bpbytes-content #category_data div.aclGroup {
    background: var(--bp-accent-soft);
    color: #1e5f95;
}

#content.bpbytes-content #category_data div.aclNone,
#content.bpbytes-content #category_data div.aclDisabled {
    background: var(--bp-danger-soft);
    color: #991b1b;
}

#content.bpbytes-content #category_data div.aclNotSet {
    background: var(--bp-border);
    color: var(--bp-text-muted);
}

/* The dropdown shown while a cell is being edited */
#content.bpbytes-content #category_data select[class] {
    /* the page sets style="all: initial" on these, which strips every style: !important is needed to win over it */
    all: revert !important;
    min-width: 96px !important;
    padding: 4px 8px !important;
    border: 1px solid var(--bp-border-strong) !important;
    border-radius: var(--bp-radius-sm) !important;
    font-family: inherit !important;
    font-size: 12.5px !important;
    background: var(--bp-surface) !important;
    color: var(--bp-text) !important;
}

/* Save / Cancel above and below the matrix */
#content.bpbytes-content #category_data form > input.button {
    margin: 0 6px 12px 0;
}

#content.bpbytes-content #category_data form > div:last-child {
    padding: 14px 0 4px;
}