/* =====================================================================
   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: 85px; 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; margin-left:5px; }
.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(-1px); 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(-1px);
    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-banner a:not(.v3-btn) { color: #fff; }
.v3-banner a:not(.v3-btn):hover, .v3-banner a:not(.v3-btn):focus { color: #fff; text-decoration: underline; }
.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; }

/* That hidden tab is still the DOM :first-child, so Bootstrap treats the
   next segment as a MIDDLE one and squares all four of its corners —
   which flattened the visible left edge of the group. Round the first
   segment that is actually visible instead.

   The `input` element in the selector is what wins the cascade: it ties
   Bootstrap's rules on classes and pseudo-classes, then outranks them on
   element count. */
.eng-inbox .btn-group > input[value="Inbox"] + .btn,
.eng-inbox .btn-group > input[value="Inbox"] + .btn-group > .btn {
    border-top-left-radius: var(--v3-radius);
    border-bottom-left-radius: var(--v3-radius);
}

/* 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; }
/* style.css (the BS4 admin template) sets
   `.table td { border-top: 1px solid rgba(82,63,105,.07) !important }`,
   so clearing the row rule needs !important too, whatever the
   specificity. Documented exception, same shape as .bg-primary.
   Scoped to .eng-inbox so other tables keep their row separators. */
.eng-inbox #inbox-table > tbody > tr > td { border: none !important; padding: 5px 0; }

/* bootstrap-theme.min.css gives every .list-group a 4px radius and a
   drop shadow. Each Inbox row wraps its <a> in one, so that shadow drew a
   second, slightly larger card outline around every message. The row card
   is the <a> itself; this wrapper must be invisible. */
.eng-inbox .list-group {
    background: transparent;
    margin: 0;
    box-shadow: none;
    border-radius: 0;
}

.eng-inbox .list-group-item {
    position: relative;
    display: block;
    background: #fff;
    /* Transparent rather than removed: keeps the 1px geometry so rows do
       not shift, and leaves the :hover border-color below something to
       tint. Bootstrap sets a #ddd border on .list-group-item, which this
       outranks — so this line is what actually suppresses the grey. */
    border: 1px solid transparent;
    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; }

/* Bootstrap 3 clearfixes .row with `:before/:after { content:" "; display:table }`.
   Making the row a flex container promotes both pseudo-elements into real
   (zero-width) flex items, so the `gap` above lands 12px BEFORE the first
   tile on the first line, while wrapped lines start flush. On desktop
   several tiles share a line and it barely reads; on mobile every tile is
   its own line, so the first tile of each row sat indented while the rest
   aligned left. Flex needs no clearfix, so drop them. */
.eng-menugroup .card-body .row:before,
.eng-menugroup .card-body .row:after { display: none; }
.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(-1px); 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(-1px); 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; }
}

/* =====================================================================
   PAGE COMPONENT: Team event feedback
   (cdsweb/rpt/TeamEventFeedback.aspx  ->  .eng-feedback)
   ---------------------------------------------------------------------
   Judge feedback per rubric section. Each section is a titled group; each
   judge's result is a card carrying a score and an optional comment.

   Replaces an inline `BorderStyle="Ridge" BorderColor="DodgerBlue"` on the
   result Panel and an inline `font-size: x-large; text-align: center` on
   the section title - neither of which the theme could reach.
   ===================================================================== */

.eng-feedback .fb-section { margin-bottom: 24px; }
.eng-feedback .fb-section:last-child { margin-bottom: 0; }

.eng-feedback .fb-section-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 12px;
    padding-bottom: 9px;
    border-bottom: 2px solid var(--v3-line);
    font-size: 20px;
    font-weight: 700;
    color: var(--v3-navy);
}
.eng-feedback .fb-section-title .fa { color: var(--v3-blue); font-size: 20px; }

.eng-feedback .fb-list { display: grid; gap: 10px; }

/* The blue edge carries the brand accent without boxing the card in, which
   is what made the old Ridge border so heavy at this density. */
.eng-feedback .fb-card {
    background: #fff;
    border: 1px solid var(--v3-line);
    border-left: 3px solid var(--v3-blue-2);
    border-radius: var(--v3-radius-md);
    padding: 14px 16px;
}

.eng-feedback .fb-score { display: flex; align-items: baseline; gap: 10px; }
.eng-feedback .fb-score-lbl {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--v3-muted);
}
.eng-feedback .fb-score-val {
    font-size: 15px;
    font-weight: 700;
    color: var(--v3-navy);
    font-variant-numeric: tabular-nums;
}

.eng-feedback .fb-comment {
    margin: 9px 0 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--v3-ink);
}
/* Most judges leave no comment; collapse the element rather than leaving a
   gap under the score. Relies on the markup keeping the Literal flush
   inside the <p> with no surrounding whitespace. */
.eng-feedback .fb-comment:empty { display: none; }

@media (max-width: 767.98px) {
    .eng-feedback .fb-card { padding: 12px 13px; }
    .eng-feedback .fb-score { flex-wrap: wrap; gap: 4px 10px; }
}

/* A centred row of actions in a panel or card body.

   Used by the sponsor tiles in SP/ViewAllSponsors.ascx. Their two buttons
   were left-aligned and sat on slightly different baselines: both anchors
   wrap their label across several indented lines, and that whitespace
   shifts the baseline of an inline-block. Flex removes the problem rather
   than papering over it with margins.

   Opt-in by class so it reaches only those tiles - the Sponsor News
   repeater lower down the same control uses a plain `.panel-body`. */
