/* ML Hub look for the Keycloak account console (PatternFly 5 React app). */
:root {
    --mlhub-primary: #1677ff;
    --mlhub-primary-hover: #4096ff;
    --mlhub-primary-active: #0958d9;
    --mlhub-header: #001529;
    --mlhub-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

    --pf-v5-global--FontFamily--text: var(--mlhub-font);
    --pf-v5-global--FontFamily--heading: var(--mlhub-font);
    --pf-v5-global--primary-color--100: var(--mlhub-primary);
    --pf-v5-global--primary-color--200: var(--mlhub-primary-active);
    --pf-v5-global--link--Color: var(--mlhub-primary);
    --pf-v5-global--link--Color--hover: var(--mlhub-primary-hover);
    --pf-v5-global--BorderRadius--sm: 6px;
    --pf-v5-global--BackgroundColor--light-300: #f5f5f5;
}

body { font-family: var(--mlhub-font); background: #f5f5f5; }

/* top bar like the hub header */
.pf-v5-c-masthead {
    --pf-v5-c-masthead--BackgroundColor: var(--mlhub-header);
    background: var(--mlhub-header);
    min-height: 64px;
}
.pf-v5-c-masthead .pf-v5-c-brand, .pf-v5-c-masthead__brand img { max-height: 36px; border-radius: 8px; }

/* side menu like antd Menu */
.pf-v5-c-page__sidebar {
    --pf-v5-c-page__sidebar--BackgroundColor: #fff;
    background: #fff;
    border-right: 1px solid #f0f0f0;
}
.pf-v5-c-nav { --pf-v5-c-nav__link--Color: rgba(0, 0, 0, 0.88); --pf-v5-c-nav__link--hover--Color: var(--mlhub-primary); }
.pf-v5-c-nav__link { color: rgba(0, 0, 0, 0.88); border-radius: 8px; margin: 2px 8px; }
.pf-v5-c-nav__link::before, .pf-v5-c-nav__link::after { border: none !important; }
.pf-v5-c-nav__link:hover { background: rgba(0, 0, 0, 0.04); color: rgba(0, 0, 0, 0.88); }
.pf-v5-c-nav__link.pf-m-current, .pf-v5-c-nav__link.pf-m-current:hover {
    background: #e6f4ff; color: var(--mlhub-primary); font-weight: 500;
}
.pf-v5-c-nav__section-title { color: rgba(0, 0, 0, 0.45); }

.pf-v5-c-page__main-section.pf-m-light, .pf-v5-c-card { border-radius: 8px; }
.pf-v5-c-page__main-section { --pf-v5-c-page__main-section--BackgroundColor: #f5f5f5; }

.pf-v5-c-button { border-radius: 6px; }
.pf-v5-c-button.pf-m-primary {
    --pf-v5-c-button--m-primary--BackgroundColor: var(--mlhub-primary);
    --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--mlhub-primary-hover);
    --pf-v5-c-button--m-primary--active--BackgroundColor: var(--mlhub-primary-active);
}
.pf-v5-c-form-control { --pf-v5-c-form-control--BorderRadius: 6px; border-radius: 6px; }
.pf-v5-c-form-control::before, .pf-v5-c-form-control::after { border-radius: 6px; }