/* ===========================================================================
   Dewey Frappe — branded /login reskin  ("Aurora Open")

   Pure CSS. Loaded globally via the `web_include_css` hook, but EVERY rule is
   namespaced under Frappe's `.for-login` wrapper, so only the login page is
   affected — other web/portal pages are untouched.

   The native Google OAuth redirect flow is never touched: the button's href is
   computed server-side (Social Login Key), and CSS cannot alter it. We only
   restyle, hide the secondary Frappe Cloud provider, and swap two text labels.

   Brand system (frontend/hr_attendance/src/brand/tokens.css):
     Forest green #066031 = the single "proceed" action (the only colored
     surface here). Everything else stays neutral / paper. Light-only.
   =========================================================================== */

/* Self-hosted Geist (variable) — reused from the shipped brand assets, no
   external font dependency. Only downloads when used, i.e. on /login. */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/dewey_portal/css/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/dewey_portal/css/geist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Full-bleed: neutralize Frappe's `.container` ONLY on the login page (the
   `:has()` keeps every other web page's container intact). */
main.container:has(.for-login) {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* ---- canvas ---------------------------------------------------------------*/
.for-login {
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: #16201a;
  min-height: 100vh;
  margin: 0;
  padding: 48px 24px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(34% 32% at 50% 26%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0) 70%),
    radial-gradient(40% 38% at 12% 12%, rgba(6, 96, 49, 0.13), rgba(6, 96, 49, 0) 60%),
    radial-gradient(38% 34% at 90% 16%, rgba(22, 150, 86, 0.10), rgba(22, 150, 86, 0) 64%),
    radial-gradient(48% 44% at 86% 96%, rgba(194, 65, 12, 0.07), rgba(194, 65, 12, 0) 62%),
    linear-gradient(180deg, #ffffff 0%, #eef2ee 100%);
}
.for-login .page-card-head,
.for-login .login-content.page-card {
  position: relative;
  z-index: 1;
}

/* ---- brand lockup ---------------------------------------------------------*/
.for-login .page-card-head {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 0 34px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.for-login img.app-logo {
  height: 140px !important;
  /* Frappe's login.bundle.css clamps the logo with `.page-card-head img
     { max-height: 42px }`. `height` alone can't beat a `max-height`, so we
     must override max-height (and pin min-height) or the logo stays tiny. */
  max-height: 140px !important;
  min-height: 140px !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 0 26px !important;
  display: block !important;
  filter: drop-shadow(0 18px 40px rgba(6, 96, 49, 0.22));
}
/* The template hard-codes "Login to {app_name}". Swap to the brand greeting.
   (CSS-only; degrades to the original text if Frappe ever changes this DOM.) */
.for-login .page-card-head h4 {
  font-size: 0 !important;
  margin: 0;
}
.for-login .page-card-head h4::after {
  content: "Welcome to Dewey Frappe";
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #14201a;
}
.for-login .page-card-head::after {
  content: "Sign in to your workspace";
  display: block;
  margin-top: 12px;
  font-size: 15.5px;
  font-weight: 400;
  color: #5c655f;
}

/* ---- strip Frappe's card down to a bare action container ------------------*/
.for-login .login-content.page-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  max-width: none;
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.for-login form.form-login {
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.for-login .social-login-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Google is the only path — hide the secondary Frappe Cloud provider.
   Higher specificity (0,3,0) so it can't lose the tie to the button rule. */
.for-login .social-login-buttons .btn-login-with-frappe-cloud,
.for-login .login-button-wrapper .btn-login-with-frappe-cloud {
  display: none !important;
}

/* ---- the one action: Forest-green hero (green = proceed) ------------------*/
.for-login .btn-login-option {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 320px !important;
  min-height: 62px !important;
  padding: 0 32px !important;
  font-size: 0 !important; /* hide native "Login with Google" label */
  color: #ffffff !important;
  background: #066031 !important;
  border: 0 !important;
  border-radius: 15px !important;
  box-shadow: 0 16px 38px -12px rgba(6, 96, 49, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.18s ease, background-color 0.18s ease;
}
.for-login .btn-login-option::after {
  content: "Continue with Google";
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #ffffff;
}
.for-login .btn-login-option:hover {
  background: #07733b !important;
  transform: translateY(-2px);
  box-shadow: 0 22px 46px -14px rgba(6, 96, 49, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}
.for-login .btn-login-option:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(22, 160, 92, 0.5),
    0 16px 38px -12px rgba(6, 96, 49, 0.55) !important;
}
/* Google mark in a crafted white chip on the green button */
.for-login .social-icon {
  width: 34px !important;
  height: 34px !important;
  padding: 7px !important;
  background: #ffffff !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  margin-right: 14px !important;
}

/* ---- helper ---------------------------------------------------------------*/
.for-login form.form-login::after {
  content: "Use your company Google account to continue.";
  display: block;
  margin-top: 22px;
  font-size: 12.5px;
  color: #8a918c;
  text-align: center;
  line-height: 1.5;
  max-width: 340px;
}

/* ---- responsive (phones) --------------------------------------------------*/
@media (max-width: 520px) {
  .for-login {
    padding: 36px 18px;
  }
  .for-login img.app-logo {
    height: 104px !important;
    max-height: 104px !important;
    min-height: 104px !important;
    margin-bottom: 20px !important;
  }
  .for-login .page-card-head h4::after {
    font-size: 28px;
  }
  .for-login .page-card-head::after {
    font-size: 14px;
  }
  .for-login .btn-login-option {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 320px !important;
  }
}

/* ---- reduced motion -------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
  .for-login .btn-login-option {
    transition: none;
  }
}