@import url('./global.css?v=2026-02-25-1');

/* ================================
   Header Styling
   ================================ */
header {
  width: 100%;
  height: 10rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--color-primary);
  padding: 0 3rem;
}

header h1 {
  color: white;
  line-height: 4rem;
  font-size: 3rem;
}

#logo {
  height: 3vw;
}

/* ================================
   Main Content Area
   ================================ */
main {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: flex-start;
  padding: 2rem 25%;
}

h2 {
  font-size: 2.5rem;
  letter-spacing: 1px;
  margin-top: 0.8rem;
}

/* ================================
   Form Controls
   ================================ */
#school-dropdown {
  width: 100%;
  height: 3rem;
  border-radius: var(--border-radius);
  border: 2px solid var(--color-primary);
  padding: 0 1rem;
  margin-bottom: 2rem;
  font-size: 1rem;
  letter-spacing: var(--font-spacing-p);
  background-color: var(--color-secondary);
  outline: none;
  appearance: none;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.5rem;
}

#pswd {
  width: 100%;
  height: 3rem;
  border-radius: var(--border-radius);
  border: 2px solid var(--color-primary);
  padding: 0 1rem;
  margin-bottom: 2rem;
  font-size: 1rem;
  letter-spacing: var(--font-spacing);
  background-color: var(--color-secondary);
  outline: none;
}

#pswd::-ms-reveal,
#pswd::-ms-clear {
  display: none;
}

#pswd:focus {
  border-color: var(--color-primary);
}

.pswd-row {
  position: relative;
  width: 100%;
  display: block;
}

.toggle-pswd {
  position: absolute;
  right: 12px;
  top: 30%;
  transform: translateY(-50%);
  color: rgb(220,56,56);
  cursor: pointer;
  display: none;
  user-select: none;
  background: transparent;
}

/* ================================
   Button Styling
   ================================ */
#login-button {
  width: 100%;
  height: 3.2rem;
  border-radius: var(--border-radius);
  border: none;
  background-color: var(--color-accent);
  color: white;
  font-size: 1.2rem;
  letter-spacing: var(--font-spacing);
  cursor: pointer;
  margin-top: 2rem;
  transition: background-color 0.1s ease;
}

#login-button:hover {
  background-color: rgb(192, 24, 24);
}

.login-message {
  display: none;
  width: 100%;
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  border-radius: var(--border-radius);
  background-color: rgba(233, 56, 56, 0.12);
  border: 1px solid rgba(233, 56, 56, 0.35);
  color: rgb(162, 28, 28);
  font-size: 1rem;
  letter-spacing: 1px;
}

/* ================================
   Loading Indicator
   ================================ */
#loading {
  padding-top: 1rem;
  text-align: center;
  width: 100%;
  display: none;
}

.privacy-link {
  position: fixed;
  right: 2rem;
  bottom: 1.5rem;
  margin: 0;
  z-index: 10;
}

.privacy-link a {
  color: var(--color-primary);
  font-size: 1rem;
  letter-spacing: 1px;
  margin: 0;
  background: rgba(248, 248, 248, 0.9);
  padding: 0.4rem 0.7rem;
  border-radius: var(--border-radius);
  text-decoration-thickness: 2px;
}

.privacy-link a:hover {
  color: var(--color-accent);
}

/* ================================
   Responsive Design
   ================================ */
@media (max-width: 800px) {
  header h1 {
    font-size: 1.5rem;
    line-height: 1.5rem;
  }

  h2 {
    font-size: 1.2rem;
  }

  main {
    padding: 2rem 10%;
  }

  .privacy-link {
    right: 1rem;
    bottom: 1rem;
  }
}