/* branding-suite.css — injected via nginx sub_filter into every
 * Mobieus suite product page (osTicket → mobieusHelp,
 * Moodle → mobieusLearn).
 *
 * Loaded from https://<slug>.mobieus.io/branding-suite.css —
 * served by the tenant's own platform host, so cookies + auth
 * surfaces stay same-origin with the rest of the tenant.
 *
 * Rewritten 2026-05-21 for visual parity with the storefront +
 * mobieusCore stylish-black theme (P0-4).  Three jobs:
 *
 *   1. Self-host the Mobieus typography (Bricolage Grotesque
 *      display, DM Sans body) so the suite products render with
 *      the same font system as mobieus.io.  Fonts served from
 *      `/fonts/` on the same host as this CSS via an nginx alias
 *      added to each suite-product vhost.
 *
 *   2. Apply the Mobieus storefront token system to the suite
 *      product surface — blue/purple brand, dark blue-black body,
 *      glass-alpha borders, gradient buttons — matching what
 *      mobieusCore looks like post-P0-4.  Tuned for osTicket's
 *      page structure (header, sidebar, content card, forms,
 *      buttons, tables); Moodle inherits the same tokens with
 *      mostly cosmetic overrides because Moodle's Bootstrap theme
 *      already handles most surfaces consistently.
 *
 *   3. Pin a small attribution chip to the bottom-right of every
 *      page that reads just "mobieusHelp" / "mobieusLearn" —
 *      no more "powered by osTicket" since the underlying app
 *      name is out of every member-visible surface as of
 *      2026-05-21.
 */

/* ─── Self-hosted fonts ─────────────────────────────────────────
 * Same WOFF2 binaries as platform/public/fonts/ (and as the
 * marketing-site at mobieus.io/fonts/).  font-display: swap so
 * upstream HTML renders in the system fallback during the woff2
 * fetch, then re-renders once the variable font lands.  Paths are
 * absolute so they resolve against the host this CSS was loaded
 * from (the platform host, served by the same vhost as
 * branding-suite.css), not the help.<slug> host where the page
 * itself is rendered.
 */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/3y9K6as8bTXq_nANBjzKo3IeZx8z6up5BeSl9D4dj_x9PpZBMlGIInE.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/rP2Hp2ywxg089UriCZOIHQ.woff2') format('woff2');
}

/* ─── Storefront tokens (mirror marketing-site/src/styles/tokens.css) ── */
:root {
  /* Brand palette */
  --mb-blue:          #2C7CFF;
  --mb-blue-bright:   #4D90FF;
  --mb-purple:        #7B3FE4;
  --mb-purple-bright: #9B5FFF;
  --mb-grad:          linear-gradient(135deg, #2C7CFF 0%, #7B3FE4 100%);
  --mb-grad-hover:    linear-gradient(135deg, #4D90FF 0%, #9B5FFF 100%);

  /* Surface ladder */
  --mb-bg:           #07091A;
  --mb-bg-2:         #0E1228;
  --mb-bg-3:         #161B36;
  --mb-bg-elevated:  #1d234a;
  --mb-border:       rgba(255, 255, 255, 0.08);
  --mb-border-bright:rgba(255, 255, 255, 0.16);

  /* Text ladder */
  --mb-text:       #F4F6FB;
  --mb-text-dim:   #A7AEC4;
  --mb-text-muted: #6B7390;

  --mb-shadow-grad: 0 8px 24px rgba(44, 124, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  --mb-radius-md:   10px;
  --mb-radius-lg:   16px;
}

/* ─── Body + page background ────────────────────────────────────
 * Hit the universal `body` rather than scoping to a class — osTicket
 * and Moodle both render server-side and emit their own per-template
 * markup; the body element is the one reliable anchor.  !important
 * is needed because upstream stylesheets ship their own body rules.
 */
html, body {
  background-color: var(--mb-bg) !important;
  background-image: none !important;
  color:            var(--mb-text) !important;
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
}

/* Ambient gradient — same triple-radial wash the storefront uses
 * for the Mobieus signature look.  Fixed-position so it doesn't
 * churn on scroll, pointer-events:none so it never blocks clicks.
 *
 * Alphas pulled down from 0.18/0.15/0.10 → 0.10/0.08/0.06 so the
 * radial zones don't read as bright "white bars" framing the
 * narrower osTicket container at 840px-fixed width on wider
 * viewports.  At reduced alpha the gradient is a soft mood-light,
 * not a competing surface. */
body::before {
  content: "";
  position: fixed !important;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 800px 600px at 15% 0%,   rgba(44, 124, 255, 0.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 85% 30%,  rgba(123, 63, 228, 0.08), transparent 60%),
    radial-gradient(ellipse 900px 700px at 50% 100%, rgba(44, 124, 255, 0.06), transparent 70%) !important;
}

/* Display family — h1..h4 use Bricolage Grotesque per storefront.
 * h5/h6 stay sans-serif body for small-section headings. */
h1, h2, h3, h4 {
  font-family: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif !important;
  letter-spacing: -0.02em;
  color: var(--mb-text) !important;
}

a, a:link, a:visited {
  color: var(--mb-blue-bright) !important;
}
a:hover {
  color: var(--mb-blue) !important;
}

/* ─── osTicket-specific overrides ───────────────────────────────
 * osTicket's CSS uses specific IDs/classes that the !important
 * forces above target broadly.  These rules zero in on the
 * surfaces that look stale without them.
 *
 * Specificity-bump pattern: prefix selectors with `html body` so
 * we beat upstream rules that use the same id-only specificity
 * (osTicket's theme.css uses `#container { background:#fff; }`
 * etc.) without dropping `!important` into every line.
 */

/* Container width — upstream pins #container to 840px, leaving
 * the body BG showing on the sides at modern viewport widths.
 * Widen to storefront-shape (max 1200, padded) so the dashboard
 * fills the page instead of floating in a narrow card. */
html body #container {
  width: auto !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  background: var(--mb-bg-2) !important;
  border: 1px solid var(--mb-border) !important;
  border-radius: var(--mb-radius-lg) !important;
  box-shadow: none !important;
  color: var(--mb-text) !important;
  padding: 0 !important;
  overflow: hidden;
}

/* Header band — solid dark surface with a hairline separator at
 * the bottom.  Bumped padding so the new mark has breathing room. */
html body #header,
html body #nav,
html body #sub_nav,
html body #pjax-container > #header {
  background: var(--mb-bg-3) !important;
  border-bottom: 1px solid var(--mb-border) !important;
  color: var(--mb-text) !important;
  height: auto !important;
  min-height: 64px;
  padding: 12px 24px !important;
}
html body #header a,
html body #nav a,
html body #sub_nav a {
  color: var(--mb-text-dim) !important;
}
html body #header a:hover,
html body #nav a:hover,
html body #sub_nav a:hover {
  color: var(--mb-text) !important;
}

/* Header logo — replace `/logo.php` (osTicket's dynamic logo
 * endpoint) with the Mobieus mark.  Hide the upstream `<img>` and
 * paint the favicon-style mark as a background on the `<a>`. The
 * nginx vhost aliases `/logo.php` to the dark favicon PNG, so the
 * upstream `<img>`'s alt text + accessibility stay intact (some
 * client browsers fall back to alt when background images don't
 * render).  Width tuned so the M sits left of the corner-curve. */
html body #header #logo {
  display: inline-flex !important;
  align-items: center !important;
  height: 48px !important;
  padding: 0 !important;
  margin: 0 !important;
}
html body #header #logo img {
  max-height: 48px !important;
  max-width: 48px !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 8px;
}
html body #header #logo::after {
  content: "mobieusHelp";
  margin-left: 12px;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--mb-text);
}

/* Main content panels — osTicket uses .pull-left + .main-content
 * + tabular .container blocks.  Plus #landing_page and .thread-body
 * which upstream forces to white background + dark text. */
html body #content,
html body .main-content,
html body .pull-left.content,
html body #landing_page,
html body .thread-body {
  background: transparent !important;
  border: none !important;
  color: var(--mb-text) !important;
}

/* Inner content card — give #landing_page a card-shaped surface
 * so the typography has room to breathe and the dashboard text
 * doesn't sit flush against the container edge. */
html body #landing_page {
  padding: 32px 24px !important;
}

/* Thread body — upstream forces #ffffff / #333 here.  Lift to the
 * elevated dark surface + light text.  Same treatment for the
 * sidebar/card areas under #landing_page. */
html body .thread-body,
html body #landing_page .main-content,
html body #landing_page .sidebar {
  background: var(--mb-bg-3) !important;
  color: var(--mb-text) !important;
  border-radius: var(--mb-radius-md) !important;
  padding: 24px !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}
html body .thread-body p,
html body .thread-body li,
html body .thread-body td,
html body #landing_page p,
html body #landing_page li {
  color: var(--mb-text) !important;
}
html body .thread-body h1,
html body .thread-body h2,
html body .thread-body h3,
html body #landing_page h1,
html body #landing_page h2,
html body #landing_page h3 {
  color: var(--mb-text) !important;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif !important;
  letter-spacing: -0.02em;
  margin-top: 0 !important;
}

/* Form inputs — osTicket uses native browser controls.  Force a
 * dark-themed input look.  Padding bumped so admin form fields
 * read as proper Mobieus inputs (10px 14px, font-size 14px) rather
 * than the cramped native default. */
html input[type="text"],
html input[type="email"],
html input[type="password"],
html input[type="search"],
html input[type="number"],
html input[type="tel"],
html input[type="url"],
html input[type="date"],
html input[type="datetime-local"],
html input[type="time"],
html input:not([type]),
html select,
html textarea {
  background-color: var(--mb-bg-elevated) !important;
  color:            var(--mb-text) !important;
  border:           1px solid var(--mb-border-bright) !important;
  border-radius:    var(--mb-radius-md) !important;
  padding:          10px 14px !important;
  font-size:        14px !important;
  font-family:      'DM Sans', system-ui, sans-serif !important;
  line-height:      1.4 !important;
  min-height:       40px;
  box-sizing:       border-box !important;
}
html textarea {
  min-height: 96px;
}
html input:focus, html select:focus, html textarea:focus {
  outline: none !important;
  border-color: var(--mb-blue-bright) !important;
  box-shadow: 0 0 0 3px rgba(44, 124, 255, 0.25) !important;
}
html input::placeholder, html textarea::placeholder {
  color: var(--mb-text-muted) !important;
  opacity: 1;
}
/* Native browser controls have a built-in light styling for the
 * dropdown caret + checkbox/radio fill — force the color scheme so
 * the browser draws the dark-mode chrome. */
html, body, html body input, html body select, html body textarea {
  color-scheme: dark;
}
html input[type="checkbox"], html input[type="radio"] {
  accent-color: var(--mb-blue) !important;
}

/* Buttons — apply the storefront gradient pill to primary buttons,
 * a flat-elevated pill to secondary.  osTicket uses .button +
 * .green / .red / .blue class variants for actions; also
 * <input type="submit|button"> elements directly.  Patrick
 * flagged the Reset button on /scp/tickets.php?a=open rendering
 * as invisible — `<input type="reset">` wasn't in the previous
 * selector list, so it fell through to native browser chrome
 * (tiny grey block).  Now styled as a SECONDARY button (subdued
 * vs the gradient primary). */
.button,
button[type="submit"],
input[type="submit"],
input[type="button"],
.btn,
.btn-primary,
a.btn.green,
.button.green {
  background: var(--mb-grad) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--mb-radius-md) !important;
  box-shadow: var(--mb-shadow-grad) !important;
  font-weight: 600 !important;
  padding: 8px 18px !important;
}
.button:hover,
button[type="submit"]:hover,
.btn:hover,
a.btn.green:hover {
  background: var(--mb-grad-hover) !important;
  color: #fff !important;
}

/* Secondary buttons — Reset / Cancel etc.  These need to be
 * visible but not draw the eye away from the primary action. */
