/* register.css - Rhythm N Booked sign-up form (view/register.inc)
 * Status colors avoid red/green: OK = blue, problem = amber, and the wording carries the meaning.
 */
.register-card { max-width: 680px !important; text-align: left !important; }
.register-card h1, .register-card h3 { text-align: center; }
.reg-intro { text-align: center; color: #5d6578; margin: 0 auto 20px; max-width: 52ch; font-size: 0.95rem; }

.reg-row { display: flex; gap: 14px; flex-wrap: wrap; }
.reg-row > .reg-field { flex: 1 1 220px; min-width: 0; }
.reg-row > .reg-field-sm { flex: 0 1 200px; }
.reg-field { margin-bottom: 14px; }
.reg-field .form-label { font-weight: 600; margin-bottom: 4px; }

.reg-msg { display: block; min-height: 1.2em; margin-top: 4px; font-size: 0.85rem; color: #5d6578; }
.reg-msg.ok  { color: #1d5fb4; }
.reg-msg.bad { color: #9a5b00; font-weight: 600; }

.reg-roles { border: 1px solid #cfd6e2; border-radius: 8px; padding: 12px 14px 14px; margin: 4px 0 16px; }
.reg-roles legend { float: none; width: auto; font-size: 1rem; font-weight: 600; padding: 0 6px; margin: 0; }
.reg-optional { font-weight: 400; color: #5d6578; font-size: 0.9rem; }
.reg-hint { color: #5d6578; font-size: 0.85rem; margin: 2px 0 10px; }
.reg-role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 14px; }
.reg-role { display: flex; align-items: center; gap: 8px; min-width: 0; }
.reg-role label { flex: 1; margin: 0; cursor: pointer; }
.reg-role input[type="checkbox"], .reg-public input[type="checkbox"] { width: 18px; height: 18px; flex: none; cursor: pointer; }
.reg-years { width: 72px !important; flex: none; padding: 4px 6px !important; }
.reg-years:disabled { opacity: 0.45; }

.reg-custom { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.reg-custom .reg-custom-title { flex: 1; min-width: 0; }
.reg-custom .reg-remove { flex: none; border: 1px solid #cfd6e2; background: transparent; border-radius: 6px; padding: 4px 10px; cursor: pointer; }
.reg-add-role { margin-top: 10px; background: transparent !important; border: 1px dashed #8aa4c8 !important; color: #1d5fb4 !important; font-size: 0.9rem; padding: 4px 12px; }

.reg-public { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; background: #eef3fa; margin-bottom: 16px; }
.reg-public label { margin: 0; cursor: pointer; font-size: 0.92rem; }
.reg-alert { border: 1px solid #d99a2b; background: #fff6e6; color: #6b4200; border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; }
.reg-alert ul { margin: 6px 0 0 18px; padding: 0; }
.reg-links { text-align: center; }

/* Dark mode */
body.dark-mode .reg-intro, body.dark-mode .reg-hint, body.dark-mode .reg-optional, body.dark-mode .reg-msg { color: var(--dm-text-muted) !important; }
body.dark-mode .reg-msg.ok  { color: #93c5fd !important; }
body.dark-mode .reg-msg.bad { color: #fbbf24 !important; }
body.dark-mode .reg-roles { border-color: var(--dm-border); }
body.dark-mode .reg-role label, body.dark-mode .reg-public label, body.dark-mode .reg-roles legend { color: var(--dm-text) !important; }
body.dark-mode .reg-public { background: var(--dm-surface-2); }
body.dark-mode .reg-custom .reg-remove { border-color: var(--dm-border); color: var(--dm-text); }
body.dark-mode .reg-add-role { border-color: var(--dm-border-accent) !important; color: #93c5fd !important; }
body.dark-mode .reg-alert { background: #3a2e14; border-color: #b7791f; color: #fde7b0; }
body.dark-mode .register-card select.form-control { background: var(--dm-input-bg) !important; color: var(--dm-text) !important; border: 1px solid var(--dm-input-border) !important; }

@media (max-width: 768px) {
  .register-card { max-width: none !important; }
  .register-card .reg-row { flex-direction: column; gap: 0; }
}