/*
 * BPBytes dashboard re-skin.
 * Targets core include/MySugar/tpls/MySugar.tpl (.dashboardTabList tabs, <ul class="noBullet">
 * dashlet columns) and Dashlet.php's header builder (#dashlet_header_{id}.hd > .hd-center,
 * .bd > .bd-center). CSS only — drag/drop (ygDDList) and add/remove/configure dashlet JS
 * hooks are untouched.
 *
 * Direction: an underline tab bar matching the same pattern already used for ListView's studio
 * tabs, "Add Tab"/"Add Dashlets" shrunk down to small icon-only ghost buttons at the end of the
 * tab row instead of full text-label links (the standard SaaS pattern — a small "+" to add a
 * widget/tab, not a prominent button competing with the actual page content), and the dashlet
 * cards themselves cleaned up with consistent spacing/shadow/radius.
 */

/*
 * Welcome/safety-count greeting + KPI cards — custom/modules/Home/BPBytesSafetyCounts.php +
 * custom/modules/Home/tpls/bpbytes_safety_counts.tpl. Fetched and inserted at the top of the page
 * by custom/themes/BPBytes/js/style.js's loadSafetyCounts(), NOT rendered as a dashlet.
 *
 * An earlier version WAS a dashlet (part of welcomeDashlet), hoisted to the top of #pagecontent
 * via JS so it read as a full-width row above the tab bar. That broke SuiteCRM's own dashlet-
 * layout tracking: getLayout() (include/MySugar/javascript/MySugar.js) rebuilds each column's
 * saved dashlet list by scanning which dashlet elements are still live in the DOM whenever ANY
 * dashlet gets removed/dragged, so moving this one out of its column meant that scan eventually
 * lost track of it, silently dropping it from the saved layout (needing a database fix each
 * time). Rendering it via its own entry point instead means it's never part of a dashlet column
 * in the first place — nothing for that scan to lose — while still landing above the whole
 * dashboardTabList/dashlet-grid table, full width, as originally wanted.
 */
#content.bpbytes-content .bpbytes-welcome-greeting {
    position: relative;
    overflow: hidden;
    margin-bottom: 14px;
    padding: 14px 24px;
    border-radius: var(--bp-radius-lg);
    border: 1px solid #dfe4f7;
    background: #eef1fc;
}

#content.bpbytes-content .bpbytes-welcome-greeting h2 {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 700;
    color: var(--bp-title);
}

#content.bpbytes-content .bpbytes-welcome-wave {
    margin-left: -4px;
    display: inline-block;
}

#content.bpbytes-content .bpbytes-welcome-greeting p {
    margin: 0;
    font-size: 14px;
    color: var(--bp-text-muted);
}

/*
 * A responsive KPI-card grid (auto-fit, so it reflows from 6 across down to 2 on narrow screens)
 * with a colored accent per severity: red for open incidents/hazards, amber for open tasks/
 * outstanding inductions & documents, blue for the compliance card. Each card links straight to
 * that module's filtered listview.
 */
#content.bpbytes-content .bpbytes-welcome-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 16px;
    margin: 0 0 14px;
}

/*
 * Each variant (--danger/--warn/--good below) only ever sets these two custom properties — every
 * other rule here (top bar, icon, hover glow) reads them, so the fancy treatment stays consistent
 * across variants without three separate copies of it.
 */
#content.bpbytes-content .bpbytes-metric-card {
    --metric-accent: var(--bp-border-strong);
    --metric-accent-soft: var(--bp-surface-alt);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 12px 12px 14px;
    background: var(--bp-surface);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-xl);
    box-shadow: var(--bp-shadow);
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    position: relative;
    overflow: hidden;
    justify-content: flex-start;
}

/* Soft accent-tinted glow blob in the top corner — purely decorative, sits behind the content
   (negative z-index) and is clipped to the card's rounded corners by overflow:hidden above. */
#content.bpbytes-content .bpbytes-metric-card::after {
    content: "";
    position: absolute;
    top: -34px;
    right: -34px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--metric-accent-soft);
    opacity: 0.55;
    z-index: -1;
    transition: transform 0.35s ease;
}

/* (no coloured top bar: the tinted icon square carries the colour) */

#content.bpbytes-content .bpbytes-metric-card:hover {
    transform: translateY(-4px);
    border-color: var(--metric-accent-soft);
    box-shadow: var(--bp-shadow-lg), 0 16px 32px -18px var(--metric-accent);
    text-decoration: none;
}

#content.bpbytes-content .bpbytes-metric-card:hover::after {
    transform: scale(1.2);
}

#content.bpbytes-content .bpbytes-metric-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--bp-radius);
    color: var(--metric-accent);
    background: linear-gradient(145deg, var(--metric-accent-soft), var(--bp-surface));
    transition: transform 0.25s ease;
}

#content.bpbytes-content .bpbytes-metric-card:hover .bpbytes-metric-card__icon {
    transform: scale(1.08) rotate(-4deg);
}

#content.bpbytes-content .bpbytes-metric-card__icon svg {
    width: 28px;
    height: 28px;
}

#content.bpbytes-content .bpbytes-metric-card__value {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--metric-accent, var(--bp-text));
    line-height: 1.05;
}

#content.bpbytes-content .bpbytes-metric-card__label {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--bp-text);
    line-height: 1.3;
}

#content.bpbytes-content .bpbytes-metric-card__sub {
    font-size: 13.5px;
    color: var(--bp-text-faint);
    margin-top: -2px;
}

#content.bpbytes-content .bpbytes-metric-card__sub--good {
    color: var(--bp-success);
    font-weight: 600;
}