html body input[type="reset"],
html body button[type="reset"],
html body .button.cancel,
html body .button.action-button.cancel,
html body a.cancel {
  background: var(--mb-bg-elevated) !important;
  color: var(--mb-text) !important;
  border: 1px solid var(--mb-border-bright) !important;
  border-radius: var(--mb-radius-md) !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  padding: 8px 18px !important;
  cursor: pointer;
}
html body input[type="reset"]:hover,
html body button[type="reset"]:hover {
  background: var(--mb-bg-3) !important;
  border-color: var(--mb-blue-bright) !important;
}

.button.red, .btn-danger {
  background: linear-gradient(135deg, #FF6B6B 0%, #c1273a 100%) !important;
  color: #fff !important;
}

/* Tables — osTicket's .list class is the dashboard's main table. */
table.list, table.table, .table {
  background: transparent !important;
  color: var(--mb-text) !important;
  border-color: var(--mb-border) !important;
}
table.list th, .table th {
  background: var(--mb-bg-2) !important;
  color: var(--mb-text-dim) !important;
  border-color: var(--mb-border) !important;
}
table.list td, .table td {
  border-color: var(--mb-border) !important;
  color: var(--mb-text) !important;
}
table.list tr:hover {
  background: var(--mb-bg-elevated) !important;
}

/* osTicket footer wrapper — kill the upstream "Helpdesk software
 * powered by osTicket" line entirely.  The visible mobieusHelp
 * attribution chip below is the only attribution surface.
 *
 * Pin to the `#poweredBy` id (and href*=osticket / href*=mobieus
 * as belt-and-braces) — the vhost-level sub_filter rewrites
 * `osticket.com` to `mobieus.io` so attribute-selector matches on
 * the original URL can fall off.  The id is stable. */
#poweredBy,
#footer #poweredBy,
.footer #poweredBy,
#footer a[href*="osticket.com"],
.footer a[href*="osticket.com"],
#footer .copyright {
  display: none !important;
}
#footer, .footer {
  background: var(--mb-bg-2) !important;
  border-top: 1px solid var(--mb-border) !important;
  color: var(--mb-text-muted) !important;
}

/* ─── Suite-product attribution chip ────────────────────────────
 * Pinned to the bottom-right corner of every page.  Says just
 * "mobieusHelp" / "mobieusLearn" — no "powered by" suffix since
 * the underlying-app name is out of every member-visible surface
 * as of 2026-05-21.
 *
 * Sources from --mobieus-suite-attrib so each suite-product nginx
 * vhost picks the right label.
 */
body::after {
  content: var(--mobieus-suite-attrib, "mobieus.io");
  position: fixed !important;
  bottom: 0;
  right: 0;
  z-index: 100;
  padding: 4px 12px;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--mb-text-dim) !important;
  background: rgba(7, 9, 26, 0.85);
  backdrop-filter: blur(6px);
  border-top-left-radius: var(--mb-radius-md);
  border-top: 1px solid var(--mb-border);
  border-left: 1px solid var(--mb-border);
  pointer-events: none;
}

@media print {
  body::after  { display: none; }
  body::before { display: none; }
}

/* ════════════════════════════════════════════════════════════════
 * mobieusLearn (Moodle) overrides — Boost / Stream theme
 * ════════════════════════════════════════════════════════════════
 *
 * Moodle ships a custom Bootstrap-based theme (Boost upstream,
 * Stream downstream).  Coverage here scopes via Moodle's body-
 * class fingerprints — `body[id*="page"]` and Moodle's
 * `.path-frontpage` / `.pagelayout-*` body classes are reliable
 * structural discriminators that don't fire on osTicket pages.
 *
 * The tokens / fonts / radial-gradient body backdrop already
 * apply globally via the top-of-file rules (Moodle's body
 * element gets `background: var(--mb-bg)` from the universal
 * `body` selector).  This block fixes the Bootstrap-specific
 * UI surfaces Moodle uses that the global rules can't reach. */

/* --- Top navbar (Boost: .navbar.fixed-top) --------------------- *
 * Stream theme + Boost render the brand strip as
 * `.navbar.fixed-top.navbar-light` with a white-ish background.
 * Force brand-gradient so it matches storefront. */
html body .navbar,
html body .navbar.fixed-top,
html body header.navbar,
html body .primary-navigation,
html body .secondary-navigation,
html body nav.fixed-top,
html body nav.navbar {
  background: var(--mb-bg-3) !important;
  background-color: var(--mb-bg-3) !important;
  border-bottom: 1px solid var(--mb-border) !important;
  color: var(--mb-text) !important;
  box-shadow: 0 1px 0 var(--mb-border) !important;
}
html body .navbar .navbar-brand,
html body .navbar .nav-link,
html body .navbar a {
  color: var(--mb-text-dim) !important;
}
html body .navbar .nav-link:hover,
html body .navbar .nav-link.active,
html body .navbar a:hover {
  color: var(--mb-text) !important;
  background: var(--mb-bg-elevated) !important;
}
html body .navbar .nav-link.active {
  border-bottom: 2px solid var(--mb-blue) !important;
}

/* --- Bootstrap cards (Moodle wraps everything in cards) ------- */
html body .card,
html body .block,
html body .activity,
html body .course-content .activity-wrapper,
html body .dashboard-card,
html body .frontpage-news .singlebutton {
  background: var(--mb-bg-2) !important;
  background-color: var(--mb-bg-2) !important;
  border: 1px solid var(--mb-border) !important;
  border-radius: var(--mb-radius-md) !important;
  color: var(--mb-text) !important;
  box-shadow: none !important;
}
html body .card .card-header,
html body .card-header,
html body .block-header,
html body .block .header,
html body .card-body > .card-title {
  background: var(--mb-bg-3) !important;
  color: var(--mb-text) !important;
  border-bottom: 1px solid var(--mb-border) !important;
}
html body .card-body,
html body .card-text,
html body .block-content,
html body .block .content {
  background: transparent !important;
  color: var(--mb-text) !important;
}
html body .card-footer,
html body .block-footer {
  background: var(--mb-bg-3) !important;
  border-top: 1px solid var(--mb-border) !important;
  color: var(--mb-text-dim) !important;
}

/* --- Bootstrap buttons (`.btn`) -------------------------------- */
html body .btn,
html body button.btn,
html body a.btn {
  border-radius: var(--mb-radius-md) !important;
  font-weight: 600 !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  padding: 8px 18px !important;
}
html body .btn-primary,
html body .btn-success,
html body button.btn-primary,
html body a.btn-primary,
html body input.btn-primary {
  background: var(--mb-grad) !important;
  background-color: transparent !important;
  border: none !important;
  color: #fff !important;
  box-shadow: var(--mb-shadow-grad) !important;
}
html body .btn-primary:hover,
html body .btn-success:hover {
  background: var(--mb-grad-hover) !important;
}
html body .btn-secondary,
html body .btn-outline-secondary,
html body .btn-light,
html body .btn-default {
  background: var(--mb-bg-elevated) !important;
  border: 1px solid var(--mb-border-bright) !important;
  color: var(--mb-text) !important;
  box-shadow: none !important;
}
html body .btn-secondary:hover,
html body .btn-outline-secondary:hover {
  background: var(--mb-bg-3) !important;
  border-color: var(--mb-blue-bright) !important;
}
html body .btn-danger {
  background: linear-gradient(135deg, #FF6B6B 0%, #c1273a 100%) !important;
  color: #fff !important;
}

/* --- Bootstrap form controls (`.form-control`, `.custom-select`)*/
html body .form-control,
html body .custom-select,
html body input.form-control,
html body select.form-control,
html body select.custom-select,
html body textarea.form-control {
  background-color: var(--mb-bg-elevated) !important;
  color: var(--mb-text) !important;
  border: 1px solid var(--mb-border-bright) !important;
  border-radius: var(--mb-radius-md) !important;
  padding: 10px 14px !important;
  min-height: 40px;
}
html body .form-control:focus,
html body .custom-select:focus {
  border-color: var(--mb-blue-bright) !important;
  box-shadow: 0 0 0 3px rgba(44, 124, 255, 0.25) !important;
  background-color: var(--mb-bg-elevated) !important;
  color: var(--mb-text) !important;
}
html body .input-group-text,
html body .input-group-prepend .input-group-text,
html body .input-group-append .input-group-text {
  background: var(--mb-bg-3) !important;
  color: var(--mb-text-dim) !important;
  border: 1px solid var(--mb-border) !important;
}

/* --- Moodle dropdown menus (.dropdown-menu) --------------------- */
html body .dropdown-menu,
html body .dropdown-menu.show {
  background: var(--mb-bg-2) !important;
  border: 1px solid var(--mb-border-bright) !important;
  border-radius: var(--mb-radius-md) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  color: var(--mb-text) !important;
}
html body .dropdown-item,
html body .dropdown-menu .dropdown-item {
  color: var(--mb-text-dim) !important;
  background: transparent !important;
}
html body .dropdown-item:hover,
html body .dropdown-item:focus,
html body .dropdown-item.active {
  background: var(--mb-bg-elevated) !important;
  color: var(--mb-text) !important;
}
html body .dropdown-divider {
  border-color: var(--mb-border) !important;
}

/* --- Moodle alerts / notices ----------------------------------- */
html body .alert,
html body div.alert {
  background: var(--mb-bg-elevated) !important;
  border: 1px solid var(--mb-border-bright) !important;
  color: var(--mb-text) !important;
  border-radius: var(--mb-radius-md) !important;
  padding: 12px 16px !important;
}
html body .alert-success { border-color: rgba(0, 255, 136, 0.4) !important; }
html body .alert-info    { border-color: rgba(44, 124, 255, 0.4) !important; }
html body .alert-warning { border-color: rgba(255, 179, 71, 0.4) !important; }
html body .alert-danger  { border-color: rgba(255, 107, 107, 0.4) !important; }

/* --- Moodle modals (Bootstrap `.modal`) ------------------------ */
html body .modal-dialog .modal-content,
html body .modal-content {
  background: var(--mb-bg-2) !important;
  border: 1px solid rgba(44, 124, 255, 0.35) !important;
  border-radius: var(--mb-radius-lg) !important;
  color: var(--mb-text) !important;
  box-shadow:
    0 0 0 1px var(--mb-border-bright),
    0 32px 80px rgba(0, 0, 0, 0.7),
    0 0 60px rgba(44, 124, 255, 0.15) !important;
}
html body .modal-header,
html body .modal-content .modal-header {
  background: var(--mb-bg-3) !important;
  border-bottom: 1px solid var(--mb-border) !important;
  color: var(--mb-text) !important;
}
html body .modal-footer,
html body .modal-content .modal-footer {
  background: var(--mb-bg-3) !important;
  border-top: 1px solid var(--mb-border) !important;
}
html body .modal-backdrop {
  background: rgba(0, 0, 0, 0.65) !important;
}
html body .modal-title {
  color: var(--mb-text) !important;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif !important;
}

/* --- Moodle tables (Bootstrap `.table`) ------------------------ */
html body .generaltable,
html body table.generaltable,
html body .table {
  background: transparent !important;
  color: var(--mb-text) !important;
  border-color: var(--mb-border) !important;
}
html body .generaltable thead th,
html body .generaltable th,
html body table.generaltable th,
html body .table thead th {
  background: var(--mb-bg-2) !important;
  color: var(--mb-text-dim) !important;
  border-color: var(--mb-border) !important;
}
html body .generaltable tbody td,
html body .generaltable td,
html body .table tbody td,
html body .table td {
  background: transparent !important;
  color: var(--mb-text) !important;
  border-color: var(--mb-border) !important;
}
html body .table-striped tbody tr:nth-of-type(odd),
html body .generaltable tbody tr:nth-child(odd) {
  background: var(--mb-bg-3) !important;
}
html body .table-striped tbody tr:nth-of-type(odd) td,
html body .generaltable tbody tr:nth-child(odd) td {
  background: var(--mb-bg-3) !important;
}

/* Bootstrap-5 tables: `.table` uses CSS variables that drive
 * per-cell background-color via the `--bs-table-bg-type` chain.
 * The variables `--bs-table-striped-bg` / `--bs-table-hover-bg`
 * / `--bs-table-bg` / `--bs-table-color` carry `!important`
 * indirectly through Bootstrap's own `.table` selector — overriding
 * the row bg directly loses the specificity fight.  Clamp the
 * variables on `.table` scope so the chain resolves to Mobieus
 * dark tokens instead of Bootstrap's #fff defaults.
 *
 * Coverage extended to `.generaltable.generalbox` (Moodle's
 * participant list class chain) + `#participants` (the specific
 * participants table id) for belt-and-braces. */
html body .table,
html body .table-striped,
html body .table-hover,
html body table.generaltable,
html body table.generalbox,
html body table#participants,
html body .flexible.table {
  --bs-table-bg:          transparent !important;
  --bs-table-color:       var(--mb-text) !important;
  --bs-table-striped-bg:  rgba(255, 255, 255, 0.04) !important;
  --bs-table-striped-color: var(--mb-text) !important;
  --bs-table-hover-bg:    var(--mb-bg-elevated) !important;
  --bs-table-hover-color: var(--mb-text) !important;
  --bs-table-active-bg:   var(--mb-bg-elevated) !important;
  --bs-table-active-color:var(--mb-text) !important;
  --bs-table-border-color: var(--mb-border) !important;
  color: var(--mb-text) !important;
  border-color: var(--mb-border) !important;
}
html body .table > tbody > tr > *,
html body .table > thead > tr > *,
html body table.generaltable > tbody > tr > *,
html body table#participants > tbody > tr > * {
  color: var(--mb-text) !important;
  border-color: var(--mb-border) !important;
}

