@font-face {
    font-family: 'Feather';
    src: url('../vendors/fonts/feather.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --bm-red: #ef312c;
    --bm-red-dark: #c92420;
    --bm-coral: #ff6b4a;
    --bm-ink: #17202a;
    --bm-ink-2: #232d38;
    --bm-teal: #1b8a7a;
    --bm-teal-soft: #e9f7f4;
    --bm-amber: #f5a524;
    --bm-page: #f5f6f8;
    --bm-card: #ffffff;
    --bm-border: #e7e9ee;
    --bm-muted: #7b8491;
    --bm-sidebar: 274px;
    --bm-header: 72px;
    --bm-radius: 16px;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
    margin: 0;
    background: var(--bm-page);
    color: var(--bm-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
}
a { text-decoration: none; }

.bm-shell { min-height: 100vh; }
.bm-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--bm-sidebar);
    background:
        radial-gradient(circle at 14% 8%, rgba(239,49,44,.16), transparent 28%),
        linear-gradient(180deg, #161d26 0%, #10161d 100%);
    color: #fff;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255,255,255,.06);
}
.bm-brand {
    height: var(--bm-header);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 22px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    color: #fff;
}
.bm-brand-mark {
    width: 42px; height: 42px; border-radius: 14px;
    display: grid; place-items: center;
    background: linear-gradient(145deg, var(--bm-red), var(--bm-coral));
    box-shadow: 0 10px 28px rgba(239,49,44,.28);
}
.bm-brand-mark svg { width: 28px; height: 28px; }
.bm-brand-copy strong { display:block; font-size:16px; letter-spacing:.2px; }
.bm-brand-copy span { font-size:10px; color:#aeb8c5; letter-spacing:1.8px; text-transform:uppercase; }
.bm-nav { padding: 18px 14px 28px; overflow-y: auto; flex:1; }
.bm-nav-title { color:#667281; font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:12px 12px 7px; }
.bm-nav-link {
    display:flex; align-items:center; gap:12px;
    padding:11px 12px; margin:3px 0; border-radius:11px;
    color:#b7c0cb; transition:.18s ease; font-weight:500;
}
.bm-nav-link i { font-size:18px; width:20px; text-align:center; }
.bm-nav-link:hover { background:rgba(255,255,255,.06); color:#fff; }
.bm-nav-link.active {
    color:#fff;
    background:linear-gradient(90deg, rgba(239,49,44,.94), rgba(255,107,74,.85));
    box-shadow:0 8px 22px rgba(239,49,44,.18);
}
.bm-sidebar-foot { padding:14px; border-top:1px solid rgba(255,255,255,.07); }
.bm-sidebar-note { padding:13px; border-radius:12px; background:rgba(255,255,255,.05); color:#9eabb8; font-size:12px; line-height:1.5; }

.bm-main { margin-left:var(--bm-sidebar); min-height:100vh; }
.bm-header {
    height:var(--bm-header); background:#fff;
    border-bottom:1px solid var(--bm-border);
    display:flex; align-items:center; justify-content:space-between;
    padding:0 28px; position:sticky; top:0; z-index:1030;
}
.bm-menu-btn { display:none; border:0; background:#f3f4f6; width:40px; height:40px; border-radius:10px; }
.bm-header-title small { display:block; color:var(--bm-muted); font-size:11px; text-transform:uppercase; letter-spacing:1px; }
.bm-header-title strong { font-size:16px; }
.bm-user { display:flex; align-items:center; gap:11px; }
.bm-user-avatar { width:40px; height:40px; border-radius:13px; background:var(--bm-teal-soft); color:var(--bm-teal); display:grid; place-items:center; font-weight:800; }
.bm-user-meta { line-height:1.25; }
.bm-user-meta strong { display:block; font-size:13px; }
.bm-user-meta span { color:var(--bm-muted); font-size:11px; }
.bm-logout-btn { width:38px; height:38px; border:1px solid var(--bm-border); background:#fff; border-radius:10px; color:#5e6670; }
.bm-logout-btn:hover { color:var(--bm-red); border-color:#f7c0bd; background:#fff6f5; }
.bm-content { padding:28px; }
.bm-footer { padding:20px 28px 30px; color:#9299a3; font-size:12px; }

.bm-page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:22px; }
.bm-page-head h1 { margin:0; font-size:25px; font-weight:760; letter-spacing:-.4px; }
.bm-page-head p { margin:6px 0 0; color:var(--bm-muted); }
.bm-eyebrow { display:inline-flex; align-items:center; gap:7px; color:var(--bm-red); text-transform:uppercase; letter-spacing:1.4px; font-size:10px; font-weight:800; margin-bottom:6px; }
.bm-eyebrow::before { content:""; width:18px; height:2px; border-radius:2px; background:var(--bm-red); }

.bm-card { background:var(--bm-card); border:1px solid var(--bm-border); border-radius:var(--bm-radius); box-shadow:0 4px 20px rgba(23,32,42,.035); }
.bm-card-header { padding:18px 20px; border-bottom:1px solid var(--bm-border); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.bm-card-header h5 { margin:0; font-size:15px; font-weight:700; }
.bm-card-body { padding:20px; }

.bm-stat { position:relative; overflow:hidden; padding:19px; min-height:128px; }
.bm-stat::after { content:""; position:absolute; width:90px; height:90px; border-radius:50%; right:-26px; top:-30px; background:currentColor; opacity:.06; }
.bm-stat-top { display:flex; justify-content:space-between; gap:10px; align-items:center; color:var(--bm-muted); font-size:12px; }
.bm-stat-icon { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; font-size:18px; }
.bm-stat-value { margin-top:12px; font-size:27px; font-weight:800; letter-spacing:-.5px; color:var(--bm-ink); }
.bm-stat.red { color:var(--bm-red); } .bm-stat.red .bm-stat-icon { background:#fff0ef; }
.bm-stat.teal { color:var(--bm-teal); } .bm-stat.teal .bm-stat-icon { background:#e8f7f4; }
.bm-stat.amber { color:var(--bm-amber); } .bm-stat.amber .bm-stat-icon { background:#fff5df; }
.bm-stat.ink { color:#566273; } .bm-stat.ink .bm-stat-icon { background:#eef1f5; }

.btn-bm { background:linear-gradient(135deg,var(--bm-red),var(--bm-coral)); color:#fff; border:0; border-radius:10px; padding:10px 15px; font-weight:650; box-shadow:0 8px 18px rgba(239,49,44,.16); }
.btn-bm:hover { color:#fff; filter:brightness(.96); transform:translateY(-1px); }
.btn-soft { background:#f3f5f7; color:#3c4652; border:1px solid #e6e9ed; border-radius:10px; }
.btn-soft:hover { background:#eceff2; color:#1d2732; }

.form-control, .form-select { border-color:#dde1e6; border-radius:10px; min-height:42px; font-size:13px; }
.form-control:focus, .form-select:focus { border-color:#f18a86; box-shadow:0 0 0 .2rem rgba(239,49,44,.09); }
.form-label { font-size:12px; font-weight:650; color:#4d5661; margin-bottom:7px; }
.form-check-input:checked { background-color:var(--bm-red); border-color:var(--bm-red); }

.table { --bs-table-bg:transparent; margin:0; }
.table thead th { background:#fafafa; color:#6a7480; font-size:10.5px; letter-spacing:.65px; text-transform:uppercase; font-weight:750; border-bottom:1px solid var(--bm-border); padding:13px 15px; white-space:nowrap; }
.table tbody td { padding:14px 15px; vertical-align:middle; border-color:#eef0f2; color:#333d48; }
.table tbody tr:hover { background:#fffafa; }

.bm-badge { display:inline-flex; align-items:center; gap:5px; padding:5px 9px; border-radius:999px; font-size:10.5px; font-weight:750; text-transform:capitalize; }
.bm-badge.red { background:#fff0ef; color:#c92b26; }
.bm-badge.green { background:#eaf8f2; color:#16805f; }
.bm-badge.blue { background:#ecf3ff; color:#3567b7; }
.bm-badge.amber { background:#fff5df; color:#a86a00; }
.bm-badge.gray { background:#eff1f4; color:#69727c; }
.bm-badge.teal { background:#e6f7f3; color:#167767; }

.bm-route { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; }
.bm-route::before { content:""; width:7px; height:7px; border-radius:50%; }
.bm-route.manufacturing::before { background:#4f7ad9; }
.bm-route.branding::before { background:#c34fbb; }
.bm-route.ready_stock::before { background:#1b8a7a; }

.bm-filter { display:flex; flex-wrap:wrap; gap:9px; align-items:center; }
.bm-filter .form-control, .bm-filter .form-select { width:auto; min-width:150px; }
.bm-actions { display:flex; gap:6px; justify-content:flex-end; }
.bm-icon-btn { width:34px; height:34px; display:grid; place-items:center; border-radius:9px; border:1px solid var(--bm-border); background:#fff; color:#66717d; }
.bm-icon-btn:hover { background:#fff3f2; color:var(--bm-red); border-color:#f3c6c3; }

.bm-empty { padding:50px 20px; text-align:center; color:#8b949f; }
.bm-empty i { display:block; font-size:34px; margin-bottom:12px; color:#b7bec6; }

.bm-timeline { position:relative; margin:0; padding:0; list-style:none; }
.bm-timeline::before { content:""; position:absolute; left:13px; top:9px; bottom:9px; width:2px; background:#eceef1; }
.bm-timeline li { position:relative; padding:0 0 22px 42px; }
.bm-timeline li:last-child { padding-bottom:0; }
.bm-timeline-dot { position:absolute; left:5px; top:2px; width:18px; height:18px; border-radius:50%; background:#fff; border:4px solid var(--bm-teal); box-shadow:0 0 0 3px #eaf7f4; }
.bm-timeline-title { font-weight:700; font-size:13px; }
.bm-timeline-meta { color:var(--bm-muted); font-size:11px; margin-top:3px; }
.bm-timeline-note { margin-top:7px; padding:9px 11px; background:#f8f9fa; border-radius:9px; color:#626b75; font-size:12px; }

.bm-progress-track { height:7px; border-radius:10px; background:#edf0f2; overflow:hidden; }
.bm-progress-bar { height:100%; border-radius:10px; background:linear-gradient(90deg,var(--bm-red),var(--bm-coral)); }

.bm-login-page { min-height:100vh; display:grid; place-items:center; padding:24px; background:#f4f5f7; position:relative; overflow:hidden; }
.bm-login-page::before { content:""; position:fixed; width:460px; height:460px; border-radius:50%; background:rgba(239,49,44,.07); top:-180px; left:-130px; }
.bm-login-card { width:min(980px,100%); background:#fff; border-radius:24px; overflow:hidden; box-shadow:0 25px 70px rgba(20,28,36,.12); display:grid; grid-template-columns:1fr 1fr; min-height:570px; position:relative; z-index:2; }
.bm-login-form { padding:58px 56px; display:flex; flex-direction:column; justify-content:center; }
.bm-login-form h1 { font-size:30px; font-weight:800; margin:24px 0 8px; letter-spacing:-.6px; }
.bm-login-form p { color:var(--bm-muted); margin-bottom:28px; }
.bm-login-side { padding:48px; background:
    linear-gradient(145deg, rgba(17,23,30,.92), rgba(17,23,30,.72)),
    linear-gradient(135deg,var(--bm-red),var(--bm-coral)); color:#fff; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
.bm-login-side::before, .bm-login-side::after { content:""; position:absolute; border:1px solid rgba(255,255,255,.13); border-radius:50%; }
.bm-login-side::before { width:310px; height:310px; right:-120px; top:-90px; }
.bm-login-side::after { width:220px; height:220px; left:-90px; bottom:-80px; }
.bm-login-side h2 { font-size:34px; line-height:1.15; font-weight:760; max-width:380px; position:relative; z-index:1; }
.bm-login-side p { max-width:390px; color:#c8d0d8; line-height:1.7; position:relative; z-index:1; }
.bm-flow-mini { display:grid; gap:10px; position:relative; z-index:1; }
.bm-flow-mini div { display:flex; align-items:center; gap:10px; padding:10px 12px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.08); border-radius:10px; font-size:12px; }
.bm-flow-mini span { width:8px; height:8px; border-radius:50%; background:var(--bm-coral); box-shadow:0 0 0 4px rgba(255,107,74,.12); }

.pagination { margin:0; }
.page-link { border-color:#e5e8ec; color:#5a6571; }
.page-item.active .page-link { background:var(--bm-red); border-color:var(--bm-red); }

@media (max-width: 991.98px) {
    .bm-sidebar { transform:translateX(-100%); transition:.22s ease; box-shadow:20px 0 50px rgba(0,0,0,.18); }
    body.bm-sidebar-open .bm-sidebar { transform:translateX(0); }
    .bm-main { margin-left:0; }
    .bm-menu-btn { display:inline-grid; place-items:center; }
    .bm-header { padding:0 18px; }
    .bm-content { padding:20px 16px; }
    .bm-login-card { grid-template-columns:1fr; max-width:560px; }
    .bm-login-side { display:none; }
}
@media (max-width: 575.98px) {
    .bm-user-meta { display:none; }
    .bm-page-head { flex-direction:column; }
    .bm-page-head .btn { width:100%; }
    .bm-filter { align-items:stretch; }
    .bm-filter .form-control, .bm-filter .form-select, .bm-filter .btn { width:100%; }
    .bm-login-form { padding:38px 24px; }
}
.bm-stat.blue { color:#4f7ad9; }
.bm-stat.blue .bm-stat-icon { background:#edf3ff; }

/* --------------------------------------------------------------------------
   Scrollbars
   -------------------------------------------------------------------------- */
html {
    scrollbar-width: thin;
    scrollbar-color: #bcc4cd #eef1f4;
}

* {
    scrollbar-width: thin;
    scrollbar-color: #bcc4cd #eef1f4;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: #eef1f4;
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
    background: #bcc4cd;
    border: 2px solid #eef1f4;
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
    background: #929da8;
}

.bm-nav {
    scrollbar-color: rgba(255, 255, 255, .22) transparent;
}

.bm-nav::-webkit-scrollbar {
    width: 6px;
}

.bm-nav::-webkit-scrollbar-track {
    background: transparent;
}

.bm-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .17);
    border: 0;
    border-radius: 999px;
}

.bm-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, .30);
}

.table-responsive::-webkit-scrollbar,
.bm-permission-scroll::-webkit-scrollbar {
    height: 7px;
    width: 7px;
}

.table-responsive::-webkit-scrollbar-track,
.bm-permission-scroll::-webkit-scrollbar-track {
    background: #f2f4f6;
}

.table-responsive::-webkit-scrollbar-thumb,
.bm-permission-scroll::-webkit-scrollbar-thumb {
    background: #b9c2cc;
    border: 1px solid #f2f4f6;
    border-radius: 999px;
}

.table-responsive::-webkit-scrollbar-thumb:hover,
.bm-permission-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--bm-red);
}

/* --------------------------------------------------------------------------
   Roles / Permission Matrix
   -------------------------------------------------------------------------- */
.bm-role-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: -5px 0 22px;
}

.bm-role-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 34px;
    color: #8a94a0;
    font-size: 12px;
}

.bm-role-breadcrumb-title {
    color: var(--bm-ink);
    font-size: 15px;
    font-weight: 750;
    margin-right: 2px;
}

.bm-role-breadcrumb-divider {
    width: 1px;
    height: 22px;
    margin: 0 3px;
    background: #dfe3e8;
}

.bm-role-breadcrumb a {
    color: #4b5867;
    font-weight: 550;
}

.bm-role-breadcrumb a:hover {
    color: var(--bm-red);
}

.bm-role-breadcrumb i {
    color: #bdc4cc;
    font-size: 13px;
}

.bm-back-btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding-inline: 14px;
    text-transform: uppercase;
    letter-spacing: .35px;
    font-size: 10px;
    font-weight: 750;
    background: #fff3f2 !important;
    color: var(--bm-red) !important;
    border: 1px solid #f3b7b3 !important;
    box-shadow: 0 5px 14px rgba(239, 49, 44, .08);
    transition: all .2s ease;
}

.bm-back-btn:hover,
.bm-back-btn:focus {
    background: linear-gradient(135deg, var(--bm-red), var(--bm-coral)) !important;
    color: #fff !important;
    border-color: var(--bm-red) !important;
    box-shadow: 0 8px 18px rgba(239, 49, 44, .18);
    transform: translateY(-1px);
}

.bm-back-btn i {
    color: inherit;
    transition: transform .2s ease;
}

.bm-back-btn:hover i {
    transform: translateX(-2px);
}

/* Order detail header actions */
.bm-order-head-actions {
    justify-content: flex-end;
}

.bm-order-action-btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 14px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.bm-order-action-btn i {
    font-size: 14px;
    line-height: 1;
}

.bm-order-delete-btn {
    background: #fff;
    color: #d93632;
    border: 1px solid #efb0ad;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(217, 54, 50, .06);
    transition: all .2s ease;
}

.bm-order-delete-btn:hover,
.bm-order-delete-btn:focus {
    background: #fff1f0;
    color: #c82f2b;
    border-color: #e98f8b;
    box-shadow: 0 6px 14px rgba(217, 54, 50, .1);
    transform: translateY(-1px);
}

.bm-order-head-actions .bm-back-btn {
    margin-left: 2px;
}

.bm-role-card {
    overflow: hidden;
    border-radius: 14px;
}

.bm-role-card-body {
    padding: 26px 26px 0;
}

.bm-role-section-heading {
    margin-bottom: 24px;
}

.bm-role-section-heading h5 {
    margin: 0 0 7px;
    color: #26313d;
    font-size: 15px;
    font-weight: 750;
}

.bm-role-section-heading p {
    margin: 0;
    color: #89939f;
    font-size: 12px;
}

.bm-role-name-row {
    margin-bottom: 26px;
}

.bm-role-input-group .input-group-text {
    width: 46px;
    justify-content: center;
    color: #566372;
    background: #f7f8fa;
    border-color: #dde1e6;
    border-radius: 9px 0 0 9px;
}

.bm-role-input-group .form-control {
    border-radius: 0 9px 9px 0;
}

.bm-permission-section {
    padding-bottom: 26px;
}

.bm-permission-label {
    margin-bottom: 11px;
}

.bm-permission-box {
    overflow: hidden;
    border: 1px solid #dde2e7;
    border-radius: 9px;
    background: #fff;
}

.bm-permission-check-all {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 9px 14px;
    border-bottom: 1px solid #e2e6ea;
    background: #fff;
}

.bm-permission-check-all .form-check-label,
.bm-module-select-all .form-check-label,
.bm-permission-option .form-check-label {
    cursor: pointer;
    color: #384554;
    font-size: 12px;
}

.bm-permission-check-all .form-check-label {
    font-weight: 650;
}

.bm-permission-scroll {
    max-width: 100%;
}

.bm-permission-table {
    min-width: 760px;
}

.bm-permission-table thead th {
    padding: 10px 16px;
    background: #f0f2f5;
    color: #485464;
    font-size: 9.5px;
    letter-spacing: .45px;
}

.bm-permission-table tbody td {
    min-height: 49px;
    padding: 12px 16px;
    border-color: #e6e9ed;
}

.bm-permission-table tbody tr:last-child td {
    border-bottom: 0;
}

.bm-permission-table tbody tr:hover {
    background: #fffafa;
}

.bm-permission-module-col {
    width: 34%;
    min-width: 290px;
}

.bm-permission-module-wrap {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) auto;
    align-items: center;
    gap: 16px;
}

.bm-permission-module-name {
    color: #293746;
    font-size: 12px;
    font-weight: 650;
}

.bm-module-select-all {
    display: inline-flex;
    align-items: center;
    min-width: 92px;
}

.bm-permission-options {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 17px;
}

.bm-permission-option {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.bm-permission-table .form-check-input,
.bm-permission-check-all .form-check-input {
    width: 14px;
    height: 14px;
    margin-top: .1em;
    border-color: #aeb8c3;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: none;
}

.bm-permission-table .form-check-input:checked,
.bm-permission-check-all .form-check-input:checked {
    border-color: var(--bm-red);
    background-color: var(--bm-red);
}

.bm-permission-table .form-check-input:indeterminate,
.bm-permission-check-all .form-check-input:indeterminate {
    border-color: var(--bm-teal);
    background-color: var(--bm-teal);
}

.bm-role-card-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-height: 74px;
    padding: 16px 26px;
    border-top: 1px solid var(--bm-border);
    background: #fff;
}

.bm-role-card-footer .btn {
    min-width: 105px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

@media (max-width: 767.98px) {
    .bm-role-page-head {
        align-items: stretch;
        flex-direction: column;
    }

    .bm-back-btn {
        align-self: flex-start;
    }

    .bm-role-card-body {
        padding: 20px 16px 0;
    }

    .bm-role-card-footer {
        padding: 14px 16px;
    }
}

/* --------------------------------------------------------------------------
   Admin Order Flow
   -------------------------------------------------------------------------- */
.bm-form-footer {
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:10px;
    padding:4px 0 2px;
}
.bm-form-footer .btn { min-width:130px; }

.bm-item-editor-table { min-width:900px; }
.bm-item-editor-table td { vertical-align:middle; }
.bm-item-editor-scroll { max-height:520px; }
.bm-category-pill {
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:5px 9px;
    border-radius:8px;
    background:#f3f5f7;
    color:#5c6671;
    font-size:11px;
    font-weight:650;
    white-space:nowrap;
}

.bm-flow-strip {
    display:flex;
    align-items:center;
    gap:8px;
    overflow-x:auto;
    padding:12px 14px;
    border:1px solid var(--bm-border);
    border-radius:14px;
    background:#fff;
    box-shadow:0 4px 20px rgba(23,32,42,.025);
}
.bm-flow-strip > i { color:#c5cbd2; flex:0 0 auto; }
.bm-flow-node {
    min-width:122px;
    display:grid;
    grid-template-columns:28px 1fr;
    align-items:center;
    column-gap:8px;
    row-gap:1px;
    padding:8px 10px;
    border-radius:10px;
    color:#77818c;
    background:#f7f8fa;
    flex:0 0 auto;
}
.bm-flow-node > span {
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    grid-row:1 / span 2;
    border-radius:50%;
    background:#e9edf1;
    color:#69737f;
    font-size:11px;
    font-weight:800;
}
.bm-flow-node strong { font-size:11px; line-height:1.15; white-space:nowrap; }
.bm-flow-node small { font-size:9.5px; color:#98a0aa; text-transform:capitalize; white-space:nowrap; }
.bm-flow-node.active { background:#fff1f0; color:#b92b27; box-shadow:inset 0 0 0 1px #f7cbc8; }
.bm-flow-node.active > span { background:var(--bm-red); color:#fff; box-shadow:0 0 0 4px rgba(239,49,44,.09); }
.bm-flow-node.done { background:#edf9f5; color:#176f5f; }
.bm-flow-node.done > span { background:var(--bm-teal); color:#fff; }

.bm-info-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}
.bm-info-grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.bm-info-grid > div {
    min-width:0;
    padding:11px 12px;
    border:1px solid #edf0f2;
    border-radius:10px;
    background:#fafbfc;
}
.bm-info-grid small { display:block; margin-bottom:4px; color:#9199a3; font-size:10px; }
.bm-info-grid strong { display:block; color:#303a45; font-size:12px; overflow-wrap:anywhere; }

.bm-note-box {
    padding:11px 12px;
    border:1px solid #ebeef1;
    border-left:3px solid var(--bm-teal);
    border-radius:9px;
    background:#fafbfc;
    color:#606a75;
    font-size:12px;
    line-height:1.55;
}
.bm-next-action {
    display:flex;
    align-items:flex-start;
    gap:11px;
    padding:13px;
    border-radius:11px;
    background:#fff3f2;
    border:1px solid #f7d3d0;
    color:#a9302c;
}
.bm-next-action > i { font-size:20px; margin-top:1px; }
.bm-next-action strong, .bm-next-action span { display:block; }
.bm-next-action strong { font-size:12.5px; }
.bm-next-action span { margin-top:3px; color:#7e6564; font-size:10.5px; line-height:1.45; }
.bm-next-action.success { background:#edf9f5; border-color:#cfece2; color:#167261; }
.bm-next-action.warning { background:#fff8e9; border-color:#f3dfae; color:#9a680d; }

.bm-workflow-table { min-width:1180px; }
.bm-workflow-table .btn-sm { white-space:nowrap; font-size:10.5px; padding:7px 10px; }
.bm-timeline-scroll { max-height:510px; overflow:auto; }
.bm-modal-content { border:0; border-radius:14px; box-shadow:0 24px 70px rgba(25,33,42,.18); }
.bm-modal-content .modal-header,
.bm-modal-content .modal-footer { border-color:#edf0f2; }
.bm-modal-content .modal-title { font-size:15px; font-weight:750; }

@media (max-width:1199.98px) {
    .bm-info-grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:575.98px) {
    .bm-info-grid, .bm-info-grid-4 { grid-template-columns:1fr; }
    .bm-form-footer { align-items:stretch; flex-direction:column-reverse; }
    .bm-form-footer .btn { width:100%; }
    .bm-flow-strip { margin-left:-2px; margin-right:-2px; }
}

/* --------------------------------------------------------------------------
   Shared page breadcrumb header
   -------------------------------------------------------------------------- */
.bm-page-head-actions {
    align-items: center;
    justify-content: flex-end;
}

.bm-page-head-actions .btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

@media (max-width: 767.98px) {
    .bm-page-head-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

/* --------------------------------------------------------------------------
   AJAX list pages / DataTables
   -------------------------------------------------------------------------- */
.btn-bm-filter {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    color: var(--bm-red);
    background: #fff;
    border: 1px solid #ef9a95;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 5px 14px rgba(23, 32, 42, .035);
}
.btn-bm-filter:hover,
.btn-bm-filter[aria-expanded="true"] {
    color: #fff;
    border-color: var(--bm-red);
    background: linear-gradient(135deg, var(--bm-red), var(--bm-coral));
    box-shadow: 0 8px 18px rgba(239, 49, 44, .14);
}

.bm-filter-collapse {
    margin: -8px 0 16px;
}
.bm-filter-panel {
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--bm-border);
    border-radius: 14px;
    box-shadow: 0 5px 18px rgba(23, 32, 42, .035);
}
.bm-filter-panel .form-label {
    display: block;
    margin-bottom: 6px;
    color: #697483;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .55px;
    text-transform: uppercase;
}
.bm-filter-panel .form-control,
.bm-filter-panel .form-select {
    min-width: 180px;
    background-color: #fff;
}
.bm-filter-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    white-space: nowrap;
}

.bm-datatable-card {
    overflow: hidden;
}
.bm-datatable-card .dataTables_wrapper {
    width: 100%;
}
.bm-dt-head,
.bm-dt-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 17px 20px;
    background: #fff;
}
.bm-dt-head {
    border-bottom: 1px solid var(--bm-border);
}
.bm-dt-footer {
    border-top: 1px solid var(--bm-border);
    min-height: 66px;
}
.bm-dt-length,
.bm-dt-search,
.bm-dt-info,
.bm-dt-pagination {
    display: flex;
    align-items: center;
}

.bm-datatable-card .dataTables_length,
.bm-datatable-card .dataTables_filter,
.bm-datatable-card .dataTables_info,
.bm-datatable-card .dataTables_paginate {
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    text-align: left !important;
}
.bm-datatable-card .dataTables_length label,
.bm-datatable-card .dataTables_filter label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #667180;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}
.bm-datatable-card .dataTables_length select {
    width: 70px !important;
    min-width: 70px;
    height: 36px;
    min-height: 36px;
    margin: 0 !important;
    padding: 5px 28px 5px 10px;
    border: 1px solid #dfe3e8;
    border-radius: 8px;
    color: #4d5864;
    background-color: #fff;
    box-shadow: none;
}
.bm-datatable-card .dataTables_filter input {
    width: min(260px, 32vw) !important;
    height: 38px;
    min-height: 38px;
    margin: 0 0 0 2px !important;
    padding: 8px 12px;
    border: 1px solid #dfe3e8;
    border-radius: 8px;
    color: #33404d;
    background: #fff;
    outline: none;
    box-shadow: none;
}
.bm-datatable-card .dataTables_filter input:focus {
    border-color: #f18a86;
    box-shadow: 0 0 0 .18rem rgba(239, 49, 44, .08);
}
.bm-datatable-card .dataTables_info {
    color: #7a8490;
    font-size: 11px;
}
.bm-datatable-card .dataTables_paginate .pagination {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
}
.bm-datatable-card .dataTables_paginate .page-item .page-link {
    min-width: 31px;
    height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border: 1px solid #e1e5ea;
    border-radius: 7px !important;
    color: #697482;
    background: #fff;
    font-size: 11px;
    line-height: 1;
    box-shadow: none;
}
.bm-datatable-card .dataTables_paginate .page-item.active .page-link {
    color: #fff;
    border-color: var(--bm-red);
    background: linear-gradient(135deg, var(--bm-red), var(--bm-coral));
}
.bm-datatable-card .dataTables_paginate .page-item:not(.disabled) .page-link:hover {
    color: var(--bm-red);
    border-color: #f2b3af;
    background: #fff4f3;
}
.bm-datatable-card .dataTables_paginate .page-item.disabled .page-link {
    color: #c0c7cf;
    background: #f8f9fa;
}

.bm-datatable-card .dataTables_scroll {
    border: 0;
}
.bm-datatable-card .dataTables_scrollHead,
.bm-datatable-card .dataTables_scrollBody {
    width: 100% !important;
}
.bm-datatable-card .dataTables_scrollBody {
    border: 0 !important;
}
.bm-datatable-card .dataTables_scrollBody::-webkit-scrollbar,
.bm-datatable-card .dataTables_scrollHead::-webkit-scrollbar {
    height: 7px;
}
.bm-datatable-card .dataTables_scrollBody::-webkit-scrollbar-track,
.bm-datatable-card .dataTables_scrollHead::-webkit-scrollbar-track {
    background: #f2f4f6;
}
.bm-datatable-card .dataTables_scrollBody::-webkit-scrollbar-thumb,
.bm-datatable-card .dataTables_scrollHead::-webkit-scrollbar-thumb {
    background: #b9c2cc;
    border: 1px solid #f2f4f6;
    border-radius: 999px;
}
.bm-datatable-card .dataTables_scrollBody::-webkit-scrollbar-thumb:hover,
.bm-datatable-card .dataTables_scrollHead::-webkit-scrollbar-thumb:hover {
    background: var(--bm-red);
}

.bm-ajax-table {
    width: 100% !important;
    margin: 0 !important;
}
.bm-ajax-table thead th {
    background: #fafbfc !important;
    border-top: 0 !important;
}
.bm-ajax-table tbody td {
    background: #fff;
}
.bm-ajax-table tbody tr:hover td {
    background: #fffafa;
}
.bm-ajax-table .sorting:before,
.bm-ajax-table .sorting:after,
.bm-ajax-table .sorting_asc:before,
.bm-ajax-table .sorting_asc:after,
.bm-ajax-table .sorting_desc:before,
.bm-ajax-table .sorting_desc:after {
    opacity: .22 !important;
}
.bm-ajax-table .sorting_asc:before,
.bm-ajax-table .sorting_desc:after {
    opacity: .7 !important;
    color: var(--bm-red) !important;
}

/* DataTable AJAX loader: strictly inside the table header/body area. */
.bm-datatable-card .dataTables_processing {
    display: none !important;
}
.bm-dt-table-loader-host {
    position: relative !important;
    min-height: 86px;
}
.bm-dt-table-loader-overlay {
    position: absolute;
    inset: 0;
    z-index: 25;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .78);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    pointer-events: all;
}
.bm-dt-table-loader-host.is-loading > .bm-dt-table-loader-overlay {
    display: flex;
}
.bm-dt-table-loader-box {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 40px;
    padding: 9px 13px;
    border: 1px solid rgba(239, 49, 44, .20);
    border-radius: 9px;
    color: #4f5965;
    background: #fff;
    box-shadow: 0 8px 22px rgba(23, 32, 42, .10);
    font-size: 11px;
    font-weight: 650;
    line-height: 1;
}
.bm-dt-table-loader-spinner {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border: 2px solid rgba(239, 49, 44, .18);
    border-top-color: var(--bm-red);
    border-right-color: var(--bm-coral);
    border-radius: 50%;
    animation: bmDtTableLoaderSpin .7s linear infinite;
}
@keyframes bmDtTableLoaderSpin {
    to { transform: rotate(360deg); }
}
.bm-dt-error {
    margin: 16px 20px 0;
    padding: 11px 13px;
    border: 1px solid #f4c5c2;
    border-radius: 9px;
    color: #a62d28;
    background: #fff4f3;
    font-size: 12px;
}
.bm-icon-btn.danger:hover {
    color: #c92b26;
    border-color: #f2b9b5;
    background: #fff0ef;
}
.bm-icon-btn.success:hover {
    color: #147457;
    border-color: #bde2d5;
    background: #ecf8f4;
}

@media (max-width: 767.98px) {
    .bm-dt-head,
    .bm-dt-footer {
        align-items: stretch;
        flex-direction: column;
    }
    .bm-dt-length,
    .bm-dt-search,
    .bm-dt-info,
    .bm-dt-pagination {
        width: 100%;
    }
    .bm-datatable-card .dataTables_length,
    .bm-datatable-card .dataTables_filter,
    .bm-datatable-card .dataTables_info,
    .bm-datatable-card .dataTables_paginate {
        width: 100%;
    }
    .bm-datatable-card .dataTables_filter label {
        width: 100%;
    }
    .bm-datatable-card .dataTables_filter input {
        width: 100% !important;
    }
    .bm-datatable-card .dataTables_paginate .pagination {
        justify-content: flex-end;
        flex-wrap: wrap;
    }
    .bm-filter-actions {
        justify-content: stretch;
    }
    .bm-filter-actions .btn {
        flex: 1;
    }
}

/* --------------------------------------------------------------------------
   Sticky Create / Edit Form Actions
   Keeps Save / Update / Cancel visible while a long form is being scrolled,
   then returns the bar to its original position when that position is reached.
   -------------------------------------------------------------------------- */
.bm-sticky-form-actions {
    z-index: 80;
}

.bm-sticky-form-actions-spacer {
    display: block;
    width: 100%;
    height: 0;
    pointer-events: none;
}

.bm-sticky-form-actions.is-floating {
    position: fixed !important;
    right: auto !important;
    margin: 0 !important;
    min-height: 66px;
    padding: 12px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    background: rgba(255, 255, 255, .97) !important;
    border: 1px solid var(--bm-border) !important;
    border-bottom: 0 !important;
    border-radius: 12px 12px 0 0 !important;
    box-shadow: 0 -10px 28px rgba(22, 31, 43, .10) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.bm-sticky-form-actions.is-floating .btn {
    flex: 0 0 auto;
}

/* The natural footer should look like the same action surface.
   Keep the buttons padded inside the card so they do not sit flush against
   the card edge before the footer becomes sticky. */
.bm-form-footer.bm-sticky-form-actions:not(.is-floating) {
    min-height: 66px;
    padding: 12px 18px !important;
    margin: 0 !important;
    background: #fff;
    border-top: 1px solid var(--bm-border);
    border-radius: 0 0 var(--bm-radius) var(--bm-radius);
}

@media (max-width: 575.98px) {
    .bm-sticky-form-actions.is-floating {
        min-height: auto;
        padding: 10px 12px !important;
        flex-direction: row !important;
    }

    .bm-sticky-form-actions.is-floating .btn {
        width: auto !important;
        min-width: 0 !important;
        flex: 1 1 0;
    }
}


/* =========================================================
   v14 - Role permission matrix spacing + fixed permission order
   ========================================================= */

.bm-permission-table {
    min-width: 980px;
    table-layout: fixed;
}

.bm-permission-table thead th {
    padding: 12px 18px;
}

.bm-permission-table tbody td {
    padding: 15px 18px;
    vertical-align: middle;
}

.bm-permission-table tbody tr {
    min-height: 56px;
}

.bm-permission-module-col {
    width: 25%;
    min-width: 220px;
}

.bm-permission-module-cell {
    width: 25%;
}

.bm-permission-module-name {
    display: inline-block;
    line-height: 1.35;
    font-size: 12px;
    font-weight: 700;
}

.bm-permission-options {
    width: 100%;
}

/*
 * Normal module rows always align in this visual sequence:
 * Select All | List | Create | Edit | Delete | optional extra
 */
.bm-crud-permission-options {
    display: grid;
    grid-template-columns:
        minmax(105px, 1.05fr)
        minmax(90px, .85fr)
        minmax(100px, .9fr)
        minmax(90px, .85fr)
        minmax(100px, .9fr)
        minmax(105px, 1fr);
    align-items: center;
    gap: 12px 24px;
}

.bm-module-select-all,
.bm-permission-option {
    min-width: 0;
}

.bm-module-select-all,
.bm-permission-option,
.bm-module-select-all .form-check-label,
.bm-permission-option .form-check-label {
    display: inline-flex;
    align-items: center;
}

.bm-module-select-all .form-check-label,
.bm-permission-option .form-check-label {
    min-height: 20px;
    line-height: 1.35;
}

.bm-module-select-all {
    min-width: 0;
    font-weight: 650;
}

/* Workflow permissions are deliberately laid out as ordered process steps. */
.bm-workflow-permission-row td {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    background: #fffdfd;
}

.bm-workflow-permission-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(190px, 1fr));
    align-items: stretch;
    gap: 12px 18px;
}

.bm-workflow-select-all {
    grid-column: 1 / -1;
    min-height: 34px;
    padding-bottom: 10px;
    margin-bottom: 2px;
    border-bottom: 1px dashed #e4e8ed;
}

.bm-workflow-permission-option {
    min-height: 42px;
    padding: 9px 11px;
    border: 1px solid #edf0f3;
    border-radius: 8px;
    background: #fafbfc;
}

.bm-workflow-permission-option:hover {
    border-color: rgba(239, 70, 56, .28);
    background: #fff7f6;
}

.bm-workflow-permission-option .form-check-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: normal;
}

.bm-workflow-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    border-radius: 7px;
    background: rgba(239, 70, 56, .10);
    color: var(--bm-red);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .2px;
}

.bm-workflow-label {
    color: #344252;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.35;
}

/* Give the checkbox itself some breathing room from the label. */
.bm-permission-table .form-check-input,
.bm-permission-check-all .form-check-input {
    flex: 0 0 14px;
    margin-right: 7px;
}

/* Bootstrap already adds label spacing in some builds; neutralize duplicates. */
.bm-permission-table .form-check .form-check-input {
    float: none;
    margin-left: 0;
}

@media (max-width: 1199.98px) {
    .bm-crud-permission-options {
        grid-template-columns: repeat(3, minmax(120px, 1fr));
    }

    .bm-workflow-permission-options {
        grid-template-columns: repeat(2, minmax(200px, 1fr));
    }
}

@media (max-width: 767.98px) {
    .bm-permission-table {
        min-width: 760px;
    }

    .bm-crud-permission-options {
        grid-template-columns: repeat(2, minmax(125px, 1fr));
        gap: 10px 16px;
    }

    .bm-workflow-permission-options {
        grid-template-columns: 1fr;
    }
}


/* --------------------------------------------------------------------------
   v15 - Desktop Collapsible / Hover Expand Sidebar
   -------------------------------------------------------------------------- */
:root {
    --bm-sidebar-mini: 76px;
}

.bm-sidebar,
.bm-main {
    transition: width .22s ease, margin-left .22s ease, transform .22s ease;
}

.bm-sidebar {
    overflow-x: hidden;
}

.bm-brand-copy,
.bm-nav-link span,
.bm-nav-title,
.bm-sidebar-foot {
    transition: opacity .16s ease, visibility .16s ease, max-width .22s ease, max-height .22s ease, padding .22s ease;
}

.bm-nav-link i {
    flex: 0 0 20px;
}

/* Sidebar toggle is visible on desktop as well as mobile. */
.bm-menu-btn {
    display: inline-grid;
    place-items: center;
    color: #4d5865;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.bm-menu-btn:hover {
    background: #fff0ef;
    color: var(--bm-red);
}

.bm-menu-btn:active {
    transform: scale(.96);
}

@media (min-width: 992px) {
    body.bm-sidebar-collapsed .bm-sidebar {
        width: var(--bm-sidebar-mini);
    }

    body.bm-sidebar-collapsed .bm-main {
        margin-left: var(--bm-sidebar-mini);
    }

    /* Mini state: icons only. */
    body.bm-sidebar-collapsed .bm-brand {
        justify-content: center;
        gap: 0;
        padding-left: 0;
        padding-right: 0;
    }

    body.bm-sidebar-collapsed .bm-brand-copy {
        opacity: 0;
        visibility: hidden;
        max-width: 0;
        overflow: hidden;
        white-space: nowrap;
    }

    body.bm-sidebar-collapsed .bm-nav {
        padding-left: 12px;
        padding-right: 12px;
    }

    body.bm-sidebar-collapsed .bm-nav-title {
        opacity: 0;
        visibility: hidden;
        max-height: 0;
        overflow: hidden;
        padding-top: 0;
        padding-bottom: 0;
    }

    body.bm-sidebar-collapsed .bm-nav-link {
        justify-content: center;
        gap: 0;
        min-height: 44px;
        padding-left: 0;
        padding-right: 0;
    }

    body.bm-sidebar-collapsed .bm-nav-link span {
        opacity: 0;
        visibility: hidden;
        max-width: 0;
        overflow: hidden;
        white-space: nowrap;
    }

    body.bm-sidebar-collapsed .bm-sidebar-foot {
        opacity: 0;
        visibility: hidden;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-top-color: transparent;
        overflow: hidden;
    }

    /* Collapsed sidebar stays collapsed on hover.
       Menu labels never expand; hover only shows the custom tooltip. */
    body.bm-sidebar-collapsed .bm-sidebar:hover {
        width: var(--bm-sidebar-mini);
        box-shadow: none;
    }

    body.bm-sidebar-collapsed .bm-sidebar:hover .bm-brand {
        justify-content: center;
        gap: 0;
        padding-left: 0;
        padding-right: 0;
    }

    body.bm-sidebar-collapsed .bm-sidebar:hover .bm-brand-copy,
    body.bm-sidebar-collapsed .bm-sidebar:hover .bm-nav-title,
    body.bm-sidebar-collapsed .bm-sidebar:hover .bm-nav-link span,
    body.bm-sidebar-collapsed .bm-sidebar:hover .bm-sidebar-foot {
        opacity: 0;
        visibility: hidden;
    }

    body.bm-sidebar-collapsed .bm-sidebar:hover .bm-nav {
        padding-left: 12px;
        padding-right: 12px;
    }

    body.bm-sidebar-collapsed .bm-sidebar:hover .bm-nav-link {
        justify-content: center;
        gap: 0;
        padding-left: 0;
        padding-right: 0;
    }

    body.bm-sidebar-collapsed .bm-sidebar:hover ~ .bm-main {
        margin-left: var(--bm-sidebar-mini);
    }

}

@media (max-width: 991.98px) {
    /* Desktop collapsed preference must not interfere with mobile drawer behavior. */
    body.bm-sidebar-collapsed .bm-sidebar {
        width: var(--bm-sidebar);
    }

    body.bm-sidebar-collapsed .bm-main {
        margin-left: 0;
    }

    .bm-menu-btn {
        display: inline-grid;
    }
}

/* --------------------------------------------------------------------------
   v26 - Collapsed sidebar custom tooltip
   Native browser tooltip removed. Only this custom white tooltip is shown.
   -------------------------------------------------------------------------- */
.bm-sidebar-tooltip {
    position: fixed;
    z-index: 9999;
    display: none;
    align-items: center;
    min-height: 38px;
    max-width: 260px;
    padding: 9px 13px 9px 15px;
    border: 1px solid #e5e7eb;
    border-left: 3px solid #ef493c;
    border-radius: 9px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.16);
    color: #18202d;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-7px) scale(.985);
    transform-origin: left center;
    transition: opacity .13s ease, transform .13s ease;
}

.bm-sidebar-tooltip::before {
    content: '';
    position: absolute;
    left: -7px;
    top: 50%;
    width: 11px;
    height: 11px;
    background: #ffffff;
    border-left: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    transform: translateY(-50%) rotate(45deg);
}

.bm-sidebar-tooltip::after {
    content: '';
    position: absolute;
    top: 7px;
    bottom: 7px;
    left: 4px;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ff6a5e, #ef493c);
}

.bm-sidebar-tooltip.is-visible {
    display: flex;
    opacity: 1;
    transform: translateX(0) scale(1);
}

@media (max-width: 991.98px) {
    .bm-sidebar-tooltip {
        display: none !important;
    }
}

/* =========================================================
   Select2 - Butterfly Metal searchable dropdown theme
   ========================================================= */
.select2-container {
    max-width: 100%;
    font-size: 13px;
}

.select2-container .select2-selection--single {
    height: 42px;
    min-height: 42px;
    border: 1px solid #dde1e6;
    border-radius: 10px;
    background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    height: 40px;
    line-height: 40px;
    padding-left: 13px;
    padding-right: 36px;
    color: #172033;
}

.select2-container .select2-selection--single .select2-selection__placeholder {
    color: #8c96a8;
}

.select2-container .select2-selection--single .select2-selection__arrow {
    width: 34px;
    height: 40px;
    right: 3px;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #f18a86;
    box-shadow: 0 0 0 .2rem rgba(239,49,44,.09);
}

.select2-container--default.select2-container--disabled .select2-selection--single {
    background: #eef1f4;
    border-color: #e2e5e9;
    cursor: not-allowed;
}

.select2-container--default.select2-container--disabled .select2-selection__rendered {
    color: #7e8795;
}

.select2-dropdown {
    z-index: 1090;
    overflow: hidden;
    border: 1px solid #dde1e6;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(18, 25, 38, .12);
}

.select2-container--open .select2-dropdown--below {
    margin-top: 4px;
    border-top: 1px solid #dde1e6;
    border-radius: 10px;
}

.select2-container--open .select2-dropdown--above {
    margin-top: -4px;
    border-bottom: 1px solid #dde1e6;
    border-radius: 10px;
}

.select2-search--dropdown {
    padding: 8px;
}

.select2-search--dropdown .select2-search__field {
    min-height: 38px;
    padding: 7px 10px;
    border: 1px solid #dde1e6 !important;
    border-radius: 8px;
    outline: none;
    font-size: 13px;
}

.select2-search--dropdown .select2-search__field:focus {
    border-color: #f18a86 !important;
    box-shadow: 0 0 0 .18rem rgba(239,49,44,.08);
}

.select2-results__options {
    max-height: 260px !important;
    padding: 4px;
}

.select2-results__option {
    margin: 2px 0;
    padding: 8px 10px;
    border-radius: 7px;
    color: #263044;
    font-size: 13px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: #ef493c;
    color: #fff;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background: #fff1ef;
    color: #d9362d;
}

.select2-container--default .select2-results__option[aria-disabled=true] {
    color: #a6aebb;
    background: transparent;
}

.bm-item-editor-table .select2-container {
    min-width: 100%;
}

.bm-filter-panel .select2-container,
.bm-filter .select2-container {
    min-width: 160px;
}

/* =========================================================
   v27 - Select2 multi-select for Product Sizes / Finishes
   ========================================================= */
.select2-container .select2-selection--multiple {
    min-height: 42px;
    padding: 4px 8px;
    border: 1px solid #dde1e6;
    border-radius: 10px;
    background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: #f18a86;
    box-shadow: 0 0 0 .2rem rgba(239,49,44,.09);
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 0;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 5px 9px;
    border: 1px solid #ffd0cc;
    border-radius: 7px;
    background: #fff2f0;
    color: #b82f27;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    margin-right: 3px;
    border: 0;
    color: #ef493c;
    font-weight: 800;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #9f211b;
}

.select2-container--default .select2-search--inline .select2-search__field {
    min-width: 120px;
    height: 30px;
    margin: 0;
    padding: 4px 2px;
    border: 0 !important;
    box-shadow: none !important;
    color: #172033;
    font-size: 12px;
}

.select2-container--default.select2-container--disabled .select2-selection--multiple {
    background: #eef1f4;
    border-color: #e2e5e9;
}

/* =========================================================
   v28 - Quick Size / Finish creation inside Product form
   ========================================================= */
.bm-master-field-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 24px;
    margin-bottom: 6px;
}

.bm-inline-add-master {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border: 1px solid #ffc7c2;
    border-radius: 7px;
    background: #fff7f6;
    color: #e83f34;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}

.bm-inline-add-master i {
    font-size: 12px;
}

.bm-inline-add-master:hover {
    border-color: #ef493c;
    background: #ef493c;
    color: #fff;
    transform: translateY(-1px);
}

.bm-quick-master-modal {
    max-width: 440px;
}

.bm-modal-eyebrow {
    margin-bottom: 3px;
    color: #ef493c;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.bm-quick-master-hint {
    margin-top: 8px;
    color: #7d8796;
    font-size: 11px;
    line-height: 1.45;
}

.bm-quick-add-status {
    min-height: 0;
    margin-top: 5px;
    color: #13835f;
    font-size: 10px;
    font-weight: 700;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity .15s ease, transform .15s ease;
}

.bm-quick-add-status.show {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 767.98px) {
    .bm-inline-add-master {
        padding: 5px 7px;
    }
}


/* --------------------------------------------------------------------------
   v31 - Global Success / Error Toasts
   -------------------------------------------------------------------------- */
.bm-toast-container {
    position: fixed;
    top: 76px;
    right: 22px;
    z-index: 10050;
    display: flex;
    width: min(390px, calc(100vw - 32px));
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.bm-toast {
    --bm-toast-accent: #ef493c;
    --bm-toast-soft: #fff1ef;
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 32px;
    align-items: start;
    gap: 10px;
    overflow: hidden;
    min-height: 74px;
    padding: 14px 12px 16px 14px;
    border: 1px solid #e9edf2;
    border-left: 4px solid var(--bm-toast-accent);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(16,24,40,.16), 0 3px 10px rgba(16,24,40,.06);
    color: #18202d;
    opacity: 0;
    transform: translate3d(24px, -4px, 0) scale(.985);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: auto;
}

.bm-toast.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.bm-toast.is-leaving {
    opacity: 0;
    transform: translate3d(22px, 0, 0) scale(.985);
}

.bm-toast-success {
    --bm-toast-accent: #16a36a;
    --bm-toast-soft: #eaf9f2;
}

.bm-toast-error {
    --bm-toast-accent: #ef493c;
    --bm-toast-soft: #fff0ee;
}

.bm-toast-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 12px;
    background: var(--bm-toast-soft);
    color: var(--bm-toast-accent);
    font-size: 18px;
}

.bm-toast-body {
    min-width: 0;
    padding-top: 1px;
}

.bm-toast-title {
    margin-bottom: 4px;
    color: #111827;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .01em;
}

.bm-toast-message {
    color: #667085;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.bm-toast-close {
    display: grid;
    width: 30px;
    height: 30px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #98a2b3;
    transition: background .15s ease, color .15s ease;
}

.bm-toast-close:hover {
    background: #f2f4f7;
    color: #344054;
}

.bm-toast-progress {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--bm-toast-accent);
    transform-origin: left center;
    animation-name: bmToastProgress;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    opacity: .8;
}

.bm-toast-progress.is-paused {
    animation-play-state: paused;
}

@keyframes bmToastProgress {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

@media (max-width: 767.98px) {
    .bm-toast-container {
        top: 68px;
        right: 12px;
        left: 12px;
        width: auto;
    }

    .bm-toast {
        grid-template-columns: 38px minmax(0,1fr) 30px;
        padding: 12px 10px 15px 12px;
        border-radius: 12px;
    }
}

/* --------------------------------------------------------------------------
   v40 - Transaction quick-create master buttons
   -------------------------------------------------------------------------- */
.bm-transaction-select-with-add {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
}

.bm-transaction-select-control {
    min-width: 0;
    flex: 1 1 auto;
}

.bm-transaction-select-control .select2-container {
    width: 100% !important;
}

.bm-transaction-inline-plus {
    display: inline-flex;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    border: 1px solid #ffc7c2;
    border-radius: 8px;
    background: #fff7f6;
    color: #e83f34;
    line-height: 1;
    transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.bm-transaction-inline-plus i {
    font-size: 13px;
}

.bm-transaction-inline-plus:hover,
.bm-transaction-inline-plus:focus {
    border-color: #ef493c;
    background: #ef493c;
    box-shadow: 0 5px 14px rgba(239, 73, 60, .18);
    color: #fff;
    outline: none;
    transform: translateY(-1px);
}

.bm-quick-master-context {
    margin-bottom: 12px;
    padding: 8px 10px;
    border: 1px solid #edf0f2;
    border-radius: 8px;
    background: #f8fafb;
    color: #5d6877;
    font-size: 11px;
    font-weight: 700;
}

#bmQuickCustomerError:empty,
#bmQuickBrandError:empty,
#bmQuickSizeError:empty,
#bmQuickFinishError:empty {
    display: none !important;
}

@media (max-width: 767.98px) {
    .bm-transaction-inline-plus {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }
}


/* --------------------------------------------------------------------------
   v45 - Select2 positioning + transaction editor responsive fix
   -------------------------------------------------------------------------- */
body > .select2-container.select2-container--open {
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
}

body > .select2-container.select2-container--open .select2-dropdown {
    max-width: calc(100vw - 16px);
}

.select2-dropdown { box-sizing: border-box; }

html, body { max-width: 100%; overflow-x: hidden; }

.bm-shell, .bm-main, .bm-content, .bm-card, .bm-card-header, .bm-card-body { min-width: 0; }

.bm-item-editor-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
}

.bm-item-editor-table { width: 100%; }

.bm-item-editor-table td .select2-container,
.bm-item-editor-table th .select2-container {
    width: 100% !important;
    max-width: 100%;
}

@media (max-width: 767.98px) {
    .bm-item-editor-scroll { max-height: none; overflow: visible; }

    .bm-item-editor-table {
        display: block;
        width: 100%;
        min-width: 0 !important;
        margin: 0;
    }

    .bm-item-editor-table thead { display: none; }

    .bm-item-editor-table tbody {
        display: grid;
        width: 100%;
        gap: 12px;
        padding: 12px;
    }

    .bm-item-editor-table tbody tr {
        display: grid;
        width: 100%;
        min-width: 0;
        gap: 10px;
        padding: 12px;
        border: 1px solid #e7e9ee;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 3px 12px rgba(23, 32, 42, .035);
    }

    .bm-item-editor-table tbody td {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        text-align: left !important;
    }

    .bm-item-editor-table tbody td[data-label]:not([data-label=""])::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 6px;
        color: #4a5565;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .45px;
        text-transform: uppercase;
    }

    .bm-item-editor-table tbody td > .form-control,
    .bm-item-editor-table tbody td > .form-select,
    .bm-item-editor-table tbody td > .select2-container {
        width: 100% !important;
        max-width: 100%;
    }

    .bm-item-editor-table .bm-item-editor-actions {
        display: flex !important;
        justify-content: flex-end;
        padding-top: 2px !important;
    }

    .bm-item-editor-table .bm-item-editor-actions .btn { width: 38px; min-width: 38px; }

    .bm-card-header { flex-wrap: wrap; }
    .bm-card-header > div:first-child { min-width: 0; flex: 1 1 220px; }
    .bm-card-header > .btn { flex: 0 0 auto; }

    .bm-content { width: 100%; padding-left: 12px; padding-right: 12px; }
    .bm-main { width: 100%; max-width: 100%; }
}


/* --------------------------------------------------------------------------
   v46 - Hard mobile viewport containment
   Fixes page-level horizontal overflow from header + transaction form layout.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    html,
    body {
        width: 100%;
        max-width: 100vw;
        overflow-x: clip !important;
    }

    .bm-shell,
    .bm-main,
    .bm-header,
    .bm-content,
    .bm-footer {
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0 !important;
    }

    .bm-main {
        margin-left: 0 !important;
        overflow-x: clip;
    }

    .bm-header {
        gap: 8px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .bm-header > .d-flex:first-child {
        min-width: 0;
        flex: 1 1 auto;
        gap: 8px !important;
        overflow: hidden;
    }

    .bm-menu-btn {
        flex: 0 0 40px;
    }

    .bm-header-title {
        min-width: 0;
        flex: 1 1 auto;
        overflow: hidden;
    }

    .bm-header-title small,
    .bm-header-title strong {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .bm-user {
        min-width: 0;
        flex: 0 0 auto;
        gap: 6px;
    }

    .bm-user-avatar,
    .bm-logout-btn {
        flex: 0 0 auto;
    }

    .bm-content {
        overflow-x: clip;
    }

    .bm-content > *,
    .bm-content > form,
    .bm-content form,
    .bm-role-page-head,
    .bm-role-breadcrumb,
    .bm-card,
    .bm-card-header,
    .bm-card-body,
    .row,
    [class*="col-"] {
        min-width: 0;
        max-width: 100%;
    }

    .bm-role-page-head {
        width: 100%;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .bm-role-breadcrumb {
        flex: 1 1 100%;
        overflow-wrap: anywhere;
    }

    .bm-page-head-actions {
        max-width: 100%;
    }

    .bm-card-header > div:first-child,
    .bm-card-header small {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .bm-item-editor-card,
    .bm-item-editor-scroll,
    .bm-item-editor-table,
    .bm-item-editor-table tbody,
    .bm-item-editor-table tbody tr {
        max-width: 100% !important;
    }

    .bm-sticky-form-actions.is-floating {
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: none !important;
    }
}

@media (max-width: 575.98px) {
    .bm-header {
        padding-left: 10px;
        padding-right: 10px;
    }

    .bm-header > .d-flex:first-child {
        gap: 7px !important;
    }

    .bm-menu-btn {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .bm-header-title small {
        font-size: 9px;
        letter-spacing: .55px;
    }

    .bm-header-title strong {
        font-size: 14px;
    }

    .bm-user-avatar,
    .bm-logout-btn {
        width: 34px;
        height: 34px;
    }

    .bm-content {
        padding: 14px 10px !important;
    }

    .bm-footer {
        padding-left: 12px;
        padding-right: 12px;
    }

    .bm-role-page-head {
        gap: 10px;
        margin-bottom: 14px;
    }

    .bm-role-breadcrumb {
        gap: 6px;
        font-size: 11px;
    }

    .bm-role-breadcrumb-title {
        font-size: 14px;
    }

    .bm-card {
        border-radius: 13px;
    }

    .bm-card-header {
        padding: 14px 12px;
    }

    .bm-card-body {
        padding: 14px 12px;
    }

    .bm-item-editor-card .bm-card-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        gap: 10px;
    }

    .bm-item-editor-card .bm-card-header > .btn {
        width: 100%;
    }

    .bm-item-editor-table tbody {
        padding: 10px;
    }

    .bm-item-editor-table tbody tr {
        padding: 10px;
    }

    .bm-sticky-form-actions.is-floating {
        left: 10px !important;
        right: 10px !important;
    }
}

/* --------------------------------------------------------------------------
   v50 - Responsive modal polish
   Applies to workflow + quick-master modals without changing any workflow.
   -------------------------------------------------------------------------- */
.bm-modal-content {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.bm-modal-content .modal-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px 16px;
}

.bm-modal-content .modal-header > div:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.bm-modal-content .modal-header .modal-title,
.bm-modal-content .modal-header .text-muted {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.bm-modal-content .modal-header .btn-close {
    flex: 0 0 auto;
    margin: 0;
}

.bm-modal-content .modal-body {
    min-width: 0;
    padding: 18px 20px;
}

.bm-modal-content .modal-body .form-control,
.bm-modal-content .modal-body .form-select,
.bm-modal-content .modal-body .select2-container {
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
}

.bm-modal-content .modal-body textarea.form-control {
    min-height: 96px;
    resize: vertical;
}

.bm-modal-content .modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 20px 18px;
}

.bm-modal-content .modal-footer > * {
    margin: 0 !important;
}

.bm-modal-content .modal-footer .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    line-height: 1.25;
    text-align: center;
}

#workflowActionModal .modal-dialog {
    max-width: 520px;
}

#workflowActionModal .modal-footer .btn-bm {
    min-width: 220px;
    max-width: 100%;
    white-space: normal;
}

#workflowActionModal .modal-footer .btn-soft {
    min-width: 86px;
}

/* Bootstrap modal is 1055; Select2 inside a modal must sit above modal content. */
.modal .select2-container,
.modal .select2-container--open,
.modal .select2-dropdown {
    z-index: 1075 !important;
}

.modal .select2-dropdown {
    max-width: 100%;
}

@media (max-width: 575.98px) {
    .modal-dialog,
    .modal-dialog-centered,
    .bm-quick-master-modal,
    #workflowActionModal .modal-dialog {
        width: calc(100% - 20px);
        max-width: calc(100% - 20px);
        margin: 10px auto;
    }

    .modal-dialog-centered {
        min-height: calc(100% - 20px);
    }

    .bm-modal-content {
        border-radius: 14px;
    }

    .bm-modal-content .modal-header {
        gap: 10px;
        padding: 16px 16px 14px;
    }

    .bm-modal-content .modal-title {
        font-size: 16px;
        line-height: 1.3;
    }

    .bm-modal-content .modal-header small,
    .bm-modal-content .modal-header .text-muted {
        display: block;
        margin-top: 3px;
        font-size: 11px;
        line-height: 1.45;
    }

    .bm-modal-content .modal-body {
        padding: 16px;
    }

    .bm-modal-content .modal-body .mb-3 {
        margin-bottom: 14px !important;
    }

    .bm-modal-content .modal-footer {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding: 12px 16px 16px;
    }

    .bm-modal-content .modal-footer .btn {
        width: 100%;
        max-width: 100%;
        min-width: 0 !important;
        min-height: 44px;
        padding: 10px 14px;
        font-size: 13.5px;
        line-height: 1.25;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* Primary action first on phones; Cancel remains clearly separated below. */
    .bm-modal-content .modal-footer .btn-bm {
        order: 1;
    }

    .bm-modal-content .modal-footer .btn-soft {
        order: 2;
    }

    #workflowActionModal .modal-footer .btn-bm,
    #workflowActionModal .modal-footer .btn-soft {
        min-width: 0;
    }

    .modal .select2-container,
    .modal .select2-selection--single,
    .modal .select2-selection--multiple {
        max-width: 100% !important;
    }

    .modal .select2-results__options {
        max-height: min(240px, 36vh);
    }
}

@media (max-width: 359.98px) {
    .modal-dialog,
    .modal-dialog-centered,
    .bm-quick-master-modal,
    #workflowActionModal .modal-dialog {
        width: calc(100% - 16px);
        max-width: calc(100% - 16px);
        margin: 8px auto;
    }

    .modal-dialog-centered {
        min-height: calc(100% - 16px);
    }

    .bm-modal-content .modal-header {
        padding: 14px 14px 12px;
    }

    .bm-modal-content .modal-title {
        font-size: 15px;
    }

    .bm-modal-content .modal-body {
        padding: 14px;
    }

    .bm-modal-content .modal-footer {
        padding: 10px 14px 14px;
    }

    .bm-modal-content .modal-footer .btn {
        min-height: 42px;
        font-size: 13px;
    }
}

@media (max-height: 620px) {
    .modal-dialog-centered {
        align-items: flex-start;
        min-height: calc(100% - 20px);
    }

    .modal-dialog {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .bm-modal-content {
        max-height: calc(100vh - 20px);
    }

    .bm-modal-content .modal-body {
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* v50.1 - keep long modal forms inside the phone viewport at every height. */
@media (max-width: 575.98px) {
    .bm-modal-content {
        display: flex;
        flex-direction: column;
        max-height: calc(100dvh - 20px);
    }

    .bm-modal-content > form {
        display: flex;
        min-height: 0;
        max-height: inherit;
        flex: 1 1 auto;
        flex-direction: column;
    }

    .bm-modal-content .modal-header,
    .bm-modal-content .modal-footer {
        flex: 0 0 auto;
    }

    .bm-modal-content .modal-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 359.98px) {
    .bm-modal-content {
        max-height: calc(100dvh - 16px);
    }
}


/* --------------------------------------------------------------------------
   v55 - Select2 dropdown visibility inside Bootstrap modals
   -------------------------------------------------------------------------- */

/*
 * The Select2 dropdown is appended to the Bootstrap .modal root (see
 * butterfly-select2.js), so it is not clipped by .bm-modal-content's
 * overflow:hidden rounded-corner containment.
 */
.modal > .select2-container.select2-container--open {
    z-index: 2000 !important;
    pointer-events: auto;
}

.modal > .select2-container.select2-container--open .select2-dropdown {
    z-index: 2001 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto;
}

.modal > .select2-container.select2-container--open .select2-results,
.modal > .select2-container.select2-container--open .select2-results__options,
.modal > .select2-container.select2-container--open .select2-results__option {
    visibility: visible !important;
}

/* Workflow decision has only a tiny option list; keep it compact and visible. */
#workflowActionModal .select2-results__options {
    max-height: 180px !important;
    overflow-y: auto !important;
}

@media (max-width: 575.98px), (max-height: 620px) {
    #workflowActionModal > .select2-container.select2-container--open .select2-dropdown {
        max-width: calc(100vw - 40px);
    }
}

/* --------------------------------------------------------------------------
   v56 - Keep detached modal Select2 dropdown at the control width
   -------------------------------------------------------------------------- */
#workflowActionModal > .select2-container.select2-container--open .select2-dropdown {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}


/* --------------------------------------------------------------------------
   v61 - Header notification + account dropdowns and My Profile
   -------------------------------------------------------------------------- */
.bm-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.bm-notification,
.bm-account {
    position: relative;
    flex: 0 0 auto;
}

.bm-header-icon-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border: 1px solid var(--bm-border);
    border-radius: 11px;
    background: #fff;
    color: #56616d;
    display: grid;
    place-items: center;
    transition: .18s ease;
}

.bm-header-icon-btn i {
    font-size: 18px;
}

.bm-header-icon-btn:hover,
.bm-notification.is-open .bm-header-icon-btn {
    color: var(--bm-red);
    border-color: #f5beb9;
    background: #fff7f6;
}

.bm-notification-badge {
    position: absolute;
    right: -5px;
    top: -5px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border: 2px solid #fff;
    border-radius: 20px;
    background: var(--bm-red);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    line-height: 1;
    font-weight: 800;
}

.bm-user {
    border: 0;
    background: transparent;
    padding: 4px 6px;
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    transition: .18s ease;
}

.bm-user:hover,
.bm-account.is-open .bm-user,
.bm-account:focus-within .bm-user {
    background: #f7f8fa;
}

.bm-user-chevron {
    color: #8a929c;
    font-size: 15px;
    transition: transform .18s ease;
}

.bm-account.is-open .bm-user-chevron,
.bm-account:hover .bm-user-chevron {
    transform: rotate(180deg);
}

.bm-header-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 9px);
    z-index: 1080;
    background: #fff;
    border: 1px solid var(--bm-border);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(20, 31, 44, .16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.bm-header-dropdown::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    height: 10px;
}

.bm-notification.is-open .bm-header-dropdown,
.bm-account.is-open .bm-header-dropdown,
.bm-account:hover .bm-header-dropdown,
.bm-account:focus-within .bm-header-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.bm-notification-dropdown {
    width: min(390px, calc(100vw - 28px));
    overflow: hidden;
}

.bm-dropdown-head {
    padding: 14px 15px 12px;
    border-bottom: 1px solid #edf0f3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.bm-dropdown-head > div:first-child {
    min-width: 0;
}

.bm-dropdown-head strong {
    display: block;
    font-size: 14px;
}

.bm-dropdown-head span {
    display: block;
    margin-top: 2px;
    color: var(--bm-muted);
    font-size: 10px;
}

.bm-dropdown-link-btn {
    border: 0;
    padding: 4px;
    background: transparent;
    color: var(--bm-red);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.bm-notification-list {
    max-height: min(420px, calc(100vh - 120px));
    overflow-y: auto;
}

.bm-notification-list form {
    margin: 0;
}

.bm-notification-item {
    position: relative;
    width: 100%;
    border: 0;
    border-bottom: 1px solid #f0f2f4;
    background: #fff;
    padding: 13px 15px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: inherit;
    text-align: left;
    transition: .15s ease;
}

.bm-notification-item:hover {
    background: #fafbfc;
}

.bm-notification-item.is-unread {
    background: #fff9f8;
}

.bm-notification-item.is-unread:hover {
    background: #fff4f2;
}

.bm-notification-dot {
    width: 7px;
    height: 7px;
    margin-top: 6px;
    border-radius: 50%;
    background: #c8ced5;
    flex: 0 0 7px;
}

.bm-notification-item.is-unread .bm-notification-dot {
    background: var(--bm-red);
    box-shadow: 0 0 0 3px rgba(239, 49, 44, .08);
}

.bm-notification-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.bm-notification-copy strong,
.bm-notification-copy span,
.bm-notification-copy small {
    display: block;
}

.bm-notification-copy strong {
    font-size: 12px;
    margin-bottom: 3px;
}

.bm-notification-copy span {
    color: #68727d;
    font-size: 11px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.bm-notification-copy small {
    color: #9aa1aa;
    font-size: 9px;
    margin-top: 5px;
}

.bm-notification-empty {
    padding: 30px 20px;
    text-align: center;
    color: #8c959f;
}

.bm-notification-empty i {
    display: block;
    margin-bottom: 8px;
    font-size: 22px;
}

.bm-notification-empty strong,
.bm-notification-empty span {
    display: block;
}

.bm-notification-empty strong {
    color: #4e5965;
    font-size: 12px;
}

.bm-notification-empty span {
    margin-top: 3px;
    font-size: 10px;
}

.bm-account-dropdown {
    width: 265px;
    padding: 8px;
}

.bm-account-dropdown-head {
    padding: 9px 8px 12px;
    border-bottom: 1px solid #edf0f3;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

.bm-account-dropdown-head > div:last-child {
    min-width: 0;
}

.bm-account-dropdown-head strong,
.bm-account-dropdown-head span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bm-account-dropdown-head strong {
    font-size: 12px;
}

.bm-account-dropdown-head span {
    margin-top: 2px;
    color: var(--bm-muted);
    font-size: 10px;
}

.bm-account-menu-item {
    width: 100%;
    border: 0;
    border-radius: 10px;
    padding: 10px 9px;
    background: transparent;
    color: #47515d;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    text-decoration: none;
    transition: .15s ease;
}

.bm-account-menu-item:hover {
    color: #202832;
    background: #f6f8fa;
}

.bm-account-menu-item > i {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #f0f3f6;
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    font-size: 14px;
}

.bm-account-menu-item > span {
    min-width: 0;
}

.bm-account-menu-item strong,
.bm-account-menu-item small {
    display: block;
}

.bm-account-menu-item strong {
    font-size: 11px;
}

.bm-account-menu-item small {
    color: #929aa4;
    font-size: 9px;
    margin-top: 1px;
}

.bm-account-menu-item.is-danger {
    color: #cf342e;
}

.bm-account-menu-item.is-danger:hover {
    background: #fff3f2;
}

.bm-account-menu-item.is-danger > i {
    background: #fff0ef;
}

.bm-profile-summary {
    text-align: center;
    padding: 30px 24px;
}

.bm-profile-avatar {
    width: 78px;
    height: 78px;
    margin: 0 auto 14px;
    border-radius: 24px;
    background: var(--bm-teal-soft);
    color: var(--bm-teal);
    display: grid;
    place-items: center;
    font-size: 27px;
    font-weight: 800;
}

.bm-profile-summary h4 {
    margin: 0;
    font-size: 19px;
}

.bm-profile-summary > p {
    margin: 4px 0 22px;
    color: var(--bm-muted);
    font-size: 11px;
    overflow-wrap: anywhere;
}

.bm-profile-facts {
    border-top: 1px solid #edf0f3;
    text-align: left;
}

.bm-profile-facts > div {
    padding: 12px 2px;
    border-bottom: 1px solid #edf0f3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.bm-profile-facts span {
    color: var(--bm-muted);
    font-size: 10px;
}

.bm-profile-facts strong {
    max-width: 58%;
    font-size: 11px;
    text-align: right;
    overflow-wrap: anywhere;
}

.bm-profile-password-section {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid #edf0f3;
}

@media (max-width: 767.98px) {
    .bm-header-actions {
        gap: 6px;
    }

    .bm-header-icon-btn {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    .bm-user {
        gap: 5px;
        padding: 2px 3px;
    }

    .bm-user-chevron {
        display: none;
    }

    .bm-notification-dropdown {
        position: fixed;
        top: calc(var(--bm-header) - 2px);
        right: 10px;
        width: min(390px, calc(100vw - 20px));
    }

    .bm-account-dropdown {
        right: 0;
    }
}

@media (max-width: 575.98px) {
    .bm-header-actions {
        gap: 4px;
    }

    .bm-header-icon-btn,
    .bm-user-avatar {
        width: 34px;
        height: 34px;
    }

    .bm-notification-badge {
        right: -4px;
        top: -4px;
    }

    .bm-account-dropdown {
        position: fixed;
        top: calc(var(--bm-header) - 2px);
        right: 10px;
        width: min(265px, calc(100vw - 20px));
    }
}