/* ─────────────────────────────────────────────────────────────────────────
   Keycloak login theme for "My Medical Data".
   Mirrors the Vitality Dark palette + Inter typography from the app's
   src/main/resources/static/css/app.css. Override-only CSS sitting on top
   of Keycloak's classic theme; we don't replace the FreeMarker templates.
   ───────────────────────────────────────────────────────────────────────── */

@font-face {
    font-family: "InterVariable";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/InterVariable.woff2") format("woff2-variations"),
         url("../fonts/InterVariable.woff2") format("woff2");
}

:root {
    --mmd-bg:           #101319;
    --mmd-surface:      #1c2026;
    --mmd-surface-low:  #181c22;
    --mmd-fg:           #e0e2eb;
    --mmd-fg-muted:     #c1c6d4;
    --mmd-line:         #414752;
    --mmd-line-strong:  #8b919e;
    --mmd-accent:       #1173d4;
    --mmd-accent-hover: #0f63b8;
    --mmd-on-accent:    #faf9ff;
    --mmd-danger:       #ffb4ab;
    --mmd-success:      #5dd1a3;

    --mmd-radius:    8px;
    --mmd-radius-lg: 12px;
}

/* Page shell -------------------------------------------------------------- */
html, body, .login-pf, .login-pf body {
    background: var(--mmd-bg) !important;
    color: var(--mmd-fg) !important;
    font-family: "InterVariable", "Inter", -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

.login-pf-page {
    background: var(--mmd-bg);
    padding: 2rem 1rem;
}

#kc-header,
#kc-header-wrapper {
    color: var(--mmd-fg) !important;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    text-shadow: none !important;
    padding: 1rem 0 1.5rem;
}

/* Card -------------------------------------------------------------------- */
.card-pf,
.login-pf-page .card-pf {
    background: var(--mmd-surface) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: var(--mmd-radius-lg) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
    padding: 2rem !important;
    max-width: 420px;
    margin: 0 auto;
}

#kc-page-title {
    color: var(--mmd-fg) !important;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: -0.01em;
    margin-bottom: 1.25rem;
}

.subtitle, .instruction, #kc-current-locale {
    color: var(--mmd-fg-muted) !important;
}

/* Inputs ------------------------------------------------------------------ */
input.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
select.form-control {
    background: var(--mmd-surface-low) !important;
    color: var(--mmd-fg) !important;
    border: 1px solid var(--mmd-line) !important;
    border-radius: var(--mmd-radius) !important;
    padding: 0.65rem 0.75rem !important;
    font: inherit !important;
    box-shadow: none !important;
}
input.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
    border-color: var(--mmd-accent) !important;
    outline: 2px solid rgba(17, 115, 212, 0.25) !important;
    outline-offset: 0;
}

label,
.control-label {
    color: var(--mmd-fg) !important;
    font-weight: 500 !important;
    margin-bottom: 0.4rem !important;
}

/* Buttons ----------------------------------------------------------------- */
.btn,
.btn-default,
.btn-primary,
.btn.btn-primary,
input[type="submit"].btn,
input[type="submit"].btn-primary {
    border-radius: var(--mmd-radius) !important;
    font-weight: 600 !important;
    padding: 0.65rem 1.25rem !important;
    border: 1px solid transparent !important;
    transition: background 0.15s ease;
}

.btn-primary,
.btn.btn-primary,
input[type="submit"].btn-primary,
#kc-login {
    background: var(--mmd-accent) !important;
    color: var(--mmd-on-accent) !important;
    border-color: var(--mmd-accent) !important;
}
.btn-primary:hover,
#kc-login:hover {
    background: var(--mmd-accent-hover) !important;
    border-color: var(--mmd-accent-hover) !important;
}

.btn-default,
.btn:not(.btn-primary) {
    background: var(--mmd-surface) !important;
    color: var(--mmd-fg) !important;
    border-color: var(--mmd-line-strong) !important;
}
.btn-default:hover,
.btn:not(.btn-primary):hover {
    background: var(--mmd-surface-low) !important;
    color: var(--mmd-fg) !important;
}

/* Links ------------------------------------------------------------------- */
a,
a:visited,
#kc-registration a,
#kc-info-wrapper a,
.login-pf-page a {
    color: var(--mmd-accent) !important;
}
a:hover { color: var(--mmd-accent-hover) !important; }

/* Form layout helpers ---------------------------------------------------- */
.form-group {
    margin-bottom: 1rem !important;
}

#kc-form-buttons {
    margin-top: 1.5rem !important;
}

#kc-info,
#kc-info-wrapper {
    background: transparent !important;
    color: var(--mmd-fg-muted) !important;
    border-top: 1px solid var(--mmd-line) !important;
    margin-top: 1.5rem !important;
    padding-top: 1rem !important;
    font-size: 0.9rem;
}

/* Messages ---------------------------------------------------------------- */
.alert-error,
.alert-warning {
    background: rgba(255, 180, 171, 0.10) !important;
    color: var(--mmd-danger) !important;
    border: 1px solid rgba(255, 180, 171, 0.25) !important;
    border-radius: var(--mmd-radius) !important;
    padding: 0.75rem 1rem !important;
}
.alert-success {
    background: rgba(93, 209, 163, 0.10) !important;
    color: var(--mmd-success) !important;
    border: 1px solid rgba(93, 209, 163, 0.25) !important;
    border-radius: var(--mmd-radius) !important;
    padding: 0.75rem 1rem !important;
}

/* "Remember me" / checkboxes --------------------------------------------- */
.checkbox label {
    color: var(--mmd-fg-muted) !important;
    font-weight: 400 !important;
}

/* Social provider buttons (when we add them) ----------------------------- */
#kc-social-providers .kc-social-link,
#kc-social-providers a {
    background: var(--mmd-surface) !important;
    color: var(--mmd-fg) !important;
    border: 1px solid var(--mmd-line-strong) !important;
    border-radius: var(--mmd-radius) !important;
    padding: 0.65rem 1rem !important;
}
#kc-social-providers .kc-social-link:hover {
    background: var(--mmd-surface-low) !important;
}

/* Locale selector --------------------------------------------------------- */
.kc-dropdown {
    background: var(--mmd-surface) !important;
    color: var(--mmd-fg) !important;
}

/* Accessibility — reduce eye strain on the dim background ---------------- */
::placeholder {
    color: var(--mmd-fg-muted) !important;
    opacity: 0.6;
}