/* Bootstrap 5.3 paints rows with `box-shadow: inset 0 0 0 9999px
 * var(--bs-table-bg-state, var(--bs-table-bg-type,
 * var(--bs-table-accent-bg)))` — clamping `--bs-table-bg` alone
 * leaves the inset shadow painting whatever Adaptable resolved.
 * Suppress the shadow on every cell, then re-paint via plain
 * `background-color` at row scope (state + striped + base) so the
 * cascade is one-step and predictable. Covers `<th scope="row">`
 * cells (first column of participants table) by hitting `> *`
 * inside both `tbody` and `tr`. */
html body .table > :not(caption) > * > *,
html body table.generaltable > :not(caption) > * > *,
html body table.generalbox > :not(caption) > * > *,
html body table#participants > :not(caption) > * > *,
html body .flexible.table > :not(caption) > * > * {
  box-shadow: none !important;
  background-color: transparent !important;
  background-image: none !important;
}
html body .table > tbody > tr,
html body table.generaltable > tbody > tr,
html body table#participants > tbody > tr {
  background-color: transparent !important;
  background-image: none !important;
}
html body .table-striped > tbody > tr:nth-of-type(odd),
html body .table-striped > tbody > tr:nth-of-type(odd) > *,
html body table.generaltable > tbody > tr:nth-child(odd),
html body table.generaltable > tbody > tr:nth-child(odd) > *,
html body table#participants > tbody > tr:nth-child(odd),
html body table#participants > tbody > tr:nth-child(odd) > * {
  background-color: rgba(255, 255, 255, 0.025) !important;
  background-image: none !important;
  color: var(--mb-text) !important;
}
html body .table-hover > tbody > tr:hover,
html body .table-hover > tbody > tr:hover > *,
html body table.generaltable > tbody > tr:hover,
html body table.generaltable > tbody > tr:hover > *,
html body table#participants > tbody > tr:hover,
html body table#participants > tbody > tr:hover > * {
  background-color: var(--mb-bg-elevated) !important;
  background-image: none !important;
  color: var(--mb-text) !important;
}
html body .userlist,
html body .userlist .no-overflow,
html body .table-dynamic,
html body div[data-region="core_table/dynamic"] {
  background-color: transparent !important;
  background-image: none !important;
}
/* Inplace-editable role-assignment cells use `.quickeditlink.
 * aalink` for the pencil-edit links.  Bump to brand-blue-bright
 * so the "No roles" text reads on both striped and unstriped
 * rows. */
html body .inplaceeditable a.quickeditlink,
html body .inplaceeditable .aalink,
html body table#participants .inplaceeditable a {
  color: var(--mb-blue-bright) !important;
}
/* User-initials avatar circles inside table cells default to
 * Bootstrap's bg-secondary — force dark elevated. */
html body table .userinitials,
html body table#participants .userinitials {
  background-color: var(--mb-bg-elevated) !important;
  color: var(--mb-text) !important;
}

/* --- Moodle breadcrumbs (.breadcrumb) -------------------------- */
html body .breadcrumb,
html body ol.breadcrumb,
html body nav.breadcrumb-nav {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--mb-text-dim) !important;
  padding: 8px 0 !important;
}
html body .breadcrumb a,
html body .breadcrumb-item a {
  color: var(--mb-blue-bright) !important;
}
html body .breadcrumb-item.active,
html body .breadcrumb-item.active a {
  color: var(--mb-text) !important;
}

/* --- mobieusLearn site title text ------------------------------ *
 * Patrick 2026-05-21: with the navbar logo now rendering as an
 * image, the duplicate `<h1><span id="sitetitle">mobieusLearn
 * </span></h1>` text below the logo is redundant.  Adaptable's
 * "default" sitetitle mode renders BOTH the logo image AND the
 * sitename text; setting a different value (e.g. "none") also
 * hides the logo, so the cleanest fix is to leave the config at
 * "default" and CSS-hide the text element. */
html body #headertitle,
html body #headertitle h1,
html body #sitetitle,
html body h1#sitetitle,
html body .navbar h1 #sitetitle {
  display: none !important;
}

/* --- Force Moodle Bootstrap CSS variables to Mobieus values ---- *
 * Adaptable compiles `theme_adaptable.primarycolour` (teal-700 by
 * default) into Bootstrap's `--primary` + `--bs-primary` root
 * variables which then drive every surface using Bootstrap
 * primary/success/info/warning/danger classes — header band, btn-
 * primary, link accent, badges, alerts.  Pinning the Adaptable
 * source is necessary; this :root override is belt-and-braces in
 * case a recompile lags or a tenant has a stale theme cache.
 *
 * Maximum specificity: html body + :root override so it wins
 * against the compiled theme/styles.php and against the body
 * baseline that Bootstrap's reset puts on the `body` element. */
:root,
html,
html body {
  --blue: #2C7CFF !important;
  --indigo: #4D90FF !important;
  --purple: #7B3FE4 !important;
  --pink: #FF6B6B !important;
  --red: #FF6B6B !important;
  --orange: #FFB347 !important;
  --yellow: #FFB347 !important;
  --green: #00FF88 !important;
  --teal: #2C7CFF !important;          /* override teal → blue */
  --cyan: #2C7CFF !important;          /* override cyan → blue */
  --white: #161B36 !important;          /* CSS var "white" → dark */
  --gray: #6B7390 !important;
  --gray-dark: #161B36 !important;

  --primary: #2C7CFF !important;
  --secondary: #7B3FE4 !important;
  --success: #00FF88 !important;
  --info: #2C7CFF !important;
  --warning: #FFB347 !important;
  --danger: #FF6B6B !important;
  --light: #0E1228 !important;          /* CSS var "light" → dark */
  --dark: #161B36 !important;

  --bs-primary: #2C7CFF !important;
  --bs-primary-rgb: 44, 124, 255 !important;
  --bs-secondary: #7B3FE4 !important;
  --bs-secondary-rgb: 123, 63, 228 !important;
  --bs-success: #00FF88 !important;
  --bs-info: #2C7CFF !important;
  --bs-warning: #FFB347 !important;
  --bs-danger: #FF6B6B !important;
  --bs-light: #0E1228 !important;
  --bs-light-rgb: 14, 18, 40 !important;
  --bs-dark: #161B36 !important;
  --bs-white: #161B36 !important;
  --bs-white-rgb: 22, 27, 54 !important;
  --bs-body-bg: #07091A !important;
  --bs-body-bg-rgb: 7, 9, 26 !important;
  --bs-body-color: #F4F6FB !important;
  --bs-card-bg: #0E1228 !important;
  --bs-card-color: #F4F6FB !important;
}

/* Inner empty Moodle card/block bodies — force transparent so the
 * card's own dark bg shows through.  Bootstrap's `.card-body`
 * default `background-color: rgba(0,0,0,0)` would normally do
 * this, but Adaptable's compiled CSS overrides it with #fff on
 * some surfaces. */
html body .card-body,
html body .block .card-body,
html body .block-content,
html body .block .content,
html body main#region-main,
html body #region-main-box,
html body #page,
html body #page-content {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--mb-text) !important;
}

/* ░░░░ NUCLEAR: every Moodle block-region / drop-target /     ░░░░
 *      empty-region placeholder + the literal #block-region-
 *      side-post.  Patrick 2026-05-21: inspected the white panel
 *      directly and reported it's `#block-region-side-post`
 *      (the right-column aside).  Belt-and-braces every selector
 *      that could match this element + force the aside DEFAULT
 *      bg (transparent per HTML spec) since Adaptable's compiled
 *      `--bs-card-bg` may inherit through aside elements on some
 *      pages. */
html body aside#block-region-side-post,
html body aside#block-region-side-pre,
html body aside#block-region-content,
html body aside.block-region,
html body aside[data-blockregion],
html body aside[data-droptarget],
html body section[aria-label="Blocks"],
html body section[aria-label="Blocks"] > aside,
/* Patrick 2026-05-21: the actual white wrapper turned out to be
 * Adaptable's drawer chrome `#theme_adaptable-drawers-*` +
 * `.drag-container` + `.adaptable-block-area`, not the aside
 * itself.  Add these to the transparent set. */
html body #theme_adaptable-drawers-sidepost,
html body #theme_adaptable-drawers-primary,
html body div.drawer,
html body div.drawer.drawer-right,
html body div.drawer.drawer-left,
html body .drawercontent,
html body .drag-container,
html body .adaptable-block-area,
html body .hidden-blocks,
html body section[aria-label="Blocks"],
html body [data-blockregion],
html body .block-region,
html body .empty-region,
html body .empty-region-side-pre,
html body .empty-region-side-post,
html body .empty-region-content,
html body [id^="block-region-"],
html body [class*="region-side-"],
html body .drop-target,
html body .adaptable-block-region,
html body .moodle-has-zindex.drop-target,
html body section[data-region],
html body aside[data-region],
html body div[data-region],
html body .my-courses-region,
html body #block-region-side-pre,
html body #block-region-side-post,
html body #block-region-content,
/* Patrick 2026-05-21: additional concrete white surfaces flagged
 * across Moodle's front-page / main-container / admin shells. */
html body #frontpage-available-course-list,
html body #frontpage-available-course-list > div,
html body #frontpage-available-course-list > div > div,
html body #maincontainer,
html body #maincontainer > div,
html body #maincontainer > div.hidden-blocks,
html body #maincontainer > div.hidden-blocks > div,
html body #admin-newsitems,
html body #admin-newsitems > div,
html body #frontpage-category-names,
html body #frontpage-category-combo,
html body #frontpage-course-list,
html body #site-newsitems,
html body .coursebox,
html body .coursebox > .info,
html body .coursebox > .content,
html body .frontpage-category-names,
html body .hidden-blocks,
html body .hidden-blocks > div {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}
/* Belt-and-braces #3: also clamp `--bs-card-bg` etc. ON the
 * aside itself, in case Bootstrap is using it via inheritance. */
html body aside#block-region-side-post,
html body aside.block-region,
html body aside[data-blockregion] {
  --bs-card-bg: transparent !important;
  --bs-body-bg: transparent !important;
  --bs-light: transparent !important;
  --bs-white: transparent !important;
}
/* Drop-target zones SHOWN during block dragging — keep a visible
 * outline so users know where the target is, but no fill. */
html body .drop-target,
html body [data-drop-target] {
  border: 1px dashed var(--mb-blue-bright) !important;
  background: rgba(44, 124, 255, 0.05) !important;
}
/* Region labels in edit mode ("Right", "Left", "Content") —
 * dim text, no bg.  Adaptable shows these as light-grey on
 * white in edit mode; force them onto the dark theme.
 * Patrick 2026-05-21: also hide the `.block-region-title <p>`
 * that Adaptable adds above each region (the literal "Right" /
 * "Content" / "Hidden" labels) — they serve no user purpose. */
