/* ==========================================================================
   BMEC brand theme
   Colours sampled from the B-MEC logo: teal #00A8C0, charcoal #575656.
   White text on #00A8C0 is below WCAG AA, so interactive fills/links use the
   deeper teal (#007F92, 4.7:1 on white) and the logo teal is used for accents.
   Loaded after core.css + custom.css; overrides variables, never template files.
   ========================================================================== */

:root {
    --bmec-teal: #00a8c0;          /* logo teal – accents, active bars, charts   */
    --bmec-teal-700: #007f92;      /* primary buttons, links (AA on white)       */
    --bmec-teal-800: #006a7a;      /* hover / pressed                            */
    --bmec-teal-50: #e8f7fa;       /* tinted backgrounds, active menu item       */
    --bmec-teal-100: #cdeef4;
    --bmec-charcoal: #575656;      /* logo grey – body/menu text                 */
    --bmec-ink: #2f3437;           /* headings                                   */
    --bmec-muted: #7b8186;
    --bmec-border: #e6e9ec;
    --bmec-surface: #ffffff;
    --bmec-page: #f5f7f9;

    --bmec-success: #2e9e6a;
    --bmec-warning: #e8a33d;
    --bmec-danger: #d9534f;
    --bmec-info: #00a8c0;

    --bmec-radius: 10px;
    --bmec-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .08);

    /* Bootstrap / Sneat variables */
    --bs-primary: #007f92;
    --bs-primary-rgb: 0, 127, 146;
    --bs-primary-bg-subtle: #e8f7fa;
    --bs-primary-border-subtle: #cdeef4;
    --bs-primary-text-emphasis: #006a7a;
    --bs-link-color: #007f92;
    --bs-link-color-rgb: 0, 127, 146;
    --bs-link-hover-color: #006a7a;
    --bs-link-hover-color-rgb: 0, 106, 122;
    --bs-info: #00a8c0;
    --bs-info-rgb: 0, 168, 192;
    --bs-body-color: #4a4f54;
    --bs-heading-color: #2f3437;
    --bs-body-bg: #f5f7f9;
    --bs-border-color: #e6e9ec;
    --bs-focus-ring-color: rgba(0, 168, 192, .25);
}

body { background-color: var(--bmec-page); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn-primary {
    --bs-btn-bg: var(--bmec-teal-700);
    --bs-btn-border-color: var(--bmec-teal-700);
    --bs-btn-hover-bg: var(--bmec-teal-800);
    --bs-btn-hover-border-color: var(--bmec-teal-800);
    --bs-btn-active-bg: var(--bmec-teal-800);
    --bs-btn-active-border-color: var(--bmec-teal-800);
    --bs-btn-disabled-bg: var(--bmec-teal-700);
    --bs-btn-disabled-border-color: var(--bmec-teal-700);
    --bs-btn-focus-shadow-rgb: 0, 168, 192;
    box-shadow: 0 2px 4px rgba(0, 127, 146, .25);
}
.btn-outline-primary {
    --bs-btn-color: var(--bmec-teal-700);
    --bs-btn-border-color: var(--bmec-teal-700);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bmec-teal-700);
    --bs-btn-hover-border-color: var(--bmec-teal-700);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bmec-teal-800);
    --bs-btn-active-border-color: var(--bmec-teal-800);
    --bs-btn-disabled-color: var(--bmec-teal-700);
    --bs-btn-disabled-border-color: var(--bmec-teal-700);
    --bs-btn-focus-shadow-rgb: 0, 168, 192;
}
.btn-label-primary, .bg-label-primary {
    background-color: var(--bmec-teal-50) !important;
    color: var(--bmec-teal-800) !important;
}
.btn-label-primary:hover { background-color: var(--bmec-teal-100) !important; }

/* ── Utilities that templates hardcode ──────────────────────────────────── */
/* Respect Bootstrap's bg-opacity-* helpers (e.g. "bg-primary bg-opacity-10" icon chips). */
.bg-primary { --bs-bg-opacity: 1; background-color: rgba(0, 127, 146, var(--bs-bg-opacity)) !important; }
.bg-opacity-10 { --bs-bg-opacity: .1; }
.bg-opacity-25 { --bs-bg-opacity: .25; }
.bg-opacity-50 { --bs-bg-opacity: .5; }
.bg-opacity-75 { --bs-bg-opacity: .75; }
.text-primary { color: var(--bmec-teal-700) !important; }
.border-primary { border-color: var(--bmec-teal-700) !important; }
.badge.bg-primary { background-color: var(--bmec-teal-700) !important; }
.bg-info { --bs-bg-opacity: 1; background-color: rgba(0, 168, 192, var(--bs-bg-opacity)) !important; }
.text-info { color: #00869a !important; }
.progress-bar { --bs-progress-bar-bg: var(--bmec-teal); background-color: var(--bmec-teal); }
a { color: var(--bs-link-color); }

.form-control:focus, .form-select:focus {
    border-color: var(--bmec-teal);
    box-shadow: 0 0 0 .2rem rgba(0, 168, 192, .15);
}
.form-check-input:checked {
    background-color: var(--bmec-teal-700);
    border-color: var(--bmec-teal-700);
}
.form-check-input:focus { border-color: var(--bmec-teal); box-shadow: 0 0 0 .2rem rgba(0, 168, 192, .15); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--bmec-teal-700); }
.nav-tabs .nav-link.active { color: var(--bmec-teal-700); border-bottom-color: var(--bmec-teal); }
.page-item.active .page-link, .pagination .active > .page-link {
    background-color: var(--bmec-teal-700);
    border-color: var(--bmec-teal-700);
}
.dropdown-item.active, .dropdown-item:active { background-color: var(--bmec-teal-700); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--bmec-teal-700); }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card {
    border: 1px solid var(--bmec-border);
    border-radius: var(--bmec-radius);
    box-shadow: var(--bmec-shadow);
}

/* ==========================================================================
   Sidebar
   ========================================================================== */
#layout-menu.layout-menu {
    background: var(--bmec-surface) !important;
    border-right: 1px solid var(--bmec-border);
    box-shadow: none;
    color: var(--bmec-charcoal);
}
#layout-menu .app-brand {
    height: 64px;
    padding: 0 1rem 0 1.25rem;
    border-bottom: 1px solid var(--bmec-border);
    display: flex;
    align-items: center;
}
#layout-menu .app-brand-logo img.bm-logo-full { width: 150px; height: auto; display: block; }
#layout-menu .app-brand-logo img.bm-logo-mark { display: none; width: 34px; height: 34px; object-fit: contain; }

/* Desktop collapse toggle (lives in the brand bar) */
.bm-menu-toggle {
    margin-left: auto;
    width: 30px; height: 30px;
    border-radius: 8px;
    border: 1px solid var(--bmec-border);
    background: #fff;
    color: var(--bmec-charcoal);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .15s, color .15s, transform .2s;
}
.bm-menu-toggle:hover { background: var(--bmec-teal-50); color: var(--bmec-teal-700); }
.bm-menu-toggle i { font-size: 1.15rem; transition: transform .2s; }

#layout-menu .custom-search-input {
    border-radius: 8px;
    background: var(--bmec-page);
    border-color: transparent;
    font-size: .85rem;
}
#layout-menu .custom-search-input:focus { background: #fff; border-color: var(--bmec-teal); }

#layout-menu .menu-inner { padding: .25rem 0 1rem; }
#layout-menu .menu-inner > hr.dropdown-divider { display: none; }

/* Group headers (clickable accordion) */
#layout-menu .menu-header.bm-group-header {
    margin: .6rem .75rem .15rem;
    padding: .45rem .5rem;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    display: flex; flex-direction: row; align-items: center;
    align-self: stretch;
    width: auto;
    color: var(--bmec-muted);
    font-size: .7rem;
    letter-spacing: .06em;
}
#layout-menu .menu-header.bm-group-header:hover { background: var(--bmec-page); color: var(--bmec-ink); }
#layout-menu .menu-header.bm-group-header::before { display: none; }
#layout-menu .menu-header .menu-header-text { flex: 1; color: inherit; }
#layout-menu .menu-header .bm-group-chevron { font-size: 1rem; transition: transform .2s; }
#layout-menu .menu-header.bm-group-closed .bm-group-chevron { transform: rotate(-90deg); }
#layout-menu .menu-header.bm-group-active { color: var(--bmec-teal-700); }
#layout-menu .menu-item.bm-group-hidden { display: none; }

/* Items */
#layout-menu .menu-inner > .menu-item { margin: 1px .75rem; }
#layout-menu .menu-link {
    color: var(--bmec-charcoal);
    border-radius: 8px;
    padding: .5rem .75rem;
    font-size: .875rem;
    font-weight: 500;
    position: relative;
}
#layout-menu .menu-link .menu-icon { color: #8a9095; font-size: 1.15rem; margin-right: .65rem; }
#layout-menu .menu-link:hover { background: var(--bmec-page); color: var(--bmec-ink); }
#layout-menu .menu-link:hover .menu-icon { color: var(--bmec-teal-700); }

#layout-menu .menu-inner > .menu-item.active > .menu-link,
#layout-menu .menu-inner > .menu-item.open > .menu-link {
    background: var(--bmec-teal-50);
    color: var(--bmec-teal-800);
}
#layout-menu .menu-inner > .menu-item.active > .menu-link .menu-icon,
#layout-menu .menu-inner > .menu-item.open > .menu-link .menu-icon { color: var(--bmec-teal-700); }
#layout-menu .menu-inner > .menu-item.active > .menu-link { font-weight: 600; }
/* Template draws a 4px bar on the right edge of the active item – the tint replaces it. */
#layout-menu .menu-inner > .menu-item::before,
#layout-menu .menu-inner > .menu-item.active::before { display: none !important; content: none !important; }
#layout-menu .menu-toggle-icon { margin-left: auto; font-size: 1rem; color: #9aa0a5; transition: transform .2s; }
#layout-menu .menu-item.open > .menu-link .menu-toggle-icon { transform: rotate(180deg); }
#layout-menu .menu-toggle::after { display: none; } /* template chevron – we render our own */