#content.bpbytes-content .bpbytes-metric-card--danger {
    --metric-accent: var(--bp-danger);
    --metric-accent-soft: var(--bp-danger-soft);
}

#content.bpbytes-content .bpbytes-metric-card--warn {
    --metric-accent: var(--bp-warning);
    --metric-accent-soft: var(--bp-warning-soft);
}

#content.bpbytes-content .bpbytes-metric-card--good {
    --metric-accent: var(--bp-accent);
    --metric-accent-soft: var(--bp-accent-soft);
}

/*
 * Per the SaaS-dashboard direction ("i don't need dashboard, add tab, dashlet etc.") this whole
 * page-tab strip — the "DASHBOARD" page tab plus the "Add Dashlets"/"Add Tab" controls — is
 * hidden outright. MySugar.tpl is core and theme-blind (no custom/themes override point), so
 * display:none here is the only custom/themes-only way to drop it. (An earlier attempt at this
 * coincided with the dashboard's counts/dashlets going missing, but that turned out to be an
 * unrelated data issue — welcomeDashlet had been removed from the saved dashboard preference,
 * fixed separately — not something hiding this tab strip itself caused.)
 */
#content.bpbytes-content ul.dashboardTabList {
    display: none;
}

#content.bpbytes-content ul.dashboardTabList li {
    list-style: none;
}

#content.bpbytes-content ul.dashboardTabList li a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    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;
}

#content.bpbytes-content ul.dashboardTabList li a:hover {
    color: var(--bp-primary);
    background: var(--bp-surface-alt);
    text-decoration: none;
}

/* Active tab — MySugar.tpl doesn't mark this with a dedicated class, but the selected page's
   link is the one immediately followed by its (non-display:none) tab-content container's own
   styling elsewhere; matching ListView's studio-tabs underline treatment for ANY tab that's
   currently focused/hovered keeps the two tab bars visually consistent even without that hook. */
#content.bpbytes-content ul.dashboardTabList li a:focus {
    color: var(--bp-primary);
    box-shadow: inset 0 -2px 0 var(--bp-primary);
    outline: none;
}

/*
 * "Add Dashlets" / "Add Tab" — shrunk to small icon-only ghost buttons (the standard SaaS
 * pattern for a secondary, occasional action like this) instead of full text-label links
 * competing with the real tabs for attention.
 *
 * The two labels aren't marked up the same way — "Add Tab"'s is wrapped in a <span>, but
 * "Add Dashlets"'s is a bare text node directly inside the <a> with no wrapping element at all —
 * so a rule hiding a child <span> only ever caught one of them, leaving the other's text
 * bleeding out from behind the icon. text-indent hides a block's inline content (wrapped or
 * not) regardless, and the icon is pulled out of that flow via absolute positioning so the
 * text-indent pushing it off-screen doesn't take the icon down with it.
 */
/* Whatever renders inside li.addButton beyond the 32px round icon button (a stray pill-shaped
   box sitting above it) gets clipped here rather than styled — the icon button itself is sized
   and centered by the rules below, so a fixed 32px/hidden-overflow box only ever shows that. */
#content.bpbytes-content ul.dashboardTabList li.addButton {
    margin-left: 2px;
    height: 32px;
    overflow: hidden;
}

#content.bpbytes-content ul.dashboardTabList li.addButton a {
    position: relative;
    display: block;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
    color: var(--bp-text-muted);
    background: var(--bp-surface-alt);
    overflow: hidden;
    white-space: nowrap;
    text-indent: -9999px;
}

#content.bpbytes-content ul.dashboardTabList li.addButton a:hover {
    background: var(--bp-primary-soft);
    color: var(--bp-primary);
}

#content.bpbytes-content ul.dashboardTabList li.addButton a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-indent: 0;
    width: 14px;
    height: 14px;
    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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%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='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}

/* The SAME "Add Dashlets" action is also duplicated as a full text button above the dashlet
   grid — redundant next to the icon button above, so hidden here rather than shown twice. */
#content.bpbytes-content input#add_dashlets {
    display: none;
}

#content.bpbytes-content ul.noBullet {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* The dashlet grid's columns are plain <td width="..."> cells in a cellspacing="0" table
   (MySugar.tpl) — with no gap between them, side-by-side dashlets butt straight up against each
   other. border-spacing seemed like the obvious fix but it adds spacing around the OUTSIDE of
   the table too, not just between cells — which shifted the first column out of alignment with
   #bpbytes-safety-counts/the greeting above it. Targeting every column except the first instead
   (":not(:first-child)") only touches the gaps that actually need one, leaving the left edge
   exactly where it already lined up. */
#content.bpbytes-content #pageContainer table td[width]:not(:first-child) {
    padding-left: 20px;
}

/*
 * The saved dashboard layout (user_preferences) doesn't actually carry a 'width' value for either
 * column, so the <td width="{$data.width}"> attributes render empty — with the browser's default
 * table-layout:auto, column widths then come from CONTENT size instead of a fixed split, which
 * only looked equal by coincidence at some viewport widths ("looks the same collapsed, left is
 * bigger expanded" — less total width makes the content-based imbalance more pronounced).
 * table-layout:fixed ignores content size, but still needs an explicit width per column (an even
 * split otherwise) — 65/35 rather than 50/50 so the wider Compliance-style tables don't feel
 * squeezed while the narrower activity-stream-style column doesn't get more room than it needs.
 */
#content.bpbytes-content #pageContainer table {
    table-layout: fixed;
    width: 100%;
}

#content.bpbytes-content #pageContainer table td[width]:first-child {
    width: 60%;
}

#content.bpbytes-content #pageContainer table td[width]:not(:first-child) {
    width: 40%;
}

#content.bpbytes-content .dashletPanel {
    margin-bottom: 24px;
}

