/* =========================================================
   RELAY STRATA — ACCOUNT WORKSPACE SIMPLIFICATION
   Aligns Account with the flatter, quieter Relay UI.
   ========================================================= */

.relay-account-page {
  padding-top: 42px !important;
  padding-bottom: 58px !important;
}

/* Back navigation: same compact treatment used elsewhere. */
.relay-account-page #relayAccountBackButton {
  min-height: 38px !important;
  height: 38px !important;
  margin: 0 0 28px !important;
  padding: 0 14px !important;
  background: #FFFFFF !important;
  border: 1px solid #D5DBE1 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  color: #111111 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  transform: none !important;
}

.relay-account-page #relayAccountBackButton:hover {
  border-color: #111111 !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Heading: remove explanatory clutter and tighten the opening. */
.relay-account-heading {
  margin-bottom: 28px !important;
}

.relay-account-heading .eyebrow {
  margin-bottom: 16px !important;
}

.relay-account-heading h1 {
  margin-bottom: 0 !important;
}

.relay-account-heading > p {
  display: none !important;
}

/* Profile / organisation are reference information, not dashboard cards. */
.relay-account-summary-grid {
  gap: 14px !important;
  margin-bottom: 0 !important;
}

.relay-account-summary {
  min-height: 0 !important;
  padding: 22px 24px !important;
  background: #FFFFFF !important;
  border: 1px solid #DDE3E8 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.relay-account-summary h3 {
  margin: 7px 0 10px !important;
  font-size: 20px !important;
}

.relay-account-summary p {
  margin-bottom: 7px !important;
  color: #566171 !important;
  font-size: 13px !important;
}

.relay-account-summary-footer {
  margin-top: 18px !important;
  padding-top: 14px !important;
  border-top-color: #E8ECEF !important;
}

/* Sections: use rules and rhythm rather than floating cards. */
.relay-account-page .relay-account-section {
  margin-top: 30px !important;
  padding-top: 30px !important;
  border-top: 1px solid #E1E5E9 !important;
}

.relay-account-page .risk-section-heading {
  margin-bottom: 18px !important;
}

.relay-account-page .risk-section-heading h2 {
  margin: 0 !important;
  font-size: 25px !important;
  line-height: 1.1 !important;
}

.relay-account-page .risk-section-heading p {
  max-width: 680px !important;
  margin: 7px 0 0 !important;
  color: #667085 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* Branding is an organisation-admin setting, not a preview experience. */
.relay-branding-layout {
  display: block !important;
  width: 100% !important;
}

.relay-branding-controls {
  width: 100% !important;
  max-width: none !important;
  padding: 22px !important;
  border: 1px solid #DDE3E8 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

/* Compact the branding form: display name full-width, logo + fonts together. */
.relay-branding-controls .relay-auth-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(440px, 0.95fr) !important;
  column-gap: 24px !important;
  row-gap: 16px !important;
}

.relay-branding-controls .relay-auth-form > .relay-field:first-child {
  grid-column: 1 / -1 !important;
}

.relay-branding-controls .relay-auth-form > .relay-field:nth-child(2) {
  grid-column: 1 !important;
  grid-row: 2 !important;
}

.relay-branding-controls .relay-auth-form > .relay-auth-two-column {
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: start !important;
}

.relay-branding-controls .relay-auth-form > .relay-brand-colour-grid {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
}

.relay-branding-controls .relay-auth-form > .relay-form-message {
  grid-column: 1 / -1 !important;
}

.relay-branding-controls #relaySaveBrandingButton {
  grid-column: 1 !important;
}

/* Replace the browser file control with a clean Relay control. */
.relay-account-page #relayBrandLogo {
  display: none !important;
}

