/* =========================================================================
   BukMasta design system
   =========================================================================
   One visual language for the whole product: the business application, the
   platform administration, the sign-in pages and the customer portal.

   Loaded AFTER the vendor (NiceAdmin) stylesheet in every base template, so
   these rules win without needing !important on ordinary properties. Vendor
   rules that are themselves overly specific are re-stated here rather than
   fought elsewhere.

   Templates should not define colours, radii, shadows or spacing of their
   own. Reach for a token; if a token is missing, add it here.
   ========================================================================= */

:root {
  /* Brand ------------------------------------------------------------- */
  /* Taken from the logo: green #04b619, blue #034bb6, yellow #fffc00.
     Blue carries the interactive role because white on it reaches 8.6:1,
     while white on the brand green is only ~2.9:1 and fails contrast. Green
     leads visually — hero, accents, success — where contrast allows. */
  --bm-primary: #034bb6;
  --bm-primary-hover: #023a8f;
  --bm-primary-soft: #e6eefc;
  --bm-primary-ink: #012a6a;

  --bm-brand-green: #04b619;
  --bm-brand-green-deep: #02790f;   /* passes contrast for text on white */
  --bm-brand-green-soft: #e4f8e7;
  --bm-brand-blue: #034bb6;
  --bm-brand-yellow: #fffc00;

  /* Neutrals ---------------------------------------------------------- */
  --bm-ink: #17233d;
  --bm-ink-soft: #3d4a63;
  --bm-muted: #64748b;
  --bm-faint: #94a3b8;
  --bm-border: #e5eaf2;
  --bm-border-strong: #d3dbe8;
  --bm-surface: #ffffff;
  --bm-surface-sunken: #f6f8fc;
  --bm-canvas: #f4f6fb;
  --bm-rail: #04204f;

  /* Status ------------------------------------------------------------ */
  --bm-success: #04b619;
  --bm-success-soft: #e4f8e7;
  --bm-warning: #f59e0b;
  --bm-warning-soft: #fef4e5;
  --bm-danger: #ef4444;
  --bm-danger-soft: #fdecec;
  --bm-info: #0ea5e9;
  --bm-info-soft: #e6f6fe;

  /* Shape and depth --------------------------------------------------- */
  --bm-radius-sm: 0.4rem;
  --bm-radius: 0.65rem;
  --bm-radius-lg: 0.9rem;
  --bm-radius-pill: 999px;
  --bm-shadow-sm: 0 1px 2px rgba(4, 32, 79, 0.06);
  --bm-shadow: 0 2px 12px rgba(4, 32, 79, 0.08);
  --bm-shadow-lg: 0 18px 45px rgba(4, 32, 79, 0.18);

  /* Tactile button shadows: ambient base + hover lift + pressed flatten */
  --bm-shadow-btn: 0 1px 2px rgba(4, 32, 79, 0.08), 0 2px 4px rgba(4, 32, 79, 0.06);
  --bm-shadow-btn-hover: 0 2px 6px rgba(4, 32, 79, 0.12), 0 4px 12px rgba(4, 32, 79, 0.10);
  --bm-shadow-btn-pressed: 0 1px 1px rgba(4, 32, 79, 0.10);

  /* Multi-layered focus glow: inner ring + outer ambient */
  --bm-focus-ring: 0 0 0 2px var(--bm-surface), 0 0 0 4px rgba(3, 75, 182, 0.35), 0 0 0 6px rgba(3, 75, 182, 0.12);
  --bm-focus-ring-soft: 0 0 0 2px var(--bm-surface), 0 0 0 4px rgba(3, 75, 182, 0.18);

  /* Motion dynamics: snappy ease-out curves for dropdowns, flyouts, drawers */
  --bm-ease-snap: cubic-bezier(0.16, 1, 0.3, 1);
  --bm-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --bm-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --bm-dur-fast: 100ms;
  --bm-dur: 140ms;
  --bm-dur-slow: 200ms;

  /* Rhythm ------------------------------------------------------------ */
  --bm-space-1: 0.25rem;
  --bm-space-2: 0.5rem;
  --bm-space-3: 0.75rem;
  --bm-space-4: 1rem;
  --bm-space-5: 1.5rem;
  --bm-space-6: 2rem;

  /* Type -------------------------------------------------------------- */
  --bm-font: "Open Sans", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bm-font-heading: "Nunito", "Open Sans", system-ui, sans-serif;
  --bm-font-numeric: "Open Sans", "Roboto Mono", ui-monospace, SFMono-Regular, monospace;
}

/* =========================================================================
   Base
   ========================================================================= */

body {
  font-family: var(--bm-font);
  color: var(--bm-ink);
  background-color: var(--bm-canvas);
  font-size: 0.925rem;
  line-height: 1.55;
}

/* Many pages previously set their own body background. Neutralise the common
   value so a stray rule cannot produce a different grey per page. */
body[style*="background"] { background-color: var(--bm-canvas) !important; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--bm-font-heading);
  color: var(--bm-ink);
  font-weight: 700;
  letter-spacing: -0.01em;
}

h1, .h1 { font-size: 1.6rem; }
h2, .h2 { font-size: 1.35rem; }
h3, .h3 { font-size: 1.15rem; }
h4, .h4 { font-size: 1.02rem; }
h5, .h5 { font-size: 0.94rem; }
h6, .h6 { font-size: 0.85rem; }

a { color: var(--bm-primary); text-decoration: none; }
a:hover { color: var(--bm-primary-hover); text-decoration: underline; }

hr { border-color: var(--bm-border); opacity: 1; }

code, kbd, pre, samp { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; }
code { color: var(--bm-primary-ink); background: var(--bm-primary-soft); padding: 0.1em 0.35em; border-radius: var(--bm-radius-sm); }
pre code { background: transparent; padding: 0; }

.text-muted, .subtle { color: var(--bm-muted) !important; }
.text-faint { color: var(--bm-faint) !important; }

:focus-visible { outline: none; box-shadow: var(--bm-focus-ring); border-radius: var(--bm-radius-sm); }

/* =========================================================================
   Page frame: title, breadcrumb, section
   ========================================================================= */

.pagetitle { margin-bottom: var(--bm-space-3); }
.pagetitle h1 { font-size: 1.25rem; margin-bottom: 0.1rem; }

.breadcrumb {
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: 0.82rem;
}
.breadcrumb a { color: var(--bm-muted); }
.breadcrumb a:hover { color: var(--bm-primary); }
.breadcrumb-item.active { color: var(--bm-ink-soft); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--bm-faint); }

.section { padding-top: 0; }

/* A consistent header row for any page: title on the left, actions right. */
.bm-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bm-space-3);
  margin-bottom: var(--bm-space-3);
}
.bm-page-header .bm-page-heading { margin: 0 0 0.15rem; font-size: 1.2rem; }
.bm-page-header .bm-page-lede { margin: 0; color: var(--bm-muted); font-size: 0.86rem; max-width: 60ch; }
.bm-page-actions { display: flex; flex-wrap: wrap; gap: var(--bm-space-2); }

