/* Hallmark · component: registration form · genre: modern-minimal · theme: existing blue · redesign: polish · states: 8 · contrast: verified in review · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: hierarchy, identical fields obscured editable identity and effective payout; distinguish their surfaces and align date controls */
/* Hallmark · built: the project · layout: compact form and original navigation preserved */
:root {
  --ge-ink: #25344b;
  --ge-label: #52647c;
  --ge-muted: #62728a;
  --ge-placeholder: #748197;
  --ge-blue: #2b6de8;
  --ge-blue-strong: #225bc3;
  --ge-blue-dark: #194caa;
  --ge-line: #7d8fa8;
  --ge-line-hover: #859bb9;
  --ge-rule: #e2e8f0;
  --ge-paper: #ffffff;
  --ge-subtle: #f6f8fb;
  --ge-readonly: #eef1f5;
  --ge-readonly-line: #6d809a;
  --ge-accent-surface: #eff5ff;
  --ge-accent-line: #6287c4;
  --ge-focus: #1f63d9;
  --ge-focus-halo: #dbe8ff;
  --ge-error: #b13932;
  --ge-error-surface: #fff3f1;
  --ge-success: #216344;
  --ge-success-surface: #edf8f1;
  --ge-calendar-shadow: #172e4b29;
  --ge-clear: transparent;
}
html, body { overflow-x: clip; }
.gl-dialog.gl-detail-compact { width: min(1080px, calc(100% - 28px)); color: var(--ge-ink); }
.gl-dialog.gl-detail-compact .gl-field > :is(span, label):first-child {
  color: var(--ge-label);
  font-size: 12px;
  font-weight: 500;
  min-width: 0;
}
.gl-dialog.gl-detail-compact #gl-order-form :is(input:not([type=checkbox]), select, textarea) {
  border: 1px solid var(--ge-line);
  border-radius: 6px;
  background: var(--ge-paper);
  color: var(--ge-ink);
  box-shadow: none;
}
.gl-dialog.gl-detail-compact :is(input, textarea)::placeholder { color: var(--ge-placeholder); opacity: 1; }
.gl-dialog.gl-detail-compact #gl-order-form :is(input, select, textarea):not(:disabled):not([readonly]):hover,
.gl-dialog.gl-detail-compact #gl-order-form .is-hover {
  border-color: var(--ge-line-hover);
}
.gl-dialog.gl-detail-compact :is(button, input, select, textarea, a, summary):focus-visible,
.gl-dialog.gl-detail-compact .is-focus {
  outline: 2px solid var(--ge-focus);
  outline-offset: 2px;
}
.gl-dialog.gl-detail-compact #gl-order-form .gl-field:focus-within > :is(span, label):first-child {
  color: var(--ge-blue-dark);
}
.gl-dialog.gl-detail-compact #gl-order-form :is(input, select, textarea):focus-visible {
  box-shadow: 0 0 0 3px var(--ge-focus-halo);
}
.gl-dialog.gl-detail-compact #gl-order-form :is(input[readonly], select:disabled) {
  background: var(--ge-readonly);
  border-color: var(--ge-readonly-line);
  color: var(--ge-label);
}
.gl-dialog.gl-detail-compact #gl-order-form :is([data-entry-role=inlineCustomerWechat], [data-entry-role=serviceId]) > span:first-child {
  font-weight: 650;
  color: var(--ge-ink);
}
.gl-dialog.gl-detail-compact #gl-inline-customer {
  background: var(--ge-subtle);
  border-color: var(--ge-rule);
  border-radius: 6px;
}
.gl-dialog.gl-detail-compact #gl-order-form .gl-binding-preview {
  color: var(--ge-blue-dark);
  background: var(--ge-accent-surface);
  border-left: 2px solid var(--ge-accent-line);
  border-radius: 0 4px 4px 0;
}
.gl-dialog.gl-detail-compact #gl-order-form > h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ge-ink);
  font-weight: 650;
}
.gl-dialog.gl-detail-compact #gl-order-form > h4::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--ge-rule);
}
.gl-dialog.gl-detail-compact .gl-overview strong { font-variant-numeric: tabular-nums; font-weight: 650; }
.gl-dialog.gl-detail-compact #gl-order-form .gl-date-input {
  gap: 0;
  border: 1px solid var(--ge-line);
  border-radius: 6px;
  background: var(--ge-paper);
  min-width: 0;
}
.gl-dialog.gl-detail-compact #gl-order-form .gl-date-input input {
  min-height: 30px;
  border: 0;
  border-radius: 5px 0 0 5px;
  font-variant-numeric: tabular-nums;
}
.gl-dialog.gl-detail-compact #gl-order-form .gl-date-input .btn {
  min-height: 30px;
  padding: 5px 10px;
  border: 0;
  border-left: 1px solid var(--ge-rule);
  border-radius: 0 5px 5px 0;
  background: var(--ge-subtle);
  color: var(--ge-blue-strong);
}
.gl-dialog.gl-detail-compact #gl-order-form .gl-date-input:has(:focus-visible) { outline: 2px solid var(--ge-focus); outline-offset: 2px; }
.gl-dialog.gl-detail-compact #gl-order-form .gl-date-input :focus-visible { box-shadow: none; outline-offset: -2px; }
.gl-dialog.gl-detail-compact #gl-order-form .gl-amount-fields input {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.gl-dialog.gl-detail-compact #gl-order-form [data-entry-role=effectiveCents] > span { color: var(--ge-blue-dark); font-weight: 650; }
.gl-dialog.gl-detail-compact #gl-order-form input[name=effectiveCents] {
  background: var(--ge-accent-surface);
  border-color: var(--ge-accent-line);
  color: var(--ge-blue-dark);
  font-weight: 700;
}
.gl-dialog.gl-detail-compact #gl-order-form .gl-order-notes :is(input, textarea) { background: var(--ge-subtle); }
.gl-dialog.gl-detail-compact #gl-order-form .gl-order-notes :is(input, textarea):focus { background: var(--ge-paper); }
.gl-dialog.gl-detail-compact #gl-order-form .gl-registration-actions { border-color: var(--ge-rule); background: var(--ge-paper); }
.gl-dialog.gl-detail-compact :is(.gl-muted, .gl-foot) { color: var(--ge-muted); }
.gl-dialog.gl-detail-compact :is(.btn, .gl-close, .gl-tabs button, .gl-calendar button) {
  border: 1px solid var(--ge-rule);
  background: var(--ge-subtle);
  color: var(--ge-label);
  box-shadow: none;
}
.gl-dialog.gl-detail-compact :is(.btn, .gl-close, .gl-tabs button, .gl-calendar button):not(:disabled):hover,
.gl-dialog.gl-detail-compact button.is-hover { background: var(--ge-accent-surface); border-color: var(--ge-accent-line); color: var(--ge-blue-dark); }
.gl-dialog.gl-detail-compact :is(.btn.primary, .gl-calendar button[aria-pressed=true]) {
  background: var(--ge-blue);
  border-color: var(--ge-blue);
  color: var(--ge-paper);
}
.gl-dialog.gl-detail-compact .btn.primary:not(:disabled):hover,
.gl-dialog.gl-detail-compact .btn.primary.is-hover { background: var(--ge-blue-strong); border-color: var(--ge-blue-strong); color: var(--ge-paper); }
.gl-dialog.gl-detail-compact button:not(:disabled):active,
.gl-dialog.gl-detail-compact button.is-active { background: var(--ge-readonly); border-color: var(--ge-line-hover); }
.gl-dialog.gl-detail-compact .btn.primary:not(:disabled):active,
.gl-dialog.gl-detail-compact .btn.primary.is-active { background: var(--ge-blue-dark); border-color: var(--ge-blue-dark); }
.gl-dialog.gl-detail-compact .gl-tabs button[aria-selected=true] { background: var(--ge-accent-surface); color: var(--ge-blue-dark); border-color: var(--ge-accent-line); }
.gl-dialog.gl-detail-compact :is(button, input, select, textarea):disabled,
.gl-dialog.gl-detail-compact .is-disabled { opacity: .55; cursor: not-allowed; }
.gl-dialog.gl-detail-compact form[aria-busy=true] { cursor: progress; }
.gl-dialog.gl-detail-compact :is(button[aria-busy=true], .is-loading) { cursor: progress; }
.gl-dialog.gl-detail-compact #gl-order-form :is(input, textarea, select):is([aria-invalid=true], :user-invalid),
.gl-dialog.gl-detail-compact #gl-order-form .is-error { border-color: var(--ge-error); background: var(--ge-error-surface); color: var(--ge-error); }
.gl-dialog.gl-detail-compact .gl-error { background: var(--ge-error-surface); color: var(--ge-error); }
.gl-dialog.gl-detail-compact .gl-note.gl-success,
.gl-dialog.gl-detail-compact #gl-order-form .is-success { border-color: var(--ge-success); color: var(--ge-success); background: var(--ge-success-surface); }
@media (max-width: 560px) {
  .gl-dialog.gl-detail-compact { width: calc(100% - 20px); }
  .gl-dialog.gl-detail-compact #gl-order-form .gl-date-input :is(input, .btn) { min-height: 36px; }
}
@media (pointer: coarse) {
  .gl-dialog.gl-detail-compact #gl-order-form .gl-date-input .btn { min-height: 40px; }
}

