/* ---- Global link colour: replaces Bootstrap's coral default (a { color: #E56455 }) ---- */
#content.bpbytes-content a,
#pagecontent a {
    color: var(--bp-primary);
}

#content.bpbytes-content a:hover,
#pagecontent a:hover {
    color: var(--bp-primary-hover);
}

/* Popup menus (action menus etc.) */
a.yuimenuitemlabel,
.yui-skin-sam .yuimenuitemlabel {
    color: var(--bp-text);
}

a.yuimenuitemlabel:hover,
.yui-skin-sam .yuimenuitem-selected .yuimenuitemlabel {
    color: var(--bp-primary);
}

/* File picker button, instead of the browser default */
input[type="file"]::file-selector-button {
    margin-right: 10px;
    padding: 7px 14px;
    border: 1px solid var(--bp-border-strong);
    border-radius: var(--bp-radius-sm);
    background: var(--bp-surface);
    color: var(--bp-text);
    font-family: var(--bp-font);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--bp-transition), color var(--bp-transition);
}

input[type="file"]::file-selector-button:hover {
    border-color: var(--bp-primary);
    color: var(--bp-primary);
}

/* BPBytes shared components: buttons, badges, cards, dropdown menus */

/*
 * Module title bar — raw HTML from SugarView::getModuleTitle() (include/MVC/View/SugarView.php),
 * shared by every view type (list/detail/edit) and never passed through any theme template, so
 * it previously rendered with zero BPBytes styling at all: plain black <h2>, a browser-default-
 * blue "Create" link, and a stray create-record.gif icon stacked above it.
 */
/*
 * No horizontal padding here — SugarView::getModuleTitle()'s <h2> always starts with a literal
 * "&nbsp;" (core, meant as a separator after a breadcrumb icon this theme never renders before
 * it), so its own rendered width already pushes the visible title text a few pixels in. That
 * happens to land the text right where the studio tabs row below it (and the ListView table's
 * left edge) starts, so no padding is added on top of it here.
 */
#content.bpbytes-content .moduleTitle {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

#content.bpbytes-content .moduleTitle .clear {
    display: none;
}

#content.bpbytes-content .moduleTitle .module-title-text {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--bp-title);
    flex: 1 1 auto;
}

#content.bpbytes-content .moduleTitle .module-title-text a {
    color: inherit;
    text-decoration: none;
}

#content.bpbytes-content .moduleTitle .module-title-text .pointer {
    margin: 0 8px;
    color: var(--bp-text-faint);
    font-weight: 400;
}

/* A page title without the module-title-text class (e.g. the role pages) takes the same title look and pushes the Create
   button to the right edge, like every other page */
#content.bpbytes-content .moduleTitle > h2:not(.module-title-text) {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--bp-title);
    flex: 1 1 auto;
}

#content.bpbytes-content .moduleTitle .favorite {
    flex: 0 0 auto;
    display: flex;
    cursor: pointer;
}

#content.bpbytes-content .moduleTitle .favorite_icon_fill,
#content.bpbytes-content .moduleTitle .favorite_icon_outline {
    display: flex;
}

#content.bpbytes-content .moduleTitle .suitepicon-favorite-star,
#content.bpbytes-content .moduleTitle .suitepicon-favorite-star-outline {
    width: 18px;
    height: 18px;
    color: var(--bp-warning);
}

#content.bpbytes-content .moduleTitle .utils {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* The raw create-record.gif icon link — redundant next to the styled #create_link pill below */
#content.bpbytes-content .moduleTitle #create_image {
    display: none;
}

#content.bpbytes-content .moduleTitle #create_link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--bp-btn-h);
    padding: 0 16px;
    border-radius: var(--bp-radius-sm);
    background: var(--bp-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

#content.bpbytes-content .moduleTitle #create_link:hover {
    background: var(--bp-primary-hover);
}

#content.bpbytes-content .moduleTitle #create_link::before {
    content: "";
    width: 12px;
    height: 12px;
    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");
}

/* ListView-only search toggle button next to the title — route Bootstrap's default green to
   the theme's own brand color instead */
#content.bpbytes-content .moduleTitle .showsearch.btn-success {
    background: var(--bp-primary);
    border-color: var(--bp-primary);
}

/*
 * A few modules' view.list.php override getModuleTitle() to add one extra action next to
 * Create — a generic hook, not tied to any one feature. Originally rendered as a bare
 * <input class="button" style="float:right"> sitting as a sibling BEFORE .moduleTitle in the
 * markup — floating it clear out of the title's flex layout, with zero theme styling. Moved
 * into the .utils flex row itself (each such view.list.php inserts it right after
 * "<span class='utils'>") so it sits inline with search/Create properly, and styled here as a
 * generic outline secondary button — same height/radius/font as #create_link, but bordered
 * rather than filled, so Create still reads as the one primary action in the row. Reuse this
 * same class for any future module-specific title-bar action rather than inventing a new style.
 */
#content.bpbytes-content .moduleTitle .secondary-action-btn {
    /* Forces leftmost position within .utils's flex row (before the search icon and Create)
       regardless of where each module's view.list.php happens to insert it in the markup —
       more reliable than relying on DOM order alone. */
    order: -1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--bp-btn-h);
    padding: 0 16px;
    border: 1px solid var(--bp-border-strong);
    border-radius: var(--bp-radius-sm);
    background: var(--bp-surface);
    color: var(--bp-text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

#content.bpbytes-content .moduleTitle .secondary-action-btn:hover {
    background: var(--bp-surface-alt);
    border-color: var(--bp-primary);
    color: var(--bp-primary);
    text-decoration: none;
}

#content.bpbytes-content .moduleTitle .secondary-action-btn::before {
    content: "";
    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='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%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='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E");
}

/*
 * "Studio tabs" (All / My Items / <status> filter row with counts) — a custom feature added in
 * custom/include/MVC/View/views/view.list.php's renderStudioTabs(), not stock SuiteCRM, also
 * reused by the compliance dashlets' Outstanding/Completed tabs. It emits <ul class="nav
 * nav-tabs nav-dashboard"><li class="active|utilsLink"><a class="plus-active|plus-inactive">
 * Label (count)</a></li>...</ul> — classes that exist only in that PHP file, with no CSS written
 * for them anywhere before now, so they rendered as bare unstyled links.
 */
#content.bpbytes-content ul.nav-tabs.nav-dashboard {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    border-bottom: 1px solid var(--bp-border);
}

#content.bpbytes-content ul.nav-tabs.nav-dashboard > li {
    list-style: none;
}

#content.bpbytes-content ul.nav-tabs.nav-dashboard > li > a {
    display: inline-block;
    padding: 7px 12px;
    font-size: 12px;
    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;
}

/* .moduleTitle above this tab row has no padding of its own (see the comment on that rule) -
   its <h2> text starts a few px in purely from core's own leading "&nbsp;". Trimming just the
   first tab's left padding from the usual 12px to 8px lands its label closer to that same
   offset, without touching the spacing between the other tabs. */
#content.bpbytes-content ul.nav-tabs.nav-dashboard > li:first-child > a {
    padding-left: 8px;
}

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

#content.bpbytes-content ul.nav-tabs.nav-dashboard > li.active > a {
    color: var(--bp-primary);
    box-shadow: inset 0 -2px 0 var(--bp-primary);
}

/*
 * Loading state for AJAX-driven tabs (e.g. the compliance dashlets' Outstanding/Approval
 * Pending/Completed tabs, set via renderComplianceTabs()'s onclick before calling
 * SUGAR.mySugar.retrieveDashlet()). The whole bar dims and stops accepting clicks — the AJAX
 * response replaces this entire markup anyway, so there's nothing to manually reset afterward.
 *
 * The spinner itself is the same conic-gradient ring + bpbytes-spin animation used everywhere
 * else in the app (#loadingPage, .bpbytes-loading-spinner) — just a small inline size, not a
 * different spinner design, so every loading state in the app reads as one system.
 */
#content.bpbytes-content ul.nav-tabs.nav-dashboard.nav-tabs-loading {
    pointer-events: none;
    opacity: 0.6;
}

#content.bpbytes-content ul.nav-tabs.nav-dashboard > li > a.is-loading::after {
    content: "";
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-left: 6px;
    vertical-align: middle;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0deg, var(--bp-accent) 110deg, var(--bp-primary) 340deg, transparent 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    animation: bpbytes-spin 0.85s linear infinite;
}

/* Base button look shared by every class="button" control, including those inside Bootstrap modals. */
#content.bpbytes-content .button,
#content.bpbytes-content input[type="submit"],
#content.bpbytes-content input[type="button"],
#content.bpbytes-content button.button,
.modal-content .button,
.modal-content input[type="submit"],
.modal-content input[type="button"] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: var(--bp-btn-h);
    padding: 0 18px;
    border-radius: var(--bp-radius-sm);
    border: 1px solid var(--bp-border-strong);
    background: var(--bp-surface);
    color: var(--bp-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--bp-transition), border-color var(--bp-transition);
}

#content.bpbytes-content .button:hover,
#content.bpbytes-content input[type="submit"]:hover,
#content.bpbytes-content input[type="button"]:hover,
.modal-content .button:hover,
.modal-content input[type="submit"]:hover,
.modal-content input[type="button"]:hover {
    background: var(--bp-surface-alt);
    border-color: var(--bp-text-faint);
}

#content.bpbytes-content .button:disabled,
#content.bpbytes-content input:disabled,
.modal-content .button:disabled,
.modal-content input:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* The filled primary button: Save/Search/Login/subpanel Create and the other main actions share this one rule. */
#content.bpbytes-content .button.primary,
#content.bpbytes-content input.button.primary,
#content.bpbytes-content input#bigbutton,
#content.bpbytes-content #category_data input#SAVE_HEADER,
#content.bpbytes-content #category_data input#SAVE_FOOTER,
#content.bpbytes-content input[name="Login"],
#content.bpbytes-content #generate_pwd_button,
#content.bpbytes-content tr.pagination table td[align="left"] .button,
#content.bpbytes-content .modal-content .button.primary,
#content.bpbytes-content .modal-content .button.red,
.modal-content .button.primary,
.modal-content .button.red,
#searchDialog input.button#search_form_submit,
#searchDialog input.button#search_form_submit_advanced,
#searchDialog input.button[name="saved_search_submit"],
.bpbytes-login__card #bigbutton,
.bpbytes-login__card #generate_pwd_button {
    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 .button.primary:hover,
#content.bpbytes-content input.button.primary:hover,
#content.bpbytes-content input#bigbutton:hover,
#content.bpbytes-content #category_data input#SAVE_HEADER:hover,
#content.bpbytes-content #category_data input#SAVE_FOOTER:hover,
#content.bpbytes-content input[name="Login"]:hover,
#content.bpbytes-content #generate_pwd_button:hover,
#content.bpbytes-content tr.pagination table td[align="left"] .button:hover,
#content.bpbytes-content .modal-content .button.primary:hover,
#content.bpbytes-content .modal-content .button.red:hover,
.modal-content .button.primary:hover,
.modal-content .button.red:hover,
#searchDialog input.button#search_form_submit:hover,
#searchDialog input.button#search_form_submit_advanced:hover,
#searchDialog input.button[name="saved_search_submit"]:hover,
.bpbytes-login__card #bigbutton:hover,
.bpbytes-login__card #generate_pwd_button:hover {
    background: var(--bp-primary-hover);
    border-color: var(--bp-primary-hover);
    box-shadow: 0 6px 16px rgba(85, 71, 181, 0.32);
}