/* =========================================================================
   KPI tiles
   =========================================================================
   The figure a page leads with. Every module's overview was hand-rolling this
   card, so the label size, the number size and the trend colour drifted apart
   across the product. One component, one set of rules.

   Digits use tabular-nums so a column of figures lines up on the decimal
   point -- on a money screen that is legibility, not decoration. */

.bm-kpi__label {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bm-muted);
  margin: 0 0 0.3rem;
}
.bm-kpi__value {
  font-family: var(--bm-font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--bm-ink);
  margin: 0;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.bm-kpi__icon { font-size: 1.5rem; color: var(--bm-faint); flex: none; }
.bm-kpi__trend { font-size: 0.78rem; margin: 0.4rem 0 0; }
.bm-kpi .card-body { padding: var(--bm-space-3); }

/* On a narrow screen the icon is decoration competing for width the number
   needs. */
@media (max-width: 420px) {
  .bm-kpi__icon { display: none; }
}

/* =========================================================================
   Cards
   ========================================================================= */

.card {
  background: var(--bm-surface);
  border: 1px solid var(--bm-border);
  border-radius: var(--bm-radius-lg);
  box-shadow: var(--bm-shadow-sm);
  margin-bottom: var(--bm-space-3);
}

.card-body { padding: var(--bm-space-4); }

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--bm-border);
  padding: var(--bm-space-3) var(--bm-space-4);
  font-weight: 600;
}

.card-footer {
  background: var(--bm-surface-sunken);
  border-top: 1px solid var(--bm-border);
  padding: var(--bm-space-2) var(--bm-space-4);
}

/* The vendor theme puts a coloured, oversized title inside every card. */
.card-title {
  font-family: var(--bm-font-heading);
  color: var(--bm-ink);
  font-size: 0.98rem;
  font-weight: 700;
  padding: 0;
  margin: 0 0 var(--bm-space-3);
}
.card-title span { color: var(--bm-muted); font-weight: 400; font-size: 0.85rem; }

/* Metric tiles ------------------------------------------------------- */
.info-card .card-body,
.bm-stat .card-body { padding: var(--bm-space-3) var(--bm-space-4); }

.bm-stat-label {
  display: block;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bm-muted);
  font-weight: 700;
  margin-bottom: 0.2rem;
}
.bm-stat-value { font-size: 1.5rem; font-weight: 700; line-height: 1.2; color: var(--bm-ink); }
.bm-stat-note { font-size: 0.8rem; color: var(--bm-muted); }

.card-icon {
  width: 52px;
  height: 52px;
  background: var(--bm-primary-soft);
  color: var(--bm-primary);
  font-size: 1.4rem;
  flex-shrink: 0;
}

/* =========================================================================
   Buttons — tactile physics
   =========================================================================
   Every clickable element has physical weight. Normal states carry a soft,
   multi-layer ambient drop-shadow. Hovers lift the element and deepen the
   shadow in <100ms. Active/pressed states execute a crisp scale(0.97) to
   mimic hardware button depression.
   ========================================================================= */

.btn {
  border-radius: var(--bm-radius);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.5rem 0.95rem;
  border-width: 1px;
  box-shadow: var(--bm-shadow-btn);
  transition: background-color var(--bm-dur-fast) var(--bm-ease-out),
              border-color var(--bm-dur-fast) var(--bm-ease-out),
              color var(--bm-dur-fast) var(--bm-ease-out),
              box-shadow var(--bm-dur-fast) var(--bm-ease-out),
              transform var(--bm-dur-fast) var(--bm-ease-snap);
}
.btn:hover {
  box-shadow: var(--bm-shadow-btn-hover);
  transform: translateY(-1px);
}
.btn:active, .btn.active {
  transform: scale(0.97);
  box-shadow: var(--bm-shadow-btn-pressed);
}
.btn:focus, .btn:focus-visible { box-shadow: var(--bm-focus-ring); transform: none; }
.btn-sm { padding: 0.3rem 0.65rem; font-size: 0.8rem; border-radius: var(--bm-radius-sm); }
.btn-lg { padding: 0.7rem 1.3rem; font-size: 0.95rem; }

