/* The customer hub (#/customers/<id>, pages/customer.js and pages/customer/). Layout only: every colour, size and radius is a token from next.css,
   and every component (buttons, status, chips, link cards, tables, sections, banners) is drawn by next.css. No inline styles (style-src 'self'). */

.cu-page .ph { align-items: flex-start; }
.cu-panel { min-width: 0; }
.cu-panel:focus-visible { outline-offset: 4px; }

/* contact line under the name: one button per way to reach them, a fill-in when one is missing */
.cu-contacts { margin-top: var(--s-1); }
.cu-contact { max-width: 100%; }
.cu-contact span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34ch; }

/* a block: its own heading row (title, light, a quiet line, actions on the right), then its content */
.cu-block, .cu-systems, .cu-health { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.cu-sec-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); min-height: var(--h-sm); }
.cu-sec-head h2 { font-size: var(--t-17); font-weight: 600; }
.cu-sec-head > .muted { font-size: var(--t-14); }
.cu-sec-chip { display: inline-flex; }
.cu-push { margin-left: auto; }
.cu-busy { font-size: var(--t-13); }
.cu-pad { padding: var(--s-3) var(--s-5); }
.section .cu-pad:first-child { padding-top: 0; }
.cu-loading { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); }
.cu-two { align-items: start; }
.cu-wrap { overflow-wrap: anywhere; white-space: normal; }
/* the hub's forms in the one dialog: fields one under the other with air between them */
.sheet__body form[data-cu-form] { display: flex; flex-direction: column; gap: var(--s-4); }
.sheet__body form[data-cu-form] .fields { gap: var(--s-4); }
.section .banner + .cu-form { margin-top: var(--s-4); }

.cu-form { min-width: 0; }

/* the bar above the devices table (.bar--split): the views on the left, the actions on the right */
.cu-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); flex: 1 1 auto; min-width: 0; }
.cu-tools .searchbox { flex: 1 1 220px; max-width: 360px; }
.tbl__strong { font-weight: 500; }
.cu-meter { display: inline-block; min-width: 140px; }

/* money rows (billing read only; the server sends the numbers) */
.cu-money { margin: 0; }
.cu-money__row { display: flex; justify-content: space-between; gap: var(--s-4); padding: 12px var(--s-5); border-top: 1px solid var(--line-soft); font-size: var(--t-15); }
.cu-money__row dt { min-width: 0; }
.cu-money__row dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* tasks: a big checkbox per task, the quick-add sentence on top */
.cu-qa { display: flex; flex-direction: column; gap: 6px; padding: 0 var(--s-5) var(--s-3); }
.cu-qa__row { display: flex; gap: var(--s-2); }
.cu-qa__row .field__control { flex: 1 1 auto; min-width: 0; }
.cu-qa__preview { font-size: var(--t-13); min-height: 0; }
.cu-qa__preview:empty { display: none; }
.cu-tasks { list-style: none; margin: 0; padding: 0; }
.cu-task { padding: 0 var(--s-5); border-top: 1px solid var(--line-soft); }
.cu-task .check { width: 100%; }
.cu-task.is-done .check__text > span:first-child { text-decoration: line-through; color: var(--muted); }
.cu-due--over { color: var(--red); font-weight: 500; }
.cu-due--today { color: var(--amber); font-weight: 500; }

/* menus in the drawer: a second line under an item */
.cu-menu-sub { display: block; font-size: var(--t-13); color: var(--muted); }
.cu-remote-row .status { min-width: 92px; }

/* a new install code, shown once */
.cu-code { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); border: 1px solid var(--green-line); border-radius: var(--r-lg); background: var(--green-bg); }
.cu-code__value { font-size: var(--t-20); font-weight: 600; letter-spacing: .04em; user-select: all; overflow-wrap: anywhere; }

/* quick links in the drawer */
.cu-links { display: flex; flex-direction: column; margin: 0 calc(var(--s-5) * -1); }
.cu-linkrow { display: flex; align-items: center; gap: var(--s-3); padding: 10px var(--s-5); border-top: 1px solid var(--line-soft); }
.cu-linkrow__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cu-linkrow__title { font-weight: 500; }
.cu-linkrow__text .muted { font-size: var(--t-13); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* a site in the drawer */
.cu-site-head { display: flex; align-items: center; gap: var(--s-3); }
.cu-isp { display: inline-flex; align-items: center; gap: var(--s-2); }
.sheet__body h3 { margin-top: var(--s-2); }

/* the instructions for a client's admin (Google Workspace) */
.cu-instr { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); border: 1px solid var(--info-line); border-radius: var(--r-lg); background: var(--info-bg); }

/* portal people */
.cu-people { list-style: none; margin: 0; padding: 0; }
.cu-person { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding: 10px var(--s-5); border-top: 1px solid var(--line-soft); }
.cu-person__text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 260px; }
.cu-person__name { font-weight: 500; }
.cu-person__text .muted { font-size: var(--t-13); overflow-wrap: anywhere; }

/* documentation pages: the whole row opens the page */
.cu-docs { list-style: none; margin: 0; padding: 0; }
.cu-docrow { border-top: 1px solid var(--line-soft); }
.cu-docrow__btn { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 56px; padding: 10px var(--s-5); border: 0; background: none; color: var(--ink); text-align: left; font: inherit; }
.cu-docrow__btn:hover { background: var(--hover); }
.cu-docrow__btn:focus-visible { outline-offset: -2px; border-radius: 0; }
.cu-docrow__btn > .ico { color: var(--muted); }
.cu-docrow__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cu-docrow__title { font-weight: 500; overflow-wrap: anywhere; }
.cu-docrow__text .muted { font-size: var(--t-13); overflow-wrap: anywhere; }
.cu-doctext { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--t-14); line-height: 1.55; padding: var(--s-4); border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--surface-2); }

/* settings */
.cu-addr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.cu-addr .field__label { flex: 1 1 100%; }
.cu-logo { display: flex; align-items: center; gap: var(--s-4); }
.cu-logo .btn:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }

/* phone: the header stacks, the actions take the full width, the contact buttons wrap */
@media (max-width: 719px) {
  .cu-page .ph__actions .btn--primary { flex: 1 1 auto; }
  .cu-contact span { max-width: 22ch; }
  .cu-pad, .cu-qa, .cu-task, .cu-person, .cu-docrow__btn, .cu-money__row { padding-left: var(--s-4); padding-right: var(--s-4); }
  .cu-push { margin-left: 0; }
  .cu-sec-head { align-items: flex-start; }
  .cu-tools .searchbox { max-width: none; flex-basis: 100%; }
  .cu-tools .seg { flex: 1 1 100%; }
}