/* Who each number is billed to. A section at the foot of Call/Text Settings,
   registered on the callSettings hook point by js/page-billinggroups.js.

   Its own file, like every other feature here, so this and callsettings.css
   never have to be edited together. */

.bg-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

/* One block per agent. The heading carries the name and the count, because the
   question being asked of this screen is "what is on Dana's desk", and the
   answer has to survive a screenshot. */
.bg-agent {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
}

.bg-agenthead {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.bg-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 7px 12px;
}

.bg-row + .bg-row {
  border-top: 1px solid var(--border);
}

/* Tabular figures, so a column of numbers lines up rather than shimmering by a
   pixel per digit. */
.bg-num {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* The statement, under the tagging section on the same screen. Same file
   because they are one subject -- who pays for the phones -- and splitting
   them would mean two stylesheets to keep in step. */

.st-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.st-table {
  width: 100%;
  border-collapse: collapse;
}

.st-table th {
  text-align: left;
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}

.st-table td {
  padding: 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

/* Money and counts right-aligned with tabular figures, so a column of totals
   can be read down rather than compared item by item. */
.st-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.st-office {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
}

.st-office span { display: block; margin-top: 2px; }

.st-mine {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  padding: 6px 0 2px;
}

.st-mine > div span { display: block; }
.st-mine > div b { font-size: 17px; }