.btn-primary { background-color: var(--bm-primary); border-color: var(--bm-primary); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background-color: var(--bm-primary-hover); border-color: var(--bm-primary-hover); color: #fff; }

.btn-outline-primary { color: var(--bm-primary); border-color: var(--bm-border-strong); background: var(--bm-surface); }
.btn-outline-primary:hover { background: var(--bm-primary-soft); border-color: var(--bm-primary); color: var(--bm-primary-ink); }

.btn-secondary, .btn-light {
  background: var(--bm-surface);
  border-color: var(--bm-border-strong);
  color: var(--bm-ink-soft);
}
.btn-secondary:hover, .btn-light:hover { background: var(--bm-surface-sunken); color: var(--bm-ink); border-color: var(--bm-border-strong); }

.btn-outline-secondary { color: var(--bm-ink-soft); border-color: var(--bm-border-strong); background: var(--bm-surface); }
.btn-outline-secondary:hover { background: var(--bm-surface-sunken); color: var(--bm-ink); border-color: var(--bm-border-strong); }

.btn-success { background-color: var(--bm-success); border-color: var(--bm-success); color: #fff; }
.btn-danger { background-color: var(--bm-danger); border-color: var(--bm-danger); color: #fff; }
.btn-warning { background-color: var(--bm-warning); border-color: var(--bm-warning); color: #23306e; }
.btn-outline-danger { color: var(--bm-danger); border-color: #f3c3c3; background: var(--bm-surface); }
.btn-outline-danger:hover { background: var(--bm-danger-soft); border-color: var(--bm-danger); color: #b42318; }
.btn-outline-success { color: #0b8a52; border-color: #b9e6cf; background: var(--bm-surface); }
.btn-outline-success:hover { background: var(--bm-success-soft); border-color: var(--bm-success); color: #0b8a52; }

/* Icon-only buttons get a slightly tighter press */
.btn .bi, .btn i { transition: transform var(--bm-dur-fast) var(--bm-ease-snap); }
.btn:active .bi, .btn:active i { transform: scale(0.92); }

/* =========================================================================
   Forms
   ========================================================================= */

.form-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--bm-ink-soft);
  margin-bottom: 0.3rem;
}

.form-control, .form-select, .input-group-text, textarea.form-control {
  border-radius: var(--bm-radius);
  border: 1px solid var(--bm-border-strong);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: var(--bm-ink);
  background-color: var(--bm-surface);
  transition: border-color var(--bm-dur-fast) var(--bm-ease-out), box-shadow var(--bm-dur-fast) var(--bm-ease-out);
}
.form-control:focus, .form-select:focus {
  border-color: var(--bm-primary);
  box-shadow: var(--bm-focus-ring);
  outline: none;
}
.form-control::placeholder { color: var(--bm-faint); }
.form-control:disabled, .form-select:disabled, .form-control[readonly] {
  background-color: var(--bm-surface-sunken);
  color: var(--bm-muted);
}
.form-control-sm, .form-select-sm { padding: 0.3rem 0.55rem; font-size: 0.8rem; }
.form-text { font-size: 0.78rem; color: var(--bm-muted); }
.input-group-text { background: var(--bm-surface-sunken); color: var(--bm-muted); }

.form-check-input { border-color: var(--bm-border-strong); }
.form-check-input:checked { background-color: var(--bm-primary); border-color: var(--bm-primary); }
.form-check-input:focus { box-shadow: var(--bm-focus-ring); border-color: var(--bm-primary); }
.form-check-label { font-size: 0.875rem; color: var(--bm-ink-soft); }

.invalid-feedback, .errorlist { color: var(--bm-danger); font-size: 0.8rem; }
.errorlist { list-style: none; padding: 0; margin: 0.25rem 0 0; }
.is-invalid, .form-control.is-invalid, .form-select.is-invalid { border-color: var(--bm-danger); }

fieldset { border: 0; padding: 0; margin: 0 0 var(--bm-space-5); }
legend {
  font-family: var(--bm-font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--bm-ink);
  margin-bottom: var(--bm-space-3);
}

/* =========================================================================
   Tables — high-density accounting grid
   =========================================================================
   Compressed to a tight 4px/8px layout system so the user sees 30+ clean
   lines of transaction ledger data on a standard view without scrolling.
   Numbers use tabular-nums with strict right-alignment for data parsing.
   ========================================================================= */

.table {
  --bs-table-bg: transparent;
  color: var(--bm-ink);
  font-size: 0.84rem;
  margin-bottom: 0;
  vertical-align: middle;
  line-height: 1.4;
}

.table > thead > tr > th {
  background: var(--bm-surface-sunken);
  color: var(--bm-muted);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  border-bottom: 1px solid var(--bm-border);
  padding: 0.5rem 0.6rem;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}

.table > tbody > tr > td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--bm-border); }
.table > tbody > tr:last-child > td { border-bottom: 0; }
.table-hover > tbody > tr:hover > * { background-color: var(--bm-primary-soft); }

/* Explicit row-level hover state for clickable rows */
.table .clickable-row { cursor: pointer; transition: background-color var(--bm-dur-fast) var(--bm-ease-out); }
.table .clickable-row:hover { background-color: var(--bm-primary-soft); }

.table > tfoot > tr > td, .table > tfoot > tr > th {
  border-top: 1px solid var(--bm-border-strong);
  font-weight: 700;
  padding: 0.5rem 0.6rem;
}

/* Numbers line up only in a tabular face. Enforce right-alignment. */
.table td.text-end, .table th.text-end, .bm-numeric {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-align: right;
  white-space: nowrap;
}

/* Currency columns: tabular figures, right-aligned, no wrap */
.bm-currency {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-align: right;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

/* Fixed right-aligned action menu anchor */
.table .bm-action-col {
  width: 3.5rem;
  text-align: right;
  white-space: nowrap;
  position: relative;
}
.table .bm-action-col .dropdown-toggle::after { display: none; }

/* Sorting indicator */
.table th[data-sortable] { cursor: pointer; user-select: none; }
.table th[data-sortable]::after {
  content: "\2195";
  opacity: 0.3;
  margin-left: 0.3rem;
  font-size: 0.65rem;
}
.table th[data-sorted="asc"]::after { content: "\2191"; opacity: 0.7; }
.table th[data-sorted="desc"]::after { content: "\2193"; opacity: 0.7; }

/* Selected row state for multi-select tables. A left marker as well as the
   tint: on a dense ledger a pale fill alone is easy to lose, and the user is
   about to run a bulk action against exactly this set. */
.table .bm-row-selected > * { background-color: var(--bm-primary-soft) !important; }
.table .bm-row-selected:hover > * { background-color: var(--bm-primary-soft) !important; }
.table .bm-row-selected > td:first-child { box-shadow: inset 3px 0 0 var(--bm-primary); }

/* A row awaiting its undo window keeps its space but reads as gone. */
.table tr.bm-row-removing > * { opacity: 0.4; }

/* Respect a reduced-motion preference: the lift, slide and shimmer are all
   decorative, and vestibular sensitivity is not rare in an all-day tool. */
@media (prefers-reduced-motion: reduce) {
  .btn:hover { transform: none; }
  .btn:active, .btn.active { transform: none; }
  .bm-skeleton { animation: none; }
  .modal-content, .dropdown-menu { animation: none; }
  .bm-drawer, .bm-toast, .bm-drawer-backdrop { transition-duration: 1ms; }
}

/* Wide tables scroll inside their own container; the page never scrolls
   sideways. Applied broadly because most tables here are wide. */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* -------------------------------------------------------------------------
   Row height
   -------------------------------------------------------------------------
   Measured on the invoice ledger: rows came out at 48px, and the cell padding
   was not what set that. The tallest thing in the row was the action cell — a
   31px .btn-sm group — so the padding could be tightened all day without the
   row getting shorter. Controls that sit inside a data row are sized to the
   text line instead, which takes the row to roughly 36px and returns about a
   quarter of the visible ledger.

   Scoped to cells inside .table so buttons everywhere else keep their normal
   hit area; a toolbar button is a target, an in-row button is an affordance
   on a line the user is scanning past.
   ------------------------------------------------------------------------- */
.table > tbody > tr > td .btn-sm,
.table > tbody > tr > td .btn-group > .btn {
  padding: 0.15rem 0.45rem;
  font-size: 0.78rem;
  line-height: 1.35;
}
.table > tbody > tr > td .btn-group { vertical-align: middle; }

/* A second line inside a cell — "Total K…", "3 days overdue" — is context for
   the figure above it, not a row of its own. */
.table > tbody > tr > td > p:last-child {
  font-size: 0.72rem;
  line-height: 1.25;
  margin-bottom: 0;
}

/* An opt-in tier below the default for genuinely long ledgers. */
.table-dense > tbody > tr > td,
.table-dense > thead > tr > th { padding: 0.3rem 0.5rem; }
.table-dense { font-size: 0.8rem; }

/* -------------------------------------------------------------------------
   Server-side ledger (bm-ledger.js)
   -------------------------------------------------------------------------
   Its own footer and pager, matching the simple-datatables chrome above so a
   server-paged ledger and a client-paged one read as the same component.
   ------------------------------------------------------------------------- */
.bm-ledger__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--bm-space-2);
  padding: var(--bm-space-2) 0;
}
.bm-ledger__info { font-size: 0.78rem; color: var(--bm-muted); }
.bm-ledger__pager { display: flex; gap: 0.15rem; align-items: center; }
.bm-ledger__page {
  min-width: 1.9rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid transparent;
  border-radius: var(--bm-radius-sm);
  background: transparent;
  color: var(--bm-ink-soft);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background-color var(--bm-dur-fast) var(--bm-ease-out),
              color var(--bm-dur-fast) var(--bm-ease-out);
}
.bm-ledger__page:hover:not(:disabled) { background: var(--bm-primary-soft); color: var(--bm-primary-ink); }
.bm-ledger__page:disabled { color: var(--bm-faint); cursor: default; }
.bm-ledger__page.is-current { background: var(--bm-primary); color: #fff; font-weight: 700; }
.bm-ledger__page:focus-visible { outline: none; box-shadow: var(--bm-focus-ring); }
.bm-ledger__gap { color: var(--bm-faint); padding: 0 0.2rem; font-size: 0.8rem; }

/* Skeleton rows sit in the real table, so they inherit its column widths and
   the incoming data lands exactly where the placeholder was. */
.bm-ledger__skeleton-row > td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--bm-border); }
.bm-ledger__skeleton-row .bm-skeleton { height: 0.85rem; width: 100%; }
/* Vary the widths so it reads as text, not as a bar chart. */
.bm-ledger__skeleton-row:nth-child(odd) td:nth-child(3n) .bm-skeleton { width: 70%; }
.bm-ledger__skeleton-row:nth-child(even) td:nth-child(2n) .bm-skeleton { width: 55%; }

/* Report toolbar: export and print, sitting above the report table. */
.bm-table-tools { display: flex; gap: var(--bm-space-2); flex-wrap: wrap; margin-bottom: var(--bm-space-2); }

/* -------------------------------------------------------------------------
   Bulk-action toolbar
   -------------------------------------------------------------------------
   When rows are selected via data-bm-selectable, a contextual toolbar
   slides down from the top of the table area showing the count and
   available bulk actions (Delete, Export, Tag…). It replaces the page-
   header actions while active and retracts when the selection is cleared.
   ------------------------------------------------------------------------- */
.bm-bulk-bar {
  display: none;
  align-items: center;
  gap: var(--bm-space-3);
  padding: var(--bm-space-2) var(--bm-space-3);
  margin-bottom: var(--bm-space-2);
  background: var(--bm-primary-soft);
  border: 1px solid var(--bm-primary);
  border-radius: var(--bm-radius);
  font-size: 0.84rem;
  animation: bm-bulk-in var(--bm-dur) var(--bm-ease-snap);
}
.bm-bulk-bar.is-active { display: flex; }
.bm-bulk-bar .bm-bulk-count { font-weight: 700; color: var(--bm-primary-ink); }
.bm-bulk-bar .bm-bulk-actions { margin-left: auto; display: flex; gap: var(--bm-space-2); }
@keyframes bm-bulk-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Numeric input: right-aligned tabular figures for amount fields in
   journal entry and transaction forms. Keeps the decimal point visually
   anchored so the eye can scan a column of inputs as fast as a column
   of rendered cells. */
.bm-numeric-input {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* -------------------------------------------------------------------------
   simple-datatables chrome
   -------------------------------------------------------------------------
   The library's own control strips ship unstyled, so they inherited default
   form-control sizing: 54px above every ledger for a page-size select and a
   search box, and another 54px below for the count and the pager. On the
   invoice list that was 108px — more than two rows of data — spent on
   furniture. Brought down to the size of the controls themselves.
   ------------------------------------------------------------------------- */
.datatable-top,
.datatable-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--bm-space-2);
  padding: var(--bm-space-1) 0;
  font-size: 0.8rem;
  color: var(--bm-muted);
  line-height: 1.3;
}

.datatable-dropdown label { margin: 0; display: inline-flex; align-items: center; gap: 0.4rem; }
.datatable-selector,
.datatable-input {
  padding: 0.2rem 0.45rem;
  font-size: 0.8rem;
  border: 1px solid var(--bm-border-strong);
  border-radius: var(--bm-radius-sm);
  background: var(--bm-surface);
  color: var(--bm-ink);
  transition: border-color var(--bm-dur-fast) var(--bm-ease-out),
              box-shadow var(--bm-dur-fast) var(--bm-ease-out);
}
.datatable-selector:focus,
.datatable-input:focus { outline: none; border-color: var(--bm-primary); box-shadow: var(--bm-focus-ring-soft); }
.datatable-input { min-width: 12rem; }

.datatable-info { font-size: 0.78rem; color: var(--bm-muted); }

.datatable-pagination ul { display: flex; gap: 0.15rem; margin: 0; padding: 0; list-style: none; }
.datatable-pagination a {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: var(--bm-radius-sm);
  color: var(--bm-ink-soft);
  font-size: 0.8rem;
  text-decoration: none;
}
.datatable-pagination a:hover { background: var(--bm-primary-soft); color: var(--bm-primary-ink); text-decoration: none; }
.datatable-pagination .datatable-active a { background: var(--bm-primary); color: #fff; }

/* The library's sort arrows are absolutely positioned pseudo-elements that
   assume padding this theme has tightened; give them their column back. */
.datatable-sorter { padding-right: 1.1rem; }

/* =========================================================================
   Badges and status
   ========================================================================= */

.badge {
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  padding: 0.32em 0.6em;
  border-radius: var(--bm-radius-pill);
}
.badge.bg-primary { background-color: var(--bm-primary) !important; }
.badge.bg-success { background-color: var(--bm-success) !important; }
.badge.bg-danger  { background-color: var(--bm-danger) !important; }
.badge.bg-warning { background-color: var(--bm-warning) !important; color: #4a2f00 !important; }
.badge.bg-info    { background-color: var(--bm-info) !important; }
.badge.bg-light   { background-color: var(--bm-surface-sunken) !important; color: var(--bm-ink-soft) !important; border: 1px solid var(--bm-border); }
.badge.bg-secondary { background-color: #64748b !important; }

/* Soft status pills, the house style for record state. */
.bm-status {
  display: inline-block;
  padding: 0.25em 0.65em;
  border-radius: var(--bm-radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.5;
}
.bm-status-neutral { background: var(--bm-surface-sunken); color: var(--bm-ink-soft); }
.bm-status-info    { background: var(--bm-info-soft); color: #0369a1; }
.bm-status-success { background: var(--bm-success-soft); color: #0b8a52; }
.bm-status-warning { background: var(--bm-warning-soft); color: #a35c07; }
.bm-status-danger  { background: var(--bm-danger-soft); color: #b42318; }

/* =========================================================================
   Alerts
   ========================================================================= */

.alert {
  border-radius: var(--bm-radius);
  border: 1px solid transparent;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}
.alert-success { background: var(--bm-success-soft); border-color: #b9e6cf; color: #0b6b41; }
.alert-danger  { background: var(--bm-danger-soft); border-color: #f3c3c3; color: #b42318; }
.alert-warning { background: var(--bm-warning-soft); border-color: #f6dca6; color: #a35c07; }
.alert-info    { background: var(--bm-info-soft); border-color: #b6e5fa; color: #0369a1; }
.alert-light, .alert-secondary { background: var(--bm-surface-sunken); border-color: var(--bm-border); color: var(--bm-ink-soft); }

/* =========================================================================
   Modals, tabs, pagination
   ========================================================================= */

.modal-content { border: 0; border-radius: var(--bm-radius-lg); box-shadow: var(--bm-shadow-lg); animation: bm-modal-in var(--bm-dur) var(--bm-ease-snap); }
.modal-header { border-bottom: 1px solid var(--bm-border); padding: var(--bm-space-3) var(--bm-space-4); }
.modal-body { padding: var(--bm-space-4); }
.modal-footer { border-top: 1px solid var(--bm-border); padding: var(--bm-space-3) var(--bm-space-4); }
.modal-title { font-size: 1.05rem; }

@keyframes bm-modal-in {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.nav-tabs { border-bottom: 1px solid var(--bm-border); gap: 0.15rem; }
.nav-tabs .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--bm-muted);
  font-weight: 600;
  font-size: 0.875rem;
  /* A tab is a label with a hit target, not a button. The vertical padding
     here is paid on every tabbed ledger in the product, above the first row
     of data. */
  padding: 0.42rem 0.85rem;
  border-radius: 0;
}
.nav-tabs .nav-link:hover { color: var(--bm-ink); border-bottom-color: var(--bm-border-strong); }
.nav-tabs .nav-link.active { color: var(--bm-primary); background: transparent; border-bottom-color: var(--bm-primary); }

.nav-pills .nav-link { border-radius: var(--bm-radius); font-weight: 600; font-size: 0.86rem; color: var(--bm-ink-soft); }
.nav-pills .nav-link.active { background: var(--bm-primary); color: #fff; }

.pagination { --bs-pagination-border-radius: var(--bm-radius); font-size: 0.85rem; }
.page-link { color: var(--bm-ink-soft); border-color: var(--bm-border); padding: 0.4rem 0.7rem; }
.page-link:hover { background: var(--bm-primary-soft); color: var(--bm-primary-ink); border-color: var(--bm-border); }
.page-item.active .page-link { background: var(--bm-primary); border-color: var(--bm-primary); color: #fff; }
.page-item.disabled .page-link { color: var(--bm-faint); background: var(--bm-surface-sunken); }

.accordion-item { border: 1px solid var(--bm-border); border-radius: var(--bm-radius) !important; margin-bottom: var(--bm-space-2); overflow: hidden; }
.accordion-button { font-weight: 600; font-size: 0.9rem; color: var(--bm-ink); background: var(--bm-surface); }
.accordion-button:not(.collapsed) { background: var(--bm-primary-soft); color: var(--bm-primary-ink); box-shadow: none; }
.accordion-button:focus { box-shadow: var(--bm-focus-ring); }

.list-group-item { border-color: var(--bm-border); font-size: 0.875rem; padding: 0.7rem 0.9rem; }

.progress { background: var(--bm-surface-sunken); border-radius: var(--bm-radius-pill); height: 0.6rem; }
.progress-bar { background: var(--bm-primary); }

/* =========================================================================
   Empty states
   ========================================================================= */

.bm-empty {
  text-align: center;
  padding: var(--bm-space-6) var(--bm-space-4);
  color: var(--bm-muted);
}
.bm-empty-icon { font-size: 2.4rem; color: var(--bm-faint); display: block; margin-bottom: var(--bm-space-3); }
.bm-empty-title { font-family: var(--bm-font-heading); font-size: 1rem; font-weight: 700; color: var(--bm-ink); margin-bottom: 0.35rem; }
.bm-empty-body { font-size: 0.86rem; max-width: 46ch; margin: 0 auto var(--bm-space-4); }

/* =========================================================================
   Definition lists used for record summaries
   ========================================================================= */

dl.row dt { font-weight: 600; color: var(--bm-muted); font-size: 0.82rem; }
dl.row dd { color: var(--bm-ink); font-size: 0.875rem; margin-bottom: 0.5rem; }

/* =========================================================================
   Utilities
   ========================================================================= */

.bm-surface { background: var(--bm-surface); border: 1px solid var(--bm-border); border-radius: var(--bm-radius-lg); }
.bm-sunken { background: var(--bm-surface-sunken); }
.bm-divider { border-top: 1px solid var(--bm-border); margin: var(--bm-space-4) 0; }
.bm-sr-only, .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* =========================================================================
   Dropdowns — motion dynamics
   =========================================================================
   Dropdowns, flyouts, and contextual layers slide or scale into place
   using snappy cubic-bezier ease-out curves. 100–150ms, never sluggish.
   ========================================================================= */

.dropdown-menu {
  border: 1px solid var(--bm-border);
  border-radius: var(--bm-radius);
  box-shadow: var(--bm-shadow-lg);
  padding: 0.35rem;
  font-size: 0.875rem;
  animation: bm-dropdown-in var(--bm-dur) var(--bm-ease-snap);
  transform-origin: top right;
}
.dropdown-menu-end { transform-origin: top left; }

@keyframes bm-dropdown-in {
  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.dropdown-item { border-radius: var(--bm-radius-sm); padding: 0.45rem 0.6rem; color: var(--bm-ink-soft); transition: background-color var(--bm-dur-fast) var(--bm-ease-out), color var(--bm-dur-fast) var(--bm-ease-out); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--bm-primary-soft); color: var(--bm-primary-ink); }
.dropdown-item.text-danger:hover { background: var(--bm-danger-soft); color: #b42318; }
.dropdown-header { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bm-faint); font-weight: 700; }
.dropdown-divider { border-color: var(--bm-border); }

/* =========================================================================
   Slide-over drawer (right-side panel)
   =========================================================================
   Replaces center-screen modals for edit/detail flows so users can edit
   without losing visual track of the background ledger or dashboard.
   ========================================================================= */

.bm-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(640px, 100vw);
  z-index: 1070;
  display: flex;
  flex-direction: column;
  background: var(--bm-surface);
  box-shadow: -12px 0 48px rgba(4, 32, 79, 0.18);
  transform: translateX(100%);
  transition: transform var(--bm-dur-slow) var(--bm-ease-snap);
}
.bm-drawer.is-open { transform: translateX(0); }

.bm-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1060;
  background: rgba(4, 32, 79, 0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--bm-dur-slow) var(--bm-ease-out);
}
.bm-drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }

.bm-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bm-space-3);
  padding: var(--bm-space-3) var(--bm-space-4);
  border-bottom: 1px solid var(--bm-border);
  flex-shrink: 0;
}
.bm-drawer-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--bm-ink); }
.bm-drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--bm-radius-sm);
  background: transparent;
  color: var(--bm-muted);
  font-size: 1.2rem;
  cursor: pointer;
  transition: background-color var(--bm-dur-fast) var(--bm-ease-out);
}
.bm-drawer-close:hover { background: var(--bm-surface-sunken); color: var(--bm-ink); }

.bm-drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--bm-space-4);
  scrollbar-width: thin;
}

.bm-drawer-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--bm-space-2);
  padding: var(--bm-space-3) var(--bm-space-4);
  border-top: 1px solid var(--bm-border);
  background: var(--bm-surface-sunken);
  flex-shrink: 0;
}

@media (max-width: 767.98px) {
  .bm-drawer { width: 100vw; }
}

/* =========================================================================
   Modal-as-drawer
   =========================================================================
   A centre-screen dialog blanks the data the user is reasoning about. An
   accountant adding a ledger account wants the chart of accounts still in
   view — that is the context that tells them which code is free and where the
   new account belongs. Editing "over" the list, rather than instead of it, is
   the difference between filling in a form and doing bookkeeping.

   This is a presentation mode for an ordinary Bootstrap modal, not a separate
   component: add .bm-modal-drawer to a .modal and it enters from the right
   edge at full height. Every existing behaviour is untouched — data-bs-toggle,
   data-bs-dismiss, the backdrop, Bootstrap's focus trap and Esc, and any form
   handler already bound to it. Nothing about the markup or the JavaScript at
   the call site has to change.

   Confirmations and alerts deliberately stay centred. A destructive
   confirmation SHOULD take the screen — that is the point of it — and QBO and
   Xero both keep those centred too. The drawer is for the flows where the list
   behind it is the reason you are there.
   ========================================================================= */

.modal.bm-modal-drawer { padding-left: 0 !important; padding-right: 0 !important; }

.modal.bm-modal-drawer .modal-dialog {
  margin: 0 0 0 auto;
  max-width: min(560px, 100vw);
  width: 100%;
  height: 100%;
  min-height: 100%;
  transform: translateX(100%);
  transition: transform var(--bm-dur-slow) var(--bm-ease-snap);
}
.modal.bm-modal-drawer.show .modal-dialog { transform: translateX(0); }

.modal.bm-modal-drawer .modal-content {
  height: 100%;
  border-radius: 0;
  border: 0;
  box-shadow: -12px 0 48px rgba(4, 32, 79, 0.18);
  display: flex;
  flex-direction: column;
  /* The scale-in keyframe belongs to a centred dialog and fights the slide. */
  animation: none;
}

.modal.bm-modal-drawer .modal-header { flex-shrink: 0; }
.modal.bm-modal-drawer .modal-body { flex: 1 1 auto; overflow-y: auto; scrollbar-width: thin; }
.modal.bm-modal-drawer .modal-footer {
  flex-shrink: 0;
  background: var(--bm-surface-sunken);
  border-top: 1px solid var(--bm-border);
}

/* A modal may already carry .modal-dialog-centered or -scrollable from when it
   was a centred dialog. Both describe how to place a box in the middle of the
   screen and mean nothing against the right edge, so neutralise them here
   rather than making every call site strip its classes. */
.modal.bm-modal-drawer .modal-dialog.modal-dialog-centered {
  display: block;
  min-height: 100%;
}
.modal.bm-modal-drawer .modal-dialog.modal-dialog-scrollable .modal-content {
  max-height: 100%;
  overflow: hidden;
}

/* A wider tier for drawers carrying a table or a two-column form. */
.modal.bm-modal-drawer.bm-modal-drawer--wide .modal-dialog { max-width: min(820px, 100vw); }

@media (max-width: 575.98px) {
  .modal.bm-modal-drawer .modal-dialog { max-width: 100vw; }
}

@media (prefers-reduced-motion: reduce) {
  .modal.bm-modal-drawer .modal-dialog { transition-duration: 1ms; }
}

/* =========================================================================
   Skeleton loaders — structural placeholders
   =========================================================================
   Replace loading spinners and "loading..." text with exact component-
   geometry skeleton frames that mimic incoming data structures to
   prevent layout shifting during background fetching.
   ========================================================================= */

.bm-skeleton {
  display: block;
  background: linear-gradient(90deg,
    var(--bm-surface-sunken) 0%,
    var(--bm-border) 50%,
    var(--bm-surface-sunken) 100%);
  background-size: 200% 100%;
  border-radius: var(--bm-radius-sm);
  animation: bm-shimmer 1.4s ease-in-out infinite;
}

@keyframes bm-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Table row skeleton: mimics a 6-column ledger row */
.bm-skeleton-row {
  display: grid;
  grid-template-columns: 4rem 1fr 6rem 8rem 6rem 3rem;
  gap: 0.6rem;
  align-items: center;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--bm-border);
}
.bm-skeleton-row .bm-skeleton { height: 0.85rem; }

