/* AGWA brand override — applied to ALL MFEs via index.html injection */

/* ============================================================
   :root CSS custom property overrides
   Cascade to every Paragon component that uses the design tokens.
   ============================================================ */
:root {
    /* === BRAND BUTTON COLORS (medium green) === */
    --pgn-color-btn-bg-brand: #507F70;
    --pgn-color-btn-border-brand: #507F70;
    --pgn-color-btn-text-brand: #ffffff;
    --pgn-color-btn-hover-bg-brand: #3c5f54;
    --pgn-color-btn-hover-border-brand: #3c5f54;
    --pgn-color-btn-hover-text-brand: #ffffff;
    --pgn-color-btn-active-bg-brand: #3c5f54;
    --pgn-color-btn-active-border-brand: #3c5f54;
    --pgn-color-btn-active-text-brand: #ffffff;
    --pgn-color-btn-focus-bg-brand: #507F70;
    --pgn-color-btn-focus-border-brand: #3c5f54;
    --pgn-color-btn-focus-text-brand: #ffffff;
    --pgn-color-btn-focus-outline-brand: #d2e2d2;
    --pgn-color-btn-disabled-bg-brand: #73998d;
    --pgn-color-btn-disabled-border-brand: #73998d;
    --pgn-color-btn-disabled-text-brand: #ffffff;

    /* === PRIMARY BUTTON COLORS (dark green) === */
    --pgn-color-btn-bg-primary: #3c5f54;
    --pgn-color-btn-border-primary: #3c5f54;
    --pgn-color-btn-text-primary: #ffffff;
    --pgn-color-btn-hover-bg-primary: #2d483f;
    --pgn-color-btn-hover-border-primary: #2d483f;
    --pgn-color-btn-hover-text-primary: #ffffff;
    --pgn-color-btn-active-bg-primary: #2d483f;
    --pgn-color-btn-active-border-primary: #2d483f;
    --pgn-color-btn-active-text-primary: #ffffff;
    --pgn-color-btn-focus-bg-primary: #3c5f54;
    --pgn-color-btn-focus-border-primary: #2d483f;
    --pgn-color-btn-focus-text-primary: #ffffff;
    --pgn-color-btn-focus-outline-primary: #d2e2d2;
    --pgn-color-btn-disabled-bg-primary: #73998d;
    --pgn-color-btn-disabled-border-primary: #73998d;
    --pgn-color-btn-disabled-text-primary: #ffffff;

    /* === OUTLINE-PRIMARY BUTTON COLORS === */
    --pgn-color-btn-bg-outline-primary: transparent;
    --pgn-color-btn-border-outline-primary: #3c5f54;
    --pgn-color-btn-text-outline-primary: #3c5f54;
    --pgn-color-btn-hover-bg-outline-primary: #3c5f54;
    --pgn-color-btn-hover-border-outline-primary: #3c5f54;
    --pgn-color-btn-hover-text-outline-primary: #ffffff;
    --pgn-color-btn-active-bg-outline-primary: #2d483f;
    --pgn-color-btn-active-border-outline-primary: #2d483f;
    --pgn-color-btn-active-text-outline-primary: #ffffff;
    --pgn-color-btn-focus-bg-outline-primary: transparent;
    --pgn-color-btn-focus-border-outline-primary: #3c5f54;
    --pgn-color-btn-focus-text-outline-primary: #3c5f54;
    --pgn-color-btn-focus-outline-outline-primary: #d2e2d2;
    --pgn-color-btn-disabled-bg-outline-primary: transparent;
    --pgn-color-btn-disabled-border-outline-primary: #73998d;
    --pgn-color-btn-disabled-text-outline-primary: #73998d;

    /* === ACTIVE / HOVER STATE + LINK COLORS === */
    --pgn-color-bg-active: #3c5f54;
    --pgn-color-active: #ffffff;
    --pgn-color-link-brand-base: #73998d;
    --pgn-color-link-brand-hover: #3c5f54;
    /* === BASE PALETTE TOKENS — what var(--primary) and var(--brand) resolve to === */
    --pgn-color-primary-base: #3c5f54;
    --pgn-color-brand-base:   #507F70;
    --pgn-color-accent-a:     #d2e2d2;

    /* Primary palette swatches — many components reference these directly */
    --pgn-color-primary-100: #e8efed;
    --pgn-color-primary-200: #c4d7d0;
    --pgn-color-primary-300: #9fbfb2;
    --pgn-color-primary-400: #73998d;
    --pgn-color-primary-500: #507F70;
    --pgn-color-primary-600: #3c5f54;
    --pgn-color-primary-700: #2d483f;
    --pgn-color-primary-800: #1a2824;
    --pgn-color-primary-900: #0f1813;

    /* Brand palette swatches */
    --pgn-color-brand-100: #e8efed;
    --pgn-color-brand-300: #9fbfb2;
    --pgn-color-brand-500: #507F70;
    --pgn-color-brand-700: #3c5f54;

    /* Link tokens — covers .btn-link, plain <a>, hyperlinks */
    --pgn-color-link-base:        #3c5f54;
    --pgn-color-link-hover:       #2d483f;
    --pgn-color-link-active:      #2d483f;
    --pgn-color-link-visited:     #3c5f54;
    --pgn-color-btn-text-link:        #3c5f54;
    --pgn-color-btn-hover-text-link:  #2d483f;
    --pgn-color-btn-active-text-link: #2d483f;
}

