/* ============================================================================
   DataNature — Keycloak Administration Console skin

   Loaded AFTER the console's own PatternFly 5 bundle (index.ftl emits
   `entryStyles` first, then `properties.styles`), so almost everything here is
   a PatternFly design-token remap rather than a selector fight. Tokens mirror
   the login theme (src/login/theme.css) so both surfaces read as one product:
     · Green primary #3DB549 (hover #2E9B39)   · Blue link/focus #1B5ECC
     · Inter font                              · softer radii, white masthead
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root {
    /* --- DataNature palette (same values as the login theme) --- */
    --dn-accent: #3db549;
    --dn-accent-hover: #2e9b39;
    --dn-accent-strong: #257a2e;
    --dn-accent-soft: rgba(61, 181, 73, 0.12);

    --dn-blue: #1b5ecc;
    --dn-blue-hover: #1449a8;
    --dn-blue-soft: rgba(27, 94, 204, 0.08);

    --dn-bg-page: #f4f5f7;
    --dn-surface: #ffffff;
    --dn-surface-2: #f8f9fb;

    --dn-fg: #111827;
    --dn-fg-secondary: #4b5563;
    --dn-fg-tertiary: #9ca3af;

    --dn-border: #e5e7eb;
    --dn-border-subtle: #f0f1f3;
    --dn-border-strong: #d1d5db;

    --dn-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;

    /* --- typography ------------------------------------------------------ */
    --pf-v5-global--FontFamily--text: var(--dn-font);
    --pf-v5-global--FontFamily--heading: var(--dn-font);
    --pf-v5-global--FontFamily--sans-serif: var(--dn-font);
    --pf-v5-global--FontFamily--redhat-updated--sans-serif: var(--dn-font);
    --pf-v5-global--FontFamily--redhatVF--sans-serif: var(--dn-font);
    --pf-v5-global--FontFamily--redhatVF--heading--sans-serif: var(--dn-font);

    /* --- brand colour -----------------------------------------------------
       primary-color drives filled buttons; active-color drives the "you are
       here" affordances (nav marker, tab underline, checked switches). */
    --pf-v5-global--primary-color--100: var(--dn-accent);
    --pf-v5-global--primary-color--200: var(--dn-accent-strong);
    --pf-v5-global--active-color--100: var(--dn-accent);
    --pf-v5-global--active-color--200: var(--dn-accent-strong);

    /* Links stay blue — green-on-white reads as a button, not a link.
       (These default to primary-color--100, so they must be set explicitly.) */
    --pf-v5-global--link--Color: var(--dn-blue);
    --pf-v5-global--link--Color--hover: var(--dn-blue-hover);
    --pf-v5-global--link--Color--visited: var(--dn-blue);

    /* --- neutrals + shape ------------------------------------------------ */
    --pf-v5-global--Color--100: var(--dn-fg);
    --pf-v5-global--Color--200: var(--dn-fg-secondary);
    --pf-v5-global--BorderColor--100: var(--dn-border-strong);
    --pf-v5-global--BorderColor--300: var(--dn-border);
    --pf-v5-global--BackgroundColor--200: var(--dn-bg-page);

    --pf-v5-global--BorderRadius--sm: 8px;
    --pf-v5-global--BorderRadius--lg: 12px;

    /* focus ring, matched to the login form */
    --pf-v5-global--primary-color--light-100: var(--dn-blue-soft);
}

/* ------------------------------------------------------------- masthead ---
   Keycloak ships a near-black masthead. The DataNature mark is green/blue on
   transparent, so the bar is flipped to white and everything inside it is
   re-coloured to dark — otherwise the toolbar icons and the account dropdown
   would stay white-on-white. */
.pf-v5-c-masthead {
    --pf-v5-c-masthead--BackgroundColor: var(--dn-surface);
    --pf-v5-c-masthead--Color: var(--dn-fg);
    --pf-v5-c-masthead--BorderBottomWidth: 1px;
    --pf-v5-c-masthead--BorderBottomColor: var(--dn-border);
    color: var(--dn-fg);
    border-bottom: 1px solid var(--dn-border);
}

/* toolbar icons (help, kebab) and the sidebar hamburger */
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain,
.pf-v5-c-masthead .pf-v5-c-menu-toggle,
.pf-v5-c-masthead .pf-v5-c-dropdown__toggle,
.pf-v5-c-masthead__toggle .pf-v5-c-button {
    color: var(--dn-fg-secondary);
}
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain:hover,
.pf-v5-c-masthead .pf-v5-c-menu-toggle:hover,
.pf-v5-c-masthead .pf-v5-c-dropdown__toggle:hover,
.pf-v5-c-masthead__toggle .pf-v5-c-button:hover {
    color: var(--dn-fg);
    background-color: var(--dn-surface-2);
}
/* the "admin ▾" username and its caret */
.pf-v5-c-masthead .pf-v5-c-menu-toggle__text,
.pf-v5-c-masthead .pf-v5-c-menu-toggle__controls,
.pf-v5-c-masthead .pf-v5-c-dropdown__toggle-text,
.pf-v5-c-masthead .pf-v5-c-dropdown__toggle-icon {
    color: var(--dn-fg);
    font-weight: 500;
}