/* Sub items */
#layout-menu .menu-sub { padding: .15rem 0 .3rem; }
#layout-menu .menu-sub .menu-link {
    padding: .4rem .75rem .4rem 2.6rem;
    font-weight: 400;
    font-size: .84rem;
}
#layout-menu .menu-sub .menu-link::before {
    content: '';
    position: absolute; left: 1.35rem; top: 50%;
    width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%;
    background: #c3c8cc;
}
#layout-menu .menu-sub .menu-item.active > .menu-link { color: var(--bmec-teal-800); font-weight: 600; background: transparent; }
#layout-menu .menu-sub .menu-item.active > .menu-link::before { background: var(--bmec-teal); box-shadow: 0 0 0 3px var(--bmec-teal-100); }

/* Attendance widget: brand gradient instead of purple */
#layout-menu .bm-attendance .amc-card,
#layout-menu .bm-attendance .amc-wrap {
    background: linear-gradient(135deg, #0b6f80 0%, #00a8c0 100%) !important;
    box-shadow: 0 6px 16px -6px rgba(0, 127, 146, .45);
}

/* Search highlight */
#layout-menu .menu-item.bm-search-hidden, #layout-menu .menu-header.bm-search-hidden { display: none !important; }

/* ── Collapsed icon rail (desktop) ──────────────────────────────────────── */
@media (min-width: 1200px) {
    html.layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .app-brand { padding: 0; justify-content: center; }
    html.layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .bm-logo-full { display: none; }
    html.layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .bm-logo-mark { display: block; }
    html.layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .bm-menu-toggle { display: none !important; }
    html.layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .px-2.pt-3,
    html.layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .bm-attendance { display: none; }
    html.layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .menu-header { display: none; }
    html.layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .menu-item.bm-group-hidden { display: block; } /* rail shows every icon */
    html.layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .menu-inner > .menu-item { margin: 2px .6rem; }
    html.layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .menu-link { justify-content: center; padding: .55rem 0; }
    html.layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .menu-link .menu-icon { margin-right: 0; }
    html.layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .menu-link .menu-title,
    html.layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .menu-toggle-icon,
    html.layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .menu-sub { display: none !important; }

    /* Hover-expand floats over the page instead of pushing it */
    html.layout-menu-collapsed.layout-menu-hover #layout-menu { box-shadow: 8px 0 24px rgba(16, 24, 40, .12); }
    html.layout-menu-collapsed .bm-menu-toggle i { transform: rotate(180deg); }
}

/* ── Sidebar motion ─────────────────────────────────────────────────────────
   Hover pill that glides between items, staggered sub-menu reveal with a drawn guide line,
   spring chevrons, animated group open/close, click ripple and label slide-in on rail hover.
   (prefers-reduced-motion is honoured by the global rule further down.) */
:root { --bm-spring: cubic-bezier(.34, 1.56, .64, 1); --bm-out: cubic-bezier(.22, 1, .36, 1); }
#layout-menu .menu-inner { position: relative; }
#layout-menu .menu-inner > .menu-item, #layout-menu .menu-inner > .menu-header { position: relative; z-index: 1; }

/* Gliding hover pill (one element, positioned by sidebar.js) */
#layout-menu .bm-hover-pill {
    position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; list-style: none; margin: 0; padding: 0;
    border-radius: 10px; background: linear-gradient(90deg, rgba(0, 168, 192, .10), rgba(0, 168, 192, .04));
    box-shadow: inset 0 0 0 1px rgba(0, 168, 192, .12);
    opacity: 0; transform: translate3d(0, 0, 0);
    transition: transform .32s var(--bm-out), height .32s var(--bm-out), width .32s var(--bm-out), opacity .2s ease;
}
#layout-menu .bm-hover-pill.on { opacity: 1; }
#layout-menu.bm-has-pill .menu-link:hover { background-color: transparent; }
#layout-menu .menu-link { transition: color .2s ease, background-color .25s ease; overflow: hidden; }
#layout-menu .menu-link .menu-icon { transition: color .2s ease, transform .35s var(--bm-spring); }
#layout-menu .menu-link:hover .menu-icon { transform: translateX(2px) scale(1.08); }

/* Active top-level item: teal bar on the left edge that grows in (drawn as a background so it
   doesn't clash with the template's ::before / ::after on menu links) */
#layout-menu .menu-inner > .menu-item.active > .menu-link,
#layout-menu .menu-inner > .menu-item.open > .menu-link {
    background-image: linear-gradient(180deg, var(--bmec-teal), var(--bmec-teal-700));
    background-repeat: no-repeat; background-position: 0 50%; background-size: 3px 56%;
    animation: bm-bar-grow .5s var(--bm-spring) both;
}
@keyframes bm-bar-grow { from { background-size: 3px 0%; } to { background-size: 3px 56%; } }

/* Chevron: spring rotation */
#layout-menu .menu-toggle-icon { transition: transform .45s var(--bm-spring), color .2s; }
#layout-menu .menu-item.open > .menu-link .menu-toggle-icon { color: var(--bmec-teal-700); }
#layout-menu .menu-header .bm-group-chevron { transition: transform .45s var(--bm-spring); }

/* Parent icon pops when its sub-menu opens */
#layout-menu .menu-item.open > .menu-link .menu-icon { animation: bm-icon-pop .5s var(--bm-spring); }
@keyframes bm-icon-pop { 0% { transform: scale(1); } 40% { transform: scale(1.25) rotate(-8deg); } 100% { transform: scale(1); } }

/* Sub-menu: shown only while its item is open (sidebar.js animates the height),
   guide line + staggered items; .bm-closing plays the reverse before .open is removed. */
#layout-menu .menu-sub { position: relative; display: none; }
#layout-menu .menu-item.open > .menu-sub { display: block; }
#layout-menu .menu-item.bm-closing > .menu-sub > .menu-item { opacity: 0 !important; transform: translateX(-8px) !important; transition-delay: 0s !important; }
#layout-menu .menu-item.bm-closing > .menu-sub::before { transform: scaleY(0) !important; transition-delay: 0s !important; }
#layout-menu .menu-item.bm-closing > .menu-link .menu-toggle-icon { transform: rotate(0deg) !important; }
#layout-menu .menu-sub::before {
    content: ''; position: absolute; left: 1.5rem; top: .35rem; bottom: .5rem; width: 2px; border-radius: 2px;
    background: linear-gradient(180deg, var(--bmec-teal) 0%, rgba(0, 168, 192, .15) 100%);
    transform-origin: top; transform: scaleY(0); transition: transform .5s var(--bm-out) .05s;
}
#layout-menu .menu-item.open > .menu-sub::before { transform: scaleY(1); }
#layout-menu .menu-sub > .menu-item {
    opacity: 0; transform: translateX(-10px); filter: blur(2px);
    transition: opacity .15s ease, transform .2s ease, filter .15s ease;
}
#layout-menu .menu-item.open > .menu-sub > .menu-item {
    opacity: 1; transform: none; filter: none;
    transition: opacity .32s ease, transform .45s var(--bm-spring), filter .3s ease;
    transition-delay: calc(var(--bm-i, 0) * 38ms + 70ms);
}
#layout-menu .menu-sub .menu-link::before { transition: background .2s, box-shadow .25s, transform .3s var(--bm-spring); }
#layout-menu .menu-sub .menu-link:hover::before { background: var(--bmec-teal); transform: scale(1.5); }
#layout-menu .menu-sub .menu-item.active > .menu-link::before { animation: bm-dot-glow 2.4s ease-in-out infinite; }
@keyframes bm-dot-glow { 50% { box-shadow: 0 0 0 5px rgba(0, 168, 192, .12); } }

/* Group open / close (sidebar.js adds these classes around the display toggle) */
#layout-menu .menu-item.bm-anim-in { animation: bm-item-in .42s var(--bm-out) both; animation-delay: calc(var(--bm-i, 0) * 32ms); }
#layout-menu .menu-item.bm-anim-out { animation: bm-item-out .18s ease-in both; }
@keyframes bm-item-in { from { opacity: 0; transform: translateX(-14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes bm-item-out { to { opacity: 0; transform: translateX(-10px); } }
#layout-menu .menu-header.bm-group-header { transition: background .2s, color .2s, letter-spacing .3s var(--bm-out); }
#layout-menu .menu-header.bm-group-header:not(.bm-group-closed) { letter-spacing: .08em; }

/* Click ripple */
#layout-menu .bm-ripple {
    position: absolute; border-radius: 50%; pointer-events: none; width: 12px; height: 12px; margin: -6px 0 0 -6px;
    background: rgba(0, 168, 192, .28); transform: scale(0); animation: bm-ripple .55s var(--bm-out) forwards;
}
@keyframes bm-ripple { to { transform: scale(28); opacity: 0; } }

/* Rail hover-expand: labels slide in one after another */
@media (min-width: 1200px) {
    html.layout-menu-collapsed.layout-menu-hover #layout-menu .menu-inner > .menu-item .menu-title,
    html.layout-menu-collapsed.layout-menu-hover #layout-menu .menu-header-text {
        animation: bm-label-in .35s var(--bm-out) both; animation-delay: calc(var(--bm-i, 0) * 18ms + 40ms);
    }
}
@keyframes bm-label-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   Modern app layer (shadcn / Linear-style polish)
   ========================================================================== */
:root {
    --bmec-font: 'Inter', 'Segoe UI', Roboto, system-ui, sans-serif;
    --bmec-radius-sm: 8px;
    --bmec-radius-lg: 14px;
    --bmec-shadow-md: 0 4px 8px -2px rgba(16, 24, 40, .08), 0 2px 4px -2px rgba(16, 24, 40, .04);
    --bmec-shadow-xl: 0 20px 24px -4px rgba(16, 24, 40, .10), 0 8px 8px -4px rgba(16, 24, 40, .04);
    --bmec-ease: cubic-bezier(.2, .8, .2, 1);
    --bs-body-font-family: var(--bmec-font);
    --bs-border-radius: var(--bmec-radius-sm);
}

body, .btn, .form-control, .form-select, .dropdown-menu, .modal, .tooltip, .popover, .table, h1, h2, h3, h4, h5, h6 {
    font-family: var(--bmec-font);
    font-feature-settings: 'cv11', 'ss01';
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--bmec-ink); letter-spacing: -.01em; font-weight: 600; }

