/*
 * UNCTAD ASYCUDA - Dev Pulse administration console theme.
 *
 * Recolours the stock Keycloak 26.x React / PatternFly 5 admin console with the
 * Dev Pulse brand by overriding PatternFly design tokens and a few component
 * rules. The admin-ui is a compiled SPA, so this is CSS-only: it cannot change
 * the layout, navigation or components - only colour, the masthead brand image
 * (set via the `logo` theme property) and the favicon.
 *
 * Brand: primary blue #0E41D8, teal accent #00C4AB.
 *
 * The source code below and the entirety of UNCTAD's ASYCUDA programme work are
 * and remain UNCTAD intellectual property at all time.
 * https://www.asycuda.org/licenses/source-code-policy
 */

:root {
    --dp-blue: #0E41D8;
    --dp-blue-hover: #0c39bf;
    --dp-blue-active: #0a30a2;
    --dp-teal: #00C4AB;

    /* ---- PatternFly 5 semantic brand tokens (current token system) ---- */
    --pf-t--global--color--brand--default: var(--dp-blue);
    --pf-t--global--color--brand--hover: var(--dp-blue-hover);
    --pf-t--global--color--brand--clicked: var(--dp-blue-active);

    /* ---- PatternFly 5 legacy global tokens (still referenced internally) ---- */
    --pf-v5-global--primary-color--100: var(--dp-blue);
    --pf-v5-global--primary-color--200: var(--dp-blue-active);
    --pf-v5-global--link--Color: var(--dp-blue);
    --pf-v5-global--link--Color--hover: var(--dp-blue-hover);
    --pf-v5-global--active-color--100: var(--dp-blue);
    --pf-v5-global--active-color--200: var(--dp-blue-active);

    /* ---- PatternFly 4 fallback tokens (defensive) ---- */
    --pf-global--primary-color--100: var(--dp-blue);
    --pf-global--primary-color--200: var(--dp-blue-active);
    --pf-global--link--Color: var(--dp-blue);
    --pf-global--active-color--100: var(--dp-blue);
}

/* ----------------------------------------------------------------------------
   Masthead: brand image (from the `logo` property) sizing + subtle brand shadow.
   ---------------------------------------------------------------------------- */
.pf-v5-c-masthead {
    box-shadow: 0 2px 8px rgba(14, 65, 216, 0.10);
}
.pf-v5-c-brand,
.pf-v5-c-masthead__brand img,
img.pf-v5-c-brand {
    height: 36px !important;
    width: auto !important;
}

/* ----------------------------------------------------------------------------
   Primary buttons.
   ---------------------------------------------------------------------------- */
.pf-v5-c-button.pf-m-primary {
    background-color: var(--dp-blue) !important;
    color: #fff !important;
}
.pf-v5-c-button.pf-m-primary:hover { background-color: var(--dp-blue-hover) !important; }
.pf-v5-c-button.pf-m-primary:active { background-color: var(--dp-blue-active) !important; }

/* Link / inline buttons + anchors. */
.pf-v5-c-button.pf-m-link,
.pf-v5-c-button.pf-m-link:hover,
a { color: var(--dp-blue); }
a:hover { color: var(--dp-blue-hover); }

/* ----------------------------------------------------------------------------
   Left navigation: active item accent in brand blue.
   ---------------------------------------------------------------------------- */
.pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link {
    --pf-v5-c-nav__link--m-current--Color: var(--dp-blue);
    border-inline-start-color: var(--dp-blue) !important;
}
.pf-v5-c-nav__link:hover { color: var(--dp-blue); }

/* ----------------------------------------------------------------------------
   Tabs: active tab underline in brand blue.
   ---------------------------------------------------------------------------- */
.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link::after {
    --pf-v5-c-tabs__link--after--BorderColor: var(--dp-blue);
    border-color: var(--dp-blue) !important;
}

/* ----------------------------------------------------------------------------
   Form controls: focus ring + checked controls on brand colour.
   ---------------------------------------------------------------------------- */
.pf-v5-c-form-control:focus-within {
    --pf-v5-c-form-control--BorderBottomColor: var(--dp-blue);
}
.pf-v5-c-check__input:checked,
.pf-v5-c-radio__input:checked { accent-color: var(--dp-blue); }
.pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle {
    background-color: var(--dp-blue);
}

/* Loading spinner (shown in admin/index.ftl while the SPA boots). */
.pf-v5-c-spinner { --pf-v5-c-spinner--Color: var(--dp-blue); }

/* ----------------------------------------------------------------------------
   Dark mode (admin-ui adds .pf-v5-theme-dark on <html> following the OS).
   Keep the same brand hue; PF5 dark tokens otherwise drive the surfaces.
   ---------------------------------------------------------------------------- */
.pf-v5-theme-dark {
    --pf-t--global--color--brand--default: #5a78ff;
    --pf-t--global--color--brand--hover: #7b94ff;
    --pf-v5-global--primary-color--100: #5a78ff;
    --pf-v5-global--link--Color: #8aa0ff;
}
.pf-v5-theme-dark .pf-v5-c-button.pf-m-primary {
    background-color: #2a55e6 !important;
}
.pf-v5-theme-dark .pf-v5-c-button.pf-m-primary:hover {
    background-color: #3a63ef !important;
}
.pf-v5-theme-dark a,
.pf-v5-theme-dark .pf-v5-c-button.pf-m-link { color: #8aa0ff; }