*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#0B1F3A;
  --navy2:#071529;
  --teal:#0D9488;
  --tealM:#14B8A6;
  --tealL:#CCFBF1;
  --offW:#F8FAFC;
  --slate:#475569;
  --slateL:#E2E8F0;
}
html,body{min-height:100%;margin:0;padding:0}
body{
  font-family:'DM Sans',sans-serif;
  color:var(--navy);
  background:var(--offW);
}
/* Keycloak wraps the page; scope the two-panel layout to our own wrapper */
.tb-login-page{
  display:flex;
  min-height:100vh;
  font-family:'DM Sans',sans-serif;
  color:var(--navy);
  background:var(--offW);
}

/* ===== LEFT PANEL — DATA FABRIC VISUAL ===== */
.visual-panel{
  position:relative;
  flex:1.35;
  background:radial-gradient(ellipse 90% 70% at 30% 20%,rgba(13,148,136,0.22) 0%,transparent 60%),
              linear-gradient(160deg,var(--navy2) 0%,var(--navy) 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:48px 56px;
  overflow:hidden;
}
.visual-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(20,184,166,0.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,184,166,0.045) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 70% 65% at 50% 40%,#000 25%,transparent 75%);
}
.visual-copy{position:relative;z-index:2;max-width:480px;text-align:center;flex:0 0 auto;padding-bottom:24px}
.visual-copy .eyebrow{
  font-size:0.74rem;font-weight:600;color:var(--tealM);
  letter-spacing:0.16em;text-transform:uppercase;margin-bottom:0.9rem;
}
.visual-copy h1{
  font-family:'Space Grotesk',sans-serif;font-size:2.1rem;font-weight:600;
  color:#fff;line-height:1.25;margin-bottom:0.9rem;
}
.visual-copy h1 span{color:var(--tealM)}
.visual-copy p{
  font-size:0.92rem;color:#9FC2D9;line-height:1.7;
  max-width:400px;margin:0 auto;
}

