/*
 * =============================================================================
 * identity role: the lt account theme's stylesheet
 * -----------------------------------------------------------------------------
 * Loaded after keycloak.v3's own and pf-dark.css, so Keycloak's account
 * console looks like GitLab once signed in, in the platform look (edge role
 * README, Platform look): GitLab's header and footer message bars, the
 * wordmark in a dark header, GitLab's dark left navigation (rounded items,
 * the current one marked in teal), dark bordered sections like GitLab's
 * settings pages, GitLab's form controls, the navy palette. CSS only: the
 * console is keycloak.v3's React application, so the bars' texts are CSS
 * too (lt-bars.css, the same as the login theme's messages). System fonts
 * only: the hosts fetch nothing from the internet.
 * =============================================================================
 */

/* --- The platform palette (the same in the login theme and the edge role's pages) --- */
:root {
    --lt-navy: #0B1F3A;
    --lt-deep: #071528;
    --lt-box: #102846;
    --lt-tile: #13294A;
    --lt-line: #24405F;
    --lt-input-line: #3A5878;
    --lt-teal: #00A3AD;
    --lt-teal-button: #007C84;
    --lt-teal-button-hover: #00666D;
    --lt-mint: #5FD4C8;
    --lt-sky: #9FE3F0;
    --lt-white: #FFFFFF;
    --lt-text: #E6ECF3;
    --lt-text-2: #C3CDDA;
    --lt-muted: #9AA8BC;
    /* GitLab's font stack; GitLab Sans and Inter only when installed. */
    --lt-font: "GitLab Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu,
        Cantarell, "Helvetica Neue", sans-serif;
    --lt-bar-height: 1.75rem;
}

/* --- PatternFly 5's dark theme, on the navy palette (as in the login theme) --- */
:root {
    --pf-v5-global--FontFamily--text: var(--lt-font);
    --pf-v5-global--FontFamily--heading: var(--lt-font);
    --pf-v5-global--BackgroundColor--100: var(--lt-box);
    --pf-v5-global--BackgroundColor--150: var(--lt-tile);
    --pf-v5-global--BackgroundColor--200: var(--lt-navy);
    --pf-v5-global--BackgroundColor--300: var(--lt-tile);
    --pf-v5-global--BackgroundColor--400: var(--lt-tile);
    --pf-v5-global--BackgroundColor--light-100: var(--lt-box);
    --pf-v5-global--BackgroundColor--light-200: var(--lt-navy);
    --pf-v5-global--BackgroundColor--light-300: var(--lt-tile);
    --pf-v5-global--BackgroundColor--dark-100: var(--lt-deep);
    --pf-v5-global--BackgroundColor--dark-200: var(--lt-navy);
    --pf-v5-global--BackgroundColor--dark-300: var(--lt-deep);
    --pf-v5-global--BackgroundColor--dark-400: var(--lt-tile);
    --pf-v5-global--BorderColor--100: var(--lt-line);
    --pf-v5-global--BorderColor--200: var(--lt-line);
    --pf-v5-global--BorderColor--300: var(--lt-input-line);
    --pf-v5-global--BorderColor--dark-100: var(--lt-line);
    --pf-v5-global--BorderColor--light-100: var(--lt-line);
    --pf-v5-global--Color--100: var(--lt-text);
    --pf-v5-global--Color--200: var(--lt-text-2);
    --pf-v5-global--Color--dark-100: var(--lt-text);
    --pf-v5-global--Color--dark-200: var(--lt-text-2);
    --pf-v5-global--Color--light-100: var(--lt-text);
    --pf-v5-global--Color--light-200: var(--lt-text-2);
    /* PatternFly's dark theme: 100 is the accent on dark (mint), 300 the primary buttons, 400 their text. Dark
       teal buttons: white on them passes WCAG AA (4.9:1), white on bright teal would not. */
    --pf-v5-global--primary-color--100: var(--lt-mint);
    --pf-v5-global--primary-color--200: var(--lt-teal-button-hover);
    --pf-v5-global--primary-color--300: var(--lt-teal-button);
    --pf-v5-global--primary-color--400: var(--lt-white);
    /* The dark theme's black (headers, toolbars) is the deep navy. */
    --pf-v5-global--palette--black-1000: var(--lt-deep);
    --pf-v5-global--primary-color--dark-100: var(--lt-mint);
    --pf-v5-global--primary-color--light-100: var(--lt-mint);
    --pf-v5-global--link--Color: var(--lt-mint);
    --pf-v5-global--link--Color--hover: var(--lt-sky);
    --pf-v5-global--link--Color--visited: var(--lt-mint);
    --pf-v5-global--link--Color--dark: var(--lt-mint);
    --pf-v5-global--link--Color--dark--hover: var(--lt-sky);
    --pf-v5-global--link--Color--light: var(--lt-mint);
    --pf-v5-global--link--Color--light--hover: var(--lt-sky);
    --pf-v5-global--active-color--100: var(--lt-teal);
}

