/* ========================================
   Prof Valmed – Keycloak Login Theme
   Color palette from frontend MUI theme (light)
   ======================================== */

:root {
  --vm-blue-dark: #145a79;
  --vm-blue-main: #4f839a;
  --vm-blue-light: #729caf;
  --vm-turquoise-dark: #27abca;
  --vm-turquoise-main: #5dc0d7;
  --vm-turquoise-light: #88d1e2;
  --vm-grey-anthracite: #313c48;
  --vm-grey-dark: #5d6970;
  --vm-grey-main: #858e94;
  --vm-grey-light: #cbced1;
  --vm-bg: #e5e6e880;
  --vm-white: #ffffff;
  --vm-danger: #c9190b;
  --vm-warning: #f0ab00;
  --vm-success: #3e8635;
  --vm-info: #2b9af3;
  --vm-font: system-ui, Calibri, sans-serif;
  --vm-radius: 8px;
  --vm-card-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* ---- Reset & Base ---- */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body, .valmed-body {
  font-family: var(--vm-font);
  background: var(--vm-bg);
  color: var(--vm-grey-anthracite);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--vm-blue-main);
  text-decoration: none;
}
a:hover {
  color: var(--vm-blue-dark);
  text-decoration: underline;
}

/* ---- Layout ---- */

.valmed-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}

.valmed-card {
  background: var(--vm-white);
  border-radius: var(--vm-radius);
  box-shadow: var(--vm-card-shadow);
  width: 100%;
  max-width: 440px;
  padding: 40px 36px 32px;
}

/* ---- Logo ---- */

.valmed-logo {
  text-align: center;
  margin-bottom: 28px;
}
.valmed-logo img {
  height: 42px;
  width: auto;
}

.idp-img {
  height: 25px;
  width: auto;
}

/* ---- Card Header ---- */

.valmed-card-header h1,
.valmed-card-header h2 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--vm-grey-anthracite);
  text-align: center;
  margin-bottom: 20px;
}

/* ---- Alerts ---- */

.valmed-alert {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 0.875rem;
  margin-bottom: 16px;
  border-left: 4px solid;
}
.valmed-alert-error   { background: #faeae8; border-color: var(--vm-danger);  color: var(--vm-danger); }
.valmed-alert-warning { background: #fdf4e0; border-color: var(--vm-warning); color: #6a4c00; }
.valmed-alert-success { background: #e9f5e7; border-color: var(--vm-success); color: var(--vm-success); }
.valmed-alert-info    { background: #e7f1fa; border-color: var(--vm-info);    color: #004080; }

/* ---- Form Groups ---- */

.valmed-form-group {
  margin-bottom: 16px;
}

.valmed-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--vm-grey-dark);
  margin-bottom: 6px;
}

.valmed-input {
  display: block;
  width: 100%;
  padding: 10px 12px;
  font-size: 0.9375rem;
  font-family: var(--vm-font);
  color: var(--vm-grey-anthracite);
  background: var(--vm-white);
  border: 1px solid var(--vm-grey-light);
  border-radius: 6px;
  outline: none;
  transition: border-color 0.15s;
}
.valmed-input:focus {
  border-color: var(--vm-blue-main);
  box-shadow: 0 0 0 3px rgba(79, 131, 154, 0.15);
}
.valmed-input-error {
  border-color: var(--vm-danger);
}
.valmed-input-error:focus {
  box-shadow: 0 0 0 3px rgba(201, 25, 11, 0.12);
}

.valmed-field-error {
  display: block;
  font-size: 0.8125rem;
  color: var(--vm-danger);
  margin-top: 4px;
}

/* ---- Form Options (remember me / forgot pw) ---- */

.valmed-form-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 0.8125rem;
}

.valmed-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--vm-grey-dark);
}
.valmed-checkbox input[type="checkbox"] {
  accent-color: var(--vm-blue-main);
  width: 16px;
  height: 16px;
}

