/* PURPOSE: CSNOL branding overrides for the Keycloak Account Console (v3). */
/* PURPOSE: Applies CSNOL design tokens (colors, fonts) on top of the keycloak.v3 theme via PatternFly 5 variables. */

/*
 * CSNOL Design Tokens (shared with login theme):
 *
 * Colors:
 *   Brand red:        #D1232A  (primary)
 *   Brand red dark:   #a9151b  (hover/active)
 *   Black:            #000000
 *   White:            #FFFFFF
 *   Grey:             #7A7C7F
 *   Grey light:       #D9D9D9
 *   Grey bg:          #F2F2F2
 *
 * Font: "Open Sans", sans-serif (Google Fonts, weights 400/500/600/700)
 */

/* ============================================================
   1. Font Import
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');

/* ============================================================
   2. PatternFly 5 Global Variable Overrides
   ============================================================ */
:root {
    /* Brand colors */
    --pf-v5-global--primary-color--100: #D1232A;
    --pf-v5-global--primary-color--200: #a9151b;
    --pf-v5-global--active-color--100: #a9151b;

    /* Link colors */
    --pf-v5-global--link--Color: #000000;
    --pf-v5-global--link--Color--hover: #D1232A;
    --pf-v5-global--link--Color--dark--100: #000000;
    --pf-v5-global--link--Color--dark--hover: #D1232A;

    /* Font */
    --pf-v5-global--FontFamily--sans-serif: "Open Sans", sans-serif;
    --pf-v5-global--FontFamily--heading--sans-serif: "Open Sans", sans-serif;

    /* Danger/status colors — keep brand red consistent */
    --pf-v5-global--danger-color--100: #D1232A;
    --pf-v5-global--danger-color--200: #a9151b;
}

/* ============================================================
   3. Masthead / Page Header
   ============================================================ */
.pf-v5-c-masthead {
    --pf-v5-c-masthead--BackgroundColor: #FFFFFF;
    --pf-v5-c-masthead--m-display-inline--PaddingBlockStart: 0.5rem;
    --pf-v5-c-masthead--m-display-inline--PaddingBlockEnd: 0.5rem;
    border-bottom: 1px solid #D9D9D9;
}

/* User menu button — remove rectangular border, use rounded pill style */
.pf-v5-c-masthead .pf-v5-c-menu-toggle {
    border: none;
    border-radius: 21px;
    color: #000000;
}

.pf-v5-c-masthead .pf-v5-c-menu-toggle:hover {
    background-color: #F2F2F2;
}

.pf-v5-c-masthead .pf-v5-c-menu-toggle::before {
    border: none;
}

/* ============================================================
   4. Navigation Sidebar
   ============================================================ */

/* Force light theme on all nav elements — PF5 dark nav defaults
   are applied via high-specificity component variables. Using
   !important is the only reliable way to override them from a
   theme CSS file without duplicating PF5's full selector chain. */
.pf-v5-c-page__sidebar-body {
    background-color: #F5F5F5;
}

.pf-v5-c-page__sidebar-body .pf-v5-c-nav {
    --pf-v5-c-nav__link--Color: #000000;
    --pf-v5-c-nav__link--hover--Color: #D1232A;
    --pf-v5-c-nav__link--hover--BackgroundColor: #FFFFFF;
    --pf-v5-c-nav__link--m-current--Color: #000000;
    --pf-v5-c-nav__link--m-current--BackgroundColor: #FFFFFF;
    --pf-v5-c-nav__link--after--BackgroundColor: transparent;
    --pf-v5-c-nav__link--m-current--after--BackgroundColor: #D1232A;
}

.pf-v5-c-nav__link {
    color: #000000 !important;
    background-color: transparent !important;
}

.pf-v5-c-nav__link.pf-m-current {
    color: #000000 !important;
    font-weight: 600;
    background-color: #FFFFFF !important;
}

.pf-v5-c-nav__link.pf-m-current::after {
    background-color: #D1232A !important;
}

.pf-v5-c-nav__link:hover {
    color: #D1232A !important;
    background-color: #FFFFFF !important;
}

.pf-v5-c-nav__link:hover::after {
    background-color: #D1232A !important;
}

.pf-v5-c-nav__section-title {
    color: #7A7C7F;
}

/* Expandable nav group header */
.pf-v5-c-nav__link.pf-m-expandable {
    color: #000000 !important;
    background-color: transparent !important;
}

.pf-v5-c-nav__link.pf-m-expandable.pf-m-expanded {
    color: #000000 !important;
    background-color: transparent !important;
}

.pf-v5-c-nav__link.pf-m-expandable:hover {
    color: #D1232A !important;
    background-color: #FFFFFF !important;
}

/* Chevron icon in expandable groups */
.pf-v5-c-nav__toggle {
    color: inherit !important;
}

/* ============================================================
   5. Primary Buttons
   ============================================================ */
.pf-v5-c-button.pf-m-primary {
    --pf-v5-c-button--m-primary--BackgroundColor: #D1232A;
    --pf-v5-c-button--m-primary--hover--BackgroundColor: #a9151b;
    --pf-v5-c-button--m-primary--active--BackgroundColor: #a9151b;
    --pf-v5-c-button--m-primary--focus--BackgroundColor: #a9151b;
}

/* ============================================================
   6. Link Buttons
   ============================================================ */
.pf-v5-c-button.pf-m-link {
    --pf-v5-c-button--m-link--Color: #000000;
    --pf-v5-c-button--m-link--hover--Color: #D1232A;
}

/* ============================================================
   7. Alerts
   ============================================================ */
.pf-v5-c-alert.pf-m-danger {
    --pf-v5-c-alert--m-danger--icon--Color: #D1232A;
    --pf-v5-c-alert--m-danger__title--Color: #D1232A;
}

/* ============================================================
   8. Form Focus States
   ============================================================ */
.pf-v5-c-form-control:focus-within::after {
    --pf-v5-c-form-control--after--BorderBottomColor: #D1232A;
}