html body .region-label,
html body .block-region > .region-content + label,
html body .block-region::before,
html body [data-blockregion]::before {
  color: var(--mb-text-muted) !important;
  background: transparent !important;
}
html body p.block-region-title,
html body .adaptable-block-area > p.block-region-title {
  display: none !important;
}

/* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ *
 * FINAL NUCLEAR PASS — Bootstrap panel/card surfaces + utility
 * classes that paint elements white.  After multiple rounds of
 * targeted overrides Patrick is still seeing white; the rendered
 * HTML shows Bootstrap `.panel-default.coursebox` + `.list-group-
 * item` + `.bg-white` utility classes still in active use.
 * Those are the remaining culprits.  Highest-specificity override
 * on every Bootstrap surface that defaults to white.            */
html body .panel,
html body .panel-default,
html body .panel-body,
html body .panel-heading,
html body .panel-footer,
html body .panel.coursebox,
html body .coursebox,
html body .coursebox .info,
html body .coursebox .content,
html body .coursebox > .cimbox,
html body .list-group,
html body .list-group-item,
html body .list-group-item-action,
html body .list-group-flush > .list-group-item,
html body .bg-white,
html body .bg-light,
html body .bg-secondary,
html body .bg-messageheader,
html body .card,
html body .card-body,
html body .card-header,
html body .card-footer,
html body .card.rounded-0,
html body .section.card,
html body .frontpage-course-list-all .panel,
html body .frontpage-course-list-all .coursebox,
html body .frontpage-course-list-enrolled .coursebox,
html body .frontpage-course-list-cat .coursebox,
html body .courses .coursebox {
  background: transparent !important;
  background-color: transparent !important;
}
/* Bootstrap CSS variables that drive white via inheritance.
 * Already set globally; reasserted here on .card scope so any
 * nested .card-body / .panel-body inherits dark. */
html body .panel,
html body .panel-default,
html body .card,
html body .coursebox,
html body .list-group {
  --bs-card-bg: transparent !important;
  --bs-body-bg: transparent !important;
  --bs-light: transparent !important;
  --bs-white: transparent !important;
}
/* Course card: give it a subtle dark surface card border so the
 * card is still visually distinct (transparent + transparent
 * would make the course title float without a frame). */
html body .coursebox,
html body .frontpage-course-list-all .coursebox,
html body .courses .coursebox {
  background: var(--mb-bg-3) !important;
  background-color: var(--mb-bg-3) !important;
  border: 1px solid var(--mb-border) !important;
  border-radius: var(--mb-radius-md) !important;
  padding: 12px !important;
  margin-bottom: 16px;
}
/* Course-card .cimbox is the thumbnail with the course logo
 * image.  Keep the image; force the surrounding bg to dark so
 * white-margin logos don't bleed. */
html body .coursebox .cimbox {
  background-color: var(--mb-bg-2) !important;
  border-radius: var(--mb-radius-md);
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
/* Messaging-drawer Bootstrap surfaces — they use lots of
 * `.bg-white`, `.bg-light`, `.bg-secondary` placeholder
 * backgrounds for the loading skeletons.  Force all dark. */
html body .message-app .bg-white,
html body .message-app .bg-light,
html body .message-app .bg-secondary {
  background: var(--mb-bg-3) !important;
  background-color: var(--mb-bg-3) !important;
}
/* Pulse-grey loading placeholders (skeletons that pulse) —
 * keep the pulse animation but tint to dark elevated. */
html body .bg-pulse-grey {
  background-color: var(--mb-bg-elevated) !important;
}

/* 2026-05-21 — Mobieus-owned class injected by sub_filter to
 * replace Bootstrap's bg-white / bg-light / bg-secondary
 * utility classes (those carry `!important` from Bootstrap
 * core CSS and we can't always beat them via cascade).  Renaming
 * the class via sub_filter sidesteps the specificity fight
 * entirely — Bootstrap's selector never matches. */
html body .mob-dark-surface,
.mob-dark-surface {
  background: transparent !important;
  background-color: transparent !important;
}

/* --- Moodle editing-mode button row ---------------------------- *
 * Patrick 2026-05-21: the "Reset page to default" + "Stop
 * customising this page" buttons rendered top-right by default;
 * he wants them centred for visibility.  Adaptable wraps them in
 * `.page-header-headings` + `.btn-toolbar.editmode` or similar.
 * Target the toolbar wrapper specifically — these buttons only
 * appear in edit mode so the rule is dormant otherwise. */
html body .editmode-switch-form,
html body .block-controls,
html body .page-header .btn-toolbar,
html body #region-main .page-header-headings + div:has(> .btn),
html body .resetbutton + .singlebutton {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px;
  margin: 16px auto !important;
  width: 100%;
}
html body form.editmode-switch-form {
  text-align: center !important;
}

/* --- Moodle footer (.footer-section / .footer-content) -------- */
html body footer,
html body .footer-section,
html body .footer-content,
html body #page-footer,
html body .site-footer {
  background: var(--mb-bg-2) !important;
  color: var(--mb-text-muted) !important;
  border-top: 1px solid var(--mb-border) !important;
}
html body footer a,
html body .footer-section a,
html body #page-footer a {
  color: var(--mb-text-dim) !important;
}
html body footer a:hover {
  color: var(--mb-blue-bright) !important;
}

/* ════════════════════════════════════════════════════════════════
 * ADMIN SCP overrides (osTicket /scp/* surface)
 * ════════════════════════════════════════════════════════════════
 *
 * osTicket's admin SCP loads /scp/css/scp.css which ships its own
 * id-only/class-only selectors with light backgrounds and dark
 * text — the rebrand has to neutralise every one of them.  Rules
 * scoped via `html body` for specificity, with `!important` only
 * where the upstream rule itself uses `!important` or where a
 * shorthand wins by source order.
 *
 * Admin pages crawled to enumerate selectors: index.php (queue
 * dashboard), settings.php?t=*, helptopics.php, forms.php,
 * lists.php, templates.php, emails.php, banlist.php, staff.php,
 * roles.php, teams.php, apikeys.php, logs.php, users.php,
 * orgs.php, tickets.php.  If you add a new admin page that
 * shows light-themed surfaces, extend this block — don't fork.
 */

/* --- Admin top welcome bar (#info) ------------------------------
 * "Welcome, <name>. | Agent Panel | Profile | Log Out" — upstream
 * scp.css `#header p { background:#eee; border:1px solid #ccc }`
 * paints a bright bordered pill around the welcome text.  The
 * <p id="info"> matches `#header p` so the full rule applies.
 * Reset everything; `#header p` covers all <p> children in the
 * admin header (the layout has one). */
html body #header p,
html body #header #info,
html body #info {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  color: var(--mb-text-dim) !important;
  font-size: 13px !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  max-width: none !important;
  box-shadow: none !important;
}
html body #header #info a {
  color: var(--mb-text-dim) !important;
  text-decoration: none !important;
}
html body #header #info a:hover {
  color: var(--mb-text) !important;
}
html body #header #info strong {
  color: var(--mb-text) !important;
}

/* --- Admin primary nav (#nav, top-row tabs) ---------------------
 * Dashboard / Users / Tasks / Tickets / Knowledgebase row.
 * Each <li> has class "active" or "inactive".  Drop the upstream
 * tab graphics and use brand colors. */
html body #pjax-container > #nav {
  background: var(--mb-bg-3) !important;
  border-top: 1px solid var(--mb-border) !important;
  border-bottom: 1px solid var(--mb-border) !important;
  padding: 0 12px !important;
  margin: 0 !important;
  list-style: none !important;
  display: flex !important;
  gap: 4px;
}
html body #pjax-container > #nav > li,
html body #pjax-container > #nav > li.active,
html body #pjax-container > #nav > li.inactive,
html body #pjax-container > #nav > li.inactive:hover,
html body #pjax-container > #nav > li:hover {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  position: relative;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
html body #pjax-container > #nav > li > a {
  display: inline-block !important;
  padding: 12px 18px !important;
  color: var(--mb-text-dim) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  border-bottom: 2px solid transparent !important;
  transition: color 0.15s, border-color 0.15s;
}
html body #pjax-container > #nav > li.active > a {
  color: var(--mb-text) !important;
  border-bottom: 2px solid var(--mb-blue) !important;
  background: transparent !important;
}
html body #pjax-container > #nav > li:hover > a {
  color: var(--mb-text) !important;
  background: transparent !important;
}
/* Submenu drops (Dashboard > Agent Directory etc.) — z-index
 * matches upstream's `#nav > ul` value of 500 so the dropdown
 * cleanly covers the basic_search row + sticky page-actions
 * bar beneath it.  The previous z-index: 50 left the dropdown
 * showing _through_ the search input + sort dropdown chrome. */
html body #pjax-container > #nav > li > ul {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  background: var(--mb-bg-2) !important;
  border: 1px solid var(--mb-border) !important;
  border-radius: var(--mb-radius-md) !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  list-style: none !important;
  z-index: 500;
  min-width: 200px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
html body #pjax-container > #nav > li:hover > ul {
  display: block !important;
}
html body #pjax-container > #nav > li > ul > li {
  list-style: none !important;
  margin: 0 !important;
}
html body #pjax-container > #nav > li > ul > li > a {
  display: block !important;
  padding: 8px 16px !important;
  color: var(--mb-text-dim) !important;
  text-decoration: none !important;
  background: transparent !important;
}
html body #pjax-container > #nav > li > ul > li > a:hover {
  background: var(--mb-bg-elevated) !important;
  color: var(--mb-text) !important;
}

/* --- Admin sub-nav (#sub_nav, queue sidebar / filter row) ------- *
 * Upstream scp.css pins `#sub_nav { height: 26px }` — but the
 * action-row content (Open ▼ / My Tickets / Closed / Search /
 * New Ticket) is ~36 px tall once icons + padding are accounted
 * for, so the items overflow the 26-px container and bleed into
 * the `#basic_search` row immediately below.  Switch to flex
 * layout with `height: auto + min-height: 48px` so the container
 * grows to fit its children; `align-items: center` keeps the
 * pills vertically centred.  Plus an explicit margin-bottom so
 * the search row sits below the items, not behind them. */
html body #sub_nav,
html body #customQ_nav {
  background: var(--mb-bg-2) !important;
  border-bottom: 1px solid var(--mb-border) !important;
  padding: 6px 12px !important;
  height: auto !important;
  min-height: 48px;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 12px 0 !important;
}
html body #sub_nav .top-queue,
html body #sub_nav li.item {
  background: transparent !important;
  border: none !important;
}
html body #sub_nav .top-queue.active > a,
html body #sub_nav li.item.active > a {
  color: var(--mb-text) !important;
  background: var(--mb-bg-elevated) !important;
  border-radius: var(--mb-radius-md);
}
html body #sub_nav a {
  color: var(--mb-text-dim) !important;
}
html body .customQ-dropdown {
  background: var(--mb-bg-2) !important;
  border: 1px solid var(--mb-border) !important;
  border-radius: var(--mb-radius-md) !important;
  color: var(--mb-text) !important;
}
html body .customQ-dropdown a {
  color: var(--mb-text-dim) !important;
}

/* --- Page-title + content bar ---------------------------------- */
html body h2,
html body .page-title,
html body .subheader {
  color: var(--mb-text) !important;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif !important;
  letter-spacing: -0.01em;
}

/* --- Catch-all: any <table> not otherwise styled (user-side
 *     /open.php uses a class-less <table> for the ticket form). */
html body table:not(.form_table):not(.settings_table):not(.list) {
  background: transparent !important;
  color: var(--mb-text) !important;
  border-color: var(--mb-border) !important;
}
html body table:not(.form_table):not(.settings_table):not(.list) td,
html body table:not(.form_table):not(.settings_table):not(.list) th {
  background: transparent !important;
  color: var(--mb-text) !important;
  padding: 8px 10px !important;
  border-color: var(--mb-border) !important;
}