/* 0 horizontal padding put the title text flush against the card's own border/rounded corner,
   which looked cramped — a small margin instead of full padding, so it doesn't reintroduce the
   larger 12px offset from "Welcome back" that prompted removing the padding in the first place. */
#content.bpbytes-content div[id^="dashlet_header_"].hd {
    background: var(--bp-header-tint);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-lg) var(--bp-radius-lg) 0 0;
    padding: 10px 0;
}

#content.bpbytes-content div[id^="dashlet_header_"] .tl,
#content.bpbytes-content div[id^="dashlet_header_"] .tr {
    display: none;
}

#content.bpbytes-content div[id^="dashlet_header_"] .hd-center table.formHeader {
    width: 100%;
}

/* The title's real markup (core's generic get_form_header() output) is a bare
   <table class="formHeader h3Row"><h3>, which carries the browser's default h3 top/bottom
   margin — that's what was pushing it off-center inside .hd's padding above. Left margin is a
   small nudge off the card's edge (.hd's own padding is 0, see above) rather than reintroducing
   the larger 12px offset from "Welcome back" that prompted removing that padding in the first
   place. Font-size/weight/color/layout untouched. */
#content.bpbytes-content div[id^="dashlet_header_"] .hd-center table.formHeader h3 {
    margin: 0 8px;
    text-align: left;
}

#content.bpbytes-content div[id^="dashlet_header_"] .dashlet-title h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--bp-text);
    text-align: left;
}

/* Per-dashlet edit/refresh/close controls — hidden outright rather than restyled, per the
   direction of keeping the dashboard clean of management chrome for day-to-day use. */
#content.bpbytes-content div[id^="dashlet_header_"] .dashletToolSet {
    display: none;
}

/*
 * No horizontal padding here anymore (was 14px each side) — box-shadow-based bleed tricks
 * turned out unreliable on table cells across browser engines (the pagination background
 * simply stopped rendering at all rather than bleeding). Genuinely reliable fix instead: this
 * container no longer supplies ANY side inset, so the pagination row's own width:100% now
 * reaches the true card edges on its own, no bleeding required — and the header/data rows,
 * which DO still want that same 14px inset, now carry it directly on their own cells (see
 * thead th / tbody td below) instead of inheriting it from here. Same total look for them,
 * just relocated to where the pagination row won't inherit it too.
 */
#content.bpbytes-content div.bd {
    background: var(--bp-surface);
    border: 1px solid var(--bp-border);
    border-top: none;
    border-radius: 0 0 var(--bp-radius-lg) var(--bp-radius-lg);
    box-shadow: var(--bp-shadow);
    padding: 4px 0 0;
}

#content.bpbytes-content div.bd .ml {
    display: none;
}

/* .bd-center (Dashlet.php's actual content wrapper, nested one level inside .bd) — tightened
   alongside .bd's own padding above. Bottom padding dropped from both this and .bd above (was
   4px each, 8px combined) — every DashletGeneric dashlet always ends in the pagination row, so
   removing the container's own bottom inset lets that row's background reach the card's true
   bottom edge and sit flush against its rounded corners, like a real footer, instead of
   floating with a gap beneath it. The row's own padding (below) still gives it breathing room
   from the inside — it just no longer needs the container to supply that space too. */
#content.bpbytes-content div.bd .bd-center {
    padding-top: 4px !important;
    padding-bottom: 0 !important;
}

/* DashletFooter.tpl always emits .mr/.ft/.bl/.ft-center/.br — empty corner-filler divs from the
   classic YUI panel chrome, unused by (and unstyled for) any dashlet here, but still adding up
   to visible height at the bottom of the card since nothing zeroed them out before. .bl/.ft-
   center/.br weren't hidden alongside .mr/.ft the first time around (assumed to be children of
   .ft and so already hidden by it, but if they're siblings instead — DashletFooter.tpl not
   re-checked to confirm nesting either way — that assumption leaves exactly this residual
   height). Scoped to .dashletPanel specifically — .hd/.bd/.ft is a generic YUI naming convention
   other widgets (popups, dialogs) may rely on elsewhere, so this shouldn't reach outside a
   dashlet's own card. */
#content.bpbytes-content .dashletPanel .mr,
#content.bpbytes-content .dashletPanel .ft,
#content.bpbytes-content .dashletPanel .bl,
#content.bpbytes-content .dashletPanel .ft-center,
#content.bpbytes-content .dashletPanel .br {
    display: none;
}

/*
 * DashletGeneric-based dashlets (any listview-driven dashlet, e.g. My Compliance Status) embed
 * a <table id="dashletPanel" class="list view default dashletPanel"> — sharing "list view" with
 * a full ListView page's own table means listview.css's card treatment (border/radius/shadow,
 * plus the sticky column-header pinned to the topbar) was applying a SECOND nested card inside
 * this one's .hd/.bd card, and a header sticking to a topbar position that means nothing at this
 * scale. The outer .hd/.bd pairing above is the only card this needs.
 */
#content.bpbytes-content div.bd table.list.view {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

#content.bpbytes-content div.bd table.list.view thead th {
    position: static;
    text-align: left !important;
}

#content.bpbytes-content div.bd table.list.view thead th a {
    color: inherit;
    font-weight: inherit;
}

/*
 * There's a large blank gap between the last real data row and the pagination row now that it's
 * moved to the actual bottom (style.js's moveDashletPaginationToBottom()) — most likely reserved
 * height (min-height/height, possibly set inline by core JS) sized for a fixed row count that
 * this particular dashlet just isn't filling. Forcing height back to auto/0 wherever that
 * reservation could live collapses it regardless of which one it actually is. Includes the
 * dashlet's own outer wrapper (#dashlet_entire_{id}, matched by attribute prefix since the id is
 * dynamic per instance) in case an AJAX tab switch (SUGAR.mySugar.retrieveDashlet) leaves a
 * pixel height behind from a previous tab's taller content — core's own resize/refresh logic can
 * set that inline, and it wouldn't shrink back down on its own for a shorter new tab's content.
 */
