*{box-sizing:border-box}
html,body{
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#eef7fc;
  font-family:"Segoe UI",Arial,sans-serif;
}

.screen{
  position:fixed;
  inset:0;
  overflow:hidden;
  background:#eef7fc;
}

/*
  IMPORTANT:
  The approved mockup itself fills the browser viewport.
  This gives the same visual result at every desktop resolution.
*/
.master{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
  user-select:none;
  pointer-events:none;
}

/*
  Exact positions are percentage-based from the approved master image.
  Therefore the controls stay aligned even when the browser resolution changes.
*/
.login-form{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.control{
  position:absolute;
  height:5.15%;
  border:1px solid #c9dbea;
  border-radius:7px;
  background:#fff;
  display:flex;
  align-items:center;
  overflow:hidden;
  pointer-events:auto;
  box-shadow:0 1px 2px rgba(12,65,112,.02);
}

/* Reference positions */
.department{
  left:67.38%;
  top:36.37%;
  width:28.82%;
}

.username{
  left:67.38%;
  top:45.07%;
  width:28.82%;
  border-color:#2f8df5;
  box-shadow:0 0 0 1px rgba(47,141,245,.14);
}

.password{
  left:67.38%;
  top:53.58%;
  width:28.82%;
}

.ctrl-icon{
  flex:0 0 12.2%;
  height:100%;
  display:grid;
  place-items:center;
  color:#0e4a91;
  font-size:1.05vw;
  border-right:1px solid #e7eef5;
  background:#fff;
}

.control select,
.control input{
  width:100%;
  height:100%;
  border:0;
  outline:0;
  background:#fff;
  color:#173861;
  font-size:1.02vw;
  padding:0 1%;
}

.control input::placeholder{
  color:#8fa5bc;
}

.control select{
  appearance:none;
  font-weight:500;
}

.chevron{
  flex:0 0 10%;
  text-align:center;
  color:#0d417f;
  font-size:1.15vw;
}

.eye{
  flex:0 0 10%;
  height:100%;
  border:0;
  border-left:1px solid #e7eef5;
  background:#fff;
  color:#0d4b91;
  font-size:1vw;
  cursor:pointer;
}

.control:focus-within{
  border-color:#2b8cf5;
  box-shadow:0 0 0 2px rgba(43,140,245,.10);
}

/* Clickable checkbox: directly above the checkbox shown in the mockup */
.remember-hit{
  position:absolute;
  left:67.44%;
  top:60.03%;
  width:1.18%;
  height:2.10%;
  pointer-events:auto;
  cursor:pointer;
}
.remember-hit input{
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:pointer;
}
.remember-hit::after{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid #8092a6;
  border-radius:2px;
  background:#fff;
  pointer-events:none;
}
.remember-hit:has(input:checked)::after{
  background:#0b75df;
  border-color:#0b75df;
  box-shadow:inset 0 0 0 3px #fff;
}

/* Keep reference text visible, but make it functional */
.forgot-hit{
  position:absolute;
  left:87.55%;
  top:59.65%;
  width:8.7%;
  height:2.7%;
  pointer-events:auto;
  cursor:pointer;
}

/* Button appearance remains exactly from the mockup image */
.signin-hit{
  position:absolute;
  left:67.34%;
  top:63.52%;
  width:28.87%;
  height:6.70%;
  border:0;
  background:transparent;
  cursor:pointer;
  pointer-events:auto;
  border-radius:8px;
}
.signin-hit:hover{
  box-shadow:inset 0 0 0 999px rgba(255,255,255,.035);
}
.signin-hit:active{
  box-shadow:inset 0 0 0 999px rgba(0,45,110,.05);
}

.login-error{
  position:absolute;
  left:67.38%;
  top:31.55%;
  width:28.82%;
  padding:.7% 1%;
  border:1px solid #efc0c0;
  border-radius:7px;
  background:#fff3f3;
  color:#a42d2d;
  font-size:.82vw;
  z-index:5;
}

/* Keep Chrome autofill from changing the visual design */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-text-fill-color:#173861 !important;
  -webkit-box-shadow:0 0 0 1000px #fff inset !important;
}

/* Slight minimum sizes for lower desktop widths */
@media (max-width:1200px){
  .control select,.control input{font-size:12px}
  .ctrl-icon,.chevron,.eye{font-size:13px}
  .login-error{font-size:10px}
}


/* ==========================================================
   V11 — LABORATORY FIXED DEPARTMENT + SQL USER DROPDOWN
   ========================================================== */

.department-fixed{
  background:#fff;
}
.department-fixed .fixed-value{
  flex:1;
  display:flex;
  align-items:center;
  height:100%;
  padding-left:0;
  color:#173861;
  font-size:1.02vw;
  font-weight:500;
}

/* Username is now a real SQL-loaded dropdown */
.username select{
  width:100%;
  height:100%;
  border:0;
  outline:0;
  appearance:none;
  -webkit-appearance:none;
  background:#fff;
  color:#173861;
  font-size:1.02vw;
  padding:0 10% 0 0;
  cursor:pointer;
}
.username .chevron{
  position:absolute;
  right:0;
  top:0;
  width:10%;
  height:100%;
  display:grid;
  place-items:center;
  pointer-events:none;
  color:#0d417f;
  background:#fff;
  font-size:1.15vw;
}