.v3-tile-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
/* The connected state swaps in `form-control` (width: 100%), which then
   takes its own line - intended, so let it, and keep it centred. */
.v3-tile-actions > .btn { margin: 0; }

/* Sponsor goal badge ("Recruiting", "Product", ...) in SP/ViewAllSponsors.
   It is emitted as a sibling ABOVE `.panel-heading`, so it gets its own
   row and the promotional image simply starts below it - rather than the
   image wrapping around a floated badge and sitting pushed to the right.

   A sponsor with no goal still emits `<span class="invisible badge ...">`,
   which reserves the same row. That is deliberate: it keeps the image
   starting at the same height across every card in a grid row. Do not
   collapse this element when empty. */
.v3-tile-badge {
    padding: 9px 10px 0;
    line-height: 1;
}
.v3-tile-badge .badge { float: none; }

/* Empty-state cell for a table that bound no rows. Spans the full width
   via colspan and reads as a quiet note rather than a data row.

   The selector repeats `table.table tbody td` because the base table rule
   in base.css is (0,3,1) and sets its own padding and colour; a bare
   `.v3-empty` would lose to it. */
.engage-console table.table tbody td.v3-empty {
    text-align: center;
    padding: 26px 12px;
    color: var(--v3-muted);
    font-size: 13.5px;
    font-style: italic;
    border-bottom: none;
}

/* =====================================================================
   PAGE COMPONENT: Student career profile
   (cdsweb/sp/UpdateStudentProfile.aspx  ->  .eng-studentprofile)
   ---------------------------------------------------------------------
   A long single-column form: identity, availability windows and three
   degree blocks, plus two upload tiles and three modals.

   Replaces the control's inline <style> block, which fought the theme on
   three counts: `transform: scale(1.7)` on every checkbox on the page,
   15rem upload buttons that pushed the two tiles to opposite page edges,
   and a `.gray-box` that duplicated the card surface with its own grey.

   The field rows are CSS Grid rather than `.row > .col-lg-6`. The old
   markup nested the columns inside a `.form-group`, so the Bootstrap
   floats never resolved against a real row and every input collapsed to
   a ~175px box against the left edge of a 1600px page.
   ===================================================================== */

/* Capped at a readable measure: two ~440px fields. Without it the pair
   stretches the full canvas on a wide monitor and the form reads as two
   distant columns rather than one form. */
.eng-studentprofile .sp-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 22px;
    max-width: 940px;
}

@media (min-width: 768px) {
    .eng-studentprofile .sp-grid { grid-template-columns: 1fr 1fr; }
    .eng-studentprofile .sp-wide { grid-column: 1 / -1; }
}

/* Equal-height card rows for the availability windows and the degrees.
   auto-fit collapses to fewer columns rather than leaving a ragged third
   slot, which is what made the old 3 x col-lg-6 wrap 2-then-1. */
.eng-studentprofile .sp-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 16px;
    align-items: start;
    max-width: 1180px;
}

.eng-studentprofile .sp-card {
    background: #fff;
    border: 1px solid var(--v3-line);
    border-radius: var(--v3-radius-md);
    padding: 16px 18px;
}

.eng-studentprofile .sp-card > label:first-child { margin-top: 0; }

.eng-studentprofile .sp-card-note {
    margin: 8px 0 0;
    font-size: 12.5px;
    color: var(--v3-muted);
}

/* Minimum / maximum weeks sit inside the co-op card. */
.eng-studentprofile .sp-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 14px;
}

.eng-studentprofile .sp-pair .form-group { margin-bottom: 0; }

/* ---------- Upload tiles ---------- */

/* Sized to sit beside each other as a pair instead of anchoring the two
   far edges of the panel, which is how the 15rem buttons read. */
.eng-studentprofile .sp-media {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.eng-studentprofile .sp-media-item {
    flex: 1 1 240px;
    max-width: 300px;
    background: #fff;
    border: 1px solid var(--v3-line);
    border-radius: var(--v3-radius-md);
    padding: 18px;
    text-align: center;
}

.eng-studentprofile .sp-media-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 104px;
    height: 104px;
    padding: 0;
    border: 1px solid var(--v3-line);
    border-radius: var(--v3-radius-md);
    background: var(--v3-a1-bg);
    overflow: hidden;
}

.eng-studentprofile .sp-media-btn:hover,
.eng-studentprofile .sp-media-btn:focus {
    border-color: #9dc3ef;
    box-shadow: var(--v3-shadow-hover);
}

.eng-studentprofile .sp-media-btn img { max-width: 72px; max-height: 72px; }

.eng-studentprofile .sp-media-name {
    margin: 12px 0 4px;
    font-size: 14px;
    font-weight: 700;
    color: var(--v3-navy);
}

.eng-studentprofile .sp-media-meta {
    display: block;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--v3-muted);
}

/* ---------- Controls ---------- */

/* The date control ships its own div wrapper; keep the input and its
   calendar button on one line with the input taking the slack. */
.eng-studentprofile .date-picker-box { display: flex; gap: 8px; }
.eng-studentprofile .date-picker-box .form-control { flex: 1 1 auto; min-width: 0; }
.eng-studentprofile .date-picker-box .btn { flex: 0 0 auto; }