/* ---- Buttons ---- */

.valmed-btn {
  display: block;
  width: 100%;
  padding: 11px 16px;
  font-size: 0.9375rem;
  font-family: var(--vm-font);
  font-weight: 600;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background 0.15s, box-shadow 0.15s;
}

.valmed-btn-primary {
  background: var(--vm-blue-dark);
  color: var(--vm-white);
}
.valmed-btn-primary:hover {
  background: var(--vm-blue-main);
}

.valmed-btn-secondary {
  background: transparent;
  color: var(--vm-blue-dark);
  border: 1px solid var(--vm-grey-light);
}
.valmed-btn-secondary:hover {
  background: rgba(79, 131, 154, 0.06);
}

/* ---- Social Provider Buttons ---- */

.valmed-social-providers {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 4px;
}

.valmed-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  font-size: 0.9375rem;
  font-family: var(--vm-font);
  font-weight: 500;
  color: var(--vm-grey-anthracite);
  background: var(--vm-white);
  border: 1px solid var(--vm-grey-light);
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.valmed-social-btn:hover {
  background: #f5f6f7;
  border-color: var(--vm-grey-main);
  text-decoration: none;
  color: var(--vm-grey-anthracite);
}

/* ---- Divider ---- */

.valmed-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--vm-grey-main);
  font-size: 0.8125rem;
}
.valmed-divider::before,
.valmed-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--vm-grey-light);
}

/* ---- Info / Register Link ---- */

.valmed-card-info {
  text-align: center;
  font-size: 0.875rem;
  color: var(--vm-grey-dark);
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #eef0f1;
}

.valmed-register-link {
  text-align: center;
  font-size: 0.875rem;
  color: var(--vm-grey-dark);
}

.valmed-link {
  color: var(--vm-blue-main);
  font-weight: 500;
}
.valmed-link:hover {
  color: var(--vm-blue-dark);
}

/* ---- Locale Selector ---- */

.valmed-locale {
  text-align: center;
  margin-top: 16px;
}
.valmed-locale select {
  font-family: var(--vm-font);
  font-size: 0.8125rem;
  color: var(--vm-grey-dark);
  background: transparent;
  border: 1px solid var(--vm-grey-light);
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
}

/* ========================================
   Inherited template overrides
   Styles for forms rendered by keycloak
   parent templates (register, reset-pw, otp, etc.)
   ======================================== */

/* Forms */
.valmed-card-body form {
  width: 100%;
}

/* Generic form-group from keycloak parent */
.valmed-card-body .form-group,
.valmed-card-body .pf-c-form__group {
  margin-bottom: 16px;
}

/* Labels from keycloak parent */
.valmed-card-body .control-label,
.valmed-card-body .pf-c-form__label,
.valmed-card-body .pf-c-form__label-text {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--vm-grey-dark);
  margin-bottom: 6px;
}

/* Inputs from keycloak parent */
.valmed-card-body .form-control,
.valmed-card-body .pf-c-form-control,
.valmed-card-body input[type="text"],
.valmed-card-body input[type="password"],
.valmed-card-body input[type="email"],
.valmed-card-body input[type="tel"],
.valmed-card-body input[type="number"],
.valmed-card-body select {
  display: block;
  width: 100%;
  padding: 10px 12px;
  font-size: 0.9375rem;
  font-family: var(--vm-font);
  color: var(--vm-grey-anthracite);
  background: var(--vm-white);
  border: 1px solid var(--vm-grey-light);
  border-radius: 6px;
  outline: none;
  transition: border-color 0.15s;
}
.valmed-card-body .form-control:focus,
.valmed-card-body .pf-c-form-control:focus,
.valmed-card-body input:focus,
.valmed-card-body select:focus {
  border-color: var(--vm-blue-main);
  box-shadow: 0 0 0 3px rgba(79, 131, 154, 0.15);
}

