/* =============================================================================
   HELIX DESIGN SYSTEM  —  LEGACY BRIDGE
   -----------------------------------------------------------------------------
   The site is built on an exported Odoo frontend bundle (~870 KB per page).
   That bundle ships its own "colour combination" system: .o_cc1 .. .o_cc5,
   each hard-coding a background, a text colour, a heading colour, a link
   colour and a set of button colours, several of them with !important and at
   a specificity the plain component layer cannot reach.

   This file translates that system into Helix tokens. It is kept separate
   from the rest of the design system for one reason: if the Odoo bundle is
   ever removed, this file can be deleted wholesale and nothing else changes.

   The colour combinations, for reference:
     o_cc1  white ground, dark text
     o_cc2  light grey ground (#E9E9E9), dark text  (also .o_footer)
     o_cc3  dark ground, white text
     o_cc4  dark ground, white text
     o_cc5  near-black ground (#0A0D13), white text  — hero sections

   cc1/cc2 are LIGHT combinations and must follow the theme.
   cc3/cc4/cc5 sit on dark grounds or photographs and keep light text in both
   themes: flipping them would put white text on a white ground.

   Load order: last, after design-app.css.
   ========================================================================== */

/* =============================================================================
   L1  BRAND SUBSTITUTION
   -----------------------------------------------------------------------------
   The bundle's brand colour is #51649a (slate blue) and its secondary is
   #231f20. Both are re-pointed at the Helix palette so legacy buttons, links
   and accents inherit the new identity instead of the old one.
   ========================================================================== */

:root,
[data-theme] {
    --o-color-1: var(--hx-primary);
    --o-color-2: var(--hx-ink);

    /* Bootstrap 5.3 derives .text-muted / .text-secondary from these. */
    --bs-body-color-rgb: 27, 56, 51;
    --bs-secondary-color: var(--hx-muted);
    --bs-tertiary-color: var(--hx-muted-2);
    --bs-emphasis-color: var(--hx-ink);
    --bs-heading-color: var(--hx-ink);
}

[data-theme="dark"] {
    --bs-body-color-rgb: 207, 222, 219;
}

/* =============================================================================
   L2  LIGHT COMBINATIONS (o_cc1, o_cc2, o_footer)
   -----------------------------------------------------------------------------
   Grounds become token surfaces so the page's tinted background shows
   through, and text follows the active theme.
   ========================================================================== */

[data-theme] .o_cc1,
[data-theme] .o_cc2,
[data-theme] .o_footer,
[data-theme] .o_colored_level .o_cc1,
[data-theme] .o_colored_level .o_cc2 {
    background-color: transparent;
    color: var(--hx-ink-2);
    --o-cc-bg: transparent;
    --background-color: transparent;
    --color: var(--hx-ink-2);
}

/* Sections that genuinely need a raised panel keep one, drawn from tokens. */
[data-theme] .o_cc2:not(.o_footer),
[data-theme] .o_colored_level .o_cc2:not(.o_footer) {
    background-color: var(--hx-surface-2);
}

/* Headings. The bundle sets these at up to (0,3,1); these selectors sit
   above that so the theme wins without resorting to !important. */
[data-theme] .o_cc1 h1, [data-theme] .o_cc1 h2, [data-theme] .o_cc1 h3,
[data-theme] .o_cc1 h4, [data-theme] .o_cc1 h5, [data-theme] .o_cc1 h6,
[data-theme] .o_cc2 h1, [data-theme] .o_cc2 h2, [data-theme] .o_cc2 h3,
[data-theme] .o_cc2 h4, [data-theme] .o_cc2 h5, [data-theme] .o_cc2 h6,
[data-theme] .o_colored_level .o_cc1 h1, [data-theme] .o_colored_level .o_cc1 h2,
[data-theme] .o_colored_level .o_cc1 h3, [data-theme] .o_colored_level .o_cc1 h4,
[data-theme] .o_colored_level .o_cc1 h5, [data-theme] .o_colored_level .o_cc1 h6,
[data-theme] .o_colored_level .o_cc2 h1, [data-theme] .o_colored_level .o_cc2 h2,
[data-theme] .o_colored_level .o_cc2 h3, [data-theme] .o_colored_level .o_cc2 h4,
[data-theme] .o_colored_level .o_cc2 h5, [data-theme] .o_colored_level .o_cc2 h6 {
    color: var(--hx-ink);
}

