/* Account screens (lane sr-screen-account): profile, security, clinic, users, billing tabs, plan cards,
   payment proof, tooth numbering, set-up. Tokens and rem only (D32 R3, R4). Layout follows
   apps/dpro-angular-5 account-settings (plans.component.scss: three columns, 1.5rem gap). */

/* Form pages: .form-page itself is defined once in money.css (sr-screen-money); only descendants here. */
.form-page .form-note { margin: 0 0 var(--space-4); }
.profile .form-main, .security .form-main, .clinic-setup .form-main { max-width: 40rem; }
/* Clinic detail (ux-20261028): full content width like the list pages, tabs above one panel. */
#main:has(> .clinic-detail) { max-width: none; margin: 0; }
.clinic-detail { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.clinic-region { display: grid; gap: var(--space-4); align-content: start; min-width: 0; }
.clinic-tabpanel { display: grid; gap: var(--space-4); min-width: 0; }
.clinic-fields { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.clinic-tabpanel .form-note { margin: 0 0 var(--space-4); }
.clinic-fields .field { margin: 0; }
.clinic-tabpanel .tooth-numbering { max-width: 40rem; }
.clinic-unsubscribe { margin: 0; padding: var(--space-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); }

/* Profile photo row: avatar next to the upload control. */
.profile-photo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); }
.profile-photo .avatar { flex: none; }

/* Plain label (the no-JS plan confirm page). */
.label { font-weight: 600; color: var(--ink); font-size: var(--fs-3); }

/* Confirm page tone for the primary variant (danger lives in overlays.css). */
.confirm-primary .confirm-title .icon { color: var(--accent); }

/* Tooth numbering fieldset in the clinic aside. */
.tooth-numbering { display: grid; gap: var(--space-3); padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.tooth-numbering h3 { margin: 0; font-size: var(--fs-4); }
.tooth-numbering p { margin: 0; }
.tooth-numbering fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-2); min-width: 0; }

/* Billing shell. */
.billing-page { display: grid; gap: var(--space-4); }
.billing-page .tab-body { padding-top: var(--space-4); }
.billing-notice { margin: 0; }

/* Payments tab: balance on the left, Add payment on the right, stacked on a phone. */
.payments-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.payments-balance { margin: 0; font-size: var(--fs-4); }
.cell-actions { display: inline-flex; justify-content: flex-end; }

/* Payment proof image in the view dialog. */
.proof-image { margin: var(--space-4) 0 0; }
.proof-image img { display: block; max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius-md); }

/* Plan tab. */
.plan-tab { display: grid; gap: var(--space-6); }
.plan-head { display: grid; gap: var(--space-2); }
.plan-until { margin: 0; font-size: var(--fs-5); }
.plan-storage { margin: 0; color: var(--body); }
.plan-meter { width: 100%; max-width: 31rem; height: 0.75rem; accent-color: var(--accent); }
.plan-notice { margin: 0; }
.plan-cards { list-style: none; margin: 0; padding: 0 var(--space-4); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.plan-item { display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.plan-cards .plan-card { padding: 0 0 var(--space-5); border-top-width: 1px; justify-items: center; text-align: center; overflow: hidden; }
.plan-cards .plan-card > header { justify-content: center; width: 100%; padding: var(--space-3) var(--space-5); background: var(--accent-brand); color: var(--on-brand); }
.plan-cards .plan-card h3 { font-size: var(--fs-5); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.plan-cards .plan-card .plan-price { font-size: var(--fs-5); font-weight: 800; text-transform: uppercase; }
.plan-cards .plan-card .plan-features { padding: 0 var(--space-5); text-align: left; }
.plan-cards .plan-card > footer { padding: 0 var(--space-5); }
.plan-cards .plan-card > footer .btn { min-width: 11.5rem; justify-content: center; }
.plan-card-not-available > header { background: var(--neutral-bg); color: var(--ink); }
.plan-card-not-available { opacity: 0.75; }
.plan-cards .plan-card.is-current { border-color: var(--accent); box-shadow: var(--shadow-1); }
.plan-desc { margin: 0; padding: 0 var(--space-2); text-align: center; }
.tooth-option { display: grid; gap: 0; }
.tooth-example { margin: 0 0 var(--space-2) 1.75rem; }
@media (min-width: 768px) { .plan-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .plan-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5) 1.5rem; } }

/* Error pages (SRR-04, G03): a centred card like the sign-in card; the action is a ui/button. */
main.bare:has(> .error-page) { max-width: var(--w-auth); }
.error-page { max-width: var(--w-auth); margin: var(--space-6) auto 0; padding: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); display: grid; justify-items: center; gap: var(--space-3); text-align: center; }
.error-page h1 { margin: 0; }
.error-message { margin: 0; color: var(--ink-muted); }
.error-actions { margin: var(--space-2) 0 0; }