/* =========================================================================
   Brucely theme: the Admin UI kit (indigo, navy, Schibsted Grotesk +
   Instrument Sans) applied on top of the Minia/Bootstrap 5 base.
   Loaded after app.min.css on every page (views/partials/theme.ejs), so it
   restyles existing markup without changing it.
   ========================================================================= */

:root {
  --bk-indigo: #3b5bd4;
  --bk-indigo-hover: #2a44bc;
  --bk-indigo-light: #5b7deb;
  --bk-navy: #0e1528;
  --bk-navy-2: #1a233c;
  --bk-navy-hover: #232d47;
  --bk-tint: #edf2fc;
  --bk-tint-2: #e6eeff;
  --bk-canvas: #f5f7fb;
  --bk-surface-2: #f9fafd;
  --bk-border: #e2e4eb;
  --bk-border-soft: #eceef4;
  --bk-input: #dbdee5;
  --bk-muted: #5c6375;
  --bk-body-2: #414758;
  --bk-side-text: #a6aec2;
  --bk-success: #008856; --bk-success-bg: #d9f7e5; --bk-success-fg: #005e37;
  --bk-warning: #df911a; --bk-warning-bg: #fff0cc; --bk-warning-fg: #8e5400;
  --bk-danger: #d73337;  --bk-danger-bg: #ffe7e4;  --bk-danger-fg: #b32228;
  --bk-font: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bk-display: 'Schibsted Grotesk', 'Instrument Sans', system-ui, sans-serif;
  --bk-radius: 9px;
  --bk-radius-card: 12px;
  --bk-shadow-pop: 0 12px 32px rgba(14, 21, 40, 0.14), 0 0 0 1px var(--bk-border);
  --bk-shadow-hero: 6px 6px 0 var(--bk-navy);

  /* Bootstrap / Minia tokens */
  --bs-primary: #3b5bd4;
  --bs-primary-rgb: 59, 91, 212;
  --bs-success: #008856;
  --bs-success-rgb: 0, 136, 86;
  --bs-warning: #df911a;
  --bs-warning-rgb: 223, 145, 26;
  --bs-danger: #d73337;
  --bs-danger-rgb: 215, 51, 55;
  --bs-info: #5b7deb;
  --bs-info-rgb: 91, 125, 235;
  --bs-dark: #0e1528;
  --bs-dark-rgb: 14, 21, 40;
  --bs-secondary: #5c6375;
  --bs-secondary-rgb: 92, 99, 117;
  --bs-body-font-family: var(--bk-font);
  --bs-body-color: #0e1528;
  --bs-body-bg: #f5f7fb;
  --bs-border-color: #e2e4eb;
  --bs-link-color: #3b5bd4;
  --bs-link-hover-color: #2a44bc;
  --bs-sidebar-bg: #0e1528;
  --bs-sidebar-dark-bg: #0e1528;
  --bs-sidebar-border-color: #0e1528;
  --bs-sidebar-menu-item-color: #a6aec2;
  --bs-sidebar-menu-sub-item-color: #a6aec2;
  --bs-sidebar-menu-item-icon-color: #a6aec2;
  --bs-sidebar-menu-item-hover-color: #ffffff;
  --bs-sidebar-menu-item-active-color: #ffffff;
  --bs-sidebar-menu-item-active-bg-color: #3b5bd4;
  --bs-header-bg: #ffffff;
  --bs-header-item-color: #414758;
}