#content.bpbytes-content div.bd,
#content.bpbytes-content div.bd .bd-center,
#content.bpbytes-content div.bd table.list.view,
#content.bpbytes-content div.bd table.list.view tbody,
#content.bpbytes-content div.bd tr.pagination,
#content.bpbytes-content div.bd tr.pagination > td,
#content.bpbytes-content div[id^="dashlet_entire_"] {
    height: auto !important;
    min-height: 0 !important;
}

/*
 * The pagination row is actually moved to the end of the table in the DOM by style.js's
 * moveDashletPaginationToBottom() — display:table-footer-group on a bare <tr> (tried first) isn't
 * reliable, since that value is meant for a <tfoot>-like group container, not an individual row;
 * most browsers just ignore it there and leave the row in source order. Centered (matching the
 * target layout) rather than right-aligned, and with the default cell padding/line-height cut
 * down, since the raw row was sized for a full-page listview toolbar, not a compact widget.
 */
/* Whatever exact element that pill outline was coming from (never pinned down live), this
   strips border/background/radius/shadow from every descendant of the row, not just the <td>
   itself, so it's gone regardless of which one it actually was. */
#content.bpbytes-content div.bd tr.pagination,
#content.bpbytes-content div.bd tr.pagination * {
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

/* The blanket "background: none" above also strips these mask-icons' background-color, their
   only paint source (icons.css's .suitepicon rule) - restore it so the icons stay visible. */
#content.bpbytes-content div.bd tr.pagination .button .suitepicon {
    background-color: currentColor !important;
}

/*
 * Matches the full-page ListView's own pagination row (listview.css's tr#pagination) — same
 * tinted background band and top divider. Targets the row's own <td colspan="..."> directly
 * (DashletGenericDisplay.tpl gives it a colspan spanning every column, exactly like
 * ListViewPagination.tpl's own <td colspan>, so this already spans the full width of the
 * dashlet's own table). Now that div.bd supplies no padding of its own (moved onto thead th /
 * tbody td above instead), a plain background at width:100% reaches the card's true edges
 * directly — no bleed trick needed. bottom border-radius matches div.bd's own bottom corners,
 * since this is now the card's visual floor. Comes after the blanket strip rule above and
 * targets one specific element it also matches via "*" — same specificity, both !important,
 * later source order wins — so this re-applies background/border to just that cell while every
 * element inside it (the buttons, the nested layout table) stays transparent/borderless as that
 * rule already set.
 */
#content.bpbytes-content div.bd tr.pagination > td {
    display: table-cell !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: var(--bp-surface-alt) !important;
    border-top: 1px solid var(--bp-border) !important;
    border-radius: 0 0 var(--bp-radius-lg) var(--bp-radius-lg) !important;
}

/* !important required — a broader rule below (div.bd td { text-align: left !important }, for
   dashlets that render inline align="center" of their own) also carries !important, and an
   !important declaration always wins over a non-important one regardless of specificity. */
#content.bpbytes-content div.bd tr.pagination td {
    padding: 5px 12px !important;
    line-height: 1;
    text-align: center !important;
}

/*
 * The real reason centering never actually worked, confirmed from live markup: the pagination
 * cell contains a SECOND, nested <table width="100%"> with two cells of its own — an empty
 * <td align="left">&nbsp;</td> spacer, then the real buttons in a <td align="right">. That empty
 * spacer exists specifically to push the buttons to the right by eating up however much space is
 * left, which no text-align on the outer cell can ever override. Hiding the spacer shrinks what's
 * left to just the real content, but a <table> is block-level — margin:auto alone didn't visibly
 * center it (still reset to left), so it's switched to inline-table instead, which the outer
 * cell's own text-align:center (below) can actually center like any other inline content.
 */
#content.bpbytes-content div.bd tr.pagination table {
    display: inline-table !important;
    width: auto !important;
    margin: 0 auto !important;
    /* inline-table defaults to baseline alignment inside its cell, the same reason an inline
       image reserves a few extra pixels below itself — that's the actual source of the large
       gap above the pagination row, not any hidden row/wrapper (confirmed empty from live DOM).
       Pinning it to middle removes that reserved space. */
    vertical-align: middle !important;
}

#content.bpbytes-content div.bd tr.pagination table td:first-child {
    display: none;
}

#content.bpbytes-content div.bd tr.pagination img,
#content.bpbytes-content div.bd tr.pagination .button {
    vertical-align: middle;
}

/* Pagination buttons — a modern rounded-square pill instead of the raw browser button look,
   matching the icon-button pattern used elsewhere in the theme. */
/* Plain icon buttons — no background/rounded chip around them, per feedback that the circle
   backdrop didn't look right; hover just tints the icon color instead. */
#content.bpbytes-content div.bd tr.pagination .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    margin-left: 2px;
    border: none;
    background: transparent;
    color: var(--bp-text-muted);
    /* Some browsers keep rendering a native disabled-control chrome (background/border) on
       <button disabled> even once background/border are overridden, unless native appearance
       is explicitly turned off — appearance:none hands rendering fully to this CSS in every
       state, not just enabled/hover. */
    -webkit-appearance: none;
    appearance: none;
}

#content.bpbytes-content div.bd tr.pagination .button:hover {
    background: transparent;
    color: var(--bp-primary);
}

