/* ===================================================================== EngageSAE Console theme — BASE --------------------------------------------------------------------- Re-skins the Bootstrap classes the application already emits, so pages inherit the theme without any markup change. This is the layer that reaches ~460 pages, and therefore the riskiest one — it is kept in its own file so it can be reviewed, gated and reverted independently. SCOPING ------- Every rule is prefixed `.engage-console` — the class the masters put on . Removing that one class disables the theme site-wide, which is the kill switch. Keep to ONE class of nesting past the prefix so a page can still override a rule with `body.engage-console ...`; anything deeper belongs in a page-scoped block in components.css. Bootstrap note: this app loads Bootstrap 3 *and* (via plugins.css) the Bootstrap 4 based admin template, so `.panel*` (BS3) and `.card*` (BS4) both occur. Rules below cover both vocabularies together so a shared user control renders the same under either master. ===================================================================== */ /* ============================ TYPOGRAPHY ============================ */ .engage-console { /* Poppins arrives via a Google Fonts @import inside style.css and has no fallback there; if that request fails every page renders in the browser default serif. Give it a real stack. No !important — the point of the theme is to stop fighting the cascade. */ font-family: 'Poppins', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--v3-ink); } .engage-console h1, .engage-console h2, .engage-console h3, .engage-console h4 { color: var(--v3-navy); font-weight: 800; } .engage-console h2 { font-size: 22px; } .engage-console strong { font-weight: 700; } .engage-console small { color: var(--v3-muted); font-size: 12px; } .engage-console .text-success { color: var(--v3-success); font-weight: 600; } .engage-console .text-primary { color: var(--v3-blue); } /* ========================= CARDS (BS4) + PANELS (BS3) ========================= `.card-body` is defined NOWHERE in the Engage3 stylesheet chain, so the ~400 pages built as
currently render with no padding at all. Defining it here is the single highest leverage rule in the theme — and it is additive, not an override. */ .engage-console .card, .engage-console .panel { background: var(--v3-card); border: 1px solid var(--v3-line); border-radius: var(--v3-radius); box-shadow: var(--v3-shadow-card); margin-bottom: 20px; /* NOTE: deliberately NO `overflow: hidden`. The prototype clipped the panel so the heading's corners would round, but that also clips every absolutely-positioned child — Bootstrap dropdowns, jQuery UI autocomplete, the DateTimePicker popup and selectize menus, all of which are used heavily inside panels. Corners are rounded on the heading itself instead (below). */ } .engage-console .card-body, .engage-console .panel-body { padding: 20px 22px; } /* Shared heading chrome. Backgrounds are set per-type below. */ .engage-console .card-header, .engage-console .panel-heading, .engage-console .panel-heading.white { font-weight: 700; font-size: 15px; padding: 15px 18px; border-top-left-radius: var(--v3-radius); border-top-right-radius: var(--v3-radius); } /* Bare `.panel-heading` keeps the light treatment. In practice every panel now carries `.panel-primary`, which overrides this below, but a heading outside one still needs a sane default. */ .engage-console .panel-heading, .engage-console .panel-heading.white { background: linear-gradient(130deg, #ffffff 0%, #eef3f9 100%); color: var(--v3-navy); border-bottom: 1px solid var(--v3-line); } /* `.card-header` uses the .v3-banner gradient, matching `.panel-primary > .panel-heading` so cards and panels read alike. `.bg-white` is honoured as a deliberate opt-out — three headers pair it with `.no-border` to sit flush against the card body, and painting those blue would defeat the point. Excluding via :not() also keeps the white-text rules below off them, so they never go white-on-white. */ .engage-console .card-header:not(.bg-white) { background: linear-gradient(130deg, var(--v3-navy) 0%, var(--v3-blue) 60%, var(--v3-blue-2) 100%); color: #fff; border-bottom: none; } /* Text nested inside a coloured card-header has to come with it. These headers carry

-

, `.card-title`, `.header-title` and Literal text that would otherwise render dark-on-dark. */ .engage-console .card-header:not(.bg-white) h1, .engage-console .card-header:not(.bg-white) h2, .engage-console .card-header:not(.bg-white) h3, .engage-console .card-header:not(.bg-white) h4, .engage-console .card-header:not(.bg-white) h5, .engage-console .card-header:not(.bg-white) h6, .engage-console .card-header:not(.bg-white) a, .engage-console .card-header:not(.bg-white) .card-title, .engage-console .card-header:not(.bg-white) .header-title, .engage-console .card-header:not(.bg-white) .competition-title { color: #fff; } /* Secondary text keeps its lower emphasis rather than going flat white. */ .engage-console .card-header:not(.bg-white) small, .engage-console .card-header:not(.bg-white) .text-muted { color: rgba(255, 255, 255, .85); } /* A panel heading explicitly painted `.bg-primary` keeps that intent; BS4 declares `.bg-primary` !important so the colour wins on its own, and we only fix the foreground. `.card-header` is no longer listed here — it now takes the gradient above like every other card. */ .engage-console .panel-heading.bg-primary { background-image: none; color: #fff; border-bottom: none; } /* BS3 `.panel-primary` header. Painted with the same gradient as `.v3-banner` in components.css so the two read as one family — keep them in step if either changes. The `background` shorthand is deliberate: it clears the `background-color` BS3 sets, which a bare `background-image` would leave showing through. */ .engage-console .panel-primary > .panel-heading { background: linear-gradient(130deg, var(--v3-navy) 0%, var(--v3-blue) 60%, var(--v3-blue-2) 100%); color: #fff; border-bottom: none; } /* ============================== BUTTONS ============================== Bootstrap 3 has no .btn-secondary / .btn-light / .btn-outline-*, and the BS4 template does not define them either — so today 261 uses of `btn-secondary` across the app render as bare, unstyled buttons. These are new definitions, not overrides. */ .engage-console .btn { border-radius: var(--v3-radius-sm); font-weight: 600; font-size: 13.5px; padding: 9px 16px; box-shadow: none; } .engage-console .btn-primary { background-color: var(--v3-blue); border: 1px solid var(--v3-blue); color: #fff; } .engage-console .btn-primary:hover, .engage-console .btn-primary:focus { background-color: var(--v3-navy); border-color: var(--v3-navy); color: #fff; } /* Neutral / outline buttons — previously unstyled. */ .engage-console .btn-secondary, .engage-console .btn-default, .engage-console .btn-light { background-color: #fff; border: 1px solid var(--v3-line); color: var(--v3-ink); } .engage-console .btn-secondary:hover, .engage-console .btn-secondary:focus, .engage-console .btn-default:hover, .engage-console .btn-light:hover { background-color: #f2f7fd; border-color: #bcd2ee; color: var(--v3-navy); } .engage-console .btn-outline-primary, .engage-console .btn-outline-secondary { background-color: transparent; border: 1px solid var(--v3-blue); color: var(--v3-blue); } .engage-console .btn-outline-primary:hover, .engage-console .btn-outline-secondary:hover { background-color: var(--v3-blue); color: #fff; } .engage-console .btn-danger { background-color: #fff; border: 1px solid #f0c9c9; color: #b2413b; } .engage-console .btn-danger:hover { background-color: #fdf1f1; border-color: #e3a9a9; color: #8f302b; } .engage-console .btn-info { background-color: #fff; border: 1px solid #cdeee6; color: var(--v3-ink); } .engage-console .btn-info:hover { border-color: #9fdcca; } .engage-console .btn-lg { font-size: 15px; padding: 12px 20px; border-radius: 12px; } .engage-console .btn-sm { font-size: 12.5px; padding: 6px 12px; border-radius: 9px; } .engage-console .btn-block { display: block; width: 100%; } /* ---------- Mobile: every button renders at .btn-lg size ---------- Below the Bootstrap `sm` breakpoint every button — whatever size class it carries — takes the .btn-lg metrics, for thumb-sized touch targets. 767.98px is the shared boundary: it is BS3's `xs` ceiling and BS4's `md` floor, so it lines up on both masters. Listing .btn-xs/.btn-sm/.btn-lg explicitly is required. They match at the same (0,2,0) specificity as `.engage-console .btn`, so a bare `.btn` rule here would lose the tie to the size classes above. This block sits after them, so on an equal-specificity tie it wins. .btn-xs and .btn-sm are still worth covering even though no Engage markup uses them any more: bootstrap-select, footable, x-editable, daterangepicker and clockpicker all emit `btn-sm` at runtime. */ @media (max-width: 767.98px) { .engage-console .btn, .engage-console .btn-xs, .engage-console .btn-sm, .engage-console .btn-lg { font-size: 15px; padding: 12px 20px; border-radius: 12px; } /* Keep an input-group's button aligned with its field. BS3 lays the group out as a table and BS4 as a flex row, so both stretch the field to the taller button — but the text inside would still sit a point smaller than the button's. Match them up. */ .engage-console .input-group .form-control { font-size: 15px; } /* A .btn-group of full-size buttons overflows a phone viewport — the Inbox toolbar (Inbox / Sent Items / My Preferences) is ~360px at this size, wider than a 375px screen. Let the group wrap. Once it wraps, the joined-corner styling has to go too, or the detached buttons keep their squared-off inner edges. Bootstrap squares them at (0,5,0) via stacked :not()s, so the restore has to repeat that shape behind `.engage-console` to reach (0,6,0). */ .engage-console .btn-group, .engage-console .btn-group-vertical { display: inline-flex; flex-wrap: wrap; gap: 4px; } .engage-console .btn-group > .btn, .engage-console .btn-group > .btn-group > .btn { float: none; } /* Restore the radius Bootstrap strips to join the buttons together. Each selector below mirrors a real Bootstrap rule with `.engage-console` prepended — that added class is what wins the cascade. Matching the shapes exactly is deliberate: BS squares these at up to (0,6,0), so a simpler `.btn-group > .btn` rule silently loses and the corners stay square. Verified against the CSSOM of a rendered page rather than assumed. */ .engage-console .btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle), .engage-console .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle), .engage-console .btn-group > .btn:last-child:not(:first-child), .engage-console .btn-group > .dropdown-toggle:not(:first-child), .engage-console .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn, .engage-console .btn-group > .btn-group:first-child > .btn:last-child, .engage-console .btn-group > .btn-group:first-child > .dropdown-toggle, .engage-console .btn-group > .btn-group:last-child > .btn:first-child, .engage-console .btn-group-vertical > .btn:not(:first-child):not(:last-child), .engage-console .btn-group-vertical > .btn:first-child:not(:last-child), .engage-console .btn-group-vertical > .btn:last-child:not(:first-child), .engage-console .btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn, .engage-console .btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child, .engage-console .btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle, .engage-console .btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child { border-radius: 12px; } /* Undo the -1px border collapse; with a gap it just misaligns. */ .engage-console .btn-group > .btn + .btn, .engage-console .btn-group > .btn + .btn-group, .engage-console .btn-group > .btn-group + .btn { margin-left: 0; } } /* =============================== FORMS =============================== */ .engage-console .form-group { margin-bottom: 16px; } .engage-console .form-control, .engage-console select.form-control, .engage-console textarea.form-control { border: 1px solid var(--v3-line); border-radius: var(--v3-radius-sm); min-height: 42px; max-width: 100%; font-size: 14px; color: var(--v3-ink); box-shadow: none; background-color: #fff; padding: 8px 12px; } .engage-console .form-control:focus { border-color: #9dc3ef; box-shadow: var(--v3-focus-ring); } .engage-console .help-block { font-size: 13px; line-height: 1.55; color: var(--v3-muted); } /* Labels: normal case at body size. NOT-GLOBALISED counterpart below — the prototype's compact uppercase label is intentionally NOT applied site-wide. ASP.NET emits a