/* ---------- Base ---------- */
html, body { font-family: var(--bk-font); }
body {
  background: var(--bk-canvas);
  color: var(--bk-navy);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.card-title, .page-title-box h4, .modal-title {
  font-family: var(--bk-display);
  color: var(--bk-navy);
  letter-spacing: -0.02em;
}
a { color: var(--bk-indigo); }
a:hover { color: var(--bk-indigo-hover); }
.text-primary { color: var(--bk-indigo) !important; }
.text-muted { color: var(--bk-muted) !important; }
.bg-primary { background-color: var(--bk-indigo) !important; }
.bg-dark { background-color: var(--bk-navy) !important; }
.bg-light { background-color: var(--bk-tint) !important; }
::selection { background: var(--bk-tint-2); }

/* ---------- Layout ---------- */
.main-content, .page-content { background: var(--bk-canvas); }
.page-content { padding-top: calc(70px + 24px); }
.page-title-box { padding-bottom: 20px; }
.page-title-box h4 {
  font-size: 28px !important;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-transform: none;
}
.footer {
  background: transparent;
  color: var(--bk-muted);
  border-top: 1px solid var(--bk-border-soft);
  font-size: 13px;
}
.footer a span { color: var(--bk-muted) !important; }

/* ---------- Topbar ---------- */
#page-topbar {
  background: #fff;
  border-bottom: 1px solid var(--bk-border);
  box-shadow: none;
}
#page-topbar .navbar-brand-box {
  background: var(--bk-navy);
  border-right: 1px solid var(--bk-navy);
  display: flex;
  align-items: center;
}
#page-topbar .navbar-brand-box .logo { display: none; }
.bk-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--bk-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.03em;
  color: #fff !important;
  text-decoration: none;
  line-height: 1;
}
.bk-brand:hover { color: #fff !important; }
.bk-mark { position: relative; width: 22px; height: 22px; flex: 0 0 22px; display: inline-block; }
.bk-mark::before, .bk-mark::after {
  content: ''; position: absolute; top: 4px; width: 14px; height: 14px; border-radius: 50%;
}
.bk-mark::before { left: 0; background: var(--bk-indigo-light); }
.bk-mark::after { right: 0; background: #fff; opacity: 0.9; mix-blend-mode: screen; }
.bk-mark.on-light::before { background: var(--bk-indigo); }
.bk-mark.on-light::after { background: var(--bk-navy); opacity: 1; mix-blend-mode: multiply; }
body[data-sidebar-size="sm"] .bk-brand .bk-brand-text { display: none; }

#page-topbar .header-item { color: var(--bk-body-2); }
#page-topbar .header-item.bg-light-subtle { background: transparent !important; border-color: var(--bk-border-soft) !important; }
#vertical-menu-btn { color: var(--bk-body-2); }
.bk-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--bk-indigo); color: #fff;
  display: inline-grid; place-items: center;
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  flex: 0 0 auto;
}
.bk-avatar.sm { width: 26px; height: 26px; font-size: 10px; }
.bk-avatar.soft { background: var(--bk-tint); color: var(--bk-navy); }
.bk-org-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: var(--bk-radius);
  border: 1px solid var(--bk-border); background: var(--bk-surface-2);
  font-size: 13px; font-weight: 600; color: var(--bk-navy) !important;
  text-decoration: none; white-space: nowrap;
}
a.bk-org-chip:hover { background: var(--bk-tint); }
.bk-org-chip .bk-org-initial {
  width: 22px; height: 22px; border-radius: 6px; background: var(--bk-indigo); color: #fff;
  display: grid; place-items: center; font-size: 11px; font-weight: 800;
}
.bk-bell {
  position: relative; width: 36px; height: 36px; border-radius: var(--bk-radius);
  border: 1px solid var(--bk-border); background: #fff; display: grid; place-items: center;
  color: var(--bk-navy) !important; margin: 0 6px;
}
.bk-bell:hover { background: var(--bk-tint); }
.bk-bell .bk-dot {
  position: absolute; top: -5px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--bk-danger); color: #fff; border: 2px solid #fff;
  font-size: 10px; font-weight: 700; display: grid; place-items: center; line-height: 1;
}

/* Global date range chip */
#globalDateRangeDropdown {
  background: var(--bk-surface-2) !important; border: 1px solid var(--bk-border) !important;
  border-radius: var(--bk-radius) !important; font-weight: 600; color: var(--bk-navy);
}