/* DetailView header "Actions" dropdown (built by detailViewTabs.js), same shape as the profile menu in topbar.css. */
#content.bpbytes-content .bpbytes-header-actions {
    position: relative;
    flex: 0 0 auto;
    list-style: none;
    margin: 0;
    padding: 0;
}

#content.bpbytes-content .bpbytes-header-actions > li {
    list-style: none;
}

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

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

#content.bpbytes-content .bpbytes-header-actions__trigger::after {
    content: "";
    width: 10px;
    height: 10px;
    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%3Cpolyline points='6 9 12 15 18 9'/%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='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

#content.bpbytes-content .bpbytes-header-actions__menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 180px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--bp-surface);
    border-radius: var(--bp-radius);
    box-shadow: var(--bp-shadow-lg);
    z-index: var(--bp-z-dropdown);
}

#content.bpbytes-content .bpbytes-header-actions.is-open .bpbytes-header-actions__menu {
    display: block;
}

#content.bpbytes-content .bpbytes-header-actions__menu li {
    list-style: none;
}

#content.bpbytes-content .bpbytes-header-actions__menu li + li {
    margin-top: 2px;
}

/* Overrides the shared pill-button look (.button/.button.primary above) with a plain,
   full-width menu row — these are the exact same <input>s core rendered (onclick/name/id/form
   untouched), just re-skinned now that they're menu items instead of standalone buttons. */
#content.bpbytes-content .bpbytes-header-actions__menu .button,
#content.bpbytes-content .bpbytes-header-actions__menu input[type="button"],
#content.bpbytes-content .bpbytes-header-actions__menu input[type="submit"] {
    display: block;
    width: 100%;
    height: auto;
    padding: 9px 12px;
    border: none;
    border-radius: var(--bp-radius-sm);
    background: transparent;
    color: var(--bp-text);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

#content.bpbytes-content .bpbytes-header-actions__menu .button:hover,
#content.bpbytes-content .bpbytes-header-actions__menu input[type="button"]:hover,
#content.bpbytes-content .bpbytes-header-actions__menu input[type="submit"]:hover {
    background: var(--bp-surface-alt);
}

/* A subpanel's quick-create Save button only gets class="button" from core; matched to the primary look by its id. */
#content.bpbytes-content input[id$="_subpanel_save_button"] {
    background: var(--bp-primary);
    border-color: var(--bp-primary);
    color: #fff;
    box-shadow: var(--bp-shadow-sm);
}

#content.bpbytes-content input[id$="_subpanel_save_button"]:hover {
    background: var(--bp-primary-hover);
    border-color: var(--bp-primary-hover);
    box-shadow: var(--bp-shadow);
}

/* The email widget's add (+) and remove (x) buttons are hardcoded Bootstrap btn-danger; restyled for just these two. */
#content.bpbytes-content .email-address-add-button.btn-danger,
#content.bpbytes-content .email-address-remove-button.btn-danger {
    background: var(--bp-surface);
    border: 1px solid var(--bp-border-strong);
    color: var(--bp-text-muted);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}

#content.bpbytes-content .email-address-add-button.btn-danger:hover {
    background: var(--bp-primary-soft);
    color: var(--bp-primary);
    border-color: var(--bp-primary);
}

#content.bpbytes-content .email-address-remove-button.btn-danger:hover {
    background: var(--bp-surface-alt);
    color: var(--bp-danger);
    border-color: var(--bp-danger);
}

#content.bpbytes-content .bpbytes-card {
    background: var(--bp-surface);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-lg);
    box-shadow: var(--bp-shadow);
    padding: 18px 20px;
    margin-bottom: 16px;
}

/* YUI's yui-hidden utility is only defined inside a TabView; needed bare for popups used elsewhere. */
.yui-hidden {
    display: none;
}

/* Shared DetailView/EditView YUI TabView shell (#{module}_detailview_tabs / #{form_name}_tabs) */
#content.bpbytes-content .yui-navset .yui-nav {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--bp-border);
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

#content.bpbytes-content .yui-navset .yui-nav li {
    list-style: none;
}

#content.bpbytes-content .yui-navset .yui-nav li a {
    display: inline-block;
    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;
}

#content.bpbytes-content .yui-navset .yui-nav li a:hover {
    color: var(--bp-primary);
    background: var(--bp-surface-alt);
}

/* tabview-skin.css (loaded in _head.tpl) sets its own background sprite-gradient on the
   selected tab (a hard blue) that this rule never touched before — only color/box-shadow — so it
   kept showing through untouched underneath. */
#content.bpbytes-content .yui-navset .yui-nav li.selected a,
#content.bpbytes-content .yui-navset .yui-nav li.selected a:focus,
#content.bpbytes-content .yui-navset .yui-nav li.selected a:hover {
    color: var(--bp-primary);
    background: var(--bp-surface-alt);
    box-shadow: inset 0 -2px 0 var(--bp-primary);
}

/* Studio's closable tabs add an unstyled close link into the label; shown as a small x. */
#content.bpbytes-content a.sugar-tab-close {
    display: inline-block;
    position: relative;
    top: -1px;
    width: 12px;
    height: 12px;
    margin-left: 8px;
    vertical-align: middle;
    background-color: var(--bp-text-faint);
    -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='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='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='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}

#content.bpbytes-content a.sugar-tab-close:hover {
    background-color: var(--bp-danger);
}

/* Studio loads tab content by AJAX after YUI fixed the panel height, so release that inline height. */
#content.bpbytes-content #mbtabs .yui-content {
    height: auto !important;
    overflow: visible !important;
}

/* Studio's field and layout lists are as tall as their contents and never scroll; cap them to the window (adjust 300px to the header above). */
#content.bpbytes-content #mbtabs #toolbox,
#content.bpbytes-content #mbtabs #panels,
#content.bpbytes-content #mbtabs #editor-content.list-editor ul[id^="ul"] {
    max-height: calc(100vh - 300px);
    min-height: 240px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Studio's module tree (YUI TreeView) labels and heading had no styling. */
#content.bpbytes-content #package_tree {
    font-size: 13px;
}

/* Space between the tree's toggle and folder icon cells (horizontal only, so the connector lines stay unbroken). */
#content.bpbytes-content #package_tree table {
    border-collapse: separate;
    border-spacing: 4px 0;
}

#content.bpbytes-content #package_tree .ygtvlabel,
#content.bpbytes-content #package_tree .ygtvlabel:link,
#content.bpbytes-content #package_tree .ygtvlabel:visited {
    color: var(--bp-text-muted);
    text-decoration: none;
    padding: 2px 6px;
    border-radius: var(--bp-radius-sm);
}

#content.bpbytes-content #package_tree .ygtvlabel:hover {
    color: var(--bp-primary);
    background: var(--bp-surface-alt);
    text-decoration: none;
}

/* Studio's breadcrumb has no wrapping element — ModuleBuilder.js's getTitle() returns a raw
   "<h2>title</h2><br>breadcrumb text" string dropped straight into the tab panel — so the
   heading it's always paired with is the only thing there is to style. */
#content.bpbytes-content #mbcenter h2 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    color: var(--bp-text);
}

/* Enum / status field pill badges rendered by SugarFieldEnum */
#content.bpbytes-content .sugar_field.enum,
#content.bpbytes-content select ~ .sugar_field {
    font-weight: 500;
}

/* The default hidden state of the dropdown menus (core only gets this from the SuiteP stylesheet). */
#content.bpbytes-content ul.clickMenu {
    display: inline-block;
    position: relative;
    list-style: none;
    margin: 0 6px 0 0;
    padding: 0;
    vertical-align: middle;
}

#content.bpbytes-content ul.clickMenu > li {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: var(--bp-radius-sm);
    border: 1px solid var(--bp-border-strong);
    background: var(--bp-surface);
    font-size: 12px;
    font-weight: 600;
    color: var(--bp-text);
    cursor: pointer;
    white-space: nowrap;
}

#content.bpbytes-content ul.clickMenu > li:hover {
    background: var(--bp-surface-alt);
}

/* Toolbar menu triggers read as neutral UI, not data links; the primary Edit button keeps its white text. */
#content.bpbytes-content ul.clickMenu > li > a:not(.primary),
#content.bpbytes-content ul.clickMenu > li > input[type="button"]:not(.primary) {
    color: var(--bp-text) !important;
    text-decoration: none;
}

/* A lone button inside a menu <li> needs no box of its own. */
#content.bpbytes-content ul.clickMenu > li.single,
#content.bpbytes-content ul.clickMenu > li:has(> .button) {
    background: transparent;
    border: none;
    padding: 0;
}

#content.bpbytes-content ul.clickMenu > li.single:hover,
#content.bpbytes-content ul.clickMenu > li:has(> .button):hover {
    background: transparent;
}

/* A row action such as a subpanel's Edit: the <ul> itself is the button (class "button"), so the <li> inside it carries
   no box of its own, only the label's padding. */
#content.bpbytes-content ul.clickMenu.button {
    display: inline-flex;
    align-items: stretch;
}

#content.bpbytes-content ul.clickMenu.button > li {
    padding: 0 16px;
    border: none;
    background: transparent;
    font-size: 13px;
}

#content.bpbytes-content ul.clickMenu > li .suitepicon-action-caret {
    width: 10px;
    height: 10px;
    opacity: 0.6;
}

/* The arrow beside a row's Edit button is the only sign there is a second action, so it is a bold chevron in the theme colour */
#content.bpbytes-content ul.clickMenu.subpanel > li .suitepicon-action-caret {
    width: 18px;
    height: 18px;
    margin-left: 6px;
    opacity: 1;
    background-color: var(--bp-primary);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
}

#content.bpbytes-content ul.clickMenu.subpanel > li .suitepicon-action-caret::before {
    content: none;
}

/* A short label like "Edit" reads a little narrow as the one prominent colored action here —
   same widening treatment as the subpanel's own Create button. */
#content.bpbytes-content ul.clickMenu > li > input.button.primary {
    padding: 0 22px;
    min-width: 110px;
    justify-content: center;
}

#content.bpbytes-content ul.clickMenu ul.subnav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 190px;
    margin-top: 6px;
    background: var(--bp-surface);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius);
    box-shadow: var(--bp-shadow-lg);
    padding: 6px;
    z-index: var(--bp-z-dropdown);
    list-style: none;
    overflow: hidden;
}

#content.bpbytes-content ul.clickMenu ul.subnav > li {
    list-style: none;
    display: block;
}

#content.bpbytes-content ul.clickMenu ul.subnav > li > a,
#content.bpbytes-content ul.clickMenu ul.subnav > li > input[type="button"],
#content.bpbytes-content ul.clickMenu ul.subnav > li > input[type="submit"] {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border: none;
    background: transparent;
    color: var(--bp-text);
    font-size: 12.5px;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
    border-radius: var(--bp-radius-sm);
}

#content.bpbytes-content ul.clickMenu ul.subnav > li > a:hover,
#content.bpbytes-content ul.clickMenu ul.subnav > li > input:hover {
    background: var(--bp-surface-alt);
    text-decoration: none;
}

#content.bpbytes-content ul.clickMenu ul.subnav-sub {
    display: none;
    position: absolute;
    min-width: 190px;
    background: var(--bp-surface);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius);
    box-shadow: var(--bp-shadow-lg);
    padding: 6px;
    z-index: var(--bp-z-dropdown);
    list-style: none;
}

