/*
 * RSST landing page reset
 * Desktop: 60% campus image / 40% login panel
 * Mobile: fixed photo-above-login layout with no page scrolling
 */

.landing-body{
  width:100%;
  height:100vh;
  height:100dvh;
  min-height:0;
  margin:0;
  overflow:hidden;
  overscroll-behavior:none;
  background:#75a8d0;
  color:#203244;
}

.landing-scene{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,60%) minmax(0,40%);
  width:100%;
  height:100vh;
  height:100dvh;
  min-height:0;
  overflow:hidden;
  background:#75a8d0;
}

.hero-upper,
.hero-lower{
  position:relative;
  min-width:0;
  min-height:0;
  height:100%;
  overflow:hidden;
}

/* Left campus section. */
.hero-upper{
  z-index:0;
  background:#244f6b;
}

.school-background-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 52%;
  filter:none;
  transform:none;
}

/* Left image must stay completely clear.
 * The existing .background-glass element is kept in the markup for
 * compatibility, but it is disabled so nothing sits over Bg.jpg.
 */
.background-glass{
  display:none !important;
}

/* Right login section: clean blue panel, not a glass card. */
.hero-lower{
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(22px,4vw,58px);
  border-left:1px solid rgba(255,255,255,.28);
  background:
    radial-gradient(circle at 100% 0%,rgba(255,255,255,.20),transparent 31%),
    radial-gradient(circle at 0% 100%,rgba(39,107,154,.20),transparent 35%),
    linear-gradient(145deg,#8bbce0 0%,#75abd4 48%,#6298c2 100%);
  box-shadow:-16px 0 38px rgba(20,61,88,.18);
}

.portal-content{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:min(100%,390px);
  max-height:100%;
  padding:0;
  text-align:center;
  background:transparent;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.hero-logo-wrap{
  display:grid;
  place-items:center;
  width:clamp(126px,11vw,170px);
  aspect-ratio:1;
  margin:0 0 20px;
  padding:9px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.86);
  border-radius:24px;
  background:rgba(255,255,255,.94);
  box-shadow:0 15px 34px rgba(22,67,99,.19);
}

.hero-logo{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:17px;
}

.motto{
  margin:0 0 22px;
  color:#173c59;
  font-size:clamp(1.05rem,1.85vw,1.55rem);
  font-weight:900;
  line-height:1.18;
  letter-spacing:.055em;
  text-align:center;
}

.landing-alert{
  width:100%;
  max-width:390px;
  margin:0 0 14px;
  text-align:center;
}

.portal-buttons{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  width:100%;
}

.portal-button{
  width:100%;
  min-width:0;
  min-height:58px;
  padding:12px 14px;
  border:1px solid rgba(23,85,129,.18);
  border-radius:14px;
  background:linear-gradient(135deg,#2376ae,#2b83bd);
  color:#fff;
  font-weight:850;
  line-height:1.16;
  cursor:pointer;
  box-shadow:0 9px 20px rgba(27,80,118,.18);
  transition:transform .18s ease,background .18s ease,box-shadow .18s ease;
}

.portal-button:hover{
  transform:translateY(-1px);
  background:linear-gradient(135deg,#1c6699,#2575aa);
  box-shadow:0 12px 24px rgba(27,80,118,.23);
}

.portal-button:focus-visible{
  outline:3px solid rgba(255,255,255,.88);
  outline-offset:3px;
}

.security-note{
  margin:17px 0 0;
  color:#244c67;
  font-size:.78rem;
  font-weight:700;
}

.menu-trigger{
  position:fixed;
  z-index:20;
  top:20px;
  left:20px;
  display:grid;
  align-content:center;
  gap:5px;
  width:46px;
  height:46px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.74);
  border-radius:11px;
  background:rgba(255,255,255,.78);
  box-shadow:0 7px 20px rgba(34,75,103,.16);
  backdrop-filter:blur(14px) saturate(135%);
  -webkit-backdrop-filter:blur(14px) saturate(135%);
  cursor:pointer;
}

.menu-trigger span{
  height:2px;
  border-radius:4px;
  background:#245f88;
}

.glass-drawer{
  position:fixed;
  z-index:30;
  inset:0 auto 0 0;
  width:min(320px,84vw);
  height:100vh;
  height:100dvh;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:70px 20px 24px;
  border-right:1px solid rgba(255,255,255,.58);
  background:rgba(245,251,254,.90);
  box-shadow:14px 0 36px rgba(31,72,99,.18);
  backdrop-filter:blur(22px) saturate(135%);
  -webkit-backdrop-filter:blur(22px) saturate(135%);
  transform:translateX(-105%);
  transition:transform .24s ease;
}

.glass-drawer.is-open{transform:translateX(0)}

.drawer-close,
.modal-close,
.panel-close{
  position:absolute;
  top:16px;
  right:16px;
  width:38px;
  height:38px;
  border:1px solid #d4e4ed;
  border-radius:10px;
  background:#fff;
  color:#315e79;
  font-size:1.45rem;
  cursor:pointer;
}

.drawer-logo{
  width:115px;
  height:115px;
  margin:0 auto 28px;
  padding:6px;
  overflow:hidden;
  border:1px solid #d4e4ed;
  border-radius:16px;
  background:#fff;
}

.drawer-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.drawer-link{
  display:block;
  width:100%;
  margin:8px 0;
  padding:13px 15px;
  border:1px solid #d8e7ef;
  border-radius:10px;
  background:#fff;
  color:#244f6d;
  font-weight:800;
  text-align:left;
  cursor:pointer;
}

.drawer-link:hover{background:#eaf5fb}

.info-panel{
  position:fixed;
  z-index:35;
  top:50%;
  left:50%;
  width:min(90vw,620px);
  max-height:calc(100dvh - 28px);
  padding:30px;
  overflow-y:auto;
  overscroll-behavior:contain;
  border:1px solid #d2e3ed;
  border-radius:18px;
  background:#fff;
  box-shadow:0 24px 60px rgba(22,61,87,.22);
  transform:translate(-50%,-50%);
}

.info-panel h2{margin:.2rem 0}
.info-panel p,
.info-panel dd{color:var(--muted);line-height:1.65}
.info-panel dl{display:grid;grid-template-columns:110px 1fr;gap:8px 14px}
.info-panel dt{font-weight:850}
.info-panel dd{margin:0}

.login-modal-backdrop{
  position:fixed;
  z-index:40;
  inset:0;
  display:none;
  place-items:center;
  padding:20px;
  background:rgba(20,54,76,.50);
}

.login-modal-backdrop.is-open{display:grid}

.login-card{
  position:relative;
  width:min(100%,430px);
  max-height:calc(100dvh - 24px);
  padding:28px;
  overflow-y:auto;
  overscroll-behavior:contain;
  border:1px solid #d4e4ed;
  border-radius:18px;
  background:#fff;
  box-shadow:0 24px 65px rgba(17,51,73,.28);
  text-align:center;
}

.login-logo{
  width:96px;
  height:96px;
  margin:-4px auto 8px;
  border-radius:14px;
  object-fit:contain;
}

.login-card h1{margin:.15rem 0 .4rem}
.login-card>p{margin:0 0 20px;color:var(--muted)}
.login-card form{display:grid;gap:15px;text-align:left}
.password-wrap{position:relative}
.password-wrap input{padding-right:70px}
.login-error{padding:10px;border-radius:10px;background:#fff0f2;color:#9e2b3d;font-size:.84rem}

.loading-screen{
  position:fixed;
  z-index:60;
  inset:0;
  place-items:center;
  background:#eaf5fb;
}

.loading-screen:not([hidden]){display:grid}

.loading-box{
  width:min(88vw,400px);
  padding:32px;
  border:1px solid #d4e5ee;
  border-radius:18px;
  background:#fff;
  box-shadow:0 18px 44px rgba(24,69,99,.18);
  text-align:center;
}

.loading-box img{width:90px;height:90px;object-fit:contain}
.loading-box strong{display:block;margin-top:8px;font-size:1.35rem}
.loading-box p{color:var(--muted)}
.loading-track{height:9px;margin:18px 0 8px;overflow:hidden;border-radius:99px;background:#dbe8ef}
.loading-track span{display:block;width:0;height:100%;border-radius:99px;background:#4f9bd1;transition:width .12s linear}

/* Tablet desktop-like layout. */
@media(max-width:1050px) and (min-width:761px){
  .hero-lower{padding:24px}
  .portal-content{width:min(100%,340px)}
  .hero-logo-wrap{width:clamp(108px,13vw,142px);margin-bottom:15px}
  .motto{margin-bottom:16px;font-size:clamp(.95rem,1.75vw,1.2rem)}
  .portal-buttons{grid-template-columns:1fr;gap:9px}
  .portal-button{min-height:51px}
}

/* Portrait phone and narrow tablet: fixed image above login panel. */
@media(max-width:760px){
  .landing-scene{
    grid-template-columns:1fr;
    grid-template-rows:minmax(0,42%) minmax(0,58%);
  }


  .hero-upper,
  .hero-lower{
    width:100%;
    height:auto;
  }

  .school-background-image{
    object-position:center 52%;
  }

  .hero-lower{
    padding:clamp(10px,2.4vh,20px) 16px;
    border-left:0;
    border-top:1px solid rgba(255,255,255,.28);
    box-shadow:0 -12px 30px rgba(20,61,88,.15);
  }

  .portal-content{
    width:min(100%,410px);
    justify-content:center;
  }

  .hero-logo-wrap{
    width:clamp(78px,14vh,112px);
    margin-bottom:clamp(7px,1.4vh,13px);
    padding:6px;
    border-radius:18px;
  }

  .hero-logo{border-radius:13px}

  .motto{
    margin-bottom:clamp(9px,1.7vh,15px);
    font-size:clamp(.88rem,3vw,1.08rem);
    line-height:1.1;
  }

  .landing-alert{
    margin-bottom:8px;
    padding-block:7px;
    font-size:.78rem;
  }

  .portal-buttons{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }

  .portal-button{
    min-height:clamp(43px,7.5vh,52px);
    padding:8px 7px;
    border-radius:11px;
    font-size:clamp(.68rem,2.55vw,.83rem);
  }

  .security-note{
    margin-top:clamp(7px,1.4vh,12px);
    font-size:clamp(.66rem,2.2vw,.76rem);
  }

  .menu-trigger{
    top:12px;
    left:12px;
    width:42px;
    height:42px;
  }

  .info-panel{
    width:calc(100vw - 24px);
    max-height:calc(100dvh - 24px);
    padding:24px 20px;
  }

  .info-panel dl{grid-template-columns:1fr}
  .info-panel dd{margin-bottom:8px}

  .login-modal-backdrop{padding:12px}
  .login-card{max-height:calc(100dvh - 24px);padding:22px 20px}
  .login-logo{width:78px;height:78px}
}

@media(max-width:460px){
  .landing-scene{grid-template-rows:minmax(0,39%) minmax(0,61%)}
  .hero-lower{padding-inline:10px}
  .portal-content{max-width:360px}
  .hero-logo-wrap{width:clamp(72px,13vh,98px)}
  .portal-buttons{gap:7px}
  .portal-button{font-size:clamp(.63rem,2.7vw,.76rem)}
}

/* Short portrait phones stay completely inside the viewport. */
@media(max-width:760px) and (max-height:620px) and (orientation:portrait){
  .landing-scene{grid-template-rows:minmax(0,35%) minmax(0,65%)}
  .hero-lower{padding-block:6px}
  .hero-logo-wrap{width:clamp(64px,12vh,80px);margin-bottom:6px}
  .motto{margin-bottom:8px;font-size:.82rem}
  .portal-button{min-height:40px}
  .security-note{margin-top:6px}
}

/* Landscape phones keep the requested 60/40 split. */
@media(max-width:950px) and (max-height:560px) and (orientation:landscape){
  .landing-scene{
    grid-template-columns:minmax(0,60%) minmax(0,40%);
    grid-template-rows:1fr;
  }


  .school-background-image{object-position:center 52%}

  .hero-lower{
    padding:8px 12px;
    border-top:0;
    border-left:1px solid rgba(255,255,255,.28);
    box-shadow:-12px 0 28px rgba(20,61,88,.15);
  }

  .portal-content{width:min(100%,310px)}
  .hero-logo-wrap{width:clamp(60px,18vh,84px);margin-bottom:5px;padding:5px;border-radius:14px}
  .motto{margin-bottom:7px;font-size:clamp(.72rem,2vw,.92rem)}
  .portal-buttons{grid-template-columns:1fr;gap:6px}
  .portal-button{min-height:37px;padding:6px 8px;font-size:.68rem}
  .security-note{margin-top:6px;font-size:.63rem}
}

@media(max-height:650px) and (min-width:951px){
  .hero-logo-wrap{width:105px;margin-bottom:9px}
  .motto{margin-bottom:10px;font-size:.94rem}
  .portal-button{min-height:43px;padding-top:7px;padding-bottom:7px}
  .security-note{margin-top:8px}
}

/* Dedicated authenticated Gate Attendance entry */
.gate-start-button{display:block;margin:12px auto 0;max-width:330px;width:100%;background:#174c73;color:white;text-transform:none;font-size:16px;min-height:48px;border-radius:10px}

/* Gate-only login context. Actual activation timestamp is stored server-side. */
.gate-activation-details{padding:12px 13px;border:1px solid #d2e5ef;border-radius:11px;background:#f4f9fc;display:grid;gap:9px}
.gate-activation-details[hidden]{display:none!important}
.gate-activation-heading{font-size:.78rem;font-weight:800;color:#235a7d}
.gate-activation-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gate-activation-fields label{font-size:.75rem;color:#547088;min-width:0}
.gate-activation-fields input[readonly]{width:100%;font-size:.84rem;font-weight:700;background:#e9f2f8!important;color:#204e6b!important;cursor:default}
.gate-activation-details small{line-height:1.4;color:#55758c;font-weight:500}
@media(max-width:370px){.gate-activation-fields{grid-template-columns:1fr}}