/* LogiMind Keycloak login theme. Tokens and components copied from the site's
   assets/logimind.css + login.html so the two screens look the same. */
/* Inter 4.1, shipped with the theme (see the theme's README.md): only the weights this file uses. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Inter-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/Inter-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/Inter-SemiBold.woff2') format('woff2'); }
:root {
  --primary: #5B3DE0; --primary-hover: #4D30CC; --primary-pressed: #4226B3; --primary-soft: #EEEAFD;
  --shell: #F2F2F3; --surface: #FFFFFF; --nav-active: #EBEBED; --nav-hover: #F0F0F2; --row-hover: #FAFAFB;
  --border: #E4E4E7; --divider: #ECECEE; --ink: #1F1F23; --text-secondary: #3F3F46; --muted: #6B6B73;
  --on-primary: #FFFFFF; --avatar-violet: #6A4BE0;
  --success: #1F9D63; --success-soft: #E7F6EE; --warning: #B7791F; --warning-soft: #FDF4E3;
  --danger: #D93A3A; --danger-soft: #FDECEC; --info: #2F6FDB; --info-soft: #EAF1FD;
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-full: 9999px;
  --control-sm: 28px; --control-lg: 40px;
  --shadow-lift: 0 1px 2px rgba(16,16,24,0.06);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font-family: var(--font); font-size: 14px; line-height: 1.45; color: var(--ink); background: var(--shell); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 10px; }
b, strong { font-weight: 600; }
svg.lucide { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 32px 16px; }
.brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 18px; }
.brand img { width: 28px; height: 28px; }
.brand b { font-size: 16px; font-weight: 600; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: var(--r-xs); font-size: 12px; line-height: 1.3; font-weight: 500; white-space: nowrap; }
.tag.neutral { background: var(--nav-active); color: var(--text-secondary); margin-left: 4px; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.signin { width: 100%; max-width: 400px; padding: 28px; box-shadow: var(--shadow-lift); margin: auto; }
.signin h1 { font-size: 18px; font-weight: 600; margin: 0 0 4px; }
.signin .sub { color: var(--muted); margin: 0 0 20px; }
.signin h1 + form { margin-top: 16px; }

.fld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.fld > span:not(.error) { font-size: 12.5px; font-weight: 500; color: var(--text-secondary); display: flex; justify-content: space-between; align-items: center; }
.input { height: 40px; border: 1px solid var(--border); border-radius: var(--r-md); padding: 0 12px; background: var(--surface); width: 100%; }
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91,61,224,.10); }
.input.invalid { border-color: var(--danger); }
.input.code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 16px; letter-spacing: .2em; }
.error { display: none; align-items: center; gap: 6px; font-size: 12.5px; color: var(--danger); }
.error.show { display: flex; }
.error svg.lucide { width: 13px; height: 13px; }
.forgot { font-size: 12.5px; color: var(--primary); font-weight: 500; }
.forgot:hover { text-decoration: underline; }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); margin-bottom: 14px; }
.check input { accent-color: var(--primary); width: 15px; height: 15px; margin: 0; }

.btn-primary { height: var(--control-lg); display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; background: var(--primary); color: var(--on-primary); border-radius: var(--r-md); font-size: 14px; font-weight: 500; line-height: 1.2; transition: background .12s; width: 100%; margin-top: 6px; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-primary:active { background: var(--primary-pressed); }
.btn-primary:disabled { opacity: .45; cursor: default; }
.btn-secondary { height: var(--control-sm); display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.btn-secondary:hover { background: var(--nav-hover); }
.btn-secondary svg.lucide { width: 14px; height: 14px; color: var(--muted); }
.btn-secondary.wide { width: 100%; height: var(--control-lg); border-radius: var(--r-md); margin-top: 10px; font-size: 14px; }

/* "Continue with Google": same shape as the primary button, white, bordered */
.or { display: flex; align-items: center; gap: 10px; margin: 18px 0 12px; color: var(--muted); font-size: 12.5px; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--divider); }
.btn-google { height: var(--control-lg); display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); font-size: 14px; font-weight: 500; color: var(--ink); transition: background .12s; }
.btn-google:hover { background: var(--row-hover); }
.btn-google img { width: 18px; height: 18px; }
.social { display: flex; flex-direction: column; gap: 8px; }