body {
    color: var(--lt-text);
    background: var(--lt-navy);
}

/* --- GitLab's header and footer message bars (gitlab_appearance, the same colours) --- */
body::before,
body::after {
    position: fixed;
    inset-inline: 0;
    z-index: 1000;
    height: var(--lt-bar-height);
    line-height: var(--lt-bar-height);
    overflow: hidden;
    padding-inline: 1rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
    font-family: var(--lt-font);
    font-size: 0.8125rem;
    color: var(--lt-sky);
    background: var(--lt-navy);
}

/* The bars' texts are in lt-bars.css, written from the platform's names (templates/theme/lt-bars.css.j2). */
body::before {
    top: 0;
    border-bottom: 1px solid rgba(0, 163, 173, 0.35);
}

body::after {
    bottom: 0;
    border-top: 1px solid rgba(0, 163, 173, 0.35);
}

#app {
    box-sizing: border-box;
    padding-block: var(--lt-bar-height);
}

/* The loading screen, before the console starts. */
.keycloak__loading-container {
    color: var(--lt-text) !important;
    background: var(--lt-navy) !important;
}

/* --- The header: the wordmark, on the deep navy like the edge role's landing page --- */
.pf-v5-c-masthead {
    --pf-v5-c-masthead--BackgroundColor: var(--lt-deep);
    border-bottom: 1px solid var(--lt-line);
}

.pf-v5-c-masthead__brand img {
    height: 40px;
}

/* --- The navigation: GitLab's dark sidebar, rounded items, the current one marked in teal --- */
.pf-v5-c-page__sidebar {
    --pf-v5-c-page__sidebar--BackgroundColor: var(--lt-deep);
    color: var(--lt-text);
    border-inline-end: 1px solid var(--lt-line);
}