#content.bpbytes-content ul.clickMenu ul.subnav-sub.hover {
    display: block;
}

#content.bpbytes-content ul.clickMenu ul.subnav-sub > li {
    list-style: none;
}

#content.bpbytes-content ul.clickMenu ul.subnav-sub > li > a {
    display: block;
    padding: 8px 10px;
    border-radius: var(--bp-radius-sm);
    color: var(--bp-text);
    text-decoration: none;
    font-size: 12.5px;
}

#content.bpbytes-content ul.clickMenu ul.subnav-sub > li > a:hover {
    background: var(--bp-surface-alt);
}

/*
 * Core's AJAX loading indicator — YAHOO.widget.Panel("ajaxloading"), shown/hidden by
 * SUGAR.ajaxUI.showLoadingPanel()/hideLoadingPanel() (include/javascript/ajaxUI.js) on every
 * single in-app AJAX navigation and form submit, application-wide. Restyled in place rather
 * than replaced, since it's already the one loading indicator that fires everywhere; the
 * default img_loading.gif is swapped for a self-contained CSS spinner to match the theme.
 * IDs below (ajaxloading_mask / ajaxloading_c / ajaxloading, classes yui-panel-container /
 * yui-panel) come from YUI's Panel widget's own id/class-generation convention.
 *
 * YUI's own container skin CSS (which would normally give .mask/.yui-panel/.yui-panel-container
 * their base position/display rules) isn't loaded anywhere in this theme, and YUI's JS only ever
 * sets the panel's page (x,y) coordinates inline — it never forces `position`. So every
 * positioning rule here (fixed/left/top/z-index, not just cosmetics) is load-bearing on its own,
 * not just an override of some other default. Values are pinned with !important because YUI
 * re-applies its own inline left/top on every show and on window resize (JS inline styles lose to
 * !important stylesheet rules regardless of write order, so this is safe rather than fighting it).
 */
#ajaxloading_mask {
    position: fixed !important;
    /* Default assumes no sidebar/topbar chrome at all (a standalone Popups search window, e.g.
       the classic relate-field record picker, has neither) — dims its own full viewport. */
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    background: rgba(30, 27, 75, 0.45) !important;
    /* Loading body.yui-skin-sam's container skin (for the calendar widget below) also adds
       opacity:.25 to any .mask element with no property conflict to fight — since that's a
       different property than the background-color our shorthand above already wins on, it
       would otherwise silently stack on top and wash out the dimming to ~10% instead of 40%. */
    opacity: 1 !important;
    /* !important is load-bearing here (unlike everything else in this rule already had it): YUI's
       own stackMask() sets an inline z-index style on this element directly, and a plain
       stylesheet rule loses to an inline style — without !important the mask was rendering at
       whatever low z-index YUI picked, letting the sticky ListView header (z-index: 5) paint
       over it, undimmed, during every AJAX page navigation. */
    z-index: var(--bp-z-dropdown) !important;
    transition: left var(--bp-transition), top var(--bp-transition);
}

/* Only once the main app's own sidebar/topbar genuinely exist in this document (never true
   inside a Popups window) does the mask dim just the content area instead of the whole page. */
body:has(.bpbytes-sidebar) #ajaxloading_mask {
    top: var(--bp-topbar-height) !important;
    left: var(--bp-sidebar-width) !important;
}

body.bpbytes-sidebar-collapsed #ajaxloading_mask {
    left: var(--bp-sidebar-collapsed-width) !important;
}

#ajaxloading.yui-panel {
    position: fixed !important;
    /* Default: dead center of whatever viewport this document actually has (a Popups window's
       own, not the main app's) — see the body:has() override below for when real sidebar/topbar
       chrome exists to offset around. Without this, the panel's old hardcoded sidebar/topbar
       offset math ran everywhere INCLUDING inside popups (which have no sidebar to offset for),
       drifting it down into whatever content — like a sticky ListView header — happened to sit
       where that phantom offset placed it. */
    left: 50% !important;
    /* Clamped, not a flat 50% — on a short page (few rows, so the content area itself is
       short), pure vertical centering lands the card right on top of the sticky column-header
       row and the first rows beneath it, hiding them. 140px keeps it clear of that header
       regardless of how short the page is; on any normal-height page the centered value below
       is larger and wins instead, so this only ever kicks in for the short-page case. */
    top: max(140px, 50%) !important;
    transform: translate(-50%, -50%) !important;
    z-index: calc(var(--bp-z-dropdown) + 1) !important;
    background: var(--bp-surface);
    border: none;
    border-radius: var(--bp-radius-lg);
    box-shadow: var(--bp-shadow-lg);
    transition: left var(--bp-transition), top var(--bp-transition);
}

/* Centered over the content area (viewport minus the sidebar) once real sidebar/topbar chrome
   exists in this document. */
body:has(.bpbytes-sidebar) #ajaxloading.yui-panel {
    left: calc(var(--bp-sidebar-width) + (100vw - var(--bp-sidebar-width)) / 2) !important;
    /* Same clamp as the default rule above, applied to this offset centering formula instead of
       a flat 50% — the actual bug reported: on a short listview, dead-center math placed the
       card right over the sticky header + first couple of rows. */
    top: max(
        calc(var(--bp-topbar-height) + 140px),
        calc(var(--bp-topbar-height) + (100vh - var(--bp-topbar-height) - var(--bp-footer-total, var(--bp-footer-height))) / 2)
    ) !important;
}

body.bpbytes-sidebar-collapsed #ajaxloading.yui-panel {
    left: calc(var(--bp-sidebar-collapsed-width) + (100vw - var(--bp-sidebar-collapsed-width)) / 2) !important;
}

#ajaxloading .hd,
#ajaxloading .ft {
    display: none;
}

#ajaxloading .bd {
    padding: 34px 40px;
}

#loadingPage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
    font-family: var(--bp-font);
}

/* Hide the default core gif; the spinner below replaces it */
#loadingPage img {
    display: none;
}

/* Core's LBL_LOADING_PAGE app_string ships empty by default (include/language/en_us.lang.php),
   so the <b>...</b> label ajaxUI.js always writes into #loadingPage is empty text — CSS supplies
   the caption instead of overriding a core language file just for this */
#loadingPage b {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

#loadingPage b {
    display: none;
}

/* A two-tone conic ring (brand blue sweeping into teal) rather than a plain two-color
   border spinner — drawn with a masked conic-gradient, no image asset required */
/* (the mark and bar for #loadingPage are defined with the shared loading styles below) */
#loadingPage::before {
    order: -1;
}

#loadingPage::after {
    order: 1;
}

/* Core's inline AJAX status flash (SUGAR.ajaxStatusClass, sugar_3.js — e.g. "Saving...")
   appended straight to <body> with no positioning of its own beyond a JS-computed left offset,
   so a theme is expected to supply the rest (see themes/default/css/style.css for the
   equivalent baseline, which isn't loaded here since BPBytes ships its own style.css) */
#ajaxStatusDiv {
    position: fixed !important;
    top: calc(var(--bp-topbar-height) + 14px) !important;
    z-index: var(--bp-z-dropdown);
    background: var(--bp-text) !important;
    color: #fff !important;
    border-radius: var(--bp-radius);
    box-shadow: var(--bp-shadow-lg);
    padding: 8px 16px !important;
    font-size: 12.5px;
    font-family: var(--bp-font);
    opacity: 0.95 !important;
}

/*
 * External report embed (Analytics & Dashboards sidebar links, see style.js's
 * .bpbytes-nav-item__link--embed click handler) — the iframe fills #pagecontent edge to edge,
 * the same as any other page's content, with no card border/title bar of its own (an earlier
 * version had both; removed per feedback that it read as extra whitespace around a smaller box
 * rather than a full page). The only remaining trade-off: if a given report ever refuses to be
 * framed (cross-origin X-Frame-Options — invisible to script either way), there's no longer a
 * built-in "open in new tab" escape hatch in the embed itself.
 */
#content.bpbytes-content .bpbytes-embed-frame {
    display: flex;
    /* The whole area between the top bar and the footer, edge to edge */
    height: calc(100vh - var(--bp-topbar-height) - var(--bp-footer-total, var(--bp-footer-height)));
}

/* Take away the gutters #content normally keeps around a page (layout.css) while a report is shown, so the report
   fills the whole content area instead of sitting in a padded box */
#content.bpbytes-content:has(.bpbytes-embed-frame) {
    padding: var(--bp-topbar-height) 0 var(--bp-footer-total, var(--bp-footer-height)) 0;
    min-height: 0;
}

#content.bpbytes-content .bpbytes-embed-frame__iframe {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    border: none;
}

/*
 * Mini calendar date-picker popup (YUI's Calendar widget — every date field's calendar-trigger
 * icon, and the Calendar module's own header) — re-pointing a handful of the "sam" skin's
 * hardcoded colors (loaded via _head.tpl) at the theme's own palette instead of YUI's defaults.
 * Everything else (layout, borders, hover/selected/disabled states) comes from that skin as-is.
 */
.yui-skin-sam .yui-calcontainer {
    /* NOT position:absolute here (an earlier, wrong fix for the "showing over the sidebar" bug —
       the actual cause was the outer YAHOO.widget.SimpleDialog wrapper missing position:absolute,
       fixed by loading container.css above; forcing this INNER element absolute too left it with
       no JS-computed top/left of its own to size against, which is what produced the double,
       misaligned box). Structural calendar.css's own position:relative is correct here — this
       container just needs to sit in normal flow inside the dialog body that positions it. */
    /* Borderless/transparent — the outer SimpleDialog's .yui-panel already carries its own
       border/shadow/radius/background below, and having BOTH nested elements each draw one
       produced two overlapping cards instead of a single one enclosing the whole widget. */
    background-color: transparent;
    border: none;
    /* Structural calendar.css floats this (meant for laying out multiple calendar-group pages
       side by side, irrelevant for a single calendar like this one) — left floated, its
       dynamically-id'd parent div never clears it, so that parent's box collapses to roughly
       zero height and the panel's own white background/border stopped right after "Today"
       while the floated grid itself kept rendering, visibly escaping past that boundary
       unbordered. Un-floating it lets it contribute its real height normally instead. */
    float: none;
    box-shadow: none;
    font-family: var(--bp-font);
}

.yui-skin-sam .yui-calcontainer .title {
    background: var(--bp-surface);
    border-bottom: 1px solid var(--bp-border);
    color: var(--bp-text);
}

.yui-skin-sam .yui-calendar td.calcell {
    border-color: var(--bp-border);
    background: var(--bp-surface);
}

.yui-skin-sam .yui-calendar td.calcell a {
    color: var(--bp-primary);
}

.yui-skin-sam .yui-calendar td.calcell.calcellhover,
.yui-skin-sam .yui-calendar td.calcell.calcellhover a {
    background-color: var(--bp-primary);
    color: #fff;
}

.yui-skin-sam .yui-calendar td.calcell.selected a {
    background-color: var(--bp-primary-soft);
    color: var(--bp-primary);
    font-weight: 700;
}

.yui-skin-sam .yui-calendar td.calcell.today {
    background-color: var(--bp-accent);
}

.yui-skin-sam .yui-calendar td.calcell.oom,
.yui-skin-sam .yui-calendar td.calcell.oom a {
    background-color: var(--bp-surface-alt);
    color: var(--bp-text-faint);
}

