/* Sign-in styling — shared by index.php, login.php and student/login.php.
 * Lifted out of login.php so the three pages cannot drift apart. */
body{
  font-family:'Inter Tight',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--paper,#FAF9F7);
  min-height:100vh;margin:0;
}
.login-wrap{display:flex;min-height:100vh}

/* Left panel */
.login-left{
  flex:5;background:var(--ink,#1A1A2E);color:#e8ecf4;
  padding:3.5rem;position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
}
.login-left::after{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--crimson,#C8102E);
}
.grid-bg{
  position:absolute;inset:0;opacity:.04;
  background-image:
    linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:40px 40px;
}
.inst-seal{
  width:56px;height:56px;
  background:var(--crimson,#C8102E);
  display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces',serif;font-size:1.6rem;font-weight:700;color:#fff;
  border:3px solid rgba(255,255,255,.15);
  margin-bottom:1.5rem;
}
.inst-logo{
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border-radius:12px;padding:1rem 1.25rem;
  margin-bottom:1.5rem;max-width:280px;box-shadow:0 6px 22px rgba(0,0,0,.25);
}
.inst-logo img{width:100%;max-width:240px;max-height:140px;object-fit:contain;display:block}
.inst-name{
  font-family:'Fraunces',serif;font-size:2.2rem;font-weight:600;
  line-height:1.1;letter-spacing:-.02em;margin-bottom:.4rem;
}
.inst-sub{color:#9ba5bc;font-size:.9rem;line-height:1.5}

.cred-card{
  margin-top:2.5rem;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  padding:1rem 1.2rem;
}
.cred-card-title{
  font-family:'JetBrains Mono',monospace;
  font-size:.6rem;letter-spacing:.25em;text-transform:uppercase;
  color:var(--crimson,#C8102E);margin-bottom:.7rem;
}
.cred-row{
  display:flex;align-items:center;gap:.6rem;
  font-family:'JetBrains Mono',monospace;font-size:.8rem;
  color:#cdd4e3;margin-bottom:.35rem;
}
.cred-pill{
  background:rgba(200,16,46,.2);border:1px solid rgba(200,16,46,.4);
  color:#f08090;font-size:.6rem;padding:.1rem .4rem;
  text-transform:uppercase;letter-spacing:.1em;
}

/* Right panel */
.login-right{
  flex:7;display:flex;align-items:center;
  justify-content:center;padding:2rem;
  background:var(--paper,#FAF9F7);
}
.card{
  width:100%;max-width:440px;
  background:var(--cream,#F3F0EA);
  border-top:3px solid var(--crimson,#C8102E);
  box-shadow:0 2px 0 rgba(0,0,0,.04),0 20px 50px -15px rgba(26,26,46,.2);
  padding:2.5rem;
}
.card-title{
  font-family:'Fraunces',serif;
  font-size:2.2rem;font-weight:600;letter-spacing:-.02em;
  margin:0 0 .2rem;color:var(--ink,#1A1A2E);
}
.card-sub{font-size:.88rem;color:#5A6478;margin-bottom:1.8rem}

/* Step indicator */
.steps{display:flex;gap:.4rem;margin-bottom:1.8rem}
.step-dot{
  flex:1;height:3px;border-radius:2px;
  background:var(--line,#E2DDD6);transition:background .3s;
}
.step-dot.done{background:var(--crimson,#C8102E)}

/* Error box */
.err-box{
  background:#fff0f2;border-left:3px solid var(--crimson,#C8102E);
  padding:.8rem 1rem;margin-bottom:1.5rem;
  font-size:.85rem;color:#7a1020;
  display:flex;align-items:flex-start;gap:.6rem;
}
.err-icon{flex-shrink:0;margin-top:.05rem}

/* Fields */
.fld-wrap{margin-bottom:1.4rem}
.lbl{
  font-family:'JetBrains Mono',monospace;
  font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;
  color:#5A6478;display:block;margin-bottom:.4rem;
}
.fld{
  width:100%;background:#fff;
  border:1px solid var(--line,#E2DDD6);
  border-bottom:2px solid var(--ink,#1A1A2E);
  font-family:inherit;font-size:.95rem;
  padding:.65rem .75rem;outline:none;
  transition:border-color .2s;color:var(--ink,#1A1A2E);
  box-sizing:border-box;
}
.fld:focus{border-bottom-color:var(--crimson,#C8102E)}
.fld-hint{font-size:.72rem;color:#8A93A6;margin-top:.3rem}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  cursor:pointer;border:none;font-family:inherit;
  letter-spacing:.08em;text-transform:uppercase;
  font-size:.72rem;font-weight:600;padding:.8rem 1.3rem;
  transition:all .2s;text-decoration:none;
}
.btn-primary{background:var(--crimson,#C8102E);color:#fff;width:100%;justify-content:center}
.btn-primary:hover{background:var(--crimson-dk,#9B0C22)}
.btn-ghost{
  background:transparent;color:var(--ink,#1A1A2E);
  border:1px solid var(--ink,#1A1A2E);
}
.btn-ghost:hover{background:var(--ink,#1A1A2E);color:#fff}
.btn-row{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-top:1.8rem}

/* Employee code preview badge */
.emp-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  background:#fff;border:1px solid var(--line,#E2DDD6);
  padding:.4rem .8rem;margin-bottom:1.4rem;
  font-family:'JetBrains Mono',monospace;font-size:.82rem;color:var(--ink,#1A1A2E);
}
.emp-badge-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--crimson,#C8102E);
}

@media(max-width:768px){
  .login-wrap{flex-direction:column}
  .login-left{padding:2rem;flex:none}
  .login-right{padding:1.5rem}
  .card{padding:2rem 1.5rem}
}

/* ===================================================================
 * Added when the sign-in was made common to staff and students.
 * The two-panel shell above is shared by three pages now:
 *   index.php          the front door — choose Official or Student
 *   login.php          staff, unchanged in behaviour
 *   student/login.php  students
 * =================================================================== */

/* the Official / Student chooser */
.who-row{display:flex;gap:.9rem;margin:.2rem 0 1.6rem}
.who{
  flex:1;display:block;text-decoration:none;color:inherit;cursor:pointer;
  border:1.5px solid var(--line,#dde3ec);border-radius:10px;
  padding:1.15rem 1rem;background:#fff;text-align:left;
  transition:border-color .15s ease, box-shadow .15s ease, transform .08s ease;
}
.who:hover{border-color:var(--navy,#1F4E79);box-shadow:0 6px 20px rgba(31,78,121,.10)}
.who:active{transform:translateY(1px)}
.who.on{border-color:var(--crimson,#C8102E);box-shadow:0 6px 20px rgba(200,16,46,.12)}
.who-ico{
  width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:#eef4fb;color:var(--navy,#1F4E79);margin-bottom:.6rem;
}
.who.on .who-ico{background:#fdecef;color:var(--crimson,#C8102E)}
.who-t{font-weight:700;font-size:.95rem;letter-spacing:-.01em}
.who-s{font-size:.75rem;color:#6b7690;margin-top:.15rem;line-height:1.45}

/* only one of the two panes is shown at a time */
.pane{display:none}
.pane.on{display:block}

.switch-line{
  margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--line,#dde3ec);
  font-size:.8rem;color:#6b7690;text-align:center;
}
.switch-line a{color:var(--navy,#1F4E79);font-weight:600;text-decoration:none}
.switch-line a:hover{text-decoration:underline}

@media (max-width:900px){
  .who-row{flex-direction:column;gap:.6rem}
  .who{padding:.9rem}
  .who-ico{margin-bottom:.45rem}
}