.client-search {
  display: flex;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid var(--input-line);
  padding-inline: 3px;
  width: min(100%, 290px);
}
.client-search svg { flex: none; color: var(--muted); }
.client-search input { min-width: 0; width: 100%; min-height: 42px; border: 0; background: transparent; color: var(--ink); font-size: 14px; }
.client-search:focus-within { border-color: var(--accent); box-shadow: 0 1px var(--accent); }
.client-search input:focus { outline: 0; }
.client-count { color: var(--muted); font-size: 12px; margin: 0 0 10px; }
.client-empty { background: var(--surface); border: 1px solid var(--line); padding: 32px 20px; text-align: center; color: var(--muted); }
.client-table { width: 100%; table-layout: fixed; border-collapse: collapse; background: var(--surface); border-block: 1px solid var(--line); }
.client-table th, .client-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.client-table th { color: var(--muted); font-size: 12px; font-weight: 650; background: var(--surface-muted); }
.client-table th:last-child { width: 90px; }
.client-table td { font-size: 14px; }
.client-table td:first-child { font-weight: 650; }
.client-table button { padding: 6px 8px; color: var(--accent-ink); font-weight: 650; }
.client-table button:hover { background: var(--accent-selected); }
#client-dialog { width: min(550px, calc(100% - 24px)); }
#client-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
#service-dialog { width: min(550px, calc(100% - 24px)); }
#service-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
#service-form .service-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.client-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
}
.client-steps li { border-bottom: 1px solid var(--line); padding: 5px 0; font-size: 11px; color: var(--muted); }
.client-steps li[aria-current="step"] { border-color: var(--accent); color: var(--accent-ink); font-weight: 650; }
.client-fields { grid-template-columns: repeat(2, minmax(0,1fr)); }
.client-fields .full { grid-column: 1 / -1; }
.field-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-inline: 3px;
  border-bottom: 1px solid var(--input-line);
}
.field-line:focus-within { border-color: var(--accent); box-shadow: 0 1px var(--accent); }
.field-line svg, .client-search svg { flex: none; color: var(--accent-ink); stroke-linecap: round; stroke-linejoin: round; }
.field-line input, .field-line select, .field-line textarea {
  min-width: 0;
  width: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
}
.field-line textarea { padding-block: 7px; resize: none; }
.field-line:has(textarea) { align-items: start; }
.field-line:has(textarea) svg { margin-top: 8px; }
.field-line :focus-visible { outline: 0; }
@media (max-height: 450px) {
  .client-fields { gap: 5px 12px; }
  .client-fields input, .client-fields select { height: 28px; }
}
@media (max-width: 580px) {
  .client-table, .client-table tbody { display: block; }
  .client-table[hidden] { display: none; }
  .client-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .client-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 12px; border-bottom: 1px solid var(--line); }
  .client-table tr:last-child { border-bottom: 0; }
  .client-table td { grid-column: 1; padding: 3px 0; border: 0; }
  .client-table td:last-child { grid-area: 1 / 2 / 4 / 3; align-self: center; }
  .service-table td:last-child { grid-row: 1 / 6; }
}

.clients-page .wrap { width: calc(100% - clamp(24px, 5vw, 100px)); }
.clients-page .workspace { padding-block: 20px 30px; }
.clients-page .toolbar { margin-bottom: 12px; }
.clients-page .client-table th:last-child { width: 125px; }
.clients-page .client-table td:first-child { font-weight: 700; }
.clients-page .client-table td button { border: 1px solid var(--line); background: var(--accent-surface); }
.client-recurring-badge { display: inline-block; margin-left: 8px; padding: 3px 6px; background: #e4efe8; color: #29584b; font-size: 11px; font-weight: 650; }
.clients-page #client-dialog { width: min(900px, calc(100% - 20px)); max-height: calc(100dvh - 20px); }
.client-modal-identity { display: flex; align-items: center; min-width: 0; gap: 11px; }
#client-initials { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #728298; color: var(--accent-on-dark); font-weight: 650; }
.client-modal-identity h2 { overflow-wrap: anywhere; }
.client-profile-layout { display: grid; grid-template-columns: 145px minmax(0, 1fr); gap: 16px; }
.client-profile-nav { display: flex; flex-direction: column; gap: 3px; border-right: 1px solid var(--line); padding-right: 10px; }
.client-profile-nav button { min-height: 36px; padding: 4px 8px; text-align: left; font-size: 13px; font-weight: 650; color: var(--muted); }
.client-profile-nav button:hover { background: var(--surface-muted); }
.client-profile-nav button[aria-selected="true"] { color: var(--ink); background: var(--accent-selected); box-shadow: inset 2px 0 var(--accent); }
.client-profile-panels { min-width: 0; }
#client-form [hidden] { display: none; }
#client-form .fields { gap: 8px 12px; }
#client-form .dialog-actions { border-top: 1px solid var(--line); margin-top: 9px; padding-top: 9px; }
#client-form .field-line :is(input, select) { height: 33px; font-size: 14px; }
#client-form .field-line textarea { font-size: 14px; }
.client-package-panel p, #client-panel-4 p { margin: 5px 0; color: var(--muted); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
#client-package-name { margin: 0; font-size: 19px; overflow-wrap: anywhere; }
#client-package-sessions { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; margin: 7px 0; }
#client-package-sessions > * { padding: 5px 0; border-top: 1px solid var(--line); font-size: 13px; }
#client-package-sessions dt { overflow-wrap: anywhere; }
#client-package-sessions dd { margin: 0; padding-left: 8px; font-weight: 700; }
.client-pager { display: flex; align-items: center; justify-content: end; gap: 8px; margin-top: 4px; font-size: 12px; }
.client-pager button { width: 28px; height: 25px; border: 1px solid var(--line); font-size: 18px; line-height: 1; }
.client-pager button:hover:not(:disabled) { background: var(--surface-muted); }
#recurrence-agenda { color: var(--accent-ink); font-weight: 700; }
.client-recurrence-suggestion { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px 10px; margin-top: 6px; padding: 5px 8px; border-left: 2px solid var(--accent); background: var(--accent-selected); }
.client-recurrence-suggestion p { margin: 0; font-size: 12px; }
.client-recurrence-suggestion button { min-height: 27px; padding: 3px 8px; border: 1px solid var(--accent); font-size: 12px; font-weight: 650; }
.client-recurrence-suggestion button:hover { background: var(--accent-hover-surface); }
@media (max-width: 600px) {
  .clients-page #client-form { padding: 9px 11px; }
  .clients-page .dialog-head { padding: 8px 11px; }
  .client-modal-identity h2 { font-size: 17px; }
  #client-initials { width: 31px; height: 31px; }
  .client-profile-layout { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .client-profile-nav { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 4px; }
  .client-profile-nav button { min-height: 28px; padding: 4px 6px; font-size: 12px; }
  #client-form .field-line :is(input, select) { height: 30px; }
}
@media (max-height: 440px) and (min-width: 601px) {
  .clients-page #client-form { padding-block: 7px; }
  .clients-page .dialog-head { padding-block: 6px; }
  #client-form .fields { gap: 4px 10px; }
  #client-form .field-line :is(input, select) { height: 27px; }
  #client-form .client-recurrence-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #client-form .client-recurrence-fields svg { display: none; }
  .client-profile-nav button { min-height: 28px; }
}