/*
 * listview.css handles this for the full-page ListView's own nav buttons, but that rule is
 * scoped to button[name="listView*Button"] — DashletGenericDisplay.tpl's buttons carry no name
 * attribute at all, so they never got it: a disabled button falls back to the browser's native
 * disabled chrome (its own background/border), overriding the plain-transparent reset above
 * since that reset never targeted the :disabled state specifically — the "solid gray box" look.
 * Opacity/color matches listview.css's own button[name="listView*Button"]:disabled, kept solid
 * enough to stay legible rather than fading to near-invisible.
 */
#content.bpbytes-content div.bd tr.pagination .button:disabled {
    opacity: 0.85;
    color: var(--bp-text-muted);
    background: transparent !important;
    border: none !important;
}

#content.bpbytes-content div.bd tr.pagination .button .suitepicon {
    width: 14px;
    height: 14px;
}

#content.bpbytes-content div.bd tr.pagination .pageNumbers {
    margin: 0 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--bp-text);
}

/*
 * Clean, minimal listview inside a dashlet — normal-weight muted header labels instead of the
 * full-page listview's bold/dark ones, no row background at all (both odd/even rows already
 * share the same background rule, but re-stating it here keeps this independent of that rule if
 * it ever changes), and just a thin bottom line per row rather than a bordered/shadowed grid.
 */
/* Padding !important — listview.css's generic table.list.view thead th rule (18px 10px, also
    !important) would otherwise still win on specificity ties; the compact 8px inset keeps the
    headings aligned with the dashlet's record text while preserving the header's vertical space. */
#content.bpbytes-content div.bd table.list.view thead th {
    background: transparent;
    border-bottom: 1px solid var(--bp-border);
    font-weight: 600;
    font-size: 12px;
    color: var(--bp-text-muted);
    padding: 18px 8px !important;
    text-align: left !important;
}

#content.bpbytes-content div.bd table.list.view tbody tr.oddListRowS1,
#content.bpbytes-content div.bd table.list.view tbody tr.evenListRowS1 {
    background: transparent;
}

/*
 * Reverted here: nowrap + width:1% on the last column (tried to stop "No Action Required" from
 * wrapping) backfired badly under real content widths — instead of shrinking that column to fit
 * its content, auto-layout collapsed it to nothing on some dashlets, hiding the column entirely.
 * Back to plain wrapping (safe, if not ideal) — tighter padding instead frees up real horizontal
 * room without fighting the table layout algorithm.
 */
/* 20px = the original 6px plus the 14px div.bd no longer supplies — same total inset as before. */
#content.bpbytes-content div.bd table.list.view tbody td {
    border-bottom: 1px solid var(--bp-border);
    padding: 8px 20px;
}

/* Keep compact dashlet action/count buttons on one line without depending on a module field
   class. */
#content.bpbytes-content div.bd table.list.view tbody td .btn {
    white-space: nowrap;
}

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

/* Several dashlets (activity feed, Learning list, etc.) render their rows with an inline
   align="center"/text-align:center of their own — a CSS text-align has to actually target the
   element itself (not just an ancestor) with enough weight to beat that, since inheriting
   text-align:left from a parent doesn't override an element's own inline centering. */
#content.bpbytes-content div.bd,
#content.bpbytes-content div.bd p,
#content.bpbytes-content div.bd div,
#content.bpbytes-content div.bd li,
#content.bpbytes-content div.bd td,
#content.bpbytes-content div.bd span {
    text-align: left !important;
}

#content.bpbytes-content #dashletsDialog .hd {
    background: var(--bp-title);
    color: #fff;
    border-radius: var(--bp-radius) var(--bp-radius) 0 0;
    padding: 12px 16px;
    font-weight: 700;
}

#content.bpbytes-content #dashletsDialog .bd {
    border-radius: 0 0 var(--bp-radius) var(--bp-radius);
}


/* Dashlet titles: the same bold 15px heading as the detail-view panels */
#content.bpbytes-content .hd-center .formHeader h3,
#content.bpbytes-content .hd-center .formHeader h3 span {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--bp-title);
}

/* Compliance "View 0/1" buttons: soft tinted pills instead of saturated Bootstrap buttons */
#content.bpbytes-content table span.btn {
    border: 0;
    border-radius: 999px;
    padding: 4px 14px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    box-shadow: none;
    text-shadow: none;
    background-image: none;
}

#content.bpbytes-content table span.btn.btn-primary { background: rgba(54, 147, 217, 0.15); color: #1d6aa8; }
#content.bpbytes-content table span.btn.btn-success { background: var(--bp-success-soft); color: #15803d; }
#content.bpbytes-content table span.btn.btn-danger  { background: var(--bp-danger-soft); color: #b91c1c; }
#content.bpbytes-content table span.btn.btn-warning { background: var(--bp-warning-soft); color: #92400e; }
#content.bpbytes-content table span.btn:hover { filter: brightness(0.96); }

/* ---- Activity Stream post row ----
   "System Admin | [ full-width text box ] | Save", filling the dashlet's top row. The show-more arrow and the
   hidden image/link options it opens are not used, and the empty header row above the entries is removed. */
#content.bpbytes-content .dashletNonTable > table:has(span[id^="more_img_"]),
#content.bpbytes-content .dashletNonTable > table:has(span[id^="more_img_"]) > tbody {
    display: block;
    width: auto !important;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
}

#content.bpbytes-content .dashletNonTable > table:has(span[id^="more_img_"]) {
    margin: 14px 16px;
}

#content.bpbytes-content .dashletNonTable > table:has(span[id^="more_img_"]) > tbody > tr {
    display: flex;
    align-items: center;
    gap: 12px;
}

