/*
  The Roles page list (class.roles_page.php) and the drawer a role opens: the Employer
  Settings settings_group / settings_row look (global.css) on the page and in the drawer, plus
  the drawer's own pieces — the group heads with a Manage link, the avatar box, the Rename /
  Remove cards, the footer button. rpd_ classes. px throughout (a rem is 10px here).
*/

/* ---- the page list ---- */

.roles_page_list { margin-bottom: 28px; }
.roles_page_list .settings_row_label { font-weight: 600; }

/* ---- the drawer body ---- */

.rpd_body { padding: 6px 16px 30px; }
.rpd_group_head
{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-right: 4px;
}
.rpd_group_head .settings_group_title { margin: 22px 0 8px; }
.rpd_group_link
{
  font-size: 13px;
  font-weight: 700;
  color: #007A85;
  text-decoration: none;
  white-space: nowrap;
}
.rpd_group_link:hover, .rpd_group_link:focus { color: #006470; text-decoration: none; }

.rpd_level_row, .rpd_empty_row { cursor: default; }
.rpd_level_row:hover, .rpd_empty_row:hover { background: white; }
.rpd_empty_row .settings_row_label { font-weight: 500; }
.rpd_empty_row .settings_row_sub { white-space: normal; }

.rpd_avatar
{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  background: #007A85;
  color: white;
}

/* ---- the header's ⋮ ---- */

.rpd_tools { flex: none; margin-left: 8px; }
.rpd_header_btn
{
  background: transparent;
  border: 1px solid rgba(255,255,255,0.7);
  color: white;
  border-radius: 6px;
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}
.rpd_header_btn:hover, .rpd_header_btn:focus, .rpd_tools.open .rpd_header_btn { background: rgba(255,255,255,0.15); color: white; }
.rpd_tools .dropdown-menu { min-width: 180px; border-radius: 8px; padding: 6px 0; }
.rpd_tools .dropdown-menu > li > a { padding: 9px 16px; font-size: 14px; display: flex; align-items: center; gap: 10px; }

/* ---- the stacked windows: a card, the way list, the footer ---- */

.rpd_card
{
  background: white;
  border: 1px solid #d3e2e3;
  border-radius: 12px;
  padding: 18px 16px;
  margin-top: 16px;
}
.rpd_card_title { font-size: 18px; font-weight: 700; color: #0F2044; margin-bottom: 6px; }
.rpd_card_text { font-size: 14px; color: #61727a; line-height: 1.45; margin-bottom: 12px; }
.rpd_card_text:last-child { margin-bottom: 0; }
.rpd_form { margin-bottom: 0; background: white; border: 1.5px solid #dbe4e6; border-radius: 10px; overflow: hidden; }
.rpd_form:focus-within { border-color: #007A85; }
.rpd_form .form-control { border: none; border-radius: 0; box-shadow: none; font-size: 16px; color: #0F2044; padding: 12px 14px; height: 46px; }
.rpd_way { list-style: none; padding: 0; margin: 0 0 14px; }
.rpd_way li { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; font-size: 14px; color: #0F2044; border-top: 1px solid #e4eeee; }
.rpd_way li:first-child { border-top: 0; }
.rpd_way li i { color: #b42323; font-size: 16px; line-height: 1.3; }

.rpd_foot
{
  flex: none;
  background: white;
  border-top: 1px solid #dbe4e6;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
}
.rpd_foot .rpd_errors { margin-bottom: 10px; }
.rpd_button
{
  height: 46px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  background: #007A85;
  border: 1px solid #007A85;
  color: white !important;
  box-shadow: none;
}
.rpd_button:hover, .rpd_button:focus { background: #006470; border-color: #006470; }
.rpd_button_danger { background: #b42323; border-color: #b42323; }
.rpd_button_danger:hover, .rpd_button_danger:focus { background: #961c1c; border-color: #961c1c; }
.pd_busy { opacity: .6; }