/* JR BP Profile Table Full Width v1.0.1
   Scope: mobile landscape + tablet portrait + tablet landscape only
*/

/* Let the content area and BuddyPress wrapper use the full available width */
body.jr-mobile-landscape .entry-content-wrap,
body.jr-tablet .entry-content-wrap,
body.jr-mobile-landscape .entry-content.single-content,
body.jr-tablet .entry-content.single-content,
body.jr-mobile-landscape #buddypress.buddypress-wrap,
body.jr-tablet #buddypress.buddypress-wrap {
  width: 100% !important;
  max-width: 100% !important;
}

/* The screenshots show the FORM itself is the constrained element */
body.jr-mobile-landscape #settings-form.standard-form,
body.jr-tablet #settings-form.standard-form {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Force the profile settings tables to fill the form width */
body.jr-mobile-landscape #settings-form.standard-form table.profile-settings,
body.jr-tablet #settings-form.standard-form table.profile-settings,
body.jr-mobile-landscape #settings-form.standard-form table.bp-tables-user,
body.jr-tablet #settings-form.standard-form table.bp-tables-user {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed !important;
}

/* Give the left and right columns sensible widths */
body.jr-mobile-landscape #settings-form.standard-form table.profile-settings th.title.field-group-name,
body.jr-tablet #settings-form.standard-form table.profile-settings th.title.field-group-name,
body.jr-mobile-landscape #settings-form.standard-form table.bp-tables-user th.title.field-group-name,
body.jr-tablet #settings-form.standard-form table.bp-tables-user th.title.field-group-name {
  width: 72% !important;
}

body.jr-mobile-landscape #settings-form.standard-form table.profile-settings th.title:not(.field-group-name),
body.jr-tablet #settings-form.standard-form table.profile-settings th.title:not(.field-group-name),
body.jr-mobile-landscape #settings-form.standard-form table.bp-tables-user th.title:not(.field-group-name),
body.jr-tablet #settings-form.standard-form table.bp-tables-user th.title:not(.field-group-name) {
  width: 28% !important;
}

/* Make body cells follow the wider layout */
body.jr-mobile-landscape #settings-form.standard-form table.profile-settings td.field-name,
body.jr-tablet #settings-form.standard-form table.profile-settings td.field-name,
body.jr-mobile-landscape #settings-form.standard-form table.bp-tables-user td.field-name,
body.jr-tablet #settings-form.standard-form table.bp-tables-user td.field-name {
  width: 72% !important;
}

body.jr-mobile-landscape #settings-form.standard-form table.profile-settings td.field-visibility,
body.jr-tablet #settings-form.standard-form table.profile-settings td.field-visibility,
body.jr-mobile-landscape #settings-form.standard-form table.bp-tables-user td.field-visibility,
body.jr-tablet #settings-form.standard-form table.bp-tables-user td.field-visibility {
  width: 28% !important;
}

/* Keep the select control fitting inside the right column */
body.jr-mobile-landscape #settings-form.standard-form table.profile-settings td.field-visibility select,
body.jr-tablet #settings-form.standard-form table.profile-settings td.field-visibility select,
body.jr-mobile-landscape #settings-form.standard-form table.bp-tables-user td.field-visibility select,
body.jr-tablet #settings-form.standard-form table.bp-tables-user td.field-visibility select {
  width: 100% !important;
  max-width: 100% !important;
}

/* Slightly reduce horizontal padding so the table can breathe */
body.jr-mobile-landscape #settings-form.standard-form table.profile-settings td,
body.jr-mobile-landscape #settings-form.standard-form table.profile-settings th,
body.jr-tablet #settings-form.standard-form table.profile-settings td,
body.jr-tablet #settings-form.standard-form table.profile-settings th,
body.jr-mobile-landscape #settings-form.standard-form table.bp-tables-user td,
body.jr-mobile-landscape #settings-form.standard-form table.bp-tables-user th,
body.jr-tablet #settings-form.standard-form table.bp-tables-user td,
body.jr-tablet #settings-form.standard-form table.bp-tables-user th {
  padding-left: 10px !important;
  padding-right: 10px !important;
}