/* KPI card skeleton */
.bm-skeleton-kpi { height: 5rem; border-radius: var(--bm-radius-lg); }
.bm-skeleton-kpi .bm-skeleton { height: 1.2rem; margin-bottom: 0.4rem; }
.bm-skeleton-kpi .bm-skeleton:last-child { width: 60%; height: 0.8rem; }

/* Line skeleton for text blocks */
.bm-skeleton-line { height: 0.85rem; margin-bottom: 0.5rem; }
.bm-skeleton-line--sm { width: 40%; }
.bm-skeleton-line--md { width: 65%; }
.bm-skeleton-line--lg { width: 85%; }

/* =========================================================================
   Contextual slide-up alert (undo / confirmation safeguard)
   =========================================================================
   Low-friction slide-up toast for undo states and non-blocking
   confirmations. Assures security without breaking user flow.
   ========================================================================= */

.bm-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  z-index: 1080;
  display: flex;
  align-items: center;
  gap: var(--bm-space-3);
  max-width: min(560px, calc(100vw - 2rem));
  padding: var(--bm-space-3) var(--bm-space-4);
  border-radius: var(--bm-radius);
  box-shadow: var(--bm-shadow-lg);
  background: var(--bm-ink);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  transition: transform var(--bm-dur-slow) var(--bm-ease-snap);
}
.bm-toast.is-visible { transform: translateX(-50%) translateY(0); }
/* The message takes the slack so the action button stays pinned right even
   for a one-word toast. */
