/* PIA Custom Keycloak Login Theme
   Mirrors the Svelte register page design (shadcn card on the warm "bg-page"
   wash, medical-blue primary) so the Keycloak-hosted login belongs to the app. */

/* === Design tokens (kept in sync with pia-frontend/src/app.css) === */
:root {
    --pia-background: oklch(1 0 0);
    --pia-foreground: oklch(0.208 0.042 265.755); /* slate-900 */
    --pia-muted: oklch(0.968 0.007 247.896); /* slate-100 */
    --pia-muted-foreground: oklch(0.554 0.046 257.417); /* slate-500 */
    --pia-card: oklch(1 0 0);
    --pia-border: oklch(0.929 0.013 255.508); /* slate-200 */
    --pia-input: oklch(0.929 0.013 255.508); /* slate-200 */
    --pia-primary: oklch(0.5 0.152 254); /* blue-700 */
    --pia-primary-foreground: oklch(1 0 0);
    --pia-accent: oklch(0.962 0.024 254); /* blue-50 — hover/selection tint */
    --pia-accent-foreground: oklch(0.42 0.12 256); /* blue-900 */
    --pia-destructive: oklch(0.586 0.253 17.585); /* rose-600 */
    --pia-ring: oklch(0.66 0.15 254); /* blue-500 — focus rings */
    --pia-radius: 0.625rem;
}

/* === Reset & Base === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    color: var(--pia-foreground);
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* === Page layout: gradient background, centered card (matches register) === */
body,
body.login-pf,
body.login-pf-page,
#kc-container,
#kc-container-wrapper {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 2.5rem 1rem;
    /* Canonical app page wash — mirrors the .bg-page utility in app.css. */
    background-color: #f6f4ee !important;
    background-image: linear-gradient(180deg, #faf8f2 0%, #f1eee6 100%) !important;
    background-repeat: no-repeat !important;
}

@media (min-width: 640px) {
    body,
    body.login-pf,
    body.login-pf-page,
    #kc-container,
    #kc-container-wrapper {
        padding: 2.5rem 1.5rem;
    }
}

/* The Keycloak parent theme uses Bootstrap-style rows/cols inside .card-pf.
   Neutralise those so the card behaves like a single shadcn card. */
.login-pf-page {
    width: 100%;
    max-width: 28rem; /* matches Tailwind max-w-md used on register page */
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.login-pf-page .login-pf-page-header {
    display: none;
}

.login-pf-page .card-pf .row {
    margin-left: 0;
    margin-right: 0;
}

.login-pf-page .card-pf [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0;
    padding-right: 0;
}

/* === Card === */
.login-pf-page .card-pf {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 2rem; /* rounded-[2rem] */
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#kc-content,
#kc-content-wrapper {
    width: 100%;
    max-width: 100%;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
}

#kc-form,
#kc-form-wrapper,
#kc-form-login {
    width: 100%;
    max-width: 100%;
}

/* === Card header (mirrors <CardHeader class="space-y-2 text-center sm:space-y-3"> + p-6 pb-0) === */
.pia-card-header {
    padding: 1.5rem 1.5rem 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media (min-width: 640px) {
    .pia-card-header {
        gap: 0.75rem;
    }
}

.pia-eyebrow {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    color: var(--pia-primary);
    margin: 0;
}

.pia-login-title,
#kc-page-title {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--pia-foreground);
    margin: 0;
}

@media (min-width: 640px) {
    .pia-login-title,
    #kc-page-title {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
}

/* Hide Keycloak's default page title/header (we render our own inside the card). */
#kc-header,
#kc-header-wrapper {
    display: none;
}

.login-pf-page .card-pf > header {
    display: none;
}

/* === Card content (CardContent p-6 + space-y-5) === */
#kc-form-wrapper {
    padding: 0;
}

#kc-form-login {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem 1.5rem 0;
}