/* Muted text. The bundle uses !important here, so this must match it. */
[data-theme] .o_cc1 .text-muted,
[data-theme] .o_cc2 .text-muted,
[data-theme] .o_footer .text-muted,
[data-theme] .o_colored_level .o_cc1 .text-muted,
[data-theme] .o_colored_level .o_cc2 .text-muted {
    color: var(--hx-muted) !important;
}

/* Links inside light combinations. */
[data-theme] .o_cc1 a:not(.btn),
[data-theme] .o_cc2 a:not(.btn),
[data-theme] .o_footer a:not(.btn),
[data-theme] .o_colored_level .o_cc1 .btn-link,
[data-theme] .o_colored_level .o_cc2 .btn-link {
    color: var(--hx-primary-strong);
}

[data-theme] .o_cc1 a:not(.btn):hover,
[data-theme] .o_cc2 a:not(.btn):hover,
[data-theme] .o_footer a:not(.btn):hover,
[data-theme] .o_colored_level .o_cc1 .btn-link:hover,
[data-theme] .o_colored_level .o_cc2 .btn-link:hover {
    color: var(--hx-primary-deep);
}

/* =============================================================================
   L3  DARK COMBINATIONS (o_cc3, o_cc4, o_cc5)
   -----------------------------------------------------------------------------
   These keep light text — they sit on dark grounds and hero photography in
   both themes. Only the link accent is re-pointed to the brand.
   ========================================================================== */

[data-theme] .o_cc3 a:not(.btn),
[data-theme] .o_cc4 a:not(.btn),
[data-theme] .o_cc5 a:not(.btn),
[data-theme] .o_colored_level .o_cc3 .btn-link,
[data-theme] .o_colored_level .o_cc4 .btn-link,
[data-theme] .o_colored_level .o_cc5 .btn-link {
    color: var(--hx-primary-strong);
}

[data-theme] .o_cc3 a:not(.btn):hover,
[data-theme] .o_cc4 a:not(.btn):hover,
[data-theme] .o_cc5 a:not(.btn):hover {
    color: var(--hx-primary-deep);
}

/* In dark mode the near-black hero ground is nudged onto the teal-black
   family so it agrees with the rest of the page. */
[data-theme="dark"] .o_cc5,
[data-theme="dark"] .o_colored_level .o_cc5 {
    background-color: var(--hx-surface-sunken);
    --o-cc-bg: var(--hx-surface-sunken);
}

/* =============================================================================
   L4  LEGACY BUTTON VARIABLES
   -----------------------------------------------------------------------------
   The bundle drives its buttons through --btn-* custom properties per colour
   combination. Re-pointing them keeps those buttons consistent with the
   Helix button family without touching their markup.
   ========================================================================== */

[data-theme] .o_cc1 .btn-primary,
[data-theme] .o_cc2 .btn-primary,
[data-theme] .o_cc3 .btn-primary,
[data-theme] .o_cc4 .btn-primary,
[data-theme] .o_cc5 .btn-primary,
[data-theme] .o_cc1 .btn-fill-primary,
[data-theme] .o_cc2 .btn-fill-primary,
[data-theme] .o_cc5 .btn-fill-primary,
[data-theme] .o_colored_level .o_cc1 .btn-fill-primary,
[data-theme] .o_colored_level .o_cc2 .btn-fill-primary,
[data-theme] .o_colored_level .o_cc5 .btn-fill-primary {
    --btn-color: var(--hx-on-primary);
    --btn-bg: var(--hx-primary-solid);
    --btn-border-color: var(--hx-primary-solid);
    --btn-hover-color: var(--hx-on-primary);
    --btn-hover-bg: var(--hx-primary-solid-hover);
    --btn-hover-border-color: var(--hx-primary-solid-hover);
    background-color: var(--hx-primary-solid);
    border-color: var(--hx-primary-solid);
    color: var(--hx-on-primary);
}