.bm-toast-text { flex: 1 1 auto; }
.bm-toast--success { background: #0b6b41; }
.bm-toast--danger  { background: #b42318; }
.bm-toast--warning { background: #a35c07; }
.bm-toast-action {
  margin-left: auto;
  padding: 0.25rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--bm-radius-pill);
  background: transparent;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--bm-dur-fast) var(--bm-ease-out);
}
.bm-toast-action:hover { background: rgba(255, 255, 255, 0.15); }

/* =========================================================================
   Keyboard velocity utilities
   =========================================================================
   Visible focus indicators for power-user tab navigation. High-contrast
   ring on focusable elements when navigating by keyboard.
   ========================================================================= */

.bm-kb-focus:focus-visible {
  outline: none;
  box-shadow: var(--bm-focus-ring);
  border-radius: var(--bm-radius-sm);
}

/* Skip-link already exists in app-navigation; this covers standalone pages */
.bm-skip-link {
  position: fixed;
  z-index: 10000;
  top: 8px;
  left: 12px;
  transform: translateY(-150%);
  padding: 0.65rem 1rem;
  border-radius: 0.5rem;
  background: #fff;
  color: var(--bm-ink);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.24);
  font-weight: 700;
  transition: transform var(--bm-dur) var(--bm-ease-snap);
}
.bm-skip-link:focus { transform: translateY(0); }

