/* CP/COMPARTNER branding for the account console (parent: keycloak.v3, PatternFly 5).
 *
 * Same token approach as the admin theme (src/admin/resources/css/styles.css):
 * PatternFly declares its globals behind :where(:root) — zero specificity —
 * and index.ftl links this sheet after the bundled styles, so a plain :root
 * block here wins.
 *
 * One theme source serves both jars, and the two Keycloak generations build
 * the header from different components — KC 25 uses .pf-v5-c-page__header,
 * KC 26 .pf-v5-c-masthead — so both selectors are styled side by side.
 *
 * The console is light-only: theme.properties sets darkMode=false, so
 * .pf-v5-theme-dark is never applied and PatternFly's dark tokens never come
 * into play.
 *
 * Brand palette (same as the login and admin themes):
 *   navy #202f5a · navy-light #2c3d6d · coral #eb545b · coral-dark #d43f46
 *   off-white #f2f3ed · sage #d1d4c3
 */

@font-face {
    font-family: "BreuerText";
    src: url("../fonts/BreuerText-Light.ttf") format("truetype");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "BreuerText";
    src: url("../fonts/BreuerText-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* ---------- typography ---------- */
/* Breuer only ships Light and Medium, so PatternFly's 400/700 are remapped
   onto the two weights that exist — without this every text would fall back
   to Medium (CSS weight matching picks 500 for both 400 and 700). */
:root {
    --pf-v5-global--FontFamily--text: "BreuerText", "Helvetica Neue", Helvetica, Arial,
        sans-serif;
    --pf-v5-global--FontFamily--text--vf: var(--pf-v5-global--FontFamily--text);
    --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--text);
    --pf-v5-global--FontFamily--heading--vf: var(--pf-v5-global--FontFamily--text);

    --pf-v5-global--FontWeight--normal: 200;
    --pf-v5-global--FontWeight--bold: 500;
}

/* ---------- palette ---------- */
:root {
    /* primary actions (Speichern, spinners, focus) — coral like the login CTA */
    --pf-v5-global--primary-color--100: #eb545b;
    --pf-v5-global--primary-color--200: #d43f46;
    --pf-v5-global--primary-color--dark-100: #eb545b;
    --pf-v5-global--primary-color--light-100: #f0777d;

    /* accents: current nav item, jump links, tabs, switches, focus borders */
    --pf-v5-global--active-color--100: #eb545b;
    --pf-v5-global--active-color--400: #f0777d;

    /* links: navy, coral on hover — matches the website/login */
    --pf-v5-global--link--Color: #202f5a;
    --pf-v5-global--link--Color--hover: #eb545b;
    --pf-v5-global--link--Color--dark: #202f5a;
    --pf-v5-global--link--Color--dark--hover: #d43f46;
    --pf-v5-global--link--Color--light: #f0777d;
    --pf-v5-global--link--Color--light--hover: #f5989c;

    /* page background behind the content sections — off-white, not PF gray */
    --pf-v5-global--BackgroundColor--200: #f2f3ed;

    /* headings and body copy in brand navy instead of near-black */
    --pf-v5-global--Color--100: #202f5a;
    --pf-v5-global--Color--dark-100: #202f5a;
}

/* ---------- loading screen ---------- */
/* index.ftl carries its own <style> for the splash shown before the SPA
   boots, and that one still has a prefers-color-scheme rule — without this
   the console flashes dark on a dark desktop before turning light. */
.keycloak__loading-container {
    color: #202f5a !important;
    background-color: #ffffff !important;
}

/* ---------- header ---------- */
.pf-v5-c-page__header {
    --pf-v5-c-page__header--BackgroundColor: #202f5a;
}
.pf-v5-c-masthead {
    --pf-v5-c-masthead--BackgroundColor: #202f5a;
}

/* resources/logo.svg is the 300x40 wordmark (the login logo recolored white,
   coral "//" kept) — the 400x80 variant carries the claim line, which is
   illegible at masthead height. The console's own rule sizes it to 35px. */
.pf-v5-c-page__header .pf-v5-c-brand,
.pf-v5-c-masthead .pf-v5-c-brand {
    height: 26px;
}

/* ---------- sidebar navigation ---------- */
/* Navy instead of PatternFly's dark gray, so header and nav read as one
   brand surface. The nav keeps its dark-on-light text colors; only the
   surfaces behind it are re-tinted. */
.pf-v5-c-page__sidebar {
    --pf-v5-c-page__sidebar--BackgroundColor: #202f5a;
}

.pf-v5-c-page__sidebar .pf-v5-c-nav {
    /* hover/active/current highlight — one step lighter than the sidebar */
    --pf-v5-c-nav__link--hover--BackgroundColor: #2c3d6d;
    --pf-v5-c-nav__link--focus--BackgroundColor: #2c3d6d;
    --pf-v5-c-nav__link--active--BackgroundColor: #2c3d6d;
    --pf-v5-c-nav__link--m-current--BackgroundColor: #2c3d6d;
    /* separator lines between items */
    --pf-v5-c-nav__link--before--BorderColor: #2c3d6d;
    --pf-v5-c-nav__item--before--BorderColor: #2c3d6d;
}

/* ---------- content ---------- */
/* Form fields: sage frame, navy underline on hover/focus — like the login
   form. PatternFly 5.4 draws the frame in a ::before and the (thicker)
   bottom edge in an ::after, hence the token names. */
.pf-v5-c-form-control {
    --pf-v5-c-form-control--before--BorderTopColor: #d1d4c3;
    --pf-v5-c-form-control--before--BorderRightColor: #d1d4c3;
    --pf-v5-c-form-control--before--BorderLeftColor: #d1d4c3;
    --pf-v5-c-form-control--before--BorderBottomColor: #d1d4c3;
    --pf-v5-c-form-control--after--BorderBottomColor: #d1d4c3;
    --pf-v5-c-form-control--hover--after--BorderBottomColor: #202f5a;
    --pf-v5-c-form-control--focus--after--BorderBottomColor: #202f5a;
}

/* Buttons: rounded like the login CTA rather than PatternFly's square edges. */
.pf-v5-c-button {
    --pf-v5-c-button--BorderRadius: 4px;
    --pf-v5-c-button--FontWeight: 500;
}