/* Explicit compatibility for unchanged content; never import the legacy global stylesheets. */
#pageBody .clearBoth, #pageBody .clearboth {
  clear: both;
}

#pageBody .floatLeft {
  float: left;
}

#pageBody .floatRight {
  float: right;
}

#pageBody .redded {
  color: var(--bs-danger);
}

#pageBody .greened {
  color: var(--bs-success);
}

#pageBody .width100, #pageBody .rowTable {
  width: 100%;
}

#pageBody img {
  max-width: 100%;
}

.sb-header .sb-brand img {
  width: 146px;
}

.sb-app-nav [hidden] {
  display: none !important;
}

.sb-app-nav .sb-nav-row:has(> a[hidden]) {
  display: none;
}

/* Legacy dashboard hover panels used a fixed 871px canvas. Keep them inside their group. */
#pageBody .groupItem3 {
  container-type: inline-size;
}

#pageBody .groupItem3 .members .details,
#pageBody .groupItem3 .services .service .details,
#pageBody .groupItem3 .services .service.hover .title {
  max-width: 100cqw;
}

#pageBody .groupItem3 .services.subscription .details {
  left: auto;
  right: 0;
}

#pageBody .blocksMenu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  border-bottom: 1px solid var(--bs-border-color);
}

#pageBody .blocksMenu li {
  margin: 0;
  padding: 0;
}

#pageBody .blocksMenu a {
  display: block;
  padding: 0.65rem 1rem;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  color: var(--bs-secondary-color);
}

#pageBody .blocksMenu a.active {
  color: var(--bs-primary);
  border-bottom-color: var(--bs-primary);
}

/* Table forms generated by advanced_tools.pm. No changes to HTML or tab visibility.
 * Styling controls here must work without shell.js adding Bootstrap classes.
 */
#pageBody form.modern:has(> table) {
  width: 100%;
  max-width: 42rem;
  margin: 0 0 2rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--sb-radius-card);
  background: var(--bs-white);
  box-shadow: var(--sb-shadow-sm);
}

#pageBody form.modern.wide {
  max-width: none;
}

#pageBody form.modern > table {
  width: 100%;
  border-collapse: collapse;
}

#pageBody form.modern .fieldname {
  width: 10.5rem;
  padding: 0.65rem 1rem 0.65rem 0;
  vertical-align: top;
  color: var(--bs-body-color);
  font-weight: 500;
  line-height: 1.5;
}

#pageBody form.modern .fieldvalue {
  padding: 0.5rem 0;
  vertical-align: top;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

#pageBody form.modern .row_rowtext {
  width: auto;
  padding: 1.25rem 0 0.5rem;
  border-top: 1px solid var(--bs-border-color);
  color: var(--sb-ink);
  font-size: 1rem;
  font-weight: 650;
}

#pageBody form.modern > table > tbody:first-of-type > tr:first-child > .row_rowtext {
  padding-top: 0;
}

/* The first section heading may follow ordinary fields or spacer rows. */
#pageBody form.modern > table > tbody:not(tbody:has(.row_rowtext) ~ tbody) > tr:nth-child(1 of :has(> .row_rowtext)) > .row_rowtext {
  border-top: 0;
}

/* row_separator() emits an unclassified, single colspan=2 cell containing nbsp. */
#pageBody form.modern > table > tbody > tr > td[colspan="2"]:only-child:not([class]):not(:has(*)) {
  padding: 0;
  height: 0.625rem;
  line-height: 0.625rem;
}

#pageBody form.modern .field_description {
  display: block;
  margin: 0.3rem 0 0;
  color: var(--bs-secondary-color);
  font-size: 0.8125rem;
  line-height: 1.45;
}

#pageBody form.modern .field_description.redded {
  color: var(--bs-danger);
}

#pageBody form.modern .field_description.greened {
  color: var(--bs-success);
}

/* A block-level description replaces the generator's extra line break. */
#pageBody form.modern .fieldvalue > br:has(+ .field_description) {
  display: none;
}

#pageBody form.modern :is(input:not([type]), input[type=text], input[type=email], input[type=password], input[type=number], input[type=tel], input[type=phone], input[type=url], input[type=search], input[type=date], input[type=time], textarea, select):not(.is-invalid):not(.is-valid) {
  box-sizing: border-box;
  max-width: 100%;
  min-height: 2.5rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--sb-input-radius, 0.5rem);
  color: var(--bs-body-color);
  background-color: var(--bs-white);
  font: inherit;
  line-height: 1.45;
}

#pageBody form.modern .fieldvalue > :is(input:not([type]), input[type=text], input[type=email], input[type=password], textarea, select):not(.auto-width) {
  width: 100%;
}

#pageBody form.modern textarea {
  min-height: 6rem;
  resize: vertical;
}

#pageBody form.modern :is(input, textarea, select):focus-visible {
  outline: 0;
  border-color: var(--sb-input-focus-color);
  box-shadow: var(--sb-input-focus-ring);
}

#pageBody form.modern :is(input, textarea, select):disabled,
#pageBody form.modern :is(input, textarea)[readonly] {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-secondary-color);
}

#pageBody form.modern :is(input[type=radio], input[type=checkbox]) {
  accent-color: var(--bs-primary);
  margin: 0 0.45rem 0 0;
  vertical-align: middle;
}

#pageBody form.modern label {
  line-height: 1.6;
}

#pageBody form.modern :is(input.button, button.button, a.button):not(.btn) {
  display: inline-block;
  width: auto;
  min-height: 2.5rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  color: var(--bs-body-color);
  background: var(--bs-white);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

#pageBody form.modern :is(input[type=submit].button, button[type=submit].button):not(.btn):first-of-type {
  color: var(--bs-white);
  border-color: var(--bs-primary);
  background: var(--bs-primary);
}

#pageBody form.modern :is(input.button, button.button, a.button):not(.btn):hover:not(:disabled) {
  filter: brightness(0.96);
}

#pageBody form.modern :is(input.button, button.button):disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

#pageBody form.modern .fieldvalue > a.redded {
  color: var(--bs-danger);
  text-underline-offset: 0.2em;
}

/* Placement only: pageNote appearance belongs to the shared component. */
#pageBody form.modern .fieldvalue > .pageNote.hint {
  margin: 0.125rem 0 0.5rem;
}

@media (max-width: 575.98px) {
  #pageBody form.modern:has(> table) {
    padding: 1rem;
  }
  /* Do not alter tbody/tr display: tabs.js controls their visibility. */
  #pageBody form.modern > table > tbody > tr > :is(.fieldname, .fieldvalue) {
    display: block;
    width: 100%;
  }
  #pageBody form.modern .fieldname {
    padding: 0.625rem 0 0.25rem;
  }
  #pageBody form.modern .fieldvalue {
    padding: 0 0 0.625rem;
  }
  #pageBody form.modern .fieldname:empty {
    display: none;
  }
  #pageBody form.modern .row_rowtext {
    padding: 1rem 0 0.5rem;
  }
}