/* A readable checkbox without the scale() transform, which blurred the
   box and left the label sitting off its centre line.

   The `.styled` compound is listed separately so the gutter actually
   applies: base.css sets `margin-right: 8px` at (0,3,1) on
   `.engage-console .styled input[type="checkbox"]`, which outranks a bare
   `.eng-studentprofile input[...]` at (0,2,1). Matching that specificity
   lets load order (components.css comes after base.css) decide. */
.eng-studentprofile .styled input[type="checkbox"],
.eng-studentprofile input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0 9px 0 0;
    vertical-align: middle;
    accent-color: var(--v3-blue);
}

.eng-studentprofile .sp-checks label {
    font-weight: 500;
    margin: 0;
    vertical-align: middle;
}

/* ASP.NET renders a CheckBoxList as one <td> per option holding the input
   and its <label>. Laying that cell out as a flex row keeps a long option
   beside its box in a column of its own instead of wrapping underneath it
   — which is what "I am a US citizen or I have a Visa to work in the US"
   does at phone width once the box is 32px. */
.eng-studentprofile .sp-checks td {
    display: flex;
    align-items: center;
    padding: 5px 14px 5px 0;
}

.eng-studentprofile .sp-checks label { flex: 1 1 auto; }

.eng-studentprofile .sp-checks input[type="checkbox"] { flex: 0 0 auto; }

/* Inline checkbox + its own label, outside a CheckBoxList. */
.eng-studentprofile .sp-check-inline {
    display: flex;
    align-items: center;
    margin-top: 4px;
}

.eng-studentprofile .sp-check-inline label { font-weight: 500; margin: 0; }

/* ---------- Footer / modals ---------- */

.eng-studentprofile .sp-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.eng-studentprofile .sp-modal-note { margin: 0 0 14px; }

.eng-studentprofile .modal-footer .btn { margin-bottom: 0; }

.eng-studentprofile .sp-modal-tools {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}

.eng-studentprofile .sp-modal-group {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--v3-muted);
    border-bottom: 1px solid var(--v3-line);
    padding-bottom: 7px;
}

@media (max-width: 767.98px) {
    .eng-studentprofile .sp-media-item { max-width: none; }
    .eng-studentprofile .sp-pair { grid-template-columns: 1fr; }

    /* Double-size checkboxes for touch. 16px is a fine pointer target but
       a poor thumb one, and this form is mostly checkboxes: competitions,
       work eligibility, employment, and the sponsor lists in the connect
       modal. Same intent as the theme's mobile `.btn-lg` sizing in
       base.css. The row padding grows with them so adjacent options do
       not end up sharing a tap area. */
    .eng-studentprofile .styled input[type="checkbox"],
    .eng-studentprofile input[type="checkbox"] {
        width: 32px;
        height: 32px;
        margin-right: 12px;
    }

    .eng-studentprofile .sp-checks td { padding: 9px 14px 9px 0; }

    .eng-studentprofile .sp-check-inline { margin-top: 8px; }
}

/* Selectize replaces this <select> at load; until it does (or if the
   script fails) the bare control would otherwise sit inline at its
   intrinsic ~80px width next to its own label. */
.eng-studentprofile #interests { display: block; width: 100%; }

/* Account email and school name are populated from the account record and
   are not editable here. Bootstrap leaves a disabled input white, which
   reads as an empty field the student has failed to fill in. */
.eng-studentprofile .form-control[disabled],
.eng-studentprofile .form-control[readonly] {
    background-color: #f6f8fb;
    color: var(--v3-muted);
    cursor: not-allowed;
}

/* The page sits in the standard `.card` container that the rest of the sp/
   module uses, so the sections inside it drop the panel surface: a
   shadowed, gradient-filled box nested inside a shadowed white card reads
   as boxes-in-boxes. A rule between each pair is enough to separate four
   long sections.

   The separator is a top border on the adjacent sibling rather than a
   bottom border plus `:last-of-type`. The actions row after the last
   section is also a div, so no `.v3-panel` is ever its parent's
   last-of-type and every section kept its bottom rule. */
.eng-studentprofile .v3-panel {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0 0 24px;
}

.eng-studentprofile .v3-panel + .v3-panel {
    border-top: 1px solid var(--v3-line);
    padding-top: 24px;
}

/* Section titles carry the weight the panel border used to. */
.eng-studentprofile .v3-ptitle {
    font-size: 16px;
    color: var(--v3-navy);
}

/* The page header sits above the first section, so the h4 and its lead-in
   need the spacing the card body does not supply on its own. */
.eng-studentprofile > .card-body > h4 {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 800;
    color: var(--v3-navy);
}

.eng-studentprofile > .card-body > .help-block {
    margin: 0 0 22px;
}

/* =====================================================================
   PAGE COMPONENT: Requested submissions table
   (cdsweb/rpt/RequestedSubmission.aspx  ->  .eng-reqsub)
   ---------------------------------------------------------------------
   The first column holds the submission title (<strong>) above its event
   name (<small>). The two were sized by different rules and drifted apart:
   on mobile CdsWeb.css scales the whole cell with
   `td:first-child { font-size: 1.3em }`, taking the title to ~18px, while
   base.css pins `small` at 12px. Pinning both to 15px keeps the pair
   reading as one block at every width.

   Scoped through `td:first-child` because the remaining cells in the row
   hold only a status icon.
   ===================================================================== */