.form-group,
.pf-c-form__group {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* === Labels === */
label,
label.pf-c-form__label {
    display: block;
    font-size: 0.875rem;
    line-height: 1;
    font-weight: 500;
    color: var(--pia-foreground);
}

/* === Inputs (shadcn <Input />) === */
input[type="text"],
input[type="password"],
input[type="email"],
input.pf-c-form-control {
    display: flex;
    width: 100%;
    height: 2.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 1rem; /* text-base on mobile */
    line-height: 1.5rem;
    color: var(--pia-foreground);
    background-color: var(--pia-background);
    border: 1px solid var(--pia-input);
    border-radius: 0.5rem; /* rounded-md (radius 0.625rem − 2px) */
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

@media (min-width: 768px) {
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input.pf-c-form-control {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
}

input[type="text"]:focus-visible,
input[type="password"]:focus-visible,
input[type="email"]:focus-visible,
input.pf-c-form-control:focus-visible {
    border-color: var(--pia-ring);
    box-shadow: 0 0 0 2px var(--pia-background), 0 0 0 4px var(--pia-ring);
}

input::placeholder {
    color: var(--pia-muted-foreground);
}

/* === Card footer (CardFooter flex flex-col gap-3 p-6 pt-2) === */
#kc-form-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem 0 1.5rem;
    margin: 0;
}

/* === Primary button (shadcn default) === */
input[type="submit"],
button[type="submit"],
.pf-c-button.pf-m-primary,
#kc-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 3rem; /* h-12 */
    padding: 0 1rem;
    font-size: 1rem; /* text-base */
    font-weight: 500;
    line-height: 1.5rem;
    color: var(--pia-primary-foreground);
    background-color: var(--pia-primary);
    border: none;
    border-radius: 9999px; /* rounded-full */
    cursor: pointer;
    transition: background-color 0.15s ease, opacity 0.15s ease;
    text-decoration: none;
    appearance: none;
    -webkit-appearance: none;
}

input[type="submit"]:hover,
button[type="submit"]:hover,
.pf-c-button.pf-m-primary:hover,
#kc-login:hover {
    background-color: oklch(0.5 0.152 254 / 0.9); /* hover:bg-primary/90 */
}

input[type="submit"]:focus-visible,
button[type="submit"]:focus-visible,
.pf-c-button.pf-m-primary:focus-visible,
#kc-login:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--pia-background), 0 0 0 4px var(--pia-ring);
}

/* === Outline button (shadcn variant="outline") === */
.pia-btn-outline,
a.pia-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 3rem;
    padding: 0 1rem;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5rem;
    color: var(--pia-foreground);
    background-color: var(--pia-background);
    border: 1px solid var(--pia-input);
    border-radius: 9999px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    text-decoration: none;
}

.pia-btn-outline:hover,
a.pia-btn-outline:hover {
    background-color: var(--pia-accent);
    color: var(--pia-foreground);
}

.pia-btn-outline:focus-visible,
a.pia-btn-outline:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--pia-background), 0 0 0 4px var(--pia-ring);
}

/* === Secondary/link buttons (Keycloak default classes) === */
.pf-c-button.pf-m-link,
a.pf-c-button {
    color: var(--pia-muted-foreground);
    font-size: 0.875rem;
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
}

.pf-c-button.pf-m-link:hover,
a.pf-c-button:hover {
    color: var(--pia-foreground);
}

/* === Error / feedback messages === */
.kc-feedback-text,
span.kc-feedback-text {
    display: block;
    font-size: 0.8125rem;
    line-height: 1.25rem;
    color: var(--pia-destructive);
    margin-top: 0.125rem;
}

.pf-c-alert,
.alert,
.alert-error,
#kc-content-wrapper .alert {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #b91c1c; /* red-700 */
    background-color: #fef2f2; /* red-50 */
    border: 1px solid #fecaca; /* red-200 */
    border-radius: 1rem; /* rounded-2xl */
    padding: 0.75rem 1rem;
    margin: 0 1.5rem 0;
}

/* === Remember-me and options row === */
.checkbox,
#kc-form-options {
    font-size: 0.875rem;
    color: var(--pia-muted-foreground);
    margin-top: 0.25rem;
}

#kc-form-options label {
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* === Social / identity provider buttons === */
#kc-social-providers {
    padding: 0 1.5rem 1.5rem;
    margin-top: 0.25rem;
}

#kc-social-providers ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

#kc-social-providers a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 2.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--pia-foreground);
    background-color: var(--pia-background);
    border: 1px solid var(--pia-input);
    border-radius: 9999px;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

#kc-social-providers a:hover {
    background-color: var(--pia-accent);
}

/* === Hide Keycloak's default chrome we don't need === */
#kc-locale,
#kc-attempts-count,
.kc-logo-text {
    display: none;
}

/* === Responsive: edge-to-edge on very small screens === */
@media (max-width: 480px) {
    body,
    body.login-pf,
    body.login-pf-page,
    #kc-container,
    #kc-container-wrapper {
        padding: 1.5rem 1rem;
    }

    .login-pf-page {
        max-width: 100%;
    }

    .login-pf-page .card-pf {
        border-radius: 1.5rem;
    }

    .pia-card-header {
        padding: 1.25rem 1.25rem 0;
    }

    #kc-form-login {
        padding: 1.25rem 1.25rem 0;
    }

    #kc-form-buttons {
        padding: 0.5rem 0 1.25rem;
    }
}