/* ---------- Sidebar ---------- */
.vertical-menu {
  background: var(--bk-navy) !important;
  border-right: 0 !important;
  box-shadow: none !important;
}
#sidebar-menu { padding: 12px 12px 90px; }
.bk-workspace {
  display: flex; align-items: center; gap: 10px;
  margin: 4px 0 14px; padding: 10px; border-radius: 10px;
  background: var(--bk-navy-2); color: #fff !important; font-size: 13px; text-decoration: none;
}
a.bk-workspace:hover { background: var(--bk-navy-hover); color: #fff !important; }
.bk-workspace .bk-ws-initial {
  width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px; background: var(--bk-indigo);
  display: grid; place-items: center; font-weight: 800; font-size: 12px; color: #fff;
}
.bk-workspace .bk-ws-name { font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-workspace .bk-ws-sub { color: var(--bk-side-text); font-size: 12px; }
.bk-workspace .bk-ws-switch { margin-left: auto; color: var(--bk-side-text); }
body[data-sidebar-size="sm"] .bk-workspace { display: none; }

#sidebar-menu ul li a {
  color: var(--bk-side-text) !important;
  border-radius: 9px;
  padding: 10px 12px !important;
  margin: 1px 0;
  font-size: 14px;
  font-weight: 500;
  display: flex; align-items: center; gap: 12px;
  transition: background .15s, color .15s;
}
#sidebar-menu ul li a i,
#sidebar-menu ul li a svg { color: inherit !important; stroke: currentColor; min-width: 18px; font-size: 18px; width: 18px; height: 18px; }
#sidebar-menu ul li a:hover { background: var(--bk-navy-hover); color: #fff !important; }
#sidebar-menu ul li.mm-active > a,
#sidebar-menu ul li a.active,
#sidebar-menu ul li a.bk-active {
  background: var(--bk-indigo) !important;
  color: #fff !important;
  font-weight: 600;
}
#sidebar-menu .menu-title {
  color: #6e7891 !important;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 16px 12px 6px !important;
}
.vertical-menu p[style*="position: fixed"] { color: #6e7891 !important; }

/* ---------- Cards ---------- */
.card {
  border: 1px solid var(--bk-border);
  border-radius: var(--bk-radius-card);
  box-shadow: none;
  margin-bottom: 20px;
  background: #fff;
}
.card-header {
  background: #fff;
  border-bottom: 1px solid var(--bk-border-soft);
  border-radius: var(--bk-radius-card) var(--bk-radius-card) 0 0 !important;
  padding: 14px 18px;
}
.card-title { font-size: 16px; font-weight: 700; }
.card-body { padding: 18px; }
.card.border-primary { border-color: var(--bk-indigo) !important; }
.card.border-danger { border-color: var(--bk-danger-bg) !important; }
/* Highlighted KPI tile (Margin / Profit) */
.card.bg-primary, .card.bk-kpi-hero {
  background: var(--bk-indigo) !important; border-color: var(--bk-indigo) !important; color: #fff;
}
.card.bg-primary *, .card.bk-kpi-hero * { color: #fff !important; }

/* ---------- Buttons ---------- */
.btn {
  border-radius: var(--bk-radius);
  font-weight: 600;
  font-family: var(--bk-font);
  box-shadow: none !important;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-sm { border-radius: 8px; }
.btn-primary { background: var(--bk-indigo); border-color: var(--bk-indigo); color: #fff; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active {
  background: var(--bk-indigo-hover) !important; border-color: var(--bk-indigo-hover) !important; color: #fff !important;
}
.btn-dark { background: var(--bk-navy); border-color: var(--bk-navy); }
.btn-dark:hover { background: var(--bk-navy-hover); border-color: var(--bk-navy-hover); }
.btn-outline-primary { color: var(--bk-indigo); border-color: var(--bk-indigo); }
.btn-outline-primary:hover { background: var(--bk-indigo); border-color: var(--bk-indigo); color: #fff; }
.btn-light, .btn-secondary, .btn-outline-secondary, .btn-outline-dark {
  background: #fff; border: 1px solid var(--bk-input); color: var(--bk-navy);
}
.btn-light:hover, .btn-secondary:hover, .btn-outline-secondary:hover, .btn-outline-dark:hover {
  background: var(--bk-tint); border-color: var(--bk-input); color: var(--bk-navy);
}
.btn-danger { background: var(--bk-danger); border-color: var(--bk-danger); }
.btn-outline-danger { color: var(--bk-danger); border-color: #f2b8b8; }
.btn-outline-danger:hover { background: var(--bk-danger); border-color: var(--bk-danger); color: #fff; }
.btn-success { background: var(--bk-success); border-color: var(--bk-success); }
.btn-warning { background: var(--bk-warning); border-color: var(--bk-warning); color: var(--bk-navy); }
.btn-info { background: var(--bk-indigo-light); border-color: var(--bk-indigo-light); color: #fff; }
.btn-link { color: var(--bk-indigo); font-weight: 600; text-decoration: none; }
.btn:disabled, .btn.disabled { background: var(--bk-border-soft) !important; border-color: var(--bk-border-soft) !important; color: var(--bk-muted) !important; opacity: 1; }
/* Hero action: navy offset shadow, one per screen */
.bk-btn-hero {
  background: #fff !important; color: var(--bk-navy) !important;
  border: 1.5px solid var(--bk-navy) !important; box-shadow: 4px 4px 0 var(--bk-navy) !important;
}
.dt-buttons .btn, .buttons-html5, .buttons-print, .buttons-colvis {
  background: #fff !important; color: var(--bk-navy) !important; border: 1px solid var(--bk-input) !important;
  border-radius: 0 !important; font-size: 13px;
}
.dt-buttons .btn:first-child { border-radius: 8px 0 0 8px !important; }
.dt-buttons .btn:last-child { border-radius: 0 8px 8px 0 !important; }
.dt-buttons .btn:hover { background: var(--bk-tint) !important; }

/* ---------- Badges (soft pills) ---------- */
.badge {
  border-radius: 999px;
  font-weight: 600;
  font-size: 11.5px;
  padding: 0.38em 0.75em;
  letter-spacing: 0;
}
.badge.bg-success, .badge.bg-soft-success, .badge.badge-soft-success { background: var(--bk-success-bg) !important; color: var(--bk-success-fg) !important; }
.badge.bg-warning, .badge.bg-soft-warning, .badge.badge-soft-warning { background: var(--bk-warning-bg) !important; color: var(--bk-warning-fg) !important; }
.badge.bg-danger, .badge.bg-soft-danger, .badge.badge-soft-danger { background: var(--bk-danger-bg) !important; color: var(--bk-danger-fg) !important; }
.badge.bg-info, .badge.bg-primary-subtle, .badge.bg-soft-primary, .badge.badge-soft-primary { background: var(--bk-tint-2) !important; color: var(--bk-indigo-hover) !important; }
.badge.bg-primary { background: var(--bk-indigo) !important; color: #fff !important; }
.badge.bg-secondary, .badge.bg-light, .badge.bg-soft-secondary { background: var(--bk-border-soft) !important; color: var(--bk-muted) !important; }
.badge.bg-dark { background: var(--bk-navy) !important; color: #fff !important; }
.badge.rounded-pill.bg-danger.position-absolute { background: var(--bk-danger) !important; color: #fff !important; }

/* ---------- Forms ---------- */
.form-control, .form-select, .choices__inner, .input-group-text {
  border-radius: 8px;
  border: 1px solid var(--bk-input);
  color: var(--bk-navy);
  font-size: 14px;
  background-color: #fff;
}
.form-control::placeholder { color: #8a91a3; }
.form-control:focus, .form-select:focus {
  border-color: var(--bk-indigo);
  box-shadow: 0 0 0 3px rgba(59, 91, 212, 0.15);
}
.form-control:disabled, .form-control[readonly], .form-select:disabled { background: var(--bk-border-soft); color: var(--bk-muted); }
.form-control.is-invalid { border-color: var(--bk-danger); }
.input-group-text { background: var(--bk-surface-2); color: var(--bk-muted); }
.form-label { font-weight: 600; font-size: 13px; color: var(--bk-navy); margin-bottom: 6px; }
.form-text { color: var(--bk-muted); font-size: 12px; }
.form-check-input:checked { background-color: var(--bk-indigo); border-color: var(--bk-indigo); }
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(59, 91, 212, 0.15); border-color: var(--bk-indigo); }
.form-switch .form-check-input { width: 2.4em; height: 1.3em; }

/* ---------- Tables ---------- */
.table { color: var(--bk-navy); font-size: 13.5px; --bs-table-hover-bg: var(--bk-surface-2); }
.table > :not(caption) > * > * { padding: 11px 14px; border-bottom-color: var(--bk-border-soft); }
.table thead th, .table thead td, .table .table-light th, .table-light {
  background: var(--bk-canvas) !important;
  color: var(--bk-muted) !important;
  font-weight: 600;
  font-size: 12px;
  border-bottom: 1px solid var(--bk-border-soft) !important;
  white-space: nowrap;
}
.table-bordered, .table-bordered > :not(caption) > * > * { border-color: var(--bk-border-soft); }
.table-bordered { border-radius: var(--bk-radius-card); overflow: hidden; }
.table tfoot th, .table tfoot td { background: #fff; font-weight: 700; border-top: 1.5px solid var(--bk-navy); }
table.dataTable tbody tr.selected > * { box-shadow: inset 0 0 0 9999px var(--bk-tint) !important; color: var(--bk-navy) !important; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select { border: 1px solid var(--bk-input); border-radius: 8px; padding: 6px 10px; }
.page-item .page-link { border-radius: 8px !important; margin: 0 2px; border: 1px solid var(--bk-border); color: var(--bk-navy); }
.page-item.active .page-link { background: var(--bk-navy) !important; border-color: var(--bk-navy) !important; color: #fff; }
.pagination { gap: 2px; }

/* ---------- Alerts ---------- */
.alert { border-radius: 10px; border: 0; font-size: 14px; }
.alert-primary, .alert-info { background: var(--bk-tint); color: var(--bk-navy); }
.alert-success { background: var(--bk-success-bg); color: var(--bk-success-fg); }
.alert-warning { background: var(--bk-warning-bg); color: var(--bk-warning-fg); border: 1px dashed #f0c46e; }
.alert-danger { background: var(--bk-danger-bg); color: var(--bk-danger-fg); }
.alert-secondary { background: var(--bk-border-soft); color: var(--bk-body-2); }
.alert .alert-link { color: inherit; text-decoration: underline; }

/* ---------- Modals, dropdowns, toasts ---------- */
.modal-content {
  border: 1.5px solid var(--bk-navy);
  border-radius: 16px;
  box-shadow: 8px 8px 0 var(--bk-navy);
}
.modal-header { border-bottom: 1px solid var(--bk-border-soft); padding: 18px 22px; }
.modal-footer { border-top: 1px solid var(--bk-border-soft); }
.modal-title { font-weight: 800; font-size: 20px; }
.modal-backdrop.show { opacity: 0.45; background: var(--bk-navy); }
.dropdown-menu {
  border: 0; border-radius: 12px; box-shadow: var(--bk-shadow-pop); padding: 6px;
}
.dropdown-item { border-radius: 8px; padding: 8px 12px; font-size: 14px; color: var(--bk-navy); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--bk-tint); color: var(--bk-navy); }
.dropdown-item.active, .dropdown-item:active { background: var(--bk-indigo); color: #fff; }
.alertify-notifier .ajs-message {
  background: var(--bk-navy) !important; color: #fff !important; border-radius: 10px !important;
  box-shadow: var(--bk-shadow-pop) !important; text-shadow: none !important; border: 0 !important;
  font-family: var(--bk-font);
}
.alertify-notifier .ajs-message.ajs-error { background: var(--bk-danger) !important; }
.swal2-popup { border-radius: 16px !important; font-family: var(--bk-font) !important; }
.swal2-confirm { background: var(--bk-indigo) !important; border-radius: var(--bk-radius) !important; }

/* ---------- Nav tabs, progress, list groups ---------- */
.nav-tabs { border-bottom: 1px solid var(--bk-border); }
.nav-tabs .nav-link { border: 0; color: var(--bk-muted); font-weight: 600; border-bottom: 2px solid transparent; }
.nav-tabs .nav-link.active { color: var(--bk-navy); border-bottom-color: var(--bk-indigo); background: transparent; }
.nav-pills .nav-link.active { background: var(--bk-indigo); }
.progress { background: var(--bk-border-soft); border-radius: 999px; }
.progress-bar { background: var(--bk-indigo); border-radius: 999px; }
.list-group-item { border-color: var(--bk-border-soft); }
.list-group-item.active { background: var(--bk-indigo); border-color: var(--bk-indigo); }
.list-group-item-action:hover { background: var(--bk-surface-2); }

/* ---------- Calendar (FullCalendar) & date picker ---------- */
.fc .fc-button-primary { background: #fff; border: 1px solid var(--bk-input); color: var(--bk-navy); border-radius: 8px; text-transform: none; font-weight: 600; }
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active { background: var(--bk-navy); border-color: var(--bk-navy); color: #fff; }
.fc .fc-button-primary:hover { background: var(--bk-tint); color: var(--bk-navy); border-color: var(--bk-input); }
.fc .fc-toolbar-title { font-family: var(--bk-display); font-weight: 800; letter-spacing: -0.02em; }
.fc .fc-day-today { background: var(--bk-tint) !important; }
.fc-theme-standard td, .fc-theme-standard th, .fc-theme-standard .fc-scrollgrid { border-color: var(--bk-border-soft); }
.fc .fc-col-header-cell-cushion { color: var(--bk-navy); font-weight: 600; }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange { background: var(--bk-indigo) !important; border-color: var(--bk-indigo) !important; }
.flatpickr-day.inRange { background: var(--bk-tint) !important; border-color: var(--bk-tint) !important; box-shadow: none !important; }

/* ---------- Banner under topbar (trial / payment) ---------- */
.bk-banner { font-weight: 600; }

/* ---------- Auth pages ---------- */
.bk-auth {
  min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: #fff; font-family: var(--bk-font);
}
.bk-auth-main { display: flex; flex-direction: column; padding: 28px clamp(20px, 5vw, 64px); }
.bk-auth-main .bk-brand { color: var(--bk-navy) !important; }
.bk-auth-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px 0; }
.bk-auth-card { width: 100%; max-width: 420px; }
.bk-auth-card.wide { max-width: 560px; }
.bk-auth-card h1 { font-size: clamp(30px, 3.4vw, 40px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; margin-bottom: 10px; }
.bk-auth-card h1 .accent { color: var(--bk-indigo); }
.bk-auth-card .bk-lead { color: var(--bk-body-2); font-size: 15px; margin-bottom: 24px; }
.bk-auth-card .form-control { padding: 11px 14px; font-size: 15px; }
.bk-auth-card .btn-primary { padding: 12px 18px; font-size: 15px; }
.bk-auth-foot { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--bk-muted); }
.bk-auth-foot a { color: var(--bk-muted); }
.bk-auth-foot a:hover { color: var(--bk-indigo); }
.bk-auth-side {
  position: relative; overflow: hidden; background-color: var(--bk-indigo);
  background-image:
    linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 48px 48px;
  display: flex; align-items: center; justify-content: center; padding: 48px;
}
.bk-auth-side .bk-mock {
  width: 100%; max-width: 460px; background: #fff; border-radius: 16px; padding: 20px;
  border: 1.5px solid var(--bk-navy); box-shadow: 8px 8px 0 var(--bk-navy); color: var(--bk-navy);
}
.bk-auth-side .bk-quote { color: #fff; font-family: var(--bk-display); font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; margin-top: 28px; max-width: 460px; }
.bk-lang { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--bk-border); border-radius: 999px; background: var(--bk-canvas); font-size: 12px; font-weight: 700; }
.bk-lang a { padding: 5px 10px; border-radius: 999px; color: var(--bk-muted); }
.bk-lang a.on { background: var(--bk-navy); color: #fff; }
@media (max-width: 900px) {
  .bk-auth { grid-template-columns: 1fr; }
  .bk-auth-side { display: none; }
}

/* ---------- Small helpers used by new pages ---------- */
.bk-kpi { font-family: var(--bk-display); font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.bk-label { font-size: 13px; color: var(--bk-muted); font-weight: 600; }
.bk-segmented { display: inline-flex; padding: 3px; border-radius: 9px; background: #e8ebf4; font-size: 13px; font-weight: 600; }
.bk-segmented > * { border: 0; padding: 6px 12px; border-radius: 7px; background: transparent; color: var(--bk-muted); }
.bk-segmented > .on { background: #fff; color: var(--bk-navy); box-shadow: 0 1px 2px rgba(14,21,40,.12); }

/* ---------- KPI tiles (dashboards): kit style, left aligned, navy values ---------- */
.card .card-body > .row > .col-12.text-center:has(> span.d-block.h5) { text-align: left !important; }
.card .col-12.text-center > span.d-block.h5 {
  font-family: var(--bk-font); font-size: 13px !important; font-weight: 600; color: var(--bk-muted);
  letter-spacing: 0; margin-bottom: 8px !important;
}
.card .col-12.text-center > span.d-block.h5 ~ h2 {
  font-family: var(--bk-display); font-size: 26px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--bk-navy) !important; margin-bottom: 6px !important;
}
.card .col-12.text-center > span.d-block.h5 ~ small { font-size: 12px; font-weight: 600; }
.card.bk-kpi-hero .col-12.text-center > span.d-block.h5,
.card.bk-kpi-hero .col-12.text-center > small { color: #e6eeff !important; }
.card.bk-kpi-hero .card-body .col-12.text-center > span.d-block.h5 ~ h2,
.card.bk-kpi-hero .col-12.text-center > h2 { color: #fff !important; }

/* Sidebar version label: in flow at the end of the menu, not over it */
.vertical-menu #sidebar-menu > p[style*="position: fixed"] {
  position: static !important; margin: 16px 12px 0; font-size: 11px !important; color: #6e7891 !important;
}

/* ---------- Phones: compact topbar so every control fits ---------- */
@media (max-width: 575.98px) {
  #page-topbar .navbar-brand-box { width: auto !important; padding: 0 10px 0 14px; }
  .bk-brand .bk-brand-text { display: none; }
  #globalDateRangeLabel { display: none; }
  #globalDateRangeDropdown .mdi { margin-right: 0 !important; }
  #globalDateRangeDropdown::after { display: none; }
  .bk-bell { margin: 0 2px; }
  #page-header-user-dropdown { padding-left: 6px; padding-right: 8px; }
  #vertical-menu-btn { padding-left: 10px !important; padding-right: 10px !important; }
  .page-title-box h4 { font-size: 24px !important; }
}

/* =========================================================================
   Polish pass 2
   ========================================================================= */

/* ---------- Sidebar: one icon box for feather (svg) and boxicons (i), higher contrast ---------- */
#sidebar-menu ul li a { color: #d5dae7 !important; gap: 12px; }
#sidebar-menu ul li a > i,
#sidebar-menu ul li a > svg,
.vertical-menu #sidebar-menu > ul > li > a svg {
  flex: 0 0 20px; width: 20px !important; min-width: 20px !important; height: 20px !important;
  margin: 0 !important; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center;
  font-size: 19px !important; line-height: 20px !important; color: #b4bdd2 !important; fill: none !important; stroke-width: 1.9;
}
#sidebar-menu ul li a > span { flex: 1; line-height: 1.3; }
#sidebar-menu ul li a:hover > i, #sidebar-menu ul li a:hover > svg,
#sidebar-menu ul li.mm-active > a > i, #sidebar-menu ul li.mm-active > a > svg,
#sidebar-menu ul li a.active > i, #sidebar-menu ul li a.active > svg { color: #fff !important; }
#sidebar-menu ul li a:hover { background: var(--bk-navy-hover); }
#sidebar-menu ul li.mm-active > a { box-shadow: 0 6px 16px rgba(59, 91, 212, 0.35); }
#sidebar-menu .menu-title { color: #8590aa !important; }
.bk-workspace .bk-ws-sub { color: #b4bdd2; }
/* Collapsed (icon-only) sidebar keeps icons centred */
body[data-sidebar-size="sm"] #sidebar-menu ul li a { justify-content: center; padding: 12px 0 !important; }

/* ---------- Page header, cards, buttons: a little more depth ---------- */
.page-title-box { align-items: flex-end !important; gap: 12px; flex-wrap: wrap; }
.page-title-box h4 { line-height: 1.1; }
.card { box-shadow: 0 1px 2px rgba(14, 21, 40, 0.04); transition: box-shadow .2s, border-color .2s; }
a.card:hover, .card.bk-hoverable:hover { box-shadow: var(--bk-shadow-pop); }
.btn-primary { box-shadow: 0 1px 2px rgba(14, 21, 40, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; }
.btn-primary:active { transform: translateY(1px); }
.card .card-body > .row > .col-12.text-center:has(> span.d-block.h5) { position: relative; }
.card:has(.col-12.text-center > span.d-block.h5):hover { border-color: #cdd3e1; }

/* ---------- Switches: room between toggle and label ---------- */
.form-switch { padding-left: 3.1em; min-height: 1.5em; }
.form-switch .form-check-input { margin-left: -3.1em; margin-top: 0.1em; cursor: pointer; }
.form-switch .form-check-label { cursor: pointer; }

/* ---------- Tables: horizontal scroll instead of clipping (wrapper added by brucely.js) ---------- */
.table-responsive { border-radius: 10px; }
.table-responsive > .table { margin-bottom: 0; }
.table td a:not(.btn) { font-weight: 600; text-decoration: none; }
table.dataTable > tbody > tr.child ul.dtr-details > li { border-bottom-color: var(--bk-border-soft); padding: 8px 0; }
table.dataTable > tbody > tr.child span.dtr-title { color: var(--bk-muted); font-weight: 600; min-width: 110px; }
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before { background-color: var(--bk-indigo) !important; box-shadow: none !important; border: 0 !important; }
.dataTables_wrapper .dataTables_info { color: var(--bk-muted); font-size: 13px; padding-top: 12px !important; }

/* ---------- Calendar (FullCalendar): kit timetable colours ---------- */
.fc .fc-timegrid-slot { height: 2.6em; }
.fc .fc-timegrid-slot-label-cushion, .fc .fc-daygrid-day-number { color: var(--bk-muted); font-size: 12px; font-weight: 600; }
.fc .fc-event { border-radius: 7px !important; padding: 2px 4px; font-size: 12px; font-weight: 600; box-shadow: none; }
.fc .fc-event .fc-event-main { padding: 1px 2px; }
.fc .fc-event.fc-event-scheduled { background: var(--bk-indigo) !important; border-color: var(--bk-indigo) !important; color: #fff !important; }
.fc .fc-event.fc-event-in-progress { background: var(--bk-warning-bg) !important; border: 0 !important; border-left: 3px solid var(--bk-warning) !important; color: var(--bk-warning-fg) !important; }
.fc .fc-event.fc-event-completed { background: var(--bk-success-bg) !important; border: 0 !important; border-left: 3px solid var(--bk-success) !important; color: var(--bk-success-fg) !important; }
.fc .fc-event.fc-event-cancelled { background: var(--bk-border-soft) !important; border-color: var(--bk-border-soft) !important; color: var(--bk-muted) !important; text-decoration: line-through; }
.fc .fc-event.fc-event-substitution { background: var(--bk-navy) !important; border-color: var(--bk-navy) !important; color: #fff !important; }
.fc .fc-event.fc-event-cancelled.fc-event-substitution {
  background: repeating-linear-gradient(45deg, #e2e4eb, #e2e4eb 6px, #f5f7fb 6px, #f5f7fb 12px) !important;
  border: 1px dashed var(--bk-muted) !important; color: var(--bk-muted) !important; text-shadow: none !important;
}
.fc .fc-event * { color: inherit !important; }
.calendar-legend { background: var(--bk-surface-2) !important; border: 1px solid var(--bk-border-soft); border-radius: 10px !important; font-size: 13px; font-weight: 600; color: var(--bk-body-2); }
.calendar-legend .legend-color { border-radius: 4px; }
.calendar-legend .legend-color[style*="#6c757d"] { background: var(--bk-indigo) !important; }
.calendar-legend .legend-color[style*="#ffc107"] { background: var(--bk-warning-bg) !important; border-left: 3px solid var(--bk-warning); }
.calendar-legend .legend-color[style*="#28a745"] { background: var(--bk-success-bg) !important; border-left: 3px solid var(--bk-success); }
.calendar-legend .legend-color[style*="background-color: #dc3545"] { background: var(--bk-border-soft) !important; }
.calendar-legend .legend-color[style*="#fd7e14"] { background: var(--bk-navy) !important; }
.calendar-legend .legend-color[style*="repeating-linear-gradient(45deg, #dc3545"] { background: repeating-linear-gradient(45deg, #e2e4eb, #e2e4eb 3px, #f5f7fb 3px, #f5f7fb 6px) !important; border: 1px dashed var(--bk-muted); }
.view-buttons .btn, .fc .fc-button { border-radius: 8px !important; }

/* ---------- Mobile ---------- */
@media (max-width: 991.98px) {
  /* Sidebar is off-canvas here: the brand box sits on the white bar */
  #page-topbar .navbar-brand-box { background: #fff !important; border-right: 0 !important; }
  #page-topbar .bk-brand { color: var(--bk-navy) !important; }
  #page-topbar .bk-mark::before { background: var(--bk-indigo); }
  #page-topbar .bk-mark::after { background: var(--bk-navy); opacity: 1; mix-blend-mode: multiply; }
  .vertical-menu { box-shadow: 12px 0 40px rgba(14, 21, 40, 0.35) !important; }
}
@media (max-width: 767.98px) {
  .page-content { padding-left: 4px; padding-right: 4px; }
  .page-title-box { margin-bottom: 4px; }
  .page-title-box .btn { flex: 1 1 auto; }
  .card-body { padding: 14px; }
  .card-header { padding: 12px 14px; }
  .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_length { text-align: left !important; }
  .dataTables_wrapper .dataTables_filter input { width: 100% !important; margin-left: 0 !important; }
  .dataTables_wrapper .dataTables_filter label { width: 100%; display: flex; gap: 8px; align-items: center; }
  .dataTables_wrapper .dataTables_paginate { justify-content: center; display: flex; margin-top: 10px; }
  .dataTables_wrapper .pagination { flex-wrap: wrap; justify-content: center; }
  .modal-dialog { margin: 12px; }
  .modal-content { box-shadow: 4px 4px 0 var(--bk-navy); }
  .fc .fc-toolbar { flex-direction: column; gap: 8px; }
  .fc .fc-toolbar-title { font-size: 18px; }
  .calendar-legend { font-size: 12px; gap: 8px !important; }
}

/* ---------- Help centre ---------- */
.kb-hero { background: var(--bk-navy); border: 0; overflow: hidden; position: relative; }
.kb-hero::after { content: ''; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(91, 125, 235, .45), transparent 70%); }
.kb-hero .card-body { padding: clamp(22px, 4vw, 40px); position: relative; z-index: 1; }
.kb-hero-title { color: #fff; font-size: clamp(26px, 3vw, 36px); font-weight: 800; letter-spacing: -0.03em; }
.kb-hero .text-muted { color: #b4bdd2 !important; }
.kb-search { position: relative; max-width: 560px; }
.kb-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--bk-muted); }
.kb-search input { padding: 13px 14px 13px 44px; font-size: 15px; border: 0; border-radius: 10px; }
.kb-cat { margin-bottom: 20px; }
.kb-cat .card { margin-bottom: 0; }
.kb-cat-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--bk-tint); color: var(--bk-indigo); display: inline-grid; place-items: center; font-size: 19px; flex: 0 0 36px; }
.kb-articles { display: flex; flex-direction: column; }
.kb-article-link { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 11px 12px; margin: 0 -12px; border-radius: 10px; color: var(--bk-navy) !important; text-decoration: none; }
.kb-article-link:hover { background: var(--bk-surface-2); }
.kb-article-link[hidden] { display: none; }
.kb-article-title { font-weight: 600; font-size: 14.5px; }
.kb-article-summary { grid-column: 1; color: var(--bk-muted); font-size: 13px; }
.kb-article-link .mdi-chevron-right { grid-row: 1 / span 2; grid-column: 2; color: var(--bk-muted); font-size: 18px; }
.kb-crumbs { font-size: 13px; color: var(--bk-muted); margin: -8px 0 14px; display: flex; align-items: center; gap: 4px; }
.kb-crumbs a { font-weight: 600; }
.kb-article .card-body { padding: clamp(20px, 4vw, 40px); }
.kb-article-h1 { font-size: clamp(26px, 3vw, 34px); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 8px; }
.kb-lead { font-size: 17px; color: var(--bk-body-2); margin-bottom: 24px; }
.kb-body { font-size: 15.5px; line-height: 1.7; color: var(--bk-body-2); }
.kb-body p { margin-bottom: 14px; }
.kb-body strong { color: var(--bk-navy); }
.kb-body ol, .kb-body ul { padding-left: 22px; margin-bottom: 16px; }
.kb-body li { margin-bottom: 8px; }
.kb-body li::marker { color: var(--bk-indigo); font-weight: 700; }
.kb-tip { display: flex; gap: 12px; background: var(--bk-tint); border-radius: 12px; padding: 14px 16px; margin-top: 18px; color: var(--bk-navy); font-size: 14.5px; }
.kb-tip .mdi { color: var(--bk-indigo); font-size: 20px; line-height: 1.2; }
.kb-contact { background: var(--bk-surface-2); }

/* Display numbers (KPI tiles): proportional figures. With tabular figures this
   typeface widens "." and "," and big values read as "1 . 659 , 50". */
.card .col-12.text-center > span.d-block.h5 ~ h2, .bk-kpi, .kpi-card .kpi-value, .card h4.mb-2, .card h2 {
  font-variant-numeric: proportional-nums; font-feature-settings: "tnum" 0;
}
.kb-cat h5 { font-weight: 700; }