.eng-reqsub tbody td:first-child strong,
.eng-reqsub tbody td:first-child small {
    font-size: 15px;
}

/* =====================================================================
   PAGE COMPONENT: Requested submission details
   (cdsweb/rpt/RequestedSubmissionDetails.aspx  ->  .eng-reqsubdetails)
   ---------------------------------------------------------------------
   The page's <small> elements are not asides - they carry the submission
   timestamp, the comment timestamp and the author's role, which are the
   details a reviewer actually reads. base.css sizes `small` at 12px for
   genuine fine print; at that size these sat well below the body text
   they annotate.

   `.engage-console small` in base.css is (0,1,1) and so is this, so the
   win comes from load order - components.css is linked after base.css.
   ===================================================================== */

.eng-reqsubdetails small {
    font-size: 15px;
}

/* =====================================================================
   PAGE COMPONENT: Report judge assignments
   (cdsweb/rpt/RepJudgeAssignments.aspx  ->  .eng-rjassign)
   ---------------------------------------------------------------------
   Bootstrap's `.checkbox` is built for `<label><input> text</label>`: the
   input is taken out of flow and pulled back into the label's 20px left
   padding with `position: absolute; margin-left: -20px`.

   `<asp:CheckBox>` renders the input and its <label> as SIBLINGS instead,
   so there is no padding for the input to be pulled into - it just ends up
   20px left of its own box, hanging into the panel's padding while the
   label stays put. The first column's boxes sat 20px left of the toolbar
   button directly above them.

   Putting the input back in flow lines the column up with everything else
   and keeps the gap to the label explicit. */

.eng-rjassign .checkbox input[type="checkbox"] {
    position: static;
    margin: 0 8px 0 0;
    vertical-align: middle;
}

.eng-rjassign .checkbox label {
    padding-left: 0;
    margin-bottom: 0;
    vertical-align: middle;
}

/* =====================================================================
   PAGE COMPONENT: Late submissions
   (cdsweb/rpt/ViewLateSubmissions.aspx  ->  .eng-latesubs)
   ===================================================================== */

/* Bootstrap pins `.dl-horizontal dt` to 160px and ellipsises anything
   longer. Two of this page's field names need more - "Requested
   Submission" measures 188px - and a truncated field name is worse than a
   wrapped one. Inside the same min-width guard Bootstrap uses, so the
   stacked mobile layout is untouched. */
@media (min-width: 768px) {
    .eng-latesubs .dl-horizontal dt {
        width: 200px;
        white-space: normal;
    }

    .eng-latesubs .dl-horizontal dd {
        margin-left: 220px;
    }
}

/* The per-row note editor is an input-group in the last column. With no
   ceiling its text input claimed enough width to push the six-column table
   past the card and out of the page. */
.eng-latesubs td .input-group {
    min-width: 170px;
    max-width: 300px;
}


/* ── AcceptRejectReq: pending-request list ─────────────────────────────────
   Used by every Approve/Manage requests page (report judges, event captains,
   techs, team members, rules reps).

   The CdsWeb stacked-card layout (_tables.scss, `table.table-responsive`
   below 768px) turns each cell into its own full-width row, so the select
   checkbox ends up alone on a line with the name stranded on the next one.
   `.arr-name-inline` is a duplicate of the name that lives inside the
   checkbox cell: hidden by default, shown only in the stacked view, where
   `td:first-child` already renders it bold at 1.3em. The real Name cell is
   hidden at that width so the name is not printed twice.

   `.engage-console td.arr-name-cell` is (0,2,1) and beats the stacked
   layout's `table.table-responsive tbody tr td { display: block }` at
   (0,1,4) on class count. */
.engage-console .arr-name-inline {
    display: none;
}

/* `screen and` matches _tables.scss exactly: the stacked layout is screen-only,
   so firing these in print would blank the Name column on the printed page. */
@media screen and (max-width: 768px) {
    .engage-console td.arr-name-cell {
        display: none;
    }

    .engage-console .arr-name-inline {
        display: inline;
        vertical-align: middle;
        margin-left: 8px;
    }

    .engage-console td.arr-select-cell input[type="checkbox"] {
        vertical-align: middle;
    }
}


/* ── RepJudgesForEvent: Perpetual toggle ───────────────────────────────────
   asp:CheckBox renders <input><label> with no whitespace between them, so the
   box and its text sit flush. The theme's 8px gap lives on
   `.styled input[type=checkbox]` and does not reach here — this cell is
   `.ItemEdit`, not `.styled`. */
.engage-console .rj-perpetual input[type="checkbox"] {
    margin-right: 4px;
}

/* Actions column: shrink to its contents so the Name/Username columns absorb
   the slack and the buttons sit flush against the table's right edge. In auto
   table-layout a tiny percentage width means "as narrow as the content allows",
   and nowrap keeps the checkbox and button on one line.

   Desktop only. Below 768px the stacked-card layout makes every cell
   display:block, where a 1% width would collapse the Actions card. */
@media screen and (min-width: 769px) {
    .engage-console .rj-table > thead > tr > th:last-child,
    .engage-console .rj-table > tbody > tr > td:last-child {
        width: 1%;
        white-space: nowrap;
    }
}

/* ── EventRubricManagement ─────────────────────────────────────────────────
   Bootstrap 4 gives `.btn-toolbar` flex-wrap, so the four action buttons wrap
   on a narrow column — but neither framework adds a gap between wrapped rows. */