#content.bpbytes-content .dashletNonTable > table:has(span[id^="more_img_"]) td {
    display: block;
    padding: 0;
}

#content.bpbytes-content .dashletNonTable > table:has(span[id^="more_img_"]) td:nth-child(1),
#content.bpbytes-content .dashletNonTable > table:has(span[id^="more_img_"]) td:nth-child(3) {
    flex: 0 0 auto;
}

#content.bpbytes-content .dashletNonTable > table:has(span[id^="more_img_"]) td:nth-child(2) {
    flex: 1 1 auto;
    min-width: 0;
}

#content.bpbytes-content .dashletNonTable > table:has(span[id^="more_img_"]) td:nth-child(4) {
    display: none;
}

#content.bpbytes-content .dashletNonTable span[id^="more_img_"],
#content.bpbytes-content .dashletNonTable span[id^="less_img_"],
#content.bpbytes-content .dashletNonTable div[id^="more_"] {
    display: none !important;
}

#content.bpbytes-content .dashletNonTable input#text {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}

/* Same filled violet button as the login page */
#content.bpbytes-content .dashletNonTable input[type="submit"].button {
    min-width: 88px;
    background: var(--bp-primary);
    border-color: var(--bp-primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(85, 71, 181, 0.25);
}

#content.bpbytes-content .dashletNonTable input[type="submit"].button:hover {
    background: var(--bp-primary-hover);
    border-color: var(--bp-primary-hover);
}

#content.bpbytes-content .sugarFeedDashlet thead {
    display: none;
}

/* Activity Stream entries: the date and "Reply" share one line and the spacing is tighter, so each entry takes less height */
#content.bpbytes-content .sugarFeedDashlet tr.oddListRowS1 > td,
#content.bpbytes-content .sugarFeedDashlet tr.evenListRowS1 > td {
    padding-top: 9px;
    padding-bottom: 9px;
}

#content.bpbytes-content .sugarFeedDashlet td > div[style*="padding"] {
    padding: 2px 3px !important;
    line-height: 1.4;
}

#content.bpbytes-content .sugarFeedDashlet .byLineBox {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-top: 1px;
    line-height: 1.4;
}

#content.bpbytes-content .sugarFeedDashlet .byLineLeft,
#content.bpbytes-content .sugarFeedDashlet .byLineRight {
    float: none;
    display: inline;
    width: auto;
    margin: 0;
    padding: 0;
}

#content.bpbytes-content .sugarFeedDashlet .byLineLeft {
    color: var(--bp-text-faint);
}

/* Activity Stream entries wrap onto the next line instead of running past the card's edge */
#content.bpbytes-content .sugarFeedDashlet td,
#content.bpbytes-content .sugarFeedDashlet td > div,
#content.bpbytes-content .sugarFeedDashlet th {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* ======================= Dashboard polish ======================= */

/* ---- Metric cards: the "good" card's number is blue (the others take their accent colour) ---- */
#content.bpbytes-content .bpbytes-metric-card--good .bpbytes-metric-card__value {
    color: var(--bp-info);
}


/* ---- Dashlet tables: quiet headers, roomier rows, hover highlight ---- */
#content.bpbytes-content .dashletPanel table.list thead th {
    padding: 12px 16px;
    background: var(--bp-surface-alt);
    border-bottom: 1px solid var(--bp-border);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--bp-text);
    white-space: normal;
}

#content.bpbytes-content .dashletPanel table.list thead th a,
#content.bpbytes-content .dashletPanel table.list thead th a:hover {
    color: inherit;
    text-decoration: none;
}

#content.bpbytes-content .dashletPanel table.list tbody tr > td {
    padding: 14px 16px;
    border-top: 1px solid var(--bp-border);
    vertical-align: middle;
    transition: background var(--bp-transition);
}

#content.bpbytes-content .dashletPanel table.list tbody tr:hover > td {
    background: #f7f8fe;
}

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

/* ---- Status text that core hard-codes as green / red: soft pills ---- */
#content.bpbytes-content .dashletPanel span[style*="color:green"],
#content.bpbytes-content .dashletPanel span[style*="color: green"],
#content.bpbytes-content .dashletPanel span[style*="color:red"],
#content.bpbytes-content .dashletPanel span[style*="color: red"] {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}

#content.bpbytes-content .dashletPanel span[style*="color:green"],
#content.bpbytes-content .dashletPanel span[style*="color: green"] {
    background: var(--bp-success-soft);
    color: #15803d !important;
}

#content.bpbytes-content .dashletPanel span[style*="color:red"],
#content.bpbytes-content .dashletPanel span[style*="color: red"] {
    background: var(--bp-danger-soft);
    color: #b91c1c !important;
}

/* ---- "Start Course": a solid violet action, not a faded pill (its link carries inline white text) ---- */
#content.bpbytes-content .dashletPanel table span.btn:has(> a) {
    background: var(--bp-primary);
    color: #fff;
    box-shadow: 0 3px 10px rgba(85, 71, 181, 0.25);
}

#content.bpbytes-content .dashletPanel table span.btn:has(> a):hover {
    background: var(--bp-primary-hover);
    filter: none;
}

#content.bpbytes-content .dashletPanel table span.btn > a {
    color: inherit !important;
}

/* ---- Pagination bar: a light footer strip with a divider ---- */
#content.bpbytes-content .dashletPanel tr.pagination > td {
    padding: 10px 16px;
    background: var(--bp-surface-alt);
    border-top: 1px solid var(--bp-border);
    font-size: 12.5px;
    color: var(--bp-text-muted);
}

/* ---- Dashlet tables, second pass ---- */


/* No empty strip under the table / pagination bar at the bottom of a dashlet card */
#content.bpbytes-content .dashletPanel table.list {
    margin-bottom: 0;
}

