/* L'Electron Rare — PCB Login Theme */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=Inter:wght@400;500;600&family=VT323&display=swap');

:root {
  --bg-deep: #050a1f;
  --substrate: #0e1a3d;
  --trace-cyan: #00b8ff;
  --trace-cyan-hi: #5fd8ff;
  --trace-magenta: #ff3a9e;
  --trace-magenta-hi: #ff7fc8;
  --via-gold: #ffcc33;
  --via-gold-hi: #ffe680;
  --silkscreen: #ffffff;
  --silkscreen-dim: #a0c0d8;
  --text: #e8efff;
  --text-muted: #7a8aaf;
  --led-green: #34c759;
  --led-red: #ff3b30;
  --card-bg: rgba(14, 26, 61, 0.55);
  --card-border: rgba(0, 184, 255, 0.25);
  --card-glow: rgba(255, 204, 51, 0.18);
}

/* Reset + force dark mode (override Keycloak v2 prefers-color-scheme) */
html {
  color-scheme: dark only !important;
  background: var(--bg-deep) !important;
}
html, body, html.pf-v5-theme-dark, html:not(.pf-v5-theme-dark) {
  background: var(--bg-deep) !important;
  color: var(--text) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  overflow-x: hidden;
}
@media (prefers-color-scheme: light) {
  html, body { background: var(--bg-deep) !important; color: var(--text) !important; }
}

/* CRT scanlines + vignette */
body::after {
  content: '';
  position: fixed; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.06) 0px, rgba(0,0,0,0.06) 1px, transparent 1px, transparent 3px);
  pointer-events: none; z-index: 50; mix-blend-mode: multiply;
}
body::before {
  content: '';
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.5) 100%);
  pointer-events: none; z-index: 40;
}