/* --- /scp/dashboard.php Statistics tables (.dashboard-stats) --- *
 * Used for the "by Help Topic / by Agent / by Department" tabs.
 * Upstream uses <tbody:nth-child(2)> as the data-rows discriminator
 * (first tbody is the header row with sortable column titles).
 *
 * Problem rules (scp.css):
 *   tbody:nth-child(2) tr:nth-child(odd) { background: #f0faff }
 *   tbody:nth-child(2) th { color: #999 }              ← Patrick
 *   tbody:nth-child(2) tr:hover { background: #FFFFDD }
 *
 * The grey #999 first-column label ("General Inquiry") on the
 * dark surface was the specific low-contrast complaint. */
html body table.dashboard-stats {
  border-bottom: 1px solid var(--mb-border) !important;
}
html body table.dashboard-stats tbody:first-child th {
  border-bottom: 1px dashed var(--mb-border) !important;
  color: var(--mb-text-dim) !important;
}
html body table.dashboard-stats tbody:nth-child(2) tr {
  background-color: var(--mb-bg-3) !important;
}
html body table.dashboard-stats tbody:nth-child(2) tr:nth-child(odd) {
  background-color: var(--mb-bg-2) !important;
}
html body table.dashboard-stats tbody:nth-child(2) th {
  color: var(--mb-text) !important;
  border-right: 1px solid var(--mb-border) !important;
  background: transparent !important;
  font-weight: 500;
}
html body table.dashboard-stats tbody:nth-child(2) td {
  color: var(--mb-text) !important;
  border-right: 1px solid var(--mb-border) !important;
  background: transparent !important;
}
html body table.dashboard-stats tbody:nth-child(2) tr:hover {
  background-color: var(--mb-bg-elevated) !important;
}
html body table.dashboard-stats tbody:nth-child(2) tr:hover th {
  color: var(--mb-text) !important;
}

/* --- Data tables (table.list) — admin lists --------------------- *
 * Upstream scp.css rules to clobber:
 *   table.list                { background:#ccc; border-bottom:1px solid #ccc }
 *   table.list caption        { background:#929292; color:#fff }
 *   table.list thead th       { background:#eee; color:#000 }
 *   table.list thead th a.asc { background:url(asc.gif) #cfe6ff }  ← cyan ascending
 *   table.list thead th a.desc{ background:url(desc.gif) #cfe6ff } ← cyan descending
 *   table.list tbody td       { background:#fff }
 *   tbody tr:nth-child(odd) td{ background:#f0faff }
 *   tbody tr:hover td         { background:#FFFFDD }
 *   tbody tr.highlight td     { background:#FFFFDD }
 * Several use `td { background:#fff }` etc. which a generic
 * `table.list td` selector matches at the same specificity but
 * later-in-source wins; for `thead th { background:#eee }` the
 * cyan-on-sort variant is even MORE specific so it needs an
 * explicit override. */
html body table.list,
html body table.table {
  background: transparent !important;
  border: 1px solid var(--mb-border) !important;
  border-collapse: separate !important;
  border-spacing: 0;
  border-radius: var(--mb-radius-md);
  overflow: hidden;
  margin: 8px 0 !important;
}
html body table.list caption {
  background: var(--mb-bg-3) !important;
  color: var(--mb-text) !important;
  padding: 12px 14px !important;
  text-align: left;
}
html body table.list thead th,
html body table.list thead tr th,
html body table.list th {
  background: var(--mb-bg-2) !important;
  background-color: var(--mb-bg-2) !important;
  color: var(--mb-text-dim) !important;
  border-bottom: 1px solid var(--mb-border) !important;
  padding: 10px 12px !important;
  font-weight: 600;
}
html body table.list thead th a,
html body table.list thead th a.asc,
html body table.list thead th a.desc {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--mb-text-dim) !important;
}
html body table.list tbody td {
  background: var(--mb-bg-3) !important;
  color: var(--mb-text) !important;
  border-bottom: 1px solid var(--mb-border) !important;
  padding: 10px 12px !important;
}
html body table.list tbody tr:nth-child(2n+1) td {
  background: var(--mb-bg-2) !important;
}
html body table.list tbody tr:hover td,
html body table.list tbody tr.highlight td,
html body table.list tbody tr:nth-child(2n+1):hover td {
  background: var(--mb-bg-elevated) !important;
}
html body table.list tbody td a {
  color: var(--mb-blue-bright) !important;
}
html body table.list tfoot td {
  background: var(--mb-bg-2) !important;
  color: var(--mb-text-dim) !important;
  padding: 10px 12px !important;
}

/* --- Dialogs / modals (.dialog, .popup-dialog) ------------------ *
 * Patrick 2026-05-21: the New Task modal "needs a CSS wrapper" —
 * the previous bg matched the overlay too closely, so the modal
 * read as floating content rather than a distinct card.  Lifted
 * the bg to a lighter elevated surface, beefed the border with a
 * brand-blue glow, and added a stronger drop-shadow + min-width
 * so the modal always reads as a clearly-bounded card.  Padding
 * applied here so the drag-handle title bar fills the top edge
 * (the .drag-handle rule uses negative margins to reach into
 * that padding zone). */
html body .dialog,
html body .popup-dialog,
html body #overlay + .dialog {
  background: var(--mb-bg-2) !important;
  border: 1px solid rgba(44, 124, 255, 0.35) !important;
  border-radius: var(--mb-radius-lg) !important;
  color: var(--mb-text) !important;
  box-shadow:
    0 0 0 1px var(--mb-border-bright),
    0 32px 80px rgba(0, 0, 0, 0.7),
    0 0 60px rgba(44, 124, 255, 0.15) !important;
  padding: 18px !important;
  min-width: 360px;
  /* NO `position: relative` here — osTicket's modal JS sets
   * `position: absolute/fixed` + inline top/left to center the
   * dialog over the viewport.  A `position: relative` rule (even
   * without !important) participates in the cascade and beat the
   * JS-applied inline style on some dialog types, leaving the
   * "Lookup a user" sub-modal rendering in-flow at the bottom of
   * the page rather than overlaying.  The close-button position
   * is now keyed off `.drag-handle` (which we control) below. */
}
/* Overlay behind the modal — dim the page content for better
 * contrast against the modal card.  osTicket uses #overlay as
 * the scrim element. */
