/* ===== Shiftpilot Login Styles ===== */
* { box-sizing: border-box }
html, body { height: 100%; margin: 0; padding: 0 }

body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: linear-gradient(135deg, #002c3e, #006e87);
  color: #0b1922;
}

/* Centering shell */
.login-container {
  min-height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.2rem;
}

/* Card */
.login-box {
  background: #fff;
  width: clamp(280px, 40vw, 380px);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  padding: 2.4rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  text-align: center;
  position: relative;
}

/* Home button */
.login-home-btn {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f0f5f7;
  border: 1px solid #d1e4ed;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  text-decoration: none;
  color: #006e87;
  transition: all 0.2s ease;
  cursor: pointer;
}
.login-home-btn:hover {
  background: #006e87;
  border-color: #006e87;
  color: #fff;
}
.login-home-btn:active {
  transform: scale(0.95);
}

/* Logo block */
.logo-svg { width: clamp(60px, 20vw, 84px); height: auto; display: block }
.logo-wrap {
  width: clamp(70px, 22vw, 96px);
  height: clamp(70px, 22vw, 96px);
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #ffffff;
  /* border intentionally removed per your last style */
  margin-bottom: .8rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.logo-wrap .logo-svg {
  width: 72%;
  height: auto;
  display: block;
  /* If you want extra definition on white, uncomment:
  stroke: #004452;
  stroke-width: 1.2px;
  */
}

/* Heading & description */
.login-box h2 {
  color: #006e87;
  font-size: clamp(1.25rem, 2.6vw, 1.85rem);
  font-weight: 700;
  margin: .2rem 0 .6rem;
}
.login-description {
  color: #4b6673;
  font-size: .96rem;
  margin: 0 0 .5rem;
}

/* Google button scale */
.g_id_signin { transform: scale(1.15); transform-origin: center }
@media (max-width: 420px) {
  .g_id_signin { transform: scale(1.0) }
}

/* Footer */
footer { color: #e8f4f8 }
.footer-note {
  text-align: center;
  padding: 0 0 1rem;
  font-size: .9rem;
  opacity: .9;
}

/* Links */
a.muted { color: #5aaec2; text-decoration: none }
a.muted:hover { text-decoration: underline }