#content.bpbytes-content .dashletPanel tr.pagination > td {
    border-radius: 0 0 var(--bp-radius-lg) var(--bp-radius-lg);
}

/* One thin divider between rows (core also draws a border under each cell, which doubled it) */

#content.bpbytes-content .dashletPanel table.list tbody tr:first-child > td {
    border-top: 0;
}

/* Exactly one divider line between rows: the cell's top border (a more specific core rule re-adds the bottom one) */
#content.bpbytes-content .dashletPanel table.list tbody tr > td {
    border-bottom-width: 0 !important;
}

/* Dashlet table cells wrap long text inside their own column instead of running into the next one */
#content.bpbytes-content .dashletPanel table.list td,
#content.bpbytes-content .dashletPanel table.list th,
#content.bpbytes-content .dashletPanel table.list td a {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
}

/* ...except the pills and buttons, which stay on one line */
#content.bpbytes-content .dashletPanel table.list td span.btn,
#content.bpbytes-content .dashletPanel table.list td span[style*="color:green"],
#content.bpbytes-content .dashletPanel table.list td span[style*="color:red"] {
    white-space: nowrap !important;
}


#content.bpbytes-content .bpbytes-metric-card__icon svg {
    width: 22px;
    height: 22px;
}


/* "Start Course" is the main action in its row: a comfortable 34px-tall button, larger than the small status pills */
#content.bpbytes-content .dashletPanel table span.btn:has(> a) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 18px;
    font-size: 13px;
}

#content.bpbytes-content .dashletPanel table span.btn:has(> a) > a {
    display: flex;
    align-items: center;
}

/* The "View 0/1" pills stay small, but a touch taller to match the row's text */
#content.bpbytes-content .dashletPanel table span.btn:not(:has(> a)) {
    padding-top: 5px;
    padding-bottom: 5px;
}

/* All row action buttons ("Start Course", "Submit", ...) share Bootstrap's .btn-sm: one solid violet, 34px-tall style.
   The View x/y status pills use .userLearningDetail / .userDocumentDetail and stay small. */
#content.bpbytes-content .dashletPanel table span.btn.btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 700;
    background: var(--bp-primary);
    color: #fff;
    box-shadow: 0 3px 10px rgba(85, 71, 181, 0.25);
    cursor: pointer;
}

#content.bpbytes-content .dashletPanel table span.btn.btn-sm:hover {
    background: var(--bp-primary-hover);
    filter: none;
}

/* ---- Dashlet table columns ----
   Core fixes every column at the same width, so the name and Action columns were cramped and a long Action pill
   ("No Action Required") ran out of the card. Columns now size to their content: date, status and action take
   only the room they need, and the first (name) column gets all the rest. */
#content.bpbytes-content .dashletPanel table.list:not(.sugarFeedDashlet table) {
    table-layout: auto !important;
    width: 100% !important;
}

#content.bpbytes-content .dashletPanel table.list:not(.sugarFeedDashlet table) th:not(:first-child),
#content.bpbytes-content .dashletPanel table.list:not(.sugarFeedDashlet table) tbody td:not(:first-child) {
    width: 1%;
}

#content.bpbytes-content .dashletPanel table.list:not(.sugarFeedDashlet table) tbody td:not(:first-child) {
    white-space: nowrap !important;
}

#content.bpbytes-content .dashletPanel table.list:not(.sugarFeedDashlet table) th,
#content.bpbytes-content .dashletPanel table.list:not(.sugarFeedDashlet table) tbody td {
    padding-left: 14px;
    padding-right: 14px;
}

/* Text inside a button (including the link in "Start Course") never breaks across lines */
#content.bpbytes-content .dashletPanel table.list td span.btn,
#content.bpbytes-content .dashletPanel table.list td span.btn > a {
    white-space: nowrap !important;
    overflow-wrap: normal;
    word-break: normal;
}

/* Column headers in the dashlet tables stay on one line ("Due Date", "Expiry Date", "Compliance Status", ...) */
#content.bpbytes-content .dashletPanel table.list:not(.sugarFeedDashlet table) thead th {
    white-space: nowrap !important;
}

/* ...the header text sits in an inner box that carries its own inline "wrap" setting, so it needs the same rule */
#content.bpbytes-content .dashletPanel table.list:not(.sugarFeedDashlet table) thead th div,
#content.bpbytes-content .dashletPanel table.list:not(.sugarFeedDashlet table) thead th a {
    white-space: nowrap !important;
}

/* Training / Documents dashlets: the Status and Action columns (3rd and 4th) are centred, heading and cells alike */
#content.bpbytes-content .dashletPanel table.list:not(.sugarFeedDashlet table):not(:has(.userLearningDetail)):not(:has(.userDocumentDetail)) thead th:nth-child(n+3),
#content.bpbytes-content .dashletPanel table.list:not(.sugarFeedDashlet table):not(:has(.userLearningDetail)):not(:has(.userDocumentDetail)) tbody td:nth-child(n+3) {
    text-align: center;
}

#content.bpbytes-content .dashletPanel table.list:not(.sugarFeedDashlet table):not(:has(.userLearningDetail)):not(:has(.userDocumentDetail)) thead th:nth-child(n+3) div {
    text-align: center !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Compliance Status dashlet (the one holding the View x/y pills): the Compliance Learning and Compliance Documents
   columns (3rd and 4th) are centred, heading and pills alike */
#content.bpbytes-content .dashletPanel table.list:has(.userLearningDetail) thead th:nth-child(n+3),
#content.bpbytes-content .dashletPanel table.list:has(.userLearningDetail) tbody td:nth-child(n+3),
#content.bpbytes-content .dashletPanel table.list:has(.userDocumentDetail) thead th:nth-child(n+3),
#content.bpbytes-content .dashletPanel table.list:has(.userDocumentDetail) tbody td:nth-child(n+3) {
    text-align: center;
}