/* Three.js canvas injecté */
#er-three-bg { position: fixed !important; inset: 0; z-index: 0; pointer-events: none; }
.er-stars { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.er-star { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: 0; animation: er-twinkle ease-in-out infinite; }
@keyframes er-twinkle { 0%, 100% { opacity: 0; } 50% { opacity: 0.9; } }

/* Hide default header */
#kc-header, .login-pf-header, #kc-header-wrapper { display: none !important; }

/* Page layout */
.login-pf, .login-pf body { background: transparent !important; }
.login-pf-page {
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  padding: 2rem !important;
  position: relative;
  z-index: 10;
}

/* Card login — UNIQUEMENT le .card-pf externe (pas les wrappers internes) */
.login-pf-page .card-pf,
.card-pf {
  background: var(--card-bg) !important;
  backdrop-filter: blur(20px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: 12px !important;
  padding: 2.5rem 2rem 2rem !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 0 80px var(--card-glow), inset 0 1px 0 rgba(255,255,255,0.08) !important;
  max-width: 460px !important;
  width: 100%;
  margin: 0 auto !important;
  position: relative;
  color: var(--text) !important;
}
/* Wrappers internes : transparents, pas de chrome */
#kc-form, #kc-form-wrapper, #kc-content, #kc-content-wrapper {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* PatternFly v5 input-group (password avec toggle eye) */
.pf-c-input-group, .pf-v5-c-input-group {
  display: flex !important;
  background: transparent !important;
  border: 1px solid var(--card-border) !important;
  border-radius: 8px !important;
  overflow: hidden;
}
.pf-c-input-group input, .pf-v5-c-input-group input {
  border: none !important;
  border-radius: 0 !important;
  flex: 1;
  background: rgba(0, 0, 0, 0.35) !important;
}
.pf-c-input-group input:focus, .pf-v5-c-input-group input:focus {
  box-shadow: none !important;
}
.pf-c-input-group:focus-within, .pf-v5-c-input-group:focus-within {
  border-color: var(--trace-cyan) !important;
  box-shadow: 0 0 0 3px rgba(0, 184, 255, 0.15), 0 0 16px rgba(0, 184, 255, 0.4) !important;
}
.pf-c-input-group button, .pf-v5-c-input-group button,
.pf-c-button.pf-m-control, .pf-v5-c-button.pf-m-control {
  background: rgba(0, 0, 0, 0.45) !important;
  border: none !important;
  border-left: 1px solid var(--card-border) !important;
  border-radius: 0 !important;
  padding: 0 0.85rem !important;
  color: var(--silkscreen-dim) !important;
  width: auto !important;
  font-family: 'Inter', sans-serif !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  font-size: 0.9rem !important;
  font-weight: normal !important;
  box-shadow: none !important;
}
.pf-c-input-group button:hover, .pf-v5-c-input-group button:hover {
  color: var(--trace-cyan) !important;
  background: rgba(0, 0, 0, 0.6) !important;
}
.pf-c-input-group svg, .pf-v5-c-input-group svg { fill: currentColor !important; }

/* Vias dorés aux 4 coins de la card */
.login-pf-page .card-pf::before,
.card-pf::before {
  content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  top: -8px; left: -8px;
  background: radial-gradient(circle at 30% 30%, var(--via-gold-hi), var(--via-gold) 60%, #8a6a1a);
  border: 1px solid var(--via-gold-hi);
  box-shadow: 0 0 12px var(--via-gold-hi), inset 0 0 4px rgba(0,0,0,0.5);
}
.login-pf-page .card-pf::after,
.card-pf::after {
  content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  top: -8px; right: -8px;
  background: radial-gradient(circle at 30% 30%, var(--via-gold-hi), var(--via-gold) 60%, #8a6a1a);
  border: 1px solid var(--via-gold-hi);
  box-shadow: 0 0 12px var(--via-gold-hi), inset 0 0 4px rgba(0,0,0,0.5);
}

/* Brand mark (injecté via JS) */
.er-brand { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1rem; }
.er-brand-mark { width: 56px; height: 56px; border-radius: 10px; background: linear-gradient(135deg, #1a2a5c, #08102a); border: 1px solid var(--via-gold); padding: 4px; box-shadow: 0 0 20px var(--via-gold-hi), inset 0 0 8px rgba(0,0,0,0.6); display: grid; place-items: center; }
.er-brand-mark img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.er-brand-text { display: flex; flex-direction: column; }
.er-brand-name { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 0.95rem; color: var(--silkscreen); letter-spacing: 0.06em; }
.er-brand-sub { font-family: 'VT323', monospace; font-size: 0.95rem; color: var(--silkscreen-dim); letter-spacing: 0.05em; margin-top: 2px; }

/* Silkscreen labels (injectés via JS dans la card) */
.er-silk { position: absolute; font-family: 'VT323', monospace; font-size: 0.85rem; color: var(--silkscreen-dim); letter-spacing: 0.08em; text-transform: uppercase; text-shadow: 0 0 4px rgba(255,255,255,0.2); pointer-events: none; }
.er-silk.tl { top: 4px; left: 18px; }
.er-silk.tr { top: 4px; right: 18px; }
.er-silk.bl { bottom: 4px; left: 18px; }
.er-silk.br { bottom: 4px; right: 18px; }

/* Page title (Keycloak) */
#kc-page-title {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  margin: 0.5rem 0 0.4rem !important;
  color: var(--silkscreen) !important;
  letter-spacing: 0.02em;
}

/* Form labels */
.login-pf-page label,
#kc-form label,
label[for] {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--silkscreen-dim) !important;
  margin-bottom: 0.4rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem;
}
.login-pf-page label::before,
#kc-form label::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--via-gold);
  box-shadow: 0 0 0 1px var(--via-gold-hi), 0 0 6px var(--via-gold-hi);
}

/* Inputs */
input[type="text"], input[type="password"], input[type="email"],
.pf-c-form-control, .form-control {
  width: 100% !important;
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: 8px !important;
  padding: 0.75rem 1rem !important;
  color: var(--text) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.95rem !important;
  outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s !important;
  height: auto !important;
  box-shadow: none !important;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus,
.pf-c-form-control:focus, .form-control:focus {
  border-color: var(--trace-cyan) !important;
  box-shadow: 0 0 0 3px rgba(0, 184, 255, 0.15), 0 0 16px rgba(0, 184, 255, 0.4) !important;
  background: rgba(0, 0, 0, 0.45) !important;
}
input[type="text"]::placeholder, input[type="password"]::placeholder { color: var(--text-muted) !important; }

/* Form group spacing */
.form-group, .pf-c-form__group, .login-pf-page .form-group { margin-bottom: 1.25rem !important; }

/* Buttons */
.btn, .pf-c-button, .kc-form-buttons input[type=submit], #kc-login {
  width: 100% !important;
  padding: 0.9rem !important;
  border: none !important;
  border-radius: 8px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: transform 0.1s, box-shadow 0.2s !important;
  height: auto !important;
}
.btn-primary, .pf-c-button.pf-m-primary, .kc-form-buttons input[type=submit], #kc-login {
  background: linear-gradient(180deg, var(--via-gold-hi), var(--via-gold) 60%, #b8841a) !important;
  color: #1a1408 !important;
  box-shadow: 0 4px 16px rgba(255, 204, 51, 0.35), inset 0 1px 0 rgba(255,255,255,0.4), inset 0 -2px 4px rgba(0,0,0,0.2) !important;
}
.btn-primary:hover, .pf-c-button.pf-m-primary:hover, .kc-form-buttons input[type=submit]:hover {
  box-shadow: 0 6px 22px rgba(255, 230, 128, 0.6), inset 0 1px 0 rgba(255,255,255,0.5) !important;
}
.btn-default, .pf-c-button.pf-m-secondary {
  background: rgba(255, 58, 158, 0.05) !important;
  border: 1px solid rgba(255, 58, 158, 0.4) !important;
  color: var(--text) !important;
}
.btn-default:hover, .pf-c-button.pf-m-secondary:hover {
  border-color: var(--trace-magenta-hi) !important;
  background: rgba(255, 58, 158, 0.12) !important;
  box-shadow: 0 0 16px rgba(255, 58, 158, 0.25) !important;
}

/* Submit button container */
#kc-form-buttons { margin-top: 1rem; }

/* Links */
a, a:visited {
  color: var(--trace-magenta) !important;
  text-decoration: none !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.78rem !important;
}
a:hover { color: var(--trace-magenta-hi) !important; text-decoration: underline !important; }

/* Checkbox */
.checkbox label, label[for="rememberMe"] {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted) !important;
}

/* Form options row */
#kc-form-options { display: flex; align-items: center; }

/* Info wrapper (registration link) */
#kc-info-wrapper, #kc-info {
  background: transparent !important;
  border-top: 1px solid var(--card-border) !important;
  padding-top: 1rem;
  margin-top: 1.5rem;
  text-align: center;
  font-family: 'VT323', monospace;
  font-size: 1rem;
  color: var(--text-muted) !important;
}

/* Alerts/errors */
.alert, .pf-c-alert {
  background: rgba(255, 59, 48, 0.1) !important;
  border: 1px solid rgba(255, 59, 48, 0.4) !important;
  color: var(--text) !important;
  border-radius: 8px !important;
  padding: 0.75rem 1rem !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.85rem !important;
}

/* Locale selector */
#kc-locale, .kc-dropdown {
  position: fixed; top: 1rem; left: 1rem; z-index: 60;
  background: var(--card-bg); border: 1px solid var(--card-border) !important;
  padding: 0.45rem 0.85rem; border-radius: 6px;
  font-family: 'VT323', monospace !important; font-size: 0.95rem !important;
  letter-spacing: 0.06em; text-transform: uppercase;
  backdrop-filter: blur(10px);
}
#kc-locale a { color: var(--text) !important; }