/* ============================================================
   Selector-based fallbacks
   For components whose CSS bypasses the variable system.
   ============================================================ */

/* Brand buttons — medium green */
.btn-brand {
    background-color: #507F70 !important;
    border-color: #507F70 !important;
    color: #ffffff !important;
}
.btn-brand:hover,
.btn-brand:focus {
    background-color: #3c5f54 !important;
    border-color: #3c5f54 !important;
}

/* Primary buttons — dark green */
.btn-primary {
    background-color: #3c5f54 !important;
    border-color: #3c5f54 !important;
    color: #ffffff !important;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: #2d483f !important;
    border-color: #2d483f !important;
}

/* Outline variants */
.btn-outline-primary,
.btn-outline-brand {
    color: #3c5f54 !important;
    border-color: #3c5f54 !important;
    background-color: transparent !important;
}
.btn-outline-primary:hover,
.btn-outline-brand:hover {
    background-color: #3c5f54 !important;
    color: #ffffff !important;
}

/* Text colors */
.text-primary,
.text-brand {
    color: #3c5f54 !important;
}
.text-accent-a {
    color: #d2e2d2 !important;
}

/* ============================================================
   AUTHN MFE — specific decorative elements
   These class names only appear on /authn/, so they're harmless elsewhere.
   ============================================================ */
.bg-primary-400 {
    background-color: #507F70 !important;
}
.large-screen-svg-primary rect,
.large-screen-svg-primary g rect {
    fill: #507F70 !important;
}
.extra-large-screen-top-stripe {
    background: #507F70 !important;
    background-image: none !important;
}
.pgn__hyperlink img.logo.position-absolute {
    content: url("https://learning.agwa.aquaveo.com/custom-assets/AGWA-horizontal-colorbg.png") !important;
    width: auto !important;
    height: 50px !important;
    max-width: none !important;
}

/* ============================================================
   LEARNER-DASHBOARD navbar (.site-header-desktop only renders there)
   ============================================================ */
.site-header-desktop {
    background-color: #507F70 !important;
}
.site-header-desktop .main-nav .nav-link {
    color: #ffffff !important;
}
.site-header-desktop .menu-trigger.btn-outline-primary {
    color: #ffffff !important;
    border-color: #ffffff !important;
    background-color: transparent !important;
}
.site-header-desktop .menu-trigger.btn-outline-primary:hover,
.site-header-desktop .menu-trigger.btn-outline-primary:focus {
    color: #ffffff !important;
    border-color: #d2e2d2 !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
}
/* ============================================================
   LEARNING MFE — course header (.learning-header)
   ============================================================ */
.learning-header {
    background-color: #507F70 !important;
    border-bottom: none !important;
}

/* Course org name + course title — white text on green bg */
.learning-header .course-title-lockup,
.learning-header .course-title-lockup span,
.learning-header .course-title {
    color: #ffffff !important;
}

/* "Help" link (originally .text-gray-700) */
.learning-header a.text-gray-700 {
    color: #ffffff !important;
}
.learning-header a.text-gray-700:hover,
.learning-header a.text-gray-700:focus {
    color: #d2e2d2 !important;
}

/* User dropdown button — white outline, transparent bg, white text/icon */
.learning-header .user-dropdown .btn-outline-primary,
.learning-header .user-dropdown .dropdown-toggle.btn-outline-primary {
    color: #ffffff !important;
    border-color: #ffffff !important;
    background-color: transparent !important;
}
.learning-header .user-dropdown .btn-outline-primary:hover,
.learning-header .user-dropdown .btn-outline-primary:focus {
    color: #ffffff !important;
    border-color: #d2e2d2 !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
}
.learning-header a.logo {
    display: flex !important;
    align-items: center !important;
}

.learning-header a.logo img {
    height: 50px !important;
    width: auto !important;
    max-width: none !important;
    display: block !important;
}
.learning-header .container-xl {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

#courseHome-outline a {
    color: #212529 !important;
}
#courseHome-outline a:hover,
#courseHome-outline a:focus {
    color: #3c5f54 !important;
    text-decoration: underline;
}