/* The calendar-trigger icon's YAHOO.widget.SimpleDialog wrapper (container.css, loaded above) —
   its own gray/sprite-based chrome re-pointed at the theme's palette. Doesn't touch #ajaxloading,
   which is ID-scoped and wins over these class-only selectors regardless. */
.yui-skin-sam .yui-panel-container.cal_panel .yui-panel {
    border-color: var(--bp-border-strong);
    background: var(--bp-surface);
    box-shadow: var(--bp-shadow-lg);
    border-radius: var(--bp-radius);
    /* .hd/.bd below have their own flat-cornered background colors — without clipping to the
       parent's rounded shape, tiny square corners of those backgrounds would peek out past the
       rounded border. */
    overflow: hidden;
}

.yui-skin-sam .yui-panel-container.cal_panel .yui-panel .hd {
    background: var(--bp-surface-alt);
    border-color: var(--bp-border-strong);
    color: var(--bp-text);
}

.yui-skin-sam .yui-panel-container.cal_panel .yui-panel .bd {
    background: var(--bp-surface);
    border-color: var(--bp-border-strong);
}

.yui-skin-sam .yui-panel-container.cal_panel #callnav_today {
    color: var(--bp-primary);
}

/*
 * Modern date picker. The popup is YUI's Calendar inside a SimpleDialog, drawn with the old grey sprite buttons, a
 * gradient title bar and a bordered grid. Everything is restyled here and nothing about how it works changes: a rounded
 * card with a soft shadow, a quiet title, a month row with round arrow buttons, weekday labels in small caps, and round
 * day cells (filled for the chosen day, outlined for today).
 */
.yui-panel-container:has(> .cal_panel) > .underlay {
    display: none !important;
}

/* One font for everything in the popup (the widget's own markup falls back to the browser's default), and no footer strip */
.yui-panel.cal_panel,
.yui-panel.cal_panel * {
    font-family: var(--bp-font);
}

.yui-panel.cal_panel .ft {
    display: none !important;
}

.yui-panel.cal_panel {
    width: 300px !important;
    padding: 4px 0 14px;
    border: none !important;
    border-radius: 16px !important;
    background: var(--bp-surface) !important;
    box-shadow: 0 18px 48px rgba(31, 36, 64, 0.22), 0 2px 8px rgba(31, 36, 64, 0.08) !important;
    font-family: var(--bp-font);
}

.yui-panel.cal_panel .hd {
    padding: 14px 18px 6px !important;
    border: none !important;
    background: transparent !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--bp-text-faint) !important;
}

.yui-panel.cal_panel .bd {
    padding: 0 16px !important;
    border: none !important;
    background: transparent !important;
}

/* The close "button": a small round X in place of the grey sprite square */
.yui-panel.cal_panel a.container-close {
    top: 10px !important;
    right: 12px !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50%;
    background: var(--bp-surface-alt) !important;
    font-size: 0;
    text-indent: 0;
    overflow: hidden;
}

.yui-panel.cal_panel a.container-close::after {
    content: "\00d7";
    display: block;
    font-size: 18px;
    line-height: 28px;
    text-align: center;
    color: var(--bp-text-muted);
}

.yui-panel.cal_panel a.container-close:hover {
    background: var(--bp-border) !important;
}

/* "Today" */
.yui-panel.cal_panel p.callnav_today {
    margin: 0 0 8px;
    text-align: right;
}

.yui-panel.cal_panel #callnav_today {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--bp-primary-soft);
    color: var(--bp-primary) !important;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.yui-panel.cal_panel #callnav_today:hover {
    background: var(--bp-primary);
    color: #fff !important;
}

/* Month row: previous arrow, "October 2026", next arrow */
.yui-panel.cal_panel .yui-calendar {
    width: 100%;
    border: none !important;
    border-collapse: separate;
    border-spacing: 0 2px;
    background: transparent;
}

.yui-panel.cal_panel .yui-calendar th.calhead {
    padding: 0 0 8px;
    border: none !important;
    background: transparent !important;
}

.yui-panel.cal_panel .calheader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: static !important;
    height: 34px;
}

.yui-panel.cal_panel .calheader .calnav {
    flex: 1;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--bp-title) !important;
    text-decoration: none;
    background: none !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.yui-panel.cal_panel .calheader a.calnavleft,
.yui-panel.cal_panel .calheader a.calnavright {
    position: static !important;
    float: none !important;
    display: block;
    flex: 0 0 30px;
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    border-radius: 50%;
    background: var(--bp-surface-alt) !important;
    font-size: 0;
    overflow: hidden;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.yui-panel.cal_panel .calheader a.calnavleft:hover,
.yui-panel.cal_panel .calheader a.calnavright:hover {
    background: var(--bp-primary-soft) !important;
}

.yui-panel.cal_panel .calheader a.calnavleft::after,
.yui-panel.cal_panel .calheader a.calnavright::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-left: 2px solid var(--bp-text-muted);
    border-bottom: 2px solid var(--bp-text-muted);
}

.yui-panel.cal_panel .calheader a.calnavleft::after {
    margin-left: 3px;
    transform: rotate(45deg);
}

.yui-panel.cal_panel .calheader a.calnavright::after {
    margin-right: 3px;
    transform: rotate(-135deg);
}

/* Weekday labels */
.yui-panel.cal_panel .calweekdayrow th.calweekdaycell {
    padding: 4px 0 6px;
    border: none !important;
    background: transparent !important;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    color: var(--bp-text-faint);
}

/* The month / year chooser that opens when the month name is clicked (YUI's calendar navigator): same card look */
.yui-panel.cal_panel .yui-cal-nav-mask {
    background: rgba(31, 36, 64, 0.35) !important;
    opacity: 1 !important;
    border-radius: 12px;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.yui-panel.cal_panel .yui-cal-nav {
    box-sizing: border-box;
    min-width: 210px;
    padding: 18px 18px 16px !important;
    border: none !important;
    border-radius: 14px;
    background: var(--bp-surface) !important;
    box-shadow: 0 14px 34px rgba(31, 36, 64, 0.28);
    font-size: 13px;
    color: var(--bp-text);
}

.yui-panel.cal_panel .yui-cal-nav label {
    display: block;
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bp-text-muted);
}

.yui-panel.cal_panel .yui-cal-nav-m,
.yui-panel.cal_panel .yui-cal-nav-y {
    margin: 0 0 14px !important;
    padding: 0 !important;
}

.yui-panel.cal_panel .yui-cal-nav select,
.yui-panel.cal_panel .yui-cal-nav input[type="text"] {
    box-sizing: border-box;
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--bp-border-strong);
    border-radius: 10px;
    background: var(--bp-surface);
    font-size: 13.5px;
    color: var(--bp-text);
    outline: none;
    box-shadow: none;
}

.yui-panel.cal_panel .yui-cal-nav select:focus,
.yui-panel.cal_panel .yui-cal-nav input[type="text"]:focus {
    border-color: var(--bp-primary);
    box-shadow: 0 0 0 3px var(--bp-primary-soft);
}

.yui-panel.cal_panel .yui-cal-nav-b {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: 4px 0 0 !important;
    padding: 0 !important;
}

/* YUI wraps each button in a span that draws its own grey bevel; take that off and style the button itself */
.yui-panel.cal_panel .yui-cal-nav-btn,
.yui-panel.cal_panel .yui-cal-nav-btn.yui-default {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
}

.yui-panel.cal_panel .yui-cal-nav-btn button {
    height: 34px;
    padding: 0 18px;
    border: 1px solid var(--bp-border-strong) !important;
    border-radius: 999px;
    background: var(--bp-surface) !important;
    font-size: 13px;
    font-weight: 600;
    color: var(--bp-text) !important;
    cursor: pointer;
}

.yui-panel.cal_panel .yui-cal-nav-btn button:hover {
    background: var(--bp-primary-soft) !important;
    color: var(--bp-primary) !important;
}

.yui-panel.cal_panel .yui-cal-nav-btn.yui-default button {
    border-color: var(--bp-primary) !important;
    background: var(--bp-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(85, 71, 181, 0.28);
}

.yui-panel.cal_panel .yui-cal-nav-btn.yui-default button:hover {
    background: var(--bp-primary-hover) !important;
    color: #fff !important;
}

.yui-panel.cal_panel .yui-cal-nav-e {
    margin: 10px 0 0 !important;
    font-size: 12px;
    color: var(--bp-danger);
}

/* Day cells: round, no grid lines */
.yui-panel.cal_panel .yui-calendar td.calcell {
    padding: 0 !important;
    height: 38px;
    border: none !important;
    background: transparent !important;
    text-align: center;
}

.yui-panel.cal_panel .yui-calendar td.calcell a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0 auto;
    padding: 0;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 500;
    color: var(--bp-text);
    text-decoration: none;
    transition: background var(--bp-transition), color var(--bp-transition);
}

.yui-panel.cal_panel .yui-calendar td.calcell.calcellhover,
.yui-panel.cal_panel .yui-calendar td.calcell.calcellhover a {
    background: transparent !important;
    color: var(--bp-text);
}

.yui-panel.cal_panel .yui-calendar td.calcell.calcellhover a {
    background: var(--bp-primary-soft) !important;
    color: var(--bp-primary);
}

.yui-panel.cal_panel .yui-calendar td.calcell.today,
.yui-panel.cal_panel .yui-calendar td.calcell.today a {
    background: transparent !important;
}

.yui-panel.cal_panel .yui-calendar td.calcell.today a {
    box-shadow: inset 0 0 0 1.5px var(--bp-accent);
    color: var(--bp-accent);
    font-weight: 700;
}

.yui-panel.cal_panel .yui-calendar td.calcell.selected,
.yui-panel.cal_panel .yui-calendar td.calcell.selected a {
    background: transparent !important;
}

.yui-panel.cal_panel .yui-calendar td.calcell.selected a {
    background: var(--bp-primary) !important;
    box-shadow: 0 4px 10px rgba(85, 71, 181, 0.35);
    color: #fff;
    font-weight: 700;
}

.yui-panel.cal_panel .yui-calendar td.calcell.oom,
.yui-panel.cal_panel .yui-calendar td.calcell.oom a {
    background: transparent !important;
    color: var(--bp-text-faint);
    font-weight: 400;
}

/*
 * Calendar module (index.php?module=Calendar&action=index): FullCalendar in an old float layout. Restyled in the theme's
 * language without changing how it works: the view tabs as a segmented control, round previous/next buttons, the grid as
 * one soft card with quiet lines, a gentle highlight for today, and events as rounded chips.
 */
#content.bpbytes-content #pagecontent:has(#calendarContainer) .moduleTitle {
    margin-bottom: 14px;
}

/* View tabs: Day / Week / Month / Shared Month / Shared Week */
#content.bpbytes-content #pagecontent:has(#calendarContainer) > div:has(> #agendaDay-tab) {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    width: auto !important;
    padding: 4px;
    border-radius: 999px;
    background: var(--bp-surface-alt);
    border: 1px solid var(--bp-border);
}

#content.bpbytes-content #pagecontent:has(#calendarContainer) > div > input.button[id$="-tab"] {
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--bp-text-muted) !important;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 999px !important;
}

#content.bpbytes-content #pagecontent:has(#calendarContainer) > div > input.button[id$="-tab"]:hover {
    background: var(--bp-primary-soft) !important;
    color: var(--bp-primary) !important;
}