.pf-v5-c-page__sidebar .pf-v5-c-nav {
    --pf-v5-c-nav__link--Color: var(--lt-text-2);
    --pf-v5-c-nav__link--hover--Color: var(--lt-white);
    --pf-v5-c-nav__link--focus--Color: var(--lt-white);
    --pf-v5-c-nav__link--active--Color: var(--lt-white);
    --pf-v5-c-nav__link--m-current--Color: var(--lt-white);
    --pf-v5-c-nav__link--BackgroundColor: transparent;
    --pf-v5-c-nav__link--hover--BackgroundColor: rgba(159, 227, 240, 0.06);
    --pf-v5-c-nav__link--focus--BackgroundColor: rgba(159, 227, 240, 0.06);
    --pf-v5-c-nav__link--active--BackgroundColor: rgba(159, 227, 240, 0.08);
    --pf-v5-c-nav__link--m-current--BackgroundColor: rgba(0, 163, 173, 0.18);
    --pf-v5-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: rgba(0, 163, 173, 0.18);
    --pf-v5-c-nav__link--before--BorderColor: transparent;
    --pf-v5-c-nav__item--before--BorderColor: transparent;
    --pf-v5-c-nav__link--after--BorderColor: transparent;
    --pf-v5-c-nav__link--hover--after--BorderColor: transparent;
    --pf-v5-c-nav__link--m-current--after--BorderColor: var(--lt-teal);
    --pf-v5-c-nav__link--m-current--after--BorderLeftWidth: 3px;
    --pf-v5-c-nav__subnav__link--hover--after--BorderColor: transparent;
    --pf-v5-c-nav__subnav__link--m-current--after--BorderColor: var(--lt-teal);
    --pf-v5-c-nav__link--PaddingTop: 0.5rem;
    --pf-v5-c-nav__link--PaddingBottom: 0.5rem;
    --pf-v5-c-nav__link--FontSize: 0.875rem;
    --pf-v5-c-nav__toggle-icon--Color: var(--lt-muted);
    padding-block: 0.5rem;
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__link {
    margin-inline: 0.5rem;
    border-radius: 4px;
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__link.pf-m-current {
    font-weight: 600;
}

/* The current item's marker, GitLab's short bar on the left. */
.pf-v5-c-page__sidebar .pf-v5-c-nav__link::after {
    inset-block: 0.375rem;
    border-radius: 2px;
}

/* --- The content: the navy page, white headings, dark bordered sections --- */
.pf-v5-c-page__main,
.pf-v5-c-page__main-section {
    --pf-v5-c-page__main-section--BackgroundColor: var(--lt-navy);
    background: var(--lt-navy);
}

.pf-v5-c-page__main-section.pf-m-light {
    --pf-v5-c-page__main-section--m-light--BackgroundColor: var(--lt-navy);
    border-bottom: 1px solid var(--lt-line);
}

.pf-v5-c-page__main .pf-v5-c-title {
    font-weight: 700;
    color: var(--lt-white);
}

.pf-v5-c-page__main .pf-v5-c-content {
    --pf-v5-c-content--Color: var(--lt-text-2);
}

.pf-v5-c-card,
.pf-v5-c-data-list {
    --pf-v5-c-card--BackgroundColor: var(--lt-box);
    --pf-v5-c-data-list__item--BackgroundColor: var(--lt-box);
    border: 1px solid var(--lt-line);
    border-radius: 8px;
    box-shadow: none;
}

.pf-v5-c-data-list {
    overflow: hidden;
}

.pf-v5-c-form__label-text {
    font-weight: 600;
    color: var(--lt-text);
}

/* --- GitLab's inputs: a 1px border all round, 4px corners, a focus ring --- */
.pf-v5-c-page__main .pf-v5-c-form-control {
    --pf-v5-c-form-control--BackgroundColor: var(--lt-navy);
    --pf-v5-c-form-control--Color: var(--lt-text);
    --pf-v5-c-form-control--before--BorderTopColor: var(--lt-input-line);
    --pf-v5-c-form-control--before--BorderRightColor: var(--lt-input-line);
    --pf-v5-c-form-control--before--BorderBottomColor: var(--lt-input-line);
    --pf-v5-c-form-control--before--BorderLeftColor: var(--lt-input-line);
    --pf-v5-c-form-control--before--BorderBottomWidth: 1px;
    --pf-v5-c-form-control--after--BorderBottomWidth: 0;
    --pf-v5-c-form-control--focus--after--BorderBottomWidth: 0;
    border-radius: 4px;
}

.pf-v5-c-page__main .pf-v5-c-form-control.pf-m-readonly {
    --pf-v5-c-form-control--BackgroundColor: var(--lt-tile);
}

.pf-v5-c-page__main .pf-v5-c-form-control::before {
    border-radius: inherit;
}

.pf-v5-c-page__main .pf-v5-c-form-control:focus-within {
    box-shadow: 0 0 0 1px var(--lt-box), 0 0 0 3px var(--lt-teal);
}

.pf-v5-c-page__main .pf-v5-c-form-control > input {
    outline: none;
}

/* --- GitLab's buttons: 4px corners --- */
.pf-v5-c-button.pf-m-primary,
.pf-v5-c-button.pf-m-secondary {
    --pf-v5-c-button--BorderRadius: 4px;
    --pf-v5-c-button--after--BorderRadius: 4px;
    font-weight: 600;
}

.pf-v5-c-button.pf-m-primary {
    --pf-v5-c-button--m-primary--Color: var(--lt-white);
    --pf-v5-c-button--m-primary--hover--Color: var(--lt-white);
    --pf-v5-c-button--m-primary--focus--Color: var(--lt-white);
}

.pf-v5-c-page__main .pf-v5-c-button.pf-m-secondary {
    --pf-v5-c-button--m-secondary--after--BorderColor: var(--lt-input-line);
    --pf-v5-c-button--m-secondary--Color: var(--lt-text);
    --pf-v5-c-button--m-secondary--hover--Color: var(--lt-sky);
    --pf-v5-c-button--m-secondary--hover--after--BorderColor: var(--lt-sky);
}

.pf-v5-c-button:focus-visible {
    outline: 2px solid var(--lt-teal);
    outline-offset: 2px;
}