/* Payout is a ledger fact: partial and unknown keep their own labels. */
#viewOrders .gl-card-states .gl-payout-badge { font-weight: 650; padding: 2px 8px; }
#viewOrders .gl-card-states [data-payout-state=paid] { color: var(--ge-success); background: var(--ge-success-surface); }
#viewOrders .gl-card-states :is([data-payout-state=unpaid], [data-payout-state=partial]) { color: var(--ge-error); background: var(--ge-error-surface); }
.gl-dialog.gl-detail-compact #gl-order-form select[name=groupStatus] { font-weight: 650; }
.gl-dialog.gl-detail-compact #gl-order-form select[data-registration-state=paid] { color: var(--ge-success); background: var(--ge-success-surface); border-color: var(--ge-success); }
.gl-dialog.gl-detail-compact #gl-order-form select[data-registration-state=registered] { color: var(--ge-error); background: var(--ge-error-surface); border-color: var(--ge-error); }
.gl-dialog.gl-detail-compact #gl-order-form select[name=groupStatus] option { color: var(--ge-ink); background: var(--ge-paper); font-weight: 400; }

/* Top-layer calendars never contribute height to the form or its scroll area. */
.gl-dialog .gl-calendar {
  position: fixed;
  inset: auto;
  z-index: 10;
  margin: 0;
  width: 280px;
  max-width: calc(100% - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--ge-ink);
  background: var(--ge-paper);
  border-color: var(--ge-line);
  box-shadow: 0 8px 28px var(--ge-calendar-shadow);
  font: inherit;
}
.gl-dialog .gl-calendar::backdrop { background: var(--ge-clear); }
.gl-dialog .gl-calendar .gl-calendar-grid button { min-height: 30px; }
.gl-dialog .gl-save-feedback { font-size: 12px; margin: 6px 0; padding: 6px 8px; }
.gl-dialog .gl-save-error { color: var(--ge-error); background: var(--ge-error-surface); }