/* Boot log + footer (injectés via JS) */
.er-boot-log {
  position: fixed; bottom: 1rem; left: 1rem;
  font-family: 'VT323', monospace; font-size: 1rem;
  color: var(--silkscreen-dim); z-index: 60; pointer-events: none; line-height: 1.4;
  text-shadow: 0 0 4px rgba(160, 192, 216, 0.3);
  max-width: 380px;
}
.er-boot-log .ok { color: var(--led-green); }
.er-boot-log .gold { color: var(--via-gold); }
.er-boot-log .cyan { color: var(--trace-cyan); }
.er-boot-log .magenta { color: var(--trace-magenta); }

.er-footer {
  position: fixed; bottom: 1rem; right: 1rem;
  font-family: 'VT323', monospace; font-size: 0.95rem;
  color: var(--silkscreen-dim); z-index: 60;
  letter-spacing: 0.1em; text-transform: uppercase;
}

/* Loading overlay */
.er-loading {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center;
  background: var(--bg-deep);
  font-family: 'VT323', monospace; font-size: 1.4rem; color: var(--via-gold);
  letter-spacing: 0.1em; text-transform: uppercase;
  transition: opacity 0.6s ease;
}
.er-loading.hidden { opacity: 0; pointer-events: none; }
.er-loading .bar { width: 280px; height: 4px; background: rgba(255,204,51,0.1); border-radius: 2px; margin-top: 1rem; overflow: hidden; }
.er-loading .bar-fill { width: 0%; height: 100%; background: var(--via-gold); box-shadow: 0 0 12px var(--via-gold); transition: width 0.3s; }
.er-loading .pcb-name { color: var(--trace-cyan); margin-top: 0.5rem; font-size: 1rem; min-height: 1.2em; text-align: center; }
.er-loading > div { text-align: center; }

/* Force everything text in card to be readable */
.login-pf-page .card-pf p,
.login-pf-page .card-pf span,
.login-pf-page .card-pf div { color: var(--text); }