#content.bpbytes-content #pagecontent:has(#calendarContainer) > div > input.button[id$="-tab"][selected] {
    background: var(--bp-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(85, 71, 181, 0.28) !important;
}

/* Right side: go-to-date icon and Settings, at the right edge */
#content.bpbytes-content #pagecontent:has(#calendarContainer) > div:has(> #cal_settings) {
    float: right !important;
    width: auto !important;
}

#content.bpbytes-content #pagecontent:has(#calendarContainer) .dateTime {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--bp-surface-alt);
    border: 1px solid var(--bp-border);
    vertical-align: middle;
}

#content.bpbytes-content #pagecontent:has(#calendarContainer) .dateTime:hover {
    background: var(--bp-primary-soft);
}

#content.bpbytes-content #pagecontent:has(#calendarContainer) #cal_settings {
    background: var(--bp-surface) !important;
    color: var(--bp-text) !important;
    border: 1px solid var(--bp-border-strong) !important;
    border-radius: 999px !important;
    padding: 7px 18px;
    font-weight: 600;
    box-shadow: none !important;
}

#content.bpbytes-content #pagecontent:has(#calendarContainer) #cal_settings:hover {
    background: var(--bp-primary-soft) !important;
    color: var(--bp-primary) !important;
}

/* Date range with round previous / next buttons */
#content.bpbytes-content #pagecontent:has(#calendarContainer) .monthHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 18px 0 14px;
}

#content.bpbytes-content #pagecontent:has(#calendarContainer) .monthHeader > br {
    display: none;
}

#content.bpbytes-content #pagecontent:has(#calendarContainer) .monthHeader > div {
    float: none !important;
    width: auto !important;
}

#content.bpbytes-content #pagecontent:has(#calendarContainer) .monthHeader > div:nth-child(2) {
    flex: 1;
}

#content.bpbytes-content #pagecontent:has(#calendarContainer) .monthHeader h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--bp-title);
}

#content.bpbytes-content #pagecontent:has(#calendarContainer) .monthHeader a:has(> img) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bp-surface-alt);
    border: 1px solid var(--bp-border);
    font-size: 0;
}

#content.bpbytes-content #pagecontent:has(#calendarContainer) .monthHeader a:has(> img):hover {
    background: var(--bp-primary-soft);
}

#content.bpbytes-content #pagecontent:has(#calendarContainer) .monthHeader a > img {
    display: none;
}

#content.bpbytes-content #pagecontent:has(#calendarContainer) .monthHeader a:has(> img)::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-left: 2px solid var(--bp-text-muted);
    border-bottom: 2px solid var(--bp-text-muted);
}

#content.bpbytes-content #pagecontent:has(#calendarContainer) .monthHeader > div:first-child a:has(> img)::after {
    margin-left: 3px;
    transform: rotate(45deg);
}

#content.bpbytes-content #pagecontent:has(#calendarContainer) .monthHeader > div:nth-child(3) a:has(> img)::after {
    margin-right: 3px;
    transform: rotate(-135deg);
}

/* The second set of previous/next arrows under the grid repeats the ones at the top */
#content.bpbytes-content #pagecontent:has(#calendarContainer) .monthFooter,
#content.bpbytes-content #pagecontent:has(#calendarContainer) .monthFooter + br {
    display: none;
}

/* The calendar itself: one card */
#content.bpbytes-content #calendarContainer {
    background: var(--bp-surface);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-lg);
    box-shadow: var(--bp-shadow);
    padding: 14px 16px 16px;
    overflow: hidden;
}

#content.bpbytes-content #calendarContainer .fc-toolbar {
    display: none;
}

#content.bpbytes-content #calendarContainer .calSharedUser {
    display: inline-block;
    margin: 0 0 12px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--bp-primary-soft);
    color: var(--bp-primary);
    font-size: 12px;
    font-weight: 700;
}

#content.bpbytes-content #calendarContainer .fc table,
#content.bpbytes-content #calendarContainer .fc td,
#content.bpbytes-content #calendarContainer .fc th {
    border-color: var(--bp-border);
}

#content.bpbytes-content #calendarContainer .fc-widget-header,
#content.bpbytes-content #calendarContainer .fc-widget-content {
    border-color: var(--bp-border);
}

#content.bpbytes-content #calendarContainer .fc-day-header {
    padding: 10px 4px;
    background: var(--bp-surface-alt);
    border-color: var(--bp-border);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

#content.bpbytes-content #calendarContainer .fc-day-header a {
    color: var(--bp-text-muted);
    text-decoration: none;
}

#content.bpbytes-content #calendarContainer .fc-day-header a:hover {
    color: var(--bp-primary);
}

#content.bpbytes-content #calendarContainer .fc-day-header.fc-today a {
    color: var(--bp-primary);
}

/* Today: a soft tint instead of the old yellow */
#content.bpbytes-content #calendarContainer .fc-state-highlight,
#content.bpbytes-content #calendarContainer .fc-today {
    background: var(--bp-primary-soft) !important;
}

#content.bpbytes-content #calendarContainer .fc-day-header.fc-today {
    background: var(--bp-primary-soft) !important;
}

/* Hour labels and the all-day label */
#content.bpbytes-content #calendarContainer .fc-axis {
    color: var(--bp-text-faint);
    font-size: 11.5px;
    font-weight: 600;
    text-align: right;
    padding-right: 8px;
    vertical-align: top;
}

#content.bpbytes-content #calendarContainer .fc-time-grid .fc-slats td {
    height: 2.4em;
    border-color: var(--bp-border);
}

#content.bpbytes-content #calendarContainer .fc-time-grid .fc-slats .fc-minor td {
    border-top-style: dotted;
    border-color: #eef0f8;
}

#content.bpbytes-content #calendarContainer hr.fc-divider {
    height: 2px;
    margin: 0;
    border: 0;
    background: var(--bp-border-strong);
}

/* Current time line */
#content.bpbytes-content #calendarContainer .fc-now-indicator {
    border-color: var(--bp-danger);
}

#content.bpbytes-content #calendarContainer .fc-now-indicator-arrow {
    border-top-color: var(--bp-danger);
    border-bottom-color: var(--bp-danger);
}

/* Month view: quiet day numbers, today's number as a filled circle */
#content.bpbytes-content #calendarContainer .fc-day-top {
    padding: 4px 6px 0;
}

#content.bpbytes-content #calendarContainer .fc-day-number {
    color: var(--bp-text-muted);
    font-size: 12.5px;
    font-weight: 600;
}

#content.bpbytes-content #calendarContainer .fc-today .fc-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--bp-primary);
    color: #fff;
}

#content.bpbytes-content #calendarContainer .fc-other-month {
    background: var(--bp-surface-alt);
}

/* Events as rounded chips (the colour per type still comes from the event itself) */
#content.bpbytes-content #calendarContainer .fc-event {
    border-radius: 6px;
    border-width: 0 0 0 3px;
    box-shadow: 0 1px 3px rgba(31, 36, 64, 0.18);
    font-size: 12px;
    font-weight: 600;
    padding: 1px 4px;
}

#content.bpbytes-content #calendarContainer .fc-more {
    color: var(--bp-primary);
    font-weight: 600;
}

/*
 * Calendar > Settings and Calendar > User List popups (Bootstrap modals): same card language as the rest of the app.
 * Settings: label on the left, control on the right, time pickers on one line; User List: a tidy list box with round
 * move up/down buttons.
 */
#content.bpbytes-content #pagecontent:has(#calendarContainer) input[value="User List"] {
    background: var(--bp-surface) !important;
    color: var(--bp-text) !important;
    border: 1px solid var(--bp-border-strong) !important;
    border-radius: 999px !important;
    padding: 7px 18px;
    font-weight: 600;
    box-shadow: none !important;
}

#content.bpbytes-content #pagecontent:has(#calendarContainer) input[value="User List"]:hover {
    background: var(--bp-primary-soft) !important;
    color: var(--bp-primary) !important;
}

.modal-calendar-settings .modal-content,
.modal-calendar-user-list .modal-content {
    border: none;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(31, 36, 64, 0.3);
    overflow: hidden;
}

.modal-calendar-settings .modal-header,
.modal-calendar-user-list .modal-header {
    padding: 20px 26px 14px;
    border: none;
}

.modal-calendar-settings .modal-title,
.modal-calendar-user-list .modal-title {
    font-size: 19px;
    font-weight: 700;
    color: var(--bp-title);
}

.modal-calendar-settings .modal-body,
.modal-calendar-user-list .modal-body {
    padding: 4px 26px 8px;
}

.modal-calendar-settings .modal-footer,
.modal-calendar-user-list .modal-footer {
    padding: 14px 26px 22px;
    border: none;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.modal-calendar-settings .modal-footer .btn,
.modal-calendar-user-list .modal-footer .btn {
    margin: 0;
    padding: 9px 22px;
    border-radius: 999px;
    font-weight: 600;
    box-shadow: none;
}

.modal-calendar-settings .modal-footer .btn-default,
.modal-calendar-user-list .modal-footer .btn-default {
    background: var(--bp-surface);
    border: 1px solid var(--bp-border-strong);
    color: var(--bp-text);
}

.modal-calendar-settings .modal-footer .btn-danger,
.modal-calendar-user-list .modal-footer .btn-danger {
    background: var(--bp-primary);
    border: 1px solid var(--bp-primary);
    color: #fff;
    box-shadow: 0 4px 12px rgba(85, 71, 181, 0.25);
}

.modal-calendar-settings .modal-footer .btn-danger:hover,
.modal-calendar-user-list .modal-footer .btn-danger:hover {
    background: var(--bp-primary-hover);
    border-color: var(--bp-primary-hover);
}

/* Section cards */
.modal-calendar-settings .panel,
.modal-calendar-user-list .panel {
    margin: 0 0 16px;
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-lg);
    box-shadow: none;
    overflow: hidden;
}

.modal-calendar-settings .panel-heading,
.modal-calendar-user-list .panel-heading {
    padding: 12px 18px;
    background: var(--bp-surface-alt);
    border-bottom: 1px solid var(--bp-border);
}

.modal-calendar-settings .panel-heading a,
.modal-calendar-user-list .panel-heading a {
    color: var(--bp-title);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.modal-calendar-settings .panel-body,
.modal-calendar-user-list .panel-body {
    padding: 6px 18px 10px;
}

/* The user list's panel title just repeats the popup's own title */
.modal-calendar-user-list .panel-heading {
    display: none;
}

/* Settings: a row per setting */
.modal-calendar-settings .panel-body > table {
    width: 100%;
    border-collapse: collapse;
}

.modal-calendar-settings .panel-body > table > tbody > tr > td {
    padding: 11px 0;
    border-bottom: 1px solid var(--bp-border);
    font-size: 13px;
    color: var(--bp-text);
    vertical-align: middle;
}

.modal-calendar-settings .panel-body > table > tbody > tr:last-child > td {
    border-bottom: none;
}

.modal-calendar-settings .panel-body > table > tbody > tr > td:first-child {
    width: 55%;
    padding-right: 16px;
    font-weight: 600;
    color: var(--bp-text-muted);
}

.modal-calendar-settings input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--bp-primary);
}

.modal-calendar-settings #d_start_time_section,
.modal-calendar-settings #d_end_time_section {
    display: flex;
    align-items: center;
    gap: 6px;
}

