.client-appointments-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:end;margin-bottom:12px}
.client-appointments-filters label{display:grid;gap:6px;min-width:0;font-size:14px}
.client-appointments-filters input{width:100%;min-width:0;max-width:100%;box-sizing:border-box;font-size:16px;min-height:44px}
.client-appointments-list{display:grid;gap:12px}.client-appointment-card{padding:14px;border:1px solid #eadde1;border-radius:16px;display:grid;gap:8px;overflow-wrap:anywhere;background:#fff}.client-appointment-card p{margin:0}.client-appointment-card small{color:#726b6d}
.client-appointments-pager{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;grid-column:1/-1}
.client-appointments-dialog .surface-dialog-foot{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}.client-appointments-dialog .surface-dialog-foot>a,.client-appointments-dialog button{min-height:44px;white-space:normal}.client-appointments-dialog .surface-dialog-foot a{display:inline-flex;align-items:center;padding:10px 14px;border:1px solid #e4dce0;border-radius:12px;text-decoration:none;color:inherit}
.client-appointments-dialog [hidden]{display:none!important}.upcoming-appointments{display:grid;gap:14px}.upcoming-appointments h1{font-size:clamp(24px,5vw,34px);margin:0}.upcoming-appointments .pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.appointments-page-footer{position:static;padding:20px 16px;text-align:center;font-size:12px;color:#756e70}
@media(min-width:900px){.client-appointments-filters{grid-template-columns:repeat(2,minmax(0,1fr)) auto}}

/* Client record: React owns the shared row; both actions retain their handlers. */
.client-record-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:stretch;min-width:0;margin:0 0 14px}
.client-record-actions>button{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;min-width:0;max-width:100%;min-height:48px;margin:0;padding:10px 12px;border:1px solid #e4dce0;border-radius:12px;background:#fff;color:#60575b;font-size:16px;font-weight:600;line-height:1.3;white-space:normal;overflow-wrap:anywhere;text-align:center}
/* iOS date inputs have intrinsic internal sizing unlike Chromium's picker. */
.client-appointments-filters{min-width:0}
.client-appointments-filters>label{min-inline-size:0;max-inline-size:100%}
.client-appointments-filters input[type=date]{display:block;box-sizing:border-box;inline-size:100%;min-inline-size:0;max-inline-size:100%;-webkit-appearance:none;appearance:none;min-height:46px;padding:10px 12px;line-height:1.4}
.client-appointments-filters input[type=date]::-webkit-date-and-time-value{min-width:0;margin:0;text-align:left}
.client-appointments-filters input[type=date]::-webkit-datetime-edit{min-width:0;padding:0}
@media(max-width:600px){.client-appointments-filters{grid-template-columns:minmax(0,1fr)}.client-appointments-filters>button{width:100%;min-width:0}}

.client-report-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-column:1/-1;gap:10px;min-width:0;width:100%;align-items:stretch}
.client-report-actions>.client-report-generate{grid-column:1/-1}
.client-appointments-dialog .client-report-actions>button,.client-appointments-dialog .client-report-actions>a{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;min-width:0;max-width:100%;min-height:46px;margin:0;padding:10px 12px;font-size:16px;font-weight:600;line-height:1.3;text-align:center;white-space:normal;overflow-wrap:anywhere}
.client-appointments-dialog .client-report-actions.is-download-only>a{grid-column:1/-1}