.eng-rubricmgmt .btn-toolbar > .btn {
    margin-bottom: 5px;
}

/* web.config sets controlRenderingCompatibilityVersion="3.5", so a disabled
   WebControl renders `disabled="disabled"` rather than the `.aspNetDisabled`
   class of 4.0+. Bootstrap 3 styles neither on an <a> — it only knows
   `.btn.disabled` — so the action buttons looked identical whether or not the
   user's role could use them. All three spellings are covered so this holds if
   the rendering version is ever raised. */
.eng-rubricmgmt .btn[disabled],
.eng-rubricmgmt .btn.aspNetDisabled,
.eng-rubricmgmt .btn.disabled {
    opacity: .45;
    cursor: not-allowed;
    box-shadow: none;
    pointer-events: none;
}

/* The status label should sit on the row's text baseline, not ride high the way
   an inline-block label does next to plain cell text. */
.eng-rubricmgmt .rubric-table .label {
    display: inline-block;
    font-size: 12px;
    vertical-align: middle;
}

/* ── File inputs ───────────────────────────────────────────────────────────
   The theme styles no file input at all, so `<input type="file">` renders as
   a bare browser control next to themed fields. Marking one `eng-file` gives
   it the same box as `.form-control` and turns the native picker button into
   something that reads like `btn-default`.

   Bootstrap 3 deliberately excludes file inputs from `.form-control`; using
   that class instead produces a padded text-field box with the native button
   sitting loose inside it. Applied here only — it is safe to add to the other
   41 asp:FileUpload controls, 18 of which currently carry `form-control`. */
/* The `!important` here is answering one, not starting one. Engage3Overrides.css
   line 172 carries `.form-group input[type="file"] { height: 100% !important }`,
   so no amount of specificity wins — and wrapping the input in a form-group, as
   Bootstrap 3 requires, is exactly what activates that rule. It was dormant only
   because the markup had no form-group. Scoped to `.eng-file`, so the legacy
   behaviour is untouched everywhere else. */
.engage-console input[type="file"].eng-file {
    display: block;
    width: 100%;
    max-width: 100%;
    /* Fixed rather than min-height: the picker button sets the content height,
       which pushed the field to 52px against the 42px of every sibling field. */
    height: 42px !important;
    padding: 5px 12px;
    border: 1px solid var(--v3-line);
    border-radius: var(--v3-radius-sm);
    background-color: #fff;
    font-size: 14px;
    /*line-height: 30px;*/
    color: var(--v3-ink);
}

    .engage-console input[type="file"].eng-file:focus {
        border-color: #9dc3ef;
        box-shadow: var(--v3-focus-ring);
        outline: none;
    }

/* The picker button. The standard pseudo-element and the legacy WebKit alias
   must be separate rules — a browser that does not recognise one of them would
   drop the whole selector list. */