/* Navbar: light glass bar instead of a floating box */
.layout-navbar.navbar-detached {
    background: rgba(255, 255, 255, .82) !important;
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border: 1px solid var(--bmec-border);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    border-radius: var(--bmec-radius-lg);
    min-height: 60px;
}

/* ── Top bar content ───────────────────────────────────────────────────── */
.layout-navbar .bm-nav-left { display: flex; align-items: center; gap: 1rem; flex: 1 1 auto; min-width: 0; }
.layout-navbar .navbar-nav-right { flex: 0 0 auto !important; flex-basis: auto !important; }
.layout-navbar { gap: .75rem; flex-wrap: nowrap; }
.bm-search-trigger {
    display: inline-flex; align-items: center; gap: .55rem; flex: 0 1 340px; min-width: 0; height: 40px;
    padding: 0 .5rem 0 .85rem; border: 1px solid var(--bmec-border); border-radius: 10px;
    background: var(--bmec-page); color: var(--bmec-muted); font-size: .875rem; text-align: left;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.bm-search-trigger:hover { background: #fff; border-color: #d5dadf; }
.bm-search-trigger:focus-visible { outline: none; border-color: var(--bmec-teal); box-shadow: 0 0 0 .2rem rgba(0, 168, 192, .15); }
.bm-search-trigger .bx { font-size: 1.15rem; }
.bm-search-placeholder { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-kbd {
    display: inline-block; padding: .1rem .4rem; border: 1px solid var(--bmec-border); border-bottom-width: 2px;
    border-radius: 6px; background: #fff; color: var(--bmec-muted); font: 600 .68rem/1.4 var(--bmec-font); white-space: nowrap;
}
.bm-greeting { line-height: 1.25; white-space: nowrap; }
.bm-greeting-title { font-weight: 600; color: var(--bmec-ink); font-size: .9rem; }
.bm-greeting-date { color: var(--bmec-muted); font-size: .75rem; }
.bm-chips { display: flex; gap: .4rem; min-width: 0; overflow: hidden; }
.bm-chip {
    display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .65rem; border-radius: 999px;
    font-size: .78rem; white-space: nowrap; border: 1px solid transparent; transition: transform .15s, box-shadow .15s;
}
a.bm-chip:hover { transform: translateY(-1px); box-shadow: var(--bmec-shadow-md); }
.bm-chip .bx { font-size: 1rem; }
.bm-chip b { font-weight: 700; }
.bm-chip-amber { background: #fdf3e2; color: #8a5414; border-color: #f7e2bd; }
.bm-chip-teal { background: var(--bmec-teal-50); color: var(--bmec-teal-800); border-color: var(--bmec-teal-100); }
.bm-chip-violet { background: #efedfb; color: #4b40b0; border-color: #dcd8f6; }
.bm-chip-green { background: #e7f6ef; color: #1f7a50; border-color: #c9ebd9; }

.bm-new-btn { height: 38px; display: inline-flex; align-items: center; gap: .3rem; padding: 0 .85rem; }
.bm-att-pill {
    display: inline-flex; align-items: center; gap: .45rem; height: 38px; padding: 0 .8rem;
    border: 1px solid var(--bmec-border); border-radius: 999px; background: #fff; color: var(--bmec-ink);
    font-size: .82rem; font-weight: 500; white-space: nowrap;
}
.bm-att-pill:hover { background: var(--bmec-page); }
.bm-att-dot { width: 9px; height: 9px; border-radius: 50%; background: #c3c8cc; box-shadow: 0 0 0 3px #eef0f2; }
.bm-att-pill.is-in .bm-att-dot { background: #2e9e6a; box-shadow: 0 0 0 3px #d5f0e2; animation: bm-pulse 2s infinite; }
@keyframes bm-pulse { 50% { box-shadow: 0 0 0 5px rgba(46, 158, 106, .15); } }
.bm-att-menu { width: 340px; max-width: calc(100vw - 24px); }
.bm-att-menu .amc-card, .bm-att-menu .amc-wrap { background: linear-gradient(135deg, #0b6f80 0%, #00a8c0 100%) !important; border-radius: 12px; }

@media (max-width: 1399.98px) { .bm-chips .bm-chip:nth-child(n+3) { display: none; } }
@media (max-width: 1199.98px) { .bm-greeting { display: none; } }
@media (max-width: 991.98px) {
    .bm-chips { display: none; }
    .bm-search-trigger { flex: 0 0 40px; width: 40px; padding: 0; justify-content: center; }
    .bm-search-trigger .bm-search-placeholder, .bm-search-trigger .bm-kbd { display: none; }
}
@media (max-width: 575.98px) {
    .bm-att-pill { padding: 0 .7rem; }
    .bm-att-pill .bm-att-text { display: none; }
    .layout-navbar .navbar-nav .nav-item.me-2 { margin-right: .35rem !important; }
}

/* Global search dialog */
.bm-search-modal .modal-dialog { margin-top: 8vh; }
.bm-search-modal .modal-content { overflow: hidden; }
.bm-search-head { display: flex; align-items: center; gap: .65rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--bmec-border); }
.bm-search-head .bx { font-size: 1.35rem; color: var(--bmec-teal-700); }
.bm-search-input { flex: 1; border: 0; outline: 0; font-size: 1.05rem; color: var(--bmec-ink); background: transparent; min-width: 0; }
.bm-search-results { max-height: 60vh; overflow-y: auto; padding: .35rem .5rem .6rem; }
.bm-search-results.loading { opacity: .6; }
.bm-search-group-label {
    display: flex; align-items: center; gap: .35rem; padding: .7rem .6rem .3rem;
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--bmec-muted);
}
.bm-search-item {
    display: flex; align-items: center; gap: .75rem; width: 100%; padding: .55rem .7rem; border: 0; border-radius: 10px;
    background: transparent; color: var(--bmec-ink); text-align: left; text-decoration: none;
}
.bm-search-item > .bx { font-size: 1.15rem; color: var(--bmec-muted); flex: 0 0 auto; }
.bm-search-item:hover, .bm-search-item.active { background: var(--bmec-teal-50); color: var(--bmec-teal-800); }
.bm-search-item.active > .bx { color: var(--bmec-teal-700); }
.bm-search-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.bm-search-title { font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-search-sub { font-size: .78rem; color: var(--bmec-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-search-hint { padding: 2rem 1rem; text-align: center; color: var(--bmec-muted); font-size: .875rem; }
.bm-search-foot { display: flex; gap: 1.25rem; padding: .55rem 1.1rem; border-top: 1px solid var(--bmec-border); background: #fafbfc; font-size: .75rem; color: var(--bmec-muted); }
.bm-search-foot .bm-kbd { margin-right: .15rem; }
@media (max-width: 575.98px) {
    .bm-search-modal .modal-dialog { margin: 0; max-width: none; height: 100%; }
    .bm-search-modal .modal-content { height: 100%; border-radius: 0; }
    .bm-search-results { max-height: none; }
    .bm-search-foot { display: none; }
}

/* ── Login page: launch banner + sign-in card ──────────────────────────── */
.bm-login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(380px, 1fr); background: #fff; }
.bm-login--solo { grid-template-columns: 1fr; background: var(--bmec-page); }
.bm-login-demo-note { grid-column: 1 / -1; border-radius: 0; }
.bm-login-hero {
    position: relative; overflow: hidden; display: flex; align-items: center;
    padding: clamp(1.5rem, 4vw, 3.5rem);
    background:
        radial-gradient(900px 500px at 85% 15%, rgba(0, 168, 192, .14), transparent 60%),
        radial-gradient(700px 500px at 0% 100%, rgba(0, 127, 146, .10), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #f1f8fa 100%);
    border-right: 1px solid var(--bmec-border);
}
.bm-login-hero::before { /* fine dot texture, painted before the content */
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image: radial-gradient(rgba(0, 127, 146, .12) 1px, transparent 1px); background-size: 22px 22px;
    mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
/* No z-index here: a stacking context would stop the product photo blending into the background. */
.bm-login-hero-inner { position: relative; width: 100%; max-width: 760px; margin: 0 auto; }
.bm-login-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem; border-radius: 999px;
    background: #fff; border: 1px solid var(--bmec-teal-100); color: var(--bmec-teal-800);
    font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0, 127, 146, .08);
}
.bm-login-eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bmec-teal); animation: bm-pulse 2s infinite; box-shadow: 0 0 0 3px var(--bmec-teal-100); }
.bm-login-title {
    margin: 1rem 0 .75rem; font-size: clamp(2rem, 3.6vw, 3.25rem); line-height: 1.08; font-weight: 800;
    letter-spacing: -.025em; color: var(--bmec-ink);
    background: linear-gradient(90deg, #1f2a30 0%, #1f2a30 45%, var(--bmec-teal-700) 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.bm-login-text { max-width: 560px; font-size: 1.05rem; line-height: 1.6; color: #55606a; margin-bottom: 1.25rem; }
.bm-login-cta { height: 46px; padding: 0 1.25rem; display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; border-radius: 12px; }
.bm-login-figure { margin: 1.5rem 0 1rem; }
/* multiply drops the photo's white background into the gradient (a filter here would block the blend) */
.bm-login-figure { position: relative; }
.bm-login-figure img { display: block; width: 100%; max-height: 46vh; object-fit: contain; mix-blend-mode: multiply; }
.bm-login-figure::after { /* soft floor shadow under the machine */
    content: ''; position: absolute; left: 22%; right: 8%; bottom: 4%; height: 18px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(16, 24, 40, .16), transparent); z-index: -1;
}
/* Carousel: fixed slide height so the layout doesn't jump; fade between slides */
.bm-login-carousel .carousel-item.active,
.bm-login-carousel .carousel-item-next,
.bm-login-carousel .carousel-item-prev { display: flex; flex-direction: column; align-items: flex-start; }
.bm-login-carousel .carousel-item { min-height: min(68vh, 640px); }
.bm-login-carousel .bm-login-figure { margin-top: auto; width: 100%; height: min(36vh, 340px); display: flex; align-items: center; justify-content: center; }
/* Bootstrap's fade gives the active slide a z-index (its own stacking context), which stops the
   photo's white background blending into the hero. Blend the whole slide instead. */
.bm-login-carousel .carousel-item.bm-has-photo { mix-blend-mode: multiply; }
.bm-login-carousel .bm-login-figure img { max-height: 100%; }
.bm-login-tags { list-style: none; padding: 0; margin: -.25rem 0 1rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.bm-login-tags li {
    padding: .3rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 600;
    background: #fff; color: var(--bmec-teal-800); border: 1px solid var(--bmec-teal-100);
}
.bm-login-controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .25rem 0 1.25rem; }
.bm-login-dots.carousel-indicators { position: static; margin: 0; justify-content: flex-start; gap: .4rem; }
.bm-login-dots.carousel-indicators [data-bs-target] {
    width: 8px; height: 8px; margin: 0; border: 0; border-radius: 999px; background: #c9d6db; opacity: 1;
    transition: width .3s var(--bmec-ease), background .3s; text-indent: -999px;
}
.bm-login-dots.carousel-indicators .active { width: 28px; background: var(--bmec-teal-700); }
.bm-login-arrows { display: flex; gap: .4rem; }
.bm-login-arrows button {
    width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--bmec-border); background: #fff;
    color: var(--bmec-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem;
    transition: background .15s, color .15s, border-color .15s;
}
.bm-login-arrows button:hover { background: var(--bmec-teal-700); border-color: var(--bmec-teal-700); color: #fff; }

/* Product artwork for slides without a photo */
.bm-login-art { position: relative; width: min(340px, 80%); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.bm-art-ring { position: absolute; border-radius: 50%; border: 1px dashed rgba(0, 127, 146, .25); }
.bm-art-ring-1 { inset: 0; animation: bm-spin 40s linear infinite; }
.bm-art-ring-2 { inset: 14%; border-style: solid; border-color: rgba(0, 168, 192, .18); background: radial-gradient(circle, rgba(0, 168, 192, .08), transparent 70%); }
.bm-art-ring-3 { inset: 28%; border: 0; background: rgba(255, 255, 255, .7); box-shadow: 0 20px 50px -10px rgba(0, 127, 146, .35); }
.bm-art-core {
    position: relative; width: 38%; aspect-ratio: 1; border-radius: 28%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--bmec-teal-700), var(--bmec-teal)); color: #fff;
    box-shadow: 0 18px 40px -12px rgba(0, 127, 146, .6), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.bm-art-core .bx { font-size: clamp(2.5rem, 5vw, 4rem); }
.bm-art-chip {
    position: absolute; display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .7rem; border-radius: 999px;
    background: #fff; border: 1px solid var(--bmec-border); box-shadow: var(--bmec-shadow-md);
    font-size: .78rem; font-weight: 700; color: var(--bmec-ink); animation: bm-float 6s ease-in-out infinite;
}
.bm-art-chip .bx { color: var(--bmec-teal-700); font-size: 1rem; }
.bm-art-chip-1 { top: 12%; right: -2%; }
.bm-art-chip-2 { bottom: 14%; left: -4%; animation-delay: -3s; }
@keyframes bm-spin { to { transform: rotate(360deg); } }
@keyframes bm-float { 50% { transform: translateY(-8px); } }

.bm-login-stats { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.bm-login-stats li {
    background: rgba(255, 255, 255, .85); border: 1px solid var(--bmec-border); border-radius: 14px;
    padding: .8rem .9rem; backdrop-filter: blur(6px); display: flex; flex-direction: column;
}
.bm-login-stats b { font-size: 1.4rem; font-weight: 800; color: var(--bmec-teal-700); line-height: 1.1; }
.bm-login-stats span { font-size: .78rem; color: var(--bmec-muted); }

.bm-login-panel { display: flex; align-items: center; justify-content: center; padding: 2rem 1.5rem; background: #fff; }
.bm-login--solo .bm-login-panel { background: transparent; }
.bm-login-card { width: 100%; max-width: 420px; }
.bm-login--solo .bm-login-card { background: #fff; border: 1px solid var(--bmec-border); border-radius: 18px; padding: 2rem; box-shadow: var(--bmec-shadow-xl); }
.bm-login-brand { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; margin-bottom: 1.75rem; }
.bm-login-brand img { height: 56px; width: auto; }
.bm-login-app { font-size: .8rem; color: var(--bmec-muted); font-weight: 500; }
.bm-login-heading { font-size: 1.6rem; font-weight: 700; margin: 0 0 .25rem; color: var(--bmec-ink); letter-spacing: -.01em; }
.bm-login-sub { color: var(--bmec-muted); margin-bottom: 1.5rem; }
.bm-login #submit_btn { height: 48px; font-size: 1rem; font-weight: 600; border-radius: 12px; }
.bm-login-foot { margin-top: 1.75rem; font-size: .78rem; color: var(--bmec-muted); text-align: center; }

@media (max-width: 991.98px) {
    .bm-login { grid-template-columns: 1fr; }
    /* Phones/tablets: sign-in first, launch banner underneath */
    .bm-login-panel { order: 1; }
    .bm-login-hero { order: 2; border-right: 0; border-top: 1px solid var(--bmec-border); padding: 1.5rem 1.25rem 2rem; }
    .bm-login-title { font-size: 1.6rem; margin: .65rem 0 .4rem; }
    .bm-login-text { font-size: .9rem; margin-bottom: .75rem; }
    .bm-login-figure { margin: .5rem 0 .5rem; }
    .bm-login-figure img { max-height: 180px; }
    .bm-login-carousel .carousel-item { min-height: 0; }
    .bm-login-carousel .bm-login-figure { height: 200px; }
    .bm-login-art { width: 190px; }
    .bm-art-chip { font-size: .7rem; padding: .25rem .55rem; }
    .bm-login-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
    .bm-login-stats li { padding: .55rem .7rem; }
    .bm-login-stats b { font-size: 1.1rem; }
    .bm-login-cta { height: 40px; font-size: .875rem; }
    .bm-login-panel { padding: 1.75rem 1.25rem 2.5rem; }
}

/* Buttons */
.btn {
    border-radius: var(--bmec-radius-sm);
    font-weight: 500;
    letter-spacing: 0;
    transition: background-color .15s var(--bmec-ease), border-color .15s, box-shadow .15s, transform .08s;
}
.btn:active { transform: translateY(1px); }
.btn-primary:hover { box-shadow: 0 4px 10px rgba(0, 127, 146, .28); }
/* Success (Export, Save) in the brand green instead of the template's lime */
.btn-success {
    --bs-btn-bg: #2e9e6a; --bs-btn-border-color: #2e9e6a;
    --bs-btn-hover-bg: #248556; --bs-btn-hover-border-color: #248556;
    --bs-btn-active-bg: #1f744b; --bs-btn-active-border-color: #1f744b;
    --bs-btn-disabled-bg: #2e9e6a; --bs-btn-disabled-border-color: #2e9e6a;
    --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff;
}

/* Secondary = neutral white button (Back, Cancel, Close) instead of solid grey */
.btn-secondary {
    --bs-btn-bg: #fff;
    --bs-btn-color: var(--bmec-ink);
    --bs-btn-border-color: #d9dee3;
    --bs-btn-hover-bg: var(--bmec-page);
    --bs-btn-hover-color: var(--bmec-ink);
    --bs-btn-hover-border-color: #c9ced3;
    --bs-btn-active-bg: #eef0f2;
    --bs-btn-active-color: var(--bmec-ink);
    --bs-btn-active-border-color: #c9ced3;
    --bs-btn-disabled-bg: #fff;
    --bs-btn-disabled-color: var(--bmec-muted);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
.btn-outline-secondary, .btn-secondary.btn-outline {
    --bs-btn-color: var(--bmec-ink);
    --bs-btn-border-color: var(--bmec-border);
    --bs-btn-hover-bg: var(--bmec-page);
    --bs-btn-hover-color: var(--bmec-ink);
    --bs-btn-hover-border-color: #d5dadf;
}

/* Inputs */
.form-control, .form-select, .input-group-text, .select2-container .select2-selection {
    border-radius: var(--bmec-radius-sm) !important;
    border-color: #dfe3e8;
    transition: border-color .15s, box-shadow .15s;
}
.form-control::placeholder { color: #a3a9ae; }
.form-label, label { font-weight: 500; color: var(--bmec-ink); font-size: .85rem; }

/* Cards */
.card {
    border-radius: var(--bmec-radius-lg);
    transition: box-shadow .2s var(--bmec-ease), transform .2s var(--bmec-ease);
}
.card .card-header { background: transparent; border-bottom: 1px solid var(--bmec-border); font-weight: 600; color: var(--bmec-ink); }
a.card:hover, .card.card-hover:hover { box-shadow: var(--bmec-shadow-md); transform: translateY(-2px); }

/* Badges: soft pills */
.badge { border-radius: 999px; font-weight: 600; letter-spacing: .01em; padding: .35em .7em; }
.badge.bg-success { background-color: #e7f6ef !important; color: #1f7a50 !important; }
.badge.bg-warning { background-color: #fdf3e2 !important; color: #a8661a !important; }
.badge.bg-danger { background-color: #fdecec !important; color: #b42f2b !important; }
.badge.bg-info { background-color: var(--bmec-teal-50) !important; color: var(--bmec-teal-800) !important; }
.badge.bg-secondary { background-color: #eef0f2 !important; color: #545b61 !important; }
.badge.bg-primary { background-color: var(--bmec-teal-50) !important; color: var(--bmec-teal-800) !important; }
.badge.bg-dark { background-color: #2f3437 !important; color: #fff !important; }
.badge.rounded-pill.bg-danger.badge-center { background-color: var(--bmec-danger) !important; color: #fff !important; }

/* Dropdowns, modals, offcanvas, tooltips */
.dropdown-menu {
    border: 1px solid var(--bmec-border);
    border-radius: 12px;
    box-shadow: var(--bmec-shadow-xl);
    padding: .4rem;
    animation: bm-pop .14s var(--bmec-ease);
}
.dropdown-item { border-radius: 6px; padding: .45rem .7rem; font-size: .875rem; }
.dropdown-item:hover { background: var(--bmec-page); }
.modal-content { border: 0; border-radius: 16px; box-shadow: var(--bmec-shadow-xl); }
.modal-header { border-bottom: 1px solid var(--bmec-border); }
.modal-footer { border-top: 1px solid var(--bmec-border); }
.modal-backdrop.show { opacity: .35; backdrop-filter: blur(2px); }
.offcanvas { border-left: 1px solid var(--bmec-border) !important; box-shadow: var(--bmec-shadow-xl); }
.tooltip-inner { border-radius: 6px; background: #1f2427; font-size: .78rem; }
@keyframes bm-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }

/* Breadcrumbs → page header */
.breadcrumb { font-size: .82rem; margin-bottom: 0; }
.breadcrumb-item a { color: var(--bmec-muted); }
.breadcrumb-item.active { color: var(--bmec-ink); font-weight: 600; }

/* Thin scrollbars */
* { scrollbar-width: thin; scrollbar-color: #c9ced3 transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #c9ced3; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }

/* Skeleton loader (used by tables and detail pages) */
.bm-skeleton {
    display: inline-block; height: .8em; width: 100%; border-radius: 4px;
    background: linear-gradient(90deg, #eef0f2 25%, #f6f7f8 37%, #eef0f2 63%);
    background-size: 400% 100%;
    animation: bm-shimmer 1.2s ease infinite;
}
@keyframes bm-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Tables (bootstrap-table) ───────────────────────────────────────────── */
.bootstrap-table .fixed-table-container .table thead th {
    background: #fafbfc;
    color: var(--bmec-muted);
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
}
.bootstrap-table .fixed-table-container .table tbody tr:hover { background: var(--bmec-teal-50); }
.bootstrap-table .fixed-table-container { border-radius: 10px; border-color: var(--bmec-border); overflow: hidden; }
.bootstrap-table .fixed-table-container .table td {
    vertical-align: middle;
    border-color: #f0f2f4;
    padding: .6rem .9rem;
    font-size: .875rem;
    color: #3d4247;
}
.bootstrap-table .fixed-table-container .table thead th { padding: .1rem .2rem; }
.bootstrap-table .fixed-table-container .table thead th .th-inner { padding: .6rem .7rem; }
.bootstrap-table .fixed-table-container .table tbody tr:last-child td { border-bottom: 0; }

/* Toolbar: compact, white, consistent */
.bootstrap-table .fixed-table-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.bootstrap-table .fixed-table-toolbar .bs-bars,
.bootstrap-table .fixed-table-toolbar .columns,
.bootstrap-table .fixed-table-toolbar .search { margin: 0 !important; float: none !important; }
.bootstrap-table .fixed-table-toolbar .search { margin-left: auto !important; }
.bootstrap-table .fixed-table-toolbar .search input { border-radius: 8px; min-width: 240px; height: 38px; padding-left: 2.1rem;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%237b8186' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat .7rem center; }
.bootstrap-table .fixed-table-toolbar .btn,
.bootstrap-table .fixed-table-toolbar .btn-group > .btn {
    height: 38px;
    padding: 0 .8rem;
    font-size: .85rem;
    display: inline-flex; align-items: center; gap: .35rem;
}
.bootstrap-table .fixed-table-toolbar .btn-secondary {
    --bs-btn-bg: #fff; --bs-btn-color: var(--bmec-ink); --bs-btn-border-color: var(--bmec-border);
    --bs-btn-hover-bg: var(--bmec-page); --bs-btn-hover-color: var(--bmec-ink); --bs-btn-hover-border-color: #d5dadf;
    --bs-btn-active-bg: var(--bmec-page); --bs-btn-active-color: var(--bmec-ink); --bs-btn-active-border-color: #d5dadf;
    box-shadow: none;
}

/* Pagination footer */
.bootstrap-table .fixed-table-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding-top: .5rem; }
.bootstrap-table .fixed-table-pagination .pagination-detail { font-size: .8rem; color: var(--bmec-muted); }
.bootstrap-table .fixed-table-pagination .pagination { margin: 0; gap: 4px; }
.bootstrap-table .fixed-table-pagination .page-link { border-radius: 8px !important; border: 1px solid var(--bmec-border); min-width: 34px; text-align: center; font-size: .82rem; }

/* Select2: one clean border (the container had its own border + padding too) */
/* custom.css uses :not(#global-search + …) (ID specificity), so match it and add html body. */
html body .select2.select2-container.select2-container--default:not(#global-search + .select2-container) {
    border: 0 !important; padding: 0 !important; min-height: 0 !important;
}
html body .select2-container--default:not(#global-search + .select2-container) .select2-selection--single,
html body .select2-container--default:not(#global-search + .select2-container) .select2-selection--multiple {
    border: 1px solid #dfe3e8 !important;
    border-radius: 8px !important;
    min-height: 38px;
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection {
    border-color: var(--bmec-teal) !important;
    box-shadow: 0 0 0 .2rem rgba(0, 168, 192, .15);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--bmec-teal-50); border: 1px solid var(--bmec-teal-100); color: var(--bmec-teal-800); border-radius: 999px;
}
.select2-dropdown { border: 1px solid var(--bmec-border) !important; border-radius: 10px !important; box-shadow: var(--bmec-shadow-xl); overflow: hidden; }

/* Phone card view (fast-table.js turns cardView on below 576px) */
.bootstrap-table .fixed-table-container .table .card-views { display: block; padding: .35rem 0; }
.bootstrap-table .fixed-table-container .table tbody tr:has(.card-views) td { border-bottom: 0; padding: .35rem .25rem; }
.bootstrap-table .fixed-table-container .table tbody tr:has(.card-views) {
    display: block; margin: 0 0 .65rem; border: 1px solid var(--bmec-border); border-radius: 12px;
    background: #fff; box-shadow: var(--bmec-shadow);
}
.bootstrap-table .card-view { display: flex; gap: .75rem; padding: .3rem .75rem; align-items: flex-start; }
.bootstrap-table .card-view .card-view-title {
    flex: 0 0 38%; max-width: 38%; color: var(--bmec-muted); font-size: .72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .03em; padding-top: .15rem; white-space: normal;
}
.bootstrap-table .card-view .card-view-value { flex: 1; min-width: 0; font-size: .875rem; white-space: normal; overflow-wrap: anywhere; }
.bootstrap-table .card-view .card-view-value:empty::after { content: '—'; color: var(--bmec-muted); }
@media (max-width: 575.98px) {
    .bootstrap-table .fixed-table-container { border: 0; overflow: visible; }
    .bootstrap-table .fixed-table-container .table, .bootstrap-table .fixed-table-container .table tbody { display: block; background: transparent; }
    .bootstrap-table .fixed-table-container .table thead { display: none; }
    .bootstrap-table .fixed-table-toolbar .search { width: 100%; margin-left: 0 !important; }
    .bootstrap-table .fixed-table-toolbar .search input { min-width: 0; width: 100%; }
    .bootstrap-table .fixed-table-toolbar .columns { flex-wrap: wrap; }
}

/* ── Settings → Login Banner slide editor ──────────────────────────────── */
.bm-slide-head { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--bmec-border); }
.bm-slide-num {
    width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--bmec-teal-50); color: var(--bmec-teal-800); font-weight: 700; font-size: .8rem;
}
.bm-slide-heading { font-weight: 600; color: var(--bmec-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-slide-head .bm-icon-btn { width: 32px; height: 32px; flex-basis: 32px; }
.bm-slide-preview { border: 1px solid var(--bmec-border); border-radius: 10px; background: linear-gradient(180deg, #fff, #f1f8fa); padding: .5rem; margin-bottom: .5rem; text-align: center; }
.bm-slide-preview img { max-width: 100%; max-height: 110px; mix-blend-mode: multiply; }
.bm-icon-pick { display: flex; flex-wrap: wrap; gap: .35rem; }
.bm-icon-pick label { cursor: pointer; margin: 0; }
.bm-icon-pick input { position: absolute; opacity: 0; pointer-events: none; }
.bm-icon-pick span {
    width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--bmec-border); color: var(--bmec-muted); font-size: 1.1rem; transition: all .15s;
}
.bm-icon-pick input:checked + span { background: var(--bmec-teal-700); border-color: var(--bmec-teal-700); color: #fff; }
.bm-icon-pick input:focus-visible + span { outline: 2px solid var(--bmec-teal); outline-offset: 2px; }
.bm-slide-list .bm-slide-num:empty::before { content: '•'; }
/* Save bar stays reachable on long forms */
.bm-sticky-actions {
    position: sticky; bottom: 0; z-index: 5; padding: .75rem 1rem !important; margin-top: .5rem;
    background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); border-top: 1px solid var(--bmec-border);
    border-radius: 12px 12px 0 0;
}

/* ==========================================================================
   Dashboard kit – <x-dash.header>, <x-dash.kpi>, <x-dash.card>
   ========================================================================== */
.bm-dash { padding-top: 1rem; padding-bottom: 2rem; }
.bm-dash-header { margin-bottom: 1rem; }
.bm-dash-title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; }
.bm-dash-title-wrap { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.bm-dash-icon {
    width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--bmec-teal-700), var(--bmec-teal)); color: #fff; font-size: 1.35rem;
    box-shadow: 0 6px 14px -6px rgba(0, 127, 146, .55);
}
.bm-dash-title { font-size: 1.35rem; font-weight: 700; margin: 0; color: var(--bmec-ink); letter-spacing: -.01em; }
.bm-dash-subtitle { color: var(--bmec-muted); font-size: .85rem; display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: center; }
.bm-dash-updated { display: inline-flex; align-items: center; gap: .25rem; font-size: .78rem; }
.bm-dash-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.bm-dash-filters {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .9rem;
    padding: .65rem .75rem; background: var(--bmec-surface); border: 1px solid var(--bmec-border); border-radius: 12px;
}
.bm-dash-filters .form-control, .bm-dash-filters .form-select { height: 38px; min-width: 150px; width: auto; flex: 0 1 auto; font-size: .85rem; }
.bm-dash-filters .btn { height: 38px; }
.bm-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--bmec-page); border: 1px solid var(--bmec-border); border-radius: 10px; }
.bm-seg button, .bm-seg a {
    border: 0; background: transparent; color: var(--bmec-muted); font-size: .8rem; font-weight: 600;
    padding: .35rem .7rem; border-radius: 8px; text-decoration: none; white-space: nowrap;
}
.bm-seg .active, .bm-seg button[aria-pressed="true"] { background: #fff; color: var(--bmec-teal-800); box-shadow: var(--bmec-shadow); }

.bm-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .85rem; margin-bottom: 1rem; }
.bm-kpi {
    display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.1rem; min-width: 0;
    background: var(--bmec-surface); border: 1px solid var(--bmec-border); border-radius: 14px; box-shadow: var(--bmec-shadow);
    color: inherit; text-decoration: none; transition: transform .18s var(--bmec-ease), box-shadow .18s, border-color .18s;
}
a.bm-kpi:hover { transform: translateY(-2px); box-shadow: var(--bmec-shadow-md); border-color: var(--bmec-teal-100); color: inherit; }
.bm-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.bm-kpi-label { font-size: .8rem; font-weight: 600; color: var(--bmec-muted); }
.bm-kpi-icon { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.bm-kpi-value { font-size: 1.65rem; font-weight: 700; color: var(--bmec-ink); line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -.01em; overflow-wrap: anywhere; }
.bm-kpi-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; min-height: 1.2rem; }
.bm-kpi-delta { display: inline-flex; align-items: center; gap: .1rem; font-size: .75rem; font-weight: 700; padding: .1rem .45rem; border-radius: 999px; }
.bm-kpi-delta.good { background: #e7f6ef; color: #1f7a50; }
.bm-kpi-delta.bad { background: #fdecec; color: #b42f2b; }
.bm-kpi-delta.flat { background: #eef0f2; color: #545b61; }
.bm-kpi-hint { font-size: .75rem; color: var(--bmec-muted); }
.bm-tone-teal .bm-kpi-icon { background: var(--bmec-teal-50); color: var(--bmec-teal-700); }
.bm-tone-green .bm-kpi-icon { background: #e7f6ef; color: #1f7a50; }
.bm-tone-amber .bm-kpi-icon { background: #fdf3e2; color: #a8661a; }
.bm-tone-red .bm-kpi-icon { background: #fdecec; color: #b42f2b; }
.bm-tone-slate .bm-kpi-icon { background: #eef0f2; color: #545b61; }
.bm-tone-violet .bm-kpi-icon { background: #efedfb; color: #4a3aa7; }
.bm-tone-blue .bm-kpi-icon { background: #e8f1fc; color: #2a78d6; }

.bm-chart-card { display: flex; flex-direction: column; }
/* Equal heights only inside a grid row – a full-width card outside a column would stretch to the page height. */
.row > [class*="col"] > .bm-chart-card { height: 100%; }
.bm-chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: 1rem 1.15rem .25rem; }
.bm-chart-title { font-size: .95rem; font-weight: 600; margin: 0; color: var(--bmec-ink); display: flex; align-items: center; gap: .45rem; }
.bm-chart-title .bx { color: var(--bmec-teal-700); font-size: 1.1rem; }
.bm-chart-sub { font-size: .78rem; color: var(--bmec-muted); margin-top: .1rem; }
.bm-chart-actions { display: flex; gap: .35rem; flex-wrap: wrap; }
.bm-chart-actions .btn, .bm-chart-actions .form-select { height: 32px; font-size: .78rem; padding-top: 0; padding-bottom: 0; }
.bm-chart-body { padding: .5rem 1.15rem 1.1rem; flex: 1; min-width: 0; }
.bm-chart-body .table { margin-bottom: 0; }
.bm-empty-chart { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; min-height: 180px; color: var(--bmec-muted); font-size: .85rem; }
.bm-empty-chart .bx { font-size: 1.8rem; color: #c3c8cc; }
/* Ranked list (top clients, engineers…) */
.bm-rank { list-style: none; padding: 0; margin: 0; }
.bm-rank li { display: flex; align-items: center; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid #f0f2f4; }
.bm-rank li:last-child { border-bottom: 0; }
.bm-rank-name { flex: 1; min-width: 0; font-size: .875rem; color: var(--bmec-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-rank-bar { flex: 0 0 34%; height: 6px; border-radius: 999px; background: #eef0f2; overflow: hidden; }
.bm-rank-bar span { display: block; height: 100%; border-radius: 999px; background: var(--bmec-teal); }
.bm-rank-val { flex: 0 0 auto; min-width: 3rem; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; font-size: .85rem; color: var(--bmec-ink); }
@media (max-width: 575.98px) {
    .bm-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    .bm-kpi { padding: .8rem .85rem; }
    .bm-kpi-value { font-size: 1.3rem; }
    .bm-dash-filters .form-control, .bm-dash-filters .form-select { min-width: 0; flex: 1 1 140px; }
}

/* ── Empty states ──────────────────────────────────────────────────────── */
.bm-empty .card-body, .bm-empty .misc-wrapper { padding: 2.5rem 1rem; }
.bm-empty-icon {
    width: 72px; height: 72px; margin: 0 auto 1rem; border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bmec-teal-50); color: var(--bmec-teal-700); font-size: 2rem;
    box-shadow: inset 0 0 0 1px var(--bmec-teal-100);
}
.bm-empty-title { font-size: 1.15rem; font-weight: 700; margin-bottom: .35rem; color: var(--bmec-ink); text-transform: none; }
.bm-empty-text { color: var(--bmec-muted); margin-bottom: 1.25rem; font-size: .9rem; }

/* ── Toast notifications (toastr) ──────────────────────────────────────── */
#toast-container > div {
    opacity: 1; border-radius: 12px; box-shadow: var(--bmec-shadow-xl); padding: 14px 16px 14px 52px;
    background-position: 16px center; font-family: var(--bmec-font); font-size: .875rem;
}
#toast-container > .toast-success { background-color: #1f7a50; }
#toast-container > .toast-info { background-color: var(--bmec-teal-700); }
#toast-container > .toast-warning { background-color: #a8661a; }
#toast-container > .toast-error { background-color: #b42f2b; }
#toast-container .toast-progress { opacity: .35; }

/* ── Phones: nothing may push the page sideways ─────────────────────────── */
@media (max-width: 767.98px) {
    /* Bootstrap .row negative margins left ~5px of sideways scroll on many pages */
    .layout-page, .content-wrapper { overflow-x: clip; }
    /* Plain tables not already in a scroll wrapper scroll inside themselves */
    .content-wrapper :not(.table-responsive):not(.fixed-table-body):not(.dataTables_scrollBody) > table.table:not(.dataTable) {
        display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
    }
    .content-wrapper .dataTables_wrapper { overflow-x: auto; }
    /* Toolbars / button rows wrap instead of overflowing */
    .content-wrapper .d-flex:has(> .btn), .content-wrapper .btn-group:not(.btn-group-vertical) { flex-wrap: wrap; }
    .content-wrapper .d-flex.gap-2 > .form-select, .content-wrapper .d-flex.gap-2 > .form-control { min-width: 0; flex: 1 1 140px; }
    /* Page header rows (breadcrumb + actions) stack nicely */
    .content-wrapper > .container-fluid > .d-flex.justify-content-between { flex-wrap: wrap; gap: .5rem; }
    .content-wrapper img { max-width: 100%; height: auto; }
}

/* Filter buttons keep their label on one line */
.card-body .btn { white-space: nowrap; }

/* Background "loading all records" note in the table footer */
.bm-prefetch {
    display: inline-flex; align-items: center; gap: .45rem;
    margin: .5rem .25rem; padding: .25rem .65rem;
    font-size: .78rem; color: var(--bmec-teal-800);
    background: var(--bmec-teal-50); border-radius: 999px;
}
.bm-prefetch .spinner-border-sm { width: .8rem; height: .8rem; border-width: .12em; }
.bm-prefetch .bx { font-size: 1rem; }

/* ==========================================================================
   CRM record (detail) pages – <x-record.*> components
   ========================================================================== */
.bm-record { padding-top: 1rem; }
.bm-record-crumbs .breadcrumb { margin-bottom: .6rem; }

.bm-record-hero {
    display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem;
    background: var(--bmec-surface);
    border: 1px solid var(--bmec-border);
    border-radius: var(--bmec-radius-lg);
    box-shadow: var(--bmec-shadow);
    padding: 1.25rem 1.5rem;
    position: relative; overflow: hidden;
}
.bm-record-hero::before { /* thin brand accent along the top */
    content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: linear-gradient(90deg, var(--bmec-teal-700), var(--bmec-teal));
}
.bm-record-identity { display: flex; align-items: flex-start; gap: 1rem; min-width: 0; flex: 1 1 420px; }
.min-w-0 { min-width: 0; }

.bm-avatar {
    position: relative; flex: 0 0 56px; width: 56px; height: 56px; border-radius: 14px;
    background: linear-gradient(135deg, var(--bmec-teal-700), var(--bmec-teal));
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.15rem; letter-spacing: .02em; overflow: hidden;
    box-shadow: 0 6px 14px -6px rgba(0, 127, 146, .55);
}
.bm-avatar .bx { font-size: 1.6rem; }
.bm-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.bm-record-title { font-size: 1.35rem; line-height: 1.3; margin: 0; color: var(--bmec-ink); font-weight: 700; word-break: break-word; }
.bm-record-subtitle { color: var(--bmec-muted); font-size: .875rem; margin-top: .15rem; }
.bm-record-meta { list-style: none; padding: 0; margin: .7rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.bm-record-meta li {
    display: inline-flex; align-items: center; gap: .35rem; max-width: 100%;
    padding: .25rem .6rem; border-radius: 999px; background: var(--bmec-page);
    border: 1px solid var(--bmec-border); font-size: .8rem; color: #4a4f54;
}
.bm-record-meta li span, .bm-record-meta li a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.bm-record-meta li .bx { color: var(--bmec-teal-700); font-size: .95rem; }
.bm-record-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

.bm-icon-btn {
    width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--bmec-border); background: #fff; color: var(--bmec-ink);
    transition: background .15s, color .15s, border-color .15s;
}
.bm-icon-btn:hover { background: var(--bmec-teal-50); color: var(--bmec-teal-700); border-color: var(--bmec-teal-100); }
.bm-icon-btn .bx { font-size: 1.15rem; }

/* KPI strip */
.bm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; margin: 1rem 0; }
.bm-stat {
    display: flex; align-items: center; gap: .8rem; text-align: left; width: 100%;
    background: var(--bmec-surface); border: 1px solid var(--bmec-border); border-radius: 12px;
    padding: .9rem 1rem; box-shadow: var(--bmec-shadow);
    transition: transform .18s var(--bmec-ease), box-shadow .18s, border-color .18s;
}
button.bm-stat { cursor: pointer; }
button.bm-stat:hover { transform: translateY(-2px); box-shadow: var(--bmec-shadow-md); border-color: var(--bmec-teal-100); }
button.bm-stat:focus-visible { outline: 2px solid var(--bmec-teal); outline-offset: 2px; }
.bm-stat-icon { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.bm-stat-body { display: flex; flex-direction: column; min-width: 0; }
.bm-stat-value { font-size: 1.35rem; font-weight: 700; color: var(--bmec-ink); line-height: 1.15; font-variant-numeric: tabular-nums; }
.bm-stat-label { font-size: .78rem; color: var(--bmec-muted); font-weight: 500; }
.bm-stat-hint { font-size: .72rem; color: #9aa0a5; }
.bm-tone-teal .bm-stat-icon { background: var(--bmec-teal-50); color: var(--bmec-teal-700); }
.bm-tone-green .bm-stat-icon { background: #e7f6ef; color: #1f7a50; }
.bm-tone-amber .bm-stat-icon { background: #fdf3e2; color: #a8661a; }
.bm-tone-red .bm-stat-icon { background: #fdecec; color: #b42f2b; }
.bm-tone-slate .bm-stat-icon { background: #eef0f2; color: #545b61; }
.bm-tone-violet .bm-stat-icon { background: #efedfb; color: #5a4fc7; }

/* About card */
.bm-card-title {
    display: flex; align-items: center; gap: .45rem; padding: 1rem 1.25rem .5rem;
    font-weight: 600; color: var(--bmec-ink); font-size: .95rem;
}
.bm-card-title .bx { color: var(--bmec-teal-700); font-size: 1.1rem; }
.bm-info-list { margin: 0; padding: .25rem 1.25rem 1rem; }
/* Label above value: reads well in the narrow side column and on phones. */
.bm-info-row { display: grid; grid-template-columns: 1fr; gap: .15rem; padding: .6rem 0; border-bottom: 1px dashed #edf0f2; }
.bm-info-row:last-child { border-bottom: 0; }
.bm-info-row dt { font-weight: 500; color: var(--bmec-muted); font-size: .8rem; display: flex; align-items: center; gap: .35rem; margin: 0; }
.bm-info-row dt .bx { font-size: .95rem; }
.bm-info-row dd { margin: 0; padding-left: 1.3rem; font-size: .875rem; color: var(--bmec-ink); overflow-wrap: anywhere; display: flex; align-items: flex-start; justify-content: space-between; gap: .35rem; }
.bm-info-row dd > a, .bm-info-row dd > span { min-width: 0; }
.bm-copy { border: 0; background: transparent; color: #9aa0a5; padding: 0 .15rem; line-height: 1; }
.bm-copy:hover { color: var(--bmec-teal-700); }
.bm-copy.copied { color: var(--bmec-success); }

/* Tab card */
.bm-tabs-card > .card-header { padding: 0 1rem; border-bottom: 1px solid var(--bmec-border); }
.card-header .card-header-tabs { margin: 0 0 -1px; }
/* DataTables paints stripes with an inset box-shadow */
table.dataTable.table-striped > tbody > tr.odd > *, table.dataTable.stripe > tbody > tr.odd > * {
    box-shadow: inset 0 0 0 9999px #fafbfc !important;
}
table.dataTable.table-hover > tbody > tr:hover > *, table.dataTable.hover > tbody > tr:hover > * {
    box-shadow: inset 0 0 0 9999px var(--bmec-teal-50) !important;
}
.nav-tabs { border-bottom: 0; gap: .25rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tabs .nav-link {
    border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0;
    color: var(--bmec-muted); font-weight: 500; font-size: .875rem; padding: .85rem .8rem; white-space: nowrap;
    background: transparent !important; display: inline-flex; align-items: center; gap: .35rem;
}
.nav-tabs .nav-link:hover { color: var(--bmec-ink); }
.nav-tabs .nav-link.active { color: var(--bmec-teal-800) !important; border-bottom-color: var(--bmec-teal) !important; }
.nav-tabs .nav-link .badge { font-size: .7rem; padding: .2em .55em; }

/* ── Global polish for existing detail pages ───────────────────────────── */
/* Dark table headers → light, like the rest of the app */
.table thead.table-dark th, .table > thead.table-dark > tr > th {
    background: #fafbfc !important; color: var(--bmec-muted) !important; border-color: var(--bmec-border) !important;
    font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
}
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: #fafbfc; --bs-table-striped-bg: #fafbfc; }
.table > :not(caption) > * > * { padding: .6rem .8rem; }
/* Record pages: keep dates/numbers on one line; the table scrolls sideways instead. */
.bm-record .table td, .bm-record .table th { white-space: nowrap; font-size: .85rem; }
.bm-record .tab-content { padding-top: .25rem; }

/* Saturated "stat" cards (bg-success text-white etc.) → soft tinted cards with an accent edge */
.card.text-white.bg-primary, .card.text-white.bg-success, .card.text-white.bg-danger,
.card.text-white.bg-warning, .card.text-white.bg-info, .card.text-white.bg-secondary, .card.text-white.bg-dark {
    color: var(--bmec-ink) !important;
    border: 1px solid var(--bmec-border);
    border-left: 4px solid var(--bm-accent, var(--bmec-teal));
    background: var(--bm-tint, var(--bmec-teal-50)) !important;
}
.card.text-white.bg-primary { --bm-accent: var(--bmec-teal-700); --bm-tint: #f0f9fb; }
.card.text-white.bg-info { --bm-accent: var(--bmec-teal); --bm-tint: #f0f9fb; }
.card.text-white.bg-success { --bm-accent: #2e9e6a; --bm-tint: #f1faf5; }
.card.text-white.bg-warning { --bm-accent: #e8a33d; --bm-tint: #fdf8ee; }
.card.text-white.bg-danger { --bm-accent: #d9534f; --bm-tint: #fdf2f2; }
.card.text-white.bg-secondary { --bm-accent: #8a9095; --bm-tint: #f6f7f8; }
.card.text-white.bg-dark { --bm-accent: var(--bmec-ink); --bm-tint: #f3f5f6; }
.card.text-white[class*="bg-"] h1, .card.text-white[class*="bg-"] h2, .card.text-white[class*="bg-"] h3,
.card.text-white[class*="bg-"] h4, .card.text-white[class*="bg-"] h5, .card.text-white[class*="bg-"] h6,
.card.text-white[class*="bg-"] .text-white, .card.text-white[class*="bg-"] p, .card.text-white[class*="bg-"] small {
    color: var(--bmec-ink) !important;
}
.card.text-white[class*="bg-"] h6, .card.text-white[class*="bg-"] p, .card.text-white[class*="bg-"] small { color: var(--bmec-muted) !important; }
.table-bordered > :not(caption) > * > * { border-color: #eef0f2; }
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: var(--bmec-teal-50); }
/* Coloured / gradient header bars on cards (59 views) → white header, coloured icon + accent edge.
   html body … beats page-level <style> blocks that set gradients with !important. */
html body .card > .card-header[class*="bg-"]:not(.bg-light):not(.bg-white):not(.bg-transparent):not([class*="bg-label"]) {
    background: var(--bmec-surface) !important;
    color: var(--bmec-ink) !important;
    border-bottom: 1px solid var(--bmec-border) !important;
    box-shadow: inset 3px 0 0 var(--bm-h, var(--bmec-teal));
    padding-top: .9rem; padding-bottom: .9rem;
}
html body .card > .card-header[class*="bg-"] :is(h1, h2, h3, h4, h5, h6, .card-title, .text-white, .text-dark, span, small, p) {
    color: inherit !important;
}
html body .card > .card-header[class*="bg-"]:not(.bg-light):not(.bg-white) :is(h1, h2, h3, h4, h5, h6, .card-title) {
    font-size: .95rem; font-weight: 600; display: flex; align-items: center; gap: .5rem; margin: 0;
}
html body .card > .card-header[class*="bg-"]:not(.bg-light):not(.bg-white) :is(i.bx, i.fas, i.fa, i.far, i.bi) {
    color: var(--bm-h, var(--bmec-teal)) !important;
}
html body .card > .card-header[class*="bg-"] .badge { color: var(--bmec-ink); }
.card-header.bg-primary, .card-header.bg-gradient-primary, .card-header.bg-dark { --bm-h: var(--bmec-teal-700); }
.card-header.bg-info, .card-header.bg-gradient-info, .card-header.bg-teal { --bm-h: var(--bmec-teal); }
.card-header.bg-success, .card-header.bg-gradient-success { --bm-h: #2e9e6a; }
.card-header.bg-warning, .card-header.bg-gradient-warning, .card-header.bg-orange { --bm-h: #e8a33d; }
.card-header.bg-danger, .card-header.bg-gradient-danger { --bm-h: #d9534f; }
.card-header.bg-secondary, .card-header.bg-gradient-secondary { --bm-h: #8a9095; }
.card-header.bg-purple, .card-header.bg-gradient-purple { --bm-h: #6c5fd3; }
/* DataTables (used on several detail pages) */
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select {
    border: 1px solid #dfe3e8; border-radius: 8px; padding: .3rem .6rem;
}
.dataTables_wrapper .dataTables_info { font-size: .8rem; color: var(--bmec-muted); }
.dataTables_wrapper .dataTables_length label, .dataTables_wrapper .dataTables_filter label {
    display: inline-flex; align-items: center; gap: .5rem; font-weight: 400; color: var(--bmec-muted); font-size: .82rem; margin: 0;
}
.dataTables_wrapper .dataTables_length select { width: auto; min-width: 70px; }
.dataTables_wrapper .dataTables_filter { text-align: right; }
.dataTables_wrapper .dataTables_filter input { margin-left: 0 !important; min-width: 220px; }
.dataTables_wrapper { overflow-x: auto; }
table.dataTable td, table.dataTable th { white-space: nowrap; }
.dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: 8px !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--bmec-teal-700) !important; border-color: var(--bmec-teal-700) !important; color: #fff !important;
}

@media (max-width: 575.98px) {
    .bm-record-hero { padding: 1rem; }
    .bm-record-title { font-size: 1.15rem; }
    .bm-info-row { grid-template-columns: 1fr; gap: .15rem; }
    .bm-record-actions { width: 100%; }
}

/* ── FullCalendar in the brand palette ─────────────────────────────────── */
.fc {
    --fc-button-bg-color: var(--bmec-teal-700); --fc-button-border-color: var(--bmec-teal-700);
    --fc-button-hover-bg-color: #006b7b; --fc-button-hover-border-color: #006b7b;
    --fc-button-active-bg-color: #005866; --fc-button-active-border-color: #005866;
    --fc-today-bg-color: rgba(0, 168, 192, .08); --fc-event-bg-color: var(--bmec-teal); --fc-event-border-color: var(--bmec-teal-700);
    --fc-border-color: var(--bmec-border); --fc-neutral-bg-color: var(--bmec-page);
    font-family: var(--bmec-font);
}
.fc .fc-button-primary, .fc .fc-button-primary:not(:disabled):active, .fc .fc-button-primary:not(:disabled).fc-button-active {
    background-color: var(--fc-button-bg-color); border-color: var(--fc-button-border-color); color: #fff;
    border-radius: 8px; font-weight: 600; font-size: .82rem; text-transform: capitalize; box-shadow: none;
}
.fc .fc-button-primary:hover { background-color: var(--fc-button-hover-bg-color); border-color: var(--fc-button-hover-border-color); }
.fc .fc-button-primary:not(:disabled):active, .fc .fc-button-primary:not(:disabled).fc-button-active { background-color: var(--fc-button-active-bg-color); }
.fc .fc-button-primary:focus { box-shadow: 0 0 0 3px rgba(0, 168, 192, .25) !important; }
.fc .fc-toolbar-title { font-size: 1.15rem; font-weight: 700; color: var(--bmec-ink); }
.fc .fc-col-header-cell-cushion, .fc .fc-daygrid-day-number { color: var(--bmec-ink); text-decoration: none; }
.fc .fc-day-today .fc-daygrid-day-number { background: var(--bmec-teal); color: #fff; border-radius: 999px; padding: 2px 8px; margin: 4px; }

/* To-dos list headers in the brand palette */
.todo-gradient-primary { background: linear-gradient(135deg, #06323a 0%, #0b5866 55%, #0a8fa4 100%) !important; }
.todo-gradient-success { background: linear-gradient(135deg, #1f7a50, #2e9e6a) !important; }

/* ---- Finance forms: type-in amounts (no spinner arrows), payment rows fit without scrolling, GST box ---- */
.fin-form input[type=number]::-webkit-outer-spin-button, .fin-form input[type=number]::-webkit-inner-spin-button,
.fin-modal input[type=number]::-webkit-outer-spin-button, .fin-modal input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fin-form input[type=number], .fin-modal input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.fin-pay-wrap { overflow: visible; }
.fin-pay-table { table-layout: fixed; width: 100%; }
.fin-pay-table th:nth-child(1) { width: 16%; } .fin-pay-table th:nth-child(2) { width: 23%; }
.fin-pay-table th:nth-child(3) { width: 12%; } .fin-pay-table th:nth-child(4) { width: 16%; }
.fin-pay-table th:nth-child(6) { width: 44px; }
.fin-pay-table td { padding-left: .3rem; padding-right: .3rem; }
@media (max-width: 767.98px) {
    .fin-pay-table thead { display: none; }
    .fin-pay-table, .fin-pay-table tbody { display: block; }
    .fin-pay-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: .6rem 0; border-bottom: 1px solid var(--bmec-border, #e5e7eb); }
    .fin-pay-table td { display: block; border: 0; padding: 0; }
    .fin-pay-table td:nth-child(5) { grid-column: 1 / -1; }
    .fin-pay-table td:last-child { grid-column: 1 / -1; text-align: right; }
}
.fin-gst { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; text-transform: uppercase; min-height: 42px; font-size: .95rem; }
.fin-gst::placeholder { text-transform: none; letter-spacing: normal; font-family: inherit; }
.fin-pct { position: relative; }
.fin-pct > input { padding-right: 1.7rem; }
.fin-pct > span { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); color: var(--bmec-muted, #6b7280); font-weight: 600; pointer-events: none; }
.fin-rem-table th:nth-child(1) { width: 20%; } .fin-rem-table th:nth-child(2) { width: 24%; }
.fin-rem-table th:nth-child(3) { width: auto; } .fin-rem-table th:nth-child(4) { width: 44px; }
@media (max-width: 767.98px) {
    .fin-rem-table td:nth-child(3) { grid-column: 1 / -1; }
}
.btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary:focus, .btn-outline-primary.active { color: #fff !important; }

/* Page-specific dark gradient headers set white text; headings inside must not take the global dark heading colour. */
:is(.login-banner, .ma-header, .ai-header, .aob-header, .la-header, .lb-header, .lt-modal-header, .ma-panel-header, .ot-header, .wfh-header, .wfh-my-header) :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) { color: inherit; }

.bm-kpi-note { display: block; margin-top: .3rem; line-height: 1.35; }

/* ── Top bar on phones/tablets ─────────────────────────────────────────────
   custom.css has an old "mobile navigation" rule that makes .navbar-nav-right 100% wide, stacks it in a
   column and makes its dropdowns position:static - that pushed the profile avatar off-screen. Undo it for
   the top bar and keep everything on one row that fits the screen. */
@media (max-width: 991.98px) {
    .layout-navbar .bm-search-trigger .bx.bx-search { display: inline-block; }
}
@media (max-width: 768px) {
    .layout-navbar .navbar-nav-right { flex-direction: row !important; align-items: center !important; width: auto !important; margin-left: auto; }
    .layout-navbar .navbar-nav-right .nav-item { width: auto; margin-bottom: 0; }
    .layout-navbar .navbar-nav-right .navbar-nav { gap: .25rem; }
    .layout-navbar .navbar-nav-right .nav-item.me-2 { margin-right: 0 !important; }
    .layout-navbar .navbar-nav-right .nav-link { padding-left: .35rem; padding-right: .35rem; }
    .layout-navbar.navbar-detached { padding-left: .75rem !important; padding-right: .75rem !important; gap: .5rem; }
    .layout-navbar .layout-menu-toggle { margin-right: 0 !important; }
    .layout-navbar .avatar { width: 34px; height: 34px; }
    /* Dropdowns open as a full-width sheet under the bar instead of off the edge */
    .layout-navbar .navbar-nav-right .dropdown-menu.show {
        position: fixed !important; inset: 72px 10px auto 10px !important; transform: none !important;
        width: auto !important; max-width: none; margin: 0 !important;
        max-height: calc(100vh - 90px); overflow-y: auto; z-index: 1100;
    }
}

/* Sidebar logo: the full logo is ~2:1, so at 150px wide it was 71px tall inside the 64px brand bar and got clipped. */
#layout-menu .app-brand-logo img.bm-logo-full { width: auto; max-width: 150px; max-height: 50px; object-fit: contain; }

/* Mobile drawer: custom.css caps .menu-container at 100vh-50px, leaving a gap under the drawer. Full height here. */
@media (max-width: 1199.98px) {
    #layout-menu.menu-container, #layout-menu { height: 100vh !important; height: 100dvh !important; max-height: none !important; }
    #layout-menu .app-brand { margin-top: 0 !important; flex-shrink: 0; }
}
/* Floating chat / notification-history buttons sat on top of the open mobile drawer. */
html.layout-menu-expanded .toast-history-btn, html.layout-menu-expanded .chat-img { display: none !important; }