/* =========================================================================
   Print
   ========================================================================= */

@media print {
  body { background: #fff; }
  .card { box-shadow: none; border-color: #ccc; }
  .no-print, .btn, .app-sidebar, .app-domain-rail, .app-header, .pa-rail, .pa-panel, .pa-header { display: none !important; }
  .pa-main, #main { margin: 0 !important; padding: 0 !important; }
}

/* =========================================================================
   Application shell
   =========================================================================
   Replaces the structural half of the retired NiceAdmin theme. Scoped to
   `body.bm-app` so the marketing site and sign-in pages — which use the same
   `#header` id for a completely different layout — are untouched.
   ========================================================================= */

.bm-app #header,
.bm-app .header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 997;
  height: 60px;
  background: var(--bm-surface);
  border-bottom: 1px solid var(--bm-border);
  box-shadow: var(--bm-shadow-sm);
  padding-left: 20px;
  padding-right: 20px;
  transition: all 0.3s;
}

.bm-app .header .logo { width: 260px; display: flex; align-items: center; }
.bm-app .header .logo img { max-height: 32px; margin-right: 6px; }
.bm-app .header .logo span { font-size: 1.1rem; font-weight: 700; color: var(--bm-ink); font-family: var(--bm-font-heading); }

.bm-app .header .search-bar { min-width: 360px; padding: 0 20px; }
.bm-app .header .search-form { width: 100%; }
.bm-app .header .search-form input {
  border: 1px solid var(--bm-border-strong);
  font-size: 0.85rem;
  color: var(--bm-ink);
  border-radius: var(--bm-radius-pill);
  padding: 0.4rem 0.9rem;
  width: 100%;
  background: var(--bm-surface-sunken);
}
.bm-app .header .search-form input:focus,
.bm-app .header .search-form input:hover {
  outline: none;
  background: var(--bm-surface);
  border-color: var(--bm-primary);
  box-shadow: var(--bm-focus-ring);
}
.bm-app .header .search-form button {
  border: 0;
  background: none;
  padding: 0 0.4rem;
  margin-left: -2.2rem;
  color: var(--bm-muted);
}

.bm-app .header-nav ul { list-style: none; margin: 0; padding: 0; }
.bm-app .header-nav > ul { display: flex; align-items: center; gap: 0.1rem; }
/* One square hit target per icon rather than nav-link's 1rem side padding plus
   a right margin: same touch size, far less of the bar spent on gaps. */
.bm-app .header-nav .nav-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  margin-right: 0;
  border-radius: 0.6rem;
  font-size: 1.05rem;
  color: var(--bm-ink-soft);
}
.bm-app .header-nav .nav-icon:hover { color: var(--bm-primary); background: var(--bm-surface-sunken); }
.bm-app .header-nav .nav-profile { color: var(--bm-ink); height: 36px; padding: 0 0.35rem; border-radius: 0.6rem; }
.bm-app .header-nav .nav-profile:hover { background: var(--bm-surface-sunken); }
.bm-app .header-nav .nav-profile img { width: 28px; height: 28px; max-height: 28px; object-fit: cover; border-radius: 50%; background: var(--bm-primary-soft); }
.bm-app .header-nav .nav-profile span { font-size: 0.82rem; font-weight: 600; margin-left: 0; }
/* Anchored to the icon's top-right corner. The old left-hand offset put the
   count over the glyph and pushed into the next control. */