/* Buttons from keycloak parent */
.valmed-card-body .btn,
.valmed-card-body .pf-c-button,
.valmed-card-body input[type="submit"],
.valmed-card-body button[type="submit"] {
  display: block;
  width: 100%;
  padding: 11px 16px;
  font-size: 0.9375rem;
  font-family: var(--vm-font);
  font-weight: 600;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background 0.15s;
  background: var(--vm-blue-dark);
  color: var(--vm-white);
  margin-top: 8px;
}
.valmed-card-body .btn:hover,
.valmed-card-body .pf-c-button:hover,
.valmed-card-body input[type="submit"]:hover,
.valmed-card-body button[type="submit"]:hover {
  background: var(--vm-blue-main);
  color: var(--vm-white);
  text-decoration: none;
}

/* Secondary / link buttons */
.valmed-card-body .btn-default,
.valmed-card-body .pf-m-link,
.valmed-card-body .pf-c-button.pf-m-link {
  background: transparent;
  color: var(--vm-blue-main);
  border: 1px solid var(--vm-grey-light);
}
.valmed-card-body .btn-default:hover,
.valmed-card-body .pf-m-link:hover {
  background: rgba(79, 131, 154, 0.06);
  color: var(--vm-blue-dark);
}

/* Alerts from keycloak parent */
.valmed-card-body .alert,
.valmed-card-body .pf-c-alert {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 0.875rem;
  margin-bottom: 16px;
  border-left: 4px solid;
}
.valmed-card-body .alert-error,
.valmed-card-body .alert-danger,
.valmed-card-body .pf-m-danger {
  background: #faeae8;
  border-color: var(--vm-danger);
  color: var(--vm-danger);
}
.valmed-card-body .alert-warning,
.valmed-card-body .pf-m-warning {
  background: #fdf4e0;
  border-color: var(--vm-warning);
  color: #6a4c00;
}
.valmed-card-body .alert-success,
.valmed-card-body .pf-m-success {
  background: #e9f5e7;
  border-color: var(--vm-success);
  color: var(--vm-success);
}
.valmed-card-body .alert-info,
.valmed-card-body .pf-m-info {
  background: #e7f1fa;
  border-color: var(--vm-info);
  color: #004080;
}

/* Links inside card body */
.valmed-card-body a {
  color: var(--vm-blue-main);
  font-weight: 500;
}
.valmed-card-body a:hover {
  color: var(--vm-blue-dark);
}

/* Keycloak social provider list (from parent templates) */
.valmed-card-body .kc-social-links,
.valmed-card-body #kc-social-providers {
  margin-bottom: 16px;
}
.valmed-card-body .kc-social-links ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.valmed-card-body .kc-social-links li a,
.valmed-card-body .kc-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 16px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--vm-grey-anthracite);
  background: var(--vm-white);
  border: 1px solid var(--vm-grey-light);
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s;
}
.valmed-card-body .kc-social-links li a:hover,
.valmed-card-body .kc-social-link:hover {
  background: #f5f6f7;
  border-color: var(--vm-grey-main);
  text-decoration: none;
}

/* ---- Input Groups (password show/hide toggle) ---- */

.valmed-input-group {
  position: relative;
  width: 100%;
}
.valmed-input-group .valmed-input {
  width: 100%;
  padding-right: 44px;
}
.valmed-input-toggle {
  position: absolute;
  right: 1px;
  top: 1px;
  bottom: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  background: transparent;
  border: none;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  color: var(--vm-grey-main);
  transition: color 0.15s;
}
.valmed-input-toggle:hover {
  color: var(--vm-blue-dark);
}
.valmed-input-toggle svg {
  width: 20px;
  height: 20px;
}