[data-theme] .o_cc1 .btn-outline-primary,
[data-theme] .o_cc2 .btn-outline-primary,
[data-theme] .o_cc5 .btn-outline-primary {
    --btn-color: var(--hx-primary-strong);
    --btn-border-color: var(--hx-primary);
    --btn-hover-color: var(--hx-on-primary);
    --btn-hover-bg: var(--hx-primary-solid);
    --btn-hover-border-color: var(--hx-primary-solid);
}

/* =============================================================================
   L5  MUTED TEXT ON LEGACY BACKGROUND UTILITIES
   -----------------------------------------------------------------------------
   Beyond the colour combinations, the bundle also hard-codes muted text for
   every .bg-* ground it ships, at (0,3,0) with !important:

       .bg-white .text-muted,
       .o_colored_level .bg-white .text-muted { color: rgba(33,37,41,.7) !important }

   Light grounds are re-pointed at the muted token so they follow the theme.
   Dark grounds (.bg-black*, .bg-600..900) already use light muted text and
   are deliberately left alone — they sit on dark paint in both themes.
   ========================================================================== */

[data-theme] .bg-white .text-muted,
[data-theme] .bg-white-85 .text-muted,
[data-theme] .bg-white-75 .text-muted,
[data-theme] .bg-white-50 .text-muted,
[data-theme] .bg-light .text-muted,
[data-theme] .bg-body .text-muted,
[data-theme] .bg-100 .text-muted,
[data-theme] .bg-200 .text-muted,
[data-theme] .bg-300 .text-muted,
[data-theme] .bg-400 .text-muted,
[data-theme] .bg-500 .text-muted,
[data-theme] .o_colored_level .bg-white .text-muted,
[data-theme] .o_colored_level .bg-white-85 .text-muted,
[data-theme] .o_colored_level .bg-white-75 .text-muted,
[data-theme] .o_colored_level .bg-white-50 .text-muted,
[data-theme] .o_colored_level .bg-light .text-muted,
[data-theme] .o_colored_level .bg-100 .text-muted,
[data-theme] .o_colored_level .bg-200 .text-muted,
[data-theme] .o_colored_level .bg-300 .text-muted,
[data-theme] .o_colored_level .bg-400 .text-muted,
[data-theme] .o_colored_level .bg-500 .text-muted {
    color: var(--hx-muted) !important;
}

/* The bundle also pins muted text inside every light container it knows
   about, again with !important, the deepest at (0,3,0):

       .o_colored_level :where(.card) .card-body .text-muted
       .modal-content .text-muted
       .dropdown-menu .text-muted
       .bg-o-color-3 .text-muted / .bg-o-color-4 .text-muted

   Only light containers are listed here. Dark grounds (.bg-black*,
   .bg-o-color-1/2, .o_cc5) set muted text to rgba(255,255,255,.7), which is
   already correct in both themes — re-pointing those would put a dim slate
   grey on near-black. */
[data-theme] .card .text-muted,
[data-theme] .card-body .text-muted,
[data-theme] .modal-content .text-muted,
[data-theme] .dropdown-menu .text-muted,
[data-theme] .o_dropdown_menu .text-muted,
[data-theme] .list-group-item .text-muted,
[data-theme] .accordion-body .text-muted,
[data-theme] .offcanvas .text-muted,
[data-theme] .popover .text-muted,
[data-theme] .bg-o-color-3 .text-muted,
[data-theme] .bg-o-color-4 .text-muted,
[data-theme] .o_colored_level .card .card-body .text-muted,
[data-theme] .o_colored_level .card-body .text-muted,
[data-theme] .o_colored_level .bg-o-color-3 .text-muted,
[data-theme] .o_colored_level .bg-o-color-4 .text-muted {
    color: var(--hx-muted) !important;
}