.bm-app .header-nav .badge-number {
  position: absolute;
  inset: 2px 2px auto auto;
  min-width: 16px;
  font-weight: 700;
  font-size: 0.62rem;
  line-height: 1.2;
  padding: 1px 4px;
  text-align: center;
  border-radius: var(--bm-radius-pill);
}
.bm-app .header-nav .notifications,
.bm-app .header-nav .messages { inset: 8px -15px auto auto !important; }
.bm-app .header-nav .notification-item,
.bm-app .header-nav .message-item { display: flex; align-items: center; padding: 0.6rem 0.75rem; transition: 0.2s; }
.bm-app .header-nav .notification-item i { font-size: 1.3rem; color: var(--bm-primary); margin-right: 0.75rem; }
.bm-app .header-nav .notification-item h4,
.bm-app .header-nav .message-item h4 { font-size: 0.85rem; font-weight: 700; margin-bottom: 0.15rem; }
.bm-app .header-nav .notification-item p,
.bm-app .header-nav .message-item p { font-size: 0.8rem; color: var(--bm-muted); margin-bottom: 0; }
.bm-app .header-nav .notification-item:hover,
.bm-app .header-nav .message-item:hover { background: var(--bm-surface-sunken); }
.bm-app .header-nav .message-item img { margin-right: 0.75rem; max-height: 40px; border-radius: 50%; }

.bm-app .toggle-sidebar-btn { font-size: 1.75rem; padding-left: 10px; cursor: pointer; color: var(--bm-ink); }

.bm-app .sidebar {
  position: fixed;
  top: 60px;
  left: 0;
  bottom: 0;
  width: 300px;
  z-index: 996;
  padding: 20px;
  overflow-y: auto;
  scrollbar-width: thin;
  background: var(--bm-surface);
  border-right: 1px solid var(--bm-border);
  transition: all 0.3s;
}
.bm-app .sidebar::-webkit-scrollbar { width: 6px; }
.bm-app .sidebar::-webkit-scrollbar-thumb { background: var(--bm-border-strong); border-radius: var(--bm-radius-pill); }

.bm-app .sidebar-nav { padding: 0; margin: 0; list-style: none; }
.bm-app .sidebar-nav li { padding: 0; margin: 0; list-style: none; }
.bm-app .sidebar-nav .nav-heading {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bm-faint);
  font-weight: 700;
  margin: 0.9rem 0 0.35rem;
}
.bm-app .sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--bm-ink-soft);
  padding: 0.5rem 0.7rem;
  border-radius: var(--bm-radius);
  transition: 0.2s;
}
.bm-app .sidebar-nav .nav-link i { font-size: 1.05rem; }
.bm-app .sidebar-nav .nav-link:hover { background: var(--bm-primary-soft); color: var(--bm-primary-ink); text-decoration: none; }
.bm-app .sidebar-nav .nav-link.active,
.bm-app .sidebar-nav .nav-link:not(.collapsed) { background: var(--bm-primary-soft); color: var(--bm-primary-ink); }
.bm-app .sidebar-nav .nav-content { padding: 0.2rem 0 0.4rem 0.6rem; margin: 0; list-style: none; }
.bm-app .sidebar-nav .nav-content a {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.84rem;
  color: var(--bm-muted);
  padding: 0.35rem 0.6rem;
  border-radius: var(--bm-radius-sm);
}
.bm-app .sidebar-nav .nav-content a:hover,
.bm-app .sidebar-nav .nav-content a.active { color: var(--bm-primary); background: var(--bm-primary-soft); text-decoration: none; }

