/* public/css/mobile/member-account.css
 * W4 (Workspace provisioning Phase 1 / F7 — DCM parity): application
 * "Membership Account" card, Create Member sheet (permission tags, Workspace
 * fields, Google group picker + per-group results), Link / Reverse / Add to
 * Groups sheets, member account-status (pending deletion) panel, and the
 * Admin > Workspace Groups screen. Only --dcm-* tokens (DCM has no
 * platform-chrome.css, so no --cc13-* here). Tablet-first. */

.dcm-acct__summary { margin: 0 0 10px; font-size: 13.5px; color: var(--dcm-muted); line-height: 1.5; }
.dcm-acct__status { margin: 10px 0 0; font-size: 13.5px; color: var(--dcm-muted); }
.dcm-acct__status:empty { display: none; }
.dcm-acct__status--ok { color: var(--dcm-success); }
.dcm-acct__status--error { color: var(--dcm-danger); }

/* Plain, VISIBLE checkbox (dcm-mem__toggle hides its native input).
 * Scoped to the INPUT: several admin pickers put .dcm-perm-check on the
 * wrapping <label>, where a 22px box squeezed the text and overlapped (TD-089). */
input.dcm-perm-check {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  margin: 1px 0 0;
  accent-color: var(--dcm-accent);
  cursor: pointer;
}
input.dcm-perm-check:disabled { cursor: not-allowed; }
/* Label-row form: grows with a wrapped label; whole row is a >=40px target. */
label.dcm-perm-check { display: flex; align-items: flex-start; gap: 10px; min-height: 40px; line-height: 1.4; }
label.dcm-perm-check > input[type="checkbox"] { flex: 0 0 auto; margin: 0; }
label.dcm-perm-check > span { min-width: 0; overflow-wrap: anywhere; padding-top: 1px; }

.dcm-acct__list {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--dcm-border);
  border-radius: 10px;
  padding: 2px 12px;
  background: var(--dcm-surface);
}
.dcm-acct__option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  min-height: 44px;
  border-bottom: 1px solid var(--dcm-border);
  cursor: pointer;
  color: var(--dcm-text);
}
.dcm-acct__option:last-child { border-bottom: none; }
.dcm-acct__option.is-locked { cursor: not-allowed; opacity: 0.6; }
.dcm-acct__opt-name { font-size: 14.5px; font-weight: 600; }
.dcm-acct__opt-sub { display: block; font-size: 12.5px; color: var(--dcm-muted); margin-top: 2px; }
.dcm-acct__opt-text { display: flex; flex-direction: column; min-width: 0; }
.dcm-acct__opt-text .dcm-chip { align-self: flex-start; margin-top: 4px; }

.dcm-acct__heading { margin: 16px 0 4px; font-size: 14.5px; font-weight: 700; color: var(--dcm-text); }
.dcm-acct__note { margin: 0 0 8px; font-size: 12.5px; color: var(--dcm-muted); line-height: 1.45; }
.dcm-acct__who {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--dcm-border);
  border-radius: 10px;
  background: var(--dcm-surface-2);
  color: var(--dcm-text);
}
.dcm-acct__who-name { font-weight: 600; }
.dcm-acct__who-sub { font-size: 13px; color: var(--dcm-muted); }

.dcm-acct__box {
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--dcm-border);
  border-radius: 10px;
  background: var(--dcm-surface-2);
}
.dcm-acct__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .dcm-acct__row2 { grid-template-columns: 1fr; } }

.dcm-acct__hint { margin: 4px 0 0; font-size: 12.5px; color: var(--dcm-muted); }
.dcm-acct__hint:empty { display: none; }
.dcm-acct__hint--ok { color: var(--dcm-success); }
.dcm-acct__hint--bad { color: var(--dcm-danger); }
.dcm-acct__chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 0; }
.dcm-acct__chips:empty { display: none; }
.dcm-acct__chips-label { font-size: 12.5px; color: var(--dcm-muted); }

.dcm-acct__results { margin: 10px 0 0; font-size: 13.5px; }
.dcm-acct__results:empty { display: none; }
.dcm-acct__result { padding: 3px 0; color: var(--dcm-success); }
.dcm-acct__result--failed { color: var(--dcm-danger); }
.dcm-acct__result-note { padding: 3px 0; color: var(--dcm-muted); }

.dcm-acct__pick {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  min-height: 48px;
  border: none;
  border-bottom: 1px solid var(--dcm-border);
  background: none;
  color: var(--dcm-text);
  font-size: 14.5px;
  cursor: pointer;
}
.dcm-acct__pick[aria-selected="true"] { background: var(--dcm-surface-2); box-shadow: inset 4px 0 0 var(--dcm-accent); }

.dcm-acct__lifecycle { border-left: 4px solid var(--dcm-danger); margin: 0 0 12px; }
.dcm-acct__lifecycle-line { font-size: 14px; color: var(--dcm-text); line-height: 1.55; }
.dcm-acct__lifecycle-error { margin: 6px 0 0; font-size: 13px; color: var(--dcm-danger); }

/* Admin > Workspace Groups */
.dcm-wg__intro { margin: 0 0 10px; font-size: 13.5px; color: var(--dcm-muted); line-height: 1.5; }
.dcm-wg__row { padding: 12px 14px; margin: 0 0 8px; }
.dcm-wg__row.is-offered { box-shadow: inset 4px 0 0 var(--dcm-accent); }
.dcm-wg__row.is-dirty { background: var(--dcm-surface-2); }
.dcm-wg__name { font-weight: 600; font-size: 15px; color: var(--dcm-text); }
.dcm-wg__sub { font-size: 12.5px; color: var(--dcm-muted); word-break: break-all; }
.dcm-wg__note { font-size: 12.5px; color: var(--dcm-muted); margin-top: 3px; }
.dcm-wg__note--warn { color: var(--dcm-danger); }
.dcm-wg__checks { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 8px 0; }
.dcm-wg__check { display: flex; align-items: center; gap: 8px; min-height: 40px; font-size: 14px; color: var(--dcm-text); cursor: pointer; }
.dcm-wg__check.is-locked { color: var(--dcm-muted); cursor: not-allowed; }
.dcm-wg__toolbar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  margin: 8px 0 0;
}
.dcm-wg__dirty { margin-right: auto; font-size: 13.5px; color: var(--dcm-muted); }
.dcm-wg__dirty--error { color: var(--dcm-danger); }
.dcm-wg__grace { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dcm-wg__grace .dcm-input { width: 110px; }

.dcm-acct__actions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
  margin: 4px 0 0;
}
.dcm-acct__actions .dcm-btn { height: 48px; font-size: 15.5px; }