/* Password visibility toggle buttons (from register.ftl) */
.valmed-card-body button[data-password-toggle] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  font-size: 1rem;
  font-weight: 400;
  background: var(--vm-white);
  color: var(--vm-grey-dark);
  border: 1px solid var(--vm-grey-light);
  border-left: none;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  width: auto;
  min-width: 44px;
  margin-top: 0;
  transition: color 0.15s, background 0.15s;
}
.valmed-card-body button[data-password-toggle]:hover {
  background: #f5f6f7;
  color: var(--vm-blue-dark);
}
.valmed-card-body button[data-password-toggle] i {
  font-size: 1rem;
}

/* Inherited input-group overrides (fallback for parent templates) */
.valmed-card-body .input-group,
.valmed-card-body div[dir="ltr"]:not(.valmed-input-group):has(input[type="password"]),
.valmed-card-body div[dir="ltr"]:not(.valmed-input-group):has(input[type="text"]) {
  display: flex;
  width: 100%;
}
.valmed-card-body .input-group .form-control,
.valmed-card-body .input-group .pf-c-form-control,
.valmed-card-body .input-group input[type="password"],
.valmed-card-body .input-group input[type="text"],
.valmed-card-body div[dir="ltr"]:not(.valmed-input-group) input[type="password"],
.valmed-card-body div[dir="ltr"]:not(.valmed-input-group) input[type="text"] {
  flex: 1;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}
.valmed-card-body .input-group-btn,
.valmed-card-body .input-group-append {
  display: flex;
}
.valmed-card-body .input-group-btn .btn,
.valmed-card-body .input-group-btn button,
.valmed-card-body .input-group-append .btn,
.valmed-card-body .input-group-append button {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  font-size: 0.875rem;
  font-weight: 500;
  background: var(--vm-white);
  color: var(--vm-grey-dark);
  border: 1px solid var(--vm-grey-light);
  border-left: none;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  width: auto;
  margin-top: 0;
}
.valmed-card-body .input-group-btn .btn:hover,
.valmed-card-body .input-group-btn button:hover,
.valmed-card-body .input-group-append .btn:hover,
.valmed-card-body .input-group-append button:hover {
  background: #f5f6f7;
  color: var(--vm-blue-dark);
}

/* Focus-within for input-group containers (register page password fields) */
.valmed-card-body .input-group:focus-within,
.valmed-card-body div[dir="ltr"]:not(.valmed-input-group):has(input[type="password"]):focus-within,
.valmed-card-body div[dir="ltr"]:not(.valmed-input-group):has(input[type="text"]):focus-within {
  border-radius: 6px;
  box-shadow: 0 0 0 3px rgba(79, 131, 154, 0.15);
}
.valmed-card-body .input-group:focus-within input,
.valmed-card-body div[dir="ltr"]:not(.valmed-input-group):focus-within input {
  border-color: var(--vm-blue-main);
  box-shadow: none;
}
.valmed-card-body .input-group:focus-within button,
.valmed-card-body .input-group:focus-within .btn,
.valmed-card-body div[dir="ltr"]:not(.valmed-input-group):focus-within button {
  border-color: var(--vm-blue-main);
}

/* ---- Form Buttons ---- */

.valmed-form-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
}

#kc-form-options {
  margin-top: 12px;
}

/* Error state for fields */
.valmed-card-body .has-error .form-control,
.valmed-card-body .pf-m-error {
  border-color: var(--vm-danger);
}
.valmed-card-body .has-error .help-block,
.valmed-card-body .pf-c-form__helper-text.pf-m-error {
  color: var(--vm-danger);
  font-size: 0.8125rem;
  margin-top: 4px;
}

/* Try another way link */
.valmed-card-body .try-another-way {
  text-align: center;
  margin-top: 16px;
}

/* ---- Responsive ---- */

@media (max-width: 480px) {
  .valmed-card {
    padding: 28px 20px 24px;
    box-shadow: none;
    border-radius: 0;
    max-width: 100%;
  }
  .valmed-container {
    padding: 0;
    align-items: flex-start;
  }
}