.engage-console input[type="file"].eng-file::file-selector-button {
    margin-right: 12px;
    padding: 3px 12px;
    border: 1px solid var(--v3-line);
    border-radius: 8px;
    background-color: #fff;
    color: var(--v3-ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

    .engage-console input[type="file"].eng-file::file-selector-button:hover {
        background-color: #f2f7fd;
        border-color: #bcd2ee;
        color: var(--v3-navy);
    }

.engage-console input[type="file"].eng-file::-webkit-file-upload-button {
    margin-right: 12px;
    padding: 3px 12px;
    border: 1px solid var(--v3-line);
    border-radius: 8px;
    background-color: #fff;
    color: var(--v3-ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

    .engage-console input[type="file"].eng-file::-webkit-file-upload-button:hover {
        background-color: #f2f7fd;
        border-color: #bcd2ee;
        color: var(--v3-navy);
    }

/* ── Plain field caption ───────────────────────────────────────────────────
   A caption written as `<label>` and one written as an asp:Label with no
   AssociatedControlID are different elements — <label> and <span> — so the
   theme's `.engage-console label` (14px / 700) hits only the first, and the
   two sit side by side at different size and weight. This class puts both on
   the span's inherited body treatment so they match.

   (0,2,0) beats `.engage-console label` at (0,1,1) on class count, so no
   !important is needed. line-height is left alone: at 16px it inherits the
   same 25.14px the span already computes. */
.engage-console .eng-label-plain {
    display: inline-block;
    font-size: 16px;
    font-weight: 400;
    color: var(--v3-ink);
    margin-bottom: 6px;
}

.eng-viewinquiry .inquiry-detail-rules p,
.eng-viewinquiry .inquiry-detail-meta p {
    margin-bottom: 3px;
}

.eng-viewinquiry .inquiry-detail-rules ul.no-bullet {
    margin: 0;
}

.eng-viewinquiry .inquiry-detail-rules,
.eng-viewinquiry .inquiry-detail-meta {
    margin-bottom: 10px;
}

.eng-viewinquiry .view-inquiry-header .panel {
    margin-bottom: 42px;
}

.eng-viewinquiry .panel-top {
    top: -30px;
}

.eng-viewinquiry .view-inquiry-header .panel-body {
    padding-left: 18px;
    padding-right: 18px;
}

.eng-viewinquiry .panel-body .padd-md {
    padding: 0;
}

.eng-viewinquiry p.padd-md {
    padding-left: 0;
    padding-right: 0;
}

.eng-viewinquiry .panel-body hr {
    margin: 16px 0 12px;
}

.eng-viewinquiry .eng-vi-return {
    padding-top: 26px;
}

.engage-console .view-inquiry-header .panel > .panel-body:last-child {
    border-bottom-left-radius: var(--v3-radius);
    border-bottom-right-radius: var(--v3-radius);
}

.engage-console .view-inquiry-header .panel > .panel-top + .panel-body {
    border-top-left-radius: var(--v3-radius);
    border-top-right-radius: var(--v3-radius);
}

.engage-console .faq-bottom-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
}

.engage-console .faq-actions {
    margin-top: 0;
    margin-bottom: 10px;
}

    .engage-console .faq-actions .btn {
        margin-left: 6px;
        margin-bottom: 6px;
    }

@media screen and (min-width: 769px) {
    .engage-console .groups-table > thead > tr > th:last-child,
    .engage-console .groups-table > tbody > tr > td:last-child {
        width: 1%;
        white-space: nowrap;
    }
}

.eng-civicprogress { --cpc-cyan: #00a3e0; --cpc-dark: #0a182f; }

.eng-civicprogress .cpc-hero {
    position: relative;
    border-radius: var(--v3-radius);
    padding: 44px 40px;
    margin-bottom: 22px;
    color: #fff;
    background: linear-gradient(135deg, var(--cpc-dark) 0%, var(--v3-navy) 45%, var(--v3-blue) 100%);
    box-shadow: 0 14px 34px rgba(0, 81, 149, .26);
}
.eng-civicprogress .cpc-hero-grid { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; }
.eng-civicprogress .cpc-hero-main { flex: 1 1 420px; min-width: 0; }
.eng-civicprogress .cpc-hero-side { flex: 0 1 320px; min-width: 0; }

.eng-civicprogress .cpc-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.eng-civicprogress .cpc-badge {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
    padding: 6px 13px; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .12);
    color: #fff;
}
.eng-civicprogress .cpc-badge.cpc-b-cyan { border-color: rgba(0, 163, 224, .5); background: rgba(0, 163, 224, .18); color: #9fe3ff; }
.eng-civicprogress .cpc-badge.cpc-b-amber { border-color: rgba(245, 190, 90, .45); background: rgba(245, 190, 90, .16); color: #f8d99a; }

.eng-civicprogress .cpc-hero h1 {
    color: #fff; font-size: 38px; font-weight: 800;
    letter-spacing: -.5px; line-height: 1.12; margin: 0 0 14px;
}
.eng-civicprogress .cpc-lead { font-size: 17px; font-weight: 300; line-height: 1.55; color: #cfe3f7; margin: 0 0 22px; max-width: 42em; }

.eng-civicprogress .cpc-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.eng-civicprogress .cpc-cta,
.eng-civicprogress .cpc-cta-ghost {
    display: inline-flex; align-items: center; gap: 9px;
    font-weight: 700; font-size: 14px;
    padding: 13px 24px; border-radius: 12px; text-decoration: none;
    transition: transform .12s ease, background .15s, box-shadow .15s;
}
.eng-civicprogress .cpc-cta { background: var(--cpc-cyan); color: var(--cpc-dark); box-shadow: 0 8px 20px rgba(0, 163, 224, .3); }
.eng-civicprogress .cpc-cta:hover, .eng-civicprogress .cpc-cta:focus { background: #46c3f2; color: var(--cpc-dark); text-decoration: none; transform: translateY(-2px); }
.eng-civicprogress .cpc-cta-ghost { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .32); color: #fff; }
.eng-civicprogress .cpc-cta-ghost:hover, .eng-civicprogress .cpc-cta-ghost:focus { background: rgba(255, 255, 255, .22); color: #fff; text-decoration: none; transform: translateY(-2px); }

.eng-civicprogress .cpc-glass {
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 18px; padding: 22px;
}
.eng-civicprogress .cpc-glass-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.eng-civicprogress .cpc-glass-head .fa { font-size: 26px; color: var(--cpc-cyan); }
.eng-civicprogress .cpc-glass-head h3 { margin: 0; font-size: 17px; font-weight: 700; color: #fff; }
.eng-civicprogress .cpc-glass p { font-size: 13px; line-height: 1.6; color: #d4e4f4; margin: 0 0 14px; }
.eng-civicprogress .cpc-glass-foot {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 12px;
    font-size: 11.5px; color: #c2d4e6;
}
.eng-civicprogress .cpc-live { display: inline-flex; align-items: center; gap: 7px; color: #6ee7b7; font-weight: 700; }
.eng-civicprogress .cpc-dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; display: inline-block; }

.eng-civicprogress .cpc-section { margin-bottom: 22px; }
.eng-civicprogress .cpc-shead { text-align: center; max-width: 46em; margin: 0 auto 26px; }
.eng-civicprogress .cpc-eyebrow {
    display: inline-block; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.2px; color: var(--v3-blue);
    background: var(--v3-a1-bg); border: 1px solid var(--v3-a1-line);
    padding: 5px 13px; border-radius: 999px;
}
.eng-civicprogress .cpc-shead h2 { font-size: 27px; font-weight: 800; color: var(--v3-navy); margin: 12px 0 0; }
.eng-civicprogress .cpc-shead p { color: var(--v3-muted); font-size: 15px; line-height: 1.6; margin: 10px 0 0; }

.eng-civicprogress .cpc-split { display: flex; flex-wrap: wrap; gap: 26px; align-items: flex-start; }
.eng-civicprogress .cpc-split-a { flex: 1 1 380px; min-width: 0; }
.eng-civicprogress .cpc-split-b { flex: 1 1 300px; min-width: 0; }

.eng-civicprogress .cpc-video {
    position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;
    border-radius: 18px; border: 1px solid var(--v3-line);
    box-shadow: 0 14px 30px rgba(16, 40, 70, .18);
    background: var(--v3-navy);
}
.eng-civicprogress .cpc-video iframe {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}
.eng-civicprogress .cpc-video-cap { margin-top: 10px; font-size: 13px; color: var(--v3-muted); }
.eng-civicprogress .cpc-video-cap strong { color: var(--v3-navy); }

.eng-civicprogress .cpc-hl {
    display: flex; align-items: flex-start; gap: 15px;
    padding: 15px 16px; margin-bottom: 14px;
    background: #f7f9fc; border: 1px solid var(--v3-line); border-radius: 14px;
    transition: transform .12s ease, box-shadow .12s;
}
.eng-civicprogress .cpc-hl:hover { transform: translateY(-1px); box-shadow: var(--v3-shadow-hover); }
.eng-civicprogress .cpc-hl-ico {
    width: 46px; height: 46px; border-radius: 13px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--v3-navy); color: #fff; font-size: 18px;
}
.eng-civicprogress .cpc-hl-ico.cpc-i-cyan { background: var(--cpc-cyan); color: var(--cpc-dark); }
.eng-civicprogress .cpc-hl-ico.cpc-i-blue { background: var(--v3-blue-2); color: #fff; }
.eng-civicprogress .cpc-hl h3 { margin: 0 0 4px; font-size: 15.5px; font-weight: 700; color: var(--v3-navy); }
.eng-civicprogress .cpc-hl p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--v3-muted); }

.eng-civicprogress .cpc-webinar-btn {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%; background: var(--v3-navy); color: #fff;
    font-weight: 700; font-size: 14px; padding: 14px 20px;
    border-radius: 12px; text-decoration: none; transition: background .15s;
}
.eng-civicprogress .cpc-webinar-btn:hover, .eng-civicprogress .cpc-webinar-btn:focus { background: var(--v3-blue); color: #fff; text-decoration: none; }

.eng-civicprogress .cpc-quote {
    border-radius: var(--v3-radius); padding: 34px;
    background: linear-gradient(130deg, var(--v3-navy) 0%, var(--v3-blue) 60%, var(--v3-blue-2) 100%);
    color: #fff; margin-bottom: 22px;
    box-shadow: 0 12px 30px rgba(0, 81, 149, .24);
}
.eng-civicprogress .cpc-quote-in { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; }
.eng-civicprogress .cpc-person { flex: 0 0 auto; text-align: center; width: 150px; margin: 0 auto; }
.eng-civicprogress .cpc-avatar {
    width: 104px; height: 104px; border-radius: 50%; margin: 0 auto 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .14); border: 3px solid var(--cpc-cyan);
    color: #fff; font-size: 40px;
}
.eng-civicprogress .cpc-person h4 { margin: 0; font-size: 19px; font-weight: 700; color: #fff; }
.eng-civicprogress .cpc-role { display: block; font-size: 13.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--cpc-cyan); margin-top: 4px; }
.eng-civicprogress .cpc-org { display: block; font-size: 12.5px; color: #c2d4e6; }
.eng-civicprogress .cpc-quote-body { flex: 1 1 340px; min-width: 0; }
.eng-civicprogress .cpc-quote-body blockquote { border: none; margin: 0; padding: 0; }
.eng-civicprogress .cpc-quote-body blockquote p { font-size: 19px; line-height: 1.6; font-style: italic; color: #eaf3fc; margin: 0; }
.eng-civicprogress .cpc-quote-foot { margin-top: 14px; font-size: 13.5px; color: #c2d4e6; display: flex; align-items: center; gap: 8px; }
.eng-civicprogress .cpc-quote-foot .fa { color: var(--cpc-cyan); }

.eng-civicprogress .cpc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.eng-civicprogress .cpc-card {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--v3-line); border-radius: 18px;
    padding: 26px; box-shadow: var(--v3-shadow-card);
    transition: transform .12s ease, box-shadow .12s;
}
.eng-civicprogress .cpc-card:hover { transform: translateY(-4px); box-shadow: var(--v3-shadow-hover); }
.eng-civicprogress .cpc-card-ico {
    width: 54px; height: 54px; border-radius: 16px; margin-bottom: 18px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 22px;
    background: var(--v3-a1-bg); color: var(--v3-a1-fg);
}
.eng-civicprogress .cpc-card-ico.cpc-c2 { background: var(--v3-a2-bg); color: var(--v3-a2-fg); }
.eng-civicprogress .cpc-card-ico.cpc-c3 { background: var(--v3-a3-bg); color: var(--v3-a3-fg); }
.eng-civicprogress .cpc-card-ico.cpc-c4 { background: var(--v3-a4-bg); color: var(--v3-a4-fg); }
.eng-civicprogress .cpc-card h3 { margin: 0 0 10px; font-size: 18px; font-weight: 700; color: var(--v3-navy); }
.eng-civicprogress .cpc-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--v3-muted); flex: 1 1 auto; }
.eng-civicprogress .cpc-card-foot {
    display: flex; align-items: center; gap: 8px; margin-top: 20px; padding-top: 15px;
    border-top: 1px solid var(--v3-line);
    font-size: 13px; font-weight: 700; color: var(--v3-blue);
}
.eng-civicprogress .cpc-card-foot .fa { font-size: 11px; }

.eng-civicprogress .cpc-teams {
    position: relative; overflow: hidden;
    border-radius: var(--v3-radius); padding: 40px;
    background: linear-gradient(140deg, var(--v3-navy) 0%, #1e4976 100%);
    color: #fff; box-shadow: 0 12px 30px rgba(0, 81, 149, .24);
}
.eng-civicprogress .cpc-teams-mark {
    position: absolute; right: -18px; bottom: -34px;
    font-size: 150px; opacity: .10; color: #fff; pointer-events: none;
}
.eng-civicprogress .cpc-teams-in { position: relative; z-index: 1; max-width: 46em; }
.eng-civicprogress .cpc-pill {
    display: inline-block; background: var(--cpc-cyan); color: var(--cpc-dark);
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
    padding: 5px 13px; border-radius: 999px;
}
.eng-civicprogress .cpc-teams h2 { font-size: 27px; font-weight: 800; color: #fff; margin: 14px 0 12px; }
.eng-civicprogress .cpc-teams p { font-size: 15px; line-height: 1.6; color: #cfe3f7; margin: 0 0 20px; }
.eng-civicprogress .cpc-cta-white {
    display: inline-flex; align-items: center; gap: 9px;
    background: #fff; color: var(--v3-navy); font-weight: 700; font-size: 14px;
    padding: 13px 24px; border-radius: 12px; text-decoration: none;
    transition: transform .12s ease, background .15s;
}
.eng-civicprogress .cpc-cta-white:hover, .eng-civicprogress .cpc-cta-white:focus { background: #eef5ff; color: var(--v3-navy); text-decoration: none; transform: translateY(-2px); }

@media (max-width: 767.98px) {
    .eng-civicprogress .cpc-hero { padding: 28px 22px; }
    .eng-civicprogress .cpc-hero h1 { font-size: 28px; }
    .eng-civicprogress .cpc-lead { font-size: 15px; }
    .eng-civicprogress .cpc-quote,
    .eng-civicprogress .cpc-teams { padding: 24px; }
    .eng-civicprogress .cpc-teams h2,
    .eng-civicprogress .cpc-shead h2 { font-size: 22px; }
    .eng-civicprogress .cpc-actions .cpc-cta,
    .eng-civicprogress .cpc-actions .cpc-cta-ghost { width: 100%; justify-content: center; }
}
.eng-civicprogress .cpc-avatar { overflow: hidden; padding: 0; }
.eng-civicprogress .cpc-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }

.eng-civicprogress .cpc-facade {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: block; padding: 0; border: 0; cursor: pointer;
    background-color: var(--v3-navy);
    background-size: cover; background-position: center;
    overflow: hidden;
}
.eng-civicprogress .cpc-facade:before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .18) 45%, rgba(0, 0, 0, .05) 100%);
}
.eng-civicprogress .cpc-facade-play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 72px; height: 72px; border-radius: 50%;
    background: var(--cpc-cyan); color: var(--cpc-dark);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 26px; box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
    transition: transform .15s ease, background .15s;
}
.eng-civicprogress .cpc-facade:hover .cpc-facade-play,
.eng-civicprogress .cpc-facade:focus .cpc-facade-play { background: #fff; transform: translate(-50%, -50%) scale(1.08); }
.eng-civicprogress .cpc-facade-meta {
    position: absolute; left: 20px; right: 20px; bottom: 18px; text-align: left; color: #fff;
}
.eng-civicprogress .cpc-facade-tag {
    display: inline-block; background: var(--v3-blue-2); color: #fff;
    font-size: 10.5px; font-weight: 700; padding: 4px 9px; border-radius: 6px; margin-bottom: 8px;
}
.eng-civicprogress .cpc-facade-meta h4 { margin: 0; font-size: 16px; font-weight: 700; color: #fff; }
.eng-civicprogress .cpc-facade-note {
    position: absolute; top: 14px; right: 16px;
    font-size: 11px; color: rgba(255, 255, 255, .85);
    background: rgba(0, 0, 0, .38); padding: 4px 10px; border-radius: 999px;
}

.eng-civicprogress .cpc-figure {
    margin: 0 0 26px;
    border-radius: var(--v3-radius);
    overflow: hidden;
    border: 1px solid var(--v3-line);
    box-shadow: var(--v3-shadow-card);
    background: var(--v3-navy);
}
.eng-civicprogress .cpc-figure img {
    display: block; width: 100%; height: 525px;
    object-fit: cover; object-position: center 42%;
}
.eng-civicprogress .cpc-figcap {
    margin: 0; padding: 13px 18px;
    background: #fff; border-top: 1px solid var(--v3-line);
    font-size: 12.5px; line-height: 1.55; color: var(--v3-muted);
}
.eng-civicprogress .cpc-figcap strong { color: var(--v3-navy); font-weight: 700; }

@media (max-width: 767.98px) {
    .eng-civicprogress .cpc-figure img { height: 200px; }
}