/* Sticky-footer shell. The body is a column so a short page still pushes the
   footer down to the bottom edge of the viewport, while a long page lets the
   content carry it below the fold. The header, sidebar, backdrop and
   back-to-top button are all position: fixed, so they stay out of this flow. */
.bm-app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.bm-app #main {
  flex: 1 0 auto;
  margin-top: 60px;
  margin-left: 300px;
  padding: 14px 18px;
  transition: all 0.3s;
}

.bm-app #footer {
  flex: 0 0 auto;
  margin-top: auto;
  margin-left: 300px;
  padding: 12px 18px;
  font-size: 0.82rem;
  color: var(--bm-muted);
  background: var(--bm-surface);
  border-top: 1px solid var(--bm-border);
  transition: all 0.3s;
}

@media (max-width: 1199px) {
  .bm-app #main, .bm-app #footer { margin-left: 0; padding: 14px; }
  .bm-app .sidebar { left: -300px; }
  .bm-app .header .search-bar { min-width: auto; }
  .bm-app .header .logo { width: auto; }
}

.bm-app .back-to-top {
  position: fixed;
  right: 15px;
  bottom: 15px;
  z-index: 996;
  width: 40px;
  height: 40px;
  border-radius: var(--bm-radius);
  background: var(--bm-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--bm-shadow);
}
.bm-app .back-to-top:hover { background: var(--bm-primary-hover); color: #fff; }

/* Legacy dashboard component names kept working, restyled to the system ---- */
.bm-app .info-card h6 { font-size: 1.5rem; font-weight: 700; color: var(--bm-ink); margin: 0; }
.bm-app .sales-card .card-icon { background: var(--bm-primary-soft); color: var(--bm-primary); }
.bm-app .revenue-card .card-icon { background: var(--bm-success-soft); color: #0b8a52; }
.bm-app .customers-card .card-icon { background: var(--bm-warning-soft); color: #a35c07; }

.bm-app .filter { position: absolute; right: 0; top: 0; }
.bm-app .filter .icon { color: var(--bm-faint); padding-right: 20px; padding-bottom: 5px; transition: 0.3s; font-size: 1rem; }
.bm-app .filter .icon:hover, .bm-app .filter .icon:focus { color: var(--bm-primary); }
.bm-app .filter .dropdown-header { padding: 8px 15px 0 15px; }
.bm-app .filter .dropdown-header h6 { text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.06em; color: var(--bm-faint); margin-bottom: 0; }

.bm-app .activity .activity-item .activite-label { color: var(--bm-muted); position: relative; flex-shrink: 0; flex-grow: 0; min-width: 64px; font-size: 0.8rem; }
.bm-app .activity .activity-item .activity-badge {
  margin-top: 3px;
  z-index: 1;
  font-size: 11px;
  line-height: 0;
  border-radius: 50%;
  flex-shrink: 0;
  border: 3px solid var(--bm-surface);
  flex-grow: 0;
}
.bm-app .activity .activity-item .activity-content { padding-left: 10px; padding-bottom: 20px; font-size: 0.86rem; }

.bm-app .news h4 { font-size: 0.9rem; font-weight: 700; margin-bottom: 5px; }
.bm-app .news p { font-size: 0.82rem; color: var(--bm-muted); margin-bottom: 0; }

.bm-app .recent-sales, .bm-app .top-selling { font-size: 0.86rem; }

.bm-app .profile-card img { max-width: 120px; border-radius: 50%; }
.bm-app .profile-overview .label { font-weight: 600; color: var(--bm-muted); font-size: 0.82rem; }

/* =========================================================================
   Settings sub-navigation
   ========================================================================= */

.bm-settings-link {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.6rem;
  border-radius: var(--bm-radius);
  color: var(--bm-ink-soft);
  font-size: 0.86rem;
  font-weight: 500;
  text-decoration: none;
}
.bm-settings-link i { font-size: 1rem; color: var(--bm-faint); width: 1.15rem; text-align: center; }
.bm-settings-link:hover { background: var(--bm-surface-sunken); color: var(--bm-ink); text-decoration: none; }
.bm-settings-link.active { background: var(--bm-primary-soft); color: var(--bm-primary-ink); font-weight: 600; }
.bm-settings-link.active i { color: var(--bm-primary); }

/* =========================================================================
   Density
   =========================================================================
   Screen space is scarce: on a laptop every wasted 24px is a table row the
   user has to scroll for. Bootstrap's level-4 and level-5 vertical spacers
   (1.5rem / 3rem) are the main source of the hand-width gaps between blocks,
   and they are used in hundreds of templates, so they are clamped once here
   for the application shells rather than edited template by template.

   Horizontal spacing (ms-*, me-*, px-*) is deliberately untouched: it does
   not cost vertical space and it is what keeps inline controls apart. */

.bm-app #main .mt-5, .pa-main .mt-5,
.bm-app #main .my-5, .pa-main .my-5 { margin-top: 1.5rem !important; }
.bm-app #main .mb-5, .pa-main .mb-5,
.bm-app #main .my-5, .pa-main .my-5 { margin-bottom: 1.5rem !important; }
.bm-app #main .pt-5, .pa-main .pt-5,
.bm-app #main .py-5, .pa-main .py-5 { padding-top: 1.5rem !important; }
.bm-app #main .pb-5, .pa-main .pb-5,
.bm-app #main .py-5, .pa-main .py-5 { padding-bottom: 1.5rem !important; }
.bm-app #main .p-5, .pa-main .p-5 { padding: 1.5rem !important; }

.bm-app #main .mt-4, .pa-main .mt-4,
.bm-app #main .my-4, .pa-main .my-4 { margin-top: 1rem !important; }
.bm-app #main .mb-4, .pa-main .mb-4,
.bm-app #main .my-4, .pa-main .my-4 { margin-bottom: 1rem !important; }
.bm-app #main .pt-4, .pa-main .pt-4,
.bm-app #main .py-4, .pa-main .py-4 { padding-top: 1rem !important; }
.bm-app #main .pb-4, .pa-main .pb-4,
.bm-app #main .py-4, .pa-main .py-4 { padding-bottom: 1rem !important; }
.bm-app #main .p-4, .pa-main .p-4 { padding: 1rem !important; }

/* A trailing card in a column should not double its own margin with the
   section's; the shell's own padding closes the page out. */
.bm-app #main > .section > .container-fluid > .row:last-child .card:last-child { margin-bottom: 0; }

/* Section headings inside pages: enough air to group, not to separate. */
.bm-app #main .section + .section { margin-top: var(--bm-space-4); }