html body #overlay {
  background: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: blur(2px);
}
html body .dialog *,
html body .popup-dialog * {
  color: inherit;
}
html body .dialog h3,
html body .dialog th {
  color: var(--mb-text) !important;
  border-bottom: 1px solid var(--mb-border) !important;
}
html body .dialog hr {
  border-color: var(--mb-border) !important;
}
/* Modal close button (top-right ×) */
html body .dialog a.close,
html body .dialog .close,
html body .dialog button.close {
  color: var(--mb-text-dim) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
html body .dialog a.close:hover {
  color: var(--mb-text) !important;
}
/* Form fields inside dialogs (upstream forces #fff bg).  Already
 * covered by the global form-field rule, but `.dialog fieldset`
 * has a higher-specificity upstream rule we need to beat. */
html body .dialog fieldset input:not([type=checkbox]):not([type=radio]),
html body .dialog textarea,
html body .dialog select {
  background-color: var(--mb-bg-elevated) !important;
  color: var(--mb-text) !important;
  border: 1px solid var(--mb-border-bright) !important;
  border-radius: var(--mb-radius-md) !important;
  padding: 10px 14px !important;
}
/* Dialog buttons row — secondary buttons (Reset / Cancel) need
 * a visible subtle treatment, not pure transparent. */
html body .dialog button:not([type="submit"]):not(.button.green):not(.btn-primary),
html body .dialog .button:not(.green):not(.btn-primary):not([type="submit"]),
html body .dialog a.cancel,
html body .dialog button.cancel,
html body .dialog button.reset {
  background: var(--mb-bg-elevated) !important;
  color: var(--mb-text) !important;
  border: 1px solid var(--mb-border-bright) !important;
  border-radius: var(--mb-radius-md) !important;
  padding: 8px 18px !important;
  box-shadow: none !important;
}

/* --- Dynamic form tables (`table.grid.form`) inside modals ----- *
 * osTicket renders the New Task / New Ticket / canned-form modals
 * with `<table class="grid form">` and `<fieldset class="field">`
 * inside each cell.  Untouched by the generic `table.list` /
 * `table.form_table` rules.  Style for dark-theme parity. */
html body table.grid,
html body table.grid.form,
html body .dialog table.grid,
html body .dialog table.grid.form {
  background: transparent !important;
  border: none !important;
  width: 100% !important;
}
html body table.grid caption,
html body .dialog table.grid caption {
  background: transparent !important;
  color: var(--mb-text-dim) !important;
  text-align: left !important;
  padding: 0 0 12px 0 !important;
}
html body table.grid td.cell,
html body table.grid td,
html body .dialog table.grid td {
  background: transparent !important;
  border: none !important;
  padding: 6px !important;
  vertical-align: top;
  color: var(--mb-text) !important;
}
html body fieldset.field {
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
html body fieldset.field > label,
html body fieldset.field label {
  display: block !important;
  margin-bottom: 6px !important;
  color: var(--mb-text-dim) !important;
  font-weight: 500;
}
html body fieldset.field label.required {
  color: var(--mb-text-dim) !important;
}
html body fieldset.field > input,
html body fieldset.field > select,
html body fieldset.field > textarea {
  width: 100% !important;
  max-width: 100% !important;
}
/* Modal dialog drag-handle (the `h3.drag-handle` title bar) */
html body .dialog h3.drag-handle,
html body .dialog .drag-handle {
  background: var(--mb-bg-3) !important;
  color: var(--mb-text) !important;
  padding: 14px 18px !important;
  margin: -18px -18px 16px -18px !important;
  border-top-left-radius: var(--mb-radius-lg) !important;
  border-top-right-radius: var(--mb-radius-lg) !important;
  border-bottom: 1px solid var(--mb-border) !important;
  cursor: move;
  position: relative;
}
html body .dialog .drag-handle:hover {
  background: var(--mb-bg-elevated) !important;
}
/* Modal close button (top-right ×) — anchor it inside the
 * drag-handle band.  The previous rule keyed off `.dialog` being
 * `position: relative`, but we removed that so the JS-applied
 * absolute centering wouldn't get blocked.  Now we lay the
 * close button absolutely inside the (newly-positioned)
 * drag-handle band, which gives the same visual result without
 * fighting the dialog's positioning. */
html body .dialog .drag-handle > b > a.close,
html body .dialog .drag-handle a.close {
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  z-index: 2;
}
/* Fallback: if the .close button is a sibling of .drag-handle
 * rather than inside it (some dialog variants), still hang it
 * top-right of the dialog box.  Uses the parent <b> wrapper which
 * is always present per the New Task DOM. */
html body .dialog > b:has(> a.close) {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
}

/* --- Redactor rich-text editor (.redactor-box, .redactor-in) --- *
 * Used inside modals (template editor) + inline reply forms.
 * Upstream Redactor ships a white-on-light theme.  Force a dark
 * editor surface so the body text Patrick is composing reads
 * against the rest of the dialog. */
html body .redactor-box,
html body .redactor-box textarea {
  background: var(--mb-bg-3) !important;
  border: 1px solid var(--mb-border-bright) !important;
  border-radius: var(--mb-radius-md) !important;
  overflow: hidden;
}
html body .redactor-in,
html body .redactor-in *:not(a):not(.dropdown-menu) {
  background-color: transparent !important;
  color: var(--mb-text) !important;
}
html body .redactor-in a {
  color: var(--mb-blue-bright) !important;
}
html body .redactor-toolbar,
html body .redactor-air {
  background: var(--mb-bg-2) !important;
  border-bottom: 1px solid var(--mb-border) !important;
}
html body .redactor-toolbar a,
html body .redactor-air a {
  color: var(--mb-text-dim) !important;
}
html body .redactor-toolbar a:hover,
html body .redactor-air a:hover {
  background: var(--mb-blue) !important;
  color: #fff !important;
}
html body .redactor-toolbar a.redactor-button-active {
  background: var(--mb-bg-elevated) !important;
  color: var(--mb-text) !important;
}
/* The Redactor "source" textarea (visible when toggled to HTML
 * view) — keep the form-field treatment. */
html body .redactor-source {
  background: var(--mb-bg-3) !important;
  color: var(--mb-text) !important;
  border: none !important;
  font-family: 'JetBrains Mono', 'SFMono-Regular', monospace !important;
  font-size: 13px !important;
}

/* --- Banners + tip boxes --------------------------------------- */
html body .notice_bar,
html body .warning_bar,
html body .error_bar,
html body .banner,
html body .tip,
html body .tip_box {
  background-color: var(--mb-bg-elevated) !important;
  background-image: none !important;
  border: 1px solid var(--mb-border-bright) !important;
  border-radius: var(--mb-radius-md) !important;
  color: var(--mb-text) !important;
  padding: 10px 14px 10px 40px !important;
  height: auto !important;
  min-height: 24px;
  line-height: 1.5 !important;
  margin: 0 0 12px 0 !important;
  position: relative;
}
html body .error_bar {
  border-color: rgba(255, 107, 107, 0.5) !important;
  background-color: rgba(255, 107, 107, 0.12) !important;
  color: #ffb3b3 !important;
}
html body .notice_bar {
  border-color: rgba(0, 255, 136, 0.4) !important;
  background-color: rgba(0, 255, 136, 0.10) !important;
  color: #a8ffd1 !important;
}
html body .warning_bar {
  border-color: rgba(255, 179, 71, 0.5) !important;
  background-color: rgba(255, 179, 71, 0.12) !important;
  color: #ffd9a8 !important;
}
/* Icon glyph via ::before since we killed the background-image. */
html body .error_bar::before,
html body .notice_bar::before,
html body .warning_bar::before {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'FontAwesome', sans-serif;
  font-size: 16px;
  line-height: 1;
}
html body .error_bar::before  { content: "\f06a"; color: #ff6b6b; }  /* warning-sign */
html body .notice_bar::before { content: "\f058"; color: #00ff88; }  /* check-circle */
html body .warning_bar::before{ content: "\f071"; color: #ffb347; }  /* exclamation-triangle */

/* Inline .error (red asterisk on required fields).  Upstream
 * theme.css: `.error { color: #f00 }` — bump to a softer red
 * that doesn't burn the eye on the dark theme. */
html body span.error,
html body .error {
  color: #ff8a8a !important;
}
html body .error input {
  border-color: #ff8a8a !important;
}

/* --- Tabs (.tabs) — used on settings forms --------------------- *
 * Upstream scp.css rules:
 *   ul.tabs { background:#eef3f8; border-bottom:1px solid #aaa }
 *   ul.tabs li.active { background-color:#f9f9f9; border:1px solid
 *                       #aaa; border-top:2px solid #81a9d7 }
 *   ul.tabs li:not(.active) { box-shadow: inset 0 -5px 10px -9px
 *                             rgba(0,0,0,0.2) }
 * The .active rule paints a tall white button on the dark theme —
 * needs explicit override on the LI element itself, not just its
 * inner A.  Also kill the inactive box-shadow. */
html body ul.tabs,
html body .tabs {
  background: var(--mb-bg-2) !important;
  border-bottom: 1px solid var(--mb-border) !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 16px 0 !important;
  height: auto !important;
}
html body ul.tabs li,
html body .tabs li,
html body ul.tabs li.active,
html body ul.tabs li:not(.active) {
  list-style: none !important;
  display: inline-block !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  bottom: 0 !important;
  min-width: 0 !important;
}
html body .tabs a,
html body ul.tabs a {
  display: inline-block !important;
  padding: 10px 16px !important;
  color: var(--mb-text-dim) !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
}
html body ul.tabs li.active,
html body ul.tabs.clean li.active,
html body ul.tabs li.active > a,
html body ul.tabs.clean li.active > a,
html body .tabs li.active a,
html body .tabs a.active {
  color: var(--mb-text) !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: 2px solid var(--mb-blue) !important;
  box-shadow: none !important;
}
/* Inactive .clean tabs render a darker pill via box-shadow.
 * Force-flatten. */
html body ul.tabs.clean li,
html body ul.tabs.clean li:not(.active) {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* --- Action button + dropdown (.action-button, .action-dropdown) */
html body .action-button,
html body .button.action-button,
html body .queue-action button {
  background: var(--mb-bg-elevated) !important;
  border: 1px solid var(--mb-border-bright) !important;
  color: var(--mb-text) !important;
  border-radius: var(--mb-radius-md) !important;
  padding: 8px 14px !important;
  box-shadow: none !important;
}
html body .action-button:hover {
  background: var(--mb-bg-3) !important;
  border-color: var(--mb-blue-bright) !important;
}
html body .action-dropdown,
html body .noclick-dropdown,
html body .popup-dialog,
html body .personalQmenu,
html body .customQ-dropdown,
html body div[class*="dropdown"],
html body .anchor-left,
html body .anchor-right {
  background: var(--mb-bg-2) !important;
  border: 1px solid var(--mb-border-bright) !important;
  border-radius: var(--mb-radius-md) !important;
  color: var(--mb-text) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}
html body .action-dropdown a,
html body .action-dropdown li,
html body .noclick-dropdown a,
html body .noclick-dropdown li,
html body .personalQmenu a,
html body .customQ-dropdown a,
html body .customQ-dropdown li {
  color: var(--mb-text-dim) !important;
  background: transparent !important;
}
html body .action-dropdown li:hover,
html body .action-dropdown a:hover,
html body .noclick-dropdown li:hover,
html body .noclick-dropdown a:hover,
html body .personalQmenu:hover,
html body .customQ-dropdown li:hover,
html body .customQ-dropdown a:hover {
  background: var(--mb-bg-elevated) !important;
  color: var(--mb-text) !important;
}
html body .action-dropdown ul,
html body .noclick-dropdown ul {
  background: transparent !important;
  list-style: none !important;
  padding: 4px 0 !important;
  margin: 0 !important;
}
html body .action-dropdown li,
html body .noclick-dropdown li {
  list-style: none !important;
  padding: 0 !important;
}
html body .action-dropdown li a,
html body .noclick-dropdown li a {
  display: block !important;
  padding: 8px 14px !important;
  text-decoration: none !important;
}
html body .action-dropdown hr,
html body .noclick-dropdown hr,
html body .customQ-dropdown hr {
  border: none !important;
  border-top: 1px solid var(--mb-border) !important;
  margin: 4px 0 !important;
}

/* <select> open popups + <option> entries.  The popup chrome is
 * rendered by the OS/browser, so styling reach is limited — but
 * `color-scheme: dark` (set on html/body) tells the browser to
 * draw the popup in dark mode, and explicit option bg+color
 * covers the cases where the browser still renders against the
 * stylesheet rather than the system theme. */
html body select option,
html body select optgroup {
  background-color: var(--mb-bg-2) !important;
  color: var(--mb-text) !important;
}
html body select option:checked,
html body select option:hover {
  background-color: var(--mb-bg-elevated) !important;
  color: var(--mb-text) !important;
}

/* --- Search bars (basic-search, basic_search) ------------------ *
 * Upstream: `#basic_search { background-color:#f4f4f4 }` — light
 * grey strip below the page-actions bar.  Reset to transparent;
 * inner inputs get the standard dark form-field treatment. */
html body .basic-search,
html body .basic_search,
html body #basic_search,
html body .basic-org-search,
html body .basic-user-search {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  padding: 6px 0 !important;
  /* Upstream `#basic_search { margin: -10px 0 }` pulled the
   * search row UP under #sub_nav.  Explicit top margin pushes
   * it BELOW the sub_nav properly. */
  margin: 12px 0 12px 0 !important;
  box-shadow: none !important;
  clear: both;
}
html body .basic-search input,
html body .basic_search input,
html body #basic_search input[type="text"],
html body #basic_search input[type="search"] {
  min-width: 240px;
}

/* `.input.attached` is osTicket's compact search-bar wrapper —
 * a 24px-tall inline-block that visually glues `<input>` to a
 * trailing `<button>` (the search-icon "Go" button).  The
 * global form-field rule's 40px min-height + 10px×14px padding
 * blows out the 24px container, so the input renders huge and
 * mis-aligned with its sibling button.  Scope tighter sizing
 * for this specific shape — keep dark colours, lose the padding. */
html body .input.attached,
html body .input.attached input,
html body .input.attached .button.attached {
  height: 36px !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
  line-height: 36px !important;
}
/* Force the wrapper itself to use inline-flex so the input + button
 * baseline never drift relative to each other (default inline-block
 * + vertical-align can leave a 1-2px offset on the trailing
 * button vs the input). */
html body .input.attached {
  display: inline-flex !important;
  align-items: stretch !important;
}
/* The icon glyph inside the search button — center it vertically
 * regardless of the line-height the button inherits. */
html body .input.attached .button.attached i,
html body .input.attached button.attached i {
  line-height: 1 !important;
  vertical-align: middle !important;
}
html body .input.attached input[type="text"],
html body .input.attached input[type="search"],
html body .input.attached input.basic-search {
  background-color: var(--mb-bg-elevated) !important;
  color: var(--mb-text) !important;
  border: 1px solid var(--mb-border-bright) !important;
  border-right: none !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-top-left-radius: var(--mb-radius-md) !important;
  border-bottom-left-radius: var(--mb-radius-md) !important;
  padding: 0 12px !important;
  min-height: 0 !important;
  font-size: 14px !important;
}
html body .input.attached .button.attached,
html body .input.attached button.attached {
  background: var(--mb-grad) !important;
  border: 1px solid transparent !important;
  border-left: none !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: var(--mb-radius-md) !important;
  border-bottom-right-radius: var(--mb-radius-md) !important;
  color: #fff !important;
  padding: 0 14px !important;
  margin: 0 !important;
}

/* --- Help tips, labels, required markers ----------------------- */
html body .help-tip {
  background: transparent !important;
  color: var(--mb-text-muted) !important;
}
html body .required {
  color: #ff8a8a !important;
}
html body label,
html body .form-row label {
  color: var(--mb-text-dim) !important;
}

/* --- Form layouts (form_table, settings_table) ----------------- */
html body table.form_table,
html body table.settings_table {
  background: transparent !important;
}
html body table.form_table td,
html body table.form_table th,
html body table.settings_table td,
html body table.settings_table th {
  background: transparent !important;
  color: var(--mb-text) !important;
  border-color: var(--mb-border) !important;
  padding: 10px 12px !important;
  vertical-align: top;
}
html body table.form_table th,
html body table.settings_table th {
  color: var(--mb-text-dim) !important;
  font-weight: 500;
}

/* --- Date pickers (.dp) + jQuery UI calendars ------------------ */
html body input.dp {
  min-width: 140px;
}
html body .ui-datepicker,
html body .ui-widget {
  background: var(--mb-bg-2) !important;
  border: 1px solid var(--mb-border-bright) !important;
  color: var(--mb-text) !important;
}
html body .ui-datepicker-header {
  background: var(--mb-bg-3) !important;
  color: var(--mb-text) !important;
  border: none !important;
}
html body .ui-state-default,
html body .ui-widget-content .ui-state-default {
  background: var(--mb-bg-elevated) !important;
  border: 1px solid var(--mb-border) !important;
  color: var(--mb-text) !important;
}
html body .ui-state-hover,
html body .ui-widget-content .ui-state-hover {
  background: var(--mb-bg-3) !important;
  border-color: var(--mb-blue-bright) !important;
  color: var(--mb-text) !important;
}
html body .ui-state-active {
  background: var(--mb-grad) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* --- Sortable rows, draggable, faded states -------------------- */
html body .faded { color: var(--mb-text-dim) !important; opacity: 1 !important; }
html body .faded-more { color: var(--mb-text-muted) !important; }
html body .muted { color: var(--mb-text-muted) !important; }

/* --- /scp/settings.php?t=pages — hide the "Logos" tab ---------- *
 * The Logos tab uploads tenant-customisable logos for the help
 * page header.  Suite invariant #3 (logo applied at provision,
 * not left to tenant) means tenant admins shouldn't see this
 * tab — the Mobieus mark is served by nginx aliases on
 * /logo.php and /scp/logo.php, so any upload would be silently
 * shadowed.  Hide both the tab LI and its content panel. */
html body ul.tabs li:has(> a[href="#logos"]) {
  display: none !important;
}
html body div#logos.tab_content,
html body #logos.tab_content {
  display: none !important;
}

/* --- /scp/profile.php — hide local-auth rows (SSO-only) -------- *
 * Suite invariant #2 says SSO via Zitadel is the only login path;
 * the agent's local username / password / 2FA controls on the
 * "My Account Profile" page are dead UI.  Hide the three rows
 * Patrick called out (username, change password, 2FA configure)
 * plus the orphan "Authentication" section header.
 *
 * `:has()` lets us find the parent <tr> structurally without
 * touching the upstream template.  The header row is found via
 * `+` sibling — it's the TR that has a <th> and is immediately
 * followed by the username TR. */
html body tr:has(> td > input.staff-username),
html body tr:has(> td > #default2fa-selection),
html body tr:has(> td > select#default2fa-selection),
html body tr:has(> th):has(+ tr > td > input.staff-username) {
  display: none !important;
}

/* --- /profile.php (user-side) — hide Access Credentials -------- *
 * Same SSO-only rationale as /scp/profile.php.  User template
 * (include/client/profile.inc.php):
 *   <tr><td colspan=2><div><hr><h3>Access Credentials</h3></div></td></tr>
 *   <tr><td>Current Password</td><td><input name="cpasswd"></td></tr>  (skipped when reset-token in session)
 *   <tr><td>New Password</td>    <td><input name="passwd1"></td></tr>
 *   <tr><td>Confirm New Password</td><td><input name="passwd2"></td></tr>
 *
 * Hide all three (or four) input rows + the section header.  The
 * header row is identified as the TR immediately before either
 * cpasswd or passwd1 (whichever comes first). */
html body tr:has(> td > input[name="cpasswd"]),
html body tr:has(> td > input[name="passwd1"]),
html body tr:has(> td > input[name="passwd2"]),
html body tr:has(+ tr > td > input[name="cpasswd"]),
html body tr:has(+ tr > td > input[name="passwd1"]) {
  display: none !important;
}

/* --- User-side: active nav button ("Support Center Home") ------ *
 * Upstream theme.css: `#nav li a.active { background:#dbefff;
 * color:#000 }` — light blue pill on the dark page reads as
 * "broken light bar".  Replace with brand-pill. */
html body #nav li a.active,
html body ul#nav li a.active,
html body #nav li a.home.active {
  background: var(--mb-grad) !important;
  color: #fff !important;
  border-radius: var(--mb-radius-md) !important;
  padding: 6px 14px !important;
}
html body #nav li a:hover {
  background: var(--mb-bg-elevated) !important;
  color: var(--mb-text) !important;
}
html body #nav li a {
  color: var(--mb-text-dim) !important;
  padding: 6px 14px !important;
}
/* Kill upstream's icon background-images on user nav (the small
 * pixel icons next to "Support Center Home" etc. — they are
 * out of brand and unreadable on the dark theme). */
html body #nav li a.home,
html body #nav li a.kb,
html body #nav li a.new,
html body #nav li a.status,
html body #nav li a.tickets {
  background-image: none !important;
  padding-left: 14px !important;
}

/* --- User-side: sidebar buttons (Open New Ticket / Check Status) *
 * The right-rail buttons render as full-width gradient pills.
 * Upstream uses `display:block` so they stack — keep that. */
html body .front-page-button a.button {
  display: block !important;
  text-align: center !important;
  padding: 12px 18px !important;
  margin-bottom: 12px !important;
  font-size: 15px !important;
}

/* --- Admin logo + label suppression ---------------------------- *
 * Admin pages load /scp/logo.php — nginx aliases this to
 * `mobieus-logo-dark.png` (light wordmark for dark surfaces, per
 * Patrick 2026-05-21).  Size it inline so the wide-canvas
 * wordmark reads as ~48px tall, not a 16-px sliver.
 *
 * Admin-only label suppression: the user-side header has just
 * the M-icon and gets a ::after "mobieusHelp" text label.  Admin
 * pages render the WIDE wordmark via /scp/logo.php (which has
 * "mobieus.io" baked in), so the ::after label would be
 * redundant.  Detect admin by the presence of `#info` (the
 * "Welcome, <name> | Agent Panel | …" bar that admin pages have
 * and user pages don't) via the `:has()` pseudo-class.
 *
 * If a future browser lacks :has() support, the worst case is
 * the user-side label renders on admin too — harmless. */
html body #header > a#logo {
  display: inline-flex !important;
  align-items: center !important;
  height: 48px !important;
}
html body #header > a#logo img {
  height: 48px !important;
  width: auto !important;
  max-width: 280px !important;
  max-height: 48px !important;
  object-fit: contain;
  object-position: left center;
}
html body #header:has(#info) > a#logo::after {
  display: none !important;
}

