/*
 * Identite visuelle Yapuka Hub pour la console Mon compte de Keycloak 26.
 *
 * Cette feuille surcharge les jetons PatternFly et quelques composants
 * structurels stables. Elle ne copie ni ne remplace l'application React de
 * Keycloak, afin de conserver ses mises a jour fonctionnelles et de securite.
 */

:root {
    --yapuka-hub-accent: #2563eb;
    --yapuka-hub-accent-soft: #60a5fa;
    --yapuka-hub-accent-rgb: 37, 99, 235;
    --yapuka-hub-canvas: #f7f8fc;
    --yapuka-hub-surface: #ffffff;
    --yapuka-hub-sidebar: #111827;
    --yapuka-hub-sidebar-soft: #1f2937;
    --yapuka-hub-ink: #171526;
    --yapuka-hub-muted: #6b7280;
    --yapuka-hub-line: #e5e7eb;

    --pf-v5-global--primary-color--100: var(--yapuka-hub-accent);
    --pf-v5-global--primary-color--200: #1d4ed8;
    --pf-v5-global--active-color--100: var(--yapuka-hub-accent);
    --pf-v5-global--active-color--200: #1d4ed8;
    --pf-v5-global--link--Color: var(--yapuka-hub-accent);
    --pf-v5-global--link--Color--hover: #1d4ed8;
    --pf-v5-global--BackgroundColor--100: var(--yapuka-hub-surface);
    --pf-v5-global--BackgroundColor--200: var(--yapuka-hub-canvas);
    --pf-v5-global--Color--100: var(--yapuka-hub-ink);
    --pf-v5-global--Color--200: var(--yapuka-hub-muted);
    --pf-v5-global--FontFamily--text: Inter, ui-sans-serif, system-ui, sans-serif;
    --pf-v5-global--FontFamily--heading: "Bricolage Grotesque", Inter, ui-sans-serif, system-ui, sans-serif;
}

html,
body,
.pf-v5-c-page {
    min-height: 100%;
    background:
        radial-gradient(circle at 94% 0%, rgba(var(--yapuka-hub-accent-rgb), .1) 0, transparent 24%),
        var(--yapuka-hub-canvas);
    color: var(--yapuka-hub-ink);
}

.pf-v5-c-masthead {
    position: relative;
    background: var(--yapuka-hub-sidebar);
    box-shadow: 0 8px 26px rgba(17, 24, 39, .18);
}

.pf-v5-c-masthead::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, #1e3a8a, var(--yapuka-hub-accent), var(--yapuka-hub-accent-soft), #22d3ee);
    box-shadow: 0 2px 16px rgba(var(--yapuka-hub-accent-rgb), .32);
}

/* Mot-symbole propre au Hub: le carre reprend l'accent du preset et
   l'identite produit porte le meme couple HUB / v1 que dans le Core. */
.pf-v5-c-masthead__brand img[alt="Logo"] {
    width: 162px;
    height: 54px;
    object-fit: contain;
    content: url("../img/yapuka-hub-wordmark.svg");
}

/* Le menu du compte est pose sur un en-tete sombre. Il conserve donc
   explicitement l'accent Hub au lieu d'heriter du fond blanc des controles. */
.pf-v5-c-masthead .pf-v5-c-menu-toggle {
    border: 1px solid rgba(255, 255, 255, .2);
    background: var(--yapuka-hub-accent);
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(var(--yapuka-hub-accent-rgb), .28);
}

.pf-v5-c-masthead .pf-v5-c-menu-toggle:hover,
.pf-v5-c-masthead .pf-v5-c-menu-toggle:focus-visible,
.pf-v5-c-masthead .pf-v5-c-menu-toggle.pf-m-expanded {
    background: #1d4ed8;
    color: #ffffff;
}

.pf-v5-c-masthead .pf-v5-c-menu-toggle *,
.pf-v5-c-masthead .pf-v5-c-menu-toggle svg {
    color: inherit;
    fill: currentColor;
}

.pf-v5-c-page__sidebar,
.pf-v5-c-page__sidebar-body {
    background: var(--yapuka-hub-sidebar);
}

.pf-v5-c-nav__link {
    color: #cbd5e1;
    transition: background-color .16s ease, color .16s ease;
}

.pf-v5-c-nav__link:hover,
.pf-v5-c-nav__link:focus-visible {
    background: var(--yapuka-hub-sidebar-soft);
    color: #ffffff;
}

.pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav__link[aria-current="page"] {
    background: linear-gradient(90deg, rgba(var(--yapuka-hub-accent-rgb), .3), rgba(var(--yapuka-hub-accent-rgb), .08));
    color: #ffffff;
}

.pf-v5-c-nav__link.pf-m-current::after,
.pf-v5-c-nav__link[aria-current="page"]::after {
    border-color: var(--yapuka-hub-accent-soft);
}

.pf-v5-c-page__main-section {
    background: transparent;
}

h1,
h2,
h3,
.pf-v5-c-title {
    color: var(--yapuka-hub-ink);
    letter-spacing: -.025em;
}

.pf-v5-c-form-control,
.pf-v5-c-select__toggle,
.pf-v5-c-menu-toggle {
    border-radius: 8px;
    background: var(--yapuka-hub-surface);
}

.pf-v5-c-form-control:focus-within,
.pf-v5-c-select__toggle:focus,
.pf-v5-c-menu-toggle:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(var(--yapuka-hub-accent-rgb), .16);
}

.pf-v5-c-button.pf-m-primary {
    border-radius: 8px;
    background: linear-gradient(120deg, var(--yapuka-hub-accent), #3978e9);
    box-shadow: 0 8px 22px rgba(var(--yapuka-hub-accent-rgb), .22);
}

.pf-v5-c-button.pf-m-primary:hover {
    background: #1d4ed8;
}

@media (max-width: 768px) {
    .pf-v5-c-masthead__brand img[alt="Logo"] {
        width: 140px;
        height: 48px;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --yapuka-hub-canvas: #111318;
        --yapuka-hub-surface: #191c22;
        --yapuka-hub-ink: #f5f7fb;
        --yapuka-hub-muted: #a5adbb;
        --yapuka-hub-line: #323844;
    }
}