/* Cover the original mockup text fully before rendering live values */
.department,
.username,
.password{
  background:#fff;
}

.department::before,
.username::before,
.password::before{
  content:"";
  position:absolute;
  inset:0;
  background:#fff;
  z-index:0;
  pointer-events:none;
}

.department > *,
.username > *,
.password > *{
  position:relative;
  z-index:1;
}

.signin-hit:disabled{
  cursor:not-allowed;
  pointer-events:none;
}

@media (max-width:1200px){
  .department-fixed .fixed-value,
  .username select{
    font-size:12px;
  }
  .username .chevron{
    font-size:13px;
  }
}


/* ==========================================================
   V12 FINAL POLISH — USERNAME / PASSWORD ACTIVE STATE ONLY
   Layout and dimensions intentionally unchanged.
   ========================================================== */

.control{
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background-color .18s ease;
}

/* Default clean field state */
.department,
.username,
.password{
  border-color:#cbdcf0;
  background:#ffffff;
  box-shadow:none;
}

/* Username dropdown normal state */
.username select{
  background:#ffffff;
  color:#173861;
  transition:background-color .18s ease;
}

/* Password field normal state */
.password input{
  background:#ffffff;
  color:#173861;
  transition:background-color .18s ease;
}

/* Active/focused premium soft-blue state */
.username:focus-within,
.password:focus-within{
  border-color:#2f80ed !important;
  background:#f5f9ff !important;
  box-shadow:0 0 0 3px rgba(47,128,237,.10) !important;
}

.username:focus-within select,
.password:focus-within input,
.password:focus-within .ctrl-icon,
.password:focus-within .eye,
.username:focus-within .ctrl-icon,
.username:focus-within .chevron{
  background:#f5f9ff !important;
}

/* Selected username gets a very subtle permanent tint */
.username.has-selection{
  background:#f8fbff;
  border-color:#b9d3f3;
}
.username.has-selection select,
.username.has-selection .ctrl-icon,
.username.has-selection .chevron{
  background:#f8fbff;
}

/* Keep department calm and neutral */
.department-fixed{
  background:#ffffff !important;
  border-color:#cbdcf0 !important;
  box-shadow:none !important;
}

/* Password active tint */
.password input:focus{
  background:#f5f9ff !important;
}

/* Slightly softer placeholder */
.password input::placeholder{
  color:#91a6bd;
}

/* Keyboard focus accessibility */
.username select:focus,
.password input:focus{
  outline:none;
}


/* ==========================================================
   FINAL OJAS BRAND THEME
   Department / Username / Password direct colour coding
   ========================================================== */

/* DEPARTMENT — OJAS Soft Blue */
.department,
.department::before,
.department-fixed,
.department-fixed .ctrl-icon,
.department-fixed .fixed-value {
    background: #EAF3FF !important;
}
.department {
    border-color: #BFD5F3 !important;
}

/* USERNAME — Mild Teal / Mint */
.username,
.username::before,
.username select,
.username .ctrl-icon,
.username .chevron {
    background: #EAFBF8 !important;
}
.username {
    border-color: #B7E3D8 !important;
}

/* PASSWORD — Very Light Blue Neutral */
.password,
.password::before,
.password input,
.password .ctrl-icon,
.password .eye {
    background: #F4F8FF !important;
}
.password {
    border-color: #C9D8EE !important;
}

/* Readable text */
.department-fixed .fixed-value,
.username select,
.password input {
    color: #173861 !important;
}

/* Focus states remain premium and subtle */
.department:focus-within {
    border-color: #6FA7E8 !important;
    box-shadow: 0 0 0 2px rgba(47,128,237,.08) !important;
}

.username:focus-within {
    border-color: #49B79D !important;
    box-shadow: 0 0 0 2px rgba(73,183,157,.10) !important;
}

.password:focus-within {
    border-color: #6D9FE3 !important;
    box-shadow: 0 0 0 2px rgba(47,128,237,.08) !important;
}

/* Preserve field background colours while active */
.username:focus-within,
.username:focus-within::before,
.username:focus-within select,
.username:focus-within .ctrl-icon,
.username:focus-within .chevron {
    background: #E4F8F3 !important;
}

.password:focus-within,
.password:focus-within::before,
.password:focus-within input,
.password:focus-within .ctrl-icon,
.password:focus-within .eye {
    background: #EDF4FF !important;
}

/* Keep selected username softly highlighted */
.username:has(select option:checked:not([value=""])) ,
.username:has(select option:checked:not([value=""]))::before,
.username:has(select option:checked:not([value=""])) select,
.username:has(select option:checked:not([value=""])) .ctrl-icon,
.username:has(select option:checked:not([value=""])) .chevron {
    background: #EAFBF8 !important;
}

/* Chrome autofill should retain the OJAS password colour */
.password input:-webkit-autofill,
.password input:-webkit-autofill:hover,
.password input:-webkit-autofill:focus {
    -webkit-text-fill-color: #173861 !important;
    -webkit-box-shadow: 0 0 0 1000px #F4F8FF inset !important;
}