.relay-brand-logo-control {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.relay-brand-logo-button {
  min-height: 40px !important;
  padding: 0 14px !important;
  background: #FFFFFF !important;
  color: #111111 !important;
  border: 1px solid #D5DBE1 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.relay-brand-logo-button:hover {
  border-color: #111111 !important;
  box-shadow: none !important;
  transform: none !important;
}

.relay-brand-logo-filename {
  color: #667085;
  font-size: 12px;
}

/* Account actions: flat by default. */
.relay-account-page .button,
.relay-account-page .button:hover {
  box-shadow: none !important;
  transform: none !important;
}

/* Primary means action, not decoration. */
.relay-account-page .button-primary,
.relay-account-page .button-primary:hover,
.relay-account-page #relaySaveBrandingButton,
.relay-account-page #relaySaveBrandingButton:hover,
.relay-account-page #relaySaveRenewalSettingsButton,
.relay-account-page #relaySaveRenewalSettingsButton:hover {
  background: #A7DCC1 !important;
  border-color: #A7DCC1 !important;
  color: #111111 !important;
  box-shadow: none !important;
}

.relay-account-page #relaySaveBrandingButton,
.relay-account-page #relaySaveRenewalSettingsButton {
  width: auto !important;
  min-width: 138px !important;
  justify-self: start !important;
  align-self: start !important;
}

/* Invite is a secondary organisation-admin action. */
.relay-account-page #relayInviteMemberButton,
.relay-account-page #relayInviteMemberButton:hover {
  background: #FFFFFF !important;
  border: 1px solid #D5DBE1 !important;
  color: #111111 !important;
  box-shadow: none !important;
}

.relay-account-page #relayInviteMemberButton:hover {
  border-color: #111111 !important;
}

/* Tables: compact and administrative rather than card-like. */
.relay-members-list,
.relay-account-stakeholders {
  box-shadow: none !important;
}

.relay-members-header,
.relay-stakeholders-header {
  min-height: 42px !important;
}

.relay-member-row,
.relay-stakeholder-row {
  min-height: 58px !important;
}

/* Stakeholder rows: data should not compete with the person's name. */
.relay-account-stakeholders .relay-account-property-cell,
.relay-account-stakeholders .relay-account-property-cell strong,
.relay-account-stakeholders .relay-account-role-status-cell,
.relay-account-stakeholders .relay-account-role-status-cell strong {
  font-weight: 400 !important;
}

/* Accepted / Pending are useful states, but they do not need coloured pills. */
.relay-account-stakeholders .relay-account-status-plain {
  padding: 0 !important;
  gap: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: #667085 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  border-radius: 0 !important;
}

.relay-account-stakeholders .relay-account-status-plain::before {
  display: none !important;
  content: none !important;
}

/* Removing a stakeholder deletes the connected stakeholder record. */
.relay-account-stakeholders .relay-account-remove-stakeholder,
.relay-account-stakeholders .relay-account-remove-stakeholder:hover {
  color: #F28A30 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.relay-account-stakeholders .relay-account-remove-stakeholder:hover {
  color: #111111 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* Keep orange for purposeful destructive text actions only. */
.relay-account-page .button-text,
.relay-account-page .relay-action-link {
  box-shadow: none !important;
}

@media (max-width: 1000px) {
  .relay-branding-controls .relay-auth-form {
    grid-template-columns: 1fr !important;
  }

  .relay-branding-controls .relay-auth-form > .relay-field:first-child,
  .relay-branding-controls .relay-auth-form > .relay-field:nth-child(2),
  .relay-branding-controls .relay-auth-form > .relay-auth-two-column,
  .relay-branding-controls .relay-auth-form > .relay-brand-colour-grid,
  .relay-branding-controls .relay-auth-form > .relay-form-message,
  .relay-branding-controls #relaySaveBrandingButton {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

@media (max-width: 800px) {
  .relay-account-page {
    padding-top: 30px !important;
  }

  .relay-account-page .relay-account-section {
    margin-top: 24px !important;
    padding-top: 24px !important;
  }

  .relay-account-page #relayInviteMemberButton {
    width: auto !important;
  }
}