/* The bundle's own .text-muted reads from --secondary-color (not the
   Bootstrap variable), so that one is re-pointed too. */
:root,
[data-theme] {
    --secondary-color: var(--hx-muted);
    --tertiary-color: var(--hx-muted-2);
}

/* =============================================================================
   L6  PROFILE DROPDOWN
   -----------------------------------------------------------------------------
   css/common/navbar_profile_fix.css pins the account menu to a white ground
   with !important at roughly (2,3,0), and upbar_loader.js appends it to
   <head> at RUNTIME — after every stylesheet the page declared. Specificity
   is therefore the only lever, so these selectors extend that file's own
   selector with the theme attribute and match its !important.

   Light mode is left entirely alone: white-on-white is already correct there.
   ========================================================================== */

[data-theme="dark"] #wrapwrap #top .navbar-light #desktop-profile-nav .dropdown-menu.upbar-profile-menu {
    --bs-dropdown-bg: var(--hx-surface);
    --bs-dropdown-color: var(--hx-ink-2);
    --bs-dropdown-link-color: var(--hx-ink-2);
    --bs-dropdown-link-hover-color: var(--hx-ink);
    --bs-dropdown-link-hover-bg: var(--hx-surface-2);
    background: var(--hx-surface) !important;
    background-color: var(--hx-surface) !important;
    color: var(--hx-ink-2) !important;
    border: 1px solid var(--hx-line) !important;
    border-radius: var(--hx-r-md) !important;
    box-shadow: var(--hx-shadow-lg) !important;
}

[data-theme="dark"] #wrapwrap #top .navbar-light #desktop-profile-nav .upbar-profile-menu .dropdown-item {
    color: var(--hx-ink-2) !important;
}

[data-theme="dark"] #wrapwrap #top .navbar-light #desktop-profile-nav .upbar-profile-menu .dropdown-item:hover,
[data-theme="dark"] #wrapwrap #top .navbar-light #desktop-profile-nav .upbar-profile-menu .dropdown-item:focus {
    color: var(--hx-primary-strong) !important;
    background-color: var(--hx-primary-soft) !important;
}

[data-theme="dark"] #wrapwrap #top .navbar-light #desktop-profile-nav .upbar-profile-menu .dropdown-item.active {
    color: var(--hx-on-primary) !important;
    background-color: var(--hx-primary-solid) !important;
}

[data-theme="dark"] #wrapwrap #top .navbar-light #desktop-profile-nav .upbar-profile-menu .dropdown-item.text-danger {
    color: var(--hx-danger) !important;
}

[data-theme="dark"] #wrapwrap #top .navbar-light #desktop-profile-nav .upbar-profile-menu .dropdown-item.text-danger:hover,
[data-theme="dark"] #wrapwrap #top .navbar-light #desktop-profile-nav .upbar-profile-menu .dropdown-item.text-danger:focus {
    color: var(--hx-danger) !important;
    background-color: var(--hx-danger-soft) !important;
}

[data-theme="dark"] #wrapwrap #top .navbar-light #desktop-profile-nav .upbar-profile-menu .text-muted {
    color: var(--hx-muted) !important;
}

[data-theme="dark"] #wrapwrap #top .navbar-light #desktop-profile-nav .upbar-profile-menu .dropdown-divider {
    border-top-color: var(--hx-line) !important;
}

[data-theme="dark"] #wrapwrap #top #desktop-profile-nav .upbar-profile-toggle.show,
[data-theme="dark"] #wrapwrap #top #desktop-profile-nav .upbar-profile-toggle:hover,
[data-theme="dark"] #wrapwrap #top #desktop-profile-nav .upbar-profile-toggle:focus {
    color: var(--hx-ink) !important;
}