.signed { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); background: var(--row-hover); border: 1px solid var(--divider); margin-bottom: 18px; font-size: 13px; }
.signed .user-avatar { width: 26px; height: 26px; border-radius: var(--r-full); background: var(--avatar-violet); color: #fff; font-size: 10.5px; font-weight: 600; display: grid; place-items: center; flex: none; }
.signed .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.signed b { font-weight: 600; }
.signed a { color: var(--primary); font-weight: 500; white-space: nowrap; }

.alert { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: var(--r-md); font-size: 13px; margin-bottom: 16px; color: var(--text-secondary); }
.alert svg.lucide { width: 15px; height: 15px; margin-top: 2px; }
.alert.error { background: var(--danger-soft); } .alert.error svg { color: var(--danger); }
.alert.warning { background: var(--warning-soft); } .alert.warning svg { color: var(--warning); }
.alert.success { background: var(--success-soft); } .alert.success svg { color: var(--success); }
.alert.info { background: var(--info-soft); } .alert.info svg { color: var(--info); }

.alt { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--divider); display: flex; flex-direction: column; gap: 8px; }
.alt a, .link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); font-weight: 500; }
.alt a:hover, .link:hover { color: var(--ink); text-decoration: underline; }
.hint { font-size: 12px; color: var(--muted); }

/* OTP setup steps */
.steps { margin: 0 0 18px; padding-left: 20px; color: var(--text-secondary); font-size: 13px; }
.steps li { margin-bottom: 10px; }
.steps li::marker { font-weight: 600; color: var(--primary); }
.steps p { margin: 0 0 6px; }
.apps { margin: 0; padding-left: 18px; color: var(--muted); font-size: 12.5px; }
.qr { display: block; width: 180px; height: 180px; margin: 6px 0 8px; border: 1px solid var(--border); border-radius: var(--r-md); padding: 6px; background: #fff; }
.secret { display: block; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 13px; background: var(--nav-active); padding: 8px 10px; border-radius: var(--r-sm); margin: 6px 0 8px; word-break: break-all; color: var(--ink); }

/* Fallback for Keycloak pages this theme does not override (keycloak.v2 markup). */
.signin form input:not(.input):not([type=checkbox]):not([type=hidden]) { height: 40px; border: 1px solid var(--border); border-radius: var(--r-md); padding: 0 12px; width: 100%; margin: 4px 0 12px; }
.signin form .pf-v5-c-form__label { font-size: 12.5px; font-weight: 500; color: var(--text-secondary); }
.signin .pf-m-primary { height: var(--control-lg); width: 100%; background: var(--primary); color: #fff; border-radius: var(--r-md); font-weight: 500; margin-top: 6px; }
.signin .pf-m-secondary, .signin .pf-m-link { height: var(--control-sm); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0 10px; font-size: 13px; margin-top: 10px; }
.signin .pf-m-control, .signin .pf-v5-c-form-control__utilities, .signin .kc-tooltip-text { display: none; }
.signin .pf-v5-c-helper-text__item-text.pf-m-error { color: var(--danger); font-size: 12.5px; }

/* The organization brand row, shown once Keycloak knows the user's organization. */
.org-brand { display: flex; align-items: center; gap: 10px; margin: -4px 0 14px; padding: 8px 10px; border-left: 4px solid; border-radius: 6px; background: #F7F7F8; font-weight: 600; }
.org-brand img { width: 28px; height: 28px; border-radius: 6px; }
.org-pick { justify-content: flex-start; width: 100%; cursor: pointer; }
.org-pick img { width: 22px; height: 22px; border-radius: 5px; }