.modal-calendar-settings select {
    width: auto !important;
    min-width: 76px;
    height: 36px;
    padding: 0 28px 0 12px;
    border: 1px solid var(--bp-border-strong);
    border-radius: 10px;
    background-color: var(--bp-surface);
    font-size: 13px;
    color: var(--bp-text);
}

.modal-calendar-settings select:focus,
.modal-calendar-settings input.color:focus {
    border-color: var(--bp-primary);
    box-shadow: 0 0 0 3px var(--bp-primary-soft);
    outline: none;
}

/* Colour settings: a header row, then Meetings / Calls / Tasks / ... with their three colours */
.modal-calendar-settings #subpanel_settings_color th {
    padding: 10px 10px 6px 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bp-text-muted);
}

.modal-calendar-settings #subpanel_settings_color td {
    padding: 6px 10px 6px 0;
    border: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--bp-text);
}

.modal-calendar-settings input.color {
    width: 100px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--bp-border-strong);
    border-radius: 10px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12.5px;
    text-transform: uppercase;
    text-align: center;
}

/* User list */
.modal-calendar-user-list #shared_cal th {
    padding: 4px 0 12px;
    font-size: 13px;
    font-weight: 400;
    text-align: left;
    color: var(--bp-text-muted);
}

.modal-calendar-user-list #shared_cal table.edit.view {
    width: 100%;
}

.modal-calendar-user-list #shared_cal table.edit.view td {
    border: none;
    padding: 0 8px 0 0;
    vertical-align: top;
}

.modal-calendar-user-list #shared_cal table.edit.view td:first-child {
    padding-top: 8px;
    width: 1%;
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bp-text-muted);
}

.modal-calendar-user-list #shared_ids {
    width: 100% !important;
    min-width: 320px;
    height: 260px;
    padding: 6px;
    border: 1px solid var(--bp-border-strong);
    border-radius: 12px;
    background-color: var(--bp-surface) !important;
    background-image: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    font-size: 13px;
    color: var(--bp-text);
}

.modal-calendar-user-list #shared_ids:focus {
    border-color: var(--bp-primary);
    box-shadow: 0 0 0 3px var(--bp-primary-soft);
    outline: none;
}

.modal-calendar-user-list #shared_ids option {
    padding: 6px 10px;
    border-radius: 8px;
}

.modal-calendar-user-list #shared_ids option:checked {
    background: var(--bp-primary) linear-gradient(0deg, var(--bp-primary), var(--bp-primary));
    color: #fff;
}

/* Move up / move down: round buttons with chevrons in place of the old arrow pictures */
.modal-calendar-user-list #shared_cal table.edit.view td:last-child {
    width: 1%;
    padding-top: 6px;
}

.modal-calendar-user-list #shared_cal a:has(> img) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-bottom: 6px;
    border-radius: 50%;
    background: var(--bp-surface-alt);
    border: 1px solid var(--bp-border);
    cursor: pointer;
}

.modal-calendar-user-list #shared_cal a:has(> img):hover {
    background: var(--bp-primary-soft);
}

.modal-calendar-user-list #shared_cal a > img {
    display: none;
}

.modal-calendar-user-list #shared_cal a:has(> img)::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-left: 2px solid var(--bp-text-muted);
    border-top: 2px solid var(--bp-text-muted);
}

.modal-calendar-user-list #shared_cal a:has(> img[alt="Sort"]):first-of-type::after {
    margin-top: 4px;
    transform: rotate(45deg);
}

.modal-calendar-user-list #shared_cal a:has(> img[alt="Sort"]):nth-of-type(2)::after {
    margin-top: -4px;
    transform: rotate(225deg);
}

.modal-calendar-user-list #shared_cal br {
    display: none;
}

/* Administration page: sections grouped into cards by style.js (adminCards); each setting is a row with a description */
#content.bpbytes-content .bpbytes-admin-grid {
    /* Two columns that style.js fills (each card goes in the shorter one); they stack on a narrow screen */
    display: flex;
    flex-wrap: wrap;
    gap: 0 18px;
    align-items: flex-start;
}

#content.bpbytes-content .bpbytes-admin-col {
    flex: 1 1 400px;
    min-width: 0;
}

#content.bpbytes-content .bpbytes-admin-card {
    --accent: var(--bp-cat-1);
    display: block;
    margin: 0 0 18px;
    padding: 18px 12px 10px;
    background: var(--bp-surface);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-lg);
    box-shadow: var(--bp-shadow);
}

/* The page's own outer panel is not needed around the cards */
#content.bpbytes-content .dashletPanelMenu.wizard:has(.bpbytes-admin-grid),
#content.bpbytes-content .dashletPanelMenu.wizard:has(.bpbytes-admin-grid) > .bd {
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
}

#content.bpbytes-content .bpbytes-admin-card--2 { --accent: var(--bp-cat-2); }
#content.bpbytes-content .bpbytes-admin-card--3 { --accent: var(--bp-cat-3); }
#content.bpbytes-content .bpbytes-admin-card--4 { --accent: var(--bp-cat-4); }
#content.bpbytes-content .bpbytes-admin-card--5 { --accent: var(--bp-cat-5); }
#content.bpbytes-content .bpbytes-admin-card--6 { --accent: var(--bp-cat-6); }
#content.bpbytes-content .bpbytes-admin-card--7 { --accent: var(--bp-cat-7); }
#content.bpbytes-content .bpbytes-admin-card--8 { --accent: var(--bp-cat-8); }

#content.bpbytes-content .bpbytes-admin-card > h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 8px 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--bp-title);
}

#content.bpbytes-content .bpbytes-admin-card > h3::before {
    content: "";
    width: 5px;
    height: 18px;
    border-radius: 3px;
    background: var(--accent);
}

#content.bpbytes-content .bpbytes-admin-card__desc {
    margin: 0 8px 10px 23px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--bp-text-muted);
}

#content.bpbytes-content .bpbytes-admin-card table.other.view {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

#content.bpbytes-content .bpbytes-admin-card table.other.view,
#content.bpbytes-content .bpbytes-admin-card table.other.view tbody {
    display: block;
}

#content.bpbytes-content .bpbytes-admin-card table.other.view tr {
    display: block;
    padding: 8px 10px;
    border-radius: 10px;
    transition: background var(--bp-transition);
}

#content.bpbytes-content .bpbytes-admin-card table.other.view tr:hover {
    background: var(--bp-surface-alt);
}

#content.bpbytes-content .bpbytes-admin-card table.other.view td {
    display: block;
    width: auto !important;
    padding: 0;
    border: none;
    background: none;
}

#content.bpbytes-content .bpbytes-admin-card table.other.view td:first-child {
    display: flex;
    align-items: center;
    gap: 10px;
}

#content.bpbytes-content .bpbytes-admin-card table.other.view td:first-child .suitepicon {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    color: var(--accent);
}

#content.bpbytes-content .bpbytes-admin-card table.other.view td:first-child a {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bp-text);
    text-decoration: none;
}

#content.bpbytes-content .bpbytes-admin-card table.other.view tr:hover td:first-child a {
    color: var(--bp-primary);
}

#content.bpbytes-content .bpbytes-admin-card table.other.view td:nth-child(2) {
    margin: 2px 0 0 28px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--bp-text-muted);
}

::selection {
    background: var(--bp-accent-soft);
}

/* Scrollbars inside content area */
#content.bpbytes-content ::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

#content.bpbytes-content ::-webkit-scrollbar-thumb {
    background: var(--bp-border-strong);
    border-radius: 4px;
}

/*
 * YUI2 DataTable (YAHOO.widget.DataTable / ScrollingDataTable) — used by Studio's "Fields" list
 * (modules/ModuleBuilder/tpls/MBModule/fields.tpl, #field_table) and other admin screens built on
 * the same widget. SuiteP "just works" here because its own bundled style.css hard-bakes in the
 * full YUI2 DataTable sam-skin CSS, loaded globally; BPBytes ships its own style.css instead (see
 * the #ajaxStatusDiv comment above for the same situation) and never carried any .yui-dt-* rule
 * over, so the widget's header/scroll-body wrapper divs had no overflow/height/border rules at
 * all and rendered as a collapsed sliver instead of an actual table.
 */
#content.bpbytes-content .yui-dt {
    position: relative;
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius);
    background: var(--bp-surface);
}

#content.bpbytes-content .yui-dt table {
    border-collapse: collapse;
    width: 100%;
}

#content.bpbytes-content .yui-dt-scrollable .yui-dt-hd {
    overflow: hidden;
}

#content.bpbytes-content .yui-dt-scrollable .yui-dt-bd {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 420px;
}

#content.bpbytes-content .yui-dt th {
    background: var(--bp-surface-alt);
    padding: 8px 10px;
    text-align: left;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--bp-text-muted);
    border-bottom: 1px solid var(--bp-border);
    white-space: nowrap;
}

#content.bpbytes-content .yui-dt th .yui-dt-liner {
    padding: 0;
}

#content.bpbytes-content .yui-dt td {
    padding: 8px 10px;
    font-size: 13px;
    color: var(--bp-text);
    border-bottom: 1px solid var(--bp-border);
    vertical-align: middle;
}

#content.bpbytes-content .yui-dt td .yui-dt-liner {
    overflow: hidden;
    text-overflow: ellipsis;
}

#content.bpbytes-content .yui-dt tr.yui-dt-even {
    background: var(--bp-surface);
}

#content.bpbytes-content .yui-dt tr.yui-dt-odd {
    background: var(--bp-surface-alt);
}

#content.bpbytes-content .yui-dt tr.yui-dt-selected td {
    background: var(--bp-primary-soft);
}

/*
 * YUI2 Layout Manager (Studio's three-region "Modules" / center / "Help" screen, #mblayout) —
 * now that layout.css/layout-skin.css (loaded in _head.tpl) give it working structure/positioning,
 * its stock skin underneath is the raw YUI2 look: a hard blue sprite-image header bar, bold white
 * Arial text, square 2005-era borders. Re-pointing it at BPBytes's own tokens instead.
 */
#content.bpbytes-content .yui-layout {
    background-color: var(--bp-surface-alt);
}

#content.bpbytes-content .yui-layout-hd {
    background: var(--bp-title);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius) var(--bp-radius) 0 0;
}

#content.bpbytes-content .yui-layout-unit div.yui-layout-hd h2 {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    padding: 10px 14px;
    margin: 0;
}

#content.bpbytes-content .yui-layout-unit div.yui-layout-bd {
    border: 1px solid var(--bp-border);
    border-top: none;
    background-color: var(--bp-surface);
}

#content.bpbytes-content .yui-layout-unit div.yui-layout-bd-noft {
    border-bottom: 1px solid var(--bp-border);
}

#content.bpbytes-content .yui-layout-unit div.yui-layout-bd-nohd {
    border-top: 1px solid var(--bp-border);
}

#content.bpbytes-content .yui-layout-clip {
    background-color: var(--bp-surface-alt);
    border: 1px solid var(--bp-border);
}

/*
 * Bootstrap modal popups (custom/include/javascript/custom_popup.js's showCustomPopup()) are
 * appended straight to <body> ($('body').append(...)), entirely outside #content.bpbytes-content
 * — nothing else in this theme reaches them (same reason listview.css needed a separate
 * .modal-body table.list.view rule for the sibling "View X/Y" popups). This covers the modal
 * chrome itself plus the "Submit" form pattern (custom/modules/Users/tpls/add_document.tpl and
 * its siblings): a plain Bootstrap form with no theme styling of its own at all.
 */
