/* Compact density — toggled by html.bk-compact */
html.bk-compact main,
body.bk-compact main {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
html.bk-compact .bk-page-head,
body.bk-compact .bk-page-head,
html.bk-compact h1.text-3xl,
body.bk-compact h1.text-3xl,
html.bk-compact h1.text-2xl,
body.bk-compact h1.text-2xl {
  margin-bottom: 0.75rem;
}
html.bk-compact h1,
body.bk-compact h1,
html.bk-compact .bk-page-head h1,
body.bk-compact .bk-page-head h1 {
  font-size: 1.25rem;
  line-height: 1.3;
}
html.bk-compact .p-8,
body.bk-compact .p-8 {
  padding: 1rem;
}
html.bk-compact .p-6,
html.bk-compact .p-5,
html.bk-compact .p-4,
body.bk-compact .p-6,
body.bk-compact .p-5,
body.bk-compact .p-4 {
  padding: 0.75rem 1rem;
}
html.bk-compact .mb-8,
body.bk-compact .mb-8 {
  margin-bottom: 1rem;
}
html.bk-compact .mb-6,
body.bk-compact .mb-6 {
  margin-bottom: 0.75rem;
}
html.bk-compact .mb-4,
body.bk-compact .mb-4,
html.bk-compact .space-y-4 > :not([hidden]) ~ :not([hidden]),
body.bk-compact .space-y-4 > :not([hidden]) ~ :not([hidden]) {
  margin-bottom: 0.75rem;
}
html.bk-compact .bk-table thead th,
html.bk-compact .bk-table tbody td,
html.bk-compact table.min-w-full th,
html.bk-compact table.min-w-full td,
body.bk-compact .bk-table thead th,
body.bk-compact .bk-table tbody td,
body.bk-compact table.min-w-full th,
body.bk-compact table.min-w-full td {
  padding: 0.35rem 0.55rem;
}
html.bk-compact .bk-collapse > .bk-collapse-toggle,
body.bk-compact .bk-collapse > .bk-collapse-toggle {
  padding: 0.5rem 0.75rem;
}
html.bk-compact .bk-collapse > .bk-collapse-body,
body.bk-compact .bk-collapse > .bk-collapse-body {
  padding: 0 0.75rem 0.75rem;
}
html.bk-compact .dash-group .px-5,
body.bk-compact .dash-group .px-5 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
html.bk-compact .text-2xl,
body.bk-compact .text-2xl {
  font-size: 1.25rem;
}
html.bk-compact #rpt-heading .text-3xl,
html.bk-compact #rpt-heading .text-4xl,
body.bk-compact #rpt-heading .text-3xl,
body.bk-compact #rpt-heading .text-4xl {
  font-size: 1.875rem;
  line-height: 1.15;
}
html.bk-compact #rpt-heading .text-2xl,
body.bk-compact #rpt-heading .text-2xl {
  font-size: 1.5rem;
}

html {
  --bk-page-width: 100vw;
}

/* Same var on top bar and main. Use vw width (sticky nav ignores % max-width). */
body > nav,
body > main,
#bk-topbar,
.bk-shell {
  width: var(--bk-page-width, 100vw) !important;
  max-width: var(--bk-page-width, 100vw) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

/* Row 1 = brand + menu. Items pack tight so dropdowns sit under the label. */
#bk-topbar-row {
  flex-wrap: nowrap;
  align-items: center;
}
#nav-menu {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-start;
  gap: 0.1rem;
}
#nav-menu > .bk-nav-item,
#nav-menu > a,
#nav-menu > .relative {
  position: relative;
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  width: auto !important;
  max-width: none;
  white-space: nowrap;
  text-align: left;
}
#nav-menu .bk-nav-dd {
  position: absolute;
  left: 0;
  right: auto;
  top: 100%;
  width: max-content;
  min-width: 12.5rem;
  z-index: 60;
}
#nav-menu .bk-nav-dd-end {
  left: auto;
  right: 0;
}
#nav-menu .bk-nav-dd a,
#nav-menu .bk-nav-dd button {
  white-space: nowrap;
  text-align: left;
}
#nav-menu .group\/navsub > div:last-child {
  margin-left: 0;
}

/* Restaurant Excel ribbon: one packed row, dropdowns flush under the label. */
#bk-topbar.bk-ribbon #bk-topbar-row {
  flex-wrap: wrap;
  column-gap: 0.35rem;
}
#bk-topbar.bk-ribbon #nav-menu {
  flex: 1 1 auto;
}
#bk-topbar.bk-ribbon .bk-topbar-tools {
  border-top: 0;
  padding: 0;
}
#nav-menu .bk-org-dd {
  max-height: min(70vh, 22rem);
  overflow-y: auto;
}

/* Tools always sit on row 2 (org, province, companies, width, user). */
#bk-topbar-tools-row.bk-topbar-tools {
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  padding: 0.35rem 0 0.45rem;
  border-top: 1px solid #e2e8f0;
}

/* Below 100% width: wrap onto the next line, still packed left (not stretched cells). */
html.bk-width-wrap #nav-menu {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: center;
  gap: 0.1rem 0.15rem;
}
html.bk-width-wrap #nav-menu > * {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none;
  text-align: left;
  box-sizing: border-box;
}
html.bk-width-wrap #nav-menu > * > a,
html.bk-width-wrap #nav-menu > * > button,
html.bk-width-wrap #nav-menu > a {
  display: inline-block;
  width: auto;
}

.bk-width-ctl {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #475569;
  white-space: nowrap;
}
.bk-width-ctl input[type="range"] {
  width: 5.5rem;
  accent-color: #0f172a;
}
.bk-width-ctl input[type="number"] {
  width: 3.25rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.375rem;
  padding: 0.25rem 0.35rem;
  font-size: 11px;
  font-weight: 700;
}
.bk-width-presets button {
  border: 1px solid #cbd5e1;
  background: #fff;
  border-radius: 0.375rem;
  padding: 0.15rem 0.4rem;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.bk-width-presets button.is-on {
  background: #0f172a;
  color: #fff;
  border-color: #0f172a;
}
