/* =====================================================================
   EngageSAE Console theme — COMPONENTS
   ---------------------------------------------------------------------
   The additive Console vocabulary: panels, page headers, dashboard
   widgets, the inbox email list and the menu-group tiles.

   Scoping: these rules key off class names that are unique to the theme
   (`v3-*`) or to a specific page (`eng-inbox`, `eng-menugroup`, ...), so
   they need no body-class prefix. That means this file is inert on any
   page that does not use those classes — it is the lowest-risk layer and
   can ship before the theme is switched on globally.

   Page-scoped blocks rely on the page keeping its `eng-*` wrapper class
   even after the legacy `eng-v3` wrapper is removed.
   ===================================================================== */

/* ============================== PANEL ============================== */

.v3-panel {
    background: linear-gradient(130deg, #ffffff 0%, #eef1f6 100%);
    border: 1px solid var(--v3-line);
    border-radius: var(--v3-radius);
    box-shadow: var(--v3-shadow-card);
    padding: 22px 24px 16px;
    margin-bottom: 20px;
}

/* Panel header: icon chip + title + optional right-aligned actions. */
.v3-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.v3-hchip {
    width: 48px; height: 48px; border-radius: 14px; flex: 0 0 auto;
    background: var(--v3-a1-bg); color: var(--v3-blue);
    display: inline-flex; align-items: center; justify-content: center;
}
.v3-hchip .fa { font-size: 22px; color: var(--v3-blue); }
.v3-head h1 { font-size: 22px; font-weight: 800; margin: 0; color: var(--v3-navy); letter-spacing: -.2px; }
.v3-head p { margin: 2px 0 0; font-size: 13px; color: var(--v3-muted); }
.v3-head-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/* Lighter in-panel section title. */
.v3-ptitle { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; margin: 0 0 16px; }
.v3-ptitle .fa { color: var(--v3-blue); font-size: 16px; }
.v3-ptitle small { color: var(--v3-muted); font-weight: 500; font-size: 12px; margin-left: auto; }

/* Primary action rendered as a link/LinkButton. */
.v3-create {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--v3-blue); color: #fff; font-weight: 700; font-size: 13.5px;
    border-radius: var(--v3-radius-sm); padding: 11px 17px; text-decoration: none; border: none;
}
.v3-create:hover, .v3-create:focus { background: var(--v3-navy); color: #fff; text-decoration: none; }

/* Narrow / centred layouts used by the auth and status pages. */
.v3-authwrap { max-width: 520px; margin: 0 auto; }
.v3-authwrap-50 { margin: 30px auto 0; }
@media (min-width: 768px) {
    .v3-authwrap-50 { width: 50%; }
}

/* ===================== CATEGORY ACCENT PALETTE =====================
   Applied to tiles and metric cards to colour-code by category. */

.v3-a1 .v3-tico, .v3-a1 .v3-mico { background: var(--v3-a1-bg); }  .v3-a1 .fa { color: var(--v3-a1-fg); }
.v3-a2 .v3-tico, .v3-a2 .v3-mico { background: var(--v3-a2-bg); }  .v3-a2 .fa { color: var(--v3-a2-fg); }
.v3-a3 .v3-tico, .v3-a3 .v3-mico { background: var(--v3-a3-bg); }  .v3-a3 .fa { color: var(--v3-a3-fg); }
.v3-a4 .v3-tico, .v3-a4 .v3-mico { background: var(--v3-a4-bg); }  .v3-a4 .fa { color: var(--v3-a4-fg); }
.v3-a5 .v3-tico, .v3-a5 .v3-mico { background: var(--v3-a5-bg); }  .v3-a5 .fa { color: var(--v3-a5-fg); }
.v3-a6 .v3-tico, .v3-a6 .v3-mico { background: var(--v3-a6-bg); }  .v3-a6 .fa { color: var(--v3-a6-fg); }

.v3-a1.v3-tile:hover { border-color: var(--v3-a1-line); }
.v3-a2.v3-tile:hover { border-color: var(--v3-a2-line); }
.v3-a3.v3-tile:hover { border-color: var(--v3-a3-line); }
.v3-a4.v3-tile:hover { border-color: var(--v3-a4-line); }
.v3-a5.v3-tile:hover { border-color: var(--v3-a5-line); }
.v3-a6.v3-tile:hover { border-color: var(--v3-a6-line); }

/* ========================= DASHBOARD: HEADER ========================= */

.v3-top { display: flex; align-items: center; gap: 16px; margin: 6px 2px 22px; }
.v3-hi h1 { font-size: 26px; font-weight: 800; margin: 0 0 3px; color: var(--v3-navy); letter-spacing: -.3px; }
.v3-hi p { margin: 0; color: var(--v3-muted); font-size: 14px; }
.v3-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.v3-bell {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 13px;
    background: #fff; border: 1px solid var(--v3-line);
    color: var(--v3-blue);
    box-shadow: 0 1px 2px rgba(16, 40, 70, .05);
    transition: transform .12s, box-shadow .12s;
}
.v3-bell:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(16, 40, 70, .12); color: var(--v3-blue); }
.v3-bell .fa { color: var(--v3-blue); font-size: 20px; }
.v3-bell .v3-dot {
    position: absolute; top: -6px; right: -6px;
    min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 999px; background: #e0362c; color: #fff;
    font-size: 11px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
}
.v3-bell .v3-dot:empty { display: none; }