#content.bpbytes-content .dashletPanel table.list:has(.userLearningDetail) thead th:nth-child(n+3) div,
#content.bpbytes-content .dashletPanel table.list:has(.userDocumentDetail) thead th:nth-child(n+3) div {
    text-align: center !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* "Approval Pending" and other statuses core writes as orange text: soft amber pill like the others */
#content.bpbytes-content .dashletPanel span[style*="color:orange"],
#content.bpbytes-content .dashletPanel span[style*="color: orange"] {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--bp-warning-soft);
    color: #92400e !important;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}

/* Dashlet column headers: the sort arrow sits right next to its label */
#content.bpbytes-content .dashletPanel table.list thead th > div {
    gap: 4px !important;
    column-gap: 4px !important;
    width: auto !important;
}

#content.bpbytes-content .dashletPanel table.list thead th .suitepicon {
    margin-left: -8px !important;
}

/* The arrow is clickable (it triggers the column's sort) */
#content.bpbytes-content .dashletPanel table.list thead th .suitepicon {
    cursor: pointer;
}

/* ======================= Tabs =======================
   Dashlet tabs, list-view tabs (All / My Items ...) and detail-page tabs share one look: the selected tab is bold violet
   on a soft violet tint with a 3px violet underline and no outline box; the others are grey, darker on hover. */
#content.bpbytes-content ul.nav-tabs.nav-dashboard > li > a,
.bpbytes-detail-tabnav__link {
    border: 0 !important;
    border-radius: var(--bp-radius-sm) var(--bp-radius-sm) 0 0;
    background: transparent;
    box-shadow: none;
    color: var(--bp-text-muted);
    font-weight: 600;
    transition: background var(--bp-transition), color var(--bp-transition);
}

#content.bpbytes-content ul.nav-tabs.nav-dashboard > li > a:hover,
.bpbytes-detail-tabnav__link:hover {
    background: var(--bp-surface-alt);
    color: var(--bp-text);
}

#content.bpbytes-content ul.nav-tabs.nav-dashboard > li.active > a,
#content.bpbytes-content ul.nav-tabs.nav-dashboard > li.active > a:hover,
.bpbytes-detail-tabnav__link.is-active,
.bpbytes-detail-tabnav__link.is-active:hover {
    border: 0 !important;
    background: var(--bp-primary-soft);
    color: var(--bp-primary);
    font-weight: 700;
    box-shadow: inset 0 -3px 0 var(--bp-primary);
}

.bpbytes-detail-tabnav__link.is-active .bpbytes-detail-tabnav__count {
    color: inherit;
}

/* Unselected tabs stay grey (the global link colour would otherwise make them violet) */
#content.bpbytes-content .bpbytes-detail-tabnav__link:not(.is-active),
#content.bpbytes-content ul.nav-tabs.nav-dashboard > li:not(.active) > a {
    color: var(--bp-text-muted);
}

#content.bpbytes-content .bpbytes-detail-tabnav__link:not(.is-active):hover,
#content.bpbytes-content ul.nav-tabs.nav-dashboard > li:not(.active) > a:hover {
    color: var(--bp-text);
}

#content.bpbytes-content .bpbytes-detail-tabnav__link.is-active,
#content.bpbytes-content .bpbytes-detail-tabnav__link.is-active:hover {
    color: var(--bp-primary);
}


/*
 * The welcome panel's text (custom/modules/Home/Dashlets/welcomeDashlet, kept per role in acl_roles.dashboard_text).
 * The dashlet strips whatever styling the saved HTML carried, so how it looks is decided here and only here:
 * small section headings, muted paragraphs, the "Key Links" rows as a grid of buttons, the store badges in one row.
 */
#content.bpbytes-content .bpbytes-welcome-card {
    padding: 18px 22px 20px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--bp-text-muted);
}

#content.bpbytes-content .bpbytes-welcome-card h3 {
    margin: 20px 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bp-title);
}

#content.bpbytes-content .bpbytes-welcome-card h3:first-child {
    margin-top: 0;
}

#content.bpbytes-content .bpbytes-welcome-card p {
    margin: 0 0 8px;
}

#content.bpbytes-content .bpbytes-welcome-card a {
    color: var(--bp-primary);
    font-weight: 600;
    text-decoration: none;
}

#content.bpbytes-content .bpbytes-welcome-card a:hover {
    text-decoration: underline;
}

/* A row of links (the saved text lays them out as three floated blocks per row) becomes a grid of buttons */
#content.bpbytes-content .bpbytes-welcome-card div:has(> div > a) {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
    margin: 0 0 8px;
}

#content.bpbytes-content .bpbytes-welcome-card div:has(> div > a) > div {
    display: flex;
}

#content.bpbytes-content .bpbytes-welcome-card div:has(> div > a) > div > a {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 9px 12px;
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-sm);
    background: var(--bp-surface-alt);
    text-align: center;
    text-decoration: none;
    transition: background var(--bp-transition), border-color var(--bp-transition);
}

#content.bpbytes-content .bpbytes-welcome-card div:has(> div > a) > div > a:hover {
    background: var(--bp-accent-soft);
    border-color: var(--bp-accent);
    text-decoration: none;
}

/* App Store / Google Play badges side by side */
#content.bpbytes-content .bpbytes-welcome-card p:has(> a > img) {
    display: inline-block;
    margin: 4px 12px 0 0;
}

#content.bpbytes-content .bpbytes-welcome-card img {
    display: block;
    height: 40px;
    width: auto;
}