/* --- Sticky top bar -------------------------------------------------------
   navbar_profile_fix.css pins `#wrapwrap #top` to position:relative at
   (2,0,0), and is injected at runtime, so the design layer's plain `#top`
   rule loses. The theme attribute lifts this to (2,1,0).

   This does not change stacking: that file already gives #top a z-index,
   which makes it a stacking context either way, so the account dropdown
   (z-index 1056 inside #top) keeps painting above the page exactly as
   before. */
[data-theme] #wrapwrap #top {
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* =============================================================================
   L7  SEGMENTED TOGGLES (login portal switch, curriculum switch)
   -----------------------------------------------------------------------------
   These buttons carry their colours in a style="" attribute — a purple
   gradient (#667eea to #764ba2) left over from the previous identity, whose
   white label lands at 4.45:1. Inline styles can only be reached with
   !important, which is what these rules use, and they bring the control onto
   the Helix palette at the same time.
   ========================================================================== */

.portal-btn,
.curriculum-btn {
    border-radius: var(--hx-r-pill) !important;
    font-weight: 600;
    transition: background-color var(--hx-dur-fast) var(--hx-ease),
                color var(--hx-dur-fast) var(--hx-ease),
                border-color var(--hx-dur-fast) var(--hx-ease),
                box-shadow var(--hx-dur-fast) var(--hx-ease),
                transform var(--hx-dur-fast) var(--hx-ease) !important;
}

.portal-btn:not(.active) {
    background: var(--hx-surface) !important;
    color: var(--hx-ink-2) !important;
    border: 1px solid var(--hx-line-strong) !important;
    box-shadow: none !important;
}

.portal-btn:not(.active):hover,
.portal-btn:not(.active):focus {
    background: var(--hx-primary-softer) !important;
    color: var(--hx-primary-strong) !important;
    border-color: var(--hx-primary-ring) !important;
    transform: translateY(-1px);
}

.portal-btn.active {
    background: var(--hx-primary-solid) !important;
    color: var(--hx-on-primary) !important;
    border: 1px solid var(--hx-primary-solid) !important;
    box-shadow: 0 4px 14px var(--hx-primary-ring) !important;
    transform: none !important;
}

/* The track the segmented buttons sit in. */
[data-theme] .d-inline-flex.bg-light.rounded {
    background: var(--hx-surface-2) !important;
    border: 1px solid var(--hx-line) !important;
    border-radius: var(--hx-r-pill) !important;
}

/* =============================================================================
   L8  HARD-CODED INLINE TEXT COLOURS
   -----------------------------------------------------------------------------
   A handful of elements carry a literal dark grey in a style="" attribute.
   There are only a few in the whole site, and each is a heading or label
   inside a card, so in dark mode they are re-pointed at the ink token.
   ========================================================================== */

[data-theme="dark"] [style*="color: #333"],
[data-theme="dark"] [style*="color:#333"],
[data-theme="dark"] [style*="color: #212529"],
[data-theme="dark"] [style*="color:#212529"] {
    color: var(--hx-ink) !important;
}

[data-theme="dark"] [style*="color: #6c757d"],
[data-theme="dark"] [style*="color:#6c757d"] {
    color: var(--hx-muted) !important;
}

/* =============================================================================
   L9  LEGACY BACKGROUND UTILITIES
   ========================================================================== */

[data-theme="dark"] .bg-black-50 {
    background-color: rgba(4, 16, 14, 0.62) !important;
}

/* The hero shape overlay is a light SVG; soften it on dark ground. */
[data-theme="dark"] .o_we_shape {
    opacity: 0.55;
}

/* Odoo's own card / panel remnants. */
[data-theme="dark"] .o_we_bg_filter {
    background-color: rgba(4, 16, 14, 0.55);
}