/* network diagram */
.network{
  position:relative;z-index:2;
  flex:1 1 auto;
  min-height:0;
  width:100%;
  display:flex;align-items:flex-start;justify-content:center;
}
.network svg{width:100%;height:100%;max-width:760px;max-height:480px}
.net-line{stroke:rgba(20,184,166,0.28);stroke-width:1.5;fill:none}
.net-node-bg{fill:rgba(7,21,41,0.75);stroke:rgba(20,184,166,0.4);stroke-width:1.5}
.net-node-icon{stroke:#5EEAD4;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.net-hub-bg{fill:url(#hubGradient);stroke:var(--tealM);stroke-width:1.5}
.net-hub-icon{stroke:#ECFEFF;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.net-label{
  font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:600;
  fill:#9FC2D9;letter-spacing:0.06em;text-transform:uppercase;text-anchor:middle;
}
.pulse-dot{
  fill:var(--tealM);
  filter:drop-shadow(0 0 4px rgba(20,184,166,0.9));
}
@keyframes travel1{0%{offset-distance:0%;opacity:0}8%{opacity:1}92%{opacity:1}100%{offset-distance:100%;opacity:0}}
.p1{offset-path:path('M450,280 L140,90');animation:travel1 3.2s linear infinite}
.p2{offset-path:path('M450,280 L760,90');animation:travel1 3.2s linear infinite;animation-delay:.5s}
.p3{offset-path:path('M450,280 L760,280');animation:travel1 3.2s linear infinite;animation-delay:1s}
.p4{offset-path:path('M450,280 L760,470');animation:travel1 3.2s linear infinite;animation-delay:1.5s}
.p5{offset-path:path('M450,280 L140,470');animation:travel1 3.2s linear infinite;animation-delay:2s}
.p6{offset-path:path('M450,280 L140,280');animation:travel1 3.2s linear infinite;animation-delay:2.5s}


/* ===== RIGHT PANEL — LOGIN ===== */
.form-panel{
  flex:1;
  display:flex;align-items:center;justify-content:center;
  padding:32px 40px;
  background:#fff;
}
.form-card{width:100%;max-width:380px}
.form-card .logo-row{display:flex;align-items:center;gap:10px;margin-bottom:1.75rem}
.form-card .logo-row .tb-logo-svg{height:44px;width:auto;display:block}
.form-card h2{
  font-family:'Space Grotesk',sans-serif;font-size:1.6rem;font-weight:700;
  color:var(--navy);margin-bottom:0.4rem;
}
.form-card .sub{font-size:0.88rem;color:var(--slate);margin-bottom:1.5rem;line-height:1.6}

.field{margin-bottom:1rem}
.field label{
  display:block;font-size:0.78rem;font-weight:600;color:var(--navy);
  margin-bottom:0.4rem;letter-spacing:0.02em;
}
.input-wrap{position:relative}
.input-wrap input{
  width:100%;border:1px solid var(--slateL);border-radius:10px;
  padding:0.85rem 1rem;font-family:'DM Sans',sans-serif;font-size:0.92rem;
  color:var(--navy);background:var(--offW);
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.input-wrap input::placeholder{color:#A8B6C7}
.input-wrap input:focus{
  outline:none;border-color:var(--tealM);background:#fff;
  box-shadow:0 0 0 3px rgba(20,184,166,0.15);
}
.toggle-pass{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  background:none;border:0;padding:4px;cursor:pointer;color:var(--slate);
  display:flex;align-items:center;
}
.toggle-pass:hover{color:var(--teal)}
.field-row{display:flex;align-items:center;justify-content:space-between;margin-top:0.6rem}
.remember{display:flex;align-items:center;font-size:0.82rem;color:var(--slate);cursor:pointer;line-height:1}
.remember input{width:15px;height:15px;margin:0 5px 0 0;accent-color:var(--teal);flex-shrink:0;cursor:pointer;position:relative;top:1px}
.forgot{font-size:0.82rem;color:var(--teal);text-decoration:none;font-weight:500}
.forgot:hover{color:var(--tealM)}

.btn-login{
  width:100%;margin-top:1.25rem;
  background:var(--teal);color:#fff;border:0;border-radius:10px;
  padding:0.95rem 1rem;font-family:'DM Sans',sans-serif;font-weight:600;font-size:0.95rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background .15s,transform .15s;
}
.btn-login:hover{background:var(--tealM);transform:translateY(-1px)}
.btn-login svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

.form-footer{
  margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--slateL);
  text-align:center;font-size:0.78rem;color:var(--slate);line-height:1.7;
}

/* RESPONSIVE */
@media(max-width:980px){
  body{flex-direction:column}
  .visual-panel{flex:none;min-height:340px;padding:32px}
  .visual-copy{padding-bottom:24px}
  .visual-copy h1{font-size:1.6rem}
  .network svg{max-width:340px;max-height:212px}
  .form-panel{padding:40px 24px}
}
@media(max-width:480px){
  .network svg{max-width:280px;max-height:175px}
}
@media(min-width:981px) and (max-height:820px){
  .visual-panel{padding:32px 48px}
  .visual-copy{padding-bottom:24px}
  .visual-copy h1{font-size:1.6rem;margin-bottom:0.6rem}
  .visual-copy .eyebrow{margin-bottom:0.5rem}
  .visual-copy p{font-size:0.82rem;line-height:1.6}
  .network svg{max-width:560px;max-height:350px}
  .form-panel{padding:24px 40px}
  .form-card .logo-row{margin-bottom:1rem}
  .form-card .logo-row .tb-logo-svg{height:38px}
  .form-card h2{font-size:1.35rem}
  .form-card .sub{margin-bottom:1rem}
  .field{margin-bottom:0.75rem}
  .form-footer{margin-top:1rem;padding-top:0.85rem}
}
@media(prefers-reduced-motion:reduce){
  .pulse-dot{animation:none!important;opacity:0}
}

/* ===== KEYCLOAK INTEGRATION OVERRIDES ===== */
/* Neutralize Keycloak's default card/container chrome so our full-bleed layout shows */
#kc-header, .login-pf-page .card-pf, #kc-content-wrapper > .kc-feedback-text { all: unset; }
html.login-pf, body.login-pf { height:auto; background:var(--offW); }
.login-pf body { background:var(--offW); }
#kc-content, #kc-content-wrapper { width:100%; margin:0; padding:0; }

/* Validation error shown above the form */
.tb-error{
  background:rgba(220,38,38,0.07);
  border:1px solid rgba(220,38,38,0.3);
  color:#b91c1c;
  font-size:0.8rem;
  line-height:1.5;
  border-radius:8px;
  padding:0.65rem 0.85rem;
  margin-bottom:1rem;
}
.input-wrap input[aria-invalid="true"]{
  border-color:#dc2626;
  box-shadow:0 0 0 3px rgba(220,38,38,0.12);
}

/* Keycloak info/success messages reuse the footer style */
#kc-info-wrapper{ font-size:0.8rem; color:var(--slate); margin-top:1rem; text-align:center; }

/* Global Keycloak banner messages (session expired, account updated, etc.) */
.tb-global-message{
  position:fixed; top:0; left:0; right:0; z-index:50;
  text-align:center; padding:0.75rem 1rem; font-size:0.85rem;
}
.tb-message-error{ background:#fee2e2; color:#b91c1c; }
.tb-message-success{ background:#dcfce7; color:#15803d; }
.tb-message-warning{ background:#fef9c3; color:#a16207; }
.tb-message-info{ background:#e0f2fe; color:#0369a1; }

.tb-register{ text-align:center; font-size:0.85rem; color:var(--slate); }
.tb-register a{ color:var(--teal); font-weight:600; text-decoration:none; }
.tb-register a:hover{ color:var(--tealM); }