/* Centre the title independently of the controls on either side. */
.topbar {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 200px;
  min-height: 86px;
  height: auto;
  gap: 18px;
  padding: 12px 28px;
}
.business-scope {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  gap: 5px;
  padding: 0;
  text-align: center;
}
.business-scope h1 { font-size: 23px; line-height: 1.2; width: 100%; }
#business-selector {
  margin: 0 auto;
  padding: 3px 7px;
  text-align: center;
  justify-content: center;
  gap: 9px;
}
#business-heading {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.business-scope .business-meta {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 100%;
}
#business-summary { font-size: 11px; margin: 0; }
.clear-business {
  border: 0;
  background: none;
  font-size: 10px;
  color: #637a99;
  padding: 2px 0;
  white-space: nowrap;
}
.clear-business:hover { color: #255eb0; text-decoration: underline; }
.header-tools { justify-self: end; gap: 5px; }
.header-tools .header-icon {
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 7px;
  border-color: transparent;
  background: transparent;
  color: #7a879a;
  border-radius: 5px;
}
.header-tools .header-icon:hover { color: #255eb0; border-color: #dfe5ee; background: #f3f6fb; }
.header-tools .header-icon svg { width: 16px; height: 16px; }

/* Keep summary figures together in the central viewing area. */
main { padding-top: 18px; }
.stats { width: min(100%, 720px); margin: 0 auto; gap: 9px; }
.stat {
  min-height: 92px;
  padding: 13px 8px 12px;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
}
.stat-value { order: 0; font-size: 36px; font-weight: 700; letter-spacing: -.9px; }
.stat-label { order: 1; font-size: 12px; gap: 7px; }
.board-tools { min-height: 57px; }

/* Retain the chosen font size, with full details available on click. */
body[data-density="extra-compact"] .calls-table td {
  padding-top: 3px;
  padding-bottom: 3px;
  line-height: 1.2;
}
body[data-density="extra-compact"] .caller-number { display: none; }
body[data-density="extra-compact"] .cell-wrap { -webkit-line-clamp: 1; }
body[data-density="extra-compact"] .status { padding: 3px 5px; white-space: nowrap; }
body[data-density="extra-compact"] .caller-button { line-height: 1.2; }
body[data-density="extra-compact"] .type-text {
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

@media (min-width: 2000px) {
  .topbar { padding-left: 36px; padding-right: 36px; }
  .business-scope h1 { font-size: 26px; }
}
@media (max-width: 1100px) {
  .topbar { grid-template-columns: 170px minmax(0, 1fr) 170px; padding: 12px 18px; gap: 12px; }
  .business-scope h1 { font-size: 21px; }
}
@media (max-width: 800px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 11px 16px; }
  .business-scope { grid-column: 1 / -1; grid-row: 2; padding-bottom: 3px; }
  .business-scope h1 { font-size: 21px; }
  .header-tools { grid-column: 2; grid-row: 1; }
}
@media (max-width: 600px) {
  .topbar { padding: 10px 13px; }
  .header-tools .icon-button { display: inline-flex; }
  .stats { gap: 5px; }
  .stat { min-height: 76px; padding: 10px 3px; gap: 8px; }
  .stat-value { font-size: 28px; }
  .stat-label { font-size: 10px; gap: 0; }
  .board-tools { min-height: 53px; }
  #business-summary { font-size: 10px; }
}