/* Djupkarta login theme – mirrors the old FrontendAuth login page
   (AppHeader banner, bg-gray-50 body, white card, orange primary button). */

:root {
    --dk-banner-bg: #1f2937;          /* gray-800, same as AppHeader */
    --dk-banner-height: 3.5rem;       /* h-14 */
    --dk-body-bg: #f9fafb;            /* gray-50 */
    --dk-text: #1f2937;               /* gray-800 */
    --dk-label: #374151;              /* gray-700 */
    --dk-input-bg: #f9fafb;
    --dk-input-border: #e5e7eb;       /* gray-200 */
    --dk-input-focus: #d1d5db;        /* gray-300 */
    --dk-primary: #e67300;            /* .app-button-primary */
    --dk-primary-hover: #ff9933;
    --dk-primary-border: #cd6600;
    --dk-link: #cd6600;
    --keycloak-card-top-color: transparent;

    --pf-v5-global--FontFamily--text: 'Inter', 'Roboto', sans-serif;
    --pf-v5-global--FontFamily--heading: 'Inter', 'Roboto', sans-serif;
    --pf-v5-global--link--Color: var(--dk-link);
    --pf-v5-global--link--Color--hover: var(--dk-primary);
    --pf-v5-global--primary-color--100: var(--dk-primary);
    --pf-v5-global--active-color--100: var(--dk-primary);
}

.login-pf body,
body#keycloak-bg {
    background: var(--dk-body-bg);
    font-family: 'Inter', 'Roboto', sans-serif;
    color: var(--dk-text);
}

/* ── Top banner ─────────────────────────────────────────────────────────── */

.pf-v5-c-login {
    padding-top: calc(var(--dk-banner-height) + 2rem);
    align-items: flex-start;
    min-height: 100vh;
    background: var(--dk-body-bg);
}

#kc-header.pf-v5-c-login__header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    height: var(--dk-banner-height);
    margin: 0;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    background: var(--dk-banner-bg);
    border-bottom: 1px solid #e5e7eb;
}

#kc-header #kc-header-wrapper {
    display: none;
}

#kc-header::before {
    content: "DJUPKARTA";
    color: #fff;
    font-size: 1.125rem;      /* text-lg */
    line-height: 1.75rem;
    font-weight: 600;         /* font-semibold */
    letter-spacing: normal;
}

/* ── Card ───────────────────────────────────────────────────────────────── */

.pf-v5-c-login__container {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "main";
    width: 100%;
    max-width: calc(28rem + 2rem);             /* max-w-md + gutter */
    margin-inline: auto;
    padding-inline: 1rem;
    box-sizing: border-box;
}

.pf-v5-c-login__main {
    background: #fff;
    border-radius: 0.5rem;                      /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); /* shadow-md */
    overflow: hidden;
}

.pf-v5-c-login__main-header {
    border-top: none;
    padding: 1.5rem 1.5rem 0;
    gap: 0.5rem;
}

/* keycloak.v2 uses 70% 30% plus a column gap, which pushes the language select outside the card */
@media (min-width: 768px) {
    div.pf-v5-c-login__main-header {
        grid-template-columns: minmax(0, 1fr) 30%;
    }
}

.pf-v5-c-login__main-body,
.pf-v5-c-login__main-footer {
    padding-inline: 1.5rem;
}

.pf-v5-c-login__main-footer {
    padding-bottom: 1.5rem;
}

#kc-page-title.pf-v5-c-title {
    font-size: 1.5rem;        /* text-2xl */
    font-weight: 800;         /* font-extrabold */
    color: var(--dk-text);
}

/* ── Form ───────────────────────────────────────────────────────────────── */

.pf-v5-c-form__label,
.pf-v5-c-form__label-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--dk-label);
}

.pf-v5-c-form-control {
    --pf-v5-c-form-control--BackgroundColor: var(--dk-input-bg);
    --pf-v5-c-form-control--before--BorderColor: var(--dk-input-border);
    --pf-v5-c-form-control--after--BorderColor: transparent;
    --pf-v5-c-form-control--hover--after--BorderColor: var(--dk-input-focus);
    --pf-v5-c-form-control--focus--after--BorderColor: var(--dk-input-focus);
    border-radius: 0.375rem;   /* rounded-md */
    background-color: var(--dk-input-bg);
}

.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after {
    border-radius: 0.375rem;
}

.pf-v5-c-form-control input:focus,
.pf-v5-c-form-control select:focus {
    outline: none;
}

.pf-v5-c-form-control:focus-within {
    box-shadow: 0 0 0 2px var(--dk-input-focus);
}

.pf-v5-c-check__input {
    accent-color: var(--dk-primary);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.pf-v5-c-button.pf-m-primary {
    --pf-v5-c-button--m-primary--BackgroundColor: var(--dk-primary);
    --pf-v5-c-button--m-primary--Color: #f5f5f5;
    --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--dk-primary-hover);
    --pf-v5-c-button--m-primary--hover--Color: #f5f5f5;
    --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--dk-primary-hover);
    --pf-v5-c-button--m-primary--active--BackgroundColor: var(--dk-primary-border);
    border-radius: 0.375rem;
    border: 1px solid transparent;
}

.pf-v5-c-button.pf-m-primary:hover {
    border-color: var(--dk-primary-border);
}

.pf-v5-c-button.pf-m-secondary {
    --pf-v5-c-button--m-secondary--BackgroundColor: #808080;
    --pf-v5-c-button--m-secondary--Color: #f5f5f5;
    --pf-v5-c-button--m-secondary--hover--BackgroundColor: #c0c0c0;
    --pf-v5-c-button--m-secondary--hover--Color: #f5f5f5;
    --pf-v5-c-button--after--BorderColor: transparent;
    border-radius: 0.375rem;
}

.pf-v5-c-button.pf-m-link {
    --pf-v5-c-button--m-link--Color: var(--dk-link);
    --pf-v5-c-button--m-link--hover--Color: var(--dk-primary);
}

a {
    color: var(--dk-link);
}

a:hover {
    color: var(--dk-primary);
}