/* =====================================================================
   EngageSAE Console theme — LEGACY SHIM
   ---------------------------------------------------------------------
   Bridges pre-Bootstrap markup conventions that are still emitted by
   older user controls, so those pages don't look broken under the theme.

   THIS FILE IS A DEPRECATION SURFACE. Every rule here exists only because
   some control still emits a legacy class. As controls are modernised
   (see Phase 5 of the rollout plan) the matching block should be deleted.
   Nothing new should ever be added here.

   Base definitions for these classes live in `www/Main_Responsive.css`
   with tag-qualified selectors (div.Head1, span.InfoBlock,
   input.RequiredTextBox — specificity 0,1,1). The two-class selectors
   below (0,2,0) outrank them without needing !important.

   Current consumers (approximate, from a repo-wide scan):
     InfoBlock ....... 48 files      Head1 ........... 18 files
     SmallGrayNote ... 12 files      Head2/Head3 ..... 12 files
     DocumentError ... 31 files      RequiredTextBox .. 5 files
     SaveSuccess ..... 16 files      tblAccountCreate . 4 files
   ===================================================================== */

/* ---------- Section headings (div.Head1 / .Head2 / .Head3) ---------- */

.engage-console .Head1 {
    font-size: 20px;
    font-weight: 800;
    color: var(--v3-navy);
    margin: 0 0 14px;
}
.engage-console .Head2 {
    font-size: 17px;
    font-weight: 700;
    color: var(--v3-navy);
    margin: 0 0 10px;
}
.engage-console .Head3 {
    font-size: 16px;
    font-weight: 800;
    color: var(--v3-navy);
    margin: 6px 0 14px;
    padding-top: 18px;
    border-top: 1px solid var(--v3-line);
}
.engage-console .CreateAccount .Head2 { margin-bottom: 8px; }

/* ---------- Inline status / helper text ---------- */

.engage-console .InfoBlock {
    display: block;
    color: var(--v3-muted);
    font-size: 13px;
    margin-bottom: 10px;
}
.engage-console .SmallGrayNote {
    font-size: 12px;
    color: var(--v3-muted);
    line-height: 1.55;
}
.engage-console .DocumentError {
    display: block;
    color: var(--v3-danger);
    font-weight: 700;
    font-size: 12px;
    margin-top: 4px;
}
.engage-console .SaveSuccess {
    color: var(--v3-success);
    font-weight: 700;
    margin: 0 10px;
}

/* ---------- Legacy inputs ---------- */

.engage-console input.RequiredTextBox {
    border: 1px solid var(--v3-line);
    border-radius: var(--v3-radius-sm);
    min-height: 42px;
    padding: 8px 12px;
    font-size: 14px;
    color: var(--v3-ink);
    background-color: #fff;
}
.engage-console input.RequiredTextBox:focus {
    border-color: #9dc3ef;
    box-shadow: var(--v3-focus-ring);
    outline: none;
}

/* ---------- Legacy account layout table ----------
   A label/field/help three-column table with hardcoded pixel widths and
   a Poppins font-family baked into per-cell `.styleNN` classes. Only the
   commented-out role panels in AccountRole.ascx and a handful of other
   controls still emit it. */

.engage-console .tblAccountCreate {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.engage-console .tblAccountCreate td {
    padding: 8px 16px 8px 0;
    vertical-align: top;
}
/* First column is the field label. */
.engage-console .tblAccountCreate td:first-child {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--v3-muted);
    font-weight: 700;
    padding-top: 16px;
    white-space: nowrap;
}
/* Full-width note rows stay normal prose. Declared after the
   :first-child rule so it wins at equal specificity. */
.engage-console .tblAccountCreate td[colspan] {
    text-transform: none;
    letter-spacing: 0;
    white-space: normal;
    color: var(--v3-ink);
    font-weight: 400;
    font-size: 13px;
    padding-top: 6px;
}
.engage-console .tblAccountCreate td[colspan] b { color: var(--v3-navy); }
.engage-console .tblAccountCreate .form-control { width: 100%; max-width: 300px; }

/* ---------- Legacy container ---------- */

.engage-console .CreateAccount .btn { margin-top: 6px; }
