.form-page { position: fixed; inset: 0; z-index: 30; background: var(--bg); color: var(--text); overflow: hidden; }
html[data-form-page="true"] { overflow: hidden; }
html[data-form-page="true"] #workspace { visibility: hidden; }
.form-page #modal-content { display: flex; flex-direction: column; height: 100%; max-height: none; }
.form-page .dialog-head { min-height:60px;height:60px;box-sizing:border-box;align-items:center;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:8px; flex-shrink: 0; position: static; padding: 8px 16px; margin: 0; border: 0; background: var(--app-brand); color: white; }
.form-page .dialog-head h2 { font-size: 17px; font-weight:500; margin: 0; flex: 1; text-align:center; }
.form-page .dialog-head button { background: transparent; color: white; min-height: 44px; width: 44px; padding: 10px; }
html[data-surface="staff"] .form-page .dialog-head { position: static; top: auto; background: var(--app-brand); padding: 8px 16px; }
html[data-surface="staff"] .form-page .dialog-head button:hover { background: #ffffff15; color: white; }
.form-page form { display: flex; flex-direction: column; min-height: 0; flex: 1; overflow: hidden; }
.form-page .page-fields { overflow-y: auto; overscroll-behavior: contain; padding: 16px; flex: 1; }
.form-page label { display: block; font-size: 13px; margin: 0 0 16px; line-height: 1.5; }
.form-page:not(.schedule-page) input, .form-page:not(.schedule-page) select, .form-page:not(.schedule-page) textarea { background: white; min-height: 46px; margin-top: 8px; font-size: 15px; border-radius: var(--app-radius); }
.form-page:not(.schedule-page) textarea { min-height: 100px; }
.form-page .form-grid { display: block; }
.form-page fieldset { background: white; margin: 10px 0; padding: 16px; border-radius: var(--app-radius); }
.form-page legend { font-size: 14px; font-weight: 600; }
.form-page .weekday-checks label { display: flex; margin: 0; }
.form-page .weekday-checks input { min-height: 18px; margin: 0; }
.form-page .dialog-actions { flex-shrink: 0; padding: 14px 16px max(14px,env(safe-area-inset-bottom)); margin: 0; background: white; border-top: 1px solid var(--line); }
.form-page .dialog-actions[hidden] { display: none !important; }
.form-page .dialog-actions .primary { width: 100%; min-height: 48px; font-size: 15px; }
.form-page .form-error { flex-shrink: 0; font-size: 13px; margin: 0; padding: 8px 16px 12px; color: #c24136; font-weight: 500; }
.form-page .form-error:empty { display: none; }
.form-page .dialog-head:has(.head-save-btn) { grid-template-columns: 78px minmax(0,1fr) 78px; gap: 6px; }
.form-page .dialog-head .head-save-btn,
html[data-surface="staff"] .form-page .dialog-head button.head-save-btn,
html[data-surface="staff"] .staff-header button.head-save-btn {
  justify-self: end;
  width: auto !important;
  min-width: 72px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #17382e !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 38px !important;
  letter-spacing: 0.5px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16) !important;
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.15s ease;
}
html[data-surface="staff"] .form-page .dialog-head button.head-save-btn:hover,
html[data-surface="staff"] .staff-header button.head-save-btn:hover {
  background: #f0f7f3 !important;
  color: #17382e !important;
}
.form-page .dialog-head .head-save-btn:active,
html[data-surface="staff"] .form-page .dialog-head button.head-save-btn:active,
html[data-surface="staff"] .staff-header button.head-save-btn:active {
  transform: scale(0.96);
}
.form-page .dialog-head .head-save-btn:disabled,
html[data-surface="staff"] .form-page .dialog-head button.head-save-btn:disabled,
html[data-surface="staff"] .staff-header button.head-save-btn:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed;
}
html[data-surface="staff"] .staff-header button.head-save-btn[hidden] {
  display: none !important;
}
.form-page #task-new-flow { display: block; width: 100%; margin-top: 8px; min-height: 44px; background: transparent; }
.form-page:not(.schedule-page) label small { display: block; color: var(--muted); font-size: 11px; margin-top: 7px; }
.form-page.flow-dialog #modal-content { height: 100%; max-height: none; }
.form-page.flow-dialog .dialog-head { background: var(--app-brand); padding: 8px 16px; }
.form-page #flow-form { flex: 1; }
.form-page .flow-body { flex: 1; padding: 16px; }
.form-page .flow-footer { padding-bottom: max(14px,env(safe-area-inset-bottom)); }
.form-page .flow-footer .primary { flex: 1; min-height: 48px; }
.form-page #flow-back { min-height: 44px; }
.form-page .flow-nav { background: white; flex-shrink: 0; }
@media(min-width:700px) { .form-page .page-fields, .form-page .flow-body { padding-left: max(24px,calc((100vw - 620px)/2)); padding-right: max(24px,calc((100vw - 620px)/2)); } }

.form-page .form-section-title { font-size: 15px; margin: 0 0 16px; }

#user-form .page-fields { max-width:680px; padding:24px; width:100%; margin:0 auto; }
#user-form .account-section-title { margin:8px 0 18px; font-size:15px; font-weight:500; }
#user-form label { color:var(--text); font-weight:500; margin-bottom:20px; }
#user-form input,#user-form select { display:block; width:100%; box-sizing:border-box; border:1px solid var(--line); padding:12px 14px; background:#fff; }
#user-form label small { font-weight:400; color:var(--muted); font-size:12px; }
#user-form input:focus,#user-form select:focus { outline:2px solid #a5b4fc; outline-offset:2px; }

html[data-surface="staff"] .form-page .dialog-head h2{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0;font-size:17px;font-weight:500}
html[data-surface="staff"] .form-page .dialog-head:has(#medical-add-visit){grid-template-columns:88px minmax(0,1fr) 88px;gap:0}
html[data-surface="staff"] .form-page .dialog-head>[data-close]{justify-self:start}
html[data-surface="staff"] .form-page .dialog-head>#medical-add-visit{justify-self:end}