/* Settings > Clients. A header with Add client, then a list of clients, each a row with its
   two letter badge (the same red square as the header chip), name and address, asset count,
   status and Edit. Archived clients sit below, dimmed. Reuses .btn-tonal, the dialog shell and
   the form fields from edit.css. */

.clients { display: flex; flex-direction: column; gap: 48px; }
.clients-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; }
.clients-head__text { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.clients-head__intro { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-2); }
.clients-add { height: 46px; padding: 0 20px; border: 0; border-radius: var(--radius); font: 600 15px/1 var(--font-ui); display: inline-flex; align-items: center; gap: 9px; color: var(--on-red); cursor: pointer; flex-shrink: 0; }
.clients-add svg { stroke: currentColor; }

.clients-list { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.crow { display: grid; grid-template-columns: auto minmax(0, 1fr) 110px 120px 130px auto; align-items: center; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.crow__badge { width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--radius); background: var(--red); color: var(--on-red); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.crow.is-archived { opacity: .65; }
.crow.is-archived .crow__badge { background: var(--tone-solid-hover); color: var(--text-quiet); }
.crow__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.crow__name { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crow__sub { font-size: 12px; color: var(--text-quiet); }
.crow__stat { font-size: 14px; color: var(--text-2); white-space: nowrap; }
.crow__status { font-size: 13px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.crow__acts { display: flex; gap: 8px; justify-content: flex-end; }
.crow__acts .btn-tonal { height: 38px; }

.clients-group { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
.clients-group h2 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--section); letter-spacing: -.01em; }
.clients-group span { font-size: 13px; color: var(--text-quiet); }
.clients-none { margin: 0; padding: 32px 0; font-size: 15px; color: var(--text-2); border-bottom: 1px solid var(--rule); }

/* The dialog. */
.cdlg { width: min(520px, calc(100vw - 32px)); }
.cdlg__form { display: flex; flex-direction: column; gap: 18px; margin-top: 6px; }
.cdlg__code { display: flex; align-items: center; gap: 12px; }
.cdlg__codein { width: 96px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; text-align: center; }
.cdlg__help { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-quiet); }
.cdlg__addr { margin: 0; font-size: 14px; color: var(--text-2); }
.cdlg__archive { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; background: var(--tone-1); border-radius: var(--radius); }
.cdlg__archive strong { font-size: 14px; }
.cdlg__archive p { margin: 2px 0 0; }

@media (max-width: 900px) {
  .crow { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 6px; }
  .crow__stat, .crow__status { grid-column: 2; }
  .crow__stat--date { display: none; }
  .crow__acts { grid-column: 3; grid-row: 1; }
}
@media (max-width: 560px) {
  .clients-head { flex-direction: column; gap: 20px; }
}