/* --- Help Topics-style sticky.bar.opaque ----------------------- *
 * osTicket renders the "page-title + actions" strip (Help Topics
 * + Add New + More dropdown) as `<div class="sticky bar opaque">`
 * with `.opaque` defaulting to `background:#fff` so it stays
 * visible when scrolling.  On the dark theme that reads as a
 * bright white horizontal stripe between the sub-nav and the
 * data table.  Force the dark elevated surface. */
html body .sticky.bar,
html body .sticky.bar.opaque,
html body .bar.opaque {
  background: var(--mb-bg-2) !important;
  border: 1px solid var(--mb-border) !important;
  border-radius: var(--mb-radius-md) !important;
  margin: 12px 0 !important;
  padding: 8px 14px !important;
  color: var(--mb-text) !important;
  box-shadow: none !important;
}
html body .sticky.bar h2,
html body .sticky.bar .pull-left h2 {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 18px;
  color: var(--mb-text) !important;
}
/* The page-title <h2> wraps its text in an <a href> "Refresh"
 * link — upstream theme.css inherits the body link color, which
 * with my override is bright blue.  Style the link as regular
 * heading text so "Open Tasks" / "My Tickets" / etc. read as
 * page titles, not navigation links. */
html body .sticky.bar h2 a,
html body .sticky.bar .pull-left h2 a {
  color: var(--mb-text) !important;
  text-decoration: none !important;
}
html body .sticky.bar h2 a:hover {
  color: var(--mb-blue-bright) !important;
}

/* --- /open.php form layout (authenticated user) ---------------- *
 * osTicket's include/client/open.inc.php renders:
 *   <table width="800" ...>
 *     <tr><td colspan=2><hr></td></tr>
 *     <tr><td>Email:</td><td>email@x</td></tr>
 *     <tr><td>Client:</td><td>Patrick Bass</td></tr>
 *   </table>
 *
 * The colspan=2 divider rows (and Help-Topic rows further down)
 * force the table to compute a wide layout, then the 2-cell
 * rows distribute that width 50/50 — Email:[400px gap]patrick…
 *
 * The fix that actually sticks: convert the Email/Client rows
 * to `display: block` so they no longer participate in table
 * column layout, then float/inline the cells so label + value
 * sit on the same line with a fixed gap.  This leaves all the
 * colspan=2 rows untouched, only the 2-cell info rows reshape. */
html body #ticketForm > table {
  width: 100% !important;
  max-width: 800px;
  border-collapse: separate !important;
  border-spacing: 0;
}
html body #ticketForm > table > tbody > tr {
  /* Only target the 2-cell info rows.  `:has(> td:nth-child(2))`
   * (i.e. has a second td that's not from a colspan) is the
   * discriminator — colspan=2 rows have only one td. */
}
html body #ticketForm > table > tbody > tr:has(> td:nth-child(2)) {
  display: block !important;
  padding: 4px 0;
}
html body #ticketForm > table > tbody > tr:has(> td:nth-child(2)) > td {
  display: inline-block !important;
  padding: 0 !important;
  vertical-align: baseline;
  width: auto !important;
}
html body #ticketForm > table > tbody > tr:has(> td:nth-child(2)) > td:first-child {
  color: var(--mb-text-dim) !important;
  font-weight: 500;
  margin-right: 12px;
  min-width: 64px;
}
html body #ticketForm > table > tbody > tr:has(> td:nth-child(2)) > td:nth-child(2) {
  color: var(--mb-text) !important;
}

/* Section dividers (<hr>) — soft and short. */
html body #ticketForm hr {
  border: none !important;
  border-top: 1px solid var(--mb-border) !important;
  margin: 16px 0 !important;
}

/* --- /view.php Check Ticket Status form ------------------------ *
 * The visible "white card with padlock" on /view.php comes from
 * the FORM (#clientLogin), not its inner .login-box or
 * .instructions.  Upstream theme.css:
 *   #clientLogin {
 *     background: url(../images/lock.png) 95% 50% no-repeat #f6f6f6;
 *     box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
 *   }
 * Both the white bg and the padlock PNG need to go.
 *
 * Patrick 2026-05-21: SSO is the only auth path (suite invariant
 * #2), so the "Have an account? Sign In | register for an
 * account" prompt inside `.instructions` is dead UI — hide it. */
html body #clientLogin {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
html body .login-box {
  background: var(--mb-bg-3) !important;
  border: 1px solid var(--mb-border) !important;
  border-radius: var(--mb-radius-md) !important;
  color: var(--mb-text) !important;
  padding: 24px !important;
  width: 100% !important;
  display: block !important;
  box-shadow: none !important;
}
html body .login-box a,
html body .login-box a:link,
html body .login-box a:visited {
  color: var(--mb-blue-bright) !important;
}
html body .login-box label,
html body .login-box strong {
  color: var(--mb-text) !important;
}
/* SSO-only — hide the Sign In / register prompt. */
html body #clientLogin .instructions,
html body .instructions {
  display: none !important;
}
/* The form was laid out as a 2-column table-row (.login-box +
 * .instructions); with .instructions hidden, undo the table-row
 * + 40%-width so the form fills its natural width. */
html body #clientLogin > div[style*="table-row"] {
  display: block !important;
}

/* ── Articulate Rise SCORM content overrides ─────────────────────
 * The SCORM iframe loads each package's own HTML via
 * /pluginfile.php/.../mod_scorm/content/...  My nginx `</head>` ->
 * `<link rel=stylesheet branding-suite.css>` sub_filter injects this
 * file into the iframe document too, so the CSS custom-property
 * overrides below cascade through the Rise component tree.
 *
 * Rise drives every accent surface from `--color-theme` (and its
 * tint/decorative siblings); the Brain-Bites + the SCORM 2004
 * security-awareness packs Patrick uploaded all default to magenta
 * `#e91e63`, which sits over light backgrounds + light blue link
 * text -> ~1.5:1 contrast.  Re-pin the theme tokens to Mobieus
 * blue/purple + force WCAG-AA pairings on the two surfaces Rise
 * actually paints with them (sidebar nav + accent banners).
 *
 * Selectors are scoped to Rise's own class namespace (`.bg--*`,
 * `.blocks-*`, `.lesson-list*`, `.cover__*`, `.sidebar*`) so they
 * never collide with Moodle or Adaptable rules. */
:root {
  --color-theme: #2C7CFF !important;
  --color-theme-contrast: #F4F6FB !important;
  --color-theme-contrast-rgb: 244, 246, 251 !important;
  --color-theme-decorative: #7B3FE4 !important;
  --color-theme-tint: rgba(44, 124, 255, 0.18) !important;
  --color-theme-transparent: rgba(44, 124, 255, 0.10) !important;
  --color-button-bg: #2C7CFF !important;
  --color-button-text: #FFFFFF !important;
}

/* Accent backgrounds (banners, lesson headers, accent blocks) ->
 * force readable white text on the Mobieus blue background. */
.bg--type-accent,
.bg--type-color.bg--contrast-light,
.bg--card.bg--type-accent,
.bg--card.bg--type-color {
  color: #F4F6FB !important;
}
.bg--type-accent *:not(a):not(svg):not(svg *),
.bg--type-color.bg--contrast-light *:not(a):not(svg):not(svg *) {
  color: inherit !important;
}