/* brand lockup — the logo is a wide wordmark, so cap the height, not the width */
.pf-v5-c-masthead__brand,
.keycloak__pageheader_brand {
    height: 30px;
    width: auto;
    max-width: 240px;
    object-fit: contain;
}

/* ------------------------------------------------------------- sidebar ---- */
.pf-v5-c-page__sidebar {
    --pf-v5-c-page__sidebar--BackgroundColor: var(--dn-surface);
    border-right: 1px solid var(--dn-border-subtle);
}
.pf-v5-c-nav__link {
    font-size: 14px;
    color: var(--dn-fg-secondary);
    border-radius: 8px;
}
.pf-v5-c-nav__link:hover {
    color: var(--dn-fg);
    background-color: var(--dn-surface-2);
}
.pf-v5-c-nav__item .pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav__item .pf-v5-c-nav__link[aria-current="page"] {
    color: var(--dn-accent-strong);
    background-color: var(--dn-accent-soft);
    font-weight: 600;
}
/* realm selector at the top of the nav */
.pf-v5-c-page__sidebar .pf-v5-c-menu-toggle {
    border-radius: 10px;
}

/* --------------------------------------------------------------- pages ---- */
.pf-v5-c-page__main-section {
    --pf-v5-c-page__main-section--BackgroundColor: var(--dn-bg-page);
}
.pf-v5-c-title,
.pf-v5-c-content h1,
.pf-v5-c-content h2 {
    letter-spacing: -0.015em;
}
.pf-v5-c-card {
    --pf-v5-c-card--BackgroundColor: var(--dn-surface);
    border: 1px solid var(--dn-border-subtle);
    border-radius: 12px;
}

/* --------------------------------------------------------------- tabs ----- */
.pf-v5-c-tabs__link {
    font-weight: 500;
}
.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link {
    color: var(--dn-accent-strong);
    font-weight: 600;
}

/* ------------------------------------------------------------ controls ---- */
.pf-v5-c-button {
    font-weight: 600;
}
.pf-v5-c-button.pf-m-primary {
    --pf-v5-c-button--m-primary--BackgroundColor: var(--dn-accent);
    --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--dn-accent-hover);
    --pf-v5-c-button--m-primary--active--BackgroundColor: var(--dn-accent-strong);
    --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--dn-accent-hover);
}
.pf-v5-c-button.pf-m-secondary {
    --pf-v5-c-button--m-secondary--Color: var(--dn-blue);
    --pf-v5-c-button--m-secondary--BorderColor: var(--dn-blue);
    --pf-v5-c-button--m-secondary--hover--Color: var(--dn-blue-hover);
    --pf-v5-c-button--m-secondary--hover--BorderColor: var(--dn-blue-hover);
}
.pf-v5-c-button.pf-m-link {
    --pf-v5-c-button--m-link--Color: var(--dn-blue);
    --pf-v5-c-button--m-link--hover--Color: var(--dn-blue-hover);
}

.pf-v5-c-form-control {
    --pf-v5-c-form-control--BorderRadius: 8px;
    --pf-v5-c-form-control--focus--BorderBottomColor: var(--dn-blue);
    --pf-v5-c-form-control--BorderBottomColor: var(--dn-border-strong);
}
.pf-v5-c-form-control:focus-within {
    box-shadow: 0 0 0 3px var(--dn-blue-soft);
}

/* switches (e.g. Enabled, Dark mode) */
.pf-v5-c-switch {
    --pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--dn-accent);
    --pf-v5-c-switch__input--checked__toggle--hover--BackgroundColor: var(
        --dn-accent-hover
    );
}

/* checkboxes / radios */
.pf-v5-c-check__input,
.pf-v5-c-radio__input {
    accent-color: var(--dn-accent);
}

/* -------------------------------------------------------------- tables ---- */
.pf-v5-c-table thead th {
    font-size: 13px;
    letter-spacing: 0.02em;
    color: var(--dn-fg-secondary);
}
.pf-v5-c-table tbody tr:hover {
    background-color: var(--dn-surface-2);
}

/* --------------------------------------------------- login-page parity ----
   Keycloak's own admin login is served by the *login* theme, so nothing to do
   here — set Login theme = authenticator-theme on the realm for that. */