.modal-content {
    border-radius: var(--bp-radius-lg);
    border: none;
    box-shadow: var(--bp-shadow-lg);
}

.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--bp-border);
}

.modal-header .modal-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--bp-text);
}

.modal-header .close {
    font-size: 22px;
    color: var(--bp-text-faint);
    opacity: 1;
    text-shadow: none;
}

.modal-header .close:hover {
    color: var(--bp-text-muted);
}

.modal-body {
    padding: 24px;
}

.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--bp-border);
}

/*
 * "Select PDF Template" picker (custom/include/SugarFields/Fields/Pdf/pdf_template_popup.js,
 * shown when a PDF Report has more than one template). It's built by hand with
 * insertAdjacentHTML() rather than through showCustomPopup(), but reuses the exact same
 * .modal-backdrop/.modal/.modal-dialog/.modal-content/.modal-header/.modal-body/.modal-footer
 * markup so it inherits the one modal chrome above instead of its own one-off styling.
 */
.bpbytes-pdf-template-modal .modal-dialog {
    max-width: 420px;
    margin: 80px auto 0;
}

.bpbytes-pdf-template-list {
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius);
    overflow: hidden;
}

.bpbytes-pdf-template-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bp-surface);
    color: var(--bp-text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--bp-border);
    transition: background var(--bp-transition);
}

.bpbytes-pdf-template-item:last-child {
    border-bottom: none;
}

.bpbytes-pdf-template-item:hover {
    background: var(--bp-surface-alt);
    color: var(--bp-text);
}

.bpbytes-pdf-template-item__icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background-color: var(--bp-primary);
    -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='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%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='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
}

.modal-body .control-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--bp-text);
}

.modal-body .form-group {
    margin-bottom: 18px;
}

.modal-body .form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius);
    font-size: 14px;
    color: var(--bp-text);
    background: var(--bp-surface);
    box-shadow: none;
}

.modal-body .form-control:focus {
    outline: none;
    border-color: var(--bp-primary);
    box-shadow: 0 0 0 3px var(--bp-primary-soft);
}

/* Date-picker trigger — Bootstrap's own glyphicon font isn't loaded by this theme, so
   .glyphicon-calendar rendered as an empty gray box with no visible icon at all; swapped for the
   theme's own SVG mask icon, the same currentColor + mask-image technique used everywhere else. */
.modal-body .input-group.date {
    display: flex;
}

.modal-body .input-group.date .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.modal-body .input-group-addon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    flex: 0 0 auto;
    border: 1px solid var(--bp-border);
    border-left: none;
    border-top-right-radius: var(--bp-radius);
    border-bottom-right-radius: var(--bp-radius);
    background: var(--bp-surface-alt);
    color: var(--bp-text-muted);
}

.modal-body .input-group-addon .glyphicon-calendar {
    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;
    -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%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%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%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

/* File input — modern browsers let ::file-selector-button be styled directly, no JS/markup
   change needed to replace the raw OS-native "Choose file" button. */
.modal-body input[type="file"] {
    font-size: 13px;
    color: var(--bp-text-muted);
}

.modal-body input[type="file"]::file-selector-button {
    padding: 8px 14px;
    margin-right: 10px;
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius);
    background: var(--bp-surface-alt);
    color: var(--bp-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.modal-body input[type="file"]::file-selector-button:hover {
    background: var(--bp-primary-soft);
    color: var(--bp-primary);
}

/* The remove-attachment "x" carries its own inline style (add_document.tpl/the equivalent JS
   template string) — color/padding/border/border-radius all need !important to win over that. */
.modal-body .attachments_gallery .remove_button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 18px !important;
    height: 18px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 1px solid var(--bp-danger) !important;
    color: var(--bp-danger) !important;
    text-decoration: none;
    vertical-align: middle;
}

/* Same consistent rounded/padded look for every .btn everywhere it appears — not just inside a
   modal, but the "View 1/1" / "Start Course" style action buttons rendered directly in dashlets,
   listviews, and subpanels too (those live inside #content.bpbytes-content, modals don't, hence
   both selectors below). Previously unstyled anywhere, relying on raw Bootstrap 3 defaults.
   Radius matches the shared .button rule above (var(--bp-radius-sm), not this file's other
   --bp-radius) — .btn and .button are two different class conventions core templates use for
   what's conceptually the same control, and they used to disagree on how rounded it should be. */
#content.bpbytes-content .btn,
.modal-footer .btn,
.modal-body .btn {
    border-radius: var(--bp-radius-sm);
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
}

/* Bootstrap's default nowrap kept a long label like "Approve/Reject" forced onto one line, which
   is what pushed it past a narrow subpanel/dashlet column's edge in the first place — wrapping
   is the fallback for whenever a label is too long to fit at the smaller size above. max-width
   was tried alongside this first, but some of these columns are defined with a fixed percentage
   width (e.g. bp_ComplianceDocument's dashletviewdefs.php: 'document_action' => width '10%') —
   capping the button itself to that width, rather than just letting it wrap, squeezed its
   padding unevenly for a label wide enough to need it. Wrapping alone doesn't have that problem.
*/
#content.bpbytes-content .btn {
    white-space: normal;
}

/*
 * ListView "Choose columns" dialog (include/ListView/ListViewColumnsFilterDialog.tpl) — a
 * jQuery UI sortable dual-list column chooser with zero styling anywhere before this: bare
 * default <h1> section headers, a plain bulleted <ul> with "Displayed" and "Hidden" just
 * stacked one after another rather than laid out as two parallel drag targets, and a "Save
 * changes" button that never even got the base .modal-footer .btn treatment above since it's
 * missing the .btn class entirely (class="button red", not "btn button red"). Redesigned as two
 * side-by-side cards with a clean draggable-row list in each, colour-accented via the existing
 * .chooserList.green ("Displayed")/.red ("Hidden") classes instead of the raw <h1>s.
 */
#columnsFilterDialog .chooserContent {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 20px;
}

#columnsFilterDialog .chooserContent h1 {
    grid-row: 1;
    margin: 0 0 10px;
    padding-bottom: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--bp-text);
    border-bottom: 2px solid var(--bp-border);
}

#columnsFilterDialog .chooserContent h1:nth-of-type(1) {
    grid-column: 1;
    border-bottom-color: var(--bp-success);
}

#columnsFilterDialog .chooserContent h1:nth-of-type(2) {
    grid-column: 2;
    border-bottom-color: var(--bp-danger);
}

#columnsFilterDialog .chooserList {
    grid-row: 2;
    list-style: none;
    margin: 0;
    padding: 8px;
    min-height: 220px;
    max-height: 360px;
    overflow-y: auto;
    background: var(--bp-surface-alt);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius);
}

#columnsFilterDialog .chooserList.green {
    grid-column: 1;
}

#columnsFilterDialog .chooserList.red {
    grid-column: 2;
}

#columnsFilterDialog .chooserList li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    margin-bottom: 4px;
    background: var(--bp-surface);
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius-sm);
    font-size: 13px;
    color: var(--bp-text);
    cursor: grab;
    box-shadow: var(--bp-shadow-sm);
}

#columnsFilterDialog .chooserList li:last-child {
    margin-bottom: 0;
}

#columnsFilterDialog .chooserList li:hover {
    border-color: var(--bp-primary);
}

/* A small drag-handle glyph (6-dot grip), the same mask-icon technique used everywhere else in
   the theme — makes it visually obvious these rows are draggable, not just clickable text. */
#columnsFilterDialog .chooserList li::before {
    content: "";
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    background-color: var(--bp-text-faint);
    -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'%3E%3Ccircle cx='9' cy='6' r='1'/%3E%3Ccircle cx='9' cy='12' r='1'/%3E%3Ccircle cx='9' cy='18' r='1'/%3E%3Ccircle cx='15' cy='6' r='1'/%3E%3Ccircle cx='15' cy='12' r='1'/%3E%3Ccircle cx='15' cy='18' r='1'/%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'%3E%3Ccircle cx='9' cy='6' r='1'/%3E%3Ccircle cx='9' cy='12' r='1'/%3E%3Ccircle cx='9' cy='18' r='1'/%3E%3Ccircle cx='15' cy='6' r='1'/%3E%3Ccircle cx='15' cy='12' r='1'/%3E%3Ccircle cx='15' cy='18' r='1'/%3E%3C/svg%3E");
}

/* jQuery UI's sortable helper (the element being dragged) — lifted look while in motion. */
#columnsFilterDialog .chooserList li.ui-sortable-helper {
    box-shadow: var(--bp-shadow-lg);
    opacity: 0.95;
}

#columnsFilterDialog #error-displayed-columns {
    grid-row: 3;
    grid-column: 1 / -1;
    margin-top: 10px;
    font-size: 12px;
    color: var(--bp-danger);
}

#columnsFilterDialog #error-displayed-columns:empty {
    display: none;
}

/* The Save button here (class="button red", no .btn) and Close (class="btn button purple
   btn-default") both now come from the shared .modal-content .button / .button.red rules
   above — nothing dialog-specific left to add here. */

/* Session timeout warning (jquery.userTimeout.js): a card under the top bar that turns red for the last 15 seconds. */
.bpbytes-session-banner {
    position: fixed;
    top: calc(var(--bp-topbar-height) + 12px);
    right: 24px;
    z-index: 1100;
    width: min(640px, calc(100% - 48px));
}

@media (max-width: 991px) {
    .bpbytes-session-banner {
        right: 12px;
        left: 12px;
        width: auto;
    }
}

.bpbytes-session-banner__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 16px;
    padding: 14px 18px;
    border: 1px solid var(--bp-border);
    border-left: 4px solid var(--bp-warning);
    border-radius: var(--bp-radius);
    background: var(--bp-surface);
    color: var(--bp-text);
    font-size: 13.5px;
    box-shadow: var(--bp-shadow-lg);
}

.bpbytes-session-banner.is-urgent .bpbytes-session-banner__inner {
    border-left-color: var(--bp-danger);
    background: var(--bp-danger-soft);
}

.bpbytes-session-banner__text {
    flex: 1 1 260px;
    line-height: 1.5;
}

.bpbytes-session-banner__text b {
    color: var(--bp-warning);
    font-variant-numeric: tabular-nums;
}

.bpbytes-session-banner.is-urgent .bpbytes-session-banner__text b {
    color: var(--bp-danger);
}

.bpbytes-session-banner__actions {
    display: flex;
    gap: 8px;
}

.bpbytes-session-banner__stay,
.bpbytes-session-banner__logoff {
    height: var(--bp-btn-h);
    padding: 0 16px;
    border: 1px solid var(--bp-primary);
    border-radius: var(--bp-radius-sm);
    background: var(--bp-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.bpbytes-session-banner__stay:hover {
    background: var(--bp-primary-hover);
    border-color: var(--bp-primary-hover);
}

.bpbytes-session-banner__logoff {
    border-color: var(--bp-border-strong);
    background: var(--bp-surface);
    color: var(--bp-text);
}

.bpbytes-session-banner__logoff:hover {
    background: var(--bp-surface-alt);
}


.bpbytes-session-banner button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--bp-primary-soft);
}

