/* =========================================================
   FULLSCREEN AUTH LAYOUT (Login/Register standalone page)
   Background image full screen + right-side panel
   ========================================================= */

html, body{
  height: 100%;
  margin: 0;
  overflow: hidden; 
}

.gh-auth-page{
  min-height: 100vh;
  margin: 0;
}

/* Fullscreen background */
.gh-auth-hero{
  min-height: 100vh;
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  position: relative;

  /* Placeholder background image (swap later) */
  background-image: url("/static/images/auth_placeholder.62fc05ec439f.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  overflow: hidden; /* <-- important: clips oversized decorative layers */
}

/* Dark overlay for readability */
.gh-auth-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.55);
  z-index: 0;
}

/* Right-side panel */
.gh-auth-panel{
  position: relative;
  z-index: 1;

  width: min(560px, 100%);
  min-height: 100vh;
  padding: clamp(16px, 4vw, 42px);

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(15, 15, 18, 0.88);
  backdrop-filter: blur(10px);
  border-left: 1px solid rgba(255, 223, 0, 0.10);

  overflow-y: auto;     /* <-- if content grows, scroll inside panel only */
  overflow-x: hidden;
}

/* Keep the card nicely constrained */
.gh-auth-card{
  width: 100%;
  max-width: 520px;
}

/* Make sure containers don't force weird widths */
.login-container,
.register-container{
  width: 100%;
  min-width: 0;
}

/* Ensure inputs fill the card (in case main.css doesn't) */
.gh-input{
  width: 100%;
}

/* =========================================================
   Circuit "wires" behind float-card (decorative, clipped)
   ========================================================= */

/* Keep float-card visible but do NOT let it create overflow */
.gh-auth-panel .float-card{
  position: relative;
  overflow: visible;  /* wires can sit outside the card */
  isolation: isolate;
}

/* The wires are clipped by .gh-auth-hero (overflow:hidden) */
.gh-auth-panel .float-card::before{
  content: "";
  position: absolute;

  /* Extend outside the card for effect */
  inset: -420px;

  background-image: url("/static/images/circuit-lines.9d7eaa13c09b.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1400px;

  opacity: 0.18;
  filter: invert(1) grayscale(1) brightness(1.2) contrast(1.15);
  mix-blend-mode: screen;

  z-index: 0;
  pointer-events: none;
}

/* Keep the form content above the circuit */
.gh-auth-panel .float-card > *{
  position: relative;
  z-index: 2;
}

/* Mobile tuning */
@media (max-width: 768px){
  html, body{ overflow: auto; } /* allow natural scroll on small screens */
  .gh-auth-hero{ overflow: hidden; }
  .gh-auth-panel{
    width: 100%;
    border-left: none;
    background: rgba(15, 15, 18, 0.92);
    min-height: 100vh;
  }
}

@media (max-width: 575.98px){
  .gh-auth-panel .float-card::before{
    inset: -130px;
    background-size: min(820px, 185%);
    opacity: 0.10;
  }
}

/* =========================================================
   Buttons / links
   ========================================================= */

.btn-outline-login,
.btn-register{
  color: #FFDF00;
  border-style: solid;
  border-color: #FFDF00;
  background-color: transparent;
}

.btn-outline-login:hover,
.btn-register:hover{
  color: #000;
  background-color: #FFDF00;
}

.resetpw:hover{
  color: #FFDF00;
}

.no-underline,
.no-underline:hover,
.no-underline:focus{
  text-decoration: none;
}

/* =========================================================
   Password show/hide toggle (fixed for gh-input)
   ========================================================= */

.password-wrap{
  position: relative;
}

.password-wrap .gh-input{
  padding-right: 46px; /* space for the toggle button */
}

.password-toggle{
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: #FFDF00;
  cursor: pointer;
  padding: 4px 6px;
  line-height: 1;
  opacity: 0.85;
  z-index: 5;
  pointer-events: auto;
}



.password-toggle:hover{ opacity: 1; }
.password-toggle:focus{ outline: none; }

/* =========================================================
   Autofill styling (keep dark theme consistent)
   ========================================================= */

input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover,
input:-webkit-autofill:active{
  -webkit-text-fill-color: #d7d7db !important;
  -webkit-box-shadow: 0 0 0px 1000px #0f0f12 inset !important;
  transition: background-color 9999s ease-in-out 0s;
  caret-color: #d7d7db;
}