/*
 * Server-rendered app redesign layer.
 * Mirrors the external Vue portal design tokens and component rhythm while
 * preserving the existing JSP ids/classes used by legacy JavaScript.
 */

.byf-app-redesign {
    --byf-redesign-primary: var(--byf-tenant-primary, #2f7ecf);
    --byf-redesign-primary-hover: var(--byf-tenant-primary-hover, #5298dd);
    --byf-redesign-primary-soft: var(--byf-tenant-primary-soft, rgba(47, 126, 207, 0.1));
    --byf-redesign-primary-dark: var(--byf-tenant-primary-dark, #14213d);
    --byf-redesign-primary-meta: var(--byf-tenant-primary-soft, #e8e9ef);
    --byf-redesign-shared-folder-bg: color-mix(in srgb, var(--byf-redesign-primary) 10%, #fff);
    --byf-redesign-shared-document-overlay: color-mix(in srgb, var(--byf-redesign-primary) 10%, transparent);
    --byf-redesign-primary-border: var(--byf-tenant-primary-border, rgba(47, 126, 207, 0.28));
    --byf-redesign-primary-foreground: var(--byf-tenant-primary-foreground, #fff);
    --byf-redesign-logo-background: var(--byf-sidebar-logo-background, rgba(255, 255, 255, 0.82));
    --byf-redesign-bg: #f6f8fb;
    --byf-redesign-foreground: #111827;
    --byf-redesign-card: #fff;
    --byf-redesign-muted: #eef3f8;
    --byf-redesign-muted-foreground: #64748b;
    --byf-redesign-border: #dfe7f0;
    --byf-redesign-control-bg: #fff;
    --byf-redesign-control-border: #d7e3f1;
    --byf-redesign-control-radius: 10px;
    --byf-redesign-border-soft: rgba(148, 163, 184, 0.28);
    --byf-redesign-note-border: #d6aa00;
    --byf-redesign-shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.035);
    --byf-redesign-shadow-md: 0 16px 32px rgba(15, 23, 42, 0.08);
    --byf-redesign-radius: 12px;
    --byf-redesign-radius-sm: 8px;
    --byf-redesign-topbar-height: 0px;
    --byf-redesign-sidebar-expanded: 256px;
    --byf-redesign-sidebar-collapsed: 64px;
    --byf-redesign-card-meta-height: 52px;
    --byf-redesign-card-meta-height-small: 44px;
    --byf-redesign-card-meta-action: 28px;
    --byf-redesign-card-meta-action-small: 20px;
    --byf-redesign-card-meta-offset: 13px;
    --byf-redesign-card-meta-offset-small: 10px;
    --byf-redesign-corner-inset: 10px;
    --byf-redesign-corner-inset-small: 8px;
    --byf-redesign-corner-surface: #fff;
    --byf-redesign-corner-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
    --byf-redesign-quickfolder-base: var(--byf-quickfolder-color, #22c98b);
    --byf-redesign-quickfolder-accent: var(--byf-quickfolder-color, #8ef7c8);
    --byf-redesign-quickfolder-shared: color-mix(in srgb, var(--byf-redesign-quickfolder-base) 45%, #fff);
    --byf-redesign-quickfolder-shared-border: color-mix(in srgb, var(--byf-redesign-quickfolder-base) 68%, #0f9f6e);
    min-height: 100vh;
    overflow: hidden;
    background: var(--byf-redesign-bg);
    color: var(--byf-redesign-foreground);
    font-family: "Muli", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
}

.byf-app-redesign.mainnav-topbar {
    --byf-redesign-topbar-height: 56px;
}

.byf-app-redesign *,
.byf-app-redesign *::before,
.byf-app-redesign *::after {
    letter-spacing: 0;
}

.byf-app-redesign a {
    color: var(--byf-redesign-primary);
}

.byf-app-redesign a:hover {
    color: var(--byf-redesign-primary-hover);
    text-decoration: none;
}

/* Keep action colors semantic inside the redesign. The generic link color
 * above must not turn sharing controls tenant-blue after the legacy action
 * styles have assigned their state-specific color. */
.byf-app-redesign a.dashboard-icon-action,
.byf-app-redesign a.dashboard-icon-action:visited,
.byf-app-redesign .dashboard-icon-action.dashboard-icon-action--soft {
    color: var(--byf20-color-64748b);
}

.byf-app-redesign a.dashboard-icon-action.dashboard-icon-action--active,
.byf-app-redesign a.dashboard-icon-action.dashboard-icon-action--active:visited,
.byf-app-redesign a.dashboard-icon-action.dashboard-icon-action--active:hover,
.byf-app-redesign a.dashboard-icon-action.dashboard-icon-action--active:focus,
.byf-app-redesign a.dashboard-icon-action.dashboard-icon-action--active:active {
    color: var(--byf20-color-16a56b);
}

.byf-app-redesign a.dashboard-icon-action.dashboard-icon-action--warn,
.byf-app-redesign a.dashboard-icon-action.dashboard-icon-action--warn:visited,
.byf-app-redesign a.dashboard-icon-action.dashboard-icon-action--warn:hover,
.byf-app-redesign a.dashboard-icon-action.dashboard-icon-action--warn:focus,
.byf-app-redesign a.dashboard-icon-action.dashboard-icon-action--warn:active {
    color: var(--byf20-color-b97215);
}

.byf-app-redesign a.dashboard-icon-action.dashboard-icon-action--muted,
.byf-app-redesign a.dashboard-icon-action.dashboard-icon-action--muted:visited,
.byf-app-redesign a.dashboard-icon-action.dashboard-icon-action--muted:hover,
.byf-app-redesign a.dashboard-icon-action.dashboard-icon-action--muted:focus,
.byf-app-redesign a.dashboard-icon-action.dashboard-icon-action--muted:active {
    color: var(--byf20-color-7a8ea7);
}

.byf-app-redesign a.dashboard-icon-action.dashboard-icon-action--disabled,
.byf-app-redesign a.dashboard-icon-action.dashboard-icon-action--disabled:visited,
.byf-app-redesign a.dashboard-icon-action.dashboard-icon-action--disabled:hover,
.byf-app-redesign a.dashboard-icon-action.dashboard-icon-action--disabled:focus,
.byf-app-redesign a.dashboard-icon-action.dashboard-icon-action--disabled:active {
    color: var(--byf20-color-94a3b8);
}

.byf-app-redesign a.dashboard-icon-action.dashboard-icon-action--danger,
.byf-app-redesign a.dashboard-icon-action.dashboard-icon-action--danger:visited,
.byf-app-redesign a.dashboard-icon-action.dashboard-icon-action--danger:hover,
.byf-app-redesign a.dashboard-icon-action.dashboard-icon-action--danger:focus,
.byf-app-redesign a.dashboard-icon-action.dashboard-icon-action--danger:active {
    color: var(--byf20-color-ef4444);
}

/* The compact/legacy sharing row uses action names instead of the dashboard
 * state modifiers. Keep that rendering on the same semantic color contract. */
.byf-app-redesign .sharing-actions a.download-share,
.byf-app-redesign .sharing-actions a.upload-share {
    color: var(--byf20-color-64748b);
}

.byf-app-redesign .sharing-actions a.download-share.active,
.byf-app-redesign .sharing-actions a.upload-share.active {
    color: var(--byf20-color-16a56b);
}

.byf-app-redesign .sharing-actions a.upload-share.disabled,
.byf-app-redesign .sharing-actions a.download-share.disabled {
    color: var(--byf20-color-94a3b8);
}

.byf-app-redesign .sharing-actions a.remove-sharing,
.byf-app-redesign .sharing-actions a.remove-sharing:hover,
.byf-app-redesign .sharing-actions a.remove-sharing:focus,
.byf-app-redesign .sharing-actions a.remove-sharing:active {
    color: var(--byf20-color-ef4444);
}

/* App shell */
.byf-app-redesign .sticky#navbar-custom-m {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    left: var(--byf-redesign-sidebar-collapsed);
    z-index: 1020;
    height: var(--byf-redesign-topbar-height);
    box-sizing: border-box;
    background: var(--byf-redesign-card);
    /*border-bottom: 1px solid var(--byf-redesign-border);*/
    box-shadow: none;
    transition: left 180ms ease;
}

.byf-app-redesign.mainnav-topbar .sticky#navbar-custom-m {
    display: block;
    min-height: var(--byf-redesign-topbar-height);
    padding: 0 18px 0 28px;
    box-shadow: none;
}

.byf-app-redesign.mainnav-topbar .navbar-custom {
    min-height: var(--byf-redesign-topbar-height);
    height: var(--byf-redesign-topbar-height);
}

.byf-app-redesign.body-sidebar-expanded .sticky#navbar-custom-m {
    left: var(--byf-redesign-sidebar-expanded);
}

.byf-app-redesign .navbar-custom {
    min-height: var(--byf-redesign-topbar-height);
    height: var(--byf-redesign-topbar-height);
    padding: 0;
    background: var(--byf-redesign-card) !important;
    color: var(--byf-redesign-foreground);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.byf-app-redesign .navbar-custom .logo {
    display: none;
}

.byf-app-redesign .navbar-custom .navbar-collapse,
.byf-app-redesign .navbar-custom .navbar-nav {
    height: 100%;
}

.byf-app-redesign .navbar-custom .navbar-nav {
    align-items: center;
    gap: 4px;
    padding: 0 !important;
    justify-content: flex-start !important;
}

.byf-app-redesign .navbar-custom .nav-item {
    display: flex;
    align-items: center;
}

.byf-app-redesign .navbar-custom .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 8px 10px !important;
    border-radius: var(--byf-redesign-radius-sm);
    color: var(--byf-redesign-muted-foreground) !important;
    font-size: 13px;
    font-weight: 600;
    transition: background 160ms ease, color 160ms ease;
}

.byf-app-redesign.mainnav-topbar .navbar-custom .navbar-nav {
    gap: 4px;
}

.byf-app-redesign.mainnav-topbar .navbar-custom .byf-mainnav-topbar-item .nav-link {
    height: 40px;
    min-height: 36px;
    box-sizing: border-box;
    padding: 7px 18px !important;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: #526071 !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.byf-app-redesign.mainnav-topbar .navbar-custom .byf-mainnav-topbar-item .nav-link > i {
    min-width: 16px;
    font-size: 15px;
    text-align: center;
}

.byf-app-redesign.mainnav-topbar .navbar-custom .byf-mainnav-topbar-item.active .nav-link,
.byf-app-redesign.mainnav-topbar .navbar-custom .byf-mainnav-topbar-item .nav-link.active {
    border-color: color-mix(in srgb, var(--byf-redesign-primary) 26%, #fff);
    background: color-mix(in srgb, var(--byf-redesign-primary) 11%, #fff);
    color: var(--byf-redesign-primary-dark) !important;
    font-weight: 600;
    box-shadow: none !important;
}

.byf-app-redesign.mainnav-topbar .navbar-custom .byf-mainnav-topbar-item:not(.active) .nav-link:hover {
    border-color: color-mix(in srgb, var(--byf-redesign-primary) 14%, #fff);
    background: color-mix(in srgb, var(--byf-redesign-primary) 6%, #fff);
    color: var(--byf-redesign-primary-dark) !important;
}

.byf-app-redesign .byf-mainnav-mode-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.byf-app-redesign .byf-mainnav-mode-switch:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--byf-redesign-primary-soft);
}

.byf-app-redesign .byf-mainnav-mode-switch[aria-busy="true"] {
    cursor: wait;
    opacity: 0.68;
}

.byf-app-redesign.mainnav-topbar .navbar-custom .byf-mainnav-topbar-item .nav-link:focus-visible {
    box-shadow: 0 0 0 3px var(--byf-redesign-primary-soft) !important;
}

.byf-app-redesign.mainnav-topbar .navbar-custom .byf-mainnav-status {
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    margin-left: 1px;
    border-radius: 999px;
    background: #fff3d6;
    color: #b97215;
}

.byf-app-redesign.mainnav-topbar .navbar-custom .byf-mainnav-status i {
    min-width: 0;
    font-size: 10px;
    color: currentColor !important;
    padding-right: 0;
}

.byf-app-redesign.mainnav-topbar .navbar-custom .byf-mainnav-count {
    position: static !important;
    display: inline-flex;
    min-width: 20px;
    width: auto;
    height: 20px;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
    padding: 0 6px !important;
    font-size: 11px;
    line-height: 20px;
    box-shadow: 0 2px 5px rgba(239, 68, 68, 0.2);
}

.byf-app-redesign .navbar-custom .nav-link i {
    min-width: 16px;
    font-size: 16px;
    color: currentColor !important;
}

.byf-app-redesign .navbar-custom .nav-item.active .nav-link,
.byf-app-redesign .navbar-custom .nav-link.active,
.byf-app-redesign .navbar-custom .nav-link:hover {
    background: var(--byf-redesign-muted);
    color: var(--byf-redesign-foreground) !important;
}

.byf-app-redesign #topsearchcontainer {
    width: 100%;
    margin-left: 8px;
}

.byf-app-redesign .navbar-custom .nav-item.d-sm-none.d-none.d-md-block {
    margin-left: auto;
}

.byf-app-redesign #topsearchcontainer .searchcontainer {
    position: relative;
}

.byf-app-redesign.mainnav-topbar #topsearchcontainer {
    width: min(430px, 32vw);
    min-width: 260px;
}

.byf-app-redesign.mainnav-topbar .byf-topbar-search-item {
    display: none !important;
}

.byf-app-redesign.mainnav-topbar #topsearchcontainer .custom-search {
    min-height: 38px;
    border: 1px solid var(--byf-redesign-control-border);
    border-radius: 12px;
    background: #fff;
}

.byf-app-redesign.mainnav-topbar #topsearchcontainer #keyword {
    min-height: 38px;
    padding-right: 10px;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.byf-app-redesign.mainnav-topbar #topsearchcontainer #dosearch {
    display: inline-flex;
    width: 34px;
    height: 34px;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #f0f3f8 !important;
    color: var(--byf-redesign-muted-foreground) !important;
}

.byf-app-redesign #topsearchcontainer input,
.byf-app-redesign .custom-search input,
.byf-app-redesign input.form-control,
.byf-app-redesign select.form-control,
.byf-app-redesign textarea.form-control,
.byf-app-redesign .bootstrap-select > .dropdown-toggle,
.byf-app-redesign .select2-container--default .select2-selection--single,
.byf-app-redesign .select2-container--default .select2-selection--multiple,
.byf-app-redesign .input-group-text {
    min-height: 40px;
    border: 1px solid var(--byf-redesign-control-border) !important;
    border-radius: var(--byf-redesign-control-radius) !important;
    background: var(--byf-redesign-control-bg) !important;
    color: var(--byf-redesign-foreground);
    box-shadow: none;
    font-size: 13px;
}

.byf-app-redesign #topsearchcontainer input:focus,
.byf-app-redesign .custom-search input:focus,
.byf-app-redesign input.form-control:focus,
.byf-app-redesign select.form-control:focus,
.byf-app-redesign textarea.form-control:focus,
.byf-app-redesign .bootstrap-select > .dropdown-toggle:focus,
.byf-app-redesign .select2-container--default.select2-container--focus .select2-selection--single,
.byf-app-redesign .select2-container--default.select2-container--focus .select2-selection--multiple {
    outline: 0 !important;
    border-color: var(--byf-redesign-control-border) !important;
    background: var(--byf-redesign-control-bg) !important;
    box-shadow: none !important;
}

.byf-command-search-trigger {
    position: fixed;
    left: calc(var(--byf-redesign-sidebar-collapsed) + 28px);
    right: auto;
    bottom: 28px;
    z-index: 1060;
    display: none;
    width: 60px;
    height: 60px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: var(--byf-redesign-primary);
    color: var(--byf-redesign-primary-foreground);
    box-shadow: none;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

body.byf-command-search-files-context .byf-command-search-trigger {
    display: inline-flex;
}

.byf-command-search-trigger:hover {
    transform: translateY(-1px);
    box-shadow: none !important;
}

.byf-command-search-trigger:focus,
.byf-command-search-trigger:active {
    outline: 0 !important;
    box-shadow: none !important;
}

.byf-command-search-trigger i {
    color: currentColor;
    font-size: 22px;
}

.byf-command-search-trigger::after {
    position: absolute;
    left: calc(100% + 10px);
    right: auto;
    top: 50%;
    display: none;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--byf-redesign-primary-dark);
    color: #fff;
    content: attr(aria-label);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transform: translateY(-50%);
}

.byf-command-search-trigger:hover::after {
    display: block;
}

.byf-command-search-open .byf-command-search-trigger {
    opacity: 0;
    pointer-events: none;
}

.byf-app-redesign.body-sidebar-expanded .byf-command-search-trigger {
    left: calc(var(--byf-redesign-sidebar-expanded) + 28px);
}

body.byf-command-search-open {
    overflow: hidden;
}

.byf-command-search {
    position: fixed;
    inset: 0;
    z-index: 2080;
    display: none;
    padding: 18px;
}

.byf-command-search.is-open {
    display: block;
}

.byf-command-search__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.byf-command-search__dialog {
    position: relative;
    display: flex;
    width: 50vw;
    max-width: calc(100vw - 36px);
    max-height: min(720px, calc(100vh - 52px));
    margin: min(9vh, 86px) auto 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--byf-redesign-border);
    border-radius: 18px;
    background: #fff;
}

.byf-command-search__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--byf-redesign-border);
}

.byf-command-search__eyebrow {
    margin: 0 0 4px;
    color: var(--byf-redesign-muted-foreground);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    line-height: 1.2;
    text-transform: uppercase;
}

.byf-command-search__header h2 {
    margin: 0;
    color: var(--byf-redesign-foreground);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
}

.byf-command-search__close {
    display: inline-flex;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--byf-redesign-foreground);
    cursor: pointer;
}

.byf-command-search__close:hover {
    background: var(--byf-redesign-muted);
}

.byf-command-search__close:focus,
.byf-command-search__close:active {
    outline: 0 !important;
    box-shadow: none !important;
}

.byf-command-search__body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 16px 22px 14px;
}

.byf-command-search__searchcontainer {
    display: flex;
    width: 100%;
    min-height: 0;
}

.byf-command-search__form {
    display: flex;
    width: 100%;
    min-height: 0;
    flex-direction: column;
}

/* Bootstrap turns .form-inline back into a wrapping row from 576px onward.
 * Command search must remain a single vertical flow at every viewport. */
.byf-command-search__form.form-inline {
    flex-flow: column nowrap !important;
    align-items: stretch !important;
}

.byf-command-search__results-shell {
    width: 100%;
    min-height: 0;
    max-height: min(46vh, 430px);
    flex: 0 1 auto;
    order: 3;
    margin-top: 12px;
    overflow: hidden;
}

.byf-command-search__field {
    position: relative;
    display: flex;
    min-height: 54px;
    align-items: center;
    gap: 10px;
    padding: 0 10px 0 16px;
    border: 1px solid var(--byf-redesign-control-border);
    border-radius: 14px;
    background: #fff;
}

.byf-command-search__field-icon {
    color: var(--byf-redesign-muted-foreground);
    font-size: 17px;
}

.byf-app-redesign .byf-command-search__field input.form-control {
    min-height: 52px;
    flex: 1 1 auto;
    padding: 0;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 15px;
}

.byf-command-search__submit {
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 10px;
    background: var(--byf-redesign-muted);
    color: var(--byf-redesign-muted-foreground);
    cursor: pointer;
}

.byf-command-search__submit:hover {
    color: var(--byf-redesign-primary);
}

.byf-command-search__submit:focus,
.byf-command-search__submit:active {
    outline: 0 !important;
    box-shadow: none !important;
}

.byf-app-redesign .byf-command-search__results.search-suggestions {
    position: static !important;
    left: auto !important;
    right: auto !important;
    z-index: 13050 !important;
    width: 100%;
    max-height: inherit;
    margin-top: 0;
    overflow-x: hidden;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 !important;
    border: 1px solid var(--byf-redesign-border);
    border-radius: 14px !important;
    background: #fff;
    box-shadow: none;
}

.byf-app-redesign .byf-command-search__results.search-suggestions:empty {
    display: none !important;
}

.byf-app-redesign .search-suggestions {
    z-index: 13050 !important;
    padding: 0 !important;
    border: 1px solid var(--byf-redesign-border);
    border-radius: 14px !important;
    background: #fff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
}

.byf-app-redesign .byf-page-search-input-wrap,
.byf-app-redesign .byf-secondary-search__form {
    z-index: 13050 !important;
}

.byf-app-redesign .search-suggestions:empty {
    display: none !important;
}

.byf-app-redesign .search-suggestions ul {
    margin: 0;
    padding: 6px;
    list-style: none;
    border-radius: 14px !important;
}

.byf-app-redesign .search-suggestions li,
.byf-app-redesign .search-suggestions a {
    border-radius: 10px;
}

.byf-app-redesign .search-suggestions li {
    list-style: none;
}

.byf-app-redesign .search-suggestions a {
    display: block;
    padding: 8px 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--byf-redesign-foreground);
}

.byf-app-redesign .search-suggestions a:hover {
    background: var(--byf-redesign-muted);
    color: var(--byf-redesign-foreground);
}

.byf-app-redesign .search-suggestions li.section {
    display: flex;
    min-height: 38px;
    align-items: center;
    margin: 6px 4px 4px;
    padding: 0 10px;
    border: 1px solid var(--byf-redesign-border);
    border-radius: 12px !important;
    background: #fff !important;
    color: var(--byf-redesign-foreground);
    font-weight: 800;
    cursor: default !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.byf-app-redesign .search-suggestions li.section:first-child {
    margin-top: 0;
}

.byf-app-redesign .search-suggestions li.section:has(> a):hover {
    background: var(--byf-redesign-muted) !important;
}

.byf-app-redesign .search-suggestions li.section a {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: space-between;
    flex: 1 1 auto;
    gap: 12px;
    margin: 0 -10px;
    padding: 0 10px;
    overflow: visible;
    color: inherit;
    white-space: normal;
}

.byf-app-redesign .search-suggestions li.section a:hover {
    background: var(--byf-redesign-muted);
    color: var(--byf-redesign-foreground);
}

.byf-app-redesign .search-suggestions li.section a span {
    padding: 0;
    color: var(--byf-redesign-muted-foreground);
    font-size: 12px;
    font-weight: 600;
}

.byf-app-redesign .search-suggestions li.section a:hover span.underline,
.byf-app-redesign .search-suggestions li.section:has(> a):hover span.underline {
    color: var(--byf-redesign-primary);
    text-decoration: underline;
}

.byf-app-redesign .search-suggestions a .highlight {
    font-weight: 800;
}

.byf-app-redesign .byf-secondary-search__results.search-suggestions {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    z-index: 13050 !important;
    width: auto;
    min-width: 100%;
    max-height: min(420px, calc(100vh - 140px));
    border-radius: 14px !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
}

.byf-app-redesign .byf-secondary-search__results.search-suggestions a {
    overflow: visible;
    text-overflow: clip;
}

.byf-app-redesign .byf-command-search__all-results {
    display: inline-flex;
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    min-height: 36px;
    flex: 0 0 auto;
    align-self: stretch;
    order: 4;
    align-items: center;
    justify-content: center;
    margin: 10px 0 0 !important;
    padding: 7px 14px !important;
    border: 1px solid var(--byf-redesign-primary) !important;
    border-radius: 10px !important;
    background: var(--byf-redesign-primary) !important;
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: none !important;
    cursor: pointer;
}

.byf-app-redesign .byf-command-search__all-results:hover,
.byf-app-redesign .byf-command-search__all-results:focus {
    background: var(--byf-redesign-primary-hover, var(--byf-redesign-primary)) !important;
    color: #fff !important;
    text-decoration: none;
}

.byf-app-redesign .byf-command-search__all-results:focus,
.byf-app-redesign .byf-command-search__all-results:active {
    outline: 0 !important;
    box-shadow: none !important;
}

.byf-command-search__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 22px 14px;
    border-top: 1px solid var(--byf-redesign-border);
    color: var(--byf-redesign-muted-foreground);
    font-size: 12px;
    font-weight: 700;
}

.byf-command-search__scope {
    display: flex;
    justify-content: flex-start;
    margin-top: 12px;
}

.byf-command-search__scope-option {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--byf-redesign-muted-foreground);
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    text-align: left;
    cursor: pointer;
}

.byf-command-search__scope-checkbox {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.byf-command-search__scope-switch {
    position: relative;
    display: inline-flex;
    width: 34px;
    height: 20px;
    flex: 0 0 34px;
    border: 1px solid var(--byf-redesign-border);
    border-radius: 999px;
    background: var(--byf-redesign-muted);
    transition: background 160ms ease, border-color 160ms ease;
}

.byf-command-search__scope-switch::after {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #fff;
    box-shadow: none !important;
    content: "";
    transition: transform 160ms ease;
}

.byf-command-search__scope-checkbox:checked + .byf-command-search__scope-switch {
    border-color: var(--byf-redesign-primary);
    background: var(--byf-redesign-primary);
}

.byf-command-search__scope-checkbox:checked + .byf-command-search__scope-switch::after {
    transform: translateX(14px);
}

.byf-command-search__scope-checkbox:focus + .byf-command-search__scope-switch {
    box-shadow: none !important;
}

@media (max-width: 1199px) {
    .byf-command-search__dialog {
        width: 75vw;
    }
}

@media (max-width: 767px) {
    .byf-command-search-trigger {
        left: calc(var(--byf-redesign-sidebar-collapsed) + 18px);
        right: auto;
        bottom: 18px;
        width: 52px;
        height: 52px;
    }

    .byf-app-redesign.body-sidebar-expanded .byf-command-search-trigger {
        left: calc(var(--byf-redesign-sidebar-expanded) + 18px);
    }

    .byf-command-search__dialog {
        width: 90vw;
        margin-top: 24px;
    }

    .byf-command-search__header,
    .byf-command-search__body,
    .byf-command-search__footer {
        padding-left: 16px;
        padding-right: 16px;
    }

    .byf-command-search__footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

.byf-user-picker {
    position: relative;
    width: 100%;
    font-family: inherit;
}

.byf-usergroup-picker-source.is-enhanced {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

.byf-app-redesign #modalNewUser .byf-usergroup-picker-source,
.byf-app-redesign #modalEditUser .byf-usergroup-picker-source {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

.byf-user-picker__control {
    display: flex;
    min-height: 40px;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 4px 10px;
    border: 1px solid var(--byf-redesign-control-border, #d7e1ee);
    border-radius: var(--byf-redesign-control-radius, 10px);
    background: #fff;
    color: var(--byf-redesign-foreground, #101828);
    cursor: text;
}

.byf-user-picker.is-disabled .byf-user-picker__control {
    background: #f8fafc;
    cursor: not-allowed;
}

.byf-user-picker__chips {
    display: flex;
    flex: 0 1 auto;
    flex-wrap: wrap;
    gap: 4px;
    min-width: 0;
}

.byf-user-picker__placeholder {
    overflow: hidden;
    flex: 1 1 auto;
    color: var(--byf-redesign-muted-foreground, #60728a);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.byf-user-picker__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 210px;
    min-height: 28px;
    padding: 2px 6px 2px 4px;
    border: 1px solid var(--byf-redesign-control-border, #d7e1ee);
    border-radius: 999px;
    background: #f8fafc;
    color: var(--byf-redesign-foreground, #101828);
    font-size: 12px;
    font-weight: 500;
}

.byf-user-picker__avatar,
.byf-user-picker__option-avatar {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--byf-redesign-primary, #2e24c6) 10%, #fff);
    color: var(--byf-redesign-primary, #2e24c6);
    font-size: 10px;
    font-weight: 700;
}

.byf-user-picker__chip-name {
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.byf-user-picker__remove,
.byf-user-picker__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--byf-redesign-muted-foreground, #60728a);
    cursor: pointer;
}

.byf-user-picker__remove {
    width: 18px;
    height: 18px;
    padding: 0;
    font-size: 12px;
}

.byf-user-picker__toggle {
    flex: 0 0 22px;
    height: 22px;
    padding: 0;
    margin-left: auto;
}

.byf-user-picker__input {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--byf-redesign-foreground, #101828);
    font-size: 13px;
}

.byf-user-picker__search {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin: 2px 2px 7px;
    padding: 3px 10px;
    border: 1px solid var(--byf-redesign-control-border, #d7e1ee);
    border-radius: 10px;
    background: #fff;
    color: var(--byf-redesign-muted-foreground, #60728a);
}

.byf-user-picker__menu {
    position: absolute;
    z-index: 20020;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    min-width: 100%;
    box-sizing: border-box;
    max-height: 260px;
    overflow: hidden;
    padding: 6px;
    border: 1px solid var(--byf-redesign-control-border, #d7e1ee);
    border-radius: 12px;
    background: #fff;
    box-shadow: none !important;
}

.byf-user-picker__options {
    max-height: 205px;
    overflow-y: auto;
}

.byf-user-picker__option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 38px;
    padding: 6px 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--byf-redesign-foreground, #101828);
    text-align: left;
}

.byf-user-picker__selection-indicator {
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    flex: 0 0 18px;
    border: 2px solid var(--byf-redesign-control-border, #d7e1ee);
    border-radius: 50%;
    color: #fff;
    font-size: 9px;
}

.byf-user-picker__option.is-selected .byf-user-picker__selection-indicator {
    border-color: var(--byf-redesign-primary, #2e24c6);
    background: var(--byf-redesign-primary, #2e24c6);
}

.byf-user-picker__option.is-active,
.byf-user-picker__option:hover {
    background: #eef3f8;
}

.byf-user-picker__option-text {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.byf-user-picker__option-name,
.byf-user-picker__option-subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.byf-user-picker__option-name {
    font-size: 13px;
    font-weight: 600;
}

.byf-user-picker__option-subtitle,
.byf-user-picker__empty {
    color: var(--byf-redesign-muted-foreground, #60728a);
    font-size: 12px;
}

.byf-user-picker__empty {
    padding: 8px 10px;
}

.byf-app-redesign #modalNewUser .usergroup-picker-field,
.byf-app-redesign #modalEditUser .usergroup-picker-field {
    display: block;
    width: 100%;
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--byf-redesign-border, #d7e1ee);
}

.byf-app-redesign #modalNewUser .usergroup-picker-label,
.byf-app-redesign #modalEditUser .usergroup-picker-label {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0 0 8px;
    padding: 0;
    color: var(--byf-redesign-foreground, #101828);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
}

.byf-app-redesign #modalNewUser .usergroup-picker-label i,
.byf-app-redesign #modalEditUser .usergroup-picker-label i {
    color: var(--byf-redesign-muted-foreground, #60728a);
    font-size: 14px;
}

.byf-app-redesign #modalNewUser .usergroup-picker-control-wrap,
.byf-app-redesign #modalEditUser .usergroup-picker-control-wrap {
    width: 100%;
    max-width: none;
    padding: 0;
    position: relative;
    z-index: 20020;
}

/* Let the user-group option list escape the modal body and overlap the footer
 * when the selector is close to the bottom of the dialog. */
.byf-app-redesign #modalNewUser .modal-dialog,
.byf-app-redesign #modalEditUser .modal-dialog,
.byf-app-redesign #modalNewUser .modal-content,
.byf-app-redesign #modalEditUser .modal-content,
.byf-app-redesign #modalNewUser .modal-body,
.byf-app-redesign #modalEditUser .modal-body,
.byf-app-redesign #modalNewUser .new-user-container,
.byf-app-redesign #modalEditUser .new-user-container,
.byf-app-redesign #modalNewUser .usergroup-picker-field,
.byf-app-redesign #modalEditUser .usergroup-picker-field {
    overflow: visible !important;
}

.byf-app-redesign .usergroup-picker-readonly {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.byf-app-redesign .usergroup-picker-readonly__item {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--byf-redesign-control-border, #d7e1ee);
    border-radius: 10px;
    background: #f8fafc;
    color: var(--byf-redesign-foreground, #101828);
    font-size: 13px;
    font-weight: 600;
}

.byf-app-redesign .usergroup-picker-readonly__item > i:first-child {
    color: var(--byf-redesign-primary, #2e24c6);
}

.byf-app-redesign .usergroup-picker-readonly__lock {
    color: var(--byf-redesign-muted-foreground, #60728a);
    font-size: 11px;
}

.byf-app-redesign .byf-usergroup-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.byf-app-redesign .byf-usergroup-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 24px;
    max-width: 100%;
    padding: 3px 8px;
    border: 1px solid var(--byf-redesign-control-border, #d7e1ee);
    border-radius: 999px;
    background: #f8fafc;
    color: var(--byf-redesign-foreground, #101828);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

.byf-app-redesign .byf-usergroup-chip i {
    color: var(--byf-redesign-muted-foreground, #60728a);
    font-size: 11px;
}

.byf-app-redesign .byf-usergroup-list--empty {
    color: var(--byf-redesign-muted-foreground, #60728a);
}

.byf-app-redesign .modal-content .byf-modal-tag-chip.follower-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    margin: 0 6px 6px 0 !important;
    padding: 5px 10px;
    border: 1px solid var(--byf-redesign-control-border, #d7e1ee);
    border-radius: 999px;
    background: #fff;
    color: var(--byf-redesign-foreground, #101828);
    cursor: pointer;
    font-size: 12px;
    line-height: 1.2;
}

.byf-app-redesign .byf-modal-tag-chip.follower-tag:hover,
.byf-app-redesign .byf-modal-tag-chip.follower-tag.tags-info-active {
    border-color: var(--byf-redesign-primary, #2e24c6);
    background: color-mix(in srgb, var(--byf-redesign-primary, #2e24c6) 10%, #fff);
}

.byf-app-redesign .byf-modal-tag-chip.follower-tag i {
    color: var(--byf-redesign-muted-foreground, #60728a);
    font-size: 12px;
}

.byf-app-redesign .byf-modal-tag-chip.follower-tag.tags-info-active i {
    color: var(--byf-redesign-primary, #2e24c6);
}

.byf-app-redesign .byf-modal-followers-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 2px;
    padding: 6px 10px;
    border: 1px solid var(--byf-redesign-control-border, #d7e1ee);
    border-radius: 999px;
    background: #f8fafc;
    color: var(--byf-redesign-foreground, #101828);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}

.byf-app-redesign .byf-modal-followers-toggle:hover {
    border-color: var(--byf-redesign-primary, #2e24c6);
    color: var(--byf-redesign-primary, #2e24c6);
}

.byf-app-redesign #modalNewUser .byf-user-picker__control,
.byf-app-redesign #modalEditUser .byf-user-picker__control {
    min-height: 44px;
    padding: 6px 10px;
}

.byf-app-redesign #modalNewUser .byf-user-picker__menu,
.byf-app-redesign #modalEditUser .byf-user-picker__menu {
    width: 100%;
    min-width: 100%;
    box-sizing: border-box;
    max-height: 300px;
}

.byf-app-redesign #modalNewUser .byf-user-picker__options,
.byf-app-redesign #modalEditUser .byf-user-picker__options {
    /* Leave enough scroll room for the final option instead of clipping it
     * against the bottom edge of the picker menu. */
    max-height: 250px;
    box-sizing: content-box;
    padding-bottom: 16px;
    scroll-padding-bottom: 16px;
}

.byf-app-redesign .switch {
    width: 44px;
    height: 26px;
    margin: 0 8px 0 0;
    transform: none;
    vertical-align: middle;
}

.byf-app-redesign .switch .slider {
    border: 1px solid var(--byf-redesign-control-border) !important;
    background: var(--byf-redesign-control-bg) !important;
    box-shadow: none !important;
    cursor: pointer;
}

.byf-app-redesign .switch .slider::before {
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--byf-redesign-primary) !important;
    transform: translateX(0) !important;
    transition: transform 160ms ease, background 160ms ease;
}

.byf-app-redesign .switch input:checked + .slider {
    border-color: var(--byf-redesign-primary) !important;
    background: var(--byf-redesign-primary) !important;
    box-shadow: none !important;
}

.byf-app-redesign .switch input:checked + .slider::before {
    background: #fff !important;
    transform: translateX(18px) !important;
}

.byf-app-redesign .switch input:disabled + .slider,
.byf-app-redesign .switch input[disabled] + .slider {
    border-color: var(--byf-redesign-control-border) !important;
    background: var(--byf-redesign-control-bg) !important;
    cursor: not-allowed;
}

.byf-app-redesign .switch input:disabled + .slider::before,
.byf-app-redesign .switch input[disabled] + .slider::before {
    background: #b8b4e6 !important;
}

.byf-app-redesign .switch input:checked:disabled + .slider,
.byf-app-redesign .switch input:checked[disabled] + .slider {
    border-color: var(--byf-redesign-control-border) !important;
    background: color-mix(in srgb, var(--byf-redesign-primary) 14%, #fff) !important;
}

.byf-app-redesign .switch input:focus + .slider {
    outline: 0 !important;
    box-shadow: none !important;
}

.byf-app-redesign #modalGlobalpermissions .global-permissions-groups {
    display: grid;
    grid-template-columns: minmax(250px, .8fr) minmax(430px, 1.45fr);
    gap: 16px;
    margin-top: 8px;
}

.byf-app-redesign #modalGlobalpermissions .global-permissions-section {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--byf-redesign-border);
    border-radius: var(--byf-redesign-radius);
    background: var(--byf-redesign-card);
}

.byf-app-redesign #modalGlobalpermissions .global-permissions-section > h3 {
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--byf-redesign-border);
    color: var(--byf-redesign-foreground);
    font-size: 14px;
    font-weight: 800;
}

.byf-app-redesign #modalGlobalpermissions .global-permissions-list {
    display: grid;
    gap: 11px;
}

.byf-app-redesign #modalGlobalpermissions .global-permissions-list--management {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
}

.byf-app-redesign #modalGlobalpermissions .global-permission-option {
    display: flex;
    min-width: 0;
    min-height: 28px;
    align-items: center;
    gap: 10px;
    color: var(--byf-redesign-foreground);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
}

.byf-app-redesign #modalGlobalpermissions .global-permission-option .switch {
    flex: 0 0 42px;
    margin: 0;
}

.byf-app-redesign #modalGlobalpermissions .global-permission-option > span:not(.byondfiles-tooltip) {
    min-width: 0;
}

.byf-app-redesign #modalGlobalpermissions .global-permission-option > .byondfiles-tooltip {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--byf-redesign-muted-foreground);
}

@media (max-width: 899.98px) {
    .byf-app-redesign #modalGlobalpermissions .global-permissions-groups,
    .byf-app-redesign #modalGlobalpermissions .global-permissions-list--management {
        grid-template-columns: minmax(0, 1fr);
    }
}

.byf-app-redesign #body-row {
    min-height: 100vh;
    height: 100vh;
    margin: 0;
    overflow: hidden;
}

.byf-app-redesign .byf-sidebar-legacy-spacer,
.byf-app-redesign #body-row > .container-fluid > .row > .d-xl-none[style*="width: 1px"] {
    display: none !important;
}

.byf-app-redesign #maincontainer {
    flex: 0 0 calc(100% - var(--byf-redesign-sidebar-collapsed));
    min-width: 0;
    width: calc(100% - var(--byf-redesign-sidebar-collapsed)) !important;
    height: 100vh;
    margin-left: var(--byf-redesign-sidebar-collapsed);
    padding-top: var(--byf-redesign-topbar-height) !important;
    overflow: hidden;
}

.byf-app-redesign.body-sidebar-expanded #maincontainer {
    flex-basis: calc(100% - var(--byf-redesign-sidebar-expanded));
    width: calc(100% - var(--byf-redesign-sidebar-expanded)) !important;
    margin-left: var(--byf-redesign-sidebar-expanded);
}

/* Keep the application canvas softly tinted while preserving card and control surfaces. */
.byf-app-redesign #maincontainer,
.byf-app-redesign #workspace,
.byf-app-redesign #searchworkspace,
.byf-app-redesign #usage-workspace,
.byf-app-redesign #tenant-activity-workspace,
.byf-app-redesign .workspace-split-screen,
.byf-app-redesign .searchworkspace-split-screen,
.byf-app-redesign .dashboard-page,
.byf-app-redesign .dashboard-content {
    background: var(--byf-redesign-bg) !important;
}

.byf-app-redesign .dashboard-page {
    --dashboard-page-bg: var(--byf-redesign-bg);
}

.byf-app-redesign .byf-redesign-toolbar-stack,
.byf-app-redesign .previewactionbar,
.byf-app-redesign .previewactionbar > .disableselectable,
.byf-app-redesign .dashboard-header,
.byf-app-redesign .dashboard-filters-row {
    background: none !important;
}

.byf-app-redesign .dashboard-header::before,
.byf-app-redesign .dashboard-filters-row::before {
    background: none !important;
}

.byf-app-redesign .dashboard-switch {
    min-height: 40px;
    gap: 4px;
    padding: 4px !important;
    border: 1px solid var(--byf20-color-d9e4f2) !important;
    border-radius: 13px !important;
    background: var(--byf20-color-ffffff) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06) !important;
}

.byf-app-redesign .dashboard-switch__item {
    min-height: 30px;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: var(--byf20-color-64748b) !important;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none !important;
}

.byf-app-redesign .dashboard-switch__item:hover {
    background: var(--byf20-color-f1f5f9) !important;
    color: var(--byf20-color-334155) !important;
}

.byf-app-redesign .dashboard-switch__item--active,
.byf-app-redesign .dashboard-switch__item.active,
.byf-app-redesign .dashboard-switch__item.nav-link.active {
    background: var(--byf-redesign-primary) !important;
    color: var(--byf-redesign-primary-foreground) !important;
    box-shadow: 0 8px 16px var(--byf-redesign-primary-soft) !important;
}

.byf-app-redesign .dashboard-switch__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
}

.byf-app-redesign .dashboard-surface.dashboard-surface--hero,
.byf-app-redesign .dashboard-surface.dashboard-hero-block {
    background: var(--byf20-color-ffffff) !important;
    border-color: var(--byf20-color-d9e4f2) !important;
}

.byf-app-redesign .status-dashboard .dashboard-filters-row,
.byf-app-redesign .information-dashboard .dashboard-filters-row {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 8px !important;
}

.byf-app-redesign .status-dashboard .dashboard-filters,
.byf-app-redesign .information-dashboard .dashboard-filters {
    gap: 6px;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.byf-app-redesign .dashboard-filter {
    min-height: 34px;
    padding: 0 12px !important;
    border: 1px solid var(--byf20-color-d9e4f2) !important;
    border-radius: 12px !important;
    background: var(--byf20-color-ffffff) !important;
    color: var(--byf20-color-475569) !important;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 5px 14px rgba(15, 23, 42, 0.05) !important;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.byf-app-redesign .dashboard-filter:not(.is-active) {
    background: var(--byf20-color-ffffff) !important;
}

.byf-app-redesign .dashboard-filter:not(.is-active):hover {
    border-color: var(--byf-redesign-primary-border) !important;
    background: color-mix(in srgb, var(--byf-redesign-primary) 7%, #fff) !important;
    color: var(--byf20-color-334155) !important;
}

.byf-app-redesign .dashboard-filter.is-active {
    border-color: var(--byf-redesign-primary) !important;
    background: var(--byf-redesign-primary) !important;
    color: var(--byf-redesign-primary-foreground) !important;
    box-shadow: 0 8px 16px var(--byf-redesign-primary-soft) !important;
}

.byf-app-redesign .dashboard-filter-count {
    min-width: 22px;
    padding: 2px 7px;
    background: var(--byf20-color-f1f5f9);
    color: var(--byf20-color-64748b);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.25;
}

.byf-app-redesign .dashboard-filter.is-active .dashboard-filter-count {
    background: rgba(255, 255, 255, 0.18) !important;
    color: var(--byf-redesign-primary-foreground) !important;
}

.byf-app-redesign #workspace,
.byf-app-redesign #searchworkspace,
.byf-app-redesign #usage-workspace,
.byf-app-redesign #tenant-activity-workspace,
.byf-app-redesign .workspace-split-screen,
.byf-app-redesign .searchworkspace-split-screen {
    height: calc(100vh - var(--byf-redesign-topbar-height));
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px !important;
    box-sizing: border-box;
}

.byf-app-redesign #workspace.col,
.byf-app-redesign #searchworkspace.col,
.byf-app-redesign #usage-workspace.col,
.byf-app-redesign #tenant-activity-workspace.col {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
}

.byf-app-redesign.mainnav-topbar #workspace:not(.task-workspace),
.byf-app-redesign.mainnav-topbar #searchworkspace,
.byf-app-redesign.mainnav-topbar #usage-workspace,
.byf-app-redesign.mainnav-topbar #tenant-activity-workspace,
.byf-app-redesign.mainnav-topbar .workspace-split-screen,
.byf-app-redesign.mainnav-topbar .searchworkspace-split-screen {
    padding-top: 18px !important;
}

.byf-app-redesign #workspace #filelist,
.byf-app-redesign #workspace #searchresults,
.byf-app-redesign #searchworkspace #filelist,
.byf-app-redesign #secondaryfilebrowser #filelist {
    padding-bottom: 56px;
}

.byf-app-redesign #filelist > #drag-item-template,
.byf-app-redesign #searchresults > #drag-item-template,
.byf-app-redesign #filelist:not(.listview) > #endoflist,
.byf-app-redesign #searchresults:not(.listview) > #endoflist {
    display: none !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.byf-app-redesign #workspace.workspace-split-screen,
.byf-app-redesign #searchworkspace.searchworkspace-split-screen {
    position: fixed !important;
    top: var(--byf-redesign-topbar-height) !important;
    right: 0 !important;
    left: var(--byf-redesign-sidebar-collapsed) !important;
    bottom: 50vh !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden auto !important;
}

.byf-app-redesign.body-sidebar-expanded #workspace.workspace-split-screen,
.byf-app-redesign.body-sidebar-expanded #searchworkspace.searchworkspace-split-screen {
    left: var(--byf-redesign-sidebar-expanded) !important;
}

.byf-app-redesign .split-screen.bottom,
.byf-app-redesign .split-screen.bottom > .row,
.byf-app-redesign #secondary-files-modal,
.byf-app-redesign #secondaryfilebrowser {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.byf-app-redesign .split-screen.bottom {
    position: fixed !important;
    top: 50vh !important;
    right: 0 !important;
    bottom: 0 !important;
    left: var(--byf-redesign-sidebar-collapsed) !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box;
    overflow: visible !important;
}

.byf-app-redesign.body-sidebar-expanded .split-screen.bottom {
    left: var(--byf-redesign-sidebar-expanded) !important;
}

.byf-app-redesign .split-screen.bottom > .row {
    height: 100%;
    min-height: 0;
    margin-right: 0 !important;
    margin-left: 0 !important;
    max-width: 100% !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
}

.byf-app-redesign #workspace.workspace-split-screen > *,
.byf-app-redesign #searchworkspace.searchworkspace-split-screen > *,
.byf-app-redesign .split-screen.bottom > .row > *,
.byf-app-redesign #secondary-files-modal > *,
.byf-app-redesign #secondaryfilebrowser > * {
    min-width: 0 !important;
    max-width: 100% !important;
}

.byf-app-redesign #workspace.workspace-split-screen .row,
.byf-app-redesign #searchworkspace.searchworkspace-split-screen .row {
    margin-right: 0 !important;
    margin-left: 0 !important;
    max-width: 100% !important;
}

.byf-app-redesign #workspace.workspace-split-screen .previewactionbar,
.byf-app-redesign #searchworkspace.searchworkspace-split-screen .previewactionbar,
.byf-app-redesign #workspace.workspace-split-screen .previewactionbar > .disableselectable,
.byf-app-redesign #searchworkspace.searchworkspace-split-screen .previewactionbar > .disableselectable {
    min-width: 0 !important;
    max-width: 100% !important;
}

.byf-app-redesign #workspace.workspace-split-screen .filelist-container,
.byf-app-redesign #searchworkspace.searchworkspace-split-screen .filelist-container,
.byf-app-redesign #secondaryfilebrowser .filelist-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

.byf-app-redesign #workspace.workspace-split-screen .previewactionbar .w-100,
.byf-app-redesign #searchworkspace.searchworkspace-split-screen .previewactionbar .w-100,
.byf-app-redesign #secondaryfilebrowser .previewactionbar .w-100 {
    width: 100% !important;
    max-width: 100% !important;
}

.byf-app-redesign #secondary-files-modal {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    padding-bottom: 0 !important;
    overflow: visible !important;
    background: var(--byf-redesign-bg) !important;
}

.byf-app-redesign #secondaryfilebrowser {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: hidden !important;
    width: 100% !important;
}

.byf-app-redesign #secondaryfilebrowser .byf-redesign-toolbar-stack,
.byf-app-redesign #secondaryfilebrowser .previewactionbar,
.byf-app-redesign #secondaryfilebrowser .previewactionbar > .disableselectable {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
}

.byf-app-redesign #secondary-files-modal > .byf-redesign-toolbar-stack,
.byf-app-redesign #secondary-files-modal > .previewactionbar {
    flex: 0 0 auto;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
}

.byf-app-redesign #secondaryfilebrowser .byf-redesign-toolbar-stack {
    position: relative;
    z-index: 2100;
    flex: 0 0 auto;
    isolation: isolate;
    padding: 20px 20px 0 20px !important;
}

.byf-app-redesign #secondaryfilebrowser > .byf-redesign-toolbar-stack,
.byf-app-redesign #secondaryfilebrowser .byf-redesign-message-panel,
.byf-app-redesign #secondaryfilebrowser .byf-redesign-message-row {
    flex: 0 0 auto;
}

.byf-app-redesign #secondaryfilebrowser > .pb-4 {
    display: none !important;
}

.byf-app-redesign #secondaryfilebrowser #filelist,
.byf-app-redesign #secondaryfilebrowser #searchresults {
    flex: 1 1 auto;
    min-height: 0;
    box-sizing: border-box;
    padding: 10px 24px 56px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-gutter: stable;
}

.byf-app-redesign #secondary-files-modal > #filelist,
.byf-app-redesign #secondary-files-modal > #searchresults {
    flex: 1 1 auto;
    min-height: 0;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding: 24px 24px 56px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-gutter: stable;
}

.byf-app-redesign #secondary-files-modal > #filelist.filelist-container:not(.listview),
.byf-app-redesign #secondary-files-modal > #searchresults.filelist-container:not(.listview) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-content: flex-start;
}

.byf-app-redesign #secondaryfilebrowser .previewactionbar > .disableselectable {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.byf-app-redesign #secondaryfilebrowser .previewactionbar > .disableselectable > div:first-child:not(.mobile-crumb-actions) {
    flex: 1 1 0;
    min-width: 0 !important;
    overflow: visible !important;
}

.byf-app-redesign #secondaryfilebrowser .previewactionbar nav,
.byf-app-redesign #secondaryfilebrowser .previewactionbar .breadcrumb,
.byf-app-redesign #secondaryfilebrowser .previewactionbar .fullcrumb,
.byf-app-redesign #secondaryfilebrowser .previewactionbar .filecrumbitem,
.byf-app-redesign #secondaryfilebrowser .previewactionbar .breadcrumb-item-link {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.byf-app-redesign #secondaryfilebrowser .previewactionbar .breadcrumb-item-link {
    max-width: clamp(48px, 8vw, 150px) !important;
}

.byf-app-redesign #secondaryfilebrowser .previewactionbar .crumb-actions {
    display: inline-flex !important;
    flex: 0 0 auto;
    min-width: max-content;
    max-width: none;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-left: auto;
    padding: 0 8px 0 8px !important;
    overflow: visible !important;
    white-space: nowrap;
}

.byf-app-redesign #secondaryfilebrowser .previewactionbar .crumb-actions > * {
    flex: 0 0 auto;
    min-width: 0;
}

.byf-app-redesign #secondaryfilebrowser .previewactionbar .changesorticon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 136px;
    max-width: 156px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--byf-redesign-border);
    border-radius: 999px;
    background: var(--byf-redesign-card);
    color: var(--byf-redesign-foreground) !important;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
}

.byf-app-redesign #secondaryfilebrowser .previewactionbar .byf-redesign-sort-label {
    display: inline !important;
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.byf-app-redesign #secondaryfilebrowser .previewactionbar .byf-redesign-view-switch a,
.byf-app-redesign #secondaryfilebrowser .previewactionbar .byf-redesign-toolbar-button,
.byf-app-redesign #secondaryfilebrowser .previewactionbar .byf-redesign-toolbar-context > a,
.byf-app-redesign #secondaryfilebrowser .previewactionbar .byf-redesign-toolbar-context > button {
    width: 28px;
    min-width: 28px;
    height: 28px;
}

.byf-app-redesign #secondaryfilebrowser .previewactionbar .byf-redesign-toolbar-context {
    flex: 0 0 auto;
    min-width: 28px;
}

.byf-app-redesign #secondaryfilebrowser .previewactionbar .byf-redesign-toolbar-context .tandwiel-dropdown,
.byf-app-redesign #secondaryfilebrowser .previewactionbar .byf-redesign-toolbar-context .dropdown-menu {
    width: auto;
    min-width: 190px;
    height: auto;
    z-index: 2300;
}

.byf-app-redesign #secondaryfilebrowser .previewactionbar .d-inline-block:has(> .changesorticon) > .dropdown-menu {
    display: none;
    width: 230px;
    min-width: 230px !important;
    max-width: 230px;
    padding: 6px !important;
    border: 1px solid var(--byf-redesign-border);
    border-radius: var(--byf-redesign-radius-sm);
    /*background: #fff;*/
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.14);
}

.byf-app-redesign #secondaryfilebrowser .previewactionbar .d-inline-block:has(> .changesorticon) > .dropdown-menu.show {
    display: flex !important;
    flex-direction: column;
    gap: 2px;
}

.byf-app-redesign #secondaryfilebrowser .previewactionbar .d-inline-block:has(> .changesorticon) > .dropdown-menu .dropdown-item.changesort {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    align-items: center;
    gap: 10px;
    padding: 9px 10px !important;
    border-radius: 10px;
    color: var(--byf-redesign-muted-foreground) !important;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.byf-app-redesign #secondaryfilebrowser .previewactionbar .d-inline-block:has(> .changesorticon) > .dropdown-menu .dropdown-item.changesort:hover,
.byf-app-redesign #secondaryfilebrowser .previewactionbar .d-inline-block:has(> .changesorticon) > .dropdown-menu .dropdown-item.changesort.active {
    background: var(--byf-redesign-primary-meta);
    color: var(--byf-redesign-foreground) !important;
}

.byf-app-redesign #secondaryfilebrowser .previewactionbar .d-inline-block:has(> .changesorticon) > .dropdown-menu .dropdown-item.changesort i {
    flex: 0 0 18px;
    width: 18px;
    color: inherit !important;
    text-align: center;
}

.byf-app-redesign #secondaryfilebrowser .previewactionbar .d-inline-block:has(> .changesorticon) > .dropdown-menu .dropdown-divider {
    display: none !important;
}

.byf-app-redesign #secondaryfilebrowser .previewactionbar .btn.btn-add {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 32px;
    min-height: 32px;
    min-width: 72px;
    max-width: none;
    padding: 0 12px;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}

.byf-app-redesign #secondaryfilebrowser .previewactionbar .crumb-actions > .btn,
.byf-app-redesign #secondaryfilebrowser .previewactionbar .crumb-actions > a.btn,
.byf-app-redesign #secondaryfilebrowser .previewactionbar .crumb-actions > button.btn {
    color: #fff !important;
}

.byf-app-redesign #secondaryfilebrowser .previewactionbar .btn.btn-add,
.byf-app-redesign #secondaryfilebrowser .previewactionbar .btn-primary,
.byf-app-redesign #secondaryfilebrowser .previewactionbar .btn-save,
.byf-app-redesign #secondaryfilebrowser .previewactionbar .btn-success,
.byf-app-redesign #secondaryfilebrowser .previewactionbar button[id$="-btn"],
.byf-app-redesign #secondaryfilebrowser .previewactionbar a[id$="-btn"] {
    color: #fff !important;
}

.byf-app-redesign #secondary-files-modal .btn.btn-add,
.byf-app-redesign #secondary-files-modal .btn-primary,
.byf-app-redesign #secondary-files-modal .btn-save,
.byf-app-redesign #secondary-files-modal .btn-success,
.byf-app-redesign #secondary-files-modal button[id$="-btn"],
.byf-app-redesign #secondary-files-modal a[id$="-btn"] {
    color: #fff !important;
}

.byf-app-redesign #secondaryfilebrowser .previewactionbar .btn.btn-add *,
.byf-app-redesign #secondaryfilebrowser .previewactionbar .btn-primary *,
.byf-app-redesign #secondaryfilebrowser .previewactionbar .btn-save *,
.byf-app-redesign #secondaryfilebrowser .previewactionbar .btn-success *,
.byf-app-redesign #secondaryfilebrowser .previewactionbar button[id$="-btn"] *,
.byf-app-redesign #secondaryfilebrowser .previewactionbar a[id$="-btn"] * {
    color: inherit !important;
}

.byf-app-redesign #secondary-files-modal .btn.btn-add *,
.byf-app-redesign #secondary-files-modal .btn-primary *,
.byf-app-redesign #secondary-files-modal .btn-save *,
.byf-app-redesign #secondary-files-modal .btn-success *,
.byf-app-redesign #secondary-files-modal button[id$="-btn"] *,
.byf-app-redesign #secondary-files-modal a[id$="-btn"] * {
    color: inherit !important;
}

.byf-app-redesign #secondaryfilebrowser .previewactionbar #searchform {
    top: 50% !important;
    z-index: 2250;
    display: flex;
    width: min(500px, max(240px, calc(100vw - 340px)));
    max-width: min(500px, max(240px, calc(100vw - 340px)));
    flex-direction: column;
    transform: translateY(-50%);
}

.byf-app-redesign #secondaryfilebrowser .previewactionbar #searchform .custom-search {
    display: flex !important;
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    align-items: center;
    flex-wrap: nowrap !important;
    min-width: 0;
    overflow: visible !important;
}

.byf-app-redesign #secondaryfilebrowser .previewactionbar #keyword {
    width: auto;
    min-width: 0;
    min-height: 42px;
    flex: 1 1 auto;
    padding: 0;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 15px;
}

.byf-app-redesign #secondaryfilebrowser .previewactionbar #dosearch {
    display: inline-flex !important;
    width: 34px;
    min-width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 10px;
    background: var(--byf-redesign-muted);
    color: var(--byf-redesign-muted-foreground) !important;
}

.byf-app-redesign #secondaryfilebrowser .previewactionbar #dosearch:hover {
    color: var(--byf-redesign-primary) !important;
}

.byf-app-redesign #secondaryfilebrowser .previewactionbar #quickSearchResults {
    position: absolute !important;
    top: calc(100% + 6px);
    left: 0;
    right: auto !important;
    z-index: 2300;
    width: 100%;
    max-width: 100%;
    max-height: min(46vh, 430px);
    margin-top: 0;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    border: 1px solid var(--byf-redesign-border);
    border-radius: 14px !important;
    background: #fff;
    box-shadow: var(--byf-redesign-shadow-md);
}

.byf-app-redesign #secondaryfilebrowser .previewactionbar #quickSearchResults:empty {
    display: none !important;
}

.byf-app-redesign #secondaryfilebrowser .previewactionbar #quickSearchResults ul {
    margin: 0;
    padding: 6px;
    border-radius: 14px !important;
}

.byf-app-redesign #secondaryfilebrowser .previewactionbar #quickSearchResults li,
.byf-app-redesign #secondaryfilebrowser .previewactionbar #quickSearchResults a {
    border-radius: 10px !important;
}

.byf-app-redesign #secondaryfilebrowser .previewactionbar #quickSearchResults a {
    color: var(--byf-redesign-foreground);
}

.byf-app-redesign #secondaryfilebrowser .previewactionbar #quickSearchResults li:not(.section):hover,
.byf-app-redesign #secondaryfilebrowser .previewactionbar #quickSearchResults a:hover {
    background: var(--byf-redesign-muted) !important;
    color: var(--byf-redesign-foreground) !important;
}

.byf-app-redesign #secondaryfilebrowser .previewactionbar .dropdown-menu,
.byf-app-redesign #secondaryfilebrowser .previewactionbar .tandwiel-dropdown,
.byf-app-redesign #secondaryfilebrowser .previewactionbar #quickSearchResults,
.byf-app-redesign #secondaryfilebrowser .previewactionbar #searchform {
    pointer-events: auto;
}

.byf-app-redesign #secondaryfilebrowser .previewactionbar .file-view.dropdown-menu {
    min-width: 220px !important;
    max-height: none !important;
    overflow: visible !important;
    z-index: 2400;
}

.byf-app-redesign #secondaryfilebrowser .previewactionbar .file-view.dropdown-menu .dropdown-item {
    display: inline-flex !important;
}

.byf-app-redesign #secondaryfilebrowser .previewactionbar .switchnav,
.byf-app-redesign #secondaryfilebrowser .previewactionbar .collapsedcrumb,
.byf-app-redesign #secondaryfilebrowser .previewactionbar .crumbsection,
.byf-app-redesign #secondaryfilebrowser .previewactionbar .mobile-crumb-actions {
    overflow: visible !important;
}

.byf-app-redesign #secondaryfilebrowser .previewactionbar .collapsedcrumb {
    display: none !important;
}

.byf-app-redesign #secondaryfilebrowser .previewactionbar .mobile-crumb-actions {
    display: none !important;
}

@media (max-width: 1199.98px) {
    .byf-app-redesign #secondaryfilebrowser .previewactionbar .mobile-crumb-actions {
        display: flex !important;
        overflow: visible !important;
    }

    .byf-app-redesign #secondaryfilebrowser .previewactionbar .collapsedcrumb {
        display: flex !important;
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
    }

    .byf-app-redesign #secondaryfilebrowser .previewactionbar > .disableselectable:not(.collapsedcrumb) > div:first-child:not(.mobile-crumb-actions),
    .byf-app-redesign #secondaryfilebrowser .previewactionbar .crumb-actions {
        display: none !important;
    }
}

.byf-app-redesign #secondaryfilebrowser .table-responsive,
.byf-app-redesign #secondaryfilebrowser .table-responsive-lg,
.byf-app-redesign #secondaryfilebrowser .view-list,
.byf-app-redesign #secondaryfilebrowser #filelist,
.byf-app-redesign #secondaryfilebrowser #filelist.listview {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.byf-app-redesign #secondaryfilebrowser #filelist.listview .table {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed;
}

.byf-app-redesign #secondaryfilebrowser .list-name-editable .editNameIcon,
.byf-app-redesign #secondaryfilebrowser .list-name-editable:not(.edit_disabled):hover .editNameIcon {
    display: none !important;
}

.byf-app-redesign #secondaryfilebrowser #filelist.listview #endoflist {
    display: none !important;
}

@media (max-width: 1100px) {
    .byf-app-redesign #secondaryfilebrowser .previewactionbar .byf-redesign-sort-label {
        display: none !important;
    }

    .byf-app-redesign #secondaryfilebrowser .previewactionbar .changesorticon {
        width: 34px;
        max-width: 34px;
        min-width: 34px;
        padding: 0;
        justify-content: center;
    }

    .byf-app-redesign #secondaryfilebrowser .previewactionbar .breadcrumb-item-link {
        max-width: clamp(40px, 7vw, 100px) !important;
    }

    .byf-app-redesign #secondaryfilebrowser .previewactionbar .btn.btn-add {
        min-width: 60px;
        padding-inline: 10px;
    }
}

.byf-app-redesign #workspace.task-workspace {
    height: auto;
    min-height: calc(100vh - var(--byf-redesign-topbar-height));
    padding: 0 !important;
    overflow: hidden;
    background: #fff;
}

.byf-app-redesign #workspace.task-workspace .task-workspace-frame {
    height: calc(100vh - var(--byf-redesign-topbar-height));
    min-height: 640px;
    width: 100%;
}

.byf-app-redesign #workspace.dashboard-page,
.byf-app-redesign #usage-workspace.dashboard-page,
.byf-app-redesign #tenant-activity-workspace.dashboard-page {
    --dashboard-sticky-offset: 0px;
    --dashboard-header-height: 52px;
    padding-top: 14px !important;
}

.byf-app-redesign #workspace.dashboard-page .dashboard-header,
.byf-app-redesign #usage-workspace.dashboard-page .dashboard-header,
.byf-app-redesign #tenant-activity-workspace.dashboard-page .dashboard-header {
    background: var(--byf-redesign-bg) !important;
    padding-top: 6px;
}

/* Keep dashboard cards behind the complete sticky controls, just like file
 * items remain behind the toolbar stack in the files module. */
.byf-app-redesign #workspace.dashboard-page .dashboard-header::before,
.byf-app-redesign #workspace.dashboard-page .dashboard-filters-row::before,
.byf-app-redesign #usage-workspace.dashboard-page .dashboard-header::before,
.byf-app-redesign #usage-workspace.dashboard-page .dashboard-filters-row::before,
.byf-app-redesign #tenant-activity-workspace.dashboard-page .dashboard-header::before,
.byf-app-redesign #tenant-activity-workspace.dashboard-page .dashboard-filters-row::before {
    background: var(--byf-redesign-bg) !important;
}

.byf-app-redesign #workspace.dashboard-page .dashboard-filters-row,
.byf-app-redesign #usage-workspace.dashboard-page .dashboard-filters-row,
.byf-app-redesign #tenant-activity-workspace.dashboard-page .dashboard-filters-row {
    background: var(--byf-redesign-bg) !important;
}

.byf-app-redesign #workspace.status-dashboard .dashboard-sticky-controls {
    background: var(--byf-redesign-bg);
    isolation: isolate;
    position: sticky;
    top: var(--dashboard-sticky-offset);
    z-index: 10;
}

.byf-app-redesign #workspace.status-dashboard .dashboard-sticky-controls::before {
    background: var(--byf-redesign-bg);
    bottom: 0;
    content: "";
    left: -32px;
    pointer-events: none;
    position: absolute;
    right: -32px;
    top: -14px;
    z-index: 0;
}

.byf-app-redesign #workspace.status-dashboard .dashboard-sticky-controls > * {
    position: relative;
    z-index: 1;
}

.byf-app-redesign #workspace.status-dashboard .dashboard-sticky-controls .dashboard-header,
.byf-app-redesign #workspace.status-dashboard .dashboard-sticky-controls .dashboard-filters-row {
    position: relative;
    top: auto;
    z-index: auto;
}

.byf-app-redesign #workspace.information-dashboard .information-sticky-controls {
    background: var(--byf-redesign-bg);
    isolation: isolate;
    position: sticky;
    top: var(--dashboard-sticky-offset);
    z-index: 10;
}

.byf-app-redesign #workspace.information-dashboard .information-sticky-controls::before {
    background: var(--byf-redesign-bg);
    bottom: 0;
    content: "";
    left: -32px;
    pointer-events: none;
    position: absolute;
    right: -32px;
    top: -14px;
    z-index: 0;
}

.byf-app-redesign #workspace.information-dashboard .information-sticky-controls > * {
    position: relative;
    z-index: 1;
}

.byf-app-redesign #workspace.information-dashboard .information-sticky-controls .dashboard-header,
.byf-app-redesign #workspace.information-dashboard .information-sticky-controls .dashboard-filters-row {
    background: var(--byf-redesign-bg) !important;
    position: relative;
    top: auto;
    z-index: auto;
}

.byf-app-redesign #workspace.dashboard-page .dashboard-switch__item,
.byf-app-redesign #usage-workspace.dashboard-page .dashboard-switch__item,
.byf-app-redesign #tenant-activity-workspace.dashboard-page .dashboard-switch__item {
    color: var(--byf20-color-64748b) !important;
}

.byf-app-redesign #workspace.dashboard-page .dashboard-switch__item:hover,
.byf-app-redesign #usage-workspace.dashboard-page .dashboard-switch__item:hover,
.byf-app-redesign #tenant-activity-workspace.dashboard-page .dashboard-switch__item:hover {
    color: var(--byf20-color-334155) !important;
}

.byf-app-redesign #workspace.dashboard-page .dashboard-switch__item--active,
.byf-app-redesign #workspace.dashboard-page .dashboard-switch__item.active,
.byf-app-redesign #workspace.dashboard-page .dashboard-switch__item.nav-link.active,
.byf-app-redesign #usage-workspace.dashboard-page .dashboard-switch__item--active,
.byf-app-redesign #usage-workspace.dashboard-page .dashboard-switch__item.active,
.byf-app-redesign #usage-workspace.dashboard-page .dashboard-switch__item.nav-link.active,
.byf-app-redesign #tenant-activity-workspace.dashboard-page .dashboard-switch__item--active,
.byf-app-redesign #tenant-activity-workspace.dashboard-page .dashboard-switch__item.active,
.byf-app-redesign #tenant-activity-workspace.dashboard-page .dashboard-switch__item.nav-link.active {
    color: var(--byf20-color-ffffff) !important;
}

.byf-app-redesign #tenant-activity-workspace .tenant-activity-content {
    padding-top: 14px;
}

.byf-app-redesign #workspace.dashboard-status .dashboard-content,
.byf-app-redesign #usage-workspace.dashboard-usage .dashboard-content {
    padding-top: 14px;
}

.byf-app-redesign #workspace.settings-dashboard {
    --dashboard-sticky-offset: 0px;
    display: flex;
    height: calc(100dvh - var(--byf-redesign-topbar-height));
    max-height: calc(100dvh - var(--byf-redesign-topbar-height));
    min-height: 0;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
    padding: 14px 22px 40px !important;
}

.byf-app-redesign .settings-dashboard .settings {
    width: 100%;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
}

.byf-app-redesign .settings-dashboard .tabzone-lr,
.byf-app-redesign .settings-dashboard .tabzone-lr.row {
    display: grid !important;
    width: 100%;
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 14px;
    min-height: 0;
    margin: 0 !important;
    background: transparent !important;
}

.byf-app-redesign .settings-dashboard .tabzone-lr > .tabs {
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    flex: 0 0 auto !important;
    align-self: flex-start !important;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 2px 6px 0 !important;
    background: transparent !important;
    scrollbar-width: none;
}

.byf-app-redesign .settings-dashboard .tabzone-lr > .tabs::-webkit-scrollbar {
    display: none;
}

.byf-app-redesign .settings-dashboard .settings-dashboard-nav {
    width: max-content !important;
    max-width: none;
    flex-wrap: nowrap;
    margin: 0;
    min-height: 40px;
    gap: 4px;
    padding: 4px !important;
    border: 1px solid var(--byf20-color-d9e4f2) !important;
    border-radius: 13px !important;
    background: var(--byf20-color-ffffff) !important;
    box-shadow: none !important;
}

.byf-app-redesign .settings-dashboard .settings-dashboard-nav .nav-item {
    display: inline-flex;
    flex: 0 0 auto;
    width: auto !important;
    background: transparent !important;
}

.byf-app-redesign .settings-dashboard .settings-dashboard-nav .dashboard-switch__item {
    min-height: 30px;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: var(--byf20-color-64748b) !important;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none;
}

.byf-app-redesign .settings-dashboard .settings-dashboard-nav .dashboard-switch__item:hover {
    background: var(--byf20-color-f1f5f9) !important;
    color: var(--byf20-color-334155) !important;
}

.byf-app-redesign .settings-dashboard .settings-dashboard-nav .dashboard-switch__item.active {
    background: var(--byf-redesign-primary) !important;
    color: var(--byf-redesign-primary-foreground) !important;
    box-shadow: 0 8px 16px var(--byf-redesign-primary-soft) !important;
}

.byf-app-redesign .settings-dashboard .tab-area {
    position: relative;
    display: flex !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    flex-direction: column;
    align-self: stretch !important;
    min-height: 0 !important;
    max-height: 100% !important;
    border: 1px solid var(--byf20-color-e2e8f0);
    border-radius: 18px;
    background: var(--byf20-color-ffffff) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}

.byf-app-redesign .settings-dashboard .tab-content {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.byf-app-redesign .settings-dashboard .tab-pane {
    min-height: 100%;
    padding: 18px 22px 22px !important;
    background: var(--byf20-color-ffffff) !important;
}

.byf-app-redesign .settings-dashboard .tab-pane > div[class*="pl-"],
.byf-app-redesign .settings-dashboard .tab-pane > div[class*="pr-"],
.byf-app-redesign .settings-dashboard .tab-pane > div[class*="pt-"] {
    padding: 0 !important;
}

.byf-app-redesign .settings-dashboard .settings-container,
.byf-app-redesign .settings-dashboard .account-settings-container > form > .settings-container {
    width: 100%;
    max-width: none;
    margin: 0 !important;
    padding: 20px 0;
    border-bottom: 1px solid var(--byf20-color-e2e8f0);
    border-radius: 18px !important;
    background: #fff !important;
}

.byf-app-redesign .settings-dashboard .settings-container:first-child,
.byf-app-redesign .settings-dashboard .account-settings-container > form > .settings-container:first-child {
    padding-top: 0;
}

.byf-app-redesign .settings-dashboard .settings-container:last-child,
.byf-app-redesign .settings-dashboard .account-settings-container > form > .settings-container:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.byf-app-redesign .settings-dashboard .form-group {
    align-items: center;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 12px;
}

.byf-app-redesign .settings-dashboard .form-group:last-child {
    margin-bottom: 0;
}

.byf-app-redesign .settings-dashboard .form-group > label,
.byf-app-redesign .settings-dashboard .form-group > h3 {
    max-width: 190px;
    padding: 0 16px 0 0;
    color: var(--byf20-color-334155);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

.byf-app-redesign .settings-dashboard .form-group > h3 {
    flex-basis: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 0 12px;
    color: var(--byf20-color-0f172a);
    font-size: 16px;
    font-weight: 800;
}

.byf-app-redesign .settings-dashboard .form-group > div[class*="col-"] {
    flex: 1 1 360px;
    max-width: 680px;
    padding: 0;
}

/* Account settings are grouped into independent, responsive product panels. */
.byf-app-redesign .settings-dashboard .account-settings-container,
.byf-app-redesign .settings-dashboard .account-settings-grid {
    width: 100%;
    min-width: 0;
}

.byf-app-redesign .settings-dashboard .account-settings-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.byf-app-redesign .settings-dashboard .account-settings-grid > .account-settings-card {
    grid-column: span 6;
    width: 100%;
    min-width: 0;
    margin: 0 !important;
    padding: 22px !important;
    border: 1px solid var(--byf20-color-d9e4f2) !important;
    border-radius: 14px !important;
    background: #fff !important;
}

.byf-app-redesign .settings-dashboard .account-settings-grid > .account-settings-card--wide {
    grid-column: 1 / -1;
}

.byf-app-redesign .settings-dashboard .account-settings-grid > .account-settings-card--mfa,
.byf-app-redesign .settings-dashboard .account-settings-grid > .account-settings-card--mobile,
.byf-app-redesign .settings-dashboard .account-settings-grid > .account-settings-card--native {
    grid-column: span 4;
}

.byf-app-redesign .settings-dashboard .account-settings-card--account {
    grid-column: 1 / 7 !important;
    grid-row: 1 / 4;
    align-self: stretch;
    order: 1;
}

.byf-app-redesign .settings-dashboard .account-settings-card--mfa {
    grid-column: 8 / 13 !important;
    grid-row: 1;
    order: 2;
}

.byf-app-redesign .settings-dashboard .account-settings-card--mobile {
    grid-column: 7 / 13 !important;
    grid-row: 2;
    order: 3;
}

.byf-app-redesign .settings-dashboard .account-settings-card--native {
    grid-column: 7 / 13 !important;
    grid-row: 3;
    order: 4;
}

.byf-app-redesign .settings-dashboard .account-settings-card--defaults {
    grid-column: 1 / 7 !important;
    grid-row: 4;
    order: 5;
}

.byf-app-redesign .settings-dashboard .account-settings-card--notifications {
    grid-column: 7 / 13 !important;
    grid-row: 4;
    order: 6;
}

.byf-app-redesign .settings-dashboard .account-settings-card--outlook {
    grid-column: 1 / -1 !important;
    grid-row: 5;
    order: 7;
}

.byf-app-redesign .settings-dashboard .account-settings-grid:not(:has(.account-settings-card--mfa)) .account-settings-card--account,
.byf-app-redesign .settings-dashboard .account-settings-grid:not(:has(.account-settings-card--native)) .account-settings-card--account {
    grid-row-end: 3;
}

.byf-app-redesign .settings-dashboard .account-settings-grid:not(:has(.account-settings-card--mfa)) .account-settings-card--mobile {
    grid-row: 1;
}

.byf-app-redesign .settings-dashboard .account-settings-grid:not(:has(.account-settings-card--mfa)) .account-settings-card--native {
    grid-row: 2;
}

.byf-app-redesign .settings-dashboard .account-settings-grid:not(:has(.account-settings-card--mfa)) .account-settings-card--defaults,
.byf-app-redesign .settings-dashboard .account-settings-grid:not(:has(.account-settings-card--native)) .account-settings-card--defaults,
.byf-app-redesign .settings-dashboard .account-settings-grid:not(:has(.account-settings-card--mfa)) .account-settings-card--notifications,
.byf-app-redesign .settings-dashboard .account-settings-grid:not(:has(.account-settings-card--native)) .account-settings-card--notifications {
    grid-row: 3;
}

.byf-app-redesign .settings-dashboard .account-settings-grid:not(:has(.account-settings-card--mfa)) .account-settings-card--outlook,
.byf-app-redesign .settings-dashboard .account-settings-grid:not(:has(.account-settings-card--native)) .account-settings-card--outlook {
    grid-row: 4;
}

.byf-app-redesign .settings-dashboard .account-settings-grid:not(:has(.account-settings-card--mfa)):not(:has(.account-settings-card--native)) .account-settings-card--account {
    grid-row: 1;
}

.byf-app-redesign .settings-dashboard .account-settings-grid:not(:has(.account-settings-card--mfa)):not(:has(.account-settings-card--native)) .account-settings-card--defaults,
.byf-app-redesign .settings-dashboard .account-settings-grid:not(:has(.account-settings-card--mfa)):not(:has(.account-settings-card--native)) .account-settings-card--notifications {
    grid-row: 2;
}

.byf-app-redesign .settings-dashboard .account-settings-grid:not(:has(.account-settings-card--mfa)):not(:has(.account-settings-card--native)) .account-settings-card--outlook {
    grid-row: 3;
}

.byf-app-redesign .settings-dashboard .account-settings-card > .form-group:has(> h3) {
    min-height: 32px;
    margin-bottom: 0;
}

.byf-app-redesign .settings-dashboard .account-settings-card > .form-group > h3 {
    width: 100%;
    max-width: none;
    margin: 0 0 14px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--byf20-color-e2e8f0);
    font-size: 16px;
    line-height: 1.25;
}

.byf-app-redesign .settings-dashboard .account-settings-card--account {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    grid-auto-rows: max-content;
    align-content: start;
    align-items: start;
    gap: 16px 28px;
}

.byf-app-redesign .settings-dashboard .account-settings-card--account > .form-group:has(> h3) > h3 {
    margin-bottom: 0;
}

.byf-app-redesign .settings-dashboard .account-settings-card--account > .form-group {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    margin: 0;
}

.byf-app-redesign .settings-dashboard .account-settings-card--account > .form-group:has(> h3),
.byf-app-redesign .settings-dashboard .account-settings-card--account > .form-group:has(button),
.byf-app-redesign .settings-dashboard .account-settings-card--account > .form-group[id] {
    grid-column: 1 / -1;
}

.byf-app-redesign .settings-dashboard .account-settings-card--account > .form-group > label,
.byf-app-redesign .settings-dashboard .account-settings-card--account > .form-group > h3,
.byf-app-redesign .settings-dashboard .account-settings-card--account > .form-group > div[class*="col-"] {
    width: auto;
    max-width: none;
}

.byf-app-redesign .settings-dashboard .account-settings-card--account > .form-group > label {
    padding: 0;
}

.byf-app-redesign .settings-dashboard .account-settings-card--account > .form-group > div[class*="col-"] {
    width: 100%;
    flex: none;
    padding: 0;
}

.byf-app-redesign .settings-dashboard .account-email-control {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
}

.byf-app-redesign .settings-dashboard .account-email-control > .form-control {
    min-width: 0;
    flex: 1 1 auto;
}

.byf-app-redesign .settings-dashboard .account-email-password-link {
    flex: 0 0 auto;
    color: var(--byf20-color-475569);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: underline;
    white-space: nowrap;
}

.byf-app-redesign .settings-dashboard .account-email-password-link:hover {
    color: var(--byf-redesign-primary);
}

.byf-app-redesign .settings-dashboard .account-password-action-label {
    min-height: 19px;
}

.byf-app-redesign .settings-dashboard .account-password-action > div[class*="col-"] {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: flex-end;
}

.byf-app-redesign .settings-dashboard .account-settings-card--account > .form-group:has(button) {
    display: flex;
    justify-content: flex-end;
    padding-top: 2px;
}

.byf-app-redesign .settings-dashboard .account-settings-card--account > .form-group:has(button) > label {
    display: none;
}

.byf-app-redesign .settings-dashboard .account-settings-card--account > .form-group:has(button) > div {
    flex: 0 1 420px;
}

.byf-app-redesign .settings-dashboard .account-mfa-inline {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 2px;
    padding-top: 16px;
    border-top: 1px solid var(--byf20-color-e2e8f0);
}

.byf-app-redesign .settings-dashboard .account-mfa-inline__copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.byf-app-redesign .settings-dashboard .account-mfa-inline__copy strong {
    color: var(--byf20-color-0f172a);
    font-size: 13px;
    font-weight: 750;
}

.byf-app-redesign .settings-dashboard .account-mfa-inline__copy small {
    color: var(--byf-redesign-muted-foreground);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
}

.byf-app-redesign .settings-dashboard .account-settings-card--defaults > .form-group:not(:has(> h3)),
.byf-app-redesign .settings-dashboard .account-settings-card--notifications > .form-group:not(:has(> h3)) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    align-items: start;
    margin: 0;
    padding: 17px 0;
    border-bottom: 1px solid var(--byf20-color-e2e8f0);
}

.byf-app-redesign .settings-dashboard .account-settings-card--defaults > .form-group:last-child,
.byf-app-redesign .settings-dashboard .account-settings-card--notifications > .form-group:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.byf-app-redesign .settings-dashboard .account-settings-card--defaults > .form-group:nth-child(2),
.byf-app-redesign .settings-dashboard .account-settings-card--notifications > .form-group:nth-child(2) {
    padding-top: 0;
}

.byf-app-redesign .settings-dashboard .account-settings-card--defaults > .form-group > label,
.byf-app-redesign .settings-dashboard .account-settings-card--notifications > .form-group > label {
    width: 100%;
    max-width: none;
    padding: 0;
    color: var(--byf20-color-0f172a);
    font-size: 14px;
    font-weight: 700;
}

.byf-app-redesign .settings-dashboard .account-setting-help {
    display: block;
    margin: -2px 0 3px;
    color: var(--byf20-color-64748b);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
}

.byf-app-redesign .settings-dashboard .account-settings-card--defaults > .form-group > div[class*="col-"],
.byf-app-redesign .settings-dashboard .account-settings-card--notifications > .form-group > div[class*="col-"] {
    width: 100%;
    max-width: none;
    flex: none;
    padding: 0;
}

.byf-app-redesign .settings-dashboard .account-settings-card--defaults .row {
    align-items: center;
    gap: 10px;
    margin: 0;
}

.byf-app-redesign .settings-dashboard .account-settings-card--defaults .row > div[class*="col-"] {
    width: auto;
    max-width: none;
    flex: 0 0 auto;
    padding: 0;
}

.byf-app-redesign .settings-dashboard .account-settings-card--defaults .row > div[class*="col-"]:last-child {
    flex: 1 1 auto;
}

.byf-app-redesign .settings-dashboard .account-settings-card--defaults .changesort,
.byf-app-redesign .settings-dashboard .account-settings-card--defaults .changeview {
    margin-right: 2px !important;
    background: var(--byf20-color-f1f5f9);
}

.byf-app-redesign .settings-dashboard .account-settings-card--defaults .changesort.active,
.byf-app-redesign .settings-dashboard .account-settings-card--defaults .changeview.active {
    background: var(--byf-redesign-primary-soft);
}

.byf-app-redesign .settings-dashboard .account-settings-card--mfa > .form-group,
.byf-app-redesign .settings-dashboard .account-settings-card--mobile > .form-group,
.byf-app-redesign .settings-dashboard .account-settings-card--native > .form-group {
    display: block;
}

.byf-app-redesign .settings-dashboard .account-mfa-summary,
.byf-app-redesign .settings-dashboard .account-app-summary {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
}

.byf-app-redesign .settings-dashboard .account-mfa-summary p,
.byf-app-redesign .settings-dashboard .account-app-summary p {
    margin: 0;
    color: var(--byf-redesign-muted-foreground);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
}

.byf-app-redesign .settings-dashboard .account-mfa-open,
.byf-app-redesign .settings-dashboard .account-app-open {
    display: inline-flex;
    width: auto !important;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    align-self: flex-start;
}

.byf-app-redesign .account-mfa-modal .modal-content,
.byf-app-redesign .account-app-modal .modal-content,
.byf-app-redesign .account-addin-modal .modal-content {
    overflow: hidden;
    border: 1px solid var(--byf-redesign-border);
    border-radius: var(--byf-redesign-radius);
    background: var(--byf-redesign-card);
    box-shadow: var(--byf-redesign-shadow-md);
}

.byf-app-redesign .account-mfa-modal .modal-header,
.byf-app-redesign .account-app-modal .modal-header,
.byf-app-redesign .account-addin-modal .modal-header {
    align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid var(--byf-redesign-border);
    background: var(--byf-redesign-muted);
}

.byf-app-redesign .account-mfa-modal-heading,
.byf-app-redesign .account-app-modal-heading,
.byf-app-redesign .account-addin-modal-heading {
    display: flex;
    align-items: center;
    gap: 12px;
}

.byf-app-redesign .account-mfa-modal-icon,
.byf-app-redesign .account-app-modal-icon,
.byf-app-redesign .account-addin-modal-icon {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    border-radius: var(--byf-redesign-radius-sm);
    background: var(--byf-redesign-primary-soft);
    color: var(--byf-redesign-primary);
    font-size: 17px;
}

.byf-app-redesign .account-mfa-modal .modal-title,
.byf-app-redesign .account-app-modal .modal-title,
.byf-app-redesign .account-addin-modal .modal-title {
    color: var(--byf-redesign-foreground);
    font-size: 17px;
    font-weight: 800;
}

.byf-app-redesign .account-mfa-modal .close,
.byf-app-redesign .account-app-modal .close,
.byf-app-redesign .account-addin-modal .close {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    color: var(--byf-redesign-foreground);
    opacity: 1;
}

.byf-app-redesign .account-mfa-frame-wrap {
    position: relative;
    min-height: 360px;
    background: var(--byf-redesign-card);
}

.byf-app-redesign .account-mfa-loader {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--byf-redesign-card);
    color: var(--byf-redesign-primary);
    font-size: 24px;
}

.byf-app-redesign .account-mfa-frame {
    display: block;
    width: 100%;
    height: 420px;
    border: 0;
    background: transparent;
    opacity: 0;
    transition: height 180ms ease, opacity 120ms ease;
}

.byf-app-redesign .account-mfa-frame.is-loaded {
    opacity: 1;
}

.byf-app-redesign .settings-dashboard .account-settings-card--mfa > .form-group > div[class*="col-"],
.byf-app-redesign .settings-dashboard .account-settings-card--mobile > .form-group > div[class*="col-"],
.byf-app-redesign .settings-dashboard .account-settings-card--native > .form-group > div[class*="col-"] {
    width: 100%;
    max-width: none;
    padding: 0;
}

.byf-app-redesign .account-app-modal .modal-body {
    padding: 22px;
}

.byf-app-redesign .account-addin-modal .modal-body {
    padding: 22px;
}

.byf-app-redesign .account-addin-modal-content {
    min-height: 140px;
}

.byf-app-redesign .account-app-modal-content {
    display: flex;
    min-height: 220px;
    flex-direction: column;
    gap: 20px;
}

.byf-app-redesign .account-app-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.byf-app-redesign .account-app-modal-actions .btn {
    display: inline-flex;
    width: auto !important;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.byf-app-redesign .account-app-modal .activeAppTokens,
.byf-app-redesign .account-app-modal .qrCodePlaceholder {
    width: 100%;
    margin: 0;
}

.byf-app-redesign .account-app-token-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--byf-redesign-border);
    border-radius: var(--byf-redesign-radius-sm);
}

.byf-app-redesign .account-app-token-table-wrap .table {
    width: 100%;
    margin: 0;
}

.byf-app-redesign .account-app-token-table-wrap th,
.byf-app-redesign .account-app-token-table-wrap td {
    padding: 11px 14px;
    vertical-align: middle;
    border-top: 1px solid var(--byf-redesign-border);
    color: var(--byf-redesign-foreground);
    font-size: 12px;
    font-weight: 500;
}

.byf-app-redesign .account-app-token-table-wrap thead th {
    border-top: 0;
    background: var(--byf-redesign-muted);
    color: var(--byf-redesign-muted-foreground);
    font-size: 11px;
    font-weight: 800;
}

.byf-app-redesign .account-app-token-table-wrap th:last-child,
.byf-app-redesign .account-app-token-table-wrap td:last-child {
    text-align: right;
}

.byf-app-redesign .account-app-token-table-wrap .account-session-revoke {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--byf20-color-334155) !important;
    font-size: 16px !important;
    line-height: 1;
    box-shadow: none;
}

.byf-app-redesign .account-app-token-table-wrap .account-session-revoke i {
    color: inherit !important;
    font-size: 16px !important;
    line-height: 1 !important;
    opacity: 1;
    transform: none !important;
}

.byf-app-redesign .account-app-token-table-wrap .account-session-revoke:hover {
    color: #dc2626 !important;
}

.byf-app-redesign .account-app-empty {
    margin: 0;
    padding: 18px;
    border: 1px solid var(--byf-redesign-border);
    border-radius: var(--byf-redesign-radius-sm);
    background: var(--byf-redesign-muted);
    color: var(--byf-redesign-muted-foreground);
}

.byf-app-redesign .account-app-modal .qrCodePlaceholder {
    min-height: 220px;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border: 1px solid var(--byf-redesign-border);
    border-radius: var(--byf-redesign-radius-sm);
    background: var(--byf-redesign-muted);
    text-align: center;
}

.byf-app-redesign .account-app-modal .qrCodePlaceholder[style*="display: block"] {
    display: flex !important;
}

.byf-app-redesign .account-app-modal .qrCodePlaceholder img {
    display: block;
    width: min(280px, 100%);
    height: auto;
    margin: auto;
}

.byf-app-redesign .account-app-qr-loader {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--byf-redesign-primary);
    font-size: 14px;
}

.byf-app-redesign .settings-dashboard .account-settings-card--native > .form-group > div {
    width: 100%;
}

.byf-app-redesign .settings-dashboard .native-handler-list {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 10px;
}

.byf-app-redesign .settings-dashboard .native-handler-platform {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-height: 58px;
    padding: 8px 10px;
    border: 1px solid var(--byf-redesign-border);
    border-radius: var(--byf-redesign-radius-sm);
    background: var(--byf-redesign-card);
}

.byf-app-redesign .settings-dashboard .native-handler-platform-icon {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--byf20-color-f1f5f9);
    color: var(--byf20-color-0f172a);
    font-size: 22px;
}

.byf-app-redesign .settings-dashboard .native-handler-platform-icon--windows {
    color: #0078d4;
}

.byf-app-redesign .settings-dashboard .native-handler-platform-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.byf-app-redesign .settings-dashboard .native-handler-platform-copy strong {
    color: var(--byf-redesign-foreground);
    font-size: 13px;
    font-weight: 800;
}

.byf-app-redesign .settings-dashboard .native-handler-platform-copy small {
    overflow: hidden;
    color: var(--byf-redesign-muted-foreground);
    font-size: 11px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.byf-app-redesign .settings-dashboard .native-handler-download {
    display: inline-flex;
    width: auto !important;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .byf-app-redesign .account-app-modal .modal-body {
        padding: 16px;
    }

    .byf-app-redesign .account-app-modal-actions {
        flex-direction: column;
    }

    .byf-app-redesign .account-app-modal-actions .btn {
        width: 100% !important;
    }

    .byf-app-redesign .settings-dashboard .native-handler-platform {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .byf-app-redesign .settings-dashboard .native-handler-download {
        grid-column: 1 / -1;
        width: 100% !important;
    }
}

.byf-app-redesign .settings-dashboard .account-settings-card--outlook > .form-group {
    align-items: flex-start;
}

.byf-app-redesign .settings-dashboard .account-settings-card--outlook > .form-group > div[class*="col-"] {
    max-width: none;
}

.byf-app-redesign .settings-dashboard .account-settings-card--outlook {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.byf-app-redesign .settings-dashboard .account-outlook-heading,
.byf-app-redesign .settings-dashboard .account-outlook-section--signature {
    grid-column: 1 / -1;
}

.byf-app-redesign .settings-dashboard .account-outlook-heading h3 {
    margin-bottom: 0 !important;
}

.byf-app-redesign .settings-dashboard .account-outlook-section {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--byf-redesign-border);
    border-radius: var(--byf-redesign-radius);
    background: var(--byf-redesign-card);
}

.byf-app-redesign .settings-dashboard .account-outlook-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
}

.byf-app-redesign .settings-dashboard .account-outlook-section-heading > div {
    min-width: 0;
}

.byf-app-redesign .settings-dashboard .account-outlook-section-heading h4 {
    margin: 0;
    color: var(--byf-redesign-foreground);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
}

.byf-app-redesign .settings-dashboard .account-outlook-section-heading p {
    margin: 4px 0 0;
    color: var(--byf-redesign-muted-foreground);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
}

.byf-app-redesign .settings-dashboard .account-outlook-section-heading .btn {
    display: inline-flex;
    width: auto !important;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 8px;
    white-space: nowrap;
}

.byf-app-redesign .settings-dashboard .account-outlook-add-mailbox .fa-microsoft {
    font-size: 15px;
}

.byf-app-redesign .settings-dashboard .account-outlook-mailboxes {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

.byf-app-redesign .settings-dashboard .account-outlook-mailbox {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 34px;
    gap: 10px;
    align-items: center;
    min-height: 56px;
    padding: 8px 10px;
    border: 1px solid var(--byf-redesign-border);
    border-radius: var(--byf-redesign-radius-sm);
    background: var(--byf-redesign-card);
}

.byf-app-redesign .settings-dashboard .account-outlook-mailbox-icon,
.byf-app-redesign .settings-dashboard .account-outlook-mailbox-logout {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.byf-app-redesign .settings-dashboard .account-outlook-mailbox-icon {
    background: var(--byf-redesign-primary-soft);
    color: var(--byf-redesign-primary);
}

.byf-app-redesign .settings-dashboard .account-outlook-mailbox-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.byf-app-redesign .settings-dashboard .account-outlook-mailbox-copy strong,
.byf-app-redesign .settings-dashboard .account-outlook-mailbox-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.byf-app-redesign .settings-dashboard .account-outlook-mailbox-copy strong {
    color: var(--byf-redesign-foreground);
    font-size: 13px;
    font-weight: 700;
}

.byf-app-redesign .settings-dashboard .account-outlook-mailbox-copy small {
    color: var(--byf-redesign-muted-foreground);
    font-size: 11px;
    font-weight: 500;
}

.byf-app-redesign .settings-dashboard .account-outlook-mailbox-logout {
    color: var(--byf20-color-475569);
    font-size: 14px;
}

.byf-app-redesign .settings-dashboard .account-outlook-mailbox-logout:hover {
    color: var(--byf-redesign-primary);
}

.byf-app-redesign .settings-dashboard .account-outlook-empty {
    display: flex;
    min-height: 64px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    grid-column: 1 / -1;
    padding: 14px;
    border: 1px dashed var(--byf-redesign-border);
    border-radius: var(--byf-redesign-radius-sm);
    color: var(--byf-redesign-muted-foreground);
    font-size: 12px;
    font-weight: 500;
    text-align: center;
}

.byf-app-redesign .settings-dashboard .account-outlook-signature-preview {
    min-height: 150px;
    max-height: 280px;
    overflow: auto;
    padding: 18px;
    border: 1px solid var(--byf-redesign-border);
    border-radius: var(--byf-redesign-radius-sm);
    background: var(--byf-redesign-card);
}

.byf-app-redesign .settings-dashboard .account-outlook-signature-preview .signature-preview {
    max-width: 100%;
    margin: 0;
    padding: 0;
    color: var(--byf-redesign-foreground);
    font-size: 13px;
    line-height: 1.55;
}

.byf-app-redesign .settings-dashboard .account-outlook-signature-preview img {
    max-width: 100%;
    height: auto;
}

.byf-app-redesign .account-signature-modal .modal-content {
    overflow: hidden;
    border: 1px solid var(--byf-redesign-border);
    border-radius: var(--byf-redesign-radius);
    background: var(--byf-redesign-card);
    box-shadow: var(--byf-redesign-shadow-md);
}

.byf-app-redesign .account-signature-modal .modal-header {
    align-items: center;
    padding: 18px 22px;
}

.byf-app-redesign .account-signature-modal-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
}

.byf-app-redesign .account-signature-modal-icon {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    border-radius: var(--byf-redesign-radius-sm);
    background: var(--byf-redesign-primary-soft);
    color: var(--byf-redesign-primary);
    font-size: 17px;
}

.byf-app-redesign .account-signature-modal-heading .modal-title {
    margin: 0;
}

.byf-app-redesign .account-signature-modal-heading p {
    margin: 3px 0 0;
    color: var(--byf-redesign-muted-foreground);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

.byf-app-redesign .account-signature-modal .modal-body {
    padding: 22px;
}

.byf-app-redesign .account-signature-modal #signature-form {
    padding: 0;
}

.byf-app-redesign .account-signature-editor-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.byf-app-redesign .account-signature-editor-label label {
    margin: 0;
    color: var(--byf-redesign-foreground);
    font-size: 13px;
    font-weight: 700;
}

.byf-app-redesign .account-signature-code-badge {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--byf-redesign-muted);
    color: var(--byf-redesign-muted-foreground);
    font-family: monospace;
    font-size: 11px;
    font-weight: 700;
}

.byf-app-redesign .account-signature-code {
    width: 100%;
    min-height: 280px;
    resize: vertical;
    padding: 14px !important;
    border: 1px solid var(--byf-redesign-border) !important;
    border-radius: var(--byf-redesign-radius-sm) !important;
    background: #fff !important;
    color: var(--byf-redesign-foreground) !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.55;
    tab-size: 2;
    box-shadow: none !important;
}

.byf-app-redesign .account-signature-code:focus {
    outline: 0 !important;
    border-color: var(--byf-redesign-border) !important;
    box-shadow: none !important;
}

.byf-app-redesign .account-signature-editor-help {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 9px;
    color: var(--byf-redesign-muted-foreground);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
}

.byf-app-redesign .account-signature-editor-help i {
    color: var(--byf-redesign-primary);
}

.byf-app-redesign .account-signature-modal .modal-footer {
    gap: 8px;
    padding: 14px 22px;
}

.byf-app-redesign .account-signature-modal .modal-footer .btn {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

@media (max-width: 991.98px) {
    .byf-app-redesign .settings-dashboard .account-settings-card--outlook,
    .byf-app-redesign .settings-dashboard .account-outlook-mailboxes {
        grid-template-columns: minmax(0, 1fr);
    }

    .byf-app-redesign .settings-dashboard .account-outlook-section {
        grid-column: 1;
    }
}

@media (max-width: 575.98px) {
    .byf-app-redesign .account-addin-modal .modal-body {
        padding: 16px;
    }

    .byf-app-redesign .settings-dashboard .account-outlook-section-heading {
        flex-direction: column;
        gap: 12px;
    }

    .byf-app-redesign .settings-dashboard .account-outlook-section-heading .btn {
        width: 100% !important;
    }
}

/* General settings follow the same panel rhythm as account settings. */
.byf-app-redesign .settings-dashboard .general-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
    min-width: 0;
}

.byf-app-redesign .settings-dashboard .general-settings-grid .general-settings-card {
    width: 100%;
    min-width: 0;
    margin: 0 !important;
    padding: 22px !important;
    border: 1px solid var(--byf20-color-d9e4f2) !important;
    border-radius: 12px !important;
    background: #fff !important;
}

.byf-app-redesign .settings-dashboard .general-settings-card > h3 {
    width: 100%;
    margin: 0 0 9px;
    padding: 0 0 12px !important;
    border-bottom: 1px solid var(--byf20-color-e2e8f0);
    color: var(--byf20-color-0f172a);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.25;
}

.byf-app-redesign .settings-dashboard .general-settings-card > h3 i {
    margin-left: 4px;
    color: var(--byf20-color-64748b) !important;
    font-size: 14px;
}

.byf-app-redesign .settings-dashboard .general-settings-card__help {
    min-height: 0;
    margin: 0 0 8px;
    color: var(--byf20-color-64748b);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
}

.byf-app-redesign .settings-dashboard .general-settings-card > div {
    margin: 0;
    padding: 13px 0 !important;
    border-bottom: 1px solid var(--byf20-color-e2e8f0);
}

.byf-app-redesign .settings-dashboard .general-settings-card > div:last-child {
    padding-bottom: 0 !important;
    border-bottom: 0;
}

.byf-app-redesign .settings-dashboard .general-settings-card--previews > div,
.byf-app-redesign .settings-dashboard .general-settings-card--versions > div {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.byf-app-redesign .settings-dashboard .general-settings-card--previews input,
.byf-app-redesign .settings-dashboard .general-settings-card--versions input {
    width: 90px !important;
    margin: 0 !important;
}

.byf-app-redesign .settings-dashboard .general-settings-card--filenames {
    grid-column: auto;
}

.byf-app-redesign .settings-dashboard .general-settings-paired-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    min-width: 0;
}

.byf-app-redesign .settings-dashboard .general-settings-card--filenames > .date-settings-groups {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 4px 0 0 !important;
    border-bottom: 0;
}

.byf-app-redesign .settings-dashboard .date-settings-group {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--byf20-color-e2e8f0);
    border-radius: 10px;
    background: #fff;
}

.byf-app-redesign .settings-dashboard .date-settings-group__heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 13px;
}

.byf-app-redesign .settings-dashboard .date-settings-group__copy {
    min-width: 0;
    flex: 1 1 auto;
}

.byf-app-redesign .settings-dashboard .date-settings-group__icon {
    display: inline-flex;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--byf20-color-f1f5f9);
    color: var(--byf-redesign-primary);
    font-size: 15px;
}

.byf-app-redesign .settings-dashboard .date-settings-group__heading h4 {
    margin: 0 0 2px;
    color: var(--byf20-color-0f172a);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}

.byf-app-redesign .settings-dashboard .date-settings-group__heading p {
    margin: 0;
    color: var(--byf20-color-64748b);
    font-size: 12px;
    line-height: 1.4;
}

.byf-app-redesign .settings-dashboard .date-settings-controls {
    display: grid;
    grid-template-columns: minmax(120px, .65fr) minmax(180px, 1fr);
    gap: 10px;
}

.byf-app-redesign .settings-dashboard .date-setting-control {
    min-width: 0;
}

.byf-app-redesign .settings-dashboard .date-setting-control label {
    display: block;
    margin: 0 0 5px;
    color: var(--byf20-color-334155);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}

.byf-app-redesign .settings-dashboard .general-settings-card--filenames .date-setting-control select {
    width: 100% !important;
    margin: 0 !important;
}

.byf-app-redesign .settings-dashboard .date-settings-result {
    display: flex;
    min-width: max-content;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
    padding: 7px 9px;
    border-radius: 8px;
    background: var(--byf20-color-f8fafc);
    color: var(--byf20-color-64748b);
    font-size: 12px;
}

.byf-app-redesign .settings-dashboard .date-settings-result strong {
    color: var(--byf20-color-0f172a);
    font-size: 13px;
    font-weight: 700;
}

.byf-app-redesign .settings-dashboard .general-settings-card--folderrules > div {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.byf-app-redesign .settings-dashboard .general-settings-card--folderrules .switch {
    margin: 0;
}

.byf-app-redesign .settings-dashboard .general-settings-card--folderrules select {
    grid-column: 2;
    width: min(160px, 100%) !important;
    margin: 2px 0 0 !important;
}

.byf-app-redesign .settings-dashboard .general-settings-card--folderrules > .folderrule-setting-row--separator {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.byf-app-redesign .settings-dashboard .folderrule-setting-row__toggle {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.byf-app-redesign .settings-dashboard .general-settings-card--folderrules > .folderrule-setting-row--separator select {
    grid-column: auto;
    width: 90px !important;
    min-height: 34px;
    margin: 0 0 0 4px !important;
}

.byf-app-redesign .settings-dashboard .general-settings-card .text-blue {
    color: var(--byf20-color-334155) !important;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}

@media (max-width: 991.98px) {
    .byf-app-redesign .settings-dashboard .general-settings-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .byf-app-redesign .settings-dashboard .general-settings-card__help {
        min-height: 0;
    }

    .byf-app-redesign .settings-dashboard .general-settings-card--filenames > .date-settings-groups {
        grid-template-columns: minmax(0, 1fr);
    }

    .byf-app-redesign .settings-dashboard .general-settings-paired-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
    .byf-app-redesign .settings-dashboard .general-settings-grid .general-settings-card {
        padding: 18px !important;
    }

    .byf-app-redesign .settings-dashboard .general-settings-card--previews > div,
    .byf-app-redesign .settings-dashboard .general-settings-card--versions > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 7px;
    }

    .byf-app-redesign .settings-dashboard .general-settings-card--previews input,
    .byf-app-redesign .settings-dashboard .general-settings-card--versions input {
        width: 100% !important;
    }

    .byf-app-redesign .settings-dashboard .date-settings-controls {
        grid-template-columns: minmax(0, 1fr);
    }

    .byf-app-redesign .settings-dashboard .date-settings-group__heading {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .byf-app-redesign .settings-dashboard .date-settings-result {
        width: calc(100% - 44px);
        justify-content: space-between;
        margin: 2px 0 0 44px;
    }

    .byf-app-redesign .settings-dashboard .general-settings-card--folderrules > .folderrule-setting-row--separator {
        align-items: center;
    }
}

.byf-app-redesign .settings-dashboard .form-control,
.byf-app-redesign .settings-dashboard select.form-control {
    min-height: 40px;
    border: 1px solid var(--byf-redesign-control-border) !important;
    border-radius: var(--byf-redesign-control-radius) !important;
    background: var(--byf-redesign-control-bg) !important;
    color: var(--byf20-color-0f172a);
    font-size: 13px;
    font-weight: 500;
    box-shadow: none;
}

.byf-app-redesign .settings-dashboard .form-control:focus {
    outline: 0 !important;
    border-color: var(--byf-redesign-control-border) !important;
    box-shadow: none !important;
}

.byf-app-redesign .settings-dashboard .btn,
.byf-app-redesign .settings-dashboard .btn-add,
.byf-app-redesign .settings-dashboard .btn-secondary {
    display: inline-flex;
    width: auto !important;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

.byf-app-redesign .settings-dashboard .btn-add,
.byf-app-redesign .settings-dashboard .btn-primary,
.byf-app-redesign .settings-dashboard .btn-secondary {
    border-color: var(--byf-redesign-primary) !important;
    background: var(--byf-redesign-primary) !important;
    color: var(--byf-redesign-primary-foreground) !important;
}

.byf-app-redesign .settings-dashboard .btn-add:hover,
.byf-app-redesign .settings-dashboard .btn-primary:hover,
.byf-app-redesign .settings-dashboard .btn-secondary:hover {
    border-color: var(--byf-redesign-primary-hover) !important;
    background: var(--byf-redesign-primary-hover) !important;
    color: var(--byf-redesign-primary-foreground) !important;
}

.byf-app-redesign .settings-dashboard .btn.form-control,
.byf-app-redesign .settings-dashboard .btn-add.form-control {
    width: 100% !important;
}

.byf-app-redesign .settings-dashboard .account-settings-card--defaults .applydefaults {
    width: auto !important;
}

.byf-app-redesign .settings-dashboard .changesort,
.byf-app-redesign .settings-dashboard .changeview {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: var(--byf20-color-64748b) !important;
    text-decoration: none;
}

.byf-app-redesign .settings-dashboard .changesort.active,
.byf-app-redesign .settings-dashboard .changeview.active {
    background: var(--byf20-color-e7f0ff);
    color: var(--byf20-color-0f172a) !important;
}

.byf-app-redesign .settings-dashboard .changesort:hover,
.byf-app-redesign .settings-dashboard .changeview:hover {
    color: var(--byf-redesign-primary) !important;
}

.byf-app-redesign .settings-dashboard .account-default-control-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.byf-app-redesign .settings-dashboard .account-default-sort-dropdown {
    position: relative;
}

.byf-app-redesign .settings-dashboard .account-default-sort-trigger {
    display: inline-flex;
    min-width: 176px;
    min-height: 40px;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid var(--byf-redesign-border);
    border-radius: 999px;
    background: var(--byf-redesign-card);
    color: var(--byf-redesign-foreground) !important;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
}

.byf-app-redesign .settings-dashboard .account-default-sort-trigger i {
    flex: 0 0 16px;
    font-size: 16px;
    text-align: center;
}

.byf-app-redesign .settings-dashboard .account-default-sort-trigger span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.byf-app-redesign .settings-dashboard .account-default-sort-trigger:hover,
.byf-app-redesign .settings-dashboard .account-default-sort-trigger.show {
    background: var(--byf-redesign-muted);
    color: var(--byf-redesign-foreground) !important;
}

.byf-app-redesign .settings-dashboard .account-default-sort-menu {
    min-width: 190px !important;
    padding: 6px !important;
    border: 1px solid var(--byf-redesign-border);
    border-radius: var(--byf-redesign-radius-sm);
    background: var(--byf-redesign-card);
    box-shadow: var(--byf-redesign-shadow-md);
}

.byf-app-redesign .settings-dashboard .account-settings-card--defaults .account-default-sort-menu .dropdown-item.changesort {
    display: flex !important;
    width: 100% !important;
    min-height: 34px !important;
    height: auto;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px;
    margin: 0 !important;
    padding: 0 10px !important;
    border-radius: var(--byf-redesign-radius-sm);
    background: transparent;
    color: var(--byf-redesign-muted-foreground) !important;
    font-size: 12px !important;
    font-weight: 600;
}

.byf-app-redesign .settings-dashboard .account-default-sort-menu .dropdown-item.changesort i {
    width: 16px;
    flex: 0 0 16px;
    color: inherit !important;
    font-size: 16px;
    text-align: center;
}

.byf-app-redesign .settings-dashboard .account-settings-card--defaults .account-default-sort-menu .dropdown-item.changesort:hover,
.byf-app-redesign .settings-dashboard .account-settings-card--defaults .account-default-sort-menu .dropdown-item.changesort.active {
    background: var(--byf-redesign-muted);
    color: var(--byf-redesign-foreground) !important;
}

.byf-app-redesign .settings-dashboard .account-default-view-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border-radius: 999px;
    background: var(--byf-redesign-muted);
}

.byf-app-redesign .settings-dashboard .account-settings-card--defaults .account-default-view-switch .changeview {
    display: inline-flex;
    width: 28px;
    min-width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    border-radius: 999px;
    background: transparent;
    color: var(--byf-redesign-muted-foreground) !important;
}

.byf-app-redesign .settings-dashboard .account-default-view-switch .changeview i {
    font-size: 16px;
}

.byf-app-redesign .settings-dashboard .account-settings-card--defaults .account-default-view-switch .changeview:hover,
.byf-app-redesign .settings-dashboard .account-settings-card--defaults .account-default-view-switch .changeview.active {
    background: var(--byf-redesign-card);
    color: var(--byf-redesign-foreground) !important;
}

.byf-app-redesign .settings-dashboard .table-responsive-sm,
.byf-app-redesign .settings-dashboard .table-responsive-lg,
.byf-app-redesign .settings-dashboard .table-responsive {
    border: 1px solid var(--byf20-color-e2e8f0);
    border-radius: 14px;
    background: var(--byf20-color-ffffff);
    overflow: hidden;
}

.byf-app-redesign .settings-dashboard .table {
    margin: 0;
    color: var(--byf20-color-334155);
    font-size: 13px;
}

.byf-app-redesign .settings-dashboard .table th {
    border-top: 0;
    border-bottom: 1px solid var(--byf20-color-e2e8f0);
    background: var(--byf20-color-f8fafc);
    color: var(--byf20-color-64748b);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.byf-app-redesign .settings-dashboard .table td {
    border-top: 1px solid var(--byf20-color-e2e8f0);
    vertical-align: middle;
}

.byf-app-redesign .settings-dashboard .table tbody tr:hover {
    background: var(--byf20-color-f8fafc);
}

.byf-app-redesign .settings-dashboard .list-actions,
.byf-app-redesign .settings-dashboard .user-actions {
    white-space: nowrap;
    text-align: right;
}

.byf-app-redesign .settings-dashboard .list-actions a,
.byf-app-redesign .settings-dashboard .user-actions a,
.byf-app-redesign .settings-dashboard .icon-link {
    color: var(--byf20-color-334155) !important;
}

.byf-app-redesign .settings-dashboard .table .list-actions a,
.byf-app-redesign .settings-dashboard .table .list-actions button,
.byf-app-redesign .settings-dashboard .table .user-actions a,
.byf-app-redesign .settings-dashboard .table .user-actions button {
    display: inline-flex;
    min-width: 28px;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    color: var(--byf20-color-334155) !important;
    font-size: 16px !important;
    line-height: 1;
}

.byf-app-redesign .settings-dashboard .table .list-actions i,
.byf-app-redesign .settings-dashboard .table .user-actions i {
    color: inherit !important;
    font-size: 16px !important;
    line-height: 1 !important;
    opacity: 1;
    transform: none !important;
}

.byf-app-redesign .settings-dashboard .table .list-actions .active,
.byf-app-redesign .settings-dashboard .table .user-actions .active,
.byf-app-redesign .settings-dashboard .table .list-actions .active i,
.byf-app-redesign .settings-dashboard .table .user-actions .active i {
    color: var(--byf20-color-0f172a) !important;
}

.byf-app-redesign .settings-dashboard .table .list-actions .inactive,
.byf-app-redesign .settings-dashboard .table .user-actions .inactive,
.byf-app-redesign .settings-dashboard .table .list-actions .disabled,
.byf-app-redesign .settings-dashboard .table .user-actions .disabled,
.byf-app-redesign .settings-dashboard .table .list-actions [disabled],
.byf-app-redesign .settings-dashboard .table .user-actions [disabled],
.byf-app-redesign .settings-dashboard .table .list-actions [aria-disabled="true"],
.byf-app-redesign .settings-dashboard .table .user-actions [aria-disabled="true"],
.byf-app-redesign .settings-dashboard .table .list-actions .text-grey,
.byf-app-redesign .settings-dashboard .table .user-actions .text-grey {
    color: var(--byf20-color-94a3b8) !important;
    font-size: 16px !important;
    opacity: 1 !important;
}

.byf-app-redesign .settings-dashboard .list-actions a:hover,
.byf-app-redesign .settings-dashboard .user-actions a:hover,
.byf-app-redesign .settings-dashboard .icon-link:hover {
    color: var(--byf-redesign-primary) !important;
}

.byf-app-redesign .settings-dashboard :is(a, button, [role="button"]):has(> :is(i.fa-trash, i.fa-trash-alt, i.fa-trash-can)):hover,
.byf-app-redesign .settings-dashboard :is(a, button, [role="button"]):has(> :is(i.fa-trash, i.fa-trash-alt, i.fa-trash-can)):hover > :is(i.fa-trash, i.fa-trash-alt, i.fa-trash-can),
.byf-app-redesign .settings-dashboard :is(i.fa-trash, i.fa-trash-alt, i.fa-trash-can):hover {
    color: #dc2626 !important;
}

.byf-app-redesign .settings-dashboard .search-filters,
.byf-app-redesign .settings-dashboard .tags-info,
.byf-app-redesign .settings-dashboard .subscription-container,
.byf-app-redesign .settings-dashboard .folderrules-container {
    color: var(--byf20-color-334155);
}

.byf-app-redesign .settings-dashboard .search-filters h3,
.byf-app-redesign .settings-dashboard .tab-pane h3 {
    color: var(--byf20-color-0f172a);
    font-size: 16px;
    font-weight: 800;
}

.byf-app-redesign .settings-dashboard .text-blue,
.byf-app-redesign .settings-dashboard .brand-color {
    color: var(--byf20-color-64748b) !important;
}

@media (max-width: 1499.98px) {
    .byf-app-redesign .settings-dashboard .tabzone-lr > .tabs {
        overflow: visible;
    }

    .byf-app-redesign .settings-dashboard .settings-dashboard-nav {
        display: grid;
        width: max-content !important;
        grid-template-columns: repeat(5, max-content);
        gap: 2px;
    }

    .byf-app-redesign .settings-dashboard .account-settings-card--account {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: max-content;
        align-content: start;
        gap: 12px;
    }
}

@media (max-width: 1199.98px) {
    .byf-app-redesign #workspace.settings-dashboard {
        padding: 12px 16px 32px !important;
    }

    .byf-app-redesign .settings-dashboard .settings-dashboard-nav .dashboard-switch__item {
        min-height: 30px;
        padding: 0 12px !important;
    }

    .byf-app-redesign .settings-dashboard .settings-dashboard-nav {
        grid-template-columns: repeat(4, max-content);
    }

    .byf-app-redesign .settings-dashboard .tab-pane {
        padding: 16px 18px 20px !important;
    }

    .byf-app-redesign .settings-dashboard .form-group > label,
    .byf-app-redesign .settings-dashboard .form-group > h3 {
        flex-basis: 170px;
        max-width: 170px;
    }

    .byf-app-redesign .settings-dashboard .account-settings-card--account {
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: max-content;
        height: auto;
        min-height: 0;
        align-content: start;
        gap: 12px;
    }

    .byf-app-redesign .settings-dashboard .account-settings-card--account > .form-group > label,
    .byf-app-redesign .settings-dashboard .account-settings-card--account > .form-group > h3,
    .byf-app-redesign .settings-dashboard .account-settings-card--account > .form-group > div[class*="col-"] {
        flex: 0 0 auto;
        flex-basis: auto;
        max-width: none;
    }

    .byf-app-redesign .settings-dashboard .account-settings-card--outlook {
        grid-template-columns: minmax(0, 1fr);
    }

    .byf-app-redesign .settings-dashboard .account-outlook-section {
        grid-column: 1;
    }

    .byf-app-redesign .settings-dashboard .account-settings-grid > .account-settings-card {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        align-self: start;
    }
}

@media (max-width: 767.98px) {
    .byf-app-redesign #workspace.settings-dashboard {
        padding: 10px 12px 28px !important;
    }

    .byf-app-redesign .settings-dashboard .settings-dashboard-nav {
        width: 100% !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
    }

    .byf-app-redesign .settings-dashboard .settings-dashboard-nav .nav-item,
    .byf-app-redesign .settings-dashboard .settings-dashboard-nav .dashboard-switch__item {
        width: 100% !important;
    }

    .byf-app-redesign .settings-dashboard .settings-dashboard-nav .dashboard-switch__item {
        gap: 7px;
        padding: 0 10px !important;
        font-size: 12px;
    }

    .byf-app-redesign .settings-dashboard .settings-dashboard-nav .dashboard-switch__icon {
        font-size: 13px;
    }

    .byf-app-redesign .settings-dashboard .tab-pane {
        padding: 14px 14px 18px !important;
    }

    .byf-app-redesign .settings-dashboard .account-settings-grid > .account-settings-card {
        padding: 18px !important;
    }

    .byf-app-redesign .settings-dashboard .account-settings-card--account {
        grid-auto-rows: max-content;
        height: auto;
        min-height: 0;
        gap: 10px;
        align-content: start;
    }

    .byf-app-redesign .settings-dashboard .form-group {
        align-items: flex-start;
    }

    .byf-app-redesign .settings-dashboard .form-group > label,
    .byf-app-redesign .settings-dashboard .form-group > h3,
    .byf-app-redesign .settings-dashboard .form-group > div[class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
        padding-right: 0;
    }

    .byf-app-redesign .settings-dashboard .form-group > label {
        padding-bottom: 6px;
    }

    .byf-app-redesign .settings-dashboard .account-settings-card--account > .form-group {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        gap: 4px;
    }

    .byf-app-redesign .settings-dashboard .account-settings-card--account > .form-group > label,
    .byf-app-redesign .settings-dashboard .account-settings-card--account > .form-group > h3,
    .byf-app-redesign .settings-dashboard .account-settings-card--account > .form-group > div[class*="col-"] {
        flex: 0 0 auto;
        flex-basis: auto;
        grid-column: 1;
        max-width: 100%;
    }

    .byf-app-redesign .settings-dashboard .account-settings-card--account > .form-group > label {
        padding-bottom: 2px;
    }

    .byf-app-redesign .settings-dashboard .account-settings-card--account > .form-group:has(button) {
        display: block;
    }

    .byf-app-redesign .settings-dashboard .account-mfa-inline {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .byf-app-redesign .settings-dashboard .account-email-control {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .byf-app-redesign .settings-dashboard .account-email-control > .form-control {
        width: 100%;
        flex: none;
    }

    .byf-app-redesign .settings-dashboard .account-settings-card--defaults .row > div[class*="col-"] {
        width: 100%;
        flex-basis: 100%;
    }
}

/* Sidebar */
.byf-app-redesign #sidebar-container {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1030;
    display: flex !important;
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    width: var(--byf-redesign-sidebar-collapsed);
    background: var(--byf-redesign-primary) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--byf-redesign-primary-foreground);
    transition: width 180ms ease;
    box-shadow: none;
    overflow: hidden;
    margin-top: unset;
}

.byf-app-redesign #sidebar-container.sidebar-expanded {
    width: var(--byf-redesign-sidebar-expanded);
}

.byf-app-redesign #sidebar-container .padding-top-80 {
    width: 100%;
    height: 100vh !important;
    min-height: 100vh;
    height: 100dvh !important;
    min-height: 100dvh;
    padding-top: 0 !important;
}

.byf-app-redesign #sidebar-container .sidemenu-left {
    min-height: 0;
    height: 100%;
    min-height: 100%;
    padding: 12px 8px;
    overflow: hidden;
}

.byf-app-redesign #sidebar-container .sidemenu-header {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding-top: 0;
}

.byf-app-redesign #sidebar-container .byf-sidebar-scroll {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: 0;
    scrollbar-width: none;
}

.byf-app-redesign #sidebar-container .byf-sidebar-scroll-wrap {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
}

.byf-app-redesign #sidebar-container .byf-sidebar-scroll-wrap::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    height: 42px;
    background: linear-gradient(to bottom, rgba(47, 126, 207, 0), var(--byf-redesign-primary));
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease;
}

.byf-app-redesign #sidebar-container .byf-sidebar-scroll-wrap.has-sidebar-overflow:not(.is-sidebar-scroll-end)::after {
    opacity: 1;
}

.byf-app-redesign #sidebar-container .byf-sidebar-scroll-wrap.has-sidebar-overflow:not(.is-sidebar-scroll-end) .byf-sidebar-scroll {
    padding-bottom: 34px;
}

.byf-app-redesign #sidebar-container .byf-sidebar-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.byf-app-redesign #sidebar-container .byf-sidebar-scroll::-webkit-scrollbar-thumb,
.byf-app-redesign #sidebar-container .byf-sidebar-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.byf-app-redesign .byf-sidebar-brand {
    flex: 0 0 auto;
    margin: 0 4px 8px;
}

.byf-app-redesign .byf-sidebar-brand-controls {
    display: none;
}

.byf-app-redesign #sidebar-container.sidebar-collapsed .byf-sidebar-brand-controls--collapsed {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.byf-app-redesign .byf-sidebar-collapse-collapsed {
    display: none;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: var(--byf-redesign-radius-sm);
    background: transparent !important;
    color: rgba(255, 255, 255, 0.86) !important;
}

.byf-app-redesign .byf-sidebar-collapse-collapsed:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--byf-redesign-primary-foreground) !important;
}

.byf-app-redesign #sidebar-container .byf-sidebar-brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 68px;
    padding: 10px;
    border-radius: var(--byf-redesign-radius-sm);
    background: var(--byf-redesign-logo-background) !important;
}

.byf-app-redesign #sidebar-container .byf-sidebar-brand-logo img {
    width: 100%;
    max-width: 210px;
    max-height: 60px;
    object-fit: contain;
}

.byf-app-redesign #sidebar-container.sidebar-expanded .byf-sidebar-brand-logo {
    min-height: 68px;
}

.byf-app-redesign #sidebar-container.sidebar-collapsed .byf-sidebar-brand-logo {
    display: none;
}

.byf-app-redesign #sidebar-container.sidebar-collapsed .byf-sidebar-collapse-collapsed {
    display: inline-flex;
}

.byf-app-redesign #sidebar-container.sidebar-collapsed .byf-sidebar-brand {
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.byf-app-redesign .byf-sidebar-brand-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 4px 9px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    text-align: left;
}

.byf-app-redesign .byf-sidebar-brand-actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
}

.byf-app-redesign .byf-sidebar-brand-title {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.byf-app-redesign .byf-sidebar-brand-title {
    color: var(--byf-redesign-primary-foreground);
    font-size: 13px;
    font-weight: 800;
}

.byf-app-redesign #sidebar-container .sidemenu-userinfo {
    margin: 0 4px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--byf-redesign-primary-foreground) !important;
}

.byf-app-redesign #sidebar-container.sidebar-expanded .sidemenu-userinfo {
    background: transparent;
    padding: 7px 4px;
}

.byf-app-redesign .byf-sidebar-user {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.byf-app-redesign #sidebar-container.sidebar-collapsed .byf-sidebar-user {
    justify-content: center;
}

.byf-app-redesign .byf-sidebar-avatar {
    display: inline-flex;
    width: 42px;
    height: 42px;
    min-width: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--byf-redesign-primary-foreground);
    font-size: 13px;
    font-weight: 700;
}

.byf-app-redesign .byf-sidebar-avatar span {
    line-height: 1;
}

.byf-app-redesign #sidebar-container .sidemenu-userinfo p {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--byf-redesign-primary-foreground);
}

.byf-app-redesign .byf-sidebar-user-text {
    min-width: 0;
}

.byf-app-redesign .byf-sidebar-user-text span {
    display: block;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.72);
    font-size: 11px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.byf-app-redesign .sidemenu-userinfo {
    height: 70px !important;
}
.byf-app-redesign #sidebar-container a {
    height: 40px !important;
}
.byf-app-redesign #sidebar-container a.byf-sidebar-powered-link {
    background: none !important;
}
.byf-app-redesign #sidebar-container a.byf-sidebar-collapse {
    display: inline-flex;
    width: 28px;
    min-width: 28px;
    height: 28px !important;
    align-items: center;
    justify-content: center;
    border-radius: var(--byf-redesign-radius-sm);
    background: rgba(255, 255, 255, 0.09) !important;
    color: rgba(255, 255, 255, 0.76) !important;
}

.byf-app-redesign #sidebar-container.sidebar-collapsed a.byf-sidebar-collapse-collapsed {
    width: 28px;
    min-width: 28px;
    height: 28px !important;
    background: transparent !important;
}

.byf-app-redesign #sidebar-container.sidebar-collapsed a.byf-sidebar-collapse-collapsed:hover,
.byf-app-redesign #sidebar-container.sidebar-collapsed a.byf-sidebar-collapse-collapsed:focus-visible {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--byf-redesign-primary-foreground) !important;
}

.byf-app-redesign .byf-panel-left-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 16px;
    line-height: 1;
}

.byf-app-redesign .byf-sidebar-collapse:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: var(--byf-redesign-primary-foreground) !important;
}

.byf-app-redesign #sidebar-container .list-group-item,
.byf-app-redesign #mySidenav .list-group-item {
    min-height: 40px;
    margin: 0 0 3px;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--byf-redesign-radius-sm);
    background: transparent !important;
    color: var(--byf-redesign-primary-foreground) !important;
    font-size: 13px;
    font-weight: 600;
    transition: background 160ms ease, color 160ms ease;
}

.byf-app-redesign .byf-sidebar-primary {
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.byf-app-redesign.mainnav-topbar .byf-sidebar-primary {
    display: none;
}

.byf-app-redesign.mainnav-topbar .byf-sidebar-management {
    padding-top: 0;
}

.byf-app-redesign .byf-sidebar-work-group {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0 0 8px;
    padding: 10px 8px 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.byf-app-redesign .byf-sidebar-section-label {
    position: relative;
    display: flex;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    width: 100%;
    padding: 0 7px 6px;
    text-align: center;
    color: rgba(255, 255, 255, 0.74);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}

.byf-app-redesign .byf-mainnav-mode-switch--sidebar {
    width: 28px;
    min-width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
}

.byf-app-redesign .byf-mainnav-mode-switch--sidebar:hover {
    background: rgba(255, 255, 255, 0.18);
    color: var(--byf-redesign-primary-foreground);
}

.byf-app-redesign .byf-sidebar-section-label::after {
    content: none;
}

.byf-app-redesign .byf-sidebar-work-group .list-group-item {
    margin-bottom: 2px;
    background: rgba(255, 255, 255, 0.03) !important;
}

.byf-app-redesign .byf-sidebar-work-group .list-group-item:hover {
    background: rgba(255, 255, 255, 0.16) !important;
}

.byf-app-redesign .byf-sidebar-work-group .list-group-item.active {
    background: rgba(255, 255, 255, 0.24) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}

.byf-app-redesign #sidebar-container.sidebar-collapsed .byf-sidebar-work-group {
    align-items: center;
    margin-right: 0;
    margin-left: 0;
    padding: 7px 6px;
    border-radius: 14px;
}

.byf-app-redesign #sidebar-container.sidebar-collapsed .byf-sidebar-section-label {
    display: none;
}

.byf-app-redesign #sidebar-container.sidebar-collapsed .byf-sidebar-work-group .list-group-item {
    width: 40px;
    justify-content: center;
    padding-right: 8px;
    padding-left: 8px;
}

.byf-app-redesign #sidebar-container.sidebar-collapsed .byf-sidebar-work-group .menu-item-left {
    margin-right: 0 !important;
}

.byf-app-redesign .byf-sidebar-management {
    padding-top: 6px;
}

.byf-app-redesign #sidebar-container.sidebar-expanded .byf-sidebar-management {
    margin: 10px 0 4px 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.045);
}

.byf-app-redesign #sidebar-container.sidebar-expanded .byf-management-toggle {
    min-height: 40px;
    margin: 0;
    padding: 8px 9px;
    background: rgba(255, 255, 255, 0.07) !important;
    font-weight: 750;
}

.byf-app-redesign #sidebar-container.sidebar-expanded .byf-management-toggle:hover,
.byf-app-redesign #sidebar-container.sidebar-expanded .byf-management-toggle[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.14) !important;
}

.byf-app-redesign #sidebar-container.sidebar-expanded .byf-sidebar-management #byfSidebarManagement {
    margin: 4px 0 2px 0;
    padding: 4px 5px 2px 5px;
}

.byf-app-redesign .byf-sidebar-management #byfSidebarManagement .list-group-item {
    min-height: 38px;
    padding-top: 7px;
    padding-bottom: 7px;
    opacity: 0.92;
}

.byf-app-redesign #sidebar-container.sidebar-expanded .byf-sidebar-management #byfSidebarManagement .list-group-item {
    min-height: 34px;
    margin-bottom: 2px;
    padding: 6px 8px;
    border-radius: 7px;
    background: transparent !important;
    font-size: 12px;
}

.byf-app-redesign #sidebar-container.sidebar-expanded .byf-sidebar-management #byfSidebarManagement .list-group-item:hover {
    background: rgba(255, 255, 255, 0.11) !important;
}

.byf-app-redesign #sidebar-container.sidebar-expanded .byf-sidebar-management #byfSidebarManagement .list-group-item.active {
    background: rgba(255, 255, 255, 0.19) !important;
}

.byf-app-redesign #sidebar-container.sidebar-collapsed .byf-sidebar-management #byfSidebarManagement {
    position: static;
    width: auto;
    max-height: none;
    overflow: visible;
    padding: 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.byf-app-redesign #sidebar-container.sidebar-collapsed .byf-sidebar-management #byfSidebarManagement:not(.show) {
    display: none;
}

.byf-app-redesign #sidebar-container.sidebar-collapsed .byf-sidebar-management #byfSidebarManagement.show {
    display: block;
}

.byf-app-redesign #sidebar-container.sidebar-collapsed .byf-sidebar-management #byfSidebarManagement .list-group-item {
    margin-left: 0;
    justify-content: center;
    width: 40px;
    min-height: 32px;
    margin-right: auto;
    margin-left: auto;
    padding: 4px;
}

.byf-app-redesign #sidebar-container.sidebar-collapsed .byf-sidebar-management #byfSidebarManagement .menu-collapsed {
    display: none !important;
}

.byf-app-redesign #sidebar-container.sidebar-collapsed .byf-management-toggle {
    min-height: 44px;
}

.byf-app-redesign #sidebar-container.sidebar-collapsed .byf-management-toggle > div {
    flex-direction: column;
    justify-content: center !important;
    gap: 2px;
}

.byf-app-redesign #sidebar-container.sidebar-collapsed .byf-management-toggle .menu-item-left {
    margin-right: 0 !important;
}

.byf-app-redesign #sidebar-container.sidebar-collapsed .byf-management-chevron {
    display: inline-flex !important;
    width: 100%;
    height: 10px;
    margin-left: 0;
    justify-content: center;
    font-size: 9px;
}

.byf-app-redesign .byf-management-chevron {
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
    color: rgba(255, 255, 255, 0.7);
}

.byf-app-redesign .byf-management-chevron i {
    transform: rotate(0deg);
    transition: transform 160ms ease;
}

.byf-app-redesign .byf-management-toggle[aria-expanded="true"] .byf-management-chevron i {
    transform: rotate(180deg);
}

.byf-app-redesign .byf-management-toggle > div {
    gap: 0;
}

.byf-app-redesign .byf-menu-icon-alert {
    position: relative;
}

.byf-app-redesign .byf-menu-warning {
    position: absolute;
    right: -5px;
    bottom: -4px;
    color: #fbbf24 !important;
    font-size: 10px !important;
    filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.28));
}

.byf-app-redesign #sidebar-container.sidebar-expanded .byf-menu-icon-alert,
.byf-app-redesign #mySidenav .byf-menu-icon-alert {
    position: static;
}

.byf-app-redesign #sidebar-container.sidebar-expanded .byf-menu-warning,
.byf-app-redesign #mySidenav .byf-menu-warning {
    top: 50%;
    right: 0;
    bottom: auto;
    transform: translateY(-50%);
}

.byf-app-redesign #sidebar-container.sidebar-collapsed .list-group-item {
    justify-content: center;
}

.byf-app-redesign #sidebar-container .list-group-item > div,
.byf-app-redesign #mySidenav .list-group-item > div {
    min-width: 0;
    position: relative;
}

.byf-app-redesign #sidebar-container .list-group-item:hover,
.byf-app-redesign #sidebar-container .list-group-item.active,
.byf-app-redesign #mySidenav .list-group-item:hover,
.byf-app-redesign #mySidenav .list-group-item.active {
    background: rgba(255, 255, 255, 0.14) !important;
    color: var(--byf-redesign-primary-foreground) !important;
}

.byf-app-redesign #sidebar-container .list-group-item:hover *,
.byf-app-redesign #sidebar-container .list-group-item.active *,
.byf-app-redesign #mySidenav .list-group-item:hover *,
.byf-app-redesign #mySidenav .list-group-item.active * {
    color: var(--byf-redesign-primary-foreground) !important;
}

.byf-app-redesign #sidebar-container .menu-item-left,
.byf-app-redesign #mySidenav .menu-item-left {
    display: inline-flex;
    position: relative;
    width: 24px;
    min-width: 24px;
    justify-content: center;
    margin-right: 10px !important;
    color: currentColor;
    order: 1;
}

.byf-app-redesign #sidebar-container.sidebar-collapsed .menu-item-left {
    margin-right: 0 !important;
}

.byf-app-redesign #sidebar-container .menu-item-left i,
.byf-app-redesign #mySidenav .menu-item-left i {
    font-size: 16px;
    color: currentColor !important;
}

.byf-app-redesign #sidebar-container .menu-collapsed,
.byf-app-redesign #mySidenav .menu-collapsed {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    order: 2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.byf-app-redesign #sidebar-container .amount,
.byf-app-redesign #mySidenav .amount,
.byf-app-redesign .navbar-custom .amount {
    min-width: 16px;
    height: 16px;
    padding: 0 5px !important;
    border-radius: 999px;
    background: #ef4444 !important;
    color: #fff !important;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
}

.byf-app-redesign #sidebar-container .list-group-item .amount {
    position: absolute !important;
    top: 3px !important;
    left: 28px !important;
    z-index: 3;
    min-width: 14px;
    height: 14px;
    padding: 0 4px !important;
    font-size: 9px;
    line-height: 14px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.28);
}

.byf-app-redesign #sidebar-container.sidebar-expanded .list-group-item .amount,
.byf-app-redesign #mySidenav .list-group-item .amount {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    display: inline-flex;
    order: 3;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 18px;
    height: 16px;
    margin-left: auto !important;
    padding: 0 6px !important;
    font-size: 10px;
    line-height: 16px;
    box-shadow: none;
}

.byf-app-redesign #sidebar-container.sidebar-collapsed .list-group-item .amount {
    top: -5px !important;
    left: 17px !important;
    width: 8px !important;
    min-width: 8px !important;
    height: 8px !important;
    padding: 0 !important;
    overflow: hidden;
    color: transparent !important;
    font-size: 0;
    line-height: 0;
    text-indent: -999px;
    box-shadow: 0 0 0 2px var(--byf-redesign-primary), 0 1px 3px rgba(15, 23, 42, 0.28);
}

.byf-app-redesign #sidebar-container .sidemenu-footer {
    flex: 0 0 auto;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.byf-app-redesign #sidebar-container .byf-sidebar-footer-scroll-items {
    margin-top: auto;
    padding-bottom: 4px;
}

.byf-app-redesign #sidebar-container .byf-sidebar-footer-fixed {
    margin-top: 0;
    padding-top: 6px;
    border-top: 0;
}

.byf-app-redesign #sidebar-container .byf-sidebar-scroll-indicator {
    position: absolute;
    left: 50%;
    bottom: 7px;
    z-index: 3;
    display: none;
    width: 46px;
    height: 20px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
    transform: translateX(-50%);
    pointer-events: none;
}

.byf-app-redesign #sidebar-container .byf-sidebar-scroll-indicator::before {
    content: none;
}

.byf-app-redesign #sidebar-container .byf-sidebar-scroll-indicator i {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: transparent;
    color: var(--byf-redesign-primary-foreground) !important;
    font-size: 10px;
    line-height: 1;
    animation: byfSidebarScrollHint 1.25s ease-in-out infinite;
}

.byf-app-redesign #sidebar-container .byf-sidebar-scroll-wrap.has-sidebar-overflow:not(.is-sidebar-scroll-end) .byf-sidebar-scroll-indicator {
    display: flex;
}

@keyframes byfSidebarScrollHint {
    0%,
    100% {
        transform: translateY(-2px);
    }
    50% {
        transform: translateY(3px);
    }
}

.byf-app-redesign #sidebar-container .logout,
.byf-app-redesign #mySidenav .logout {
    background: rgba(255, 255, 255, 0.1) !important;
}

.byf-app-redesign .byf-sidebar-powered {
    margin: 8px 8px 0;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
}

.byf-app-redesign #sidebar-container a.byf-sidebar-powered-link {
    display: flex;
    width: fit-content;
    height: auto !important;
    min-height: 0;
    margin: 3px auto 0;
    justify-content: center;
    border-radius: var(--byf-redesign-radius-sm);
    color: rgba(255, 255, 255, 0.86) !important;
    transition: opacity 160ms ease;
}

.byf-app-redesign #sidebar-container a.byf-sidebar-powered-link:hover {
    opacity: 0.8;
}

.byf-app-redesign .byf-sidebar-powered img {
    height: 20px;
    width: auto;
    object-fit: contain;
    opacity: 0.9;
}

.byf-app-redesign #sidebar-container.sidebar-collapsed .sidemenu-spacer {
    display: none;
}

/* Mobile sidebar */
.byf-app-redesign .open-onscroll {
    right: 14px;
    top: 10px;
    z-index: 1040;
    width: 40px;
    height: 40px;
    border-radius: var(--byf-redesign-radius-sm);
    background: var(--byf-redesign-card);
    border: 1px solid var(--byf-redesign-border);
    box-shadow: var(--byf-redesign-shadow-sm);
}

.byf-app-redesign .open-onscroll i {
    font-size: 18px;
    color: var(--byf-redesign-foreground);
}

.byf-app-redesign #mySidenav {
    background: var(--byf-redesign-primary) !important;
    color: var(--byf-redesign-primary-foreground);
}

.byf-app-redesign #mySidenav .closebtn {
    color: var(--byf-redesign-primary-foreground);
}

/* Toolbar and breadcrumbs */
.byf-app-redesign .byf-redesign-toolbar-stack {
    display: flex;
    width: 100%;
    flex: 0 0 auto !important;
    flex-direction: column;
    align-self: stretch;
    min-width: 0;
    min-height: 0;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 90;
    isolation: isolate;
    container: byf-toolbar / inline-size;
}

/* Keep scrolled file items behind the complete sticky toolbar surface. The
 * negative inset also covers the workspace padding while the toolbar sticks. */
.byf-app-redesign .byf-redesign-toolbar-stack::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -32px;
    right: -32px;
    bottom: 0;
    left: -32px;
    pointer-events: none;
    background: var(--byf-redesign-bg) !important;
}

.byf-app-redesign .byf-redesign-toolbar-stack > * {
    position: relative;
    z-index: 1;
}

.byf-app-redesign .byf-redesign-toolbar-stack .previewactionbar {
    flex: 0 0 auto !important;
    width: 100%;
    align-self: stretch;
    position: relative !important;
    top: auto !important;
    z-index: auto;
}

.byf-app-redesign .previewactionbar {
    margin: 0 0 18px !important;
    padding: 0 !important;
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 0 !important;
    z-index: 80;
    border: 0 !important;
}

.byf-app-redesign .previewactionbar > .disableselectable {
    min-height: 48px;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--byf-redesign-border);
    border-radius: var(--byf-redesign-radius);
    background: var(--byf-redesign-card);
    box-shadow: var(--byf-redesign-shadow-sm);
}

/* Keep the preview host as wide as the workspace while PDF.js preserves the
 * document's own aspect ratio and centers each page inside the viewer. */
.byf-app-redesign #preview_container {
    width: 100%;
    max-width: none;
    min-width: 0;
    flex: 1 1 auto !important;
}

.byf-app-redesign #preview_container > #content {
    display: flex;
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    background: none !important;
}

.byf-app-redesign #preview_container #pdfpreviewzone.d-flex {
    display: flex !important;
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
}

.byf-app-redesign #preview_container #pdfpreviewzone > #outerContainer {
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
}

.byf-app-redesign .breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.byf-app-redesign .byf-redesign-toolbar-title {
    display: inline-flex;
    min-width: 0;
    min-height: 28px;
    align-items: center;
    color: var(--byf-redesign-foreground);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}

.byf-app-redesign .previewactionbar nav,
.byf-app-redesign .previewactionbar ol {
    min-width: 0;
    max-width: 100%;
}

.byf-app-redesign .previewactionbar ol.breadcrumb {
    width: 100%;
    flex-wrap: wrap;
    row-gap: 6px;
    overflow: visible;
}

.byf-app-redesign .previewactionbar #history,
.byf-app-redesign .previewactionbar #camerarollicon,
.byf-app-redesign .previewactionbar #briefcaseicon {
    display: inline-flex;
    height: 28px;
    align-items: center;
}

.byf-app-redesign .previewactionbar #history .nav-item,
.byf-app-redesign .previewactionbar #history .nav-link {
    display: inline-flex;
    height: 28px;
    align-items: center;
    padding: 0 !important;
}

.byf-app-redesign .breadcrumb-item,
.byf-app-redesign .breadcrumb-item a,
.byf-app-redesign .breadcrumb-item-link,
.byf-app-redesign .crumb-toggle {
    color: var(--byf-redesign-muted-foreground) !important;
    font-weight: 600;
}

.byf-app-redesign .breadcrumb-item.active,
.byf-app-redesign .breadcrumb-item.active a,
.byf-app-redesign .filecrumbitem {
    color: var(--byf-redesign-foreground) !important;
}

.byf-app-redesign .breadcrumb-item + .breadcrumb-item::before {
    width: 6px;
    height: 6px;
    margin: 0 8px 1px 5px;
    padding: 0;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    color: var(--byf-redesign-muted-foreground);
    content: "";
    transform: rotate(-45deg);
}

.byf-app-redesign .breadcrumb-item + .breadcrumb-item {
    padding-left: 0;
}

.byf-app-redesign .nav-arrow,
.byf-app-redesign .nav-arrow-disabled,
.byf-app-redesign .previewactionbar #historytrigger,
.byf-app-redesign .previewactionbar #camerarollLink,
.byf-app-redesign .previewactionbar #briefcaselink,
.byf-app-redesign .previewactionbar .copy-link,
.byf-app-redesign .crumb-actions a,
.byf-app-redesign .file-view a,
.byf-app-redesign .search-view a,
.byf-app-redesign .mobile-crumb-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 28px;
    height: 28px;
    border-radius: var(--byf-redesign-radius-sm);
    color: var(--byf-redesign-foreground) !important;
    transition: background 160ms ease, color 160ms ease;
}

.byf-app-redesign .nav-arrow:hover,
.byf-app-redesign .previewactionbar #historytrigger:hover,
.byf-app-redesign .previewactionbar #camerarollLink:hover,
.byf-app-redesign .previewactionbar #briefcaselink:hover,
.byf-app-redesign .previewactionbar .copy-link:hover,
.byf-app-redesign .crumb-actions a:hover,
.byf-app-redesign .file-view a:hover,
.byf-app-redesign .search-view a:hover,
.byf-app-redesign .mobile-crumb-actions a:hover,
.byf-app-redesign .crumb-actions a.active,
.byf-app-redesign .file-view a.active,
.byf-app-redesign .search-view a.active {
    background: transparent;
    color: var(--byf-redesign-primary) !important;
}

.byf-app-redesign .previewactionbar .metadataflipoutlink,
.byf-app-redesign .previewactionbar .metadataflipoutlink:hover,
.byf-app-redesign .previewactionbar .metadataflipoutlink.active,
.byf-app-redesign .previewactionbar .metadataflipoutlink.active:hover {
    color: var(--byf-redesign-foreground) !important;
}

.byf-app-redesign .previewactionbar .metadataflipoutlink {
    background: var(--byf-redesign-muted);
}

.byf-app-redesign .previewactionbar .metadataflipoutlink:hover {
    background: var(--byf-redesign-muted);
}

.byf-app-redesign .nav-arrow i,
.byf-app-redesign .nav-arrow-disabled i,
.byf-app-redesign .previewactionbar #historytrigger i,
.byf-app-redesign .previewactionbar #camerarollLink i,
.byf-app-redesign .previewactionbar #briefcaselink i,
.byf-app-redesign .previewactionbar .copy-link,
.byf-app-redesign .crumb-actions i,
.byf-app-redesign .file-view i,
.byf-app-redesign .search-view i {
    margin: 0 !important;
    color: currentColor !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

.byf-app-redesign .previewactionbar #historytrigger,
.byf-app-redesign .previewactionbar #camerarollLink,
.byf-app-redesign .previewactionbar #briefcaselink {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 28px;
    min-width: 28px;
    height: 28px;
    padding: 0 !important;
}

.byf-app-redesign .previewactionbar #historytrigger i,
.byf-app-redesign .previewactionbar #camerarollLink i,
.byf-app-redesign .previewactionbar #briefcaselink i {
    display: inline-flex;
    width: 16px;
    min-width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    font-size: 16px !important;
    line-height: 1;
}

.byf-app-redesign .previewactionbar .nav-arrow,
.byf-app-redesign .previewactionbar .nav-arrow-disabled {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    background: var(--byf-redesign-muted);
}

.byf-app-redesign .previewactionbar .nav-arrow i,
.byf-app-redesign .previewactionbar .nav-arrow-disabled i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    min-width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.byf-app-redesign .previewactionbar .nav-arrow-disabled {
    opacity: 0.55;
    pointer-events: none;
}

.byf-app-redesign .previewactionbar .nav-arrow:hover {
    background: var(--byf-redesign-muted);
    color: var(--byf-redesign-primary) !important;
}

.byf-app-redesign .previewactionbar #historytrigger,
.byf-app-redesign .previewactionbar #camerarollLink,
.byf-app-redesign .previewactionbar #briefcaselink,
.byf-app-redesign .previewactionbar .byf-compact-nav-link,
.byf-app-redesign .previewactionbar .copy-link {
    position: relative;
    flex: 0 0 auto;
}

.byf-app-redesign .byf-compact-utility-controls,
.byf-app-redesign .byf-compact-nav-controls {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
}

.byf-app-redesign .previewactionbar .byf-compact-nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    min-width: 28px;
    height: 28px;
    border-radius: var(--byf-redesign-radius-sm);
    color: var(--byf-redesign-foreground) !important;
}

.byf-app-redesign .previewactionbar .byf-compact-nav-link:hover {
    color: var(--byf-redesign-primary) !important;
}

.byf-app-redesign .previewactionbar .byf-compact-nav-link i {
    margin: 0 !important;
    color: currentColor !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

.byf-app-redesign .previewactionbar .byf-compact-nav-link .amount {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    left: auto !important;
    z-index: 3;
    min-width: 14px;
    height: 14px;
    padding: 0 4px !important;
    border-radius: 999px;
    background: #ef4444 !important;
    color: #fff !important;
    font-size: 9px;
    font-weight: 700;
    line-height: 14px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.28);
}

.byf-app-redesign .previewactionbar #history,
.byf-app-redesign .previewactionbar #history .nav-item,
.byf-app-redesign .previewactionbar #historytrigger,
.byf-app-redesign .previewactionbar #camerarollicon,
.byf-app-redesign .previewactionbar #briefcaseicon {
    flex: 0 0 auto;
    margin-right: 0 !important;
}

.byf-app-redesign .previewactionbar #briefcaseicon {
    margin-right: 10px !important;
}

.byf-app-redesign .byf-crumb-dossier-icon {
    margin-right: 4px;
    color: currentColor;
    font-size: 12px;
    line-height: 1;
}

.byf-app-redesign .previewactionbar #camerarollLink .amount,
.byf-app-redesign .previewactionbar #briefcaselink .amount {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    left: auto !important;
    z-index: 3;
    min-width: 14px;
    height: 14px;
    padding: 0 4px !important;
    border-radius: 999px;
    background: #ef4444 !important;
    color: #fff !important;
    font-size: 9px;
    font-weight: 700;
    line-height: 14px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.28);
}

.byf-app-redesign .previewactionbar #history {
    margin: 0 2px 0 0 !important;
}

.byf-app-redesign .byf-crumb-row-break,
.byf-app-redesign .byf-compact-row-break {
    display: none;
}

.byf-app-redesign .previewactionbar .fullcrumb,
.byf-app-redesign .previewactionbar .filecrumbitem {
    flex: 0 0 auto;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

.byf-app-redesign .previewactionbar .filecrumbitem {
    white-space: normal;
    overflow-wrap: anywhere;
}

.byf-app-redesign .previewactionbar .crumb-actions {
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    padding-left: 12px;
}

.byf-app-redesign .previewactionbar > .disableselectable > div:first-child:not(.mobile-crumb-actions) {
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
}

.byf-app-redesign .previewactionbar > .disableselectable {
    min-width: 0;
    background: #fff !important;
}

.byf-app-redesign .previewactionbar .breadcrumb-item-link {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
}

.byf-app-redesign .previewactionbar .crumb-actions > * {
    margin-right: 0 !important;
}

.byf-app-redesign .previewactionbar .crumb-actions > .d-inline-block:has(.changesorticon) {
    display: inline-flex !important;
    align-items: center;
    margin-right: 0 !important;
}

.byf-app-redesign .previewactionbar .changesorticon {
    gap: 8px;
    min-width: 136px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--byf-redesign-border);
    border-radius: 999px;
    background: var(--byf-redesign-card);
    color: var(--byf-redesign-foreground) !important;
    font-size: 12px;
    font-weight: 600;
    box-shadow: none;
}

.byf-app-redesign .previewactionbar .changesorticon:hover,
.byf-app-redesign .previewactionbar .changesorticon.show {
    background: var(--byf-redesign-muted);
}

.byf-app-redesign .previewactionbar .changesorticon,
.byf-app-redesign .previewactionbar .changesorticon:hover,
.byf-app-redesign .previewactionbar .changesorticon.active,
.byf-app-redesign .previewactionbar .changesorticon.show,
.byf-app-redesign .previewactionbar .changesorticon .byf-redesign-sort-label {
    color: var(--byf-redesign-foreground) !important;
}

.byf-app-redesign .previewactionbar .byf-redesign-sort-label {
    display: inline !important;
    overflow: hidden;
    max-width: 104px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.byf-app-redesign .previewactionbar .file-view.dropdown-menu {
    min-width: 176px !important;
    padding: 6px !important;
    border: 1px solid var(--byf-redesign-border);
    border-radius: var(--byf-redesign-radius-sm);
    box-shadow: var(--byf-redesign-shadow-md);
}

.byf-app-redesign .previewactionbar .file-view.dropdown-menu .dropdown-divider {
    display: none;
}

.byf-app-redesign .previewactionbar .file-view.dropdown-menu .dropdown-item {
    justify-content: flex-start;
    gap: 9px;
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0 10px;
    border-radius: var(--byf-redesign-radius-sm);
    color: var(--byf-redesign-muted-foreground) !important;
    font-size: 12px;
    font-weight: 600;
}

.byf-app-redesign .previewactionbar .file-view.dropdown-menu .dropdown-item.active,
.byf-app-redesign .previewactionbar .file-view.dropdown-menu .dropdown-item:hover {
    background: var(--byf-redesign-muted);
    color: var(--byf-redesign-foreground) !important;
}

.byf-app-redesign .previewactionbar .file-view.dropdown-menu .dropdown-item.active i {
    color: var(--byf-redesign-foreground) !important;
}

.byf-app-redesign .previewactionbar .file-view.dropdown-menu .dropdown-item i {
    flex: 0 0 16px;
}

.byf-app-redesign .previewactionbar .byf-redesign-dropdown-label {
    display: inline-flex;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.byf-app-redesign .previewactionbar .byf-legacy-view-dropdown {
    display: none !important;
}

.byf-app-redesign .previewactionbar .byf-redesign-view-switch {
    display: inline-flex !important;
    align-items: center;
    gap: 2px;
    margin-right: 0 !important;
    padding: 4px;
    border-radius: 999px;
    background: var(--byf-redesign-muted);
}

.byf-app-redesign .previewactionbar .byf-redesign-view-switch a {
    min-width: 28px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    color: var(--byf-redesign-muted-foreground) !important;
}

.byf-app-redesign .previewactionbar .byf-redesign-view-switch a:hover,
.byf-app-redesign .previewactionbar .byf-redesign-view-switch a.active {
    background: var(--byf-redesign-card);
    color: var(--byf-redesign-foreground) !important;
}

.byf-app-redesign .previewactionbar .byf-redesign-toolbar-button,
.byf-app-redesign .previewactionbar .byf-redesign-toolbar-context,
.byf-app-redesign .previewactionbar .byf-redesign-toolbar-context .tandwiel-dropdown,
.byf-app-redesign .previewactionbar .byf-redesign-toolbar-context .nav-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.byf-app-redesign .previewactionbar .byf-redesign-toolbar-button,
.byf-app-redesign .previewactionbar .byf-redesign-toolbar-context .tandwiel.contextmenutrigger {
    min-width: 32px;
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    border-radius: var(--byf-redesign-radius-sm);
    color: var(--byf-redesign-foreground) !important;
}

.byf-app-redesign .previewactionbar .byf-redesign-toolbar-button:hover,
.byf-app-redesign .previewactionbar .byf-redesign-toolbar-context .tandwiel.contextmenutrigger:hover {
    background: transparent;
    color: var(--byf-redesign-primary) !important;
}

.byf-app-redesign .previewactionbar .select-items.byf-redesign-toolbar-button.active {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    color: var(--byf-redesign-foreground) !important;
}

.byf-app-redesign .previewactionbar .byf-redesign-selection-tools {
    align-items: center;
    align-self: center;
    gap: 2px;
    height: 32px;
    min-height: 32px;
    padding: 2px;
    border: 1px solid var(--byf-redesign-border);
    border-radius: var(--byf-redesign-radius-sm);
    background: var(--byf-redesign-card);
    box-sizing: border-box;
}

.byf-app-redesign .previewactionbar .byf-redesign-selection-tools a {
    min-width: 26px;
    width: 26px;
    height: 26px;
    border-radius: calc(var(--byf-redesign-radius-sm) - 2px);
    color: var(--byf-redesign-foreground) !important;
}

.byf-app-redesign .previewactionbar .byf-redesign-selection-tools a.active {
    background: transparent !important;
    color: var(--byf-redesign-foreground) !important;
}

.byf-app-redesign .previewactionbar .byf-redesign-selection-tools a:hover {
    background: transparent;
    color: var(--byf-redesign-primary) !important;
}

.byf-app-redesign .previewactionbar .byf-redesign-selection-tools .byf-redesign-selection-exit {
    color: var(--byf-redesign-foreground) !important;
}

.byf-app-redesign .previewactionbar .byf-redesign-selection-divider {
    width: 1px;
    height: 18px;
    margin: 0 2px;
    background: var(--byf-redesign-border);
}

.byf-app-redesign .byf-mobile-toolbar-label {
    display: block;
    padding: 6px 10px 4px;
    color: var(--byf-redesign-muted-foreground);
    font-size: 10px;
    font-weight: 800;
    line-height: 14px;
    text-align: left;
    text-transform: uppercase;
}

.byf-app-redesign .byf-redesign-message-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: -8px 0 18px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.byf-app-redesign .byf-redesign-message-row {
    display: flex;
    min-height: 40px;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid var(--byf-redesign-note-border);
    border-radius: var(--byf-redesign-radius-sm);
    background: #fff7c7 !important;
    box-shadow: none !important;
    color: var(--byf-redesign-foreground);
    font-size: 13px;
    line-height: 18px;
}

.byf-app-redesign .byf-redesign-message-icon {
    display: inline-flex;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    color: #c29a00;
    font-size: 15px;
    line-height: 1;
}

.byf-app-redesign .byf-redesign-message-row-shared .byf-redesign-message-icon {
    color: #c29a00 !important;
}

.byf-app-redesign .byf-redesign-message-row-shared #folder-share-btn .byf-redesign-message-icon,
.byf-app-redesign .byf-redesign-message-row-shared #folder-share-btn .byf-redesign-message-icon i {
    color: #c29a00 !important;
}

.byf-app-redesign #secondary-files-modal .byf-redesign-message-row,
.byf-app-redesign #secondary-files-modal .byf-redesign-message-row #folder-share-btn,
.byf-app-redesign #secondary-files-modal .byf-redesign-message-row .byf-redesign-message-content,
.byf-app-redesign #secondary-files-modal .byf-redesign-message-row .byf-redesign-message-content *,
.byf-app-redesign #secondaryfilebrowser .byf-redesign-message-row,
.byf-app-redesign #secondaryfilebrowser .byf-redesign-message-row #folder-share-btn,
.byf-app-redesign #secondaryfilebrowser .byf-redesign-message-row .byf-redesign-message-content,
.byf-app-redesign #secondaryfilebrowser .byf-redesign-message-row .byf-redesign-message-content * {
    color: var(--byf-redesign-foreground) !important;
}

.byf-app-redesign #secondary-files-modal .byf-redesign-message-row .byf-redesign-message-icon,
.byf-app-redesign #secondary-files-modal .byf-redesign-message-row .byf-redesign-message-icon i,
.byf-app-redesign #secondaryfilebrowser .byf-redesign-message-row .byf-redesign-message-icon,
.byf-app-redesign #secondaryfilebrowser .byf-redesign-message-row .byf-redesign-message-icon i {
    color: #c29a00 !important;
}

.byf-app-redesign .byf-redesign-message-body {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    gap: 10px;
}

.byf-app-redesign .byf-redesign-message-link {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.byf-app-redesign .byf-redesign-message-content {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    color: var(--byf-redesign-foreground);
    line-height: 18px;
}

.byf-app-redesign .byf-folder-note-summary {
    flex: 1 1 auto;
    flex-wrap: nowrap;
}

.byf-app-redesign .byf-folder-note-summary > b {
    flex: 0 0 auto;
}

.byf-app-redesign .byf-redesign-message-row a {
    color: var(--byf-redesign-foreground) !important;
    text-decoration: none;
}

.byf-app-redesign .byf-redesign-message-row .thenote {
    min-width: 0;
    color: var(--byf-redesign-foreground);
    font-weight: 500;
}

.byf-app-redesign .byf-redesign-message-row .byf-collapsible-note {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    white-space: pre-wrap;
}

.byf-app-redesign .byf-redesign-message-row.is-expanded {
    align-items: flex-start;
}

.byf-app-redesign .byf-redesign-message-row.is-expanded .byf-redesign-message-body {
    align-items: flex-start;
}

.byf-app-redesign .byf-redesign-message-row.is-expanded .byf-folder-note-summary {
    align-items: flex-start;
}

.byf-app-redesign .byf-redesign-message-row.is-expanded .byf-collapsible-note {
    display: inline;
    overflow: visible;
    -webkit-line-clamp: unset;
    white-space: pre-wrap;
}

.byf-app-redesign .byf-note-toggle {
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--byf-redesign-foreground);
    font-size: 13px;
    font-weight: 800;
    line-height: 18px;
    text-decoration: underline;
    cursor: pointer;
}

.byf-app-redesign .byf-redesign-message-row .btn-yellow {
    flex: 0 0 auto;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: var(--byf-redesign-radius-sm);
    font-size: 12px;
    line-height: 18px;
}

.byf-app-redesign .byf-redesign-message-row .hidden-menu {
    flex: 1 1 100%;
    width: 100%;
    margin-top: 10px;
}

.byf-app-redesign .byf-redesign-message-row textarea.form-control {
    margin-top: 8px !important;
    border-radius: var(--byf-redesign-radius-sm);
    border-color: var(--byf-redesign-border);
    font-size: 13px;
}

/* File grid */
.byf-app-redesign .filelist-container {
    gap: 20px;
    align-content: flex-start;
    padding: 0;
    margin: 0 !important;
}

.byf-app-redesign .filelist-container.largeview {
    gap: 22px;
}

.byf-app-redesign .filelist-container.smallview {
    gap: 16px;
}

.byf-app-redesign .view-groot.flex-item {
    position: relative;
    width: 210px;
    margin: 0;
    flex: 0 0 210px;
}

.byf-app-redesign .view-klein.flex-item {
    position: relative;
    width: 140px;
    margin: 0;
    flex: 0 0 140px;
}

.byf-app-redesign .view-groot.flex-item.folder-item:not(.special-folder-item) {
    width: 210px;
    flex-basis: 210px;
}

.byf-app-redesign .view-klein.flex-item.folder-item:not(.special-folder-item) {
    width: 140px;
    flex-basis: 140px;
}

.byf-app-redesign .view-groot.flex-item .flex-item-container-file,
.byf-app-redesign .view-groot.flex-item .flex-item-container {
    width: 210px;
    height: 300px;
    box-shadow: none !important;
}

.byf-app-redesign .view-klein.flex-item .flex-item-container-file,
.byf-app-redesign .view-klein.flex-item .flex-item-container {
    width: 140px;
    height: 200px;
}

.byf-app-redesign .flex-item-container-file,
.byf-app-redesign .flex-item-container {
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: var(--byf-redesign-radius) !important;
    background: var(--byf-redesign-card) !important;
    box-shadow: none;
    padding: 0 !important;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.byf-app-redesign .flex-item-container-file::before,
.byf-app-redesign .doc-item .flex-item-container::before,
.byf-app-redesign .special-folder-item .flex-item-container::before {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: 20;
    border: 1px solid var(--byf-redesign-border);
    border-radius: var(--byf-redesign-radius);
}

.byf-app-redesign .link-document {
    position: absolute;
    inset: 0;
    width: auto;
    padding: 0;
    background: transparent;
}

.byf-app-redesign .flex-item:hover .flex-item-container-file,
.byf-app-redesign .flex-item:hover .flex-item-container {
    box-shadow: var(--byf-redesign-shadow-sm);
}

.byf-app-redesign .flex-item:hover .flex-item-container-file::before,
.byf-app-redesign .doc-item:hover .flex-item-container::before,
.byf-app-redesign .special-folder-item:hover .flex-item-container::before {
    border-color: var(--byf-redesign-primary-border);
}

.byf-app-redesign .flex-item-container-file .link-file {
    background: #fff;
    border-radius: var(--byf-redesign-radius);
    overflow: hidden;
}

.byf-app-redesign .flex-item-container-file > .d-flex {
    border-radius: var(--byf-redesign-radius);
    overflow: hidden;
}

.byf-app-redesign .doc-item .flex-item-container-file .link-file,
.byf-app-redesign .special-folder-item .flex-item-container-file > .d-flex,
.byf-app-redesign .special-folder-item .flex-item-container-file > .link-document > .d-flex {
    display: flex;
    align-items: center;
    justify-content: center;
}

.byf-app-redesign .doc-item .flex-item-container-file > .link-file img,
.byf-app-redesign .special-folder-item .flex-item-container-file > .d-flex img,
.byf-app-redesign .special-folder-item .flex-item-container-file > .link-document > .d-flex img {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 75%;
    max-height: 100%;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: center center;
    margin-left: auto;
    margin-right: auto;
}

.byf-app-redesign .doc-item .flex-item-container-file .link-file,
.byf-app-redesign .special-folder-item .flex-item-container-file > .d-flex,
.byf-app-redesign .special-folder-item .flex-item-container-file > .link-document > .d-flex {
    height: calc(100% - var(--byf-redesign-card-meta-height)) !important;
}

.byf-app-redesign .view-klein.doc-item .flex-item-container-file .link-file,
.byf-app-redesign .view-klein.special-folder-item .flex-item-container-file > .d-flex,
.byf-app-redesign .view-klein.special-folder-item .flex-item-container-file > .link-document > .d-flex {
    height: calc(100% - var(--byf-redesign-card-meta-height-small)) !important;
}

.byf-app-redesign .flex-item-container-file .filetypeicon,
.byf-app-redesign .flex-item-container-file .filetypeicon i {
    color: var(--byf-redesign-primary);
}

.byf-app-redesign .filetypeicon {
    display: flex;
    min-height: 100%;
    align-items: center;
    justify-content: center;
    color: var(--byf-redesign-primary) !important;
}

.byf-app-redesign .filetypeicon i {
    font-size: 56px !important;
}

.byf-app-redesign .filetypeicon span {
    top: 50%;
    width: auto;
    min-width: 46px;
    max-width: 80px;
    margin-left: 0;
    padding: 2px 8px;
    border: 1px solid var(--byf-redesign-border);
    border-radius: 999px;
    background: var(--byf-redesign-card);
    color: var(--byf-redesign-primary);
    font-size: 10px;
    line-height: 14px;
    transform: translate(-50%, -50%);
}

.byf-app-redesign .filetypeicon span:empty {
    display: none;
}

.byf-app-redesign .view-klein .filetypeicon i {
    font-size: 42px !important;
    margin-top: 0;
}

.byf-app-redesign .folder-item .display-default .loaderstyle,
.byf-app-redesign .folder-item .display-default > .loadingdots,
.byf-app-redesign .folder-item .link-folder > .loadingdots,
.byf-app-redesign .folder-item .folder-text-zone > .loadingdots {
    display: none !important;
}

.byf-app-redesign .doc-item .uploadingdocitem .loaderstyle {
    display: block;
}

.byf-app-redesign .flex-item-text {
    padding: 8px 4px 0 !important;
    color: var(--byf-redesign-muted-foreground) !important;
}

.byf-app-redesign .doc-item.view-groot.flex-item,
.byf-app-redesign .doc-item.view-klein.flex-item {
    overflow: hidden;
    border-radius: var(--byf-redesign-radius);
}

.byf-app-redesign .doc-item .flex-item-text {
    position: absolute;
    right: 1px;
    bottom: 1px;
    left: 1px;
    z-index: 7;
    display: flex;
    height: var(--byf-redesign-card-meta-height);
    align-items: center;
    padding: 8px 12px !important;
    border-top: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 0 0 var(--byf-redesign-radius) var(--byf-redesign-radius);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: none;
    backdrop-filter: blur(6px);
    transition: height 200ms ease-out, padding 200ms ease-out, color 160ms ease;
}

.byf-app-redesign .doc-item.view-klein .flex-item-text {
    height: var(--byf-redesign-card-meta-height-small);
    padding: 6px 8px !important;
}

.byf-app-redesign .doc-item .flex-item-text:has(.shared-meta-icon) {
    padding-right: 42px !important;
}

.byf-app-redesign .doc-item.view-klein .flex-item-text:has(.shared-meta-icon) {
    padding-right: 34px !important;
}

.byf-app-redesign .doc-item.byf-name-overflow .flex-item-text:hover {
    height: 80px;
    align-items: flex-start;
    padding-top: 10px !important;
}

.byf-app-redesign .doc-item.view-klein.byf-name-overflow .flex-item-text:hover {
    height: 64px;
    padding-top: 8px !important;
}

.byf-app-redesign .doc-item .flex-item-text .item-name-row {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    position: static;
}

.byf-app-redesign .doc-item .flex-item-text .itemname {
    display: -webkit-box;
    min-width: 0;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-align: left;
}

.byf-app-redesign .doc-item.byf-name-overflow .flex-item-text:hover .itemname {
    -webkit-line-clamp: 4;
    color: var(--byf-redesign-foreground) !important;
}

.byf-app-redesign .doc-item .flex-item-text .editNameIcon {
    position: absolute;
    top: 50%;
    right: 8px;
    z-index: 9;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    color: var(--byf-redesign-primary) !important;
    font-size: 12px;
    line-height: 1;
    transform: translateY(-50%);
}

.byf-app-redesign .doc-item .flex-item-text:has(.shared-meta-icon) .editNameIcon {
    right: 32px;
}

.byf-app-redesign .doc-item .flex-item-text:hover .item-name-row:not(.edit_disabled) {
    padding-right: 22px;
}

.byf-app-redesign .doc-item .flex-item-text:has(.shared-meta-icon):hover .item-name-row:not(.edit_disabled) {
    padding-right: 46px;
}

.byf-app-redesign .flex-item-text .item-name-row,
.byf-app-redesign .flex-item-text .itemname,
.byf-app-redesign .flex-item-text a {
    color: var(--byf-redesign-muted-foreground) !important;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
}

.byf-app-redesign .view-klein .flex-item-text .item-name-row,
.byf-app-redesign .view-klein .flex-item-text .itemname {
    font-size: 11px;
    line-height: 14px;
}

.byf-app-redesign .previewactionbar .byf-compact-history {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
}

.byf-app-redesign .previewactionbar #historylistcompact {
    max-height: 340px;
    overflow-y: auto;
}

/* History uses the same floating surface language as the redesign menus. */
.byf-history-item-icon,
.byf-history-item-arrow {
    display: none;
}

.byf-app-redesign .previewactionbar #historylist,
.byf-app-redesign .previewactionbar #historylistcompact {
    right: auto !important;
    left: 0 !important;
    max-width: min(1000px, calc(100vw - 24px));
    min-width: min(420px, calc(100vw - 24px));
    max-height: min(360px, calc(100vh - 96px));
    overflow-x: hidden;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--byf-redesign-border) !important;
    border-radius: 14px;
    background: var(--byf-redesign-surface, #fff);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16);
    z-index: 1200;
}

.byf-app-redesign .previewactionbar #historylist .dropdown-divider,
.byf-app-redesign .previewactionbar #historylistcompact .dropdown-divider {
    display: none;
}

.byf-app-redesign .previewactionbar .byf-history-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    margin: 0;
    padding: 9px 10px;
    overflow: hidden;
    border: 0;
    border-bottom: 1px solid var(--byf-redesign-border-soft);
    border-radius: 9px;
    color: var(--byf-redesign-foreground) !important;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
    transition: background 160ms ease, color 160ms ease;
}

.byf-app-redesign .previewactionbar .byf-history-item:last-child {
    border-bottom: 0;
}

.byf-app-redesign .previewactionbar .byf-history-item:hover,
.byf-app-redesign .previewactionbar .byf-history-item:focus,
.byf-app-redesign .previewactionbar .byf-history-item:focus-visible {
    color: var(--byf-redesign-foreground) !important;
    background: var(--byf-redesign-primary-soft);
    outline: 0;
}

.byf-app-redesign .previewactionbar .byf-history-item-icon {
    display: inline-flex;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--byf-redesign-primary);
    background: var(--byf-redesign-muted);
    font-size: 13px;
}

.byf-app-redesign .previewactionbar .byf-history-item-path {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.byf-app-redesign .previewactionbar .byf-history-item-arrow {
    display: inline-flex;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    color: var(--byf-redesign-muted-foreground);
    font-size: 12px;
    opacity: 0;
    transform: translateX(-3px);
    transition: opacity 160ms ease, transform 160ms ease;
}

.byf-app-redesign .previewactionbar .byf-history-item:hover .byf-history-item-arrow,
.byf-app-redesign .previewactionbar .byf-history-item:focus-visible .byf-history-item-arrow {
    opacity: 1;
    transform: translateX(0);
}

@media (max-width: 560px) {
    .byf-app-redesign .previewactionbar #historylist,
    .byf-app-redesign .previewactionbar #historylistcompact {
        right: 12px !important;
        left: 12px !important;
        width: auto;
        min-width: 0;
    }
}

.byf-app-redesign .document-meta-zone,
.byf-app-redesign .flex-item-container-file + .flex-item-text {
    color: var(--byf-redesign-muted-foreground);
}

.byf-app-redesign .ico-corner {
    z-index: 8;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: auto;
    margin: 0;
    line-height: 1;
    font-size: 16px !important;
}

.byf-app-redesign .ico-corner.ico-top-left {
    top: 10px;
    left: 10px;
}

.byf-app-redesign .ico-corner.ico-top-right {
    top: 10px;
    right: 10px;
    z-index: 12;
}

.byf-app-redesign .ico-corner.ico-bottom-left {
    bottom: 10px;
    left: 10px;
}

.byf-app-redesign .ico-corner.ico-bottom-right {
    right: 10px;
    bottom: 10px;
}

.byf-app-redesign .doc-item .ico-corner.ico-bottom-left {
    left: 12px;
    bottom: calc(var(--byf-redesign-card-meta-height) + 8px);
    z-index: 9;
    display: flex;
    align-items: center;
    transition: bottom 200ms ease-out;
}

.byf-app-redesign .doc-item .ico-corner.ico-bottom-right {
    right: 12px;
    bottom: calc(var(--byf-redesign-card-meta-height) + 8px);
    z-index: 9;
    transition: bottom 200ms ease-out;
}

.byf-app-redesign .doc-item.byf-name-overflow:has(.flex-item-text:hover) .ico-corner.ico-bottom-left,
.byf-app-redesign .doc-item.byf-name-overflow:has(.flex-item-text:hover) .ico-corner.ico-bottom-right {
    bottom: 88px;
}

.byf-app-redesign .doc-item.view-klein .ico-corner.ico-bottom-right {
    right: 8px;
    bottom: calc(var(--byf-redesign-card-meta-height-small) + 7px);
}

.byf-app-redesign .doc-item.view-klein .ico-corner.ico-bottom-left {
    left: 8px;
    bottom: calc(var(--byf-redesign-card-meta-height-small) + 7px);
}

.byf-app-redesign .doc-item.view-klein.byf-name-overflow:has(.flex-item-text:hover) .ico-corner.ico-bottom-left,
.byf-app-redesign .doc-item.view-klein.byf-name-overflow:has(.flex-item-text:hover) .ico-corner.ico-bottom-right {
    bottom: 71px;
}

.byf-app-redesign .ico-corner i,
.byf-app-redesign .documentcontext,
.byf-app-redesign .foldercontext {
    color: var(--byf-redesign-muted-foreground) !important;
}

.byf-app-redesign .ico-corner .tandwiel,
.byf-app-redesign .ico-corner .locked {
    font-size: 16px;
}

.byf-app-redesign .ico-corner a:hover,
.byf-app-redesign .ico-corner a:hover i,
.byf-app-redesign .documentcontext:hover,
.byf-app-redesign .foldercontext:hover {
    color: var(--byf-redesign-primary) !important;
}

.byf-app-redesign .fa-inbox-in[style*="blue"] {
    color: blue !important;
}

.byf-app-redesign .fa-inbox-out[style*="green"] {
    color: green !important;
}

.byf-app-redesign .esigning-info .fa-signature[style*="green"] {
    color: green !important;
}

.byf-app-redesign .esigning-info .fa-signature[style*="red"] {
    color: red !important;
}

.byf-app-redesign .sr-only,
.byf-app-redesign .ico-corner .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.byf-app-redesign .ico-bottom-right .download-file,
.byf-app-redesign .ico-bottom-right .download-folder,
.byf-app-redesign .ico-top-right .tandwiel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--byf-redesign-radius-sm);
    background: var(--byf-redesign-corner-surface);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}

.byf-app-redesign .doc-item .ico-bottom-right .download-file {
    width: var(--byf-redesign-card-meta-action);
    height: var(--byf-redesign-card-meta-action);
    background: transparent;
    box-shadow: none;
}

.byf-app-redesign .doc-item .ico-bottom-left a,
.byf-app-redesign .doc-item .ico-bottom-left > i {
    display: inline-flex;
    min-width: 16px;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: var(--byf-redesign-muted-foreground) !important;
}

.byf-app-redesign .doc-item.view-klein .ico-bottom-right .download-file {
    width: var(--byf-redesign-card-meta-action-small);
    height: var(--byf-redesign-card-meta-action-small);
}

.byf-app-redesign .doc-item.view-klein .ico-bottom-left a,
.byf-app-redesign .doc-item.view-klein .ico-bottom-left > i {
    min-width: 15px;
    height: 100%;
}

.byf-app-redesign .ico-bottom-left .icon-briefcase.active-briefcase,
.byf-app-redesign .ico-bottom-left .icon-briefcase.active-briefcase i,
.byf-app-redesign .shared-meta-icon,
.byf-app-redesign .shared-meta-icon i,
.byf-app-redesign .ico-top-left .active-tag {
    color: var(--byf-redesign-primary) !important;
}

.byf-tag-tooltip-template,
.byf-icon-tooltip-template {
    display: none !important;
}

.tooltipster-content .byf-tag-tooltip-line {
    margin: 0;
    border: 0 !important;
    padding: 2px 0;
    color: inherit;
    font-size: 12px;
    line-height: 1.35;
}

.byf-app-redesign .folder-item:not(.special-folder-item) .ico-corner.ico-bottom-center {
    right: 12px;
    bottom: var(--byf-redesign-card-meta-offset);
    left: 12px;
    z-index: 7;
    display: flex;
    width: auto;
    margin-left: 0;
    justify-content: center;
    gap: 12px;
    color: var(--byf-redesign-muted-foreground);
    font-size: 12px !important;
    font-weight: 400;
}

.byf-app-redesign .folder-item:not(.special-folder-item) .ico-bottom-center span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    height: var(--byf-redesign-card-meta-action);
    padding: 0 !important;
    border-radius: var(--byf-redesign-radius-sm);
    background: transparent;
    color: var(--byf-redesign-muted-foreground);
    font-weight: 400;
    line-height: 1;
}

.byf-app-redesign .shared-meta-icon {
    position: absolute;
    right: 6px;
    top: 50%;
    z-index: 8;
    display: inline-flex;
    width: var(--byf-redesign-card-meta-action);
    height: var(--byf-redesign-card-meta-action);
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
}

.byf-app-redesign .shared-meta-icon i {
    font-size: 14px !important;
    font-weight: 700 !important;
}

.byf-app-redesign .view-klein .shared-meta-icon {
    width: var(--byf-redesign-card-meta-action-small);
    height: var(--byf-redesign-card-meta-action-small);
    right: 2px;
}

.byf-app-redesign .doc-item .flex-item-text .shared-meta-icon,
.byf-app-redesign .special-folder-item .ico-bottom-center .shared-meta-icon {
    right: 6px;
}

.byf-app-redesign .view-klein.doc-item .flex-item-text .shared-meta-icon,
.byf-app-redesign .view-klein.special-folder-item .ico-bottom-center .shared-meta-icon,
.byf-app-redesign .view-klein.folder-item:not(.special-folder-item) .ico-bottom-center .shared-meta-icon {
    right: 2px;
}

.byf-app-redesign .folder-item:not(.special-folder-item) .ico-corner.ico-bottom-right {
    right: 12px;
    bottom: calc(var(--byf-redesign-card-meta-height) + 8px);
    z-index: 9;
}

.byf-app-redesign .folder-item:not(.special-folder-item) .ico-bottom-right .download-folder {
    width: var(--byf-redesign-card-meta-action);
    height: var(--byf-redesign-card-meta-action);
    background: var(--byf-redesign-corner-surface);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}

.byf-app-redesign .folder-item:not(.special-folder-item) .ico-corner.ico-bottom-left {
    left: 12px;
    bottom: calc(var(--byf-redesign-card-meta-height) + 8px);
    z-index: 9;
    display: flex;
    align-items: center;
}

.byf-app-redesign .folder-item:not(.special-folder-item) .ico-bottom-left a,
.byf-app-redesign .folder-item:not(.special-folder-item) .ico-bottom-left > i {
    display: inline-flex;
    min-width: 16px;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: var(--byf-redesign-muted-foreground) !important;
}

.byf-app-redesign .view-klein.folder-item:not(.special-folder-item) .ico-corner.ico-bottom-center {
    right: 8px;
    bottom: var(--byf-redesign-card-meta-offset-small);
    left: 8px;
    gap: 4px;
    font-size: 11px !important;
}

.byf-app-redesign .view-klein.folder-item:not(.special-folder-item) .ico-bottom-center span {
    height: var(--byf-redesign-card-meta-action-small);
    padding: 0 5px !important;
}

.byf-app-redesign .view-klein.folder-item:not(.special-folder-item) .ico-corner.ico-bottom-right {
    right: 8px;
    bottom: calc(var(--byf-redesign-card-meta-height-small) + 7px);
}

.byf-app-redesign .view-klein.folder-item:not(.special-folder-item) .ico-bottom-right .download-folder {
    width: var(--byf-redesign-card-meta-action-small);
    height: var(--byf-redesign-card-meta-action-small);
}

.byf-app-redesign .view-klein.folder-item:not(.special-folder-item) .ico-corner.ico-bottom-left {
    left: 8px;
    bottom: calc(var(--byf-redesign-card-meta-height-small) + 7px);
}

.byf-app-redesign .view-klein.folder-item:not(.special-folder-item) .ico-bottom-left a,
.byf-app-redesign .view-klein.folder-item:not(.special-folder-item) .ico-bottom-left > i {
    min-width: 15px;
    height: 100%;
}

.byf-app-redesign .ico-top-left:has(> a, > span, > i),
.byf-app-redesign .ico-bottom-left:has(> a, > span, > i) {
    height: var(--byf-redesign-card-meta-action);
    min-width: var(--byf-redesign-card-meta-action);
    align-items: center;
    padding: 0;
    border-radius: var(--byf-redesign-radius-sm);
    background: var(--byf-redesign-corner-surface);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}

.byf-app-redesign .view-klein .ico-top-left:has(> a, > span, > i),
.byf-app-redesign .view-klein .ico-bottom-left:has(> a, > span, > i) {
    height: var(--byf-redesign-card-meta-action-small);
    min-width: var(--byf-redesign-card-meta-action-small);
    padding: 0;
}

.byf-app-redesign .ico-top-left .assignmentflipoutlink,
.byf-app-redesign .ico-top-left a,
.byf-app-redesign .ico-top-left span:not(.amount):not(.sr-only):not(.byf-tag-tooltip-template):not(.byf-icon-tooltip-template) {
    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 100%;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.byf-app-redesign .ico-top-left .amount {
    position: absolute;
    top: -4px;
    right: -4px;
    left: auto;
    z-index: 9;
}

/* Folder tiles, based on the Vue folder tab shape */
.byf-app-redesign .folder-item:not(.special-folder-item) .flex-item-container {
    --byf-folder-tab-width: 80px;
    overflow: visible;
    border: 0;
    background: transparent !important;
    box-shadow: none;
}

.byf-app-redesign .folder-item:not(.special-folder-item):has(.ico-top-left > :nth-child(3)) .flex-item-container {
    --byf-folder-tab-width: 112px;
}

.byf-app-redesign .folder-item:not(.special-folder-item):has(.ico-top-left > :nth-child(4)) .flex-item-container {
    --byf-folder-tab-width: 144px;
}

.byf-app-redesign .folder-item:not(.special-folder-item):has(.ico-top-left > :nth-child(5)) .flex-item-container {
    --byf-folder-tab-width: 176px;
}

.byf-app-redesign .folder-item:not(.special-folder-item):has(.ico-top-left > :nth-child(6)) .flex-item-container {
    --byf-folder-tab-width: 208px;
}

.byf-app-redesign .folder-item:not(.special-folder-item) .flex-item-container::before {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 15px 0 0;
    z-index: 0;
    border: 1px solid var(--byf-redesign-border);
    border-top: 4px solid var(--byf-redesign-primary);
    border-radius: 0 var(--byf-redesign-radius) var(--byf-redesign-radius) var(--byf-redesign-radius);
    background: var(--byf-redesign-card);
    box-shadow: none;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.byf-app-redesign .quickfolders.folder-item:not(.special-folder-item) .flex-item-container {
    background: transparent !important;
}

.byf-app-redesign .quickfolders.folder-item:not(.special-folder-item) .flex-item-container::before {
    border-top-color: var(--byf-redesign-quickfolder-accent);
}

.byf-app-redesign .quickfolders.folder-item:not(.special-folder-item):hover .flex-item-container::before {
    border-top-color: var(--byf-redesign-quickfolder-accent);
}

.byf-app-redesign .folder-item:not(.special-folder-item) .flex-item-container::after {
    content: "";
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: min(var(--byf-folder-tab-width), 100%);
    height: 19px;
    border: 1px solid var(--byf-redesign-border);
    border-bottom: 0;
    border-radius: var(--byf-redesign-radius) var(--byf-redesign-radius) 0 0;
    background: var(--byf-redesign-card);
    transition: width 160ms ease, border-color 160ms ease;
}

.byf-app-redesign .folder-item:not(.special-folder-item):has(.shared-overlay) .flex-item-container::before,
.byf-app-redesign .folder-item:not(.special-folder-item):has(.shared-meta-icon) .flex-item-container::before,
.byf-app-redesign .folder-item:not(.special-folder-item):has(.shared-overlay) .flex-item-container::after,
.byf-app-redesign .folder-item:not(.special-folder-item):has(.shared-meta-icon) .flex-item-container::after {
    background: var(--byf-redesign-shared-folder-bg);
}

.byf-app-redesign .view-klein.folder-item:not(.special-folder-item) .flex-item-container::before {
    top: 12px;
    border-top-width: 4px;
    border-radius: 0 10px 10px 10px;
}

.byf-app-redesign .view-klein.folder-item:not(.special-folder-item) .flex-item-container {
    --byf-folder-tab-width: 58px;
}

.byf-app-redesign .view-klein.folder-item:not(.special-folder-item):has(.ico-top-left > :nth-child(2)) .flex-item-container {
    --byf-folder-tab-width: 62px;
}

.byf-app-redesign .view-klein.folder-item:not(.special-folder-item):has(.ico-top-left > :nth-child(3)) .flex-item-container {
    --byf-folder-tab-width: 84px;
}

.byf-app-redesign .view-klein.folder-item:not(.special-folder-item):has(.ico-top-left > :nth-child(4)) .flex-item-container {
    --byf-folder-tab-width: 106px;
}

.byf-app-redesign .view-klein.folder-item:not(.special-folder-item):has(.ico-top-left > :nth-child(5)) .flex-item-container {
    --byf-folder-tab-width: 128px;
}

.byf-app-redesign .view-klein.folder-item:not(.special-folder-item):has(.ico-top-left > :nth-child(6)) .flex-item-container {
    --byf-folder-tab-width: 140px;
}

.byf-app-redesign .view-klein.folder-item:not(.special-folder-item) .flex-item-container::after {
    height: 16px;
    border-radius: 10px 10px 0 0;
}

.byf-app-redesign .folder-item:hover .flex-item-container::before {
    border-color: var(--byf-redesign-primary-border);
    border-top-color: var(--byf-redesign-primary);
    box-shadow: var(--byf-redesign-shadow-sm);
}

.byf-app-redesign .folder-item:not(.special-folder-item):hover .flex-item-container::after {
    border-color: var(--byf-redesign-primary-border);
    border-bottom: 0;
}

.byf-app-redesign .quickfolders.folder-item:not(.special-folder-item):hover .flex-item-container::before {
    border-color: var(--byf-redesign-quickfolder-shared-border);
    border-top-color: var(--byf-redesign-quickfolder-shared-border);
}

.byf-app-redesign .quickfolders.folder-item:not(.special-folder-item):hover .flex-item-container::after {
    border-color: var(--byf-redesign-quickfolder-shared-border);
    border-bottom: 0;
}

.byf-app-redesign .folder-item .display-default,
.byf-app-redesign .folder-item .flex-item-header,
.byf-app-redesign .folder-item .link-folder,
.byf-app-redesign .folder-item .folder-text-zone {
    position: relative;
    z-index: 2;
}

.byf-app-redesign .folder-item .display-default,
.byf-app-redesign .folder-item .flex-item-header {
    height: 100%;
}

.byf-app-redesign .folder-item:not(.special-folder-item) .display-default::before {
    content: "";
    pointer-events: none;
    position: absolute;
    right: 1px;
    bottom: 1px;
    left: 1px;
    z-index: 3;
    height: var(--byf-redesign-card-meta-height);
    border-top: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 0 0 var(--byf-redesign-radius) var(--byf-redesign-radius);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: none;
    backdrop-filter: blur(6px);
}

.byf-app-redesign .folder-item:not(.special-folder-item):has(.shared-overlay) .display-default::before,
.byf-app-redesign .folder-item:not(.special-folder-item):has(.shared-meta-icon) .display-default::before {
    background: var(--byf-redesign-shared-folder-bg) !important;
    backdrop-filter: none;
}

.byf-app-redesign .quickfolders.folder-item:not(.special-folder-item) .flex-item-container.shared-quickfolder::before,
.byf-app-redesign .quickfolders.folder-item:not(.special-folder-item) .flex-item-container.shared-quickfolder::after,
.byf-app-redesign .quickfolders.folder-item:not(.special-folder-item) .flex-item-container.shared-quickfolder .display-default::before {
    background: var(--byf-redesign-quickfolder-shared) !important;
    backdrop-filter: none;
}

.byf-app-redesign .quickfolders.folder-item:not(.special-folder-item) .flex-item-container.shared-quickfolder::before {
    border-top-color: var(--byf-redesign-quickfolder-shared-border);
}

.byf-app-redesign .quickfolders.folder-item .shared-meta-icon,
.byf-app-redesign .quickfolders.folder-item .shared-meta-icon i {
    color: color-mix(in srgb, var(--byf-redesign-quickfolder-base) 55%, #047857) !important;
}

.byf-app-redesign .folder-item:not(.special-folder-item) .shared-overlay {
    display: none !important;
}

.byf-app-redesign .view-klein.folder-item:not(.special-folder-item) .display-default::before {
    height: var(--byf-redesign-card-meta-height-small);
}

.byf-app-redesign .folder-item .link-folder,
.byf-app-redesign .folder-item .folder-text-zone {
    position: relative;
    inset: auto;
    display: block;
    height: 100%;
    width: 100%;
    padding: 64px 14px 64px;
    overflow: hidden;
    background: transparent;
}

.byf-app-redesign .folder-item .tags-info {
    display: none !important;
}

.byf-app-redesign .view-klein.folder-item .link-folder,
.byf-app-redesign .view-klein.folder-item .folder-text-zone {
    padding: 52px 10px 54px;
}

.byf-app-redesign .titel-tile {
    color: var(--byf-redesign-foreground) !important;
    font-size: 16px;
    font-weight: 600;
    line-height: 19px;
    margin: 0 !important;
    padding: 0 !important;
    word-break: normal;
    overflow-wrap: anywhere;
    hyphens: none;
}

.byf-app-redesign .view-klein .titel-tile {
    font-size: 14px;
    line-height: 16px;
}

.byf-app-redesign .titel-tile .item-name-row {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.byf-app-redesign .titel-tile .dossiername {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
    border: 0;
    color: var(--byf-redesign-primary) !important;
    font-size: 12px;
    font-weight: 600;
}

.byf-app-redesign .view-klein .titel-tile .dossiername {
    font-size: 11px;
}

.byf-app-redesign .folder-item .ico-bottom-center {
    position: absolute;
    right: 12px;
    bottom: var(--byf-redesign-card-meta-offset);
    left: 12px;
    z-index: 7;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 28px;
    color: var(--byf-redesign-muted-foreground) !important;
    font-size: 11px;
    width: auto;
    margin-left: 0;
    text-align: left;
}

.byf-app-redesign .folder-item .ico-top-left {
    /*top: 30px;*/
}

.byf-app-redesign .view-klein.folder-item .ico-top-left {
    /*top: 24px;*/
}

.byf-app-redesign .folder-item .ico-top-right {
    top: 28px;
    z-index: 12;
}

.byf-app-redesign .view-klein.folder-item .ico-top-right {
    top: 22px;
}

.byf-app-redesign .special-folder-item .ico-corner.ico-top-left,
.byf-app-redesign .view-klein.special-folder-item .ico-corner.ico-top-left {
    top: 10px;
    left: 10px;
}

.byf-app-redesign .special-folder-item .ico-corner.ico-top-right,
.byf-app-redesign .view-klein.special-folder-item .ico-corner.ico-top-right {
    top: 10px;
    right: 10px;
}

.byf-app-redesign .flex-item:has(.tandwiel-dropdown .dropdown-menu.show) {
    z-index: 12000;
    overflow: visible !important;
}

.byf-app-redesign .flex-item:has(.tandwiel-dropdown .dropdown-menu.show) .flex-item-container,
.byf-app-redesign .flex-item:has(.tandwiel-dropdown .dropdown-menu.show) .flex-item-container-file {
    overflow: visible !important;
}

.byf-app-redesign .flex-item:has(.tandwiel-dropdown .dropdown-menu.show) .ico-top-right,
.byf-app-redesign .tandwiel-dropdown .nav-item.dropdown.show {
    z-index: 12010;
}

.byf-app-redesign .tandwiel-dropdown .dropdown-menu.show {
    position: absolute !important;
    z-index: 12020;
}

.byf-app-redesign .folder-item .ico-bottom-right {
    bottom: calc(var(--byf-redesign-card-meta-height) + 8px);
    z-index: 9;
}

.byf-app-redesign .folder-item .documents-in-folder,
.byf-app-redesign .folder-item .files-in-folder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    color: var(--byf-redesign-muted-foreground) !important;
    font-size: 12px;
    font-weight: 400;
}

.byf-app-redesign .folder-item .ico-bottom-center > i,
.byf-app-redesign .folder-item .ico-bottom-center .paperclip-number,
.byf-app-redesign .mail-attachment,
.byf-app-redesign .mail-attachment i,
.byf-app-redesign .mail-attachment .paperclip-number {
    color: var(--byf-redesign-muted-foreground) !important;
    font-size: 12px !important;
    font-weight: 400;
    line-height: 1;
}

.byf-app-redesign .mail-attachment {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.byf-app-redesign .ico-bottom-right .download-file,
.byf-app-redesign .ico-bottom-right .download-folder {
    color: var(--byf-redesign-primary) !important;
}

.byf-app-redesign .ico-bottom-right .download-file i,
.byf-app-redesign .ico-bottom-right .download-folder i {
    color: var(--byf-redesign-primary) !important;
    font-size: 15px;
    font-weight: 700 !important;
}

.byf-app-redesign .special-folder-item .flex-item-container-file::after {
    content: "";
    pointer-events: none;
    position: absolute;
    right: 1px;
    bottom: 1px;
    left: 1px;
    z-index: 3;
    height: var(--byf-redesign-card-meta-height);
    border-top: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 0 0 var(--byf-redesign-radius) var(--byf-redesign-radius);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: none;
    backdrop-filter: blur(6px);
    transition: height 200ms ease-out, background 160ms ease, box-shadow 160ms ease;
}

.byf-app-redesign .special-folder-item .flex-item-text {
    position: absolute;
    right: 1px;
    bottom: 1px;
    left: 1px;
    z-index: 7;
    display: flex;
    height: var(--byf-redesign-card-meta-height);
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px !important;
    border: 0;
    border-radius: 0 0 var(--byf-redesign-radius) var(--byf-redesign-radius);
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    transition: height 200ms ease-out, padding 200ms ease-out, color 160ms ease;
}

.byf-app-redesign .view-klein.special-folder-item .flex-item-text {
    height: var(--byf-redesign-card-meta-height-small);
    padding: 6px 8px !important;
}

.byf-app-redesign .special-folder-item.byf-name-overflow .flex-item-text:hover {
    height: 80px;
    align-items: flex-start;
    padding-top: 10px !important;
}

.byf-app-redesign .special-folder-item.byf-name-overflow:has(.flex-item-text:hover) .flex-item-container-file::after,
.byf-app-redesign .special-folder-item.byf-name-overflow:has(.flex-item-text:hover) .shared-overlay {
    height: 80px !important;
}

.byf-app-redesign .view-klein.special-folder-item.byf-name-overflow .flex-item-text:hover {
    height: 64px;
    padding-top: 8px !important;
}

.byf-app-redesign .view-klein.special-folder-item.byf-name-overflow:has(.flex-item-text:hover) .flex-item-container-file::after,
.byf-app-redesign .view-klein.special-folder-item.byf-name-overflow:has(.flex-item-text:hover) .shared-overlay {
    height: 64px !important;
}

.byf-app-redesign .special-folder-item .flex-item-text .itemname {
    display: -webkit-box;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    /*-webkit-line-clamp: 2;*/
    -webkit-box-orient: vertical;
    text-align: left;
}

.byf-app-redesign .special-folder-item.byf-name-overflow .flex-item-text:hover .itemname {
    /*-webkit-line-clamp: 4;*/
    color: var(--byf-redesign-foreground) !important;
}

.byf-app-redesign .special-folder-item .flex-item-text .editNameIcon {
    position: absolute;
    top: 50%;
    right: 8px;
    z-index: 9;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    color: var(--byf-redesign-primary) !important;
    font-size: 12px;
    line-height: 1;
    transform: translateY(-50%);
}

.byf-app-redesign .special-folder-item .flex-item-text:hover .mailfolder-meta-actions {
    display: none !important;
}

.byf-app-redesign .special-folder-item .mailfolder-meta-actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
    color: var(--byf-redesign-muted-foreground) !important;
}

.byf-app-redesign .special-folder-item .mailfolder-meta-actions .mail-attachment,
.byf-app-redesign .special-folder-item .mailfolder-meta-actions .shared-meta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.byf-app-redesign .doc-item .shared-overlay {
    top: 1px;
    right: 1px;
    bottom: 1px;
    left: 1px;
    z-index: 4;
    width: auto !important;
    height: auto !important;
    border-radius: calc(var(--byf-redesign-radius) - 1px);
    background: var(--byf-redesign-shared-document-overlay) !important;
    pointer-events: none;
}

.byf-app-redesign .doc-item:has(.shared-meta-icon) .flex-item-text {
    background: transparent !important;
    backdrop-filter: none;
}

.byf-app-redesign .special-folder-item .shared-overlay {
    top: auto;
    right: 1px;
    bottom: 1px;
    left: 1px;
    z-index: 4;
    width: auto !important;
    height: var(--byf-redesign-card-meta-height) !important;
    border-radius: 0 0 var(--byf-redesign-radius) var(--byf-redesign-radius);
    background: var(--byf-redesign-primary-meta) !important;
    pointer-events: none;
}

.byf-app-redesign .special-folder-item:has(.shared-meta-icon) .flex-item-container-file::after {
    background: var(--byf-redesign-primary-meta) !important;
}

.byf-app-redesign .view-klein.special-folder-item .shared-overlay {
    height: var(--byf-redesign-card-meta-height-small) !important;
}

.byf-app-redesign .view-klein.special-folder-item .flex-item-container-file::after {
    height: var(--byf-redesign-card-meta-height-small);
}

.byf-app-redesign .special-folder-item .ico-corner.ico-bottom-left {
    left: 12px;
    bottom: calc(var(--byf-redesign-card-meta-height) + 8px);
    z-index: 9;
    display: flex;
    align-items: center;
    transition: bottom 200ms ease-out;
}

.byf-app-redesign .special-folder-item .ico-corner.ico-bottom-center {
    right: 12px;
    bottom: var(--byf-redesign-card-meta-offset);
    left: 12px;
    z-index: 7;
    display: flex;
    width: auto;
    min-height: var(--byf-redesign-card-meta-action);
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-left: 0;
    color: var(--byf-redesign-muted-foreground) !important;
    font-size: 12px !important;
    font-weight: 400;
    text-align: center;
}

.byf-app-redesign .special-folder-item .ico-corner.ico-bottom-right {
    right: 12px;
    bottom: calc(var(--byf-redesign-card-meta-height) + 8px);
    z-index: 9;
    transition: bottom 200ms ease-out;
}

.byf-app-redesign .special-folder-item.byf-name-overflow:has(.flex-item-text:hover) .ico-corner.ico-bottom-left,
.byf-app-redesign .special-folder-item.byf-name-overflow:has(.flex-item-text:hover) .ico-corner.ico-bottom-right {
    bottom: 88px;
}

.byf-app-redesign .special-folder-item .ico-bottom-left a,
.byf-app-redesign .special-folder-item .ico-bottom-left > i,
.byf-app-redesign .special-folder-item .ico-bottom-right .download-folder {
    display: inline-flex;
    height: var(--byf-redesign-card-meta-action);
    align-items: center;
    justify-content: center;
    border-radius: var(--byf-redesign-radius-sm);
}

.byf-app-redesign .special-folder-item .ico-bottom-left a,
.byf-app-redesign .special-folder-item .ico-bottom-left > i {
    min-width: 16px;
    height: 100%;
    background: transparent;
    box-shadow: none;
}

.byf-app-redesign .special-folder-item .ico-bottom-right .download-folder {
    width: var(--byf-redesign-card-meta-action);
    background: var(--byf-redesign-corner-surface);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}

.byf-app-redesign .special-folder-item .ico-bottom-center > i,
.byf-app-redesign .special-folder-item .ico-bottom-center .paperclip-number {
    display: inline-flex;
    height: var(--byf-redesign-card-meta-action);
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    color: var(--byf-redesign-muted-foreground) !important;
    font-size: 12px !important;
    font-weight: 400;
    line-height: 1;
}

.byf-app-redesign .view-klein.special-folder-item .ico-corner.ico-bottom-left {
    left: 8px;
    bottom: calc(var(--byf-redesign-card-meta-height-small) + 7px);
}

.byf-app-redesign .view-klein.special-folder-item .ico-corner.ico-bottom-center {
    right: 8px;
    bottom: var(--byf-redesign-card-meta-offset-small);
    left: 8px;
    min-height: var(--byf-redesign-card-meta-action-small);
    gap: 4px;
    font-size: 11px !important;
}

.byf-app-redesign .view-klein.special-folder-item .ico-corner.ico-bottom-right {
    right: 8px;
    bottom: calc(var(--byf-redesign-card-meta-height-small) + 7px);
}

.byf-app-redesign .view-klein.special-folder-item.byf-name-overflow:has(.flex-item-text:hover) .ico-corner.ico-bottom-left,
.byf-app-redesign .view-klein.special-folder-item.byf-name-overflow:has(.flex-item-text:hover) .ico-corner.ico-bottom-right {
    bottom: 71px;
}

.byf-app-redesign .view-klein.special-folder-item .ico-bottom-left a,
.byf-app-redesign .view-klein.special-folder-item .ico-bottom-left > i,
.byf-app-redesign .view-klein.special-folder-item .ico-bottom-right .download-folder {
    height: var(--byf-redesign-card-meta-action-small);
}

.byf-app-redesign .view-klein.special-folder-item .ico-bottom-left a,
.byf-app-redesign .view-klein.special-folder-item .ico-bottom-left > i {
    min-width: 15px;
    height: 100%;
}

.byf-app-redesign .view-klein.special-folder-item .ico-bottom-right .download-folder {
    width: var(--byf-redesign-card-meta-action-small);
}

.byf-app-redesign .view-klein.special-folder-item .ico-bottom-center > i,
.byf-app-redesign .view-klein.special-folder-item .ico-bottom-center .paperclip-number {
    height: var(--byf-redesign-card-meta-action-small);
}

.byf-app-redesign .doc-item .ico-corner,
.byf-app-redesign .special-folder-item .ico-corner {
    gap: 5px;
    margin: 0;
    line-height: 1;
    font-size: 16px !important;
}

.byf-app-redesign .doc-item .ico-corner.ico-top-left,
.byf-app-redesign .special-folder-item .ico-corner.ico-top-left {
    top: var(--byf-redesign-corner-inset);
    left: var(--byf-redesign-corner-inset);
}

.byf-app-redesign .doc-item .ico-corner.ico-top-right,
.byf-app-redesign .special-folder-item .ico-corner.ico-top-right {
    top: var(--byf-redesign-corner-inset);
    right: var(--byf-redesign-corner-inset);
}

.byf-app-redesign .doc-item.view-klein .ico-corner.ico-top-left,
.byf-app-redesign .view-klein.special-folder-item .ico-corner.ico-top-left {
    top: var(--byf-redesign-corner-inset-small);
    left: var(--byf-redesign-corner-inset-small);
}

.byf-app-redesign .doc-item.view-klein .ico-corner.ico-top-right,
.byf-app-redesign .view-klein.special-folder-item .ico-corner.ico-top-right {
    top: var(--byf-redesign-corner-inset-small);
    right: var(--byf-redesign-corner-inset-small);
}

.byf-app-redesign .doc-item .ico-top-left:has(> a, > span, > i),
.byf-app-redesign .doc-item .ico-bottom-left:has(> a, > span, > i),
.byf-app-redesign .special-folder-item .ico-top-left:has(> a, > span, > i),
.byf-app-redesign .special-folder-item .ico-bottom-left:has(> a, > span, > i) {
    height: var(--byf-redesign-card-meta-action);
    min-width: var(--byf-redesign-card-meta-action);
    min-height: var(--byf-redesign-card-meta-action);
    align-items: center;
    gap: 5px;
    padding: 0;
    border-radius: var(--byf-redesign-radius-sm);
    background: var(--byf-redesign-corner-surface);
    box-shadow: var(--byf-redesign-corner-shadow);
}

.byf-app-redesign .doc-item.view-klein .ico-top-left:has(> a, > span, > i),
.byf-app-redesign .doc-item.view-klein .ico-bottom-left:has(> a, > span, > i),
.byf-app-redesign .view-klein.special-folder-item .ico-top-left:has(> a, > span, > i),
.byf-app-redesign .view-klein.special-folder-item .ico-bottom-left:has(> a, > span, > i) {
    height: var(--byf-redesign-card-meta-action-small);
    min-width: var(--byf-redesign-card-meta-action-small);
    min-height: var(--byf-redesign-card-meta-action-small);
    padding: 0;
}

.byf-app-redesign .doc-item .ico-top-left a,
.byf-app-redesign .doc-item .ico-top-left span:not(.amount):not(.sr-only):not(.byf-tag-tooltip-template):not(.byf-icon-tooltip-template),
.byf-app-redesign .doc-item .ico-bottom-left a,
.byf-app-redesign .doc-item .ico-bottom-left > i,
.byf-app-redesign .special-folder-item .ico-top-left a,
.byf-app-redesign .special-folder-item .ico-top-left span:not(.amount):not(.sr-only):not(.byf-tag-tooltip-template):not(.byf-icon-tooltip-template),
.byf-app-redesign .special-folder-item .ico-bottom-left a,
.byf-app-redesign .special-folder-item .ico-bottom-left > i {
    display: inline-flex;
    min-width: 16px;
    height: 100%;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.byf-app-redesign .doc-item.view-klein .ico-top-left a,
.byf-app-redesign .doc-item.view-klein .ico-top-left span:not(.amount):not(.sr-only):not(.byf-tag-tooltip-template):not(.byf-icon-tooltip-template),
.byf-app-redesign .doc-item.view-klein .ico-bottom-left a,
.byf-app-redesign .doc-item.view-klein .ico-bottom-left > i,
.byf-app-redesign .view-klein.special-folder-item .ico-top-left a,
.byf-app-redesign .view-klein.special-folder-item .ico-top-left span:not(.amount):not(.sr-only):not(.byf-tag-tooltip-template):not(.byf-icon-tooltip-template),
.byf-app-redesign .view-klein.special-folder-item .ico-bottom-left a,
.byf-app-redesign .view-klein.special-folder-item .ico-bottom-left > i {
    min-width: 15px;
}

.byf-app-redesign .doc-item .ico-top-right .tandwiel,
.byf-app-redesign .doc-item .ico-top-right .locked,
.byf-app-redesign .special-folder-item .ico-top-right .tandwiel,
.byf-app-redesign .special-folder-item .ico-top-right .locked,
.byf-app-redesign .special-folder-item .ico-bottom-right .download-folder {
    display: inline-flex;
    width: var(--byf-redesign-card-meta-action);
    height: var(--byf-redesign-card-meta-action);
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: var(--byf-redesign-radius-sm);
    background: var(--byf-redesign-corner-surface);
    box-shadow: var(--byf-redesign-corner-shadow);
}

.byf-app-redesign .doc-item.view-klein .ico-top-right .tandwiel,
.byf-app-redesign .doc-item.view-klein .ico-top-right .locked,
.byf-app-redesign .view-klein.special-folder-item .ico-top-right .tandwiel,
.byf-app-redesign .view-klein.special-folder-item .ico-top-right .locked,
.byf-app-redesign .view-klein.special-folder-item .ico-bottom-right .download-folder {
    width: var(--byf-redesign-card-meta-action-small);
    height: var(--byf-redesign-card-meta-action-small);
}

.byf-app-redesign .doc-item .ico-bottom-right:has(> a, > i) {
    height: var(--byf-redesign-card-meta-action);
    min-width: var(--byf-redesign-card-meta-action);
    min-height: var(--byf-redesign-card-meta-action);
    align-items: center;
    gap: 5px;
    padding: 0;
    border-radius: var(--byf-redesign-radius-sm);
    background: var(--byf-redesign-corner-surface);
    box-shadow: var(--byf-redesign-corner-shadow);
}

.byf-app-redesign .doc-item.view-klein .ico-bottom-right:has(> a, > i) {
    height: var(--byf-redesign-card-meta-action-small);
    min-width: var(--byf-redesign-card-meta-action-small);
    min-height: var(--byf-redesign-card-meta-action-small);
    padding: 0;
}

.byf-app-redesign .doc-item .ico-bottom-right a,
.byf-app-redesign .doc-item .ico-bottom-right > i {
    display: inline-flex;
    min-width: 16px;
    height: 100%;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.byf-app-redesign .doc-item.view-klein .ico-bottom-right a,
.byf-app-redesign .doc-item.view-klein .ico-bottom-right > i {
    min-width: 15px;
}

.byf-app-redesign .doc-item .ico-bottom-right .webdocsymbol,
.byf-app-redesign .doc-item .ico-bottom-right > .fa-play-circle {
    color: var(--byf-redesign-primary) !important;
}

.byf-app-redesign .doc-item .ico-bottom-right .webdocsymbol i,
.byf-app-redesign .doc-item .ico-bottom-right > .fa-play-circle {
    color: var(--byf-redesign-primary) !important;
    font-size: 15px;
}

.byf-app-redesign .folder-item:not(.special-folder-item) .ico-corner:not(.ico-bottom-center):has(> a:not([style*="display:none"]):not([style*="display: none"]), > i, > span:not(.amount):not(.sr-only):not(.byf-tag-tooltip-template):not(.byf-icon-tooltip-template), > ul.tandwiel-dropdown, > .mac-selector-icon:not([style*="display:none"]):not([style*="display: none"])),
.byf-app-redesign .doc-item .ico-corner:not(.ico-bottom-center):has(> a:not([style*="display:none"]):not([style*="display: none"]), > i, > span:not(.amount):not(.sr-only):not(.byf-tag-tooltip-template):not(.byf-icon-tooltip-template), > ul.tandwiel-dropdown, > .mac-selector-icon:not([style*="display:none"]):not([style*="display: none"])),
.byf-app-redesign .special-folder-item .ico-corner:not(.ico-bottom-center):has(> a:not([style*="display:none"]):not([style*="display: none"]), > i, > span:not(.amount):not(.sr-only):not(.byf-tag-tooltip-template):not(.byf-icon-tooltip-template), > ul.tandwiel-dropdown, > .mac-selector-icon:not([style*="display:none"]):not([style*="display: none"])) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    height: var(--byf-redesign-card-meta-action) !important;
    min-width: var(--byf-redesign-card-meta-action) !important;
    min-height: var(--byf-redesign-card-meta-action) !important;
    padding: 0 !important;
    border-radius: var(--byf-redesign-radius-sm) !important;
    background: var(--byf-redesign-corner-surface) !important;
    box-shadow: var(--byf-redesign-corner-shadow) !important;
    line-height: 1 !important;
}

.byf-app-redesign .view-klein.folder-item:not(.special-folder-item) .ico-corner:not(.ico-bottom-center):has(> a:not([style*="display:none"]):not([style*="display: none"]), > i, > span:not(.amount):not(.sr-only):not(.byf-tag-tooltip-template):not(.byf-icon-tooltip-template), > ul.tandwiel-dropdown, > .mac-selector-icon:not([style*="display:none"]):not([style*="display: none"])),
.byf-app-redesign .doc-item.view-klein .ico-corner:not(.ico-bottom-center):has(> a:not([style*="display:none"]):not([style*="display: none"]), > i, > span:not(.amount):not(.sr-only):not(.byf-tag-tooltip-template):not(.byf-icon-tooltip-template), > ul.tandwiel-dropdown, > .mac-selector-icon:not([style*="display:none"]):not([style*="display: none"])),
.byf-app-redesign .view-klein.special-folder-item .ico-corner:not(.ico-bottom-center):has(> a:not([style*="display:none"]):not([style*="display: none"]), > i, > span:not(.amount):not(.sr-only):not(.byf-tag-tooltip-template):not(.byf-icon-tooltip-template), > ul.tandwiel-dropdown, > .mac-selector-icon:not([style*="display:none"]):not([style*="display: none"])) {
    height: var(--byf-redesign-card-meta-action-small) !important;
    min-width: var(--byf-redesign-card-meta-action-small) !important;
    min-height: var(--byf-redesign-card-meta-action-small) !important;
}

.byf-app-redesign .folder-item:not(.special-folder-item) .ico-corner:not(.ico-bottom-center) > a:not([style*="display:none"]):not([style*="display: none"]),
.byf-app-redesign .folder-item:not(.special-folder-item) .ico-corner:not(.ico-bottom-center) > i,
.byf-app-redesign .folder-item:not(.special-folder-item) .ico-corner:not(.ico-bottom-center) > span:not(.amount):not(.sr-only):not(.byf-tag-tooltip-template):not(.byf-icon-tooltip-template),
.byf-app-redesign .folder-item:not(.special-folder-item) .ico-corner:not(.ico-bottom-center) > ul.tandwiel-dropdown,
.byf-app-redesign .folder-item:not(.special-folder-item) .ico-corner:not(.ico-bottom-center) > .mac-selector-icon:not([style*="display:none"]):not([style*="display: none"]),
.byf-app-redesign .doc-item .ico-corner:not(.ico-bottom-center) > a:not([style*="display:none"]):not([style*="display: none"]),
.byf-app-redesign .doc-item .ico-corner:not(.ico-bottom-center) > i,
.byf-app-redesign .doc-item .ico-corner:not(.ico-bottom-center) > span:not(.amount):not(.sr-only):not(.byf-tag-tooltip-template):not(.byf-icon-tooltip-template),
.byf-app-redesign .doc-item .ico-corner:not(.ico-bottom-center) > ul.tandwiel-dropdown,
.byf-app-redesign .doc-item .ico-corner:not(.ico-bottom-center) > .mac-selector-icon:not([style*="display:none"]):not([style*="display: none"]),
.byf-app-redesign .special-folder-item .ico-corner:not(.ico-bottom-center) > a:not([style*="display:none"]):not([style*="display: none"]),
.byf-app-redesign .special-folder-item .ico-corner:not(.ico-bottom-center) > i,
.byf-app-redesign .special-folder-item .ico-corner:not(.ico-bottom-center) > span:not(.amount):not(.sr-only):not(.byf-tag-tooltip-template):not(.byf-icon-tooltip-template),
.byf-app-redesign .special-folder-item .ico-corner:not(.ico-bottom-center) > ul.tandwiel-dropdown,
.byf-app-redesign .special-folder-item .ico-corner:not(.ico-bottom-center) > .mac-selector-icon:not([style*="display:none"]):not([style*="display: none"]) {
    display: inline-flex !important;
    position: relative;
    flex: 0 0 var(--byf-redesign-card-meta-action);
    align-items: center !important;
    justify-content: center !important;
    width: var(--byf-redesign-card-meta-action) !important;
    min-width: var(--byf-redesign-card-meta-action) !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    line-height: 1 !important;
}

.byf-app-redesign .view-klein.folder-item:not(.special-folder-item) .ico-corner:not(.ico-bottom-center) > a:not([style*="display:none"]):not([style*="display: none"]),
.byf-app-redesign .view-klein.folder-item:not(.special-folder-item) .ico-corner:not(.ico-bottom-center) > i,
.byf-app-redesign .view-klein.folder-item:not(.special-folder-item) .ico-corner:not(.ico-bottom-center) > span:not(.amount):not(.sr-only):not(.byf-tag-tooltip-template):not(.byf-icon-tooltip-template),
.byf-app-redesign .view-klein.folder-item:not(.special-folder-item) .ico-corner:not(.ico-bottom-center) > ul.tandwiel-dropdown,
.byf-app-redesign .view-klein.folder-item:not(.special-folder-item) .ico-corner:not(.ico-bottom-center) > .mac-selector-icon:not([style*="display:none"]):not([style*="display: none"]),
.byf-app-redesign .doc-item.view-klein .ico-corner:not(.ico-bottom-center) > a:not([style*="display:none"]):not([style*="display: none"]),
.byf-app-redesign .doc-item.view-klein .ico-corner:not(.ico-bottom-center) > i,
.byf-app-redesign .doc-item.view-klein .ico-corner:not(.ico-bottom-center) > span:not(.amount):not(.sr-only):not(.byf-tag-tooltip-template):not(.byf-icon-tooltip-template),
.byf-app-redesign .doc-item.view-klein .ico-corner:not(.ico-bottom-center) > ul.tandwiel-dropdown,
.byf-app-redesign .doc-item.view-klein .ico-corner:not(.ico-bottom-center) > .mac-selector-icon:not([style*="display:none"]):not([style*="display: none"]),
.byf-app-redesign .view-klein.special-folder-item .ico-corner:not(.ico-bottom-center) > a:not([style*="display:none"]):not([style*="display: none"]),
.byf-app-redesign .view-klein.special-folder-item .ico-corner:not(.ico-bottom-center) > i,
.byf-app-redesign .view-klein.special-folder-item .ico-corner:not(.ico-bottom-center) > span:not(.amount):not(.sr-only):not(.byf-tag-tooltip-template):not(.byf-icon-tooltip-template),
.byf-app-redesign .view-klein.special-folder-item .ico-corner:not(.ico-bottom-center) > ul.tandwiel-dropdown,
.byf-app-redesign .view-klein.special-folder-item .ico-corner:not(.ico-bottom-center) > .mac-selector-icon:not([style*="display:none"]):not([style*="display: none"]) {
    flex-basis: var(--byf-redesign-card-meta-action-small);
    width: var(--byf-redesign-card-meta-action-small) !important;
    min-width: var(--byf-redesign-card-meta-action-small) !important;
}

/* Keep the folder flap visually compact in the small tile view. */
.byf-app-redesign .view-klein.folder-item:not(.special-folder-item) .ico-corner.ico-top-left {
    gap: 2px !important;
}

.byf-app-redesign .view-klein.folder-item:not(.special-folder-item) .ico-corner.ico-top-left > a:not([style*="display:none"]):not([style*="display: none"]),
.byf-app-redesign .view-klein.folder-item:not(.special-folder-item) .ico-corner.ico-top-left > i,
.byf-app-redesign .view-klein.folder-item:not(.special-folder-item) .ico-corner.ico-top-left > span:not(.amount):not(.sr-only):not(.byf-tag-tooltip-template):not(.byf-icon-tooltip-template),
.byf-app-redesign .view-klein.folder-item:not(.special-folder-item) .ico-corner.ico-top-left > ul.tandwiel-dropdown,
.byf-app-redesign .view-klein.folder-item:not(.special-folder-item) .ico-corner.ico-top-left > .mac-selector-icon:not([style*="display:none"]):not([style*="display: none"]) {
    flex: 0 0 20px;
    width: 20px !important;
    min-width: 20px !important;
}

.byf-app-redesign .ico-corner:not(.ico-bottom-center) .tandwiel-dropdown .nav-item,
.byf-app-redesign .ico-corner:not(.ico-bottom-center) .tandwiel-dropdown .tandwiel,
.byf-app-redesign .ico-corner:not(.ico-bottom-center) .tandwiel-dropdown .locked {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    line-height: 1 !important;
}

.byf-app-redesign .ico-corner:not(.ico-bottom-center) > .mac-selector-icon[style*="display:none"],
.byf-app-redesign .ico-corner:not(.ico-bottom-center) > .mac-selector-icon[style*="display: none"] {
    display: none !important;
}

.byf-app-redesign .ico-corner:not(.ico-bottom-center) > .goToFolderIcon[style*="display:none"],
.byf-app-redesign .ico-corner:not(.ico-bottom-center) > .goToFolderIcon[style*="display: none"] {
    display: none !important;
}

.byf-app-redesign .ico-corner:not(.ico-bottom-center) > .mac-selector-icon > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.byf-app-redesign .ico-corner:not(.ico-bottom-center) > .mac-selector-icon .selected {
    display: none !important;
}

.byf-app-redesign .ico-corner:not(.ico-bottom-center) > .mac-selector-icon .unselected {
    display: inline-flex !important;
}

.byf-app-redesign .mac-selected .ico-corner:not(.ico-bottom-center) > .mac-selector-icon .selected {
    display: inline-flex !important;
}

.byf-app-redesign .mac-selected .ico-corner:not(.ico-bottom-center) > .mac-selector-icon .unselected {
    display: none !important;
}

.byf-app-redesign .ico-corner:not(.ico-bottom-center) > a > i,
.byf-app-redesign .ico-corner:not(.ico-bottom-center) > i,
.byf-app-redesign .ico-corner:not(.ico-bottom-center) > span:not(.amount):not(.sr-only):not(.byf-tag-tooltip-template):not(.byf-icon-tooltip-template) > i,
.byf-app-redesign .ico-corner:not(.ico-bottom-center) > .mac-selector-icon > span > i,
.byf-app-redesign .ico-corner:not(.ico-bottom-center) .tandwiel-dropdown .tandwiel > i,
.byf-app-redesign .ico-corner:not(.ico-bottom-center) .tandwiel-dropdown .locked > i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.byf-app-redesign .ico-corner:not(.ico-bottom-center) > .byf-tag-tooltip-template,
.byf-app-redesign .ico-corner:not(.ico-bottom-center) > .byf-icon-tooltip-template,
.byf-app-redesign .ico-corner:not(.ico-bottom-center) > .sr-only {
    display: none !important;
}

.byf-app-redesign .doc-item .ico-top-right:has(.tandwiel-dropdown),
.byf-app-redesign .special-folder-item .ico-top-right:has(.tandwiel-dropdown) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    height: var(--byf-redesign-card-meta-action) !important;
    min-width: var(--byf-redesign-card-meta-action) !important;
    min-height: var(--byf-redesign-card-meta-action) !important;
    padding: 0 !important;
    border-radius: var(--byf-redesign-radius-sm) !important;
    background: var(--byf-redesign-corner-surface) !important;
    box-shadow: var(--byf-redesign-corner-shadow) !important;
}

.byf-app-redesign .doc-item.view-klein .ico-top-right:has(.tandwiel-dropdown),
.byf-app-redesign .view-klein.special-folder-item .ico-top-right:has(.tandwiel-dropdown) {
    height: var(--byf-redesign-card-meta-action-small) !important;
    min-width: var(--byf-redesign-card-meta-action-small) !important;
    min-height: var(--byf-redesign-card-meta-action-small) !important;
}

.byf-app-redesign .doc-item .ico-top-right > div:has(> .tandwiel-dropdown),
.byf-app-redesign .special-folder-item .ico-top-right > div:has(> .tandwiel-dropdown) {
    display: inline-flex !important;
    flex: 0 0 var(--byf-redesign-card-meta-action);
    align-items: center !important;
    justify-content: center !important;
    width: var(--byf-redesign-card-meta-action) !important;
    min-width: var(--byf-redesign-card-meta-action) !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.byf-app-redesign .doc-item.view-klein .ico-top-right > div:has(> .tandwiel-dropdown),
.byf-app-redesign .view-klein.special-folder-item .ico-top-right > div:has(> .tandwiel-dropdown) {
    flex-basis: var(--byf-redesign-card-meta-action-small);
    width: var(--byf-redesign-card-meta-action-small) !important;
    min-width: var(--byf-redesign-card-meta-action-small) !important;
}

.byf-app-redesign .doc-item .ico-top-right > div:has(> .tandwiel-dropdown) > .tandwiel-dropdown,
.byf-app-redesign .special-folder-item .ico-top-right > div:has(> .tandwiel-dropdown) > .tandwiel-dropdown {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* List view */
.byf-app-redesign .view-list {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--byf-redesign-border);
    border-radius: var(--byf-redesign-radius);
    background: var(--byf-redesign-card);
    box-shadow: var(--byf-redesign-shadow-sm);
}

.byf-app-redesign #filelist.listview,
.byf-app-redesign .filelist-container.listview {
    display: block;
}

.byf-app-redesign .filelist-container .table {
    min-width: 880px;
    margin: 0;
    border-collapse: collapse;
}

/* Keep the list inside the workspace, but let the list itself scroll when the
 * fixed metadata columns no longer fit. This prevents dates, sizes and actions
 * from wrapping while leaving all remaining space to the name column. */
.byf-app-redesign .filelist-container,
.byf-app-redesign .filelist-container.listview,
.byf-app-redesign #filelist.listview {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.byf-app-redesign .view-list {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.byf-app-redesign .filelist-container.listview .table,
.byf-app-redesign #filelist.listview .table,
.byf-app-redesign .filelist-container .view-list .table {
    width: 100% !important;
    min-width: 980px !important;
    max-width: none !important;
    table-layout: fixed;
}

/* Keep list headers and rows on the same tracks. Cell-only width rules are
 * not reliable with colspan cells and allowed the legacy type column to grow. */
.byf-app-redesign .filelist-container .view-list .table col.list-col-type,
.byf-app-redesign .filelist-container.listview .table col.list-col-type,
.byf-app-redesign #filelist.listview .table col.list-col-type {
    width: 56px;
}

.byf-app-redesign .filelist-container .view-list .table col.list-col-select,
.byf-app-redesign .filelist-container.listview .table col.list-col-select,
.byf-app-redesign #filelist.listview .table col.list-col-select {
    width: 40px;
}

.byf-app-redesign .filelist-container .view-list .table col.list-col-content,
.byf-app-redesign .filelist-container.listview .table col.list-col-content,
.byf-app-redesign #filelist.listview .table col.list-col-content {
    width: 84px;
}

.byf-app-redesign .filelist-container .view-list .table col.list-col-date,
.byf-app-redesign .filelist-container.listview .table col.list-col-date,
.byf-app-redesign #filelist.listview .table col.list-col-date {
    width: 148px;
}

.byf-app-redesign .filelist-container .view-list .table col.list-col-actions,
.byf-app-redesign .filelist-container.listview .table col.list-col-actions,
.byf-app-redesign #filelist.listview .table col.list-col-actions {
    width: 132px;
}

.byf-app-redesign .filelist-container .view-list .table col.list-col-name,
.byf-app-redesign .filelist-container.listview .table col.list-col-name,
.byf-app-redesign #filelist.listview .table col.list-col-name {
    width: auto;
}

.byf-app-redesign .filelist-container.listview .table th,
.byf-app-redesign .filelist-container.listview .table td,
.byf-app-redesign #filelist.listview .table th,
.byf-app-redesign #filelist.listview .table td {
    min-width: 0 !important;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.byf-app-redesign .filelist-container .table th.list-select,
.byf-app-redesign .filelist-container .table td.list-select {
    padding: 12px 4px 12px 14px !important;
    text-align: center;
    vertical-align: middle;
    overflow: visible !important;
}

.byf-app-redesign .filelist-container .table td.list-select .mac-selector-icon {
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin: 0 !important;
    color: var(--byf-redesign-muted-foreground);
    font-size: 16px !important;
    line-height: 1 !important;
}

.byf-app-redesign .filelist-container .table td.list-select .mac-selector-icon:not([style*="display:none"]):not([style*="display: none"]) {
    display: inline-flex !important;
}

.byf-app-redesign .filelist-container .table td.list-select .mac-selector-icon span,
.byf-app-redesign .filelist-container .table td.list-select .mac-selector-icon i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    line-height: 1;
}

.byf-app-redesign .filelist-container .table td.list-select .mac-selector-icon .unselected {
    color: var(--byf-redesign-muted-foreground);
}

.byf-app-redesign .filelist-container .table tr.mac-selected td.list-select .mac-selector-icon .selected,
.byf-app-redesign .filelist-container .table td.list-select .mac-selector-icon .selected {
    color: var(--byf-redesign-primary);
}

.byf-app-redesign .filelist-container .table thead tr {
    background: var(--byf-redesign-card);
}

.byf-app-redesign .filelist-container .table th,
.byf-app-redesign .filelist-container .table td {
    box-sizing: border-box;
    padding: 12px 16px;
    border-color: var(--byf-redesign-border-soft) !important;
    color: var(--byf-redesign-muted-foreground) !important;
    font-size: 12px;
    vertical-align: middle;
}

/* The colgroup owns the layout. Neutralize legacy cell widths so headers,
 * folder counts and document rows always use the same tracks. */
.byf-app-redesign .filelist-container .view-list .table th.list-subitems,
.byf-app-redesign .filelist-container .view-list .table td.list-subitems,
.byf-app-redesign .filelist-container.listview .table th.list-subitems,
.byf-app-redesign .filelist-container.listview .table td.list-subitems,
.byf-app-redesign #filelist.listview .table th.list-subitems,
.byf-app-redesign #filelist.listview .table td.list-subitems,
.byf-app-redesign .filelist-container .view-list .table th.list-date,
.byf-app-redesign .filelist-container .view-list .table td.list-date,
.byf-app-redesign .filelist-container.listview .table th.list-date,
.byf-app-redesign .filelist-container.listview .table td.list-date,
.byf-app-redesign #filelist.listview .table th.list-date,
.byf-app-redesign #filelist.listview .table td.list-date {
    width: auto !important;
    text-align: center;
}

.byf-app-redesign .filelist-container .table th {
    color: var(--byf-redesign-muted-foreground) !important;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.byf-app-redesign .filelist-container .table tr.itemcontainer {
    transition: background 160ms ease;
}

.byf-app-redesign .filelist-container .table tbody tr.itemcontainer:hover {
    background: rgba(148, 163, 184, 0.12);
}

/* Keep shared list rows visibly related to the shared state used by tile view. */
.byf-app-redesign .filelist-container .table tbody tr.itemcontainer.shared-colored > td {
    background: var(--byf-redesign-primary-meta) !important;
}

.byf-app-redesign .filelist-container .table tbody tr.itemcontainer.shared-colored:hover > td {
    background: color-mix(in srgb, var(--byf-redesign-primary-meta) 88%, #cbd5e1) !important;
}

.byf-app-redesign .filelist-container .table .list-link,
.byf-app-redesign .filelist-container .table .folder-item.list-link {
    color: var(--byf-redesign-foreground) !important;
    font-size: 13px;
    font-weight: 400;
    text-decoration: none !important;
}

.byf-app-redesign .filelist-container .table .list-name-editable {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 400 !important;
    text-decoration: none !important;
    vertical-align: middle;
}

.byf-app-redesign .filelist-container .table .list-link:hover,
.byf-app-redesign .filelist-container .table .list-name-editable:hover {
    text-decoration: none !important;
}

.byf-app-redesign .filelist-container .table .list-name-editable strong {
    font-weight: 400 !important;
}

.byf-app-redesign .filelist-container .table .list-name-editable .editNameIcon {
    flex: 0 0 auto;
    color: var(--byf-redesign-primary) !important;
    font-size: 13px;
    line-height: 1;
}

.byf-app-redesign .filelist-container .table .list-name-editable:not(:hover) .editNameIcon,
.byf-app-redesign .filelist-container .table .list-name-editable.edit_disabled .editNameIcon {
    display: none !important;
}

.byf-app-redesign .filelist-container .table .list-name-editable:not(.edit_disabled):hover .editNameIcon {
    display: inline-flex !important;
}

.byf-app-redesign .filelist-container .table .list-type {
    width: auto;
    padding-left: 8px !important;
    padding-right: 8px !important;
    text-align: center;
}

.byf-app-redesign .filelist-container .table .list-type > i {
    display: none;
}

.byf-app-redesign .filelist-container .table #folder-share-btn.byondfiles-tooltip,
.byf-app-redesign .filelist-container .table #doc-share-btn.byondfiles-tooltip {
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    color: var(--byf-redesign-primary) !important;
    vertical-align: middle;
}

.byf-app-redesign .filelist-container .table #folder-share-btn.byondfiles-tooltip i,
.byf-app-redesign .filelist-container .table #doc-share-btn.byondfiles-tooltip i {
    color: var(--byf-redesign-primary) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1;
}

.byf-app-redesign .filelist-container .table .list-type img {
    display: inline-block;
    width: 32px;
    height: 32px;
}

.byf-app-redesign .filelist-container .table td.list-subitems {
    width: 52px;
    padding-right: 8px !important;
    padding-left: 8px !important;
    text-align: center;
    white-space: nowrap;
}

.byf-app-redesign .filelist-container .table td.list-subitems > i,
.byf-app-redesign .filelist-container .table td.list-subitems .mail-attachment,
.byf-app-redesign .filelist-container .table td.list-subitems .quickfolder-list-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    white-space: nowrap;
}

.byf-app-redesign .filelist-container .table td.list-subitems > i {
    width: auto;
    height: auto;
    margin: 0 4px 0 0 !important;
    font-size: 14px !important;
    line-height: 1;
}

.byf-app-redesign .filelist-container .table td.list-subitems .mail-attachment {
    gap: 6px;
    margin: 0;
    line-height: 1;
}

.byf-app-redesign .filelist-container .table td.list-subitems .mail-attachment > i {
    margin: 0 !important;
    font-size: 14px !important;
}

.byf-app-redesign .filelist-container .table .quickfolder-list-counts {
    white-space: nowrap;
}

.byf-app-redesign .filelist-container .table .quickfolder-list-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 14px;
    color: var(--byf-redesign-muted-foreground);
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
}

.byf-app-redesign .filelist-container .table .quickfolder-list-count:last-child {
    margin-right: 0;
}

.byf-app-redesign .filelist-container .table .quickfolder-list-count i {
    display: inline-flex;
    width: 14px;
    height: 14px;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    color: inherit;
    font-size: 14px;
    line-height: 1;
}

.byf-app-redesign .filelist-container .table .quickfolders.folder-item .list-type > i {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    color: var(--byf-redesign-quickfolder-accent) !important;
    font-size: 18px;
    line-height: 1;
}

.byf-app-redesign .filelist-container .table .quickfolders.folder-item .list-type img {
    display: none !important;
}

.byf-app-redesign .view-list.quickfolders .table .list-type {
    width: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.byf-app-redesign .view-list.quickfolders .table tbody .list-type > i,
.byf-app-redesign .view-list.quickfolders .table tbody .list-type > img {
    display: none !important;
}

/* Keep quickfolders recognisably green in list view as well. Shared rows use
 * the same opaque surface as their tile counterpart, without stacked alpha. */
.byf-app-redesign .view-list.quickfolders .quickfolder-list-row > td {
    transition: background-color 160ms ease, border-color 160ms ease;
}

.byf-app-redesign .view-list.quickfolders .quickfolder-list-row:not(.shared-quickfolder):hover > td {
    background: color-mix(in srgb, var(--byf-redesign-quickfolder-base) 7%, #fff) !important;
    border-color: color-mix(in srgb, var(--byf-redesign-quickfolder-base) 24%, #fff) !important;
}

.byf-app-redesign .view-list.quickfolders .quickfolder-list-row.shared-quickfolder > td {
    background: var(--byf-redesign-quickfolder-shared) !important;
    border-color: color-mix(in srgb, var(--byf-redesign-quickfolder-shared-border) 42%, #fff) !important;
}

.byf-app-redesign .view-list.quickfolders .quickfolder-list-row.shared-quickfolder:hover > td {
    background: color-mix(in srgb, var(--byf-redesign-quickfolder-base) 52%, #fff) !important;
    border-color: var(--byf-redesign-quickfolder-shared-border) !important;
}

.byf-app-redesign .view-list.quickfolders .quickfolder-list-name {
    white-space: nowrap;
}

.byf-app-redesign .view-list.quickfolders .quickfolder-list-name .list-link {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.byf-app-redesign .view-list.quickfolders .shared-quickfolder .quickfolder-list-name .list-link {
    max-width: calc(100% - 34px);
}

.byf-app-redesign .view-list.quickfolders .quickfolder-list-shared {
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    color: color-mix(in srgb, var(--byf-redesign-quickfolder-base) 55%, #047857) !important;
    font-size: 14px !important;
    line-height: 1;
    vertical-align: middle;
}

.byf-app-redesign .view-list.quickfolders .quickfolder-list-shared i {
    color: inherit !important;
    font-size: 14px !important;
    line-height: 1;
}

.byf-app-redesign .view-list.quickfolders .quickfolder-list-row:hover .list-type > i,
.byf-app-redesign .view-list.quickfolders .quickfolder-list-row:hover .quickfolder-list-count .fa-folder-open {
    color: var(--byf-redesign-quickfolder-shared-border) !important;
}

.byf-app-redesign .filelist-container .table .list-actions {
    width: auto;
    padding-right: 16px !important;
    padding-left: 8px !important;
    white-space: nowrap;
    text-align: right;
    font-size: 0;
    line-height: 1;
    vertical-align: middle !important;
}

.byf-app-redesign .filelist-container .table .list-actions .tandwiel-dropdown,
.byf-app-redesign .filelist-container .table .list-actions .tandwiel-dropdown > .nav-item {
    display: inline-flex !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.byf-app-redesign .filelist-container .table .list-actions > div:has(.tandwiel-dropdown) {
    display: inline-flex !important;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    margin-left: 4px !important;
    vertical-align: middle;
}

.byf-app-redesign .filelist-container .table .list-actions > .tandwiel-dropdown > .nav-item > a,
.byf-app-redesign .filelist-container .table .list-actions > .tandwiel-dropdown > .nav-item > button,
.byf-app-redesign .filelist-container .table .list-actions > div:has(.tandwiel-dropdown) .tandwiel-dropdown > .nav-item > a,
.byf-app-redesign .filelist-container .table .list-actions > div:has(.tandwiel-dropdown) .tandwiel-dropdown > .nav-item > button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    vertical-align: middle;
}

.byf-app-redesign .filelist-container .table .list-actions .tandwiel-dropdown,
.byf-app-redesign .filelist-container .table .list-actions .tandwiel-dropdown > .nav-item {
    margin: 0 !important;
    padding: 0 !important;
}

.byf-app-redesign .filelist-container .table .list-actions > a,
.byf-app-redesign .filelist-container .table .list-actions > button,
.byf-app-redesign .filelist-container .table .list-actions > .tandwiel-dropdown,
.byf-app-redesign .filelist-container .table .list-actions > div:has(.tandwiel-dropdown) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-left: 4px !important;
    vertical-align: middle;
    font-size: 12px;
}

.byf-app-redesign .filelist-container .table .list-actions > a:first-child,
.byf-app-redesign .filelist-container .table .list-actions > button:first-child,
.byf-app-redesign .filelist-container .table .list-actions > .tandwiel-dropdown:first-child,
.byf-app-redesign .filelist-container .table .list-actions > div:has(.tandwiel-dropdown):first-child {
    margin-left: 0 !important;
}

.byf-app-redesign .filelist-container .table .list-actions > a,
.byf-app-redesign .filelist-container .table .list-actions > button,
.byf-app-redesign .filelist-container .table .list-actions > .tandwiel-dropdown > .nav-item > a,
.byf-app-redesign .filelist-container .table .list-actions > .tandwiel-dropdown > .nav-item > button,
.byf-app-redesign .filelist-container .table .list-actions > div:has(.tandwiel-dropdown) > .tandwiel-dropdown > .nav-item > a,
.byf-app-redesign .filelist-container .table .list-actions > div:has(.tandwiel-dropdown) > .tandwiel-dropdown > .nav-item > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    width: 32px;
    height: 32px;
    border-radius: var(--byf-redesign-radius-sm);
    color: var(--byf-redesign-muted-foreground) !important;
}

.byf-app-redesign .filelist-container .table .list-actions .tandwiel.contextmenutrigger span {
    display: inline-flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.byf-app-redesign .filelist-container .table .list-actions > a > i,
.byf-app-redesign .filelist-container .table .list-actions > button > i,
.byf-app-redesign .filelist-container .table .list-actions > .tandwiel-dropdown > .nav-item > a > span > i,
.byf-app-redesign .filelist-container .table .list-actions > .tandwiel-dropdown > .nav-item > button > span > i,
.byf-app-redesign .filelist-container .table .list-actions > div:has(.tandwiel-dropdown) > .tandwiel-dropdown > .nav-item > a > span > i,
.byf-app-redesign .filelist-container .table .list-actions > div:has(.tandwiel-dropdown) > .tandwiel-dropdown > .nav-item > button > span > i {
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1;
}

.byf-app-redesign .filelist-container .table .list-actions > a:hover,
.byf-app-redesign .filelist-container .table .list-actions > button:hover,
.byf-app-redesign .filelist-container .table .list-actions > .tandwiel-dropdown > .nav-item > a:hover,
.byf-app-redesign .filelist-container .table .list-actions > .tandwiel-dropdown > .nav-item > button:hover,
.byf-app-redesign .filelist-container .table .list-actions > div:has(.tandwiel-dropdown) > .tandwiel-dropdown > .nav-item > a:hover,
.byf-app-redesign .filelist-container .table .list-actions > div:has(.tandwiel-dropdown) > .tandwiel-dropdown > .nav-item > button:hover {
    background: var(--byf-redesign-muted);
    color: var(--byf-redesign-primary) !important;
}

.byf-app-redesign .filelist-container:has(.tandwiel-dropdown .dropdown-menu.show),
.byf-app-redesign .filelist-container.listview:has(.tandwiel-dropdown .dropdown-menu.show),
.byf-app-redesign #filelist.listview:has(.tandwiel-dropdown .dropdown-menu.show),
.byf-app-redesign .view-list:has(.tandwiel-dropdown .dropdown-menu.show) {
    overflow: visible !important;
}

.byf-app-redesign .filelist-container .table tbody tr.itemcontainer:has(.tandwiel-dropdown .dropdown-menu.show) {
    position: relative;
    z-index: 12000;
}

.byf-app-redesign .filelist-container .table tbody tr.itemcontainer:has(.tandwiel-dropdown .dropdown-menu.show) > td,
.byf-app-redesign .filelist-container .table .list-actions,
.byf-app-redesign .filelist-container .table .list-actions > div:has(.tandwiel-dropdown),
.byf-app-redesign .filelist-container .table .list-actions .tandwiel-dropdown,
.byf-app-redesign .filelist-container .table .list-actions .tandwiel-dropdown > .nav-item {
    overflow: visible !important;
}

.byf-app-redesign .filelist-container .table tbody tr.itemcontainer:has(.tandwiel-dropdown .dropdown-menu.show) > td {
    position: relative;
    z-index: 12000;
}

.byf-app-redesign .filelist-container .table .list-actions .tandwiel-dropdown {
    position: relative;
    z-index: 12010;
}

.byf-app-redesign .filelist-container:has(.tandwiel-dropdown .dropdown-menu.show) .table tbody tr.itemcontainer:not(:has(.tandwiel-dropdown .dropdown-menu.show)) .list-actions,
.byf-app-redesign .filelist-container:has(.tandwiel-dropdown .dropdown-menu.show) .table tbody tr.itemcontainer:not(:has(.tandwiel-dropdown .dropdown-menu.show)) .tandwiel-dropdown {
    position: relative;
    z-index: 1;
}

/* Cards, modals, dropdowns */
.byf-app-redesign .dropdown-menu,
.byf-app-redesign .contextmenu,
.byf-app-redesign .tandwiel-dropdown .dropdown-menu {
    overflow: hidden;
    border: 1px solid var(--byf-redesign-border);
    border-radius: var(--byf-redesign-radius);
    background: var(--byf-redesign-card) !important;
    box-shadow: var(--byf-redesign-shadow-md);
}

.byf-app-redesign .tandwiel-dropdown .dropdown-menu.contextmenu {
    position: absolute !important;
    top: 30px !important;
    right: 0 !important;
    left: auto !important;
    z-index: 12020;
    isolation: isolate;
    min-width: 230px;
    width: max-content;
    max-width: 320px;
    overflow: hidden !important;
    padding: 6px;
    border-radius: 14px;
    background: var(--byf-redesign-card) !important;
    background-clip: padding-box;
    color: var(--byf-redesign-foreground) !important;
}

.byf-app-redesign .tandwiel-dropdown .dropdown-menu.contextmenu:not(.show) {
    display: none;
}

.byf-app-redesign .tandwiel-dropdown .dropdown-menu.contextmenu .loaderstyle {
    position: relative;
    top: auto;
    display: block !important;
    width: 100%;
    height: 44px;
    min-width: 220px;
    background: transparent;
    z-index: auto;
}

.byf-app-redesign .tandwiel-dropdown .dropdown-menu.contextmenu .loadercontent {
    position: absolute;
    top: 50% !important;
    left: 50%;
    width: auto;
    margin: 0;
    transform: translate(-50%, -50%);
}

.byf-app-redesign .dropdown-item {
    color: var(--byf-redesign-foreground) !important;
    font-size: 13px;
    font-weight: 600;
}

.byf-app-redesign .contextmenu .dropdown-divider {
    display: none;
}

.byf-app-redesign .contextmenu .dropdown-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    height: auto;
    min-height: 38px;
    margin: 0;
    padding: 8px 11px !important;
    border-radius: 10px;
    background: transparent !important;
    text-align: left;
    white-space: nowrap;
}

.byf-app-redesign .contextmenu .dropdown-item:last-child {
    border-bottom: 0;
}

.byf-app-redesign .contextmenu .dropdown-item i,
.byf-app-redesign .contextmenu .dropdown-item svg {
    display: inline-flex;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    text-align: center;
    color: var(--byf-redesign-foreground) !important;
    font-size: 14px;
    line-height: 1;
}

.byf-app-redesign .dropdown-item:hover,
.byf-app-redesign .dropdown-item.active {
    background: var(--byf-redesign-muted) !important;
    color: var(--byf-redesign-foreground) !important;
}

.byf-app-redesign .modal-content,
.byf-app-redesign .custom-modal .modal-content {
    overflow: hidden;
    border: 1px solid var(--byf-redesign-border);
    border-radius: var(--byf-redesign-radius);
    background: var(--byf-redesign-card);
    color: var(--byf-redesign-foreground);
    box-shadow: 0 24px 56px rgba(15, 23, 42, 0.16);
}

.byf-app-redesign .modal-header {
    border-bottom: 1px solid var(--byf-redesign-border);
    background: var(--byf-redesign-card) !important;
    color: var(--byf-redesign-foreground) !important;
}

.byf-app-redesign .modal-title,
.byf-app-redesign .modal-header h5,
.byf-app-redesign .modal-header h4 {
    color: var(--byf-redesign-foreground) !important;
    font-weight: 800;
}

.byf-app-redesign .modal-content .modal-header .close {
    color: var(--byf-redesign-primary) !important;
    opacity: 1;
}

.byf-app-redesign .modal-content .modal-header .close:hover {
    color: var(--byf-redesign-primary) !important;
    opacity: .78;
}

.byf-app-redesign .modal-footer {
    border-top: 1px solid var(--byf-redesign-border);
    background: var(--byf-redesign-card);
}

/* Legacy colorset rules style .alert-custom footers with the tenant surface
 * color. Modal footers belong to the neutral modal surface in the redesign. */
.byf-app-redesign .modal-content > .modal-footer,
.byf-app-redesign .modal-content > .modal-footer.alert-custom,
.byf-app-redesign .modal-content > .modal-footer > .alert.alert-custom,
.byf-app-redesign .modal-content > .dashboard-modal-card__footer {
    background: #fff !important;
}

.byf-app-redesign #modal-general .byf-metadata-modal-header {
    align-items: center;
}

.byf-app-redesign #modal-general .byf-metadata-modal-body {
    padding: 20px 24px 24px;
}

.byf-app-redesign #modal-general .metadataflipoutcontainer form {
    height: auto !important;
    max-height: min(62vh, 620px);
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 4px;
}

.byf-app-redesign #modal-general .metadataflipoutcontainer .bottomzone {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--byf-redesign-border);
}

.byf-app-redesign .btn,
.byf-app-redesign .btn-add {
    border-radius: var(--byf-redesign-radius-sm);
    font-size: 13px;
    font-weight: 700;
    box-shadow: none;
}

.byf-app-redesign .modal-footer .btn,
.byf-app-redesign .modal-footer .btn-add,
.byf-app-redesign .modal-footer .btn-white,
.byf-app-redesign .dashboard-modal-card__footer .btn,
.byf-app-redesign .dashboard-modal-card__footer .btn-add,
.byf-app-redesign .dashboard-modal-card__footer .btn-white {
    display: inline-flex;
    width: auto !important;
    max-width: none;
    min-width: 110px;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding-right: 22px !important;
    padding-left: 22px !important;
    white-space: nowrap;
}

.byf-app-redesign .modal-footer .d-flex,
.byf-app-redesign .dashboard-modal-card__footer .d-flex {
    flex-wrap: wrap;
    gap: 8px;
}

.byf-app-redesign .modal-footer .btn.mr-2,
.byf-app-redesign .dashboard-modal-card__footer .btn.mr-2 {
    margin-right: 0 !important;
}

.byf-app-redesign .btn-add,
.byf-app-redesign .btn-primary {
    border-color: var(--byf-redesign-primary) !important;
    background: var(--byf-redesign-primary) !important;
    color: var(--byf-redesign-primary-foreground) !important;
}

.byf-app-redesign .btn-add:hover,
.byf-app-redesign .btn-primary:hover {
    border-color: var(--byf-redesign-primary-hover) !important;
    background: var(--byf-redesign-primary-hover) !important;
}

.byf-app-redesign .emptymessage {
    width: 100%;
    margin: 0;
    padding: 24px !important;
    border: 1px solid var(--byf-redesign-border);
    border-radius: var(--byf-redesign-radius);
    background: var(--byf-redesign-card);
    color: var(--byf-redesign-muted-foreground);
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--byf-redesign-shadow-sm);
}

/* Floating create action */
.byf-app-redesign .bol-add {
    right: 28px !important;
    bottom: 28px !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 999px;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.2);
}

.byf-app-redesign .bol-add.flipoutpos {
    right: 470px !important;
}

.byf-app-redesign .bol-add i.plus,
.byf-app-redesign .bol-add i.filter {
    font-size: 28px;
}

.byf-app-redesign .dropdown-test {
    overflow: hidden;
    min-width: 226px;
    padding: 6px;
    border: 1px solid var(--byf-redesign-border) !important;
    border-radius: var(--byf-redesign-radius);
    background: var(--byf-redesign-card) !important;
    box-shadow: var(--byf-redesign-shadow-md);
}

.byf-app-redesign .dropdown-test .dropdown-item-bol {
    display: flex;
    float: none;
    width: 100%;
    min-height: 38px;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 8px 10px !important;
    border-radius: var(--byf-redesign-radius-sm);
    background: transparent !important;
    color: var(--byf-redesign-foreground) !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    box-shadow: none !important;
}

.byf-app-redesign .dropdown-test .dropdown-item-bol + .dropdown-item-bol {
    margin-top: 2px;
}

.byf-app-redesign .dropdown-test .dropdown-item-bol:hover {
    background: var(--byf-redesign-muted) !important;
    color: var(--byf-redesign-foreground) !important;
    text-decoration: none;
}

.byf-app-redesign .dropdown-test .dropdown-item-bol i {
    flex: 0 0 24px;
    width: 24px;
    margin: 0;
    color: var(--byf-redesign-foreground) !important;
    font-size: 15px;
    text-align: center;
}

/* Flipout and side panels */
.byf-app-redesign #flipout,
.byf-app-redesign #external-flipout {
    border-left: 1px solid var(--byf-redesign-border);
    background: var(--byf-redesign-card) !important;
    box-shadow: -16px 0 32px rgba(15, 23, 42, 0.08);
}

.byf-app-redesign #flipout-container,
.byf-app-redesign #external-flipout-container {
    background: var(--byf-redesign-card);
}

.byf-app-redesign :where(a, button, input, select, textarea, [tabindex], .btn, .dropdown-item):focus,
.byf-app-redesign :where(a, button, input, select, textarea, [tabindex], .btn, .dropdown-item):focus-visible,
.byf-app-redesign :where(a, button, input, select, textarea, [tabindex], .btn, .dropdown-item):active {
    outline: 0 !important;
    box-shadow: none !important;
}

.byf-app-redesign :where(.dropdown-item, .dropdown-item-bol, .byf-note-toggle, .btn):focus,
.byf-app-redesign :where(.dropdown-item, .dropdown-item-bol, .byf-note-toggle, .btn):focus-visible,
.byf-app-redesign :where(.dropdown-item, .dropdown-item-bol, .byf-note-toggle, .btn):active {
    text-decoration: none !important;
}

@media (max-width: 1199.98px) {
    .byf-app-redesign #navbar-custom-m,
    .byf-app-redesign .sticky#navbar-custom-m,
    .byf-app-redesign .navbar-custom {
        display: none !important;
        left: 0;
        height: 0;
        min-height: 0;
        overflow: hidden;
    }

    .byf-app-redesign .open-onscroll {
        display: none !important;
    }

    .byf-app-redesign #maincontainer {
        flex-basis: calc(100% - var(--byf-redesign-sidebar-collapsed));
        width: calc(100% - var(--byf-redesign-sidebar-collapsed)) !important;
        margin-left: var(--byf-redesign-sidebar-collapsed);
        padding-top: 0 !important;
    }

    .byf-app-redesign.body-sidebar-expanded #maincontainer {
        flex-basis: calc(100% - var(--byf-redesign-sidebar-expanded));
        width: calc(100% - var(--byf-redesign-sidebar-expanded)) !important;
        margin-left: var(--byf-redesign-sidebar-expanded);
    }

    .byf-app-redesign #workspace,
    .byf-app-redesign #searchworkspace,
    .byf-app-redesign .workspace-split-screen,
    .byf-app-redesign .searchworkspace-split-screen {
        display: block;
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        align-content: flex-start;
        justify-content: flex-start;
        padding: 18px !important;
    }

    .byf-app-redesign #workspace.task-workspace {
        padding: 0 !important;
    }

    .byf-app-redesign .navbar-custom .nav-link span {
        display: none;
    }

    .byf-app-redesign .bol-add {
        right: 22px !important;
        bottom: 22px !important;
        z-index: 70;
        width: 52px !important;
        height: 52px !important;
    }

    .byf-app-redesign .bol-add i.plus,
    .byf-app-redesign .bol-add i.filter {
        font-size: 24px;
    }

    .byf-app-redesign .previewactionbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px !important;
        padding: 8px 10px !important;
        border: 1px solid var(--byf-redesign-border);
        border-radius: var(--byf-redesign-radius);
        background: var(--byf-redesign-card);
        box-shadow: var(--byf-redesign-shadow-sm);
        min-width: 0;
        overflow: visible;
    }

    .byf-app-redesign .previewactionbar > .disableselectable:not(.collapsedcrumb) {
        display: flex !important;
        grid-column: 2;
        grid-row: 1;
        min-height: 32px;
        min-width: 0;
        max-width: 100%;
        align-items: center;
        justify-content: flex-end !important;
        gap: 6px;
        padding: 0 !important;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .byf-app-redesign .previewactionbar > .disableselectable:not(.collapsedcrumb) > div:first-child:not(.mobile-crumb-actions),
    .byf-app-redesign .previewactionbar .crumb-actions {
        display: none !important;
    }

    .byf-app-redesign .previewactionbar .collapsedcrumb {
        display: flex !important;
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        max-width: 100%;
        align-items: center;
        justify-self: stretch;
        padding: 0 !important;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .byf-app-redesign .previewactionbar .collapsedcrumb > div[class*="col-"] {
        display: flex !important;
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
        max-width: 100%;
        padding: 0 !important;
    }

    .byf-app-redesign .previewactionbar .mobile-crumb-actions {
        display: flex !important;
        flex: 0 0 auto;
        justify-content: flex-end;
        align-items: center;
        gap: 6px;
        min-width: 0;
        max-width: 100%;
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow: visible !important;
        padding: 0 !important;
        background: transparent;
    }

    .byf-app-redesign .previewactionbar .mobile-crumb-actions .tandwiel-dropdown,
    .byf-app-redesign .previewactionbar .mobile-crumb-actions .tandwiel-dropdown > .nav-item {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        padding: 0 !important;
    }

    .byf-app-redesign .previewactionbar .mobile-crumb-actions .tandwiel.contextmenutrigger {
        width: 32px;
        min-width: 32px;
        height: 32px;
        border-radius: var(--byf-redesign-radius-sm);
    }

    .byf-app-redesign .previewactionbar nav,
    .byf-app-redesign .previewactionbar .breadcrumb,
    .byf-app-redesign .previewactionbar .crumbsection,
    .byf-app-redesign .previewactionbar .crumb-toggle {
        min-width: 0;
        max-width: 100%;
    }

    .byf-app-redesign .previewactionbar .collapsedcrumb .breadcrumb {
        width: 100%;
        min-height: 32px;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .byf-app-redesign .previewactionbar .crumbsection {
        display: flex;
        width: 100%;
        align-items: center;
        gap: 6px;
    }

    .byf-app-redesign .previewactionbar .byf-compact-utility-controls,
    .byf-app-redesign .previewactionbar .byf-compact-nav-controls {
        display: inline-flex;
    }

    .byf-app-redesign .previewactionbar .crumbsection > ul {
        flex: 1 1 auto;
        min-width: 0;
        margin-right: 0 !important;
    }

    .byf-app-redesign .previewactionbar .crumbsection > ul > .nav-item,
    .byf-app-redesign .previewactionbar .crumbsection > ul > .nav-item > .crumb-toggle {
        width: 100%;
        min-width: 0;
    }

    .byf-app-redesign .previewactionbar .crumb-toggle {
        display: inline-flex;
        width: 100%;
        height: 32px;
        align-items: center;
        gap: 8px;
        overflow: hidden;
        padding: 0 10px;
        border-radius: var(--byf-redesign-radius-sm);
        background: transparent;
        color: var(--byf-redesign-foreground) !important;
    }

    .byf-app-redesign .previewactionbar .crumb-toggle .breadcrumb-item,
    .byf-app-redesign .previewactionbar .collapsedcrumb .breadcrumb-item.active {
        overflow: hidden;
        min-width: 0;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .byf-app-redesign .previewactionbar #crumblist {
        min-width: min(320px, calc(100vw - 36px)) !important;
        max-width: calc(100vw - 36px);
        overflow-x: hidden;
        padding: 6px !important;
        border: 1px solid var(--byf-redesign-border);
        border-radius: var(--byf-redesign-radius-sm);
        box-shadow: var(--byf-redesign-shadow-md);
    }

    .byf-app-redesign .previewactionbar #crumblist .dropdown-item {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 34px;
        border-radius: var(--byf-redesign-radius-sm);
        color: var(--byf-redesign-foreground) !important;
        font-size: 12px;
        font-weight: 500;
    }

    .byf-app-redesign .previewactionbar .mobile-crumb-actions > * {
        flex: 0 0 auto;
        margin-right: 0 !important;
    }

    .byf-app-redesign .previewactionbar .mobile-crumb-actions .flipoutlink,
    .byf-app-redesign .previewactionbar .mobile-crumb-actions .byf-mobile-toolbar-trigger,
    .byf-app-redesign .previewactionbar .mobile-crumb-actions .tandwiel.contextmenutrigger {
        flex: 0 0 32px;
    }

    .byf-app-redesign .previewactionbar .mobile-crumb-actions .dropdown-menu {
        right: 0 !important;
        left: auto !important;
        transform: none !important;
    }

    .byf-app-redesign .previewactionbar .byf-mobile-toolbar-trigger {
        width: 32px;
        min-width: 32px;
        height: 32px;
        border-radius: var(--byf-redesign-radius-sm);
        background: var(--byf-redesign-muted);
        color: var(--byf-redesign-foreground) !important;
    }

    .byf-app-redesign .previewactionbar .byf-mobile-toolbar-dropdown {
        min-width: 220px !important;
    }

    .byf-app-redesign .previewactionbar .byf-mobile-toolbar-dropdown .dropdown-item {
        text-align: left !important;
    }
}

@media (max-width: 767.98px) {
    .byf-app-redesign #workspace,
    .byf-app-redesign #searchworkspace,
    .byf-app-redesign .workspace-split-screen,
    .byf-app-redesign .searchworkspace-split-screen {
        padding: 14px !important;
    }

    .byf-app-redesign #workspace.task-workspace {
        padding: 0 !important;
    }

    .byf-app-redesign .previewactionbar > .disableselectable {
        gap: 7px;
        padding: 0 !important;
        border-radius: 0;
    }

    .byf-app-redesign .previewactionbar .mobile-crumb-actions {
        justify-content: flex-end;
        overflow-x: visible;
        overflow-y: visible;
        padding-bottom: 2px !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .byf-app-redesign .previewactionbar .mobile-crumb-actions::-webkit-scrollbar {
        display: none;
    }

    .byf-app-redesign .previewactionbar .mobile-crumb-actions a,
    .byf-app-redesign .previewactionbar .mobile-crumb-actions .dropdown-toggle {
        width: 28px;
        min-width: 28px;
        height: 28px;
    }

    .byf-app-redesign .previewactionbar .mobile-crumb-actions .byf-mobile-toolbar-trigger {
        width: 32px;
        min-width: 32px;
        height: 32px;
    }

    .byf-app-redesign .previewactionbar .collapsedcrumb .breadcrumb-item,
    .byf-app-redesign .previewactionbar .crumb-toggle {
        font-size: 12px;
    }

    .byf-app-redesign .filelist-container {
        gap: 14px;
        justify-content: center;
    }

    .byf-app-redesign .view-groot.flex-item {
        width: min(210px, calc(50vw - 24px));
    }

    .byf-app-redesign .view-groot.flex-item .flex-item-container-file,
    .byf-app-redesign .view-groot.flex-item .flex-item-container {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .byf-app-redesign .previewactionbar {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .byf-app-redesign .previewactionbar .collapsedcrumb {
        grid-column: 1;
        grid-row: 1;
    }

    .byf-app-redesign .previewactionbar > .disableselectable:not(.collapsedcrumb) {
        grid-column: 1;
        grid-row: 2;
        justify-content: flex-start !important;
    }

    .byf-app-redesign .previewactionbar .mobile-crumb-actions {
        justify-content: flex-start;
    }
}

@container byf-toolbar (min-width: 1201px) and (max-width: 1800px) {
    .byf-app-redesign .previewactionbar {
        display: block;
        margin-bottom: 12px !important;
        padding: 0 !important;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        min-width: 0;
        overflow: visible;
    }

    .byf-app-redesign .previewactionbar > .disableselectable:not(.collapsedcrumb) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        align-items: center;
        gap: 8px 12px;
        min-height: 0;
        min-width: 0;
        padding: 10px 14px !important;
        border: 1px solid var(--byf-redesign-border);
        border-radius: var(--byf-redesign-radius);
        background: var(--byf-redesign-card);
        box-shadow: var(--byf-redesign-shadow-sm);
    }

    .byf-app-redesign .previewactionbar > .disableselectable:not(.collapsedcrumb) > div:first-child:not(.mobile-crumb-actions) {
        display: block !important;
        grid-column: 1;
        grid-row: 1 / span 2;
        width: 100%;
        min-width: 0;
        overflow: visible;
        z-index: 1;
    }

    .byf-app-redesign .previewactionbar > .disableselectable:not(.collapsedcrumb) > div:first-child:not(.mobile-crumb-actions) nav {
        width: 100%;
        min-width: 0;
    }

    .byf-app-redesign .previewactionbar .crumb-actions {
        display: flex !important;
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        align-items: center;
        gap: 10px;
        padding-left: 0;
        z-index: 2;
    }

    .byf-app-redesign .previewactionbar > .disableselectable:not(.collapsedcrumb) > .breadcrumb.file-view {
        display: flex !important;
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        align-self: start;
        min-width: max-content;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 2;
    }

    .byf-app-redesign .previewactionbar .collapsedcrumb,
    .byf-app-redesign .previewactionbar .mobile-crumb-actions {
        display: none !important;
    }

    .byf-app-redesign .previewactionbar ol.breadcrumb {
        display: flex;
        flex-wrap: wrap;
        column-gap: 4px;
        row-gap: 6px;
        align-items: center;
        overflow: visible;
        padding: 0;
    }

    .byf-app-redesign .previewactionbar .byf-crumb-row-break {
        /*display: block;*/
        order: 2;
        flex: 0 0 100%;
        width: 100%;
        height: 0;
        min-height: 0;
        margin: 0;
        padding: 0;
    }

    .byf-app-redesign .previewactionbar #history,
    .byf-app-redesign .previewactionbar #camerarollicon,
    .byf-app-redesign .previewactionbar #briefcaseicon {
        order: 1;
    }

    .byf-app-redesign .previewactionbar .nav-arrow,
    .byf-app-redesign .previewactionbar .nav-arrow-disabled,
    .byf-app-redesign .previewactionbar .fullcrumb,
    .byf-app-redesign .previewactionbar .filecrumbitem,
    .byf-app-redesign .previewactionbar .copy-link {
        order: 3;
    }

    .byf-app-redesign .previewactionbar .fullcrumb,
    .byf-app-redesign .previewactionbar .filecrumbitem {
        max-width: none;
        overflow: visible;
        text-overflow: clip;
    }

    .byf-app-redesign .previewactionbar .filecrumbitem {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .byf-app-redesign .previewactionbar .breadcrumb-item-link {
        max-width: none;
        overflow: visible;
        text-overflow: clip;
        white-space: nowrap;
    }
}

@container byf-toolbar (max-width: 1200px) {
    .byf-app-redesign .previewactionbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px !important;
        padding: 8px 10px !important;
        border: 1px solid var(--byf-redesign-border);
        border-radius: var(--byf-redesign-radius);
        background: var(--byf-redesign-card);
        box-shadow: var(--byf-redesign-shadow-sm);
        min-width: 0;
        overflow: visible;
    }

    .byf-app-redesign .previewactionbar > .disableselectable:not(.collapsedcrumb) {
        display: flex !important;
        grid-column: 2;
        grid-row: 1;
        min-height: 32px;
        min-width: 0;
        max-width: 100%;
        align-items: center;
        justify-content: flex-end !important;
        gap: 6px;
        padding: 0 !important;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .byf-app-redesign .previewactionbar > .disableselectable:not(.collapsedcrumb) > div:first-child:not(.mobile-crumb-actions),
    .byf-app-redesign .previewactionbar .crumb-actions {
        display: none !important;
    }

    .byf-app-redesign .previewactionbar .collapsedcrumb {
        display: flex !important;
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        max-width: 100%;
        align-items: center;
        justify-self: stretch;
        padding: 0 !important;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .byf-app-redesign .previewactionbar .collapsedcrumb > div[class*="col-"] {
        display: flex !important;
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
        max-width: 100%;
        padding: 0 !important;
    }

    .byf-app-redesign .previewactionbar .mobile-crumb-actions {
        display: flex !important;
        flex: 0 0 auto;
        justify-content: flex-end;
        align-items: center;
        gap: 6px;
        min-width: 0;
        max-width: 100%;
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow: visible !important;
        padding: 0 !important;
        background: transparent;
    }

    .byf-app-redesign .previewactionbar .mobile-crumb-actions .tandwiel-dropdown,
    .byf-app-redesign .previewactionbar .mobile-crumb-actions .tandwiel-dropdown > .nav-item {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        padding: 0 !important;
    }

    .byf-app-redesign .previewactionbar .mobile-crumb-actions > * {
        flex: 0 0 auto;
        margin-right: 0 !important;
    }

    .byf-app-redesign .previewactionbar .mobile-crumb-actions .flipoutlink,
    .byf-app-redesign .previewactionbar .mobile-crumb-actions .byf-mobile-toolbar-trigger,
    .byf-app-redesign .previewactionbar .mobile-crumb-actions .tandwiel.contextmenutrigger {
        flex: 0 0 32px;
    }

    .byf-app-redesign .previewactionbar .mobile-crumb-actions .dropdown-menu {
        right: 0 !important;
        left: auto !important;
        transform: none !important;
    }

    .byf-app-redesign .previewactionbar nav,
    .byf-app-redesign .previewactionbar .breadcrumb,
    .byf-app-redesign .previewactionbar .crumbsection,
    .byf-app-redesign .previewactionbar .crumb-toggle {
        min-width: 0;
        max-width: 100%;
    }

    .byf-app-redesign .previewactionbar .collapsedcrumb .breadcrumb {
        width: 100%;
        min-height: 32px;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .byf-app-redesign .previewactionbar .crumbsection {
        display: flex;
        width: 100%;
        align-items: center;
        gap: 6px;
    }

    .byf-app-redesign .previewactionbar .byf-compact-utility-controls,
    .byf-app-redesign .previewactionbar .byf-compact-nav-controls {
        display: inline-flex;
    }

    .byf-app-redesign .previewactionbar .crumbsection > ul {
        flex: 1 1 auto;
        min-width: 0;
        margin-right: 0 !important;
    }

    .byf-app-redesign .previewactionbar .crumbsection > ul > .nav-item,
    .byf-app-redesign .previewactionbar .crumbsection > ul > .nav-item > .crumb-toggle {
        width: 100%;
        min-width: 0;
    }

    .byf-app-redesign .previewactionbar .crumb-toggle {
        display: inline-flex;
        width: 100%;
        height: 32px;
        align-items: center;
        gap: 8px;
        overflow: hidden;
        padding: 0 10px;
        border-radius: var(--byf-redesign-radius-sm);
        background: transparent;
        color: var(--byf-redesign-foreground) !important;
    }

    .byf-app-redesign .previewactionbar .crumb-toggle .breadcrumb-item,
    .byf-app-redesign .previewactionbar .collapsedcrumb .breadcrumb-item.active {
        overflow: hidden;
        min-width: 0;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .byf-app-redesign .previewactionbar #crumblist {
        min-width: min(320px, calc(100vw - 36px)) !important;
        max-width: calc(100vw - 36px);
        overflow-x: hidden;
        padding: 6px !important;
        border: 1px solid var(--byf-redesign-border);
        border-radius: var(--byf-redesign-radius-sm);
        box-shadow: var(--byf-redesign-shadow-md);
    }

    .byf-app-redesign .previewactionbar #crumblist .dropdown-item {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 34px;
        border-radius: var(--byf-redesign-radius-sm);
        color: var(--byf-redesign-foreground) !important;
        font-size: 12px;
        font-weight: 500;
    }
}

@container byf-toolbar (min-width: 901px) and (max-width: 1200px) {
    .byf-app-redesign .byf-redesign-toolbar-stack .previewactionbar {
        border: 1px solid var(--byf-redesign-border) !important;
        border-radius: var(--byf-redesign-radius) !important;
        background: var(--byf-redesign-card) !important;
        box-shadow: var(--byf-redesign-shadow-sm) !important;
    }

    .byf-app-redesign .byf-redesign-toolbar-stack .previewactionbar > .disableselectable,
    .byf-app-redesign .byf-redesign-toolbar-stack .previewactionbar .collapsedcrumb,
    .byf-app-redesign .byf-redesign-toolbar-stack .previewactionbar .crumbsection,
    .byf-app-redesign .byf-redesign-toolbar-stack .previewactionbar .crumbsection > ul {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .byf-app-redesign .byf-redesign-toolbar-stack .previewactionbar .crumbsection {
        flex-wrap: nowrap;
        align-items: center;
    }

    .byf-app-redesign .byf-redesign-toolbar-stack .previewactionbar .byf-compact-utility-controls,
    .byf-app-redesign .byf-redesign-toolbar-stack .previewactionbar .byf-compact-nav-controls {
        flex: 0 0 auto;
    }

    .byf-app-redesign .byf-redesign-toolbar-stack .previewactionbar .crumbsection > ul {
        flex: 1 1 auto;
        min-width: 0;
        margin-right: 0 !important;
        padding: 0 !important;
    }

    .byf-app-redesign .byf-redesign-toolbar-stack .previewactionbar .crumb-toggle {
        border: 1px solid var(--byf-redesign-border) !important;
        background: var(--byf-redesign-card) !important;
        box-shadow: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1204.98px) {
    .byf-app-redesign .byf-redesign-toolbar-stack .previewactionbar {
        padding: 8px 10px !important;
        border: 1px solid var(--byf-redesign-border) !important;
        border-radius: var(--byf-redesign-radius) !important;
        background: var(--byf-redesign-card) !important;
        box-shadow: var(--byf-redesign-shadow-sm) !important;
    }

    .byf-app-redesign .byf-redesign-toolbar-stack .previewactionbar > .disableselectable,
    .byf-app-redesign .byf-redesign-toolbar-stack .previewactionbar .collapsedcrumb {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
}

/* Digital signing management */
.byf-app-redesign #workspace.esigning-workspace,
.byf-app-redesign .esigning-workspace {
    height: 100vh;
    min-height: 0;
    overflow: hidden;
    background: #fff;
}

.byf-app-redesign .esigningmanagement-container {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 12px;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0 0 16px;
    background: #fff;
}

.byf-app-redesign .esigning-overview-tabs {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    width: fit-content;
    max-width: 100%;
    gap: 4px;
    padding: 4px;
    overflow-x: auto;
    border: 1px solid var(--byf20-color-d9e4f2);
    border-radius: 13px;
    background: var(--byf20-color-ffffff);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    scrollbar-width: none;
}

.byf-app-redesign .esigning-overview-tabs::-webkit-scrollbar {
    display: none;
}

.byf-app-redesign .esigning-overview-tab {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: 30px;
    gap: 7px;
    padding: 0 12px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--byf20-color-64748b) !important;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.byf-app-redesign .esigning-overview-tab i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.byf-app-redesign .esigning-overview-tab:hover {
    background: var(--byf20-color-f1f5f9);
    color: var(--byf20-color-334155) !important;
}

.byf-app-redesign .esigning-overview-tab.active,
.byf-app-redesign .esigning-overview-tab.active:hover {
    background: var(--byf-redesign-primary);
    color: var(--byf-redesign-primary-foreground) !important;
    box-shadow: 0 8px 16px var(--byf-redesign-primary-soft);
}

.byf-app-redesign .esigning-overview-intro {
    padding: 18px 20px;
    border: 1px solid var(--byf-redesign-border);
    border-radius: var(--byf-redesign-radius);
    background: #fff;
}

.byf-app-redesign .esigning-overview-intro-title {
    margin: 0 0 6px;
    color: var(--byf-redesign-muted-foreground);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.byf-app-redesign .esigning-overview-intro-text {
    margin: 0;
    color: var(--byf-redesign-muted-foreground);
    font-size: 13px;
    line-height: 1.5;
}

.byf-app-redesign .esigning-overview-content {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--byf-redesign-border);
    border-radius: var(--byf-redesign-radius);
    background: #fff;
    box-shadow: var(--byf-redesign-shadow-sm);
}

.byf-app-redesign .esigning-overview-content > .tab-content,
.byf-app-redesign .esigning-overview-content > .tab-content > #esignings {
    width: 100%;
    height: 100%;
    min-height: 0;
}

.byf-app-redesign .esigning-results {
    position: relative;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
}

.byf-app-redesign .esigning-table-wrap {
    min-width: 0;
}

.byf-app-redesign .table-esignings {
    table-layout: fixed;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--byf-redesign-foreground);
    font-size: 13px;
}

.byf-app-redesign .table-esignings thead {
    position: sticky;
    z-index: 4;
    top: 0;
}

.byf-app-redesign .table-esignings thead th {
    height: 46px;
    padding: 0 16px;
    border: 0 !important;
    border-bottom: 1px solid var(--byf-redesign-border) !important;
    background: #f8fafc;
    color: var(--byf-redesign-muted-foreground);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    vertical-align: middle;
}

.byf-app-redesign .table-esignings .esigning-item-column {
    width: 36%;
}

.byf-app-redesign .table-esignings th:not(.esigning-item-column):not(.esigning-actions-column) {
    width: 17%;
}

.byf-app-redesign .table-esignings .esigning-actions-column {
    width: 92px;
    text-align: right;
}

.byf-app-redesign .table-esignings tbody td {
    height: 78px;
    padding: 12px 16px;
    border: 0 !important;
    border-bottom: 1px solid var(--byf-redesign-border-soft) !important;
    background: #fff;
    color: #334155;
    vertical-align: middle;
}

.byf-app-redesign .table-esignings tbody tr {
    cursor: pointer;
}

.byf-app-redesign .table-esignings tbody tr:last-child td {
    border-bottom: 0 !important;
}

.byf-app-redesign .table-esignings tbody tr:hover td {
    background: #f8fafc;
}

.byf-app-redesign .esigning-item-cell {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
}

.byf-app-redesign .esigning-item-icon,
.byf-app-redesign .esigning-state-icon {
    display: inline-flex;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: color-mix(in srgb, var(--byf-redesign-primary) 9%, #fff);
    color: var(--byf-redesign-primary);
    font-size: 17px;
}

.byf-app-redesign .esigning-item-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
}

.byf-app-redesign .esigning-item-name {
    overflow: hidden;
    color: var(--byf-redesign-foreground) !important;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.byf-app-redesign .esigning-item-name:hover {
    color: var(--byf-redesign-primary) !important;
    text-decoration: none !important;
}

.byf-app-redesign .esigning-item-location {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    color: var(--byf-redesign-muted-foreground);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.byf-app-redesign .esigning-progress-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.byf-app-redesign .esigning-status-pill {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    padding: 0 9px;
    border-radius: 999px;
    background: #eef2f7;
    color: #475569;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.byf-app-redesign .esigning-status-pill-0,
.byf-app-redesign .esigning-status-pill-1 {
    background: color-mix(in srgb, var(--byf-redesign-primary) 10%, #fff);
    color: var(--byf-redesign-primary);
}

.byf-app-redesign .esigning-status-pill-2 {
    background: #e8f7ef;
    color: #18794e;
}

.byf-app-redesign .esigning-status-pill-3 {
    background: #fff1f1;
    color: #c24141;
}

.byf-app-redesign .esigning-status-pill-4 {
    background: #eef2f7;
    color: #64748b;
}

.byf-app-redesign .esigning-progress-count {
    color: var(--byf-redesign-muted-foreground);
    font-size: 11px;
    font-weight: 600;
}

.byf-app-redesign .esigning-progress-cell .progress {
    height: 6px;
    margin: 0;
    overflow: hidden;
    border-radius: 999px;
    background: #e9eef5;
    box-shadow: none;
}

.byf-app-redesign .esigning-progress-cell .progress-bar-label {
    display: none;
}

.byf-app-redesign .esigning-progress-cell .progress-bar {
    border-radius: inherit;
    background: var(--byf-redesign-primary);
}

.byf-app-redesign .esigning-status-2 .progress-bar {
    background: #2e9b66;
}

.byf-app-redesign .esigning-status-3 .progress-bar {
    background: #dc5a5a;
}

.byf-app-redesign .esigning-status-4 .progress-bar {
    background: #94a3b8;
}

.byf-app-redesign .esigning-row-actions {
    text-align: right;
    white-space: nowrap;
}

.byf-app-redesign .esigning-row-action {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #475569 !important;
    font-size: 14px;
}

.byf-app-redesign .esigning-row-action:hover {
    background: var(--byf-redesign-muted);
    color: var(--byf-redesign-primary) !important;
}

.byf-app-redesign .esigning-loading-list {
    padding: 8px 0;
}

.byf-app-redesign .esigning-loading-row {
    display: grid;
    grid-template-columns: 40px minmax(180px, 2fr) minmax(120px, 1fr);
    align-items: center;
    gap: 14px;
    min-height: 76px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--byf-redesign-border-soft);
}

.byf-app-redesign .esigning-loading-icon,
.byf-app-redesign .esigning-loading-copy {
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(90deg, #f1f5f9 25%, #e7edf4 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: byf-esigning-loading 1.3s ease-in-out infinite;
}

.byf-app-redesign .esigning-loading-copy {
    width: min(100%, 360px);
    height: 12px;
    border-radius: 4px;
}

.byf-app-redesign .esigning-loading-copy-short {
    width: min(70%, 180px);
}

.byf-app-redesign .esigning-loading-more {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--byf-redesign-muted-foreground);
    font-size: 12px;
    font-weight: 600;
}

.byf-app-redesign .esigning-empty-state,
.byf-app-redesign .esigning-error-state {
    display: flex;
    min-height: 260px;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 32px;
    text-align: left;
}

.byf-app-redesign .esigning-empty-state h2,
.byf-app-redesign .esigning-error-state h2 {
    margin: 0 0 5px;
    color: var(--byf-redesign-foreground);
    font-size: 16px;
    font-weight: 700;
}

.byf-app-redesign .esigning-empty-state p,
.byf-app-redesign .esigning-error-state p {
    max-width: 440px;
    margin: 0;
    color: var(--byf-redesign-muted-foreground);
    font-size: 13px;
    line-height: 1.5;
}

.byf-app-redesign .esigning-error-state .esigning-state-icon {
    background: #fff1f1;
    color: #c24141;
}

.byf-app-redesign .esigning-retry-button {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    padding: 0 12px;
    border: 1px solid var(--byf-redesign-primary);
    border-radius: 7px;
    background: var(--byf-redesign-primary);
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
}

@keyframes byf-esigning-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

@media (max-width: 900px) {
    .byf-app-redesign .esigningmanagement-container {
        gap: 12px;
        padding: 0 0 14px;
    }

    .byf-app-redesign .esigning-overview-tabs {
        width: 100%;
    }

    .byf-app-redesign .esigning-overview-tab {
        flex: 1 0 auto;
        min-height: 30px;
        padding: 0 12px;
    }

    .byf-app-redesign .esigning-overview-intro {
        padding: 14px 16px;
    }

    .byf-app-redesign .table-esignings {
        display: block;
        padding: 10px;
    }

    .byf-app-redesign .table-esignings thead {
        display: none;
    }

    .byf-app-redesign .table-esignings tbody {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .byf-app-redesign .table-esignings tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-content: start;
        overflow: hidden;
        border: 1px solid var(--byf-redesign-border);
        border-radius: 8px;
        background: #fff;
    }

    .byf-app-redesign .table-esignings tbody td {
        display: flex;
        min-width: 0;
        height: auto;
        min-height: 48px;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 12px;
        border-bottom: 1px solid var(--byf-redesign-border-soft) !important;
    }

    .byf-app-redesign .table-esignings tbody td::before {
        flex: 0 0 auto;
        color: var(--byf-redesign-muted-foreground);
        content: attr(data-label);
        font-size: 9px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .byf-app-redesign .table-esignings .esigning-item-cell {
        grid-column: 1 / -1;
        min-height: 70px;
        justify-content: flex-start;
    }

    .byf-app-redesign .table-esignings tbody td:not(.esigning-item-cell):not(.esigning-progress-cell):not(.esigning-row-actions) {
        grid-column: 1 / -1;
    }

    .byf-app-redesign .table-esignings .esigning-item-cell::before,
    .byf-app-redesign .table-esignings .esigning-progress-cell::before,
    .byf-app-redesign .table-esignings .esigning-row-actions::before {
        display: none;
    }

    .byf-app-redesign .table-esignings .esigning-progress-cell {
        grid-column: 1 / -1;
        display: block;
    }

    .byf-app-redesign .table-esignings .esigning-row-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
        border-bottom: 0 !important;
    }
}

@media (max-width: 620px) {
    .byf-app-redesign .esigningmanagement-container {
        padding: 0 0 10px;
    }

    .byf-app-redesign .esigning-overview-tabs {
        gap: 3px;
        padding: 4px;
    }

    .byf-app-redesign .esigning-overview-tab {
        min-width: 0;
        flex: 1 1 0;
        gap: 5px;
        padding: 0 7px;
        font-size: 12px;
    }

    .byf-app-redesign .esigning-overview-tab i {
        width: 14px;
        font-size: 14px;
    }

    .byf-app-redesign .esigning-overview-tab span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .byf-app-redesign .esigning-overview-intro {
        display: none;
    }

    .byf-app-redesign .esigningmanagement-container {
        grid-template-rows: auto minmax(0, 1fr);
    }

    .byf-app-redesign .table-esignings tbody {
        grid-template-columns: minmax(0, 1fr);
    }

    .byf-app-redesign .esigning-empty-state,
    .byf-app-redesign .esigning-error-state {
        align-items: flex-start;
        flex-direction: column;
        padding: 24px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .byf-app-redesign .esigning-loading-icon,
    .byf-app-redesign .esigning-loading-copy {
        animation: none;
    }
}

/* Settings explanations use the same intro surface as the Information module. */
.byf-app-redesign .settings-dashboard .settings-tab-info {
    width: 100%;
    margin: 0 0 15px;
    box-sizing: border-box;
}

.byf-app-redesign .settings-dashboard .settings-tab-info .dashboard-intro__text {
    max-width: 880px;
}

.byf-app-redesign .settings-dashboard .settings-tab-info--with-action {
    display: flex;
    align-items: center;
    gap: 24px;
}

.byf-app-redesign .settings-dashboard .settings-tab-info--with-action .dashboard-intro {
    min-width: 0;
    flex: 1 1 auto;
}

.byf-app-redesign .settings-dashboard .settings-tab-info-action {
    position: static !important;
    width: min(360px, 34vw);
    min-width: 220px;
    flex: 0 1 360px;
    margin: 0 0 0 auto;
}

.byf-app-redesign .settings-dashboard .settings-tab-info-action .form-control {
    width: 100% !important;
    margin: 0;
}

.byf-app-redesign .settings-dashboard .settings-info-tabzone {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: max-content max-content minmax(0, 1fr) !important;
    align-content: stretch;
    gap: 14px;
    min-height: 0;
}

.byf-app-redesign .settings-dashboard .settings-info-tabzone > .tabs {
    grid-column: 1 !important;
    grid-row: 1 !important;
    flex: 0 0 auto !important;
}

.byf-app-redesign .settings-dashboard .settings-tab-info-slot {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.byf-app-redesign .settings-dashboard .settings-tab-info-slot .settings-tab-info {
    margin: 0 !important;
}

.byf-app-redesign .settings-dashboard .settings-info-tabzone > .tab-area {
    grid-column: 1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    align-self: stretch;
    min-height: 0 !important;
    max-height: none !important;
    box-sizing: border-box;
}

.byf-app-redesign .settings-dashboard .settings-info-tabzone > .tab-area .tab-content {
    height: 100%;
    min-height: 0;
}

.byf-app-redesign .settings-dashboard .settings-info-tabzone > .tab-area .tab-pane {
    min-height: 0 !important;
}

/* Data-table tabs use the table itself as their surface; avoid a second card around it. */
.byf-app-redesign .settings-dashboard .settings-info-tabzone > .tab-area:has(.tab-pane .table-responsive-sm),
.byf-app-redesign .settings-dashboard .settings-info-tabzone > .tab-area:has(.tab-pane .table-responsive-lg),
.byf-app-redesign .settings-dashboard .settings-info-tabzone > .tab-area:has(.tab-pane .table-responsive),
.byf-app-redesign .settings-dashboard .settings-info-tabzone > .tab-area:has(.tab-pane .settings-table-surface) {
    border: 0;
    border-radius: 0;
    background: #fff !important;
    box-shadow: none;
}

.byf-app-redesign .settings-dashboard .tab-pane:has(.table-responsive-sm),
.byf-app-redesign .settings-dashboard .tab-pane:has(.table-responsive-lg),
.byf-app-redesign .settings-dashboard .tab-pane:has(.table-responsive),
.byf-app-redesign .settings-dashboard .tab-pane:has(.settings-table-surface) {
    padding: 0 !important;
    background: #fff !important;
}

.byf-app-redesign .settings-dashboard .settings-info-tabzone > .tab-area:has(.tab-pane.active .table-responsive-sm) .tab-content,
.byf-app-redesign .settings-dashboard .settings-info-tabzone > .tab-area:has(.tab-pane.active .table-responsive-lg) .tab-content,
.byf-app-redesign .settings-dashboard .settings-info-tabzone > .tab-area:has(.tab-pane.active .table-responsive) .tab-content,
.byf-app-redesign .settings-dashboard .settings-info-tabzone > .tab-area:has(.tab-pane.active .settings-table-surface) .tab-content {
    overflow: hidden;
    scrollbar-gutter: auto;
}

.byf-app-redesign .settings-dashboard .tab-pane.active:has(.table-responsive-sm),
.byf-app-redesign .settings-dashboard .tab-pane.active:has(.table-responsive-lg),
.byf-app-redesign .settings-dashboard .tab-pane.active:has(.table-responsive),
.byf-app-redesign .settings-dashboard .tab-pane.active:has(.settings-table-surface) {
    display: flex !important;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
}

.byf-app-redesign .settings-dashboard .tab-pane:has(.table-responsive-sm) > div,
.byf-app-redesign .settings-dashboard .tab-pane:has(.table-responsive-lg) > div,
.byf-app-redesign .settings-dashboard .tab-pane:has(.table-responsive) > div,
.byf-app-redesign .settings-dashboard .tab-pane:has(.settings-table-surface) > div {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    margin: 0 !important;
    padding: 0 !important;
}

.byf-app-redesign .settings-dashboard .table-responsive-sm,
.byf-app-redesign .settings-dashboard .table-responsive-lg,
.byf-app-redesign .settings-dashboard .table-responsive,
.byf-app-redesign .settings-dashboard .settings-table-surface {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    box-sizing: border-box;
    border: 1px solid var(--byf20-color-d9e4f2);
    border-radius: 14px;
    background: var(--byf20-color-ffffff);
    overflow-x: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.byf-app-redesign .settings-dashboard .tab-pane table.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.byf-app-redesign .settings-dashboard .table th,
.byf-app-redesign .settings-dashboard .table td {
    min-height: 48px;
    padding: 13px 14px;
    border-top: 0;
    border-bottom: 1px solid var(--byf20-color-e2e8f0);
    vertical-align: middle;
    line-height: 1.35;
}

.byf-app-redesign .settings-dashboard .table tbody td a:not(.btn) {
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    letter-spacing: 0 !important;
}

.byf-app-redesign .settings-dashboard .table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--byf20-color-f8fafc);
    box-shadow: 0 1px 0 var(--byf20-color-e2e8f0);
}

.byf-app-redesign .settings-dashboard .table th:first-child,
.byf-app-redesign .settings-dashboard .table td:first-child {
    padding-left: 16px;
}

.byf-app-redesign .settings-dashboard .table th:last-child,
.byf-app-redesign .settings-dashboard .table td:last-child {
    padding-right: 16px;
}

.byf-app-redesign .settings-dashboard .table tbody tr:last-child th,
.byf-app-redesign .settings-dashboard .table tbody tr:last-child td {
    border-bottom: 0;
}

.byf-app-redesign .settings-dashboard .table tbody tr:hover td,
.byf-app-redesign .settings-dashboard .table tbody tr:hover th {
    background: var(--byf20-color-f8fafc);
}

.byf-app-redesign .settings-dashboard .table .settings-table-group-row td {
    background: var(--byf20-color-f8fafc);
    color: var(--byf20-color-334155);
    font-size: 12px;
}

.byf-app-redesign .settings-dashboard .table .settings-table-group-row:hover td {
    background: var(--byf20-color-f1f5f9);
}

.byf-app-redesign .settings-dashboard .table .list-actions,
.byf-app-redesign .settings-dashboard .table .user-actions {
    width: 1%;
    text-align: right;
}

/* Tags are split by behaviour: groups, reusable tags and read-only user tags. */
.byf-app-redesign .settings-dashboard .settings-tags-content {
    display: grid;
    gap: 18px;
    width: 100%;
}

.byf-app-redesign .settings-dashboard .settings-tags-section {
    overflow: hidden;
    border: 1px solid var(--byf20-color-d9e4f2);
    border-radius: var(--byf-redesign-radius);
    background: var(--byf20-color-ffffff);
}

.byf-app-redesign .settings-dashboard .settings-tags-section__header {
    display: flex;
    min-height: 66px;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--byf20-color-e2e8f0);
    background: var(--byf20-color-ffffff);
}

.byf-app-redesign .settings-dashboard .settings-tags-section__icon,
.byf-app-redesign .settings-dashboard .settings-taggroup-icon {
    display: inline-flex;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--byf-redesign-primary-meta);
    color: var(--byf-redesign-primary);
    font-size: 15px;
}

.byf-app-redesign .settings-dashboard .settings-taggroup-icon {
    background: var(--byf20-color-f1f5f9);
}

.byf-app-redesign .settings-dashboard .settings-taggroup-icon > i {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1;
}

.byf-app-redesign .settings-dashboard .settings-tags-section__header h3 {
    margin: 0;
    color: var(--byf20-color-0f172a);
    font-size: 14px;
    font-weight: 800;
}

.byf-app-redesign .settings-dashboard .settings-tags-section__header small,
.byf-app-redesign .settings-dashboard .settings-tags-block__heading small {
    display: block;
    margin-top: 3px;
    color: var(--byf20-color-64748b);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
}

.byf-app-redesign .settings-dashboard .settings-tags-section__header > .settings-tags-count {
    margin-left: auto;
}

.byf-app-redesign .settings-dashboard .settings-tags-block {
    padding: 18px;
}

.byf-app-redesign .settings-dashboard .settings-tags-block--bordered {
    border-top: 1px solid var(--byf20-color-e2e8f0);
}

.byf-app-redesign .settings-dashboard .settings-tags-block__heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.byf-app-redesign .settings-dashboard .settings-tags-block__heading strong {
    color: var(--byf20-color-0f172a);
    font-size: 13px;
    font-weight: 750;
}

.byf-app-redesign .settings-dashboard .settings-tags-count {
    display: inline-flex;
    min-width: 26px;
    height: 24px;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--byf20-color-e2e8f0);
    color: var(--byf20-color-475569);
    font-size: 11px;
    font-weight: 700;
}

.byf-app-redesign .settings-dashboard .settings-taggroup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 10px;
}

.byf-app-redesign .settings-dashboard .settings-taggroup-card {
    display: flex;
    min-width: 0;
    min-height: 68px;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--byf20-color-d9e4f2);
    border-radius: 10px;
    background: var(--byf20-color-ffffff);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.byf-app-redesign .settings-dashboard .settings-taggroup-card:hover {
    border-color: color-mix(in srgb, var(--byf-redesign-primary) 32%, #d9e4f2);
    box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
}

.byf-app-redesign .settings-dashboard .settings-taggroup-main,
.byf-app-redesign .settings-dashboard .settings-tag-chip__main {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--byf20-color-334155);
    text-align: left;
    cursor: pointer;
}

.byf-app-redesign .settings-dashboard .settings-taggroup-main {
    flex: 1 1 auto;
}

.byf-app-redesign .settings-dashboard .settings-taggroup-main:focus,
.byf-app-redesign .settings-dashboard .settings-tag-chip__main:focus,
.byf-app-redesign .settings-dashboard .settings-tag-action:focus,
.byf-app-redesign #modalContentEditTaggroup .settings-tag-edit:focus,
.byf-app-redesign #modalContentEditTaggroup .decouple-tag:focus {
    outline: 0;
    box-shadow: none;
}

.byf-app-redesign .settings-dashboard .settings-taggroup-copy {
    display: block;
    min-width: 0;
}

.byf-app-redesign .settings-dashboard .settings-taggroup-copy strong,
.byf-app-redesign .settings-dashboard .settings-taggroup-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.byf-app-redesign .settings-dashboard .settings-taggroup-copy strong {
    color: var(--byf20-color-0f172a);
    font-size: 13px;
    font-weight: 700;
}

.byf-app-redesign .settings-dashboard .settings-taggroup-copy small {
    margin-top: 4px;
    color: var(--byf20-color-64748b);
    font-size: 11px;
}

.byf-app-redesign .settings-dashboard .settings-tags-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--byf20-color-334155);
}

.byf-app-redesign .settings-dashboard .settings-tag-chip {
    display: inline-flex;
    width: auto;
    max-width: 100%;
    min-width: 0;
    min-height: 36px;
    align-items: center;
    gap: 5px;
    padding: 4px 5px 4px 10px;
    border: 1px solid color-mix(in srgb, var(--tag-color, var(--byf-redesign-primary)) 24%, #d9e4f2);
    border-radius: 9px;
    background: color-mix(in srgb, var(--tag-color, var(--byf-redesign-primary)) 6%, #fff);
}

.byf-app-redesign .settings-dashboard .settings-tag-chip__main {
    min-height: 26px;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
}

.byf-app-redesign .settings-dashboard .settings-tag-chip__main > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.byf-app-redesign .settings-dashboard .settings-tag-chip__main > i {
    width: 16px;
    flex: 0 0 16px;
    color: var(--tag-color, var(--byf-redesign-primary)) !important;
    text-align: center;
    font-size: 14px;
    padding-left: 0 !important;
}

.byf-app-redesign .settings-dashboard .settings-tag-actions {
    position: static !important;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 2px;
}

.byf-app-redesign .settings-dashboard .settings-taggroup-card > .settings-tag-actions {
    margin-left: auto;
    padding: 2px;
    border: 1px solid var(--byf20-color-e2e8f0);
    border-radius: 8px;
    background: var(--byf20-color-f8fafc);
}

.byf-app-redesign .settings-dashboard .settings-tag-action {
    position: static !important;
    top: auto !important;
    right: auto !important;
    display: inline-flex;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 7px;
    outline: 0;
    background: transparent;
    color: var(--byf20-color-475569);
    font-size: 13px;
    cursor: pointer;
}

.byf-app-redesign .settings-dashboard .settings-tag-action > i {
    display: block;
    width: auto;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1;
}

.byf-app-redesign .settings-dashboard .settings-tag-action:hover {
    background: var(--byf20-color-f1f5f9);
    color: var(--byf-redesign-primary);
}

.byf-app-redesign .settings-dashboard .settings-tag-action--delete:hover {
    background: #fef2f2;
    color: #dc2626;
}

.byf-app-redesign .settings-dashboard .settings-tag-chip .erp-ico {
    width: 18px;
    height: 18px;
    margin: 0 5px;
    flex: 0 0 18px;
    object-fit: contain;
}

.byf-app-redesign .settings-dashboard .settings-tags-list--users {
    padding: 16px 18px 18px;
}

.byf-app-redesign .settings-dashboard .settings-tags-list--external {
    padding: 16px 18px 18px;
}

.byf-app-redesign .settings-dashboard .settings-tag-chip--user {
    --tag-color: var(--byf20-color-64748b);
    padding-right: 9px;
    background: var(--byf20-color-f8fafc);
}

.byf-app-redesign .settings-dashboard .settings-tag-chip--locked {
    --tag-color: var(--byf20-color-64748b);
    background: var(--byf20-color-f8fafc);
}

.byf-app-redesign .settings-dashboard .settings-tag-chip--locked .settings-tag-chip__main {
    cursor: default;
}

.byf-app-redesign .settings-dashboard .settings-tag-chip--erp {
    --tag-color: var(--byf20-color-64748b);
}

.byf-app-redesign .settings-dashboard .settings-tag-actions--protected {
    gap: 4px;
}

.byf-app-redesign .settings-dashboard .settings-tag-chip--user .settings-tag-chip__main {
    color: var(--byf20-color-334155);
    cursor: default;
}

.byf-app-redesign .settings-dashboard .settings-user-tag-lock {
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    color: var(--byf20-color-94a3b8);
    font-size: 10px;
}

.byf-app-redesign .settings-dashboard .settings-tags-empty {
    width: 100%;
    padding: 14px 16px;
    border: 1px dashed var(--byf20-color-d9e4f2);
    border-radius: 9px;
    background: var(--byf20-color-f8fafc);
    color: var(--byf20-color-64748b);
    font-size: 12px;
    text-align: center;
}

/* Folder and document settings use the same tag language as the tenant tag
 * configuration: compact chips, predictable wrapping and quiet read-only
 * states. The legacy markup and click handlers remain unchanged. */
.byf-app-redesign .modal-content .byf-modal-tags-pane {
    padding: 16px 22px 22px !important;
}

.byf-app-redesign .modal-content .byf-modal-tags-header {
    min-height: 42px;
    align-items: center;
    margin: 0 0 16px !important;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--byf20-color-e2e8f0);
}

.byf-app-redesign .modal-content .byf-modal-tags-header > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}

.byf-app-redesign .modal-content .byf-modal-tags-title {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--byf20-color-0f172a);
    font-size: 15px;
    font-weight: 750;
    line-height: 1.25;
}

.byf-app-redesign .modal-content .byf-modal-tags-title > i {
    margin: 0 !important;
    color: var(--byf-redesign-primary);
    font-size: 14px;
}

.byf-app-redesign .modal-content .byf-modal-tags-scroll {
    max-height: min(52vh, 430px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 3px 2px 0;
}

.byf-app-redesign .modal-content .byf-modal-tags-selection,
.byf-app-redesign .modal-content .byf-modal-tags-cloud .scrolling > span {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.byf-app-redesign .modal-content .byf-modal-tags-selection {
    /*min-height: 36px;*/
    margin: 0;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--byf20-color-e2e8f0);
}

.byf-app-redesign .modal-content .byf-modal-tags-selection[hidden] {
    display: none !important;
}

/* The active chips are the first row of the tag content. Keep a single
 * separator before the general/user lists instead of stacking two borders. */
.byf-app-redesign .modal-content .byf-modal-tags-selection + .byf-modal-tags-section {
    margin-top: 0;
    padding-top: 16px;
    border-top: 0;
}

.byf-app-redesign .modal-content .byf-modal-tags-selection[hidden] + .byf-modal-tags-section {
    padding-top: 0;
}

/* Folder tags only use the header row for the optional pass-down switch. */
.byf-app-redesign .modal-content .tags-content .byf-modal-tags-header {
    min-height: 0;
    margin-bottom: 8px !important;
    padding: 0 !important;
    border-bottom: 0;
}

.byf-app-redesign .modal-content .byf-modal-tags-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--byf20-color-e2e8f0);
}

.byf-app-redesign .modal-content .byf-modal-tags-section:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.byf-app-redesign .modal-content .byf-modal-tags-subheading {
    margin: 0 0 10px !important;
    padding: 0 !important;
    color: var(--byf20-color-0f172a);
    font-size: 13px;
    font-weight: 750;
    line-height: 1.3;
}

.byf-app-redesign .modal-content .byf-modal-tags-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 36px;
    margin-bottom: 12px;
}

.byf-app-redesign .modal-content .byf-modal-tags-section-heading .byf-modal-tags-subheading {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
}

.byf-app-redesign .modal-content .byf-modal-tags-section-actions {
    display: flex;
    min-width: 0;
    flex: 0 1 380px;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.byf-app-redesign .modal-content .byf-modal-tags-filter {
    display: block;
    width: min(100%, 250px) !important;
    min-height: 36px;
    flex: 0 1 250px;
    margin: 0 !important;
    border-radius: 9px !important;
}

.byf-app-redesign .modal-content .byf-modal-tags-expand-toggle {
    display: inline-flex;
    min-width: 108px;
    min-height: 36px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 6px 11px;
    border: 1px solid var(--byf20-color-d9e4f2);
    border-radius: 9px;
    background: var(--byf20-color-ffffff);
    color: var(--byf20-color-475569);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}

.byf-app-redesign .modal-content .byf-modal-tags-expand-toggle[hidden] {
    display: none !important;
}

.byf-app-redesign .modal-content .byf-modal-tags-expand-toggle:hover,
.byf-app-redesign .modal-content .byf-modal-tags-expand-toggle:focus-visible,
.byf-app-redesign .modal-content .byf-modal-tags-expand-toggle[aria-expanded="true"] {
    border-color: var(--byf-redesign-primary);
    background: var(--byf-redesign-primary-meta);
    color: var(--byf-redesign-primary);
    outline: none;
}

.byf-app-redesign .modal-content .byf-modal-tags-expand-toggle > i {
    font-size: 11px;
}

.byf-app-redesign .modal-content .byf-modal-tags-cloud {
    position: relative;
    min-height: 36px;
    margin: 0 !important;
    padding: 0 !important;
}

.byf-app-redesign .modal-content .byf-modal-tags-cloud .scrolling {
    --byf-modal-tags-collapsed-height: 118px;
    max-height: var(--byf-modal-tags-collapsed-height);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 1px 3px 2px 0;
}

.byf-app-redesign .modal-content .byf-modal-tags-cloud.is-expanded .scrolling {
    max-height: none;
    overflow-y: visible;
}

.byf-app-redesign .modal-content .byf-modal-tags-cloud .scrolling > span {
    display: flex !important;
}

.byf-app-redesign .modal-content .byf-modal-tags-cloud .gradient {
    display: none;
    position: absolute;
    right: 3px;
    bottom: 0;
    left: 0;
    z-index: 1;
    height: 28px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--byf20-color-ffffff) 88%);
}

.byf-app-redesign .modal-content .byf-modal-tags-cloud.has-overflow .gradient {
    display: block !important;
}

.byf-app-redesign .modal-content .byf-modal-tags-cloud.is-expanded .gradient {
    display: none !important;
}

.byf-app-redesign .modal-content .byf-modal-tag-chip {
    display: inline-flex !important;
    width: auto !important;
    max-width: 100%;
    min-width: 0;
    min-height: 34px;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    margin: 0 6px 6px 0 !important;
    margin-right: 0 !important;
    padding: 5px 10px !important;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--byf-redesign-primary) 30%, var(--byf20-color-d9e4f2)) !important;
    border-radius: 9px !important;
    background: var(--byf20-color-ffffff) !important;
    color: var(--byf20-color-334155) !important;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.25;
    text-align: left !important;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.byf-app-redesign .modal-content .byf-modal-tag-chip.is-filtered-out {
    display: none !important;
}

.byf-app-redesign .modal-content .byf-modal-tag-chip:hover {
    border-color: var(--byf-redesign-primary) !important;
    background: var(--byf-redesign-primary-meta) !important;
    box-shadow: 0 4px 10px rgba(15, 23, 42, .06);
}

.byf-app-redesign .modal-content .byf-modal-tag-chip.tags-info-active {
    border-color: var(--byf-redesign-primary) !important;
    background: color-mix(in srgb, var(--byf-redesign-primary) 12%, #fff) !important;
    color: var(--byf-redesign-foreground) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--byf-redesign-primary) 18%, transparent);
}

.byf-app-redesign .modal-content .byf-modal-tag-chip > i {
    display: inline-flex;
    width: 16px;
    height: 18px;
    flex: 0 0 16px;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--byf-redesign-primary) !important;
    font-size: 13px;
    line-height: 1;
    text-align: center;
}

.byf-app-redesign .modal-content .byf-modal-tag-chip > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.byf-app-redesign .modal-content .byf-modal-tag-chip--readonly,
.byf-app-redesign .modal-content .byf-modal-tag-chip--user {
    border-color: var(--byf20-color-d9e4f2) !important;
    background: var(--byf20-color-f8fafc) !important;
    color: var(--byf20-color-64748b) !important;
    cursor: default;
}

.byf-app-redesign .modal-content .byf-modal-tag-chip--readonly:hover,
.byf-app-redesign .modal-content .byf-modal-tag-chip--user:hover {
    border-color: var(--byf20-color-d9e4f2) !important;
    background: var(--byf20-color-f8fafc) !important;
    box-shadow: none;
}

.byf-app-redesign .modal-content .byf-modal-tag-chip--readonly > i,
.byf-app-redesign .modal-content .byf-modal-tag-chip--user > i {
    color: var(--byf20-color-64748b) !important;
}

.byf-app-redesign .modal-content #tags_followers > .tags-info:first-of-type {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.byf-app-redesign .modal-content #tags_followers > .tags-info:first-of-type .follower-tag,
.byf-app-redesign .modal-content #tags_followers > .tags-info:first-of-type .byf-modal-followers-toggle {
    margin: 0 !important;
}

.byf-app-redesign .modal-content .byf-modal-tag-chip .erp-ico {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin: 0 0 0 2px;
    object-fit: contain;
}

.byf-app-redesign .modal-content .byf-modal-tag-group {
    display: inline-flex;
    max-width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin: 0 !important;
}

.byf-app-redesign .modal-content .byf-modal-tag-group > .byf-modal-tag-chip {
    max-width: min(100%, 360px);
}

.byf-app-redesign .modal-content .byf-modal-tag-group .groupedtags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    padding: 10px 10px 2px 14px;
    border: 1px solid var(--byf20-color-d9e4f2);
    border-left: 3px solid var(--byf-redesign-primary-meta);
    border-radius: 0 9px 9px 0;
    background: var(--byf20-color-f8fafc);
}

.byf-app-redesign .modal-content .byf-modal-tag-group .groupedtags[style*="display: none"] {
    display: none !important;
}

.byf-app-redesign .modal-content .byf-modal-tag-group .groupedtags .byf-modal-tag-item {
    display: inline-flex;
    max-width: 100%;
}

.byf-app-redesign .modal-content .byf-modal-tag-group .showtags {
    cursor: pointer;
}

.byf-app-redesign .modal-content .byf-modal-active-group-trigger {
    position: relative;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .06);
}

.byf-app-redesign .modal-content .byf-modal-active-group-trigger > i {
    transition: transform .16s ease;
}

.byf-app-redesign .modal-content .byf-modal-active-group-trigger.is-expanded > i,
.byf-app-redesign .modal-content .byf-modal-active-group-trigger[aria-expanded="true"] > i {
    transform: rotate(180deg);
}

@media screen and (max-width: 575.98px) {
    .byf-app-redesign .modal-content .byf-modal-tags-pane {
        padding-right: 16px !important;
        padding-left: 16px !important;
    }

    .byf-app-redesign .modal-content .byf-modal-tags-header {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .byf-app-redesign .modal-content .byf-modal-tags-header > [class*="col-"] {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .byf-app-redesign .modal-content .byf-modal-tags-header > [class*="col-"]:last-child {
        justify-content: flex-start !important;
    }

    .byf-app-redesign .modal-content .byf-modal-tags-section-heading {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
    }

    .byf-app-redesign .modal-content .byf-modal-tags-filter {
        width: 100% !important;
        flex-basis: auto;
    }

    .byf-app-redesign .modal-content .byf-modal-tags-section-actions {
        width: 100%;
        flex: 0 0 auto;
    }

    .byf-app-redesign .modal-content .byf-modal-tags-section-actions .byf-modal-tags-filter {
        min-width: 0;
        flex: 1 1 auto;
    }

    .byf-app-redesign .modal-content .byf-modal-tags-expand-toggle {
        min-width: 42px;
    }

    .byf-app-redesign .modal-content .byf-modal-tags-expand-toggle__label {
        display: none;
    }
}

/* Tag and tag-group editor content. */
.byf-app-redesign #modalContentEditTag .newtag,
.byf-app-redesign #modalContentEditTaggroup .newtaggroup {
    padding: 20px !important;
}

.byf-app-redesign #modalContentEditTag .form-group,
.byf-app-redesign #modalContentEditTaggroup .form-group {
    align-items: center;
    margin-right: 0;
    margin-bottom: 16px;
    margin-left: 0;
}

.byf-app-redesign #modalContentEditTag .minicolors {
    display: block;
    width: 100%;
}

.byf-app-redesign #modalContentEditTag .minicolors .minicolors-input {
    width: 100%;
    min-height: 40px;
    padding-left: 44px;
}

.byf-app-redesign #modalContentEditTag .minicolors-theme-bootstrap > .minicolors-swatch {
    top: 50%;
    left: 8px;
    width: 24px;
    height: 24px;
    margin: 0;
    border-radius: 6px;
    transform: translateY(-50%);
}

.byf-app-redesign #modalContentEditTag .settings-modal-actions,
.byf-app-redesign #modalContentEditTaggroup .settings-modal-actions {
    align-items: center;
    gap: 8px;
}

.byf-app-redesign #modalContentEditTag .settings-modal-actions .btn,
.byf-app-redesign #modalContentEditTaggroup .settings-modal-actions .btn {
    width: auto !important;
    min-width: 132px;
    min-height: 38px;
    margin: 0 !important;
}

.byf-app-redesign #modalContentEditTag .settings-erp-tag-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding: 13px 14px;
    border: 1px solid var(--byf20-color-d9e4f2);
    border-radius: 10px;
    background: var(--byf20-color-f8fafc);
}

.byf-app-redesign #modalContentEditTag .settings-erp-tag-summary__icon {
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--byf20-color-ffffff);
    color: var(--byf-redesign-primary);
}

.byf-app-redesign #modalContentEditTag .settings-erp-tag-summary__copy {
    min-width: 0;
    flex: 1 1 auto;
}

.byf-app-redesign #modalContentEditTag .settings-erp-tag-summary__copy strong,
.byf-app-redesign #modalContentEditTag .settings-erp-tag-summary__copy small {
    display: block;
}

.byf-app-redesign #modalContentEditTag .settings-erp-tag-summary__copy small {
    margin-top: 3px;
    color: var(--byf20-color-64748b);
    font-size: 11px;
    line-height: 1.4;
}

.byf-app-redesign #modalContentEditTag .settings-erp-tag-summary__brand,
.byf-app-redesign #modalContentEditTaggroup .settings-taggroup-member__protected {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    color: var(--byf20-color-94a3b8);
}

.byf-app-redesign #modalContentEditTag .settings-erp-tag-summary__brand .erp-ico,
.byf-app-redesign #modalContentEditTaggroup .settings-taggroup-member__protected .erp-ico {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.byf-app-redesign #modalContentEditTaggroup .settings-taggroup-members {
    padding: 14px;
    border: 1px solid var(--byf20-color-d9e4f2);
    border-radius: 10px;
    background: var(--byf20-color-f8fafc);
}

.byf-app-redesign #modalContentEditTaggroup .settings-taggroup-members__header {
    margin-bottom: 10px;
}

.byf-app-redesign #modalContentEditTaggroup .settings-taggroup-members__header strong,
.byf-app-redesign #modalContentEditTaggroup .settings-taggroup-members__header small {
    display: block;
}

.byf-app-redesign #modalContentEditTaggroup .settings-taggroup-members__header strong {
    color: var(--byf20-color-0f172a);
    font-size: 13px;
}

.byf-app-redesign #modalContentEditTaggroup .settings-taggroup-members__header small {
    margin-top: 3px;
    color: var(--byf20-color-64748b);
    font-size: 11px;
}

.byf-app-redesign #modalContentEditTaggroup .settings-taggroup-members__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 8px;
}

.byf-app-redesign #modalContentEditTaggroup .settings-taggroup-members__list > .settings-tags-empty {
    grid-column: 1 / -1;
}

.byf-app-redesign #modalContentEditTaggroup .settings-taggroup-member {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 4px;
    padding: 4px 5px 4px 10px;
    border: 1px solid var(--byf20-color-d9e4f2);
    border-radius: 8px;
    background: var(--byf20-color-ffffff);
}

.byf-app-redesign #modalContentEditTaggroup .settings-taggroup-member .settings-tag-edit {
    position: static !important;
    top: auto !important;
    right: auto !important;
    display: inline-flex;
    width: 28px;
    height: 28px;
    min-width: 28px;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 7px;
    outline: 0;
    background: transparent;
    color: var(--byf20-color-334155);
    font-size: 13px;
}

.byf-app-redesign #modalContentEditTaggroup .settings-taggroup-member .settings-tag-edit:hover {
    background: var(--byf20-color-ffffff);
    color: var(--byf-redesign-primary);
}

.byf-app-redesign #modalContentEditTaggroup .settings-taggroup-member .settings-tag-edit > i {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1;
}

.byf-app-redesign #modalContentEditTaggroup .settings-taggroup-member__label {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    gap: 8px;
    color: var(--byf20-color-334155);
    font-size: 12px;
}

.byf-app-redesign #modalContentEditTaggroup .settings-taggroup-member__actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    padding: 2px;
    border-radius: 8px;
    background: var(--byf20-color-f1f5f9);
}

.byf-app-redesign #modalContentEditTaggroup .settings-taggroup-member__label span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.byf-app-redesign #modalContentEditTaggroup .settings-taggroup-member--locked {
    background: var(--byf20-color-f8fafc);
}

.byf-app-redesign #modalContentEditTaggroup .settings-taggroup-member .settings-tag-edit span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.byf-app-redesign #modalContentEditTaggroup .decouple-tag {
    position: static !important;
    top: auto !important;
    right: auto !important;
    display: inline-flex;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--byf20-color-64748b);
    cursor: pointer;
}

.byf-app-redesign #modalContentEditTaggroup .decouple-tag > i {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1;
}

.byf-app-redesign #modalContentEditTaggroup .decouple-tag:hover {
    background: #fef2f2;
    color: #dc2626;
}

/* Keep scrolled tab content visually behind the tab header without tinting the header itself. */
.byf-app-redesign .settings-dashboard .tabzone-lr > .tabs {
    position: relative;
    z-index: 3;
}

.byf-app-redesign .settings-dashboard .tabzone-lr > .tabs::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 14px;
    pointer-events: none;
    z-index: 4;
}

.byf-app-redesign .settings-dashboard .settings-dashboard-nav {
    position: relative;
    z-index: 5;
}

.byf-app-redesign .settings-dashboard .sharepoint-form > h3,
.byf-app-redesign .settings-dashboard .esigning-form h3,
.byf-app-redesign .settings-dashboard #erpContentArea h3 {
    margin-top: 22px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--byf20-color-e2e8f0);
}

.byf-app-redesign .settings-dashboard #erpContentArea {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.byf-app-redesign .settings-dashboard .erp-settings-section,
.byf-app-redesign .settings-dashboard .erp-items-area {
    overflow: hidden;
    border: 1px solid var(--byf20-color-d9e4f2);
    border-radius: 14px;
    background: var(--byf20-color-ffffff);
}

.byf-app-redesign .settings-dashboard .erp-settings-section__header {
    display: flex;
    min-height: 68px;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--byf20-color-e2e8f0);
}

.byf-app-redesign .settings-dashboard .erp-settings-section__icon,
.byf-app-redesign .settings-dashboard .erp-settings-intro__logo {
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--byf-redesign-primary-soft);
    color: var(--byf-redesign-primary);
}

.byf-app-redesign .settings-dashboard .erp-settings-section__header h3 {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 14px;
}

.byf-app-redesign .settings-dashboard .erp-settings-section__header small {
    display: block;
    margin-top: 3px;
    color: var(--byf20-color-64748b);
    font-size: 11px;
    line-height: 1.45;
}

.byf-app-redesign .settings-dashboard .erp-settings-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.85fr) minmax(420px, 1.15fr);
    align-items: start;
    gap: 18px;
    padding: 18px;
}

.byf-app-redesign .settings-dashboard .erp-settings-intro {
    padding: 16px;
    border: 1px solid var(--byf20-color-e2e8f0);
    border-radius: 12px;
    background: var(--byf20-color-f8fafc);
}

.byf-app-redesign .settings-dashboard .erp-settings-intro__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--byf20-color-e2e8f0);
    color: var(--byf20-color-0f172a);
    font-size: 14px;
}

.byf-app-redesign .settings-dashboard .erp-settings-intro__logo img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.byf-app-redesign .settings-dashboard .erp-settings-intro__body {
    color: var(--byf20-color-475569);
    font-size: 12px;
    line-height: 1.65;
}

.byf-app-redesign .settings-dashboard .erp-config-form {
    overflow: hidden;
    border: 1px solid var(--byf20-color-e2e8f0);
    border-radius: 12px;
    background: var(--byf20-color-ffffff);
}

.byf-app-redesign .settings-dashboard .erp-module-setting {
    margin: 0 !important;
    padding: 14px 16px;
    border-bottom: 1px solid var(--byf20-color-e2e8f0);
}

.byf-app-redesign .settings-dashboard .erp-module-setting__toggle,
.byf-app-redesign .settings-dashboard .erp-module-setting__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.byf-app-redesign .settings-dashboard .erp-module-setting__toggle {
    justify-content: flex-start;
}

.byf-app-redesign .settings-dashboard .erp-module-setting__toggle strong,
.byf-app-redesign .settings-dashboard .erp-module-setting__option > label:first-child,
.byf-app-redesign .settings-dashboard .erp-module-setting__details > label {
    margin: 0;
    color: var(--byf20-color-334155);
    font-size: 12px;
    font-weight: 600;
}

.byf-app-redesign .settings-dashboard .erp-module-setting__details {
    width: 100%;
    max-width: 520px;
    margin-top: 12px;
    padding: 0 !important;
}

.byf-app-redesign .settings-dashboard .erp-module-setting__details > .form-control {
    width: 100% !important;
    margin-top: 6px;
}

.byf-app-redesign .settings-dashboard .erp-module-setting__option {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--byf20-color-e2e8f0);
}

.byf-app-redesign .settings-dashboard .erp-config-form__footer {
    display: flex;
    justify-content: flex-end;
    padding: 12px 16px;
    background: var(--byf20-color-f8fafc);
}

.byf-app-redesign .settings-dashboard .erp-config-form__footer .btn {
    width: auto !important;
    min-width: 124px;
}

.byf-app-redesign .settings-dashboard .erp-items-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--byf20-color-e2e8f0);
}

.byf-app-redesign .settings-dashboard .erp-items-toolbar h3 {
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 14px;
}

.byf-app-redesign .settings-dashboard .erp-items-toolbar .filter {
    position: static !important;
    width: min(100%, 620px);
}

.byf-app-redesign .settings-dashboard .erp-items-toolbar .custom-search {
    display: grid;
    grid-template-columns: minmax(150px, 190px) minmax(220px, 1fr) 38px;
    width: 100%;
    margin: 0;
}

.byf-app-redesign .settings-dashboard .erp-items-toolbar .custom-search .position-relative,
.byf-app-redesign .settings-dashboard .erp-items-toolbar .custom-search .form-control {
    width: 100% !important;
    margin: 0 !important;
}

.byf-app-redesign .settings-dashboard .erp-items-toolbar #doErpSearch {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--byf20-color-d9e4f2);
    border-radius: 0 9px 9px 0;
    background: var(--byf20-color-ffffff) !important;
    color: var(--byf20-color-334155);
}

.byf-app-redesign .settings-dashboard #erpitems {
    margin: 0 !important;
}

.byf-app-redesign .settings-dashboard #erpitems > .table {
    margin: 0;
    padding: 0;
}

.byf-app-redesign .settings-dashboard #erpitems .header {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0;
    padding: 10px 14px !important;
    border-bottom: 1px solid var(--byf20-color-e2e8f0);
    background: var(--byf20-color-f8fafc);
    color: var(--byf20-color-64748b);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.byf-app-redesign .settings-dashboard #erpitems .erp-body-overflow {
    max-height: none !important;
    overflow: visible !important;
}

.byf-app-redesign .settings-dashboard #erpitems .erp-body-overflow > .row {
    min-height: 42px;
    align-items: center;
    margin: 0;
    padding: 8px 14px !important;
    border-bottom: 1px solid var(--byf20-color-e2e8f0);
    color: var(--byf20-color-334155);
    font-size: 12px;
}

.byf-app-redesign .settings-dashboard #erpitems .erp-body-overflow > .row:last-child {
    border-bottom: 0;
}

@media (max-width: 991.98px) {
    .byf-app-redesign .settings-dashboard .erp-settings-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .byf-app-redesign .settings-dashboard .erp-module-setting__details {
        max-width: none;
    }
}

@media (max-width: 767.98px) {
    .byf-app-redesign .settings-dashboard .erp-items-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .byf-app-redesign .settings-dashboard .erp-items-toolbar .filter {
        width: 100%;
    }

    .byf-app-redesign .settings-dashboard .erp-items-toolbar .custom-search {
        grid-template-columns: minmax(0, 1fr) 38px;
    }

    .byf-app-redesign .settings-dashboard .erp-items-toolbar .custom-search > .position-relative:first-child {
        grid-column: 1 / -1;
        margin-bottom: 8px !important;
    }
}

.byf-app-redesign .settings-dashboard #sharepointSiteAndDrive {
    border: 1px solid var(--byf20-color-d9e4f2) !important;
    border-radius: 14px;
    background: var(--byf20-color-f8fafc);
    overflow: hidden;
}

.byf-app-redesign .settings-dashboard #sharepointSiteAndDrive .sites,
.byf-app-redesign .settings-dashboard #sharepointSiteAndDrive .drives {
    background: var(--byf20-color-ffffff);
}

.byf-app-redesign .settings-dashboard #sharepointSiteAndDrive .sites .item,
.byf-app-redesign .settings-dashboard #sharepointSiteAndDrive .drives .item {
    border-radius: 10px;
}

.byf-app-redesign .settings-dashboard #sharepointSiteAndDrive .sites .item:hover,
.byf-app-redesign .settings-dashboard #sharepointSiteAndDrive .sites .item.active,
.byf-app-redesign .settings-dashboard #sharepointSiteAndDrive .drives .item:hover {
    background: var(--byf-redesign-primary-soft);
}

@media (max-width: 767.98px) {
    .byf-app-redesign .settings-dashboard .settings-tab-info {
        margin-bottom: 12px;
    }

    .byf-app-redesign .settings-dashboard .settings-tab-info--with-action {
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
    }

    .byf-app-redesign .settings-dashboard .settings-tab-info-action {
        width: 100%;
        min-width: 0;
        flex-basis: auto;
        margin-left: 0;
    }

    .byf-app-redesign .settings-dashboard .table-responsive-sm,
    .byf-app-redesign .settings-dashboard .table-responsive-lg,
    .byf-app-redesign .settings-dashboard .table-responsive,
    .byf-app-redesign .settings-dashboard .settings-table-surface {
        overflow-x: auto;
    }

    .byf-app-redesign .settings-dashboard .table {
        min-width: 640px;
    }

    .byf-app-redesign .settings-dashboard .settings-tags-section__header {
        min-height: 48px;
    }

    .byf-app-redesign .settings-dashboard .settings-tags-block {
        padding: 14px;
    }

    .byf-app-redesign .settings-dashboard .settings-tags-section__header {
        padding: 12px 14px;
    }

    .byf-app-redesign .settings-dashboard .settings-taggroup-grid {
        grid-template-columns: 1fr;
    }

    .byf-app-redesign .settings-dashboard .settings-tags-list--users {
        padding: 14px;
    }
}

/* Metadata sets */
.byf-app-redesign #workspace.metadatasets-container,
.byf-app-redesign #workspace.metadatafields-container,
.byf-app-redesign .metadatasets-container,
.byf-app-redesign .metadatafields-container {
    --byf-metadata-accent: var(--byf-redesign-primary);
    --byf-metadata-accent-soft: var(--byf-redesign-primary-soft);
    display: flex;
    min-height: 100%;
    flex-direction: column;
}

.byf-app-redesign .metadatasets-container .byf-redesign-toolbar-stack,
.byf-app-redesign .metadatafields-container .byf-redesign-toolbar-stack {
    flex: 0 0 auto;
}

.byf-app-redesign .byf-metadata-template-tabs {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 6px;
    border: 1px solid var(--byf-redesign-border);
    border-radius: var(--byf-redesign-radius);
    background: var(--byf-redesign-card);
    box-shadow: var(--byf-redesign-shadow-sm);
}

.byf-app-redesign .byf-metadata-template-tab {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    gap: 9px;
    padding: 0 16px;
    border-radius: var(--byf-redesign-radius-sm);
    color: var(--byf-redesign-muted-foreground);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.byf-app-redesign .byf-metadata-template-tab.active {
    background: #101a2e;
    color: #fff;
}

.byf-app-redesign .byf-metadata-template-tab i {
    font-size: 14px;
}

.byf-app-redesign .byf-metadata-template-tab-count {
    display: inline-flex;
    min-width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: inherit;
    font-size: 11px;
    font-weight: 800;
}

.byf-app-redesign .byf-metadata-template-intro {
    margin: 12px 0 0;
    padding: 16px 18px;
    border: 1px solid var(--byf-redesign-border);
    border-radius: var(--byf-redesign-radius);
    background: #fff;
}

.byf-app-redesign .byf-metadata-template-kicker {
    margin-bottom: 10px;
    color: var(--byf-redesign-muted-foreground);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
    line-height: 1;
    text-transform: uppercase;
}

.byf-app-redesign .byf-metadata-template-copy {
    color: #526782;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
}

.byf-app-redesign .byf-metadata-card-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
    padding: 12px 0 20px !important;
}

.byf-app-redesign .metadatasets .metadataset.flex-item {
    width: auto;
    min-width: 0;
    height: 164px;
    margin: 0 !important;
}

.byf-app-redesign .metadatasets .metadataset.flex-item .flex-item-container,
.byf-app-redesign .metadatasets .metadataset.flex-item .byf-metadata-template-card {
    position: relative;
    display: flex;
    overflow: hidden;
    width: 100%;
    height: 100%;
    flex-direction: column;
    box-sizing: border-box;
    padding: 18px 22px 14px !important;
    border: 1px solid var(--byf-redesign-border);
    border-radius: var(--byf-redesign-radius);
    background: var(--byf-redesign-card) !important;
    color: var(--byf-redesign-foreground);
    box-shadow: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.byf-app-redesign .metadatasets .metadataset.flex-item .byf-metadata-template-card::before {
    content: "";
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: -1px;
    width: 4px;
    border-radius: var(--byf-redesign-radius) 0 0 var(--byf-redesign-radius);
    background: var(--byf-metadata-accent, var(--byf-redesign-primary));
}

.byf-app-redesign .metadatasets .metadataset.flex-item .byf-metadata-template-card:hover {
    border-color: var(--byf-metadata-accent, var(--byf-redesign-primary));
    box-shadow: var(--byf-redesign-shadow-sm);
    transform: translateY(-1px);
}

.byf-app-redesign .metadatasets .link-folder {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.byf-app-redesign .byf-metadata-template-main {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.byf-app-redesign .byf-metadata-template-icon {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--byf-metadata-accent-soft, var(--byf-redesign-primary-soft));
    color: var(--byf-metadata-accent, var(--byf-redesign-primary));
    font-size: 18px;
}

.byf-app-redesign .byf-metadata-template-heading {
    min-width: 0;
    min-height: 44px;
    padding-top: 1px;
}

.byf-app-redesign .metadatasets .titel-tile {
    display: block;
    overflow: hidden;
    margin: 0 !important;
    color: var(--byf-redesign-foreground) !important;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.byf-app-redesign .byf-metadata-template-kind {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
    color: var(--byf-metadata-accent, var(--byf-redesign-primary));
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1;
    text-transform: uppercase;
}

.byf-app-redesign .byf-metadata-template-description {
    position: relative;
    z-index: 2;
    display: -webkit-box;
    flex: 1 1 auto;
    overflow: hidden;
    min-height: 32px;
    margin-top: 10px;
    color: #5f7189;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.byf-app-redesign .byf-metadata-template-footer {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 27px;
    gap: 16px;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--byf-redesign-border);
}

.byf-app-redesign .byf-metadata-template-count {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    color: #526782;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.byf-app-redesign .byf-metadata-template-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.byf-app-redesign .byf-metadata-template-actions .btn-informatie,
.byf-app-redesign .byf-metadata-template-actions .delete-metadataset {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    height: 30px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--byf-redesign-foreground) !important;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.byf-app-redesign .byf-metadata-template-actions .delete-metadataset {
    width: 30px;
    color: var(--byf-redesign-muted-foreground) !important;
}

.byf-app-redesign .byf-metadata-template-actions .btn-informatie:hover {
    color: var(--byf-metadata-accent, var(--byf-redesign-primary)) !important;
}

.byf-app-redesign .byf-metadata-template-actions .delete-metadataset:hover {
    color: #dc3545 !important;
}

.byf-app-redesign .byf-metadata-template-actions i {
    font-size: 16px;
}

.byf-app-redesign .byf-metadata-empty-state {
    display: flex;
    min-height: 160px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 16px;
    border: 1px dashed var(--byf-redesign-border);
    border-radius: var(--byf-redesign-radius);
    background: var(--byf-redesign-card);
    color: var(--byf-redesign-muted-foreground);
    font-size: 14px;
}

@media screen and (max-width: 1640px) {
    .byf-app-redesign .byf-metadata-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media screen and (max-width: 1180px) {
    .byf-app-redesign .byf-metadata-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.byf-app-redesign .byf-metadata-empty-state i {
    color: var(--byf-metadata-accent, var(--byf-redesign-primary));
    font-size: 18px;
}

.byf-app-redesign .byf-metadata-empty-state b {
    color: var(--byf-redesign-foreground);
    font-weight: 800;
}

.byf-app-redesign .byf-metadata-fields {
    padding: 0 0 20px !important;
}

.byf-app-redesign .byf-metadata-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 12px 0;
    padding: 14px 16px;
    border: 1px solid var(--byf-redesign-border);
    border-radius: var(--byf-redesign-radius);
    background: #fff;
}

.byf-app-redesign .byf-metadata-detail-heading,
.byf-app-redesign .byf-metadata-detail-actions {
    display: flex;
    min-width: 0;
    align-items: center;
}

.byf-app-redesign .byf-metadata-detail-heading {
    gap: 12px;
}

.byf-app-redesign .byf-metadata-back,
.byf-app-redesign .byf-metadata-detail-icon {
    display: inline-flex;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    border-radius: var(--byf-redesign-radius-sm);
}

.byf-app-redesign .byf-metadata-back {
    color: var(--byf-redesign-muted-foreground) !important;
}

.byf-app-redesign .byf-metadata-back:hover {
    background: var(--byf-redesign-muted);
    color: var(--byf-metadata-accent) !important;
}

.byf-app-redesign .byf-metadata-detail-icon {
    background: var(--byf-metadata-accent-soft);
    color: var(--byf-metadata-accent);
    font-size: 16px;
}

.byf-app-redesign .byf-metadata-detail-copy {
    min-width: 0;
}

.byf-app-redesign .byf-metadata-detail-copy h2 {
    overflow: hidden;
    margin: 0 0 4px;
    color: var(--byf-redesign-foreground);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.byf-app-redesign .byf-metadata-detail-copy p {
    margin: 0;
    color: var(--byf-redesign-muted-foreground);
    font-size: 12px;
    line-height: 1.4;
}

.byf-app-redesign .byf-metadata-detail-actions {
    flex: 0 0 auto;
    gap: 12px;
}

.byf-app-redesign .byf-metadata-field-total {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    color: var(--byf-redesign-muted-foreground);
    font-size: 12px;
    white-space: nowrap;
}

.byf-app-redesign .byf-metadata-field-total strong {
    color: var(--byf-redesign-foreground);
    font-size: 14px;
}

.byf-app-redesign .byf-metadata-detail-actions .bubble-new-metadatafield {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border-radius: var(--byf-redesign-radius-sm);
    background: var(--byf-metadata-accent) !important;
    color: #fff !important;
    font-size: 12px;
    font-weight: 800;
}

.byf-app-redesign .byf-metadata-table-panel {
    overflow: hidden;
    border: 1px solid var(--byf-redesign-border);
    border-radius: var(--byf-redesign-radius);
    background: var(--byf-redesign-card);
    box-shadow: none;
}

.byf-app-redesign .byf-metadata-table {
    table-layout: fixed;
    margin: 0;
    color: var(--byf-redesign-foreground);
    border-collapse: separate;
    border-spacing: 0;
}

.byf-app-redesign .byf-metadata-table .byf-metadata-drag-column {
    width: 42px;
}

.byf-app-redesign .byf-metadata-table th:nth-child(2) {
    width: 15%;
}

.byf-app-redesign .byf-metadata-table th:nth-child(3) {
    width: 20%;
}

.byf-app-redesign .byf-metadata-table th:nth-child(4) {
    width: 16%;
}

.byf-app-redesign .byf-metadata-table th:nth-child(5) {
    width: 92px;
}

.byf-app-redesign .byf-metadata-table .byf-metadata-actions-column {
    width: 92px;
    text-align: right;
}

.byf-app-redesign .byf-metadata-table thead th {
    height: 44px;
    padding: 0 14px;
    border-top: 0;
    border-bottom: 1px solid var(--byf-redesign-border);
    background: #f8fafc;
    color: var(--byf-redesign-muted-foreground);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

.byf-app-redesign .byf-metadata-table tbody tr {
    height: 54px;
    background: var(--byf-redesign-card);
    transition: background-color 140ms ease;
}

.byf-app-redesign .byf-metadata-table tbody tr:hover {
    background: var(--byf-metadata-accent-soft, var(--byf-redesign-primary-soft)) !important;
}

.byf-app-redesign .byf-metadata-table td {
    padding: 10px 14px;
    border-top: 0;
    border-bottom: 1px solid var(--byf-redesign-border-soft);
    color: var(--byf-redesign-foreground);
    font-size: 13px;
    font-weight: 500;
    vertical-align: middle;
}

.byf-app-redesign .byf-metadata-table tbody tr:last-child td {
    border-bottom: 0;
}

.byf-app-redesign .byf-metadata-table .byf-metadata-drag {
    width: 42px;
    text-align: center;
    color: var(--byf-redesign-muted-foreground);
    cursor: grab;
}

.byf-app-redesign .byf-metadata-table .byf-metadata-code {
    color: var(--byf-redesign-muted-foreground);
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 12px;
}

.byf-app-redesign .byf-metadata-table .byf-metadata-name {
    overflow: hidden;
    font-weight: 800;
    text-overflow: ellipsis;
}

.byf-app-redesign .byf-metadata-type {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    padding: 0 10px;
    border: 1px solid var(--byf-redesign-border);
    border-radius: 999px;
    background: #fff;
    color: var(--byf-redesign-muted-foreground);
    font-size: 12px;
    font-weight: 800;
}

.byf-app-redesign .byf-metadata-required {
    display: inline-flex;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--byf-redesign-border);
    border-radius: 999px;
    background: #fff;
    color: var(--byf-redesign-muted-foreground);
}

.byf-app-redesign .byf-metadata-required.is-required {
    border-color: color-mix(in srgb, var(--byf-metadata-accent, var(--byf-redesign-primary)) 38%, #fff);
    background: var(--byf-metadata-accent-soft, var(--byf-redesign-primary-soft));
    color: var(--byf-metadata-accent, var(--byf-redesign-primary));
}

.byf-app-redesign .byf-metadata-extra {
    max-width: 520px;
    color: var(--byf-redesign-muted-foreground) !important;
    font-size: 12px !important;
    line-height: 1.45;
}

.byf-app-redesign .byf-metadata-row-actions {
    text-align: right !important;
    white-space: nowrap;
}

.byf-app-redesign .byf-metadata-row-actions a {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    margin: 0 2px;
    border-radius: var(--byf-redesign-radius-sm);
    color: var(--byf-redesign-muted-foreground) !important;
}

.byf-app-redesign .byf-metadata-row-actions a:hover {
    background: var(--byf-redesign-muted);
    color: var(--byf-metadata-accent, var(--byf-redesign-primary)) !important;
}

.byf-app-redesign #modalContentEditMetadataSet .modal-body,
.byf-app-redesign #modalContentEditMetadataField .modal-body {
    padding: 20px;
    background: #fff;
}

.byf-app-redesign #modalContentEditMetadataSet,
.byf-app-redesign #modalContentEditMetadataField {
    position: relative;
}

.byf-app-redesign #modalContentEditMetadataSet::after,
.byf-app-redesign #modalContentEditMetadataField::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 68px;
    left: 0;
    height: 46px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .86) 58%, #fff 100%);
    pointer-events: none;
    opacity: 0;
    z-index: 3;
    transition: opacity .16s ease;
}

.byf-app-redesign #modalContentEditMetadataSet.byf-metadata-form-modal--has-overflow::after,
.byf-app-redesign #modalContentEditMetadataField.byf-metadata-form-modal--has-overflow::after {
    opacity: 1;
}

.byf-app-redesign #modalContentEditMetadataSet .modal-body.byf-metadata-form-modal,
.byf-app-redesign #modalContentEditMetadataField .modal-body.byf-metadata-form-modal {
    max-height: min(62vh, 560px);
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: 44px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.byf-app-redesign #modalContentEditMetadataSet .modal-body.byf-metadata-form-modal::-webkit-scrollbar,
.byf-app-redesign #modalContentEditMetadataField .modal-body.byf-metadata-form-modal::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.byf-app-redesign #modalContentEditMetadataSet .newmetadataset,
.byf-app-redesign #modalContentEditMetadataField .newmetadatafield {
    padding: 0 !important;
    border: 0;
    background: #fff;
}

.byf-app-redesign #modalContentEditMetadataSet .form-group,
.byf-app-redesign #modalContentEditMetadataField .form-group {
    align-items: center;
    margin-bottom: 16px;
}

.byf-app-redesign #modalContentEditMetadataSet .byf-metadata-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.byf-app-redesign #modalContentEditMetadataSet .byf-metadata-form-grid .form-group {
    margin: 0;
}

.byf-app-redesign #modalContentEditMetadataSet .byf-metadata-form-wide {
    grid-column: 1 / -1;
}

.byf-app-redesign #modalContentEditMetadataField .form-group.row {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 18px;
    margin-right: 0;
    margin-left: 0;
}

.byf-app-redesign #modalContentEditMetadataField .form-group.row > [class*="col-"] {
    width: auto;
    max-width: none;
    padding: 0;
}

.byf-app-redesign #modalContentEditMetadataField .form-group.row > .col-sm-6 {
    position: relative;
}

.byf-app-redesign #modalContentEditMetadataSet h3,
.byf-app-redesign #modalContentEditMetadataField h3,
.byf-app-redesign #modalContentEditMetadataSet .col-form-label,
.byf-app-redesign #modalContentEditMetadataField .col-form-label {
    color: var(--byf-redesign-foreground) !important;
    font-size: 13px;
    font-weight: 800;
}

.byf-app-redesign #modalContentEditMetadataSet .col-form-label,
.byf-app-redesign #modalContentEditMetadataField .col-form-label {
    display: block;
    margin: 0 0 7px;
    padding: 0;
}

.byf-app-redesign #modalContentEditMetadataField h3 {
    display: flex !important;
    min-height: 36px;
    align-items: center;
    margin: 0 !important;
}

.byf-app-redesign #modalContentEditMetadataSet .form-control,
.byf-app-redesign #modalContentEditMetadataField .form-control {
    min-height: 36px;
    border: 1px solid var(--byf-redesign-control-border) !important;
    border-radius: var(--byf-redesign-control-radius) !important;
    background: #fff !important;
    color: var(--byf-redesign-foreground);
    box-shadow: none !important;
    font-size: 13px;
}

.byf-app-redesign #modalContentEditMetadataSet textarea.form-control,
.byf-app-redesign #modalContentEditMetadataField textarea.form-control {
    min-height: 94px;
    padding-top: 10px;
    resize: vertical;
}

.byf-app-redesign #modalContentEditMetadataField .byf-metadata-field-help {
    position: absolute;
    top: 11px;
    right: -22px;
    color: var(--byf-redesign-muted-foreground);
}

.byf-app-redesign .byf-metadata-modal-footer {
    display: flex;
    min-height: 68px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    border-top: 1px solid var(--byf-redesign-border);
    background: #fff;
    position: relative;
    z-index: 4;
}

.byf-app-redesign .byf-metadata-modal-status {
    min-width: 0;
}

.byf-app-redesign .byf-metadata-modal-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
}

.byf-app-redesign .byf-metadata-modal-actions .btn {
    width: auto;
    min-width: 104px;
    min-height: 38px;
    margin: 0;
    padding: 0 16px;
    border-radius: var(--byf-redesign-radius-sm);
    font-size: 12px;
    font-weight: 800;
}

.byf-app-redesign .byf-metadata-modal-actions .btn-add {
    border-color: var(--byf-redesign-primary);
    background: var(--byf-redesign-primary) !important;
    color: #fff !important;
}

.byf-app-redesign .byf-metadata-modal-actions .btn-delete {
    border-color: #dc3545;
    background: #dc3545 !important;
    color: #fff !important;
}

.byf-app-redesign .byf-metadata-delete-body {
    padding: 22px 20px;
    background: #fff;
}

.byf-app-redesign .byf-metadata-delete-message {
    display: flex;
    align-items: center;
    gap: 14px;
}

.byf-app-redesign .byf-metadata-delete-message p {
    margin: 0;
    color: var(--byf-redesign-foreground);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
}

.byf-app-redesign .byf-metadata-delete-icon {
    display: inline-flex;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    border-radius: var(--byf-redesign-radius-sm);
    background: rgba(220, 53, 69, .09);
    color: #dc3545;
    font-size: 17px;
}

@media screen and (max-width: 760px) {
    .byf-app-redesign .byf-metadata-template-tabs,
    .byf-app-redesign .byf-metadata-template-intro {
        width: 100%;
        max-width: none;
        margin-right: 0;
        margin-left: 0;
    }

    .byf-app-redesign .byf-metadata-template-tab {
        width: 100%;
        justify-content: center;
    }

    .byf-app-redesign .byf-metadata-card-grid {
        grid-template-columns: minmax(0, 1fr);
        padding: 12px 0 14px !important;
    }

    .byf-app-redesign .metadatasets .metadataset.flex-item {
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 164px;
    }

    .byf-app-redesign .metadatasets .metadataset.flex-item .byf-metadata-template-card {
        min-height: 164px;
        padding: 18px 18px 15px !important;
    }

    .byf-app-redesign .byf-metadata-template-main {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 12px;
    }

    .byf-app-redesign .byf-metadata-template-icon {
        width: 44px;
        height: 44px;
    }

    .byf-app-redesign .byf-metadata-template-footer {
        gap: 10px;
    }

    .byf-app-redesign .byf-metadata-template-actions {
        justify-content: flex-end;
    }

    .byf-app-redesign .byf-metadata-fields {
        padding: 0 0 14px !important;
    }

    .byf-app-redesign .byf-metadata-table-panel {
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .byf-app-redesign .byf-metadata-table {
        display: block;
        min-width: 0;
        background: transparent;
    }

    .byf-app-redesign .byf-metadata-table thead {
        display: none;
    }

    .byf-app-redesign .byf-metadata-table tbody {
        display: grid;
        gap: 10px;
    }

    .byf-app-redesign .byf-metadata-table tbody tr {
        position: relative;
        display: grid;
        height: auto;
        grid-template-columns: minmax(0, 1fr) auto;
        overflow: hidden;
        border: 1px solid var(--byf-redesign-border);
        border-radius: var(--byf-redesign-radius);
        background: #fff;
    }

    .byf-app-redesign .byf-metadata-table td {
        display: grid;
        min-width: 0;
        grid-template-columns: 110px minmax(0, 1fr);
        gap: 10px;
        padding: 9px 12px;
        border-bottom: 1px solid var(--byf-redesign-border-soft);
    }

    .byf-app-redesign .byf-metadata-table td::before {
        color: var(--byf-redesign-muted-foreground);
        content: attr(data-label);
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .byf-app-redesign .byf-metadata-table .byf-metadata-drag {
        position: absolute;
        z-index: 2;
        top: 8px;
        right: 10px;
        display: inline-flex;
        width: 30px;
        height: 30px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
    }

    .byf-app-redesign .byf-metadata-table .byf-metadata-name {
        grid-column: 1 / -1;
        padding-right: 48px;
        font-size: 14px;
    }

    .byf-app-redesign .byf-metadata-table .byf-metadata-name::before {
        display: none;
    }

    .byf-app-redesign .byf-metadata-row-actions {
        display: flex !important;
        grid-column: 1 / -1;
        justify-content: flex-end;
        border-bottom: 0 !important;
    }

    .byf-app-redesign .byf-metadata-row-actions::before {
        display: none;
    }

    .byf-app-redesign .byf-metadata-detail-header {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
        margin: 10px;
        padding: 12px;
    }

    .byf-app-redesign .byf-metadata-detail-actions {
        justify-content: space-between;
        padding-left: 48px;
    }

    .byf-app-redesign #modalContentEditMetadataSet .byf-metadata-form-grid,
    .byf-app-redesign #modalContentEditMetadataField .form-group.row {
        grid-template-columns: minmax(0, 1fr);
        gap: 7px;
    }

    .byf-app-redesign #modalContentEditMetadataField h3 {
        min-height: 0;
    }

    .byf-app-redesign .byf-metadata-modal-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .byf-app-redesign .byf-metadata-modal-actions {
        width: 100%;
    }

    .byf-app-redesign .byf-metadata-modal-actions .btn {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* Preview media uses a bounded document viewport. PDF.js keeps its own
 * viewer scroll, while images and videos scroll inside the shell below. */
.byf-app-redesign #workspace.byf-preview-workspace {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column !important;
    min-height: 0 !important;
    height: calc(100vh - var(--byf-redesign-topbar-height)) !important;
    max-height: calc(100vh - var(--byf-redesign-topbar-height));
    overflow: hidden !important;
}

.byf-app-redesign .byf-preview-container {
    display: flex;
    flex: 1 1 auto !important;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.byf-app-redesign .byf-preview-container > #content {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.byf-app-redesign .byf-preview-container #imagepreviewzone {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.byf-app-redesign .byf-preview-container #pdfpreviewzone {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.byf-app-redesign .byf-preview-container.byf-preview-annotating #pdfpreviewzone {
    display: none !important;
}

.byf-app-redesign .byf-preview-container.byf-preview-annotating #imagepreviewzone {
    display: flex !important;
}

.byf-app-redesign .byf-preview-container #pdfpreviewzone #outerContainer,
.byf-app-redesign .byf-preview-container #pdfpreviewzone #mainContainer,
.byf-app-redesign .byf-preview-container #pdfpreviewzone #viewerContainer {
    min-width: 0;
    min-height: 0;
}

.byf-app-redesign .byf-preview-container #pdfpreviewzone #outerContainer,
.byf-app-redesign .byf-preview-container #pdfpreviewzone #mainContainer {
    height: 100%;
}

.byf-app-redesign .byf-preview-container #pdfpreviewzone #viewerContainer {
    overflow: auto;
}

/* Image and video controls follow the compact PDF toolbar rhythm instead of
 * consuming a vertical strip beside the document. */
.byf-app-redesign .byf-preview-media-toolbar {
    position: relative !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0;
    background: transparent !important;
    text-align: left;
}

.byf-app-redesign .byf-preview-media-toolbar #controls {
    position: static !important;
    top: auto !important;
    width: 100%;
    height: auto !important;
    min-height: 0;
    overflow: visible !important;
    padding: 0 0 12px !important;
}

.byf-app-redesign .byf-preview-media-toolbar #controls > .d-flex {
    position: relative;
    display: flex !important;
    min-height: 48px;
    height: auto !important;
    max-height: none !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-start !important;
    align-content: center;
    flex-wrap: wrap;
    gap: 0;
    padding: 6px 10px;
    border: 1px solid var(--byf-redesign-border);
    border-radius: var(--byf-redesign-radius);
    background: var(--byf-redesign-card);
    box-shadow: var(--byf-redesign-shadow-sm);
}

.byf-app-redesign .byf-preview-media-toolbar #controls-top,
.byf-app-redesign .byf-preview-media-toolbar #controls-middle,
.byf-app-redesign .byf-preview-media-toolbar #controls-bottom,
.byf-app-redesign .byf-preview-media-toolbar #zoomactions {
    display: flex;
    align-items: center;
    height: auto !important;
    min-height: 0 !important;
    align-self: center;
    gap: 4px;
}

.byf-app-redesign .byf-preview-media-toolbar #controls-top {
    flex: 0 0 auto;
    min-width: 0;
    order: 0;
}

.byf-app-redesign .byf-preview-media-toolbar #controls-middle {
    flex: 0 0 auto;
    order: 1;
    margin-left: 12px;
    padding-left: 14px;
    border-left: 1px solid var(--byf-redesign-border-soft);
}

.byf-app-redesign .byf-preview-media-toolbar #controls-middle:empty,
.byf-app-redesign .byf-preview-media-toolbar #controls-bottom:empty {
    display: none !important;
}

.byf-app-redesign .byf-preview-media-toolbar #controls-bottom {
    flex: 0 0 auto;
    order: 9;
    margin-left: auto;
    padding-left: 14px;
    border-left: 1px solid var(--byf-redesign-border-soft);
}

.byf-app-redesign .byf-preview-media-toolbar #controls #paging {
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.byf-app-redesign .byf-preview-media-toolbar #controls #pageCount {
    display: inline-flex;
    height: 34px;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--byf-redesign-muted-foreground);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    box-shadow: none;
}

.byf-app-redesign .byf-preview-media-toolbar #controls #pageCount #counter {
    display: inline-flex;
    min-width: 0;
    height: 34px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--byf-redesign-foreground);
    font-size: 13px;
    font-weight: 750;
    letter-spacing: 0;
}

.byf-app-redesign .byf-preview-media-toolbar #controls #pageCount #currPag {
    display: inline-flex;
    min-width: 44px;
    height: 34px;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 1px solid var(--byf-redesign-primary-border);
    border-radius: var(--byf-redesign-radius-sm);
    background: #fff;
    color: var(--byf-redesign-foreground);
    font-weight: 750;
}

.byf-app-redesign .byf-preview-media-toolbar #controls #pageCount .byf-page-count-of,
.byf-app-redesign .byf-preview-media-toolbar #controls #pageCount .limitcolor {
    color: var(--byf-redesign-foreground) !important;
    font-size: 13px;
    font-weight: 750;
}

.byf-app-redesign .byf-preview-media-toolbar .preview-browsing,
.byf-app-redesign .byf-preview-media-toolbar .preview-zoom,
.byf-app-redesign .byf-preview-media-toolbar #zoomactions a,
.byf-app-redesign .byf-preview-media-toolbar #controls #pageCount .paging-box,
.byf-app-redesign .byf-preview-media-toolbar #controls #pageCount #limitIcon,
.byf-app-redesign .byf-preview-media-toolbar .byf-annotate-menu-toggle,
.byf-app-redesign .byf-preview-media-toolbar .annotate-toolbox a,
.byf-app-redesign .byf-preview-media-toolbar #savebox .save-action,
.byf-app-redesign .byf-preview-media-toolbar #external-toolbar .redactor-toolbar a {
    display: inline-flex;
    width: 34px;
    min-width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    border: 1px solid transparent;
    border-radius: var(--byf-redesign-radius-sm);
    color: var(--byf-redesign-muted-foreground) !important;
    background: var(--byf-redesign-muted);
    line-height: 1;
    text-decoration: none !important;
    box-shadow: none !important;
}

.byf-app-redesign .byf-preview-media-toolbar .preview-browsing:hover,
.byf-app-redesign .byf-preview-media-toolbar .preview-zoom:hover,
.byf-app-redesign .byf-preview-media-toolbar #zoomactions a:hover,
.byf-app-redesign .byf-preview-media-toolbar #controls #pageCount .paging-box:hover,
.byf-app-redesign .byf-preview-media-toolbar #controls #pageCount #limitIcon:hover,
.byf-app-redesign .byf-preview-media-toolbar .byf-annotate-menu-toggle:hover,
.byf-app-redesign .byf-preview-media-toolbar .byf-annotate-menu-toggle:focus,
.byf-app-redesign .byf-preview-media-toolbar .annotate-toolbox a:hover,
.byf-app-redesign .byf-preview-media-toolbar .annotate-toolbox a.active,
.byf-app-redesign .byf-preview-media-toolbar #savebox .save-action:hover,
.byf-app-redesign .byf-preview-media-toolbar #savebox .save-action.active,
.byf-app-redesign .byf-preview-media-toolbar #external-toolbar .redactor-toolbar a:hover,
.byf-app-redesign .byf-preview-media-toolbar #external-toolbar .redactor-toolbar a.redactor-button-active {
    border-color: var(--byf-redesign-primary-border);
    color: var(--byf-redesign-primary) !important;
    background: var(--byf-redesign-card);
}

.byf-app-redesign .byf-preview-media-toolbar .preview-browsing i,
.byf-app-redesign .byf-preview-media-toolbar .preview-zoom i,
.byf-app-redesign .byf-preview-media-toolbar #controls #pageCount .paging-box i,
.byf-app-redesign .byf-preview-media-toolbar #controls #pageCount #limitIcon,
.byf-app-redesign .byf-preview-media-toolbar .byf-annotate-menu-toggle i,
.byf-app-redesign .byf-preview-media-toolbar .annotate-toolbox i,
.byf-app-redesign .byf-preview-media-toolbar #savebox i {
    color: inherit !important;
    font-size: 18px;
    padding: 0 !important;
}

.byf-app-redesign .byf-preview-media-toolbar #controls #pageCount .paging-box {
    display: inline-flex !important;
    height: 34px !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.byf-app-redesign .byf-preview-media-toolbar #controls #pageCount .paging-box i {
    display: inline-flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
    transform: none !important;
}

.byf-app-redesign .byf-preview-media-toolbar #controls #pageCount .paging-box.disabled,
.byf-app-redesign .byf-preview-media-toolbar #controls #pageCount .paging-box[aria-disabled="true"] {
    cursor: default;
    pointer-events: none;
    opacity: .42;
}

.byf-app-redesign .byf-preview-media-toolbar #controls #pageCount .paging-box.disabled:hover,
.byf-app-redesign .byf-preview-media-toolbar #controls #pageCount .paging-box[aria-disabled="true"]:hover {
    border-color: transparent;
    color: var(--byf-redesign-muted-foreground) !important;
    background: var(--byf-redesign-muted);
}

.byf-app-redesign .byf-preview-media-toolbar #controls #pageCount #limitIcon {
    display: none !important;
    margin: 0 !important;
    cursor: help;
}

.byf-app-redesign .byf-preview-media-toolbar #controls #pageCount.limited #limitIcon {
    display: inline-flex !important;
    color: #b45309 !important;
}

.byf-app-redesign .byf-preview-media-toolbar .byf-annotate-menu-toggle {
    display: none !important;
    padding: 0 !important;
    cursor: pointer;
}

.byf-app-redesign .byf-preview-media-toolbar .byf-annotate-menu-toggle:focus,
.byf-app-redesign .byf-preview-media-toolbar .byf-annotate-menu-toggle:active {
    outline: 0 !important;
}

.byf-app-redesign .byf-preview-media-toolbar .annotate-toolbox {
    position: static !important;
    display: flex;
    flex: 0 1 auto;
    min-width: 0;
    padding: 0 !important;
    transform: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.byf-app-redesign .byf-preview-media-toolbar .byf-preview-toolbar-compact #controls-top {
    position: relative;
}

.byf-app-redesign .byf-preview-media-toolbar .byf-preview-toolbar-compact .byf-annotate-menu-toggle {
    display: inline-flex !important;
}

.byf-app-redesign .byf-preview-media-toolbar .byf-preview-toolbar-compact #controls-top > .annotate-toolbox {
    position: absolute !important;
    top: calc(100% + 8px);
    left: 0;
    z-index: 120;
    display: none !important;
    min-width: max-content;
    max-width: min(760px, calc(100vw - 56px));
    overflow-x: auto;
    overflow-y: visible;
    padding: 8px !important;
    border: 1px solid var(--byf-redesign-border) !important;
    border-radius: var(--byf-redesign-radius) !important;
    background: #fff !important;
    box-shadow: var(--byf-redesign-shadow-md) !important;
}

.byf-app-redesign .byf-preview-media-toolbar .byf-preview-toolbar-compact.byf-annotate-menu-open #controls-top > .annotate-toolbox:not([style*="display: none"]) {
    display: flex !important;
}

.byf-app-redesign .byf-preview-media-toolbar .byf-preview-toolbar-compact .annotate-toolbox .toolbox-body {
    flex-wrap: nowrap;
}

.byf-app-redesign .byf-preview-media-toolbar .byf-preview-toolbar-compact .annotate-toolbox .styleoptions {
    margin-left: 8px;
}

.byf-app-redesign .byf-preview-media-toolbar .annotate-toolbox .toolbox-body,
.byf-app-redesign .byf-preview-media-toolbar #savebox .toolbox-body {
    display: flex;
    width: auto !important;
    min-width: 0;
    align-items: center;
    gap: 4px;
    padding: 0 !important;
}

.byf-app-redesign .byf-preview-media-toolbar .annotate-toolbox .toolbox-body > div,
.byf-app-redesign .byf-preview-media-toolbar #savebox .toolbox-body > div {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}

.byf-app-redesign .byf-preview-media-toolbar .annotate-toolbox p,
.byf-app-redesign .byf-preview-media-toolbar #savebox p {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
}

.byf-app-redesign .byf-preview-media-toolbar .annotate-toolbox .styleoptions {
    display: none;
    align-items: center;
    gap: 10px;
    margin-left: 4px;
    padding: 4px 7px 4px 9px;
    border: 1px solid var(--byf-redesign-border);
    border-radius: var(--byf-redesign-radius-sm);
    background: #fff;
}

.byf-app-redesign .byf-preview-media-toolbar .annotate-toolbox.showstyleoptions .styleoptions {
    display: inline-flex;
    padding: 2px 5px !important;
}

.byf-app-redesign .byf-preview-media-toolbar .annotate-toolbox.showstyleoptions.hidecolors .styleoptions .colors {
    display: none !important;
}

.byf-app-redesign .byf-preview-media-toolbar .slidecontainer {
    position: static;
    display: inline-flex;
    height: auto;
    align-items: center;
    gap: 7px;
    left: auto;
}

.byf-app-redesign .byf-preview-media-toolbar .slidecontainer p {
    position: static;
    min-width: 34px;
    margin: 0 !important;
    color: var(--byf-redesign-muted-foreground);
    font-size: 12px !important;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
}

.byf-app-redesign .byf-preview-media-toolbar .slidecontainer p span {
    color: var(--byf-redesign-foreground);
}

.byf-app-redesign .byf-preview-media-toolbar .slider-prev {
    position: static;
    width: 86px;
    height: 16px;
    padding: 0;
    transform: none;
    border: 0;
    background: transparent;
    opacity: 1;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.byf-app-redesign .byf-preview-media-toolbar .slider-prev:focus,
.byf-app-redesign .byf-preview-media-toolbar .slider-prev:active {
    outline: 0 !important;
    box-shadow: none !important;
}

.byf-app-redesign .byf-preview-media-toolbar .slider-prev::-webkit-slider-runnable-track {
    height: 4px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(
        to right,
        var(--byf-redesign-primary) 0%,
        var(--byf-redesign-primary) var(--byf-slider-progress, 0%),
        var(--byf-redesign-border) var(--byf-slider-progress, 0%),
        var(--byf-redesign-border) 100%
    );
}

.byf-app-redesign .byf-preview-media-toolbar .slider-prev::-moz-range-track {
    height: 4px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(
        to right,
        var(--byf-redesign-primary) 0%,
        var(--byf-redesign-primary) var(--byf-slider-progress, 0%),
        var(--byf-redesign-border) var(--byf-slider-progress, 0%),
        var(--byf-redesign-border) 100%
    );
}

.byf-app-redesign .byf-preview-media-toolbar .slider-prev::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    margin-top: -6px;
    border: 3px solid #fff;
    border-radius: 999px;
    background: var(--byf-redesign-primary);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
    appearance: none;
    -webkit-appearance: none;
}

.byf-app-redesign .byf-preview-media-toolbar .slider-prev::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 3px solid #fff;
    border-radius: 999px;
    background: var(--byf-redesign-primary);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
}

.byf-app-redesign .byf-preview-media-toolbar .colors {
    position: relative;
    left: auto;
    display: inline-flex;
    align-items: center;
    padding: 0 !important;
}

.byf-app-redesign .byf-preview-media-toolbar .colors #colorSelectTrigger {
    width: 28px;
    min-width: 28px;
    height: 28px;
    border: 3px solid #fff;
    border-radius: 999px;
    box-shadow: 0 0 0 1px var(--byf-redesign-border), 0 1px 4px rgba(15, 23, 42, 0.12) !important;
}

.byf-app-redesign .byf-preview-media-toolbar .colors #colorSelectTrigger:hover,
.byf-app-redesign .byf-preview-media-toolbar .colors #colorSelectTrigger:focus {
    border-color: #fff;
    box-shadow: 0 0 0 1px var(--byf-redesign-primary-border), 0 2px 7px rgba(15, 23, 42, 0.14) !important;
}

.byf-app-redesign .byf-preview-media-toolbar .colors .colorslist {
    top: calc(100% + 8px);
    left: 50% !important;
    z-index: 50;
    width: 162px;
    padding: 8px !important;
    transform: translateX(-50%);
    border: 1px solid var(--byf-redesign-border);
    border-radius: var(--byf-redesign-radius);
    background: #fff;
    box-shadow: var(--byf-redesign-shadow-md);
}

.byf-app-redesign .byf-preview-media-toolbar .colors .colorselector {
    display: grid;
    grid-template-columns: repeat(4, 28px);
    gap: 7px;
    justify-content: center;
    margin: 0;
}

.byf-app-redesign .byf-preview-media-toolbar .colors .colorselector li {
    width: auto;
    height: auto;
    margin: 0;
}

.byf-app-redesign .byf-preview-media-toolbar .colors .color-btn {
    width: 28px;
    min-width: 28px;
    height: 28px;
    border: 3px solid #fff;
    border-radius: 999px;
    box-shadow: 0 0 0 1px var(--byf-redesign-border);
}

.byf-app-redesign .byf-preview-media-toolbar .colors .color-btn:hover,
.byf-app-redesign .byf-preview-media-toolbar .colors .color-btn.selected {
    box-shadow: 0 0 0 2px var(--byf-redesign-primary);
}

.byf-app-redesign .byf-preview-media-toolbar .colors .color-btn.light {
    box-shadow: 0 0 0 1px var(--byf-redesign-control-border);
}

.byf-app-redesign .byf-preview-media-toolbar .colors .color-btn.light:hover,
.byf-app-redesign .byf-preview-media-toolbar .colors .color-btn.light.selected {
    box-shadow: 0 0 0 2px var(--byf-redesign-primary);
}

.byf-app-redesign .byf-preview-media-toolbar #external-toolbar,
.byf-app-redesign .byf-preview-media-toolbar #external-toolbar .redactor-toolbar,
.byf-app-redesign .byf-preview-media-toolbar #external-toolbar .redactor-toolbar-external {
    display: flex !important;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.byf-app-redesign .byf-preview-media-toolbar #external-toolbar .redactor-toolbar a.re-button-icon,
.byf-app-redesign .byf-preview-media-toolbar #external-toolbar .redactor-toolbar a {
    padding: 0 !important;
}

.byf-app-redesign .byf-preview-media-toolbar #savebox {
    position: static !important;
    display: none;
    flex: 0 0 auto;
    order: 2;
    margin: 0 0 0 12px;
    padding-left: 14px;
    border-left: 1px solid var(--byf-redesign-border-soft) !important;
    transform: none !important;
    border-radius: 0 !important;
    border: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--byf-redesign-muted-foreground);
}

.byf-app-redesign .byf-preview-media-toolbar #savebox[style*="display: block"],
.byf-app-redesign .byf-preview-media-toolbar #savebox[style*="display:block"] {
    display: inline-flex !important;
}

@media (max-width: 900px) {
    .byf-app-redesign .byf-preview-media-toolbar #controls > .d-flex {
        gap: 8px;
    }

    .byf-app-redesign .byf-preview-media-toolbar #controls-middle,
    .byf-app-redesign .byf-preview-media-toolbar #controls-bottom {
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
    }

    .byf-app-redesign .byf-preview-media-toolbar #savebox {
        position: static !important;
        order: 4;
        width: 100%;
        justify-content: center;
        margin: 4px 0 0;
        padding: 8px 0 0;
        border-top: 1px solid var(--byf-redesign-border-soft) !important;
        border-left: 0 !important;
        transform: none !important;
    }
}

.byf-app-redesign .byf-preview-media-toolbar #savebox .message {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    margin: 0 !important;
    padding: 0 10px !important;
    border-radius: var(--byf-redesign-radius-sm);
    background: var(--byf-redesign-muted);
    color: var(--byf-redesign-muted-foreground);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.byf-app-redesign .byf-preview-media-toolbar #message_saved {
    color: #059669 !important;
}

.byf-app-redesign .byf-preview-media-toolbar #message_changes {
    color: #b45309 !important;
}

.byf-app-redesign .byf-preview-media-toolbar #message_saving .loadingtext {
    display: none !important;
}

.byf-app-redesign .byf-preview-media-toolbar #savebox .save-action,
.byf-app-redesign .byf-preview-media-toolbar #savebox .save-action:hover,
.byf-app-redesign .byf-preview-media-toolbar #savebox .save-action:focus,
.byf-app-redesign .byf-preview-media-toolbar #savebox .save-action:active,
.byf-app-redesign .byf-preview-media-toolbar #savebox .save-action.active {
    position: relative !important;
    border-color: transparent !important;
    background: var(--byf-redesign-muted) !important;
    color: var(--byf-redesign-muted-foreground) !important;
}

.byf-app-redesign .byf-preview-media-toolbar #savebox .save-action:hover,
.byf-app-redesign .byf-preview-media-toolbar #savebox .save-action:focus,
.byf-app-redesign .byf-preview-media-toolbar #savebox .save-action:active {
    border-color: var(--byf-redesign-border) !important;
    box-shadow: none !important;
}

.byf-app-redesign .byf-preview-media-toolbar #savebox .d-inline-block:has(.fa-wifi),
.byf-app-redesign .byf-preview-media-toolbar #savebox .d-inline-block:has(.fa-wifi-slash) {
    width: 34px;
    height: 34px;
}

.byf-app-redesign .byf-preview-media-toolbar #savebox .save-action::before {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    display: inline-flex !important;
    width: 18px !important;
    height: 18px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    color: var(--byf-redesign-muted-foreground) !important;
    background-color: transparent !important;
    font-size: 17px !important;
    line-height: 1 !important;
    text-align: center !important;
}

.byf-app-redesign .byf-preview-media-toolbar #savebox .save-action i {
    color: var(--byf-redesign-muted-foreground) !important;
    font-size: 17px !important;
}

.byf-app-redesign .byf-preview-media-toolbar #savebox .fa-wifi {
    color: #059669 !important;
    font-size: 17px !important;
}

.byf-app-redesign .byf-preview-media-toolbar #savebox .fa-wifi-slash {
    color: var(--byf-redesign-muted-foreground) !important;
    font-size: 17px !important;
}

.byf-app-redesign .byf-preview-document-scroll {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    box-sizing: border-box;
    padding: 20px;
    border: 1px solid var(--byf-redesign-border);
    border-radius: var(--byf-redesign-radius);
    background: #f8fafc;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.byf-app-redesign .byf-preview-document-scroll > #preview-content {
    flex: 0 0 auto;
    min-width: 100%;
    min-height: 100%;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

.byf-app-redesign .byf-preview-document-scroll #preview-content .wrapper {
    max-width: none;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.byf-app-redesign .byf-preview-document-scroll #preview-content .wrapper.edit-text {
    width: 100% !important;
    max-width: none !important;
    align-items: flex-start;
    justify-content: center;
    margin: 0 auto !important;
    padding: 24px 16px 48px !important;
    box-sizing: border-box;
    background: transparent !important;
}

.byf-app-redesign .byf-preview-document-scroll #preview-content .wrapper.edit-text .paper {
    width: clamp(720px, 58vw, 980px) !important;
    max-width: calc(100vw - var(--byf-redesign-sidebar-collapsed) - 96px) !important;
    min-height: 1120px;
    margin: 0 auto !important;
    padding: 72px 82px !important;
    box-sizing: border-box;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 2px;
    background: #fff !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14) !important;
}

.byf-app-redesign.body-sidebar-expanded .byf-preview-document-scroll #preview-content .wrapper.edit-text .paper {
    max-width: calc(100vw - var(--byf-redesign-sidebar-expanded) - 96px) !important;
}

.byf-app-redesign .byf-preview-document-scroll #preview-content .wrapper.edit-text .paper > img,
.byf-app-redesign .byf-preview-document-scroll #preview-content .wrapper.edit-text .redactor-box,
.byf-app-redesign .byf-preview-document-scroll #preview-content .wrapper.edit-text .redactor-editor,
.byf-app-redesign .byf-preview-document-scroll #preview-content .wrapper.edit-text .redactor-styles,
.byf-app-redesign .byf-preview-document-scroll #preview-content .wrapper.edit-text #noteContentArea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.byf-app-redesign .byf-preview-document-scroll #preview-content .wrapper.edit-text .redactor-box {
    min-height: 900px;
    border: 0 !important;
    background: transparent !important;
}

.byf-app-redesign .byf-preview-document-scroll #preview-content .wrapper.edit-text .redactor-editor,
.byf-app-redesign .byf-preview-document-scroll #preview-content .wrapper.edit-text .redactor-styles,
.byf-app-redesign .byf-preview-document-scroll #preview-content .wrapper.edit-text #noteContentArea {
    min-height: 900px;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    color: var(--byf-redesign-foreground);
    font-size: 16px;
    line-height: 1.65;
    box-shadow: none !important;
}

@media (max-width: 900px) {
    .byf-app-redesign .byf-preview-document-scroll #preview-content .wrapper.edit-text {
        padding: 12px 8px 28px !important;
    }

    .byf-app-redesign .byf-preview-document-scroll #preview-content .wrapper.edit-text .paper,
    .byf-app-redesign.body-sidebar-expanded .byf-preview-document-scroll #preview-content .wrapper.edit-text .paper {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 760px;
        padding: 36px 28px !important;
    }

    .byf-app-redesign .byf-preview-document-scroll #preview-content .wrapper.edit-text .redactor-box,
    .byf-app-redesign .byf-preview-document-scroll #preview-content .wrapper.edit-text .redactor-editor,
    .byf-app-redesign .byf-preview-document-scroll #preview-content .wrapper.edit-text .redactor-styles,
    .byf-app-redesign .byf-preview-document-scroll #preview-content .wrapper.edit-text #noteContentArea {
        min-height: 680px;
    }
}

.byf-app-redesign .byf-preview-document-scroll #preview-content .wrapper canvas,
.byf-app-redesign .byf-preview-document-scroll #preview-content .wrapper img {
    max-width: 100%;
    object-fit: contain;
}

.byf-app-redesign .byf-preview-document-scroll #preview-content video {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Keep preview types inside one predictable viewport. Media uses the shared
 * scroll shell; PDF.js keeps its internal viewer scroll inside its shell. */
.byf-app-redesign .byf-preview-workspace > .byf-redesign-message-row {
    margin: 0 0 12px !important;
}

.byf-app-redesign .byf-preview-media-container #preview-document-scroll {
    background: #fff !important;
    box-shadow: none !important;
}

.byf-app-redesign .byf-preview-media-container #preview-document-scroll > #preview-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

.byf-app-redesign .byf-preview-media-container #preview-content .wrapper,
.byf-app-redesign .byf-preview-media-container #preview-content .wrapper canvas,
.byf-app-redesign .byf-preview-media-container #preview-content .wrapper img,
.byf-app-redesign .byf-preview-media-container #preview-content video {
    box-shadow: none !important;
}

.byf-app-redesign .byf-preview-media-container #preview-content .wrapper {
    background: #fff !important;
}

.byf-app-redesign .byf-preview-media-container #preview-content .wrapper img,
.byf-app-redesign .byf-preview-media-container #preview-content .wrapper canvas,
.byf-app-redesign .byf-preview-media-container #preview-content video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Keep zoomed media inside a real viewport. Inline dimensions from
 * preview.js are allowed to enlarge the scroll content, while the viewport
 * itself remains constrained by the available workspace height. */
.byf-app-redesign .byf-preview-media-container,
.byf-app-redesign .byf-preview-media-container > #content,
.byf-app-redesign .byf-preview-media-container #imagepreviewzone,
.byf-app-redesign .byf-preview-media-container #preview-document-scroll {
    min-height: 0 !important;
}

.byf-app-redesign .byf-preview-media-container {
    flex: 1 1 0 !important;
}

.byf-app-redesign .byf-preview-media-container > #content,
.byf-app-redesign .byf-preview-media-container #imagepreviewzone,
.byf-app-redesign .byf-preview-media-container #preview-document-scroll {
    flex: 1 1 0 !important;
}

.byf-app-redesign .byf-preview-media-container #preview-document-scroll {
    width: 100% !important;
    max-width: 100% !important;
    overflow: auto !important;
}

.byf-app-redesign .byf-preview-media-container #preview-document-scroll > #preview-content {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
    min-height: 100% !important;
    height: max-content !important;
}

.byf-app-redesign .byf-preview-media-container #preview-content .wrapper {
    flex: 0 0 auto !important;
    width: max-content !important;
    max-width: none !important;
    margin: auto auto 24px !important;
}

.byf-app-redesign .byf-preview-media-container #preview-content .wrapper img,
.byf-app-redesign .byf-preview-media-container #preview-content .wrapper canvas {
    max-width: none !important;
    max-height: none !important;
}

.byf-app-redesign .byf-preview-media-container #preview-document-scroll.byf-document-preview-scroll {
    background: #f1f5f9 !important;
}

.byf-app-redesign .byf-preview-media-container #preview-content.byf-document-preview-pages {
    gap: 22px;
    padding: 22px 0 !important;
}

.byf-app-redesign .byf-preview-media-container #preview-content.byf-document-preview-pages .wrapper.byf-document-preview-page {
    margin: 0 auto !important;
    padding: 14px !important;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .14);
}

.byf-app-redesign .byf-preview-media-container #preview-content.byf-document-preview-pages .wrapper.byf-document-preview-page img,
.byf-app-redesign .byf-preview-media-container #preview-content.byf-document-preview-pages .wrapper.byf-document-preview-page canvas {
    display: block;
    margin: 0 !important;
    box-shadow: none !important;
}

.byf-app-redesign .byf-preview-media-container #preview-content.byf-document-preview-pages .wrapper.byf-document-preview-page img {
    background: #fff;
}

.byf-app-redesign .byf-preview-media-container #preview-content.byf-document-preview-pages .wrapper.byf-document-preview-page canvas {
    background: transparent !important;
}

.byf-app-redesign .byf-preview-media-container #preview-content video {
    max-width: 100% !important;
    max-height: 100% !important;
}

.byf-app-redesign .byf-preview-video-container #preview-document-scroll {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden !important;
}

.byf-app-redesign .byf-preview-video-container #preview-document-scroll > #preview-content {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    align-items: center;
    justify-content: center;
}

.byf-app-redesign .byf-preview-video-container #preview-content .wrapper {
    display: flex;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
}

.byf-app-redesign .byf-preview-video-container #preview-content video {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain;
}

.byf-app-redesign .byf-preview-pdf-container {
    overflow: hidden;
    border: 1px solid var(--byf-redesign-border);
    border-radius: var(--byf-redesign-radius);
    background: #fff;
}

.byf-app-redesign .byf-preview-pdf-container #pdfpreviewzone,
.byf-app-redesign .byf-preview-pdf-container #outerContainer,
.byf-app-redesign .byf-preview-pdf-container #mainContainer {
    overflow: hidden;
    border-radius: inherit;
    background: #fff;
}

.byf-app-redesign .byf-preview-pdf-container #toolbarContainer {
    display: flex;
    min-height: 48px;
    height: auto !important;
    align-items: center;
    padding: 6px 10px;
    border-bottom: 1px solid var(--byf-redesign-border);
    background: var(--byf-redesign-card) !important;
}

.byf-app-redesign .byf-preview-pdf-container #toolbarViewer,
.byf-app-redesign .byf-preview-pdf-container #toolbarViewerLeft,
.byf-app-redesign .byf-preview-pdf-container #toolbarViewerMiddle,
.byf-app-redesign .byf-preview-pdf-container #toolbarViewerRight {
    display: flex;
    min-width: 0;
    min-height: 34px;
    align-items: center;
    gap: 4px;
}

.byf-app-redesign .byf-preview-pdf-container #toolbarViewer {
    width: 100%;
    justify-content: flex-start;
    gap: 8px;
}

.byf-app-redesign .byf-preview-pdf-container #toolbarViewerMiddle {
    flex: 1 1 auto;
    justify-content: center;
}

.byf-app-redesign .byf-preview-pdf-container #toolbarViewerRight {
    margin-left: auto;
}

.byf-app-redesign .byf-preview-pdf-container #toolbarViewer .toolbarButton,
.byf-app-redesign .byf-preview-pdf-container #toolbarViewer .dropdownToolbarButton {
    display: inline-flex;
    width: 34px;
    min-width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    border: 1px solid transparent;
    border-radius: var(--byf-redesign-radius-sm);
    background: var(--byf-redesign-muted) !important;
    color: var(--byf-redesign-muted-foreground) !important;
}

.byf-app-redesign .byf-preview-pdf-container #toolbarViewer .dropdownToolbarButton {
    width: auto;
    min-width: 132px;
    padding: 0 8px;
}

.byf-app-redesign .byf-preview-pdf-container #toolbarViewer .toolbarButton::before {
    color: inherit !important;
}

.byf-app-redesign .byf-preview-pdf-container #toolbarViewer .toolbarButton:hover,
.byf-app-redesign .byf-preview-pdf-container #toolbarViewer .toolbarButton:focus,
.byf-app-redesign .byf-preview-pdf-container #toolbarViewer .dropdownToolbarButton:hover,
.byf-app-redesign .byf-preview-pdf-container #toolbarViewer .dropdownToolbarButton:focus {
    border-color: var(--byf-redesign-primary-border);
    background: #fff !important;
    color: var(--byf-redesign-primary) !important;
    box-shadow: none !important;
}

.byf-app-redesign .byf-preview-pdf-container #toolbarViewer .toolbarButton,
.byf-app-redesign .byf-preview-pdf-container #toolbarViewer .toolbarButton i,
.byf-app-redesign .byf-preview-pdf-container #toolbarViewer .toolbarButton::before {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
}

.byf-app-redesign .byf-preview-pdf-container #toolbarViewer .toolbarButton i {
    display: inline-flex !important;
    width: 100%;
    height: 100%;
}

.byf-app-redesign .byf-preview-pdf-container #toolbarViewer .toolbarButton > span:not(.editorParamsLabel) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.byf-app-redesign .byf-preview-pdf-container #toolbarViewer .toolbarButton::before {
    inset: auto !important;
    display: inline-flex !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    transform: none !important;
}

.byf-app-redesign .byf-preview-pdf-container #toolbarViewer .toolbarField,
.byf-app-redesign .byf-preview-pdf-container #toolbarViewer #pageNumber {
    width: 44px !important;
    height: 34px !important;
    min-width: 44px;
    margin: 0 !important;
    padding: 0 8px !important;
    border: 1px solid var(--byf-redesign-border) !important;
    border-radius: var(--byf-redesign-radius-sm) !important;
    background: var(--byf-redesign-card) !important;
    color: var(--byf-redesign-foreground) !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 34px !important;
    text-align: center !important;
}

.byf-app-redesign .byf-preview-pdf-container #toolbarViewer .toolbarField:focus,
.byf-app-redesign .byf-preview-pdf-container #toolbarViewer #pageNumber:focus,
.byf-app-redesign .byf-preview-pdf-container #toolbarViewer #scaleSelect:focus {
    border-color: var(--byf-redesign-border) !important;
    outline: none !important;
    box-shadow: none !important;
}

.byf-app-redesign .byf-preview-pdf-container #toolbarViewer .toolbarLabel,
.byf-app-redesign .byf-preview-pdf-container #toolbarViewer #numPages {
    display: inline-flex;
    height: 34px;
    align-items: center;
    margin: 0 !important;
    padding: 0 4px !important;
    color: var(--byf-redesign-foreground) !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
}

.byf-app-redesign .byf-preview-pdf-container #toolbarViewer #scaleSelectContainer.dropdownToolbarButton {
    display: inline-flex;
    width: auto !important;
    min-width: 176px;
    height: 34px;
    align-items: center;
    padding: 0 !important;
    border: 1px solid var(--byf-redesign-border) !important;
    border-radius: var(--byf-redesign-radius-sm) !important;
    background: var(--byf-redesign-muted) !important;
    box-shadow: none !important;
}

.byf-app-redesign .byf-preview-pdf-container #toolbarViewer #scaleSelect {
    width: 100%;
    height: 32px;
    margin: 0 !important;
    padding: 0 32px 0 10px !important;
    border: 0 !important;
    border-radius: var(--byf-redesign-radius-sm) !important;
    background: transparent !important;
    color: var(--byf-redesign-foreground) !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 32px !important;
}

.byf-app-redesign .byf-preview-pdf-container #toolbarViewer .splitToolbarButtonSeparator,
.byf-app-redesign .byf-preview-pdf-container #toolbarViewer .verticalToolbarSeparator {
    width: 6px !important;
    min-width: 6px !important;
    height: 24px !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.byf-app-redesign .byf-preview-pdf-container #toolbarViewer .versioningToolbox {
    display: inline-flex;
    height: 34px;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
}

.byf-app-redesign .byf-preview-pdf-container #toolbarViewer .versioningToolbox:not([style*="display: none"]) {
    display: inline-flex !important;
}

.byf-app-redesign .byf-preview-pdf-container #toolbarViewer #closeVersion {
    display: inline-flex !important;
    height: 34px;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 12px !important;
    border: 1px solid var(--byf-redesign-border) !important;
    border-radius: var(--byf-redesign-radius-sm) !important;
    background: var(--byf-redesign-card) !important;
    color: var(--byf-redesign-foreground) !important;
    box-shadow: none !important;
    cursor: pointer;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 34px !important;
    text-align: center;
}

.byf-app-redesign .byf-preview-pdf-container #toolbarViewer #closeVersion label {
    display: inline-flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    cursor: pointer;
    line-height: 1 !important;
}

.byf-app-redesign .byf-preview-pdf-container #toolbarViewer #closeVersion:hover,
.byf-app-redesign .byf-preview-pdf-container #toolbarViewer #closeVersion:focus {
    border-color: var(--byf-redesign-primary-border) !important;
    background: var(--byf-redesign-muted) !important;
    color: var(--byf-redesign-primary) !important;
    outline: none !important;
    box-shadow: none !important;
}

.byf-app-redesign .byf-preview-pdf-container #viewerContainer {
    background: #fff !important;
}

@media (max-width: 1199.98px) {
    .byf-app-redesign #workspace.byf-preview-workspace {
        height: 100dvh !important;
        max-height: 100dvh;
    }

    .byf-app-redesign .byf-preview-document-scroll {
        padding: 12px;
    }

    .byf-app-redesign .byf-preview-pdf-container #toolbarContainer {
        padding: 6px;
    }
}

/* Folder contacts: keep the add row compact and make the saved contacts read
 * like the chips used throughout the redesigned application. The autocomplete
 * menu is appended to body by the legacy plugin, so its redesign is scoped to
 * the application root rather than to the modal content. */
.byf-app-redesign .byf-folder-contacts {
    padding: 22px 24px 26px !important;
}

.byf-app-redesign .byf-folder-contacts__info {
    margin: 0 0 20px !important;
    padding: 16px 18px !important;
    border-radius: var(--byf-redesign-radius) !important;
    box-shadow: none;
}

.byf-app-redesign .byf-folder-contacts__info .dashboard-intro__eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.byf-app-redesign .byf-folder-contacts__info .dashboard-intro__eyebrow i {
    color: var(--byf-redesign-primary);
    font-size: 13px;
}

.byf-app-redesign .byf-folder-contacts__info .dashboard-intro__text {
    max-width: 720px;
    font-size: 12px;
    line-height: 1.5;
}

.byf-app-redesign .byf-folder-contacts__form {
    width: min(100%, 720px);
    margin: 0 0 22px !important;
}

.byf-app-redesign .byf-folder-contacts__form-row {
    display: grid;
    grid-template-columns: minmax(0, 410px) auto;
    align-items: center;
    gap: 12px;
}

.byf-app-redesign .byf-folder-contacts__field,
.byf-app-redesign .byf-folder-contacts__actions {
    min-width: 0;
}

.byf-app-redesign .byf-folder-contacts__input {
    margin: 0 !important;
}

.byf-app-redesign .byf-folder-contacts__add {
    min-width: 152px;
    min-height: 40px;
    padding: 0 24px !important;
    border: 1px solid var(--byf-redesign-primary) !important;
    border-radius: var(--byf-redesign-control-radius) !important;
    background: var(--byf-redesign-primary) !important;
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
}

.byf-app-redesign .byf-folder-contacts__add:hover,
.byf-app-redesign .byf-folder-contacts__add:focus,
.byf-app-redesign .byf-folder-contacts__add:active {
    border-color: var(--byf-redesign-primary-hover) !important;
    background: var(--byf-redesign-primary-hover) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.byf-app-redesign .byf-folder-contacts__loading {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.byf-app-redesign .byf-folder-contacts__feedback {
    margin: -8px 0 16px;
}

.byf-app-redesign .byf-folder-contacts__feedback .error {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 9px 12px;
    border: 1px solid #fecaca;
    border-radius: 10px;
    background: #fff1f2;
    color: #b91c1c;
    font-size: 12px;
}

.byf-app-redesign .byf-folder-contacts__heading {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 12px;
    color: var(--byf-redesign-foreground);
    font-size: 14px;
}

.byf-app-redesign .byf-folder-contacts__heading-icon {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--byf-redesign-primary-soft);
    color: var(--byf-redesign-primary);
}

.byf-app-redesign .byf-folder-contacts__list {
    display: flex;
    min-height: 40px;
    flex-wrap: wrap;
    gap: 9px;
    align-items: flex-start;
}

.byf-app-redesign .byf-folder-contact-chip {
    display: inline-flex;
    max-width: min(100%, 360px);
    min-height: 40px;
    align-items: center;
    gap: 9px;
    padding: 5px 7px 5px 9px;
    border: 1px solid var(--byf-redesign-control-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(15, 23, 42, .05);
    color: var(--byf-redesign-foreground);
    font-size: 13px;
}

.byf-app-redesign .byf-folder-contact-chip__icon {
    display: inline-flex;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--byf-redesign-primary-soft);
    color: var(--byf-redesign-primary);
    font-size: 12px;
}

.byf-app-redesign .byf-folder-contact-chip__icon i {
    display: inline-flex;
    width: 1em;
    height: 1em;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    line-height: 1;
}

.byf-app-redesign .byf-folder-contact-chip__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.byf-app-redesign .byf-folder-contact-chip__remove {
    display: inline-flex;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--byf-redesign-muted-foreground) !important;
    font-size: 13px;
}

.byf-app-redesign .byf-folder-contact-chip__remove:hover,
.byf-app-redesign .byf-folder-contact-chip__remove:focus {
    background: #fff1f2;
    color: #dc2626 !important;
}

.byf-app-redesign .autocomplete-suggestions.byf-contact-autocomplete {
    z-index: 100000 !important;
    max-height: min(360px, 48vh) !important;
    padding: 6px;
    overflow-y: auto;
    border: 1px solid var(--byf-redesign-control-border) !important;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .16);
}

.byf-app-redesign .byf-contact-autocomplete .autocomplete-suggestion {
    display: flex;
    min-height: 40px;
    margin: 2px 0;
    padding: 7px 10px;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    color: var(--byf-redesign-foreground);
    font-size: 13px;
    line-height: 22px;
    cursor: pointer;
}

.byf-app-redesign .byf-contact-autocomplete .autocomplete-suggestion::before {
    content: "\f007";
    display: inline-flex;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--byf-redesign-primary-soft);
    color: var(--byf-redesign-primary);
    font-family: "Font Awesome 5 Pro";
    font-size: 12px;
    font-weight: 300;
}

.byf-app-redesign .byf-contact-autocomplete .autocomplete-suggestion b {
    color: var(--byf-redesign-primary);
    font-weight: 700;
}

.byf-app-redesign .byf-contact-autocomplete .autocomplete-suggestion.selected {
    background: var(--byf-redesign-primary-soft);
}

.byf-app-redesign .byf-contact-autocomplete .autocomplete-section {
    margin: 2px 0 0;
    padding: 10px 10px 5px;
    color: var(--byf-redesign-muted-foreground);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    line-height: 16px;
    text-transform: uppercase;
}

.byf-app-redesign .byf-contact-autocomplete .autocomplete-section:not(:first-child) {
    margin-top: 6px;
    border-top: 1px solid var(--byf-redesign-border);
}

.byf-app-redesign .byf-contact-autocomplete .autocomplete-empty {
    padding: 8px 10px 10px;
    color: var(--byf-redesign-muted-foreground);
    font-size: 12px;
    line-height: 20px;
}

@media screen and (max-width: 600px) {
    .byf-app-redesign .byf-folder-contacts {
        padding: 18px 16px 22px !important;
    }

    .byf-app-redesign .byf-folder-contacts__form-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .byf-app-redesign .byf-folder-contacts__actions,
    .byf-app-redesign .byf-folder-contacts__add {
        width: 100%;
    }
}

@container byf-toolbar (max-width: 620px) {
    .byf-app-redesign .previewactionbar {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
    }

    .byf-app-redesign .previewactionbar .collapsedcrumb {
        grid-column: 1;
        grid-row: 1;
    }

    .byf-app-redesign .previewactionbar > .disableselectable:not(.collapsedcrumb) {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        justify-content: flex-end !important;
    }

    .byf-app-redesign .previewactionbar .mobile-crumb-actions {
        justify-content: flex-end;
    }
}

@container byf-toolbar (max-width: 900px) {
    .byf-app-redesign .previewactionbar > .disableselectable:not(.collapsedcrumb) {
        align-self: start;
    }

    .byf-app-redesign .previewactionbar .collapsedcrumb {
        align-self: start;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .byf-app-redesign .previewactionbar .crumbsection {
        flex-wrap: wrap;
        align-items: flex-start;
        row-gap: 6px;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .byf-app-redesign .previewactionbar .byf-compact-utility-controls,
    .byf-app-redesign .previewactionbar .byf-compact-nav-controls {
        display: inline-flex !important;
    }

    .byf-app-redesign .previewactionbar .byf-compact-utility-controls {
        order: 1;
    }

    .byf-app-redesign .previewactionbar .byf-compact-nav-controls {
        order: 3;
        flex: 0 0 auto;
    }

    .byf-app-redesign .previewactionbar .byf-compact-row-break {
        display: block;
        order: 2;
        flex: 0 0 100%;
        width: 100%;
        height: 0;
        min-height: 0;
        margin: 0;
        padding: 0;
    }

    .byf-app-redesign .previewactionbar .crumbsection > ul {
        order: 4;
        flex: 1 1 0;
        min-width: 120px;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .byf-app-redesign .previewactionbar .crumb-toggle {
        border: 1px solid var(--byf-redesign-border) !important;
        background: var(--byf-redesign-card) !important;
        box-shadow: none !important;
    }

    .byf-app-redesign .previewactionbar .byf-mobile-toolbar-dropdown {
        width: min(260px, calc(100vw - 32px)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 32px);
        padding: 6px !important;
    }

    .byf-app-redesign .previewactionbar .byf-mobile-toolbar-dropdown .dropdown-item {
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 32px !important;
        justify-content: flex-start;
        padding: 0 10px !important;
    }
}

/* Settings tabs with their own content surfaces do not need a second panel around them.
 * Keep the subscription tab on its existing surface because it has its own layout contract. */
.byf-app-redesign .settings-dashboard .settings-info-tabzone > .tab-area:has(.tab-pane#pills-account-settings),
.byf-app-redesign .settings-dashboard .settings-info-tabzone > .tab-area:has(.tab-pane#pills-tags),
.byf-app-redesign .settings-dashboard .settings-info-tabzone > .tab-area:has(.tab-pane#pills-folderrules),
.byf-app-redesign .settings-dashboard .settings-info-tabzone > .tab-area:has(.tab-pane#pills-erp) {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.byf-app-redesign .settings-dashboard .settings-info-tabzone > .tab-area:has(.tab-pane#pills-account-settings) .tab-pane,
.byf-app-redesign .settings-dashboard .settings-info-tabzone > .tab-area:has(.tab-pane#pills-tags) .tab-pane,
.byf-app-redesign .settings-dashboard .settings-info-tabzone > .tab-area:has(.tab-pane#pills-folderrules) .tab-pane,
.byf-app-redesign .settings-dashboard .settings-info-tabzone > .tab-area:has(.tab-pane#pills-erp) .tab-pane {
    padding: 0 !important;
    background: transparent !important;
}

/* Section headers use an inset divider, matching the section titles in General.
 * Keep the outer card border independent from the header divider so the rule
 * does not visually run into the rounded corners. */
.byf-app-redesign .settings-dashboard .settings-tags-section__header,
.byf-app-redesign .settings-dashboard .erp-settings-section__header {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    border-bottom: 0;
}

.byf-app-redesign .settings-dashboard .settings-tags-section__header::after,
.byf-app-redesign .settings-dashboard .erp-settings-section__header::after {
    position: absolute;
    right: 18px;
    bottom: 0;
    left: 18px;
    height: 1px;
    content: "";
    pointer-events: none;
    background: var(--byf20-color-e2e8f0);
}

/* The subscription summary follows the same section-title rhythm as the
 * redesigned settings cards while leaving the package details unchanged. */
.byf-app-redesign .settings-dashboard .subscription-summary > .subscription-section-title {
    position: relative;
    margin: 0 0 16px;
    padding: 0 0 12px;
    border-bottom: 0;
    color: var(--byf20-color-0f172a);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.25;
}

.byf-app-redesign .settings-dashboard .subscription-summary > .subscription-section-title::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    content: "";
    pointer-events: none;
    background: var(--byf20-color-e2e8f0);
}

/* Digital signing uses a partial for the users section instead of a card.
 * Normalize its first heading to the same spacing rhythm as the other settings
 * sections and remove the legacy extra top offset. */
.byf-app-redesign .settings-dashboard .esigning-form > #users > h3 {
    margin: 0 0 14px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--byf20-color-e2e8f0);
    color: var(--byf20-color-0f172a);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.25;
}

@media (max-width: 991.98px) {
    .byf-app-redesign .settings-dashboard .settings-tags-section__header::after,
    .byf-app-redesign .settings-dashboard .erp-settings-section__header::after {
        right: 14px;
        left: 14px;
    }
}

/* Metadata field detail: keep the detail surface close to the toolbar and let the
 * table own the visual weight of the page. */

.byf-app-redesign #workspace.metadatafields-container > .byf-redesign-toolbar-stack {
    margin-bottom: 0 !important;
}

.byf-app-redesign #workspace.metadatafields-container .byf-metadata-detail-header {
    margin: 4px 0 10px;
}

.byf-app-redesign .byf-metadata-detail-actions {
    margin-left: auto;
}

/* Keep the metadata table consistent with the other redesigned tables. */
.byf-app-redesign .byf-metadata-table,
.byf-app-redesign .byf-metadata-table th,
.byf-app-redesign .byf-metadata-table td {
    font-family: inherit;
}

.byf-app-redesign .byf-metadata-table thead th {
    text-align: left;
    vertical-align: middle;
}

.byf-app-redesign .byf-metadata-table thead th.byf-metadata-drag-column,
.byf-app-redesign .byf-metadata-table tbody td.byf-metadata-drag,
.byf-app-redesign .byf-metadata-table thead th:nth-child(5),
.byf-app-redesign .byf-metadata-table tbody td:nth-child(5) {
    text-align: center;
}

.byf-app-redesign .byf-metadata-table thead th.byf-metadata-actions-column,
.byf-app-redesign .byf-metadata-table tbody td.byf-metadata-row-actions {
    text-align: right !important;
}

.byf-app-redesign .byf-metadata-table .byf-metadata-code {
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
}

.byf-app-redesign .byf-metadata-table .byf-metadata-drag {
    user-select: none;
}

.byf-app-redesign .byf-metadata-table .byf-metadata-drag-handle {
    display: inline-flex;
    width: 24px;
    height: 28px;
    align-items: center;
    justify-content: center;
    cursor: grab;
}

.byf-app-redesign .byf-metadata-table .byf-metadata-drag:active,
.byf-app-redesign .byf-metadata-table .byf-metadata-drag:active .byf-metadata-drag-handle {
    cursor: grabbing;
}

.byf-app-redesign .byf-metadata-table .byf-metadata-sort-placeholder {
    height: 54px;
    background: var(--byf-metadata-accent-soft, var(--byf-redesign-primary-soft)) !important;
}

.byf-app-redesign .byf-metadata-table .byf-metadata-sort-placeholder td {
    height: 54px;
    padding: 0;
    border: 1px dashed var(--byf-metadata-accent, var(--byf-redesign-primary)) !important;
}

.byf-app-redesign .byf-metadata-table tbody tr.ui-sortable-helper {
    background: #fff !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .12);
}

/* Metadata field forms use stable control geometry instead of the generic
 * select/date rules used by older screens. */
.byf-app-redesign #modalContentEditMetadataField .form-group.row > .col-sm-6,
.byf-app-redesign #modalContentEditMetadataSet .form-group > .col-sm-6 {
    min-width: 0;
    width: 100%;
}

.byf-app-redesign #modalContentEditMetadataField select.form-control,
.byf-app-redesign #modalContentEditMetadataSet select.form-control {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    height: 40px;
    min-height: 40px;
    padding: 0 38px 0 12px !important;
    line-height: 38px;
}

.byf-app-redesign #modalContentEditMetadataField .datepicker-here {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px;
}

.byf-app-redesign #modalContentEditMetadataField #name,
.byf-app-redesign #modalContentEditMetadataField #options {
    padding-right: 42px !important;
}

.byf-app-redesign #modalContentEditMetadataField .byf-metadata-field-help {
    top: 50%;
    right: 8px;
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 !important;
    border-radius: 50%;
    color: var(--byf-redesign-muted-foreground);
    transform: translateY(-50%);
}

.byf-app-redesign #modalContentEditMetadataField .byf-metadata-field-help:hover {
    background: var(--byf-redesign-muted);
    color: var(--byf-metadata-accent, var(--byf-redesign-primary));
}

/* The datepicker belongs to this modal, so it must be allowed to escape the
 * modal body and remain above the form controls. */
.byf-app-redesign #modal-general:has(#modalContentEditMetadataField) .modal-content,
.byf-app-redesign #modal-general:has(#modalContentEditMetadataSet) .modal-content,
.byf-app-redesign #modalContentEditMetadataField {
    overflow: visible !important;
}

.byf-app-redesign #modalContentEditMetadataField .daterangepicker {
    z-index: 100000 !important;
    min-width: 280px;
    max-width: calc(100vw - 32px);
}

/* Folder-rule rows in the folder settings modal need a little more breathing
 * room while keeping the switch, label and separator selector aligned. */
.byf-app-redesign .modal-content .folderrules-content > .pb-2 {
    padding-bottom: 12px !important;
}

.byf-app-redesign .modal-content .folderrules-content > .pb-3 {
    padding-bottom: 16px !important;
}

/* Give the folder-settings modal a clearer rhythm around its tab strip and
 * separate the filename preview from the editable rules below it. */
.byf-app-redesign .modal-content.folder-folderrules .modal-body.folder-options > .nav.nav-pills {
    margin-top: 10px !important;
    margin-bottom: 8px !important;
}

/* Modal tabs follow the same compact, rounded tab language as the redesigned
 * settings pages while remaining horizontally usable on small screens. */
.byf-app-redesign .modal-content .modal-body.folder-options > .nav.nav-pills {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 4px;
    width: auto !important;
    max-width: calc(100% - 32px);
    margin: 10px 16px 12px !important;
    padding: 5px !important;
    overflow-x: auto;
    border: 1px solid var(--byf-redesign-control-border);
    border-radius: 16px !important;
    background: #fff;
    scrollbar-width: none;
}

.byf-app-redesign .modal-content .modal-body.folder-options > .nav.nav-pills::-webkit-scrollbar {
    display: none;
}

.byf-app-redesign #modal-folder-settings .modal-content,
.byf-app-redesign #modal-doc-settings .modal-content {
    max-height: calc(100vh - 54px);
}

.byf-app-redesign #modal-folder-settings .modal-body.folder-options.byf-modal-scroll-shell,
.byf-app-redesign #modal-doc-settings .modal-body.folder-options.byf-modal-scroll-shell {
    position: relative;
    max-height: calc(100vh - 128px);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.byf-app-redesign #modal-folder-settings .modal-body.folder-options.byf-modal-scroll-shell::-webkit-scrollbar,
.byf-app-redesign #modal-doc-settings .modal-body.folder-options.byf-modal-scroll-shell::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.byf-app-redesign #modal-folder-settings .modal-body.folder-options.byf-modal-scroll-shell::after,
.byf-app-redesign #modal-doc-settings .modal-body.folder-options.byf-modal-scroll-shell::after {
    content: "";
    position: sticky;
    bottom: -1px;
    left: 0;
    right: 0;
    display: block;
    height: 42px;
    margin-top: -42px;
    background: linear-gradient(180deg, var(--byf20-rgba-white-transparent) 0%, var(--byf20-rgba-white-solid) 58%, var(--byf20-color-ffffff) 100%);
    pointer-events: none;
    opacity: 0;
    z-index: 20;
    transition: opacity 0.16s ease;
}

.byf-app-redesign #modal-folder-settings .modal-body.folder-options.byf-modal-scroll-shell--has-overflow::after,
.byf-app-redesign #modal-doc-settings .modal-body.folder-options.byf-modal-scroll-shell--has-overflow::after {
    opacity: 1;
}

.byf-app-redesign .modal-content .modal-body.folder-options > .nav.nav-pills > .nav-item {
    display: flex;
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto;
    padding: 0 !important;
}

.byf-app-redesign .modal-content .modal-body.folder-options > .nav.nav-pills > .nav-item > .nav-link {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 9px 14px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: var(--byf-redesign-muted-foreground) !important;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.2;
    white-space: nowrap;
}

.byf-app-redesign .modal-content .modal-body.folder-options > .nav.nav-pills > .nav-item > .nav-link:hover {
    background: var(--byf-redesign-primary-meta) !important;
    color: var(--byf-redesign-foreground) !important;
}

.byf-app-redesign .modal-content .modal-body.folder-options > .nav.nav-pills > .nav-item > .nav-link.active {
    background: var(--byf-redesign-primary-dark) !important;
    color: #fff !important;
    box-shadow: 0 5px 14px rgba(15, 23, 42, .16);
}

.byf-app-redesign .modal-content.folder-folderrules .folderrules-content > .row {
    margin-bottom: 14px !important;
}

/* The permission matrix benefits from a little more breathing room than the
 * legacy table defaults. Keep the spacing and switch colors local to this tab
 * so the rest of the redesigned forms retain their existing rhythm. */
.byf-app-redesign .modal-content .permissions-content {
    padding: 8px 12px 20px !important;
}

.byf-app-redesign .modal-content .permissions-content .table-permissions {
    width: 100%;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    border-collapse: separate;
    border-spacing: 0 6px;
}

.byf-app-redesign .modal-content .permissions-content .table-permissions thead th {
    padding: 4px 12px 8px !important;
    color: var(--byf-redesign-muted-foreground) !important;
}

.byf-app-redesign .modal-content .permissions-content .table-permissions thead th .brand-color {
    color: var(--byf-redesign-muted-foreground) !important;
}

.byf-app-redesign .modal-content .permissions-content .table-permissions tbody th,
.byf-app-redesign .modal-content .permissions-content .table-permissions tbody td {
    padding: 8px 12px !important;
    vertical-align: middle;
}

.byf-app-redesign .modal-content .permissions-content .table-permissions tbody th {
    color: var(--byf-redesign-foreground) !important;
}

/* Only unavailable permissions are muted. A normal off-state remains an
 * interactive control with the standard redesign colors. */
.byf-app-redesign .modal-content .permissions-content .switch input:disabled + .slider,
.byf-app-redesign .modal-content .permissions-content .switch input[disabled] + .slider,
.byf-app-redesign .modal-content .permissions-content .switch .slider.rule-disabled,
.byf-app-redesign .modal-content .permissions-content .switch.global-disabled .slider {
    border-color: #cbd5e1 !important;
    background: #e2e8f0 !important;
    cursor: not-allowed;
}

.byf-app-redesign .modal-content .permissions-content .switch input:disabled + .slider::before,
.byf-app-redesign .modal-content .permissions-content .switch input[disabled] + .slider::before,
.byf-app-redesign .modal-content .permissions-content .switch .slider.rule-disabled::before,
.byf-app-redesign .modal-content .permissions-content .switch.global-disabled .slider::before {
    background: #94a3b8 !important;
}

.byf-app-redesign .modal-content .permissions-content .switch input:checked:disabled + .slider,
.byf-app-redesign .modal-content .permissions-content .switch input:checked[disabled] + .slider {
    border-color: #cbd5e1 !important;
    background: #e2e8f0 !important;
}

.byf-app-redesign .modal-content .permissions-content .switch input:checked:disabled + .slider::before,
.byf-app-redesign .modal-content .permissions-content .switch input:checked[disabled] + .slider::before {
    background: #94a3b8 !important;
}

/* Disabled folder rules and permission rows remain readable without looking
 * active. This is deliberately lighter than the normal unchecked state. */
.byf-app-redesign .modal-content.folder-folderrules .folderrules-content .switch input:disabled + .slider,
.byf-app-redesign .modal-content.folder-folderrules .folderrules-content .switch input[disabled] + .slider,
.byf-app-redesign .modal-content.folder-folderrules .folderrules-content .switch .slider.rule-disabled,
.byf-app-redesign .modal-content .permissions-content .switch input:disabled + .slider,
.byf-app-redesign .modal-content .permissions-content .switch input[disabled] + .slider,
.byf-app-redesign .modal-content .permissions-content .switch .slider.rule-disabled,
.byf-app-redesign .modal-content .permissions-content .switch.global-disabled .slider {
    border-color: #d7e0eb !important;
    background: #f0f3f7 !important;
    cursor: not-allowed;
}

.byf-app-redesign .modal-content.folder-folderrules .folderrules-content .switch input:disabled + .slider::before,
.byf-app-redesign .modal-content.folder-folderrules .folderrules-content .switch input[disabled] + .slider::before,
.byf-app-redesign .modal-content.folder-folderrules .folderrules-content .switch .slider.rule-disabled::before,
.byf-app-redesign .modal-content .permissions-content .switch input:disabled + .slider::before,
.byf-app-redesign .modal-content .permissions-content .switch input[disabled] + .slider::before,
.byf-app-redesign .modal-content .permissions-content .switch .slider.rule-disabled::before,
.byf-app-redesign .modal-content .permissions-content .switch.global-disabled .slider::before {
    background: #b8c4d2 !important;
}

.byf-app-redesign .modal-content.folder-folderrules .folderrules-content .text-grey,
.byf-app-redesign .modal-content.folder-folderrules .folderrules-content .text-grey a,
.byf-app-redesign .modal-content.folder-folderrules .folderrules-content .rule-disabled {
    color: #a6b1bf !important;
}

@media screen and (max-width: 575.98px) {
    .byf-app-redesign .modal-content .modal-body.folder-options > .nav.nav-pills {
        max-width: calc(100% - 20px);
        margin-right: 10px !important;
        margin-left: 10px !important;
    }

    .byf-app-redesign .modal-content .modal-body.folder-options > .nav.nav-pills > .nav-item > .nav-link {
        padding-right: 11px !important;
        padding-left: 11px !important;
    }

    .byf-app-redesign .byf-folder-contacts__info {
        margin-bottom: 16px !important;
        padding: 14px 15px !important;
    }
}

@media screen and (max-width: 760px) {
    .byf-app-redesign #workspace.metadatafields-container .byf-metadata-detail-header {
        margin: 4px 0 10px;
    }

    .byf-app-redesign #modalContentEditMetadataField select.form-control,
    .byf-app-redesign #modalContentEditMetadataSet select.form-control {
        width: 100% !important;
    }
}

/* Keep workspace utility actions on the same neutral icon palette as the
 * redesigned corner controls. Legacy `.active` rules otherwise make these
 * assignment, metadata and versioning icons blue even when they are idle. */
.byf-app-redesign .previewactionbar :is(.assignmentflipoutlink, .metadataflipoutlink, .auditinfoflipoutLink),
.byf-app-redesign .previewactionbar :is(.assignmentflipoutlink, .metadataflipoutlink, .auditinfoflipoutLink) i,
.byf-app-redesign .crumb-actions :is(.assignmentflipoutlink, .metadataflipoutlink, .auditinfoflipoutLink),
.byf-app-redesign .crumb-actions :is(.assignmentflipoutlink, .metadataflipoutlink, .auditinfoflipoutLink) i,
.byf-app-redesign .mobile-crumb-actions :is(.assignmentflipoutlink, .metadataflipoutlink, .auditinfoflipoutLink),
.byf-app-redesign .mobile-crumb-actions :is(.assignmentflipoutlink, .metadataflipoutlink, .auditinfoflipoutLink) i {
    color: var(--byf-redesign-muted-foreground) !important;
}

.byf-app-redesign .previewactionbar :is(.assignmentflipoutlink, .metadataflipoutlink, .auditinfoflipoutLink):hover,
.byf-app-redesign .previewactionbar :is(.assignmentflipoutlink, .metadataflipoutlink, .auditinfoflipoutLink):hover i,
.byf-app-redesign .crumb-actions :is(.assignmentflipoutlink, .metadataflipoutlink, .auditinfoflipoutLink):hover,
.byf-app-redesign .crumb-actions :is(.assignmentflipoutlink, .metadataflipoutlink, .auditinfoflipoutLink):hover i,
.byf-app-redesign .mobile-crumb-actions :is(.assignmentflipoutlink, .metadataflipoutlink, .auditinfoflipoutLink):hover,
.byf-app-redesign .mobile-crumb-actions :is(.assignmentflipoutlink, .metadataflipoutlink, .auditinfoflipoutLink):hover i {
    color: var(--byf-redesign-primary) !important;
}

/* Sharing remains a normal context action; it must not inherit the tenant
 * color used by sharing indicators on file and folder items. */
.byf-app-redesign .contextmenu .dropdown-item.sharebriefcase i,
.byf-app-redesign .dropdown-test .dropdown-item-bol.sharebriefcase i {
    color: var(--byf-redesign-foreground) !important;
}

.byf-app-redesign .contextmenu .dropdown-item.sharebriefcase:hover i,
.byf-app-redesign .dropdown-test .dropdown-item-bol.sharebriefcase:hover i {
    color: var(--byf-redesign-primary) !important;
}
/* Audit info in the document settings modal uses the same visual language as versioning. */
.byf-app-redesign #modal-doc-settings .auditinfo-settings-host {
    min-height: 0;
    padding: 18px 22px 22px;
    color: var(--byf20-color-0f172a);
}

.byf-app-redesign #modal-doc-settings .auditinfo-settings-panel {
    position: relative;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.byf-app-redesign #modal-doc-settings .auditinfo-settings-panel::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 42px;
    background: linear-gradient(180deg, var(--byf20-rgba-white-transparent) 0%, var(--byf20-rgba-white-solid) 50%, var(--byf20-color-ffffff) 100%);
    pointer-events: none;
    opacity: 0;
    z-index: 10;
    transition: opacity 0.16s ease;
}

.byf-app-redesign #modal-doc-settings .auditinfo-settings-panel--has-overflow::after {
    opacity: 1;
}

.byf-app-redesign #modal-doc-settings .auditinfo-settings-panel__header {
    display: none;
}

.byf-app-redesign #modal-doc-settings .auditinfo-settings-panel__eyebrow {
    margin-bottom: 4px;
    color: var(--byf20-color-94a3b8);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    line-height: 1.2;
    text-transform: uppercase;
}

.byf-app-redesign #modal-doc-settings .auditinfo-settings-panel__header h3 {
    margin: 0;
    color: var(--byf20-color-0f172a);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
}

.byf-app-redesign #modal-doc-settings .auditinfo-settings-panel__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--byf20-color-eef2f7);
    color: var(--byf20-color-64748b);
    font-size: 12px;
    font-weight: 800;
}

.byf-app-redesign #modal-doc-settings .auditinfo-settings-panel__scroll {
    max-height: min(52vh, 450px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 2px 20px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.byf-app-redesign #modal-doc-settings .auditinfo-settings-panel__scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.byf-app-redesign #modal-doc-settings .auditinfo-settings-list {
    display: grid;
    gap: 10px;
}

.byf-app-redesign #modal-doc-settings .auditinfo-settings-list .auditinfo-card {
    box-shadow: 0 4px 14px rgba(15, 23, 42, .04);
}

.byf-app-redesign #modal-doc-settings .auditinfo-settings-panel__empty {
    display: flex;
    min-height: 150px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    color: var(--byf20-color-94a3b8);
    font-size: 13px;
    font-weight: 700;
}

.byf-app-redesign #modal-doc-settings .auditinfo-settings-panel__empty i {
    color: var(--byf20-color-cbd5e1);
    font-size: 26px;
}

@media (max-width: 767px) {
    .byf-app-redesign #modal-doc-settings .auditinfo-settings-host {
        padding: 12px;
    }

    .byf-app-redesign #modal-doc-settings .auditinfo-settings-panel__scroll {
        max-height: 48vh;
        padding: 0 2px 2px;
    }
}

/* Search page */
.byf-app-redesign #searchworkspace.byf-search-page {
    --byf-search-primary: var(--tenant-main-color, var(--tenant-primary-color, var(--byf-tenant-primary, #2e22bf)));
    --byf-search-border: #d9e4f2;
    --byf-search-muted: #65758d;
    --byf-search-surface: var(--byf-fond-color, #fbfdff);
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--byf-redesign-topbar-height, 0px));
    min-height: 0;
    overflow: hidden;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-page__inner {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 10px;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-width: 100%;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-toolbar {
    align-items: flex-start !important;
    flex: 0 0 auto;
    gap: 15px;
    padding: 15px !important;
    border: 1px solid var(--byf-search-border);
    border-radius: 14px;
    background: #fff;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-toolbar__main {
    width: 100%;
    flex: 1 1 100%;
    max-width: none;
    min-width: 0;
    padding: 0 !important;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-field {
    width: 100%;
    max-width: none;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-page-search-form,
.byf-app-redesign #searchworkspace.byf-search-page .byf-page-search-control {
    width: 100%;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-page-search-control {
    position: relative;
    display: flex;
    min-height: 48px;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0 8px 0 12px;
    border: 1px solid var(--byf-search-border) !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: none !important;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-page-search-input-wrap {
    position: relative !important;
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    z-index: 13050 !important;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-page-search-input-wrap .form-control,
.byf-app-redesign #searchworkspace.byf-search-page .byf-page-search-input-wrap input[type="text"],
.byf-app-redesign #searchworkspace.byf-search-page .byf-page-search-input-wrap input[type="search"] {
    width: 100%;
    min-height: 46px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #172033 !important;
    font-size: 15px;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-page-search-submit {
    display: inline-flex;
    width: 34px;
    height: 34px;
    min-height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #f0f3f8 !important;
    color: var(--byf-search-muted) !important;
    box-shadow: none !important;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-page-search-submit:hover,
.byf-app-redesign #searchworkspace.byf-search-page .byf-page-search-submit:focus {
    background: #e8edff !important;
    color: var(--byf-search-primary) !important;
}

.byf-app-redesign #searchworkspace.byf-search-page #quickSearchResults {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 13050 !important;
    width: 100%;
    max-width: none;
    max-height: min(420px, calc(100vh - 220px));
    overflow-x: hidden;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 !important;
    border: 1px solid var(--byf-redesign-border);
    border-radius: 14px !important;
    background: #fff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
}

.byf-app-redesign #searchworkspace.byf-search-page #quickSearchResults ul {
    margin: 0;
    padding: 6px;
    border-radius: 14px !important;
    background: transparent;
}

.byf-app-redesign #searchworkspace.byf-search-page #quickSearchResults a {
    padding: 8px 10px;
    border-radius: 10px;
}

.byf-app-redesign #searchworkspace.byf-search-page #quickSearchResults a:hover {
    background: var(--byf-redesign-muted) !important;
    color: var(--byf-redesign-foreground) !important;
}

.byf-app-redesign #searchworkspace.byf-search-page #quickSearchResults li.section {
    display: flex;
    min-height: 38px;
    align-items: center;
    margin: 6px 4px 4px;
    padding: 0 10px;
    border: 1px solid var(--byf-redesign-border);
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.byf-app-redesign #searchworkspace.byf-search-page #quickSearchResults li.section:has(> a):hover {
    background: var(--byf-redesign-muted) !important;
}

.byf-app-redesign #searchworkspace.byf-search-page #quickSearchResults li.section a {
    display: flex;
    min-height: 38px;
    align-items: center;
    justify-content: space-between;
    flex: 1 1 auto;
    margin: 0 -10px;
    padding: 0 10px;
}

.byf-app-redesign #searchworkspace.byf-search-page #quickSearchResults li.section a:hover {
    background: var(--byf-redesign-muted);
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin-top: 8px;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-option,
.byf-app-redesign #searchworkspace.byf-search-page .byf-search-date-range {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    min-height: 28px;
    margin: 0 !important;
    padding: 2px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--byf-search-muted);
    font-size: 13px;
    line-height: 1.2;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-option .text-blue {
    color: inherit !important;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-option__switch {
    margin: 0 !important;
    flex: 0 0 auto;
}

.byf-app-redesign #searchworkspace.byf-search-page #location {
    display: inline-block;
    max-width: min(58vw, 520px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    color: #172033;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-date-range h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #172033;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-date-input {
    width: 118px !important;
    height: 30px;
    min-height: 30px;
    padding: 4px 9px !important;
    border-radius: 9px !important;
    box-shadow: none !important;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-layout {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    flex-wrap: nowrap !important;
    gap: 10px;
    width: 100%;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-filter-card {
    flex: 0 0 auto;
    margin: 0 !important;
    border: 1px solid var(--byf-search-border);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    box-shadow: none !important;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-filter-summary {
    padding: 10px 12px;
    border-bottom: 1px solid #e7edf6;
    background: #f8fbff;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-filter-summary__content {
    align-items: center !important;
    gap: 12px;
    flex-wrap: wrap;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-filter-summary h3,
.byf-app-redesign #searchworkspace.byf-search-page .byf-search-filter-section h3 {
    margin: 0;
    color: #172033;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-selected-tags,
.byf-app-redesign #searchworkspace.byf-search-page .byf-search-doctypes,
.byf-app-redesign #searchworkspace.byf-search-page .byf-search-tag-scroll .scrolling {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    align-items: center;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 15px;
    margin-bottom: 0 !important;
    padding: 15px;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-filter-card.collapsed .byf-search-filters,
.byf-app-redesign #searchworkspace.byf-search-page .byf-search-filter-card.expanded .byf-search-filter-summary {
    display: none;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-filter-card.expanded .byf-search-filters {
    display: grid;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-filter-card.collapsed .byf-search-filter-summary {
    display: block;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-filter-section {
    min-width: 0;
    padding: 10px;
    border: 1px solid #e5ecf5;
    border-radius: 12px;
    background: var(--byf-search-surface);
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-filter-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e7edf6;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-filter-section__header .tag-filter {
    flex: 0 1 260px;
    min-width: 180px;
    height: 36px;
    margin: 0 !important;
    border: 1px solid var(--byf-search-border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-tag-scroll {
    position: relative;
    max-height: 112px;
    margin-top: 0 !important;
    overflow: hidden;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-tag-scroll .scrolling {
    width: 100%;
    max-height: 112px;
    margin-top: 0;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 0 4px 0 0;
    scrollbar-width: none;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-tag-scroll .scrolling > span {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-tag-scroll .scrolling::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-tag-scroll .gradient {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: none;
    height: 30px;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--byf-search-surface) 88%);
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-tag-scroll.has-more .gradient {
    display: block;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-period-filter .byf-search-date-range {
    width: 100%;
    min-height: 38px;
    margin: 0 !important;
    padding: 0;
    border: 0;
    background: transparent;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-period-filter .byf-search-date-input {
    width: min(44%, 180px) !important;
    height: 38px;
    min-height: 38px;
    flex: 1 1 130px;
    border: 1px solid var(--byf-search-border) !important;
    background: #fff !important;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-date-separator {
    color: var(--byf-search-muted);
}

.byf-app-redesign #searchworkspace.byf-search-page .tags-info .toggle-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    margin: 0 !important;
    padding: 6px 11px !important;
    border: 1px solid #b9c8f7 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #52637c !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.15;
    box-shadow: none !important;
}

.byf-app-redesign #searchworkspace.byf-search-page .tags-info .toggle-tag i {
    color: inherit !important;
}

.byf-app-redesign #searchworkspace.byf-search-page .tags-info .toggle-tag.tags-info-active,
.byf-app-redesign #searchworkspace.byf-search-page .tags-info .toggle-tag:hover {
    border-color: var(--byf-search-primary) !important;
    background: #f0f2ff !important;
    color: #172033 !important;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-quickfolder-actions {
    position: static !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin: 0 0 0 auto !important;
    transform: none !important;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-quickfolder-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    margin: 0 !important;
    padding: 7px 12px !important;
    border: 1px solid var(--byf-search-primary) !important;
    border-radius: 10px !important;
    background: var(--byf-search-primary) !important;
    color: #fff !important;
    font-weight: 700;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-filter-footer {
    position: relative;
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    border-top: 1px solid #e7edf6;
    background: #fff;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-filter-toggle {
    position: absolute;
    left: 50%;
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border: 0 !important;
    border-radius: 10px;
    background: transparent;
    transform: translateX(-50%);
}

.byf-app-redesign #searchworkspace.byf-search-page #seachtoggle {
    padding: 0;
    color: var(--byf-search-muted);
}

.byf-app-redesign #searchworkspace.byf-search-page #seachtoggle:hover {
    background: var(--byf-search-surface);
    color: var(--byf-search-primary);
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-results-toolbar {
    display: none;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-results-toolbar.is-visible {
    display: block;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-results-previewactionbar {
    position: relative !important;
    top: auto !important;
    z-index: auto;
    margin: 0 !important;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-results-previewactionbar > .disableselectable {
    justify-content: flex-end !important;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-results-previewactionbar .crumb-actions {
    display: flex !important;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-results-previewactionbar .crumb-actions > * {
    margin-right: 0 !important;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-results-previewactionbar .changesorticon {
    height: 36px;
    min-width: 150px;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-results-previewactionbar .byf-redesign-view-switch {
    min-height: 36px;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-results {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    min-width: 0;
    margin-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0;
    padding-bottom: 18px;
    align-content: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    --byf-search-results-fade-size: 44px;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-results::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-results.has-more {
    -webkit-mask-image: linear-gradient(
        to bottom,
        #000 0,
        #000 calc(100% - var(--byf-search-results-fade-size)),
        rgba(0, 0, 0, 0) 100%
    );
    mask-image: linear-gradient(
        to bottom,
        #000 0,
        #000 calc(100% - var(--byf-search-results-fade-size)),
        rgba(0, 0, 0, 0) 100%
    );
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-info-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid #bfdbfe;
    border-radius: 14px;
    background: #eff6ff;
    color: #1e3a8a;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
}

.byf-app-redesign #searchworkspace.byf-search-page .byf-search-info-box i {
    flex: 0 0 auto;
    margin-top: 2px;
    color: #2563eb;
    font-size: 16px;
}

@media (max-width: 1200px) {
    .byf-app-redesign #searchworkspace.byf-search-page .byf-search-filters {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1100px) {
    .byf-app-redesign #searchworkspace.byf-search-page .byf-search-toolbar {
        flex-direction: column !important;
    }

    .byf-app-redesign #searchworkspace.byf-search-page .byf-search-toolbar__main {
        flex: 1 1 auto;
        width: 100%;
        max-width: none;
    }

    .byf-app-redesign #searchworkspace.byf-search-page #location {
        max-width: calc(100vw - 160px);
    }
}

@media (max-width: 760px) {
    .byf-app-redesign #searchworkspace.byf-search-page .byf-search-page__inner {
        padding: 8px;
    }

    .byf-app-redesign #searchworkspace.byf-search-page .byf-search-filters {
        padding: 8px;
    }

    .byf-app-redesign #searchworkspace.byf-search-page .byf-search-filter-section__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .byf-app-redesign #searchworkspace.byf-search-page .byf-search-filter-section__header .tag-filter {
        flex: auto;
        width: 100%;
    }

    .byf-app-redesign #searchworkspace.byf-search-page .byf-search-options {
        align-items: stretch;
        flex-direction: column;
    }

    .byf-app-redesign #searchworkspace.byf-search-page .byf-search-option,
    .byf-app-redesign #searchworkspace.byf-search-page .byf-search-date-range {
        width: 100%;
    }

    .byf-app-redesign #searchworkspace.byf-search-page .byf-search-date-range {
        flex-wrap: wrap;
    }

    .byf-app-redesign #searchworkspace.byf-search-page .byf-search-filter-footer {
        justify-content: flex-start;
    }

    .byf-app-redesign #searchworkspace.byf-search-page .byf-search-filter-toggle {
        position: static;
        transform: none;
    }
}