/* Worker ID card popup: the markup is the "Worker ID Card" PDF template */
.bpbytes-idcard {
    --idcard-accent: var(--bp-text-faint);
    --idcard-soft: var(--bp-bg);
    overflow: hidden;
    border: 1px solid var(--bp-border);
    border-top: 6px solid var(--idcard-accent);
    border-radius: var(--bp-radius-lg);
    background: var(--bp-surface);
    color: var(--bp-text);
    font-family: var(--bp-font);
}

.bpbytes-idcard.is-good {
    --idcard-accent: var(--bp-success);
    --idcard-soft: var(--bp-success-soft);
}

.bpbytes-idcard.is-bad {
    --idcard-accent: var(--bp-danger);
    --idcard-soft: var(--bp-danger-soft);
}

.bpbytes-idcard__head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px 16px;
}

.bpbytes-idcard__photo {
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    border-radius: var(--bp-radius);
    background: var(--bp-surface-alt);
    object-fit: cover;
}

.bpbytes-idcard__who {
    min-width: 0;
}

.bpbytes-idcard__name {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
}

.bpbytes-idcard__role {
    margin-top: 2px;
    color: var(--bp-primary);
    font-size: 13.5px;
    font-weight: 600;
}

.bpbytes-idcard__company {
    margin-top: 4px;
    color: var(--bp-text-muted);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.bpbytes-idcard__banner {
    margin: 0 22px;
    padding: 10px 16px;
    border-radius: var(--bp-radius-sm);
    background: var(--idcard-soft);
    color: var(--idcard-accent);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

.bpbytes-idcard.is-neutral .bpbytes-idcard__banner {
    color: var(--bp-text-muted);
}

.bpbytes-idcard__main {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 22px;
}

.bpbytes-idcard__qr {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--bp-text-muted);
    font-size: 11px;
    font-weight: 600;
}

.bpbytes-idcard__qr img {
    padding: 6px;
    border: 1px solid var(--bp-border);
    border-radius: var(--bp-radius);
    background: #fff;
}

.bpbytes-idcard__details {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.bpbytes-idcard__key,
.bpbytes-idcard__heading {
    color: var(--bp-text-faint);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.bpbytes-idcard__value {
    margin-top: 2px;
    font-size: 13.5px;
    overflow-wrap: anywhere;
}

.bpbytes-idcard__value:empty::before {
    content: "-";
}

.bpbytes-idcard__compliance {
    padding: 14px 22px 18px;
    border-top: 1px solid var(--bp-border);
    background: var(--bp-surface-alt);
}

.bpbytes-idcard__heading {
    margin-bottom: 4px;
}

.bpbytes-idcard__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--bp-border);
    font-size: 13px;
}

.bpbytes-idcard__row:last-child {
    border-bottom: 0;
}

.bpbytes-idcard__none {
    color: var(--bp-text-faint);
    font-size: 13px;
    font-style: italic;
}

.bpbytes-idcard__pill {
    flex: 0 0 auto;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
}

.bpbytes-idcard__pill.is-good {
    background: var(--bp-success-soft);
    color: var(--bp-success);
}

.bpbytes-idcard__pill.is-bad {
    background: var(--bp-danger-soft);
    color: var(--bp-danger);
}

.bpbytes-idcard__pill.is-neutral {
    background: var(--bp-bg);
    color: var(--bp-text-muted);
}

@media (max-width: 420px) {
    .bpbytes-idcard__main {
        flex-direction: column;
        align-items: stretch;
    }

    .bpbytes-idcard__qr {
        align-self: center;
    }
}

/*
 * Bulk notification popups (Users list: push, SMS, email). A recipient summary on top, the
 * fields, then Cancel / primary action right-aligned. Everything else comes from the shared
 * .modal-body form rules above.
 */
.bpbytes-notify__summary {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 10px 14px;
    border-radius: var(--bp-radius);
    background: var(--bp-primary-soft, #eef2ff);
    color: var(--bp-text);
    font-size: 13px;
}

.bpbytes-notify__icon {
    flex: 0 0 18px;
    height: 18px;
    background: var(--bp-primary);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.bpbytes-notify__icon--push {
    -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='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.7 21a2 2 0 0 1-3.4 0'/%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='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.7 21a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E");
}

.bpbytes-notify__icon--sms {
    -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='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%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='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}

.bpbytes-notify__icon--email {
    -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%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%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%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E");
}

.bpbytes-notify__hint {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--bp-text-muted);
}

.bpbytes-notify__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--bp-border);
}

/* Popups (Learning, Documents and Submit document): buttons, tables and attachments in the theme's look */
.modal-content .modal-body .btn-primary,
.modal-content .modal-body .btn-warning,
.modal-content .modal-body input[type="submit"].btn-primary {
    height: 36px;
    padding: 0 22px;
    border: 1px solid var(--bp-primary);
    border-radius: var(--bp-radius);
    background: var(--bp-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    box-shadow: none;
}

.modal-content .modal-body .btn-primary:hover,
.modal-content .modal-body .btn-warning:hover,
.modal-content .modal-body .btn-primary:focus,
.modal-content .modal-body input[type="submit"].btn-primary:hover {
    background: var(--bp-primary-hover);
    border-color: var(--bp-primary-hover);
    color: #fff;
}

.modal-content .modal-body .btn-default,
.modal-content .modal-body input[type="button"].btn-default {
    height: 36px;
    padding: 0 22px;
    border: 1px solid var(--bp-border-strong);
    border-radius: var(--bp-radius);
    background: var(--bp-surface);
    color: var(--bp-text);
    font-size: 13px;
    font-weight: 600;
    box-shadow: none;
}

.modal-content .modal-body .btn-default:hover,
.modal-content .modal-body input[type="button"].btn-default:hover {
    border-color: var(--bp-primary);
    background: var(--bp-primary-soft);
}

.modal-body table.list.view tbody td a {
    text-decoration: none !important;
    font-weight: 600;
}

.modal-body table.list.view tbody td li {
    margin: 0;
    list-style: none;
}

.modal-body table.list.view tbody td[colspan] {
    padding: 10px 16px;
    text-align: center;
    color: var(--bp-text-muted);
}

.modal-body .attachments_gallery p {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 0;
    padding: 8px 12px;
    border: 1px solid var(--bp-border);
    border-radius: 10px;
    background: var(--bp-surface-alt);
}

.modal-body .attachments_gallery p a:not(.remove_button) {
    color: var(--bp-primary);
    font-weight: 600;
    text-decoration: none;
}

/* Status pills inside popups (the list view rules only reach #content) */
.modal-body .bpbytes-status-pill {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.6;
}

.modal-body .bpbytes-status-pill.is-custom {
    color: color-mix(in srgb, var(--pill) 70%, #000) !important;
    background: color-mix(in srgb, var(--pill) 16%, #fff);
    font-style: normal !important;
}

/* Action buttons inside popup tables (for example Start Course): the label centred in the button */
.modal-body table.list.view tbody td .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    white-space: nowrap;
}

.modal-body table.list.view tbody td .btn a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #fff !important;
}

/* The date picker in popups (jQuery UI datepicker), in the same modern look as the calendar elsewhere */
#ui-datepicker-div.ui-datepicker {
    width: 300px;
    padding: 14px 16px 16px;
    border: none;
    border-radius: 16px;
    background: var(--bp-surface);
    box-shadow: 0 18px 48px rgba(31, 36, 64, 0.22), 0 2px 8px rgba(31, 36, 64, 0.08);
    font-family: var(--bp-font);
}

#ui-datepicker-div .ui-datepicker-header {
    position: relative;
    padding: 2px 0 10px;
    border: 0;
    border-radius: 0;
    background: none;
}

#ui-datepicker-div .ui-datepicker-title {
    margin: 0 40px;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    line-height: 32px;
    color: var(--bp-title);
}

#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {
    top: 2px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: var(--bp-surface-alt);
    cursor: pointer;
}

#ui-datepicker-div .ui-datepicker-prev { left: 0; }
#ui-datepicker-div .ui-datepicker-next { right: 0; }

#ui-datepicker-div .ui-datepicker-prev:hover,
#ui-datepicker-div .ui-datepicker-next:hover {
    background: var(--bp-primary-soft);
}

#ui-datepicker-div .ui-datepicker-prev span,
#ui-datepicker-div .ui-datepicker-next span {
    display: none;
}

#ui-datepicker-div .ui-datepicker-prev::before,
#ui-datepicker-div .ui-datepicker-next::before {
    display: block;
    text-align: center;
    font-size: 22px;
    line-height: 29px;
    color: var(--bp-primary);
}

#ui-datepicker-div .ui-datepicker-prev::before { content: "\2039"; }
#ui-datepicker-div .ui-datepicker-next::before { content: "\203A"; }

#ui-datepicker-div table.ui-datepicker-calendar {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 13px;
}

#ui-datepicker-div table.ui-datepicker-calendar th {
    padding: 6px 0;
    border: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    color: var(--bp-text-faint);
}

#ui-datepicker-div table.ui-datepicker-calendar td {
    padding: 2px;
    border: 0;
    text-align: center;
}

#ui-datepicker-div table.ui-datepicker-calendar td a,
#ui-datepicker-div table.ui-datepicker-calendar td span {
    display: block;
    width: 34px;
    height: 34px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    box-shadow: none;
    font-weight: 500;
    line-height: 34px;
    text-align: center;
    color: var(--bp-text);
}

#ui-datepicker-div table.ui-datepicker-calendar td a:hover {
    background: var(--bp-primary-soft);
    color: var(--bp-primary);
}

#ui-datepicker-div table.ui-datepicker-calendar td.ui-datepicker-today a {
    background: none;
    box-shadow: inset 0 0 0 1.5px var(--bp-primary);
    color: var(--bp-primary);
    font-weight: 700;
}

#ui-datepicker-div table.ui-datepicker-calendar td a.ui-state-active {
    background: var(--bp-primary);
    box-shadow: none;
    color: #fff;
    font-weight: 700;
}

#ui-datepicker-div table.ui-datepicker-calendar td.ui-datepicker-other-month a,
#ui-datepicker-div table.ui-datepicker-calendar td.ui-datepicker-other-month span {
    color: var(--bp-text-faint);
}

#ui-datepicker-div table.ui-datepicker-calendar td.ui-state-disabled span {
    color: #c6cbe0;
}

.modal-body .input-group-addon {
    cursor: pointer;
}

/* Approve / Reject in the review popup: real buttons, the same size as Submit and Cancel */
.modal-content .modal-body .btn-success,
.modal-content .modal-body .btn-danger {
    height: 36px;
    padding: 0 22px;
    border-radius: var(--bp-radius);
    font-size: 13px;
    font-weight: 600;
    box-shadow: none;
    text-shadow: none;
    background-image: none;
    color: #fff;
}

.modal-content .modal-body .btn-success {
    border: 1px solid var(--bp-success);
    background: var(--bp-success);
}

.modal-content .modal-body .btn-danger {
    border: 1px solid var(--bp-danger);
    background: var(--bp-danger);
}

.modal-content .modal-body .btn-success:hover,
.modal-content .modal-body .btn-success:focus {
    border-color: #15803d;
    background: #15803d;
    color: #fff;
}

.modal-content .modal-body .btn-danger:hover,
.modal-content .modal-body .btn-danger:focus {
    border-color: #b91c1c;
    background: #b91c1c;
    color: #fff;
}

/* The learning and document tables in the same popup: a gap between them */
.modal-body .bpbytes-table-scroll + .bpbytes-table-scroll {
    margin-top: 24px;
}