/*
 * MarketPay design on the administration and account consoles: the colours,
 * font and buttons of the MarketPay login, on a white header carrying the
 * MarketPay logo and a MarketPay dark sidebar.
 */

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/lato-400.woff2") format("woff2");
}

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/lato-700.woff2") format("woff2");
}

:root {
    --mp-text: #373f51;
    --mp-muted: #99aeb9;
    --mp-border: #cad4d9;
    --mp-field: #f5f5f5;
    --mp-accent: #48f5cc;
    --mp-link: #00a2a7;
    --mp-link-dark: #008286;
    --mp-error: #fd005c;
    --mp-sidebar: #373f51;
    --mp-gradient: linear-gradient(126deg, #00a2a7 -24.67%, #37dcb5 85.38%);

    --pf-v5-global--FontFamily--text: "Lato", sans-serif;
    --pf-v5-global--FontFamily--heading: "Lato", sans-serif;
    --pf-v5-global--Color--100: var(--mp-text);
    --pf-v5-global--primary-color--100: var(--mp-link);
    --pf-v5-global--primary-color--200: var(--mp-link-dark);
    --pf-v5-global--active-color--100: var(--mp-link);
    --pf-v5-global--link--Color: var(--mp-link);
    --pf-v5-global--link--Color--hover: var(--mp-link-dark);
    --pf-v5-global--danger-color--100: var(--mp-error);
}

body {
    color: var(--mp-text);
}

/* --- Header: white, MarketPay logo ---------------------------------------- */

.pf-v5-c-masthead {
    --pf-v5-c-masthead--BackgroundColor: #fff;
    --pf-v5-c-masthead__toggle--c-button--Color: var(--mp-text);
    color: var(--mp-text);
    border-bottom: 1px solid var(--mp-border);
}

.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain,
.pf-v5-c-masthead .pf-v5-c-menu-toggle {
    --pf-v5-c-button--m-plain--Color: var(--mp-text);
    --pf-v5-c-button--m-plain--hover--Color: var(--mp-link);
    --pf-v5-c-menu-toggle--Color: var(--mp-text);
    --pf-v5-c-menu-toggle--BackgroundColor: transparent;
    color: var(--mp-text);
}

/* The help and avatar toggles are plain toggles, light by default. */
.pf-v5-c-masthead .pf-v5-c-menu-toggle.pf-m-plain {
    --pf-v5-c-menu-toggle--m-plain--Color: var(--mp-text);
    --pf-v5-c-menu-toggle--m-plain--hover--Color: var(--mp-link);
    color: var(--mp-text);
}

.pf-v5-c-masthead .pf-v5-c-menu-toggle::before {
    border-color: var(--mp-border);
    border-radius: 6px;
}

.pf-v5-c-masthead__brand img {
    height: 28px;
    width: auto;
}

/* --- Sidebar: MarketPay dark, mint marker on the current page -------------- */

.pf-v5-c-page__sidebar {
    --pf-v5-c-page__sidebar--BackgroundColor: var(--mp-sidebar);
}

.pf-v5-c-nav {
    --pf-v5-c-nav__link--Color: #fff;
    --pf-v5-c-nav__link--hover--Color: var(--mp-accent);
    --pf-v5-c-nav__link--m-current--Color: #fff;
    --pf-v5-c-nav__link--m-current--BackgroundColor: rgba(255, 255, 255, 0.08);
    --pf-v5-c-nav__link--hover--BackgroundColor: rgba(255, 255, 255, 0.05);
    --pf-v5-c-nav__link--before--BorderColor: rgba(255, 255, 255, 0.08);
    --pf-v5-c-nav__link--after--BorderColor: var(--mp-accent);
    --pf-v5-c-nav__link--m-current--after--BorderColor: var(--mp-accent);
    --pf-v5-c-nav__link--hover--after--BorderColor: var(--mp-accent);
    --pf-v5-c-nav__section-title--Color: var(--mp-muted);
}

/* Sub-items, as in the account console, carry their own marker colour. */
.pf-v5-c-nav__link.pf-m-current::after,
.pf-v5-c-nav__link:hover::after {
    border-color: var(--mp-accent);
}

/* --- Links ---------------------------------------------------------------- */

/* Table links keep the PatternFly blue otherwise. */
.pf-v5-c-table a:not(.pf-v5-c-button) {
    color: var(--mp-link);
}

/* --- Buttons --------------------------------------------------------------- */

.pf-v5-c-button {
    --pf-v5-c-button--BorderRadius: 6px;
}

.pf-v5-c-button.pf-m-primary {
    background: var(--mp-gradient);
    border: none;
    font-weight: 700;
    color: #fff;
}

.pf-v5-c-button.pf-m-primary:hover,
.pf-v5-c-button.pf-m-primary:focus {
    background: var(--mp-link-dark);
}

.pf-v5-c-button.pf-m-primary:disabled,
.pf-v5-c-button.pf-m-primary.pf-m-disabled,
.pf-v5-c-button.pf-m-primary.pf-m-aria-disabled {
    background: #ececec;
    color: var(--mp-border);
}

.pf-v5-c-button.pf-m-secondary {
    --pf-v5-c-button--m-secondary--Color: var(--mp-link);
    --pf-v5-c-button--m-secondary--after--BorderColor: var(--mp-link);
    --pf-v5-c-button--m-secondary--hover--Color: var(--mp-link-dark);
    --pf-v5-c-button--m-secondary--hover--after--BorderColor: var(--mp-link-dark);
}

/* --- Fields ---------------------------------------------------------------- */

.pf-v5-c-form-control {
    --pf-v5-c-form-control--BackgroundColor: var(--mp-field);
    --pf-v5-c-form-control--before--BorderColor: transparent;
    --pf-v5-c-form-control--after--BorderColor: transparent;
    --pf-v5-c-form-control--hover--after--BorderBottomColor: transparent;
    --pf-v5-c-form-control--focus--after--BorderBottomColor: transparent;
    --pf-v5-c-form-control--Color: var(--mp-text);
    border-radius: 6px;
}

.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after {
    border: none;
}

.pf-v5-c-form-control:focus-within {
    outline: 1px solid var(--mp-accent);
}

/* The field draws the focus ring, the input inside it does not. */
.pf-v5-c-form-control > :is(input, textarea, select):focus {
    outline: none;
}

.pf-v5-c-form-control.pf-m-error {
    outline: 1px solid var(--mp-error);
}

/* --- Switches, tabs, labels ------------------------------------------------ */

.pf-v5-c-switch {
    --pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--mp-link);
}

.pf-v5-c-tabs {
    --pf-v5-c-tabs__item--m-current__link--after--BorderColor: var(--mp-link);
    --pf-v5-c-tabs__item--m-current__link--Color: var(--mp-text);
}

.pf-v5-c-label.pf-m-blue {
    --pf-v5-c-label--m-blue--BackgroundColor: #e5f8f6;
    --pf-v5-c-label--m-blue--Color: var(--mp-link-dark);
}