/* Sidebar nav (lesson list) — Rise renders as `.sidebar` or
 * `.lesson-list` depending on theme.  Force dark surface + bright
 * text so the lesson titles read against a contrasting bg. */
.sidebar,
.sidebar__title,
.lesson-list,
.lesson-list__item,
.lesson-list__item--current,
.cover__sidebar,
nav.sidebar {
  background-color: #0E1228 !important;
  color: #F4F6FB !important;
}
.sidebar a,
.lesson-list__item a,
.lesson-list__title,
.sidebar__title,
.cover__sidebar a {
  color: #F4F6FB !important;
}
.sidebar a:hover,
.lesson-list__item a:hover {
  color: #4D90FF !important;
}
/* Current-lesson indicator + completion-status circles -> brand
 * colours instead of pink */
.lesson-list__item--current::before,
.lesson-list__status,
.lesson-list__item-status {
  border-color: #4D90FF !important;
  color: #4D90FF !important;
}

/* Lesson cover / hero title surfaces: white-bg + light-blue title
 * was the second contrast issue (the "Creating Strong and Unique
 * Passwords" lesson header).  Force dark text on light surfaces. */
.cover__title,
.cover__subtitle,
.lesson__title,
.lesson-headline,
.block-text h1,
.block-text h2,
.block-text h3 {
  color: #1B2240 !important;
}
.cover {
  color: #1B2240 !important;
}

/* Tabs (the INSTALLATION / SECURITY / BACKUP row in the screenshot)
 * use Rise's tab-list classes — make the active tab read as brand
 * blue, inactive tabs read as muted dark. */
.tabs__tab--active,
.tabs__tab[aria-selected="true"] {
  color: #2C7CFF !important;
  border-color: #2C7CFF !important;
}
.tabs__tab {
  color: #1B2240 !important;
}

/* The lesson "1 of 5" / chapter-progress badge — was light-gray on
 * white.  Force a darker readable tone. */
.lesson-progress,
.lesson__lesson-progress,
.lesson-progress-label {
  color: #1B2240 !important;
  font-weight: 600 !important;
}

/* SCORM player chrome (Moodle wraps the iframe in `.scorm-frame-*`
 * + status bars) — already mostly dark via the Moodle rules above,
 * but the toc-tree behind the iframe leaks white.  Force dark. */
html body #scorm-toc,
html body #scormpage,
html body .scorm-frame-container,
html body .scorm-frameset {
  background-color: var(--mb-bg) !important;
  color: var(--mb-text) !important;
}

/* SCORM player Table of Contents on the LEFT (the "blue box"
 * Patrick flagged): Moodle renders the SCO list as an
 * `<ul><li><a data-scoid="…">SCO title</a></li></ul>` inside
 * `#scorm_tree`, wrapped by `#scorm_toc` / `#tocbox`.  Adaptable's
 * theme bundle ships its own `#scorm_tree a { color: <blue> }` with
 * 0,1,1 specificity which TIES my prior `html body #scorm_tree a`
 * — and because Adaptable's bundle is concatenated AFTER my file in
 * the cascade for theme/styles.php URLs, theirs won the tie.
 *
 * Fix: ramp specificity high enough to win regardless of declaration
 * order.  `body#page-mod-scorm-player` is an id selector on body
 * (already 1,0,1) and `a[data-scoid]` adds an attribute (1 more
 * class-level).  Together that's 1,2,2 — beats anything Adaptable
 * or core-mod-scorm ships. */
html body#page-mod-scorm-player #scorm_toc,
html body#page-mod-scorm-player #scorm_toc *,
html body#page-mod-scorm-player #scorm_tree,
html body#page-mod-scorm-player #scorm_tree *,
html body#page-mod-scorm-player #scorm_toc_title,
html body#page-mod-scorm-player #tocbox,
html body#page-mod-scorm-player #tocbox *,
html body.path-mod-scorm #scorm_toc,
html body.path-mod-scorm #scorm_toc *,
html body.path-mod-scorm #scorm_tree,
html body.path-mod-scorm #scorm_tree *,
html body #scorm_tree a[data-scoid],
html body #scorm_tree a[data-scoid] i,
html body #scorm_tree li a,
html body #scorm_tree li a i,
html body #tocbox a[data-scoid] {
  color: #FFFFFF !important;
}
html body#page-mod-scorm-player #scorm_tree a:hover,
html body #scorm_tree a[data-scoid]:hover {
  color: #E5EEFF !important;
  text-decoration: underline !important;
}

/* ── Rise SCORM, Patrick's per-element follow-ups (2026-05-21 PM) ──
 * Screenshot 152013.png: Rise course color `#d8047c` deserialized
 * from the base64-LZW course JSON at runtime drives `--color-theme`
 * and STILL leaks magenta into specific surfaces my :root override
 * doesn't reach.  Patrick's targeted asks:
 *
 *   1) Sidebar top course title (the blue box on the left) -> WHITE
 *   2) Lesson title at top center of page                  -> BLACK
 *   3) Light pink bar (block bg-type-TINT)                 -> LIGHT BLUE
 *   4) Dark pink bar below (block bg-type-ACCENT)          -> WHITE
 *
 * Each rule below is keyed to the Rise class actually emitted by
 * the runtime (verified against scormcontent/lib/rise/*.css):
 * `.bg--type-tint`, `.bg--type-accent`, `.lesson-header__title`,
 * `.lesson-header-wrap--*`, `.cover__sidebar*`, `.cover__header-
 * content-title`. */

/* 1. Sidebar course title (top of the blue left rail) -> WHITE.
 *    Rise emits the cover sidebar as a stack: `.cover__sidebar`
 *    wraps `.cover__sidebar-content` -> headings + author info.
 *    Force ALL text inside the sidebar to white-tone Mobieus
 *    `--mb-text` so titles, % complete, "Lessons" label, and
 *    progress text all read against the blue surface. */
html body .cover__sidebar,
html body .cover__sidebar-content,
html body .cover__header-content,
html body .cover__sidebar-content-wrap,
html body .cover__sidebar h1,
html body .cover__sidebar h2,
html body .cover__sidebar h3,
html body .cover__sidebar p,
html body .cover__sidebar span,
html body .cover__sidebar-content *,
html body .cover__header-content-title,
html body .cover__categories-title,
html body .cover__course-length-title,
html body .cover__author-title,
html body .cover__author-name,
html body .cover__completed-info-label,
html body .cover__requirements-title,
html body .cover__details-content-heading,
/* Rise nav-sidebar variant (used by themeId="organic" + sidebar
 * navigation layouts).  The sidebar has TWO zones:
 *   - HEADER (top): brand-accent surface with course title +
 *     percent-complete bar.  Text -> WHITE.
 *   - OUTLINE (below): light surface with lesson titles +
 *     progress circles.  Text -> DARK (#0B0F23) so it reads on
 *     the light bg.
 * Scope the white rule strictly to `.nav-sidebar-header` (NOT
 * `.nav-sidebar *`) so the outline items keep their dark text.
 * Patrick paste 1: <a class="nav-sidebar-header__title" data-
 * test-id="nav-sidebar-title">.
 * Patrick paste 2: <a class="nav-sidebar__outline-item__link
 * nav-sidebar__outline-item__link--theme-default"> — the lesson
 * row that the broader earlier rule incorrectly painted white. */
html body .nav-sidebar-header,
html body .nav-sidebar-header *,
html body .nav-sidebar-header__title,
html body a.nav-sidebar-header__title,
html body a.nav-sidebar-header__title:link,
html body a.nav-sidebar-header__title:visited,
html body [data-test-id="nav-sidebar-title"],
html body [data-test-id="nav-sidebar-title"] *,
html body .nav-sidebar-header__progress,
html body .nav-sidebar-header__progress *,
html body .nav-sidebar-header__progress-text,
html body .nav-sidebar-header__progress-label {
  color: #FFFFFF !important;
}
html body a.nav-sidebar-header__title:hover,
html body [data-test-id="nav-sidebar-title"]:hover {
  color: #E5EEFF !important;
  text-decoration: underline !important;
}

/* Lesson outline items (the list of lessons below the header).
 * Rise emits `.nav-sidebar__outline-item__link` with a theme
 * modifier `--theme-default`.  These sit on a light surface so
 * dark text is the right contrast pair.  Cover the link + its
 * SVG icon + the lesson-progress badge text. */
html body .nav-sidebar__outline-item,
html body .nav-sidebar__outline-item *,
html body .nav-sidebar__outline-item__link,
html body a.nav-sidebar__outline-item__link,
html body a.nav-sidebar__outline-item__link:link,
html body a.nav-sidebar__outline-item__link:visited,
html body .nav-sidebar__outline-item__link svg,
html body .lesson-progress--sidebar,
html body .lesson-progress--sidebar *,
html body [data-test-id="lesson-progress"],
html body [data-test-id="lesson-progress"] * {
  color: #0B0F23 !important;
}
html body a.nav-sidebar__outline-item__link:hover {
  color: var(--mb-blue, #2C7CFF) !important;
}
/* Progress circle track/runner — keep `currentColor` linkage to
 * the link's dark colour, but the "completed" state should still
 * read as brand-blue success, not the same dark as text. */
html body .nav-sidebar__outline-item__link .progress-circle__runner--complete {
  stroke: var(--mb-blue, #2C7CFF) !important;
}

/* 2. Lesson title at the top of the lesson content (the faint
 *    "Understanding Security Incidents" in the screenshot) -> BLACK.
 *    Rise emits this as `.lesson-header__title` inside
 *    `.lesson-header` / `.lesson-header-wrap`.  Force the title +
 *    every descendant to deep navy/black so it reads on the
 *    light card surface. */
html body .lesson-header,
html body .lesson-header-wrap,
html body .lesson-header__main,
html body .lesson-header__content,
html body .lesson-header__title,
html body .lesson-header__title *,
html body .lesson-header__title-wrapper,
html body .lesson-header__title-wrapper--no-info,
html body .lesson-header__counter,
html body .lesson-header__count,
html body .lesson-header__estimate,
html body .lesson-header__description {
  color: #0B0F23 !important;
}

/* 3. Light pink bar — `.bg--type-tint` blocks (Rise renders these
 *    when a block's `backgroundType=TINT`, painted from the
 *    `--color-theme-tint` chain).  Patrick: turn these LIGHT BLUE
 *    and force readable BLACK text. */
html body .bg--type-tint,
html body .block.bg--type-tint,
html body .lesson-header-wrap--tint,
html body .lesson-block.bg--type-tint {
  background-color: #DCEBFF !important;
  background-image: none !important;
  color: #0B0F23 !important;
}
html body .bg--type-tint *:not(a):not(svg):not(svg *),
html body .lesson-header-wrap--tint *:not(a):not(svg):not(svg *) {
  color: #0B0F23 !important;
}

/* 4. Dark pink bar — `.bg--type-accent` blocks (backgroundType=
 *    ACCENT, painted from --color-theme).  Patrick: turn these
 *    WHITE with BLACK text. */
html body .bg--type-accent,
html body .block.bg--type-accent,
html body .lesson-header-wrap--accent,
html body .lesson-block.bg--type-accent,
html body .bg--branded.bg--type-accent {
  background-color: #FFFFFF !important;
  background-image: none !important;
  color: #0B0F23 !important;
}
html body .bg--type-accent *:not(a):not(svg):not(svg *):not(button),
html body .lesson-header-wrap--accent *:not(a):not(svg):not(svg *):not(button) {
  color: #0B0F23 !important;
}
/* Within the now-WHITE accent block, restore a brand-blue button
 * so the CONTINUE action still pops against the white surface. */
html body .bg--type-accent button,
html body .bg--type-accent .continue-block__btn,
html body .bg--type-accent [class*="btn-"],
html body .bg--type-accent [class*="button-"] {
  background-color: var(--mb-blue, #2C7CFF) !important;
  color: #FFFFFF !important;
  border-color: var(--mb-blue, #2C7CFF) !important;
}