/* ====================== DASHBOARD: SERIES CHIPS ====================== */

.v3-series { display: flex; flex-wrap: wrap; gap: 10px; }
.v3-chip {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 8px 15px 8px 12px;
    margin-bottom: 10px;
    border: 1px solid var(--v3-line); border-radius: 999px; background: #fff;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.v3-chip:hover { border-color: #bcd2ee; box-shadow: 0 4px 12px rgba(16, 40, 70, .07); }
.v3-chip .v3-star { line-height: 0; }
.v3-chip .v3-star .fa { font-size: 15px; color: #cdb53e; }
.v3-chip .v3-star .fa-star-o { color: #c2ccd8; }
.v3-chip a.v3-cname { font-weight: 600; font-size: 13.5px; color: var(--v3-navy); text-decoration: none; }
.v3-chip a.v3-cname:hover { color: var(--v3-blue-2); }
.v3-chip.is-fav { background: #eef5ff; border-color: #bcd6f5; }

/* ======================= DASHBOARD: METRICS ======================= */

.v3-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.v3-metric {
    background: var(--v3-card);
    border: 1px solid var(--v3-line);
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow: 0 1px 2px rgba(16, 40, 70, .04);
    display: flex; align-items: center; gap: 14px;
}
.v3-metric .v3-mico {
    width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
}
.v3-metric .v3-mico .fa { font-size: 19px; }
.v3-metric .v3-mval { font-size: 22px; font-weight: 800; line-height: 1; color: var(--v3-navy); }
/* The Unread figure doubles as a link to the Inbox: read as the metric it
   already is, not as a stock hyperlink, until hovered. */
.v3-metric .v3-mval .v3-mlink { color: inherit; text-decoration: none; }
.v3-metric .v3-mval .v3-mlink:hover,
.v3-metric .v3-mval .v3-mlink:focus { color: var(--v3-blue); text-decoration: underline; }
.v3-metric .v3-mlbl {
    font-size: 12px; color: var(--v3-muted); margin-top: 3px;
    text-transform: uppercase; letter-spacing: .4px; font-weight: 600;
}

/* ==================== DASHBOARD: BENTO + TILES ==================== */

.v3-bento { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: start; }

.v3-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 14px; }
.v3-tile {
    display: flex; align-items: center; gap: 13px;
    padding: 15px 16px;
    border: 1px solid var(--v3-line); border-radius: var(--v3-radius-md);
    background: #fff; text-decoration: none; color: var(--v3-ink);
    transition: transform .12s ease, border-color .12s, box-shadow .12s;
}
.v3-tile:hover { transform: translateY(-3px); box-shadow: var(--v3-shadow-hover); color: var(--v3-navy); }
.v3-tile .v3-tico {
    width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
}
.v3-tile .v3-tico .fa { font-size: 19px; }
.v3-tile .v3-tlabel { font-weight: 600; font-size: 14px; line-height: 1.25; }

/* Quick links — same tile geometry, chevron on the right. */
.v3-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.v3-link {
    display: flex; align-items: center; gap: 11px;
    padding: 15px 16px;
    border: 1px solid var(--v3-line); border-radius: var(--v3-radius-md);
    background: #fff; text-decoration: none; color: var(--v3-ink);
    font-size: 14px; font-weight: 600;
    transition: transform .12s ease, border-color .12s, box-shadow .12s;
}
.v3-link:hover {
    color: var(--v3-blue-2);
    transform: translateY(-3px);
    box-shadow: var(--v3-shadow-hover);
    border-color: var(--v3-a1-line);
}
.v3-link .fa { color: var(--v3-blue); font-size: 14px; width: 18px; text-align: center; }
.v3-link .v3-arrow { margin-left: auto; color: #b9c4d1; }

/* ==================== DASHBOARD: IDENTITY CARD ==================== */

.v3-id-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.v3-avatar {
    width: 54px; height: 54px; border-radius: 15px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 18px; color: #fff; letter-spacing: .5px;
    background: linear-gradient(135deg, var(--v3-navy), var(--v3-blue-2));
}
.v3-id-name { font-size: 16px; font-weight: 700; color: var(--v3-navy); margin: 0; }
.v3-id-sub { font-size: 12.5px; color: var(--v3-muted); margin: 2px 0 0; word-break: break-word; }
.v3-id-series { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--v3-blue); }
.v3-id-series .fa { font-size: 12px; color: var(--v3-blue); }

.v3-roles-lbl { font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--v3-muted); font-weight: 700; margin: 4px 0 10px; }
.v3-roles { display: flex; flex-wrap: wrap; gap: 8px; }
.v3-role {
    background: #eef4fc; color: #295184; border: 1px solid #dbe7f5;
    border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 600;
}

/* ======================== ACCENT BANNER ======================== */

.v3-banner {
    border: none; border-radius: var(--v3-radius);
    padding: 22px 24px; margin-bottom: 20px;
    background: linear-gradient(130deg, var(--v3-navy) 0%, var(--v3-blue) 60%, var(--v3-blue-2) 100%);
    color: #fff;
    box-shadow: 0 10px 26px rgba(0, 81, 149, .22);
}
.v3-banner h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: #fff; }
.v3-banner p { margin: 0 0 14px; font-size: 13px; color: rgba(255, 255, 255, .85); }
.v3-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; color: var(--v3-blue);
    font-weight: 700; font-size: 13.5px;
    border-radius: var(--v3-radius-sm); padding: 10px 18px; text-decoration: none;
}
.v3-btn:hover { background: #eef5ff; color: var(--v3-navy); }

/* SponsorDisplayTile ships Bootstrap grid classes (float + gutters) and a
   -50px bottom margin sized for wide two-column layouts. In the narrow
   dashboard sidebar the float escapes .v3-panel (which has no clearfix)
   and the negative margin pulls the next card up over it. Here the tile
   only needs to be a plain full-width block. */
.v3-sponsor [class*="col-"] {
    float: none;
    width: auto;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .v3-bento { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .v3-metrics { grid-template-columns: repeat(2, 1fr); }
    .v3-hi h1 { font-size: 22px; }
}

/* =====================================================================
   PAGE COMPONENT: Inbox (cdsweb/comm/Inbox.aspx  →  .eng-inbox)
   ---------------------------------------------------------------------
   Turns the shared Inbox.ascx list-group output into an email-client
   list. Scoped to .eng-inbox, which is two classes deep and therefore
   outranks the control's own inline <style> (.list-group-item, one
   class) without needing !important.
   ===================================================================== */

.eng-inbox .v3-inbox-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.eng-inbox .v3-mail-chip {
    width: 48px; height: 48px; border-radius: 14px; flex: 0 0 auto;
    background: var(--v3-a1-bg); color: var(--v3-blue);
    display: inline-flex; align-items: center; justify-content: center;
}
.eng-inbox .v3-mail-chip .fa { font-size: 22px; color: var(--v3-blue); }
.eng-inbox .v3-inbox-head h1 { font-size: 22px; font-weight: 800; margin: 0; color: var(--v3-navy); letter-spacing: -.2px; }
.eng-inbox .v3-inbox-head p { margin: 2px 0 0; font-size: 13px; color: var(--v3-muted); }
.eng-inbox .v3-count {
    display: inline-flex; align-items: center; gap: 6px;
    background: #eaf5ff; color: var(--v3-blue-2); font-weight: 700;
    border: 1px solid #cfe4fb; border-radius: 999px;
    padding: 3px 12px; font-size: 12.5px; margin-left: 4px;
}
.eng-inbox hr { border-top: 1px solid var(--v3-line); margin: 16px 0; }

/* The control renders an "Inbox" tab that just reloads the page. */
.eng-inbox .btn-group input[value="Inbox"] { display: none; }
.eng-inbox .btn-group { gap: 8px; display: inline-flex; flex-wrap: wrap; }

/* Toolbar: promote "Create a Memo to User" to the primary action. */
.eng-inbox input[value="Create a Memo to User"] {
    background-color: var(--v3-blue);
    border-color: var(--v3-blue);
    color: #fff;
    margin-left: 8px;
}
.eng-inbox input[value="Create a Memo to User"]:hover {
    background-color: var(--v3-navy);
    border-color: var(--v3-navy);
}
.eng-inbox input[value="Mark All As Read"] {
    background-color: #fff;
    border: 1px solid var(--v3-line);
    color: var(--v3-blue);
    font-weight: 600;
    border-radius: var(--v3-radius-sm);
    padding: 8px 14px;
    margin-top: 6px;
}
.eng-inbox input[value="Mark All As Read"]:hover { background-color: #eef5ff; border-color: #bcd6f5; }

/* Message list: strip the table chrome, each row becomes a card. */
.eng-inbox #inbox-table { border: none; margin-bottom: 0; }
.eng-inbox #inbox-table thead { display: none; }
.eng-inbox #inbox-table > tbody > tr > td { border: none; padding: 5px 0; }
.eng-inbox .list-group { background: transparent; margin: 0; }

.eng-inbox .list-group-item {
    position: relative;
    display: block;
    background: #fff;
    border: 1px solid var(--v3-line);
    border-radius: 14px;
    padding: 15px 44px 15px 68px;
    margin-bottom: 10px;
    color: var(--v3-ink);
    transition: transform .1s ease, border-color .12s, box-shadow .12s;
}
.eng-inbox .list-group-item:hover {
    transform: translateY(-2px);
    border-color: #bcd2ee;
    box-shadow: 0 10px 22px rgba(16, 40, 70, .09);
}

/* Envelope chip (read = open envelope). */
.eng-inbox .list-group-item:before {
    content: "\f2b7"; /* fa-envelope-open-o */
    font-family: FontAwesome;
    position: absolute; left: 16px; top: 15px;
    width: 40px; height: 40px; border-radius: 11px;
    background: #f0f3f8; color: #97a4b4;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 17px;
}

.eng-inbox .list-group-item-heading { font-size: 15px; font-weight: 600; color: var(--v3-navy); margin: 0 0 4px; line-height: 1.3; }
.eng-inbox .list-group-item-text { font-size: 12.5px; color: var(--v3-muted); line-height: 1.6; margin: 0; }
.eng-inbox .list-group-item-text strong { color: var(--v3-ink); font-weight: 700; }

/* Read state is driven by the real ReadStatus value via the page script,
   never by Bootstrap's `.active`. Neutralise any residual `.active`. */
.eng-inbox .list-group-item.active {
    background: #fff;
    border-color: var(--v3-line);
    border-left: 1px solid var(--v3-line);
    color: var(--v3-ink);
}
.eng-inbox .list-group-item-heading.active { color: var(--v3-navy); font-weight: 600; }
.eng-inbox .list-group-item-text.active { color: var(--v3-muted); }

/* Unread. */
.eng-inbox .list-group-item.v3-unread {
    background: #f6faff;
    border-color: #cfe0f4;
    border-left: 3px solid var(--v3-blue-2);
}
.eng-inbox .list-group-item.v3-unread:before { content: "\f0e0"; background: var(--v3-a1-bg); color: var(--v3-blue); } /* fa-envelope */
.eng-inbox .list-group-item.v3-unread .list-group-item-heading { color: var(--v3-navy); font-weight: 800; }
.eng-inbox .list-group-item.v3-unread:after {
    content: ""; position: absolute; right: 18px; top: 20px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--v3-blue-2);
    box-shadow: 0 0 0 3px rgba(10, 107, 192, .15);
}

/* =====================================================================
   PAGE COMPONENT: MenuGroup (cdsweb/gen/MenuGroup.aspx  →  .eng-menugroup)
   ---------------------------------------------------------------------
   Re-skins the shared MenuGroup.ascx button rows into three tiers of
   tiles. These selectors are intentionally deep and page-scoped — they
   must never be globalised, or every .card-body .btn in the app becomes
   a 210px tile.
   ===================================================================== */

.eng-menugroup .card-header:before {
    content: "\f0ca"; /* fa-list-ul */
    font-family: FontAwesome;
    font-weight: normal;
    font-size: 17px;
    color: var(--v3-blue);
    width: 40px; height: 40px; border-radius: 12px;
    background: var(--v3-a1-bg);
    display: inline-flex; align-items: center; justify-content: center;
    margin-right: 12px;
}
.eng-menugroup .card-header { display: flex; align-items: center; }

.eng-menugroup .card-body > .row:first-of-type { margin-bottom: 12px; }
.eng-menugroup .card-body > .row:first-of-type .col-xs-12 { color: var(--v3-muted); font-size: 14px; line-height: 1.6; }

/* Button rows become a wrapping tile grid. */
.eng-menugroup .card-body .row { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 6px; }
.eng-menugroup .card-body .row > .col-xs-12 { flex: 1 1 100%; max-width: 100%; padding: 0; }
.eng-menugroup .card-body .row > .col-xs-12.mb-2 { flex: 0 0 auto; width: auto; max-width: 100%; margin: 0; }
.eng-menugroup .card-body .row > .col-xs-12.mb-2 > div { height: 100%; }

.eng-menugroup .card-body .btn {
    display: inline-flex; align-items: center; gap: 12px;
    min-width: 210px; height: 100%;
    padding: 14px 18px;
    border-radius: var(--v3-radius-md);
    border: 1px solid var(--v3-line);
    background: #fff; color: var(--v3-ink);
    font-weight: 600; font-size: 14px; line-height: 1.25;
    text-align: left; white-space: normal;
    box-shadow: 0 1px 2px rgba(16, 40, 70, .04);
    transition: transform .12s ease, border-color .12s, box-shadow .12s;
}
.eng-menugroup .card-body .btn:hover { transform: translateY(-3px); box-shadow: var(--v3-shadow-hover); border-color: #bcd2ee; }
.eng-menugroup .card-body .btn .fa {
    flex: 0 0 auto;
    width: 34px; height: 34px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px; margin: 0;
}

/* Tier 2 — regular items, icon chip rotates through the accent palette. */
.eng-menugroup .card-body .btn-secondary { background: #fff; color: var(--v3-ink); }
.eng-menugroup .card-body .col-xs-12.mb-2:nth-of-type(6n+1) .btn-secondary .fa { background: var(--v3-a1-bg); color: var(--v3-a1-fg); }
.eng-menugroup .card-body .col-xs-12.mb-2:nth-of-type(6n+2) .btn-secondary .fa { background: var(--v3-a2-bg); color: var(--v3-a2-fg); }
.eng-menugroup .card-body .col-xs-12.mb-2:nth-of-type(6n+3) .btn-secondary .fa { background: var(--v3-a3-bg); color: var(--v3-a3-fg); }
.eng-menugroup .card-body .col-xs-12.mb-2:nth-of-type(6n+4) .btn-secondary .fa { background: var(--v3-a4-bg); color: var(--v3-a4-fg); }
.eng-menugroup .card-body .col-xs-12.mb-2:nth-of-type(6n+5) .btn-secondary .fa { background: var(--v3-a5-bg); color: var(--v3-a5-fg); }
.eng-menugroup .card-body .col-xs-12.mb-2:nth-of-type(6n+6) .btn-secondary .fa { background: var(--v3-a6-bg); color: var(--v3-a6-fg); }

/* Tier 1 — prominent items: brand gradient, star chip, trailing arrow. */
.eng-menugroup .card-body .btn-primary {
    background: linear-gradient(120deg, var(--v3-navy) 0%, var(--v3-blue) 58%, var(--v3-blue-2) 100%);
    border: none; color: #fff;
    min-width: 244px; padding: 16px 20px;
    box-shadow: 0 6px 18px rgba(0, 81, 149, .28);
}
.eng-menugroup .card-body .btn-primary:hover { transform: translateY(-3px); filter: brightness(1.06); box-shadow: 0 12px 28px rgba(0, 81, 149, .34); }
.eng-menugroup .card-body .btn-primary .fa { background: rgba(255, 255, 255, .20); color: #fff; }
.eng-menugroup .card-body .btn-primary .fa:before { content: "\f005"; } /* fa-star */
.eng-menugroup .card-body .btn-primary:after {
    content: "\f105"; /* fa-angle-right */
    font-family: FontAwesome;
    margin-left: auto; padding-left: 14px;
    font-size: 17px; opacity: .9;
}

/* Tier 3 — child menu groups: teal folder chip + drill-in arrow. */
.eng-menugroup .card-body .btn-info { background: #fff; border-color: #cdeee6; color: var(--v3-ink); }
.eng-menugroup .card-body .btn-info:hover { border-color: #9fdcca; }
.eng-menugroup .card-body .btn-info .fa { background: var(--v3-a2-bg); color: var(--v3-a2-fg); }
.eng-menugroup .card-body .btn-info:after {
    content: "\f105";
    font-family: FontAwesome;
    margin-left: auto; padding-left: 14px;
    font-size: 15px; color: var(--v3-a2-fg);
}

@media (max-width: 575px) {
    .eng-menugroup .card-body .btn { min-width: 100%; }
}

/* =====================================================================
   PAGE COMPONENT: Series Resources (.eng-docresources)
   The NDA notice uses legacy .well-sm + .bg-danger, which paints dark
   body text on Bootstrap 4's saturated red. Make it readable.
   ===================================================================== */

.eng-docresources .well-sm.bg-danger {
    background-color: var(--v3-danger-bg) !important; /* beats BS4's .bg-danger !important */
    border: 1px solid var(--v3-danger-line);
    border-radius: 12px;
    color: var(--v3-danger);
    padding: 16px 18px;
}
.eng-docresources .well-sm.bg-danger p { margin: 0; }

/* =====================================================================
   PAGE COMPONENT: "Add person" row (TeamMemberList)
   ===================================================================== */

.add-person-line { display: flex; align-items: center; gap: 8px; }
.add-person-field { flex: 1 1 auto; }
.add-person-line .input-group { flex-wrap: nowrap; }
.add-person-line .user-autocomplete { min-width: 0; }
@media screen and (max-width: 768px) {
    .add-person-line { flex-wrap: wrap; }
    .add-person-field { flex: 1 1 100%; margin-bottom: 8px; }
    .user-autocomplete { height: 55px; }
}

/* =====================================================================
   PAGE VARIANTS: dense forms that opt out of the compact label style
   (RequestNewRole, CreateAccount). Readable, normal-case labels at body
   size, plus the dark legend bar used for role sections.
   ===================================================================== */

.eng-requestrole, .eng-createaccount { font-size: 15px; }
.eng-requestrole p, .eng-createaccount p { font-size: 15px; line-height: 1.5; }

.eng-requestrole label, .eng-createaccount label {
    font-size: 14px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
    color: var(--v3-ink);
}
.eng-requestrole .form-control, .eng-createaccount .form-control { font-size: 14px; min-height: 40px; }
.eng-requestrole .help-block, .eng-createaccount .help-block { font-size: 13px; line-height: 1.55; color: var(--v3-muted); }
.eng-requestrole .help-block.text-danger, .eng-createaccount .help-block.text-danger { color: var(--v3-danger); }

.eng-requestrole legend, .eng-createaccount legend {
    display: block;
    width: 100%;
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    background: var(--v3-navy);
    border: none;
    border-radius: 10px;
    padding: 12px 16px;
    margin: 24px 0 16px;
}
.eng-requestrole .styled label, .eng-requestrole .checkbox label,
.eng-createaccount .styled label, .eng-createaccount .checkbox label { font-size: 15px; font-weight: 600; }

.eng-createaccount .control-label { padding-top: 9px; }
@media (min-width: 768px) {
    .eng-createaccount .control-label { text-align: right; }
}