/* Daroo login page - the real wave background from brains-rs.com's own
   hero section (elementor-element-871cec3's background-image, fetched
   directly from https://brains-rs.com/wp-content/uploads/2026/06/
   bv_brand_background.svg - the same layered bezier wave paths at the
   same opacities, not a redrawn approximation), recolored from their
   #2D6B5A to Daroo's own brand green (--daroo-brand-green) and saved locally at
   images/daroo_login_wave.svg. The opaque white background rect that
   asset shipped with was stripped so it composites over this page's own
   background instead of drawing a hard white box.

   Pure CSS, scoped with body[data-path="login"] (Frappe stamps this
   attribute with the current route on every website page - see
   frappe/templates/base.html) - no JS injection needed, nothing here can
   fight another script.
*/

body[data-path="login"] .page-content-wrapper {
  position: relative;
  overflow: hidden;
  /* Fades to white toward the footer instead of a flat tint ending in a
     hard boundary line right above it. */
  background: linear-gradient(to bottom, #f4f9f8 0%, #f7fbfa 55%, #ffffff 100%);
}

body[data-path="login"] .page-content-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  /* viewBox trimmed from 1417 to 1407 wide - every path in the source
     asset tops out at x=1407, so the original 1417 viewBox baked in a
     permanent ~0.7% unpainted strip along the right edge at every scale
     (confirmed: visible as empty space next to the screen edge in LTR,
     where nothing mirrors it away). ?v= keeps this file's own cache
     busting in sync with the SVG's content, not just the CSS's. */
  background-image: url("/assets/grc_tool/images/daroo_login_wave.svg?v=022fa82295fc");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  /* background-size:cover already fills the box edge to edge with no
     gaps on its own. The earlier radial mask (a centered ellipse fading
     out well before the sides/bottom) traded the hard-crop-line problem
     for a new one - large plain empty margins around the wave instead of
     it reaching the screen edges. A single vertical fade at the very
     bottom is enough to avoid a hard line there (where it meets the
     page's own gradient toward the footer); left, right and top stay at
     full strength all the way to the edge instead of shrinking inward. */
  mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, transparent 100%);
}

/* RTL mirrors the whole wave band horizontally - a symmetric flip keeps
   the same flowing rhythm instead of just re-running the LTR curve
   backwards behind now-mirrored content. */
html[dir="rtl"] body[data-path="login"] .page-content-wrapper::before {
  transform: scaleX(-1);
}

body[data-path="login"] .page_content,
body[data-path="login"] .page-breadcrumbs,
body[data-path="login"] .page-header-wrapper {
  position: relative;
  z-index: 1;
}

/* Center the logo + login card as one block, both horizontally (already
   true before this file - .page-card itself carries margin:0 auto from
   Frappe's own core CSS) and vertically within the available height,
   rather than sitting pinned to the top with a large empty gap above the
   footer.

   align-items:center deliberately NOT used here, even though this is a
   column flex container so align-items governs the horizontal axis: the
   real DOM between .page_content and .page-card is deeper than it looks
   (.page_content > a bare unclassed div > section.for-login >
   div.page-card, confirmed live via the full ancestor chain, not a
   single hop), and align-items:center switches every one of those block
   children from stretch to shrink-to-fit sizing at once. Shrink-to-fit
   width is computed from content/font metrics, and a live sample of
   .page-card's own getBoundingClientRect().width every 50ms after load
   showed it settle in two steps (298px, then 335px) as webfonts/icons
   finished - a real, visible resize jank, not a one-off render glitch.
   justify-content:center alone (main axis, vertical, in a column
   container) still centers the whole block vertically; leaving
   align-items at its default (stretch) keeps every block child at a
   normal, stable, definite width on the very first layout pass, so
   .page-card's own existing max-width:420px/margin:auto keeps doing the
   horizontal centering exactly as it did before this file existed. */
body[data-path="login"] .page_content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 74vh;
}

/* ---- Top navbar: brand green on the login page only ---- */
body[data-path="login"] .navbar.navbar-light {
  background-color: var(--daroo-brand-green, #006666) !important;
  border-bottom: none;
}
body[data-path="login"] .navbar.navbar-light .navbar-text,
body[data-path="login"] .navbar.navbar-light .nav-link,
body[data-path="login"] .navbar.navbar-light a:not(.btn):not(#daroo-lang-btn) {
  color: rgba(255, 255, 255, 0.92) !important;
}
body[data-path="login"] .navbar.navbar-light .nav-link:hover {
  color: #fff !important;
}
/* The navbar logo ships as a solid dark-teal PNG on a transparent
   background - almost the same hue as the navbar itself, so left alone
   it disappears here. brightness(0) flattens it to solid black
   regardless of its original color, then invert(1) flips that to solid
   white - a plain color-swap for a single-color logo, not a new asset. */
body[data-path="login"] .navbar.navbar-light .navbar-brand img {
  filter: brightness(0) invert(1);
}

/* ---- Login card: elevated, rounded, brand-accented ---- */
body[data-path="login"] .page-card {
  /* A definite width, not just max-width - the earlier size everyone
     had already reviewed (335px, the shrink-to-fit result before the
     jank fix) rather than the wider 420px the plain max-width cap
     resolved to once sizing became stable. Definite width keeps it a
     fixed, one-pass size (no jank either way), just at the smaller,
     already-approved footprint. */
  width: 335px;
  max-width: calc(100% - 24px);
  padding: 40px 36px 34px;
  border-radius: 20px;
  border: 1px solid rgba(0, 102, 102, 0.08);
  background: #fff;
  box-shadow: 0 24px 60px -12px rgba(0, 102, 102, 0.22), 0 4px 16px rgba(15, 23, 42, 0.06);
  position: relative;
  overflow: hidden;
}
body[data-path="login"] .page-card-head {
  padding-top: 10px;
}
body[data-path="login"] .page-card-head .app-logo {
  max-width: 150px;
}
body[data-path="login"] .page-card-head h4 {
  font-weight: 700;
  color: #0f2a28;
  letter-spacing: 0.2px;
}
body[data-path="login"] .page-card .form-control {
  background: #f6faf9;
  border: 1px solid #e1ebe9;
  border-radius: 12px;
  height: 46px;
  padding-left: 40px;
  font-size: 0.95rem;
}
body[data-path="login"] .page-card .form-control:focus {
  border-color: var(--daroo-brand-green, #006666);
  box-shadow: 0 0 0 3px rgba(0, 102, 102, 0.15);
  background: #fff;
}
body[data-path="login"] .page-card .email-field,
body[data-path="login"] .page-card .password-field {
  position: relative;
}
body[data-path="login"] .page-card .password-field input {
  padding-left: 40px;
}
body[data-path="login"] .page-card .field-icon {
  left: 14px;
  top: 16px;
  color: #5b7a77;
}
body[data-path="login"] .page-card .toggle-password {
  color: var(--daroo-brand-green, #006666);
  font-weight: 600;
}
body[data-path="login"] .page-card .forgot-password-message a {
  color: var(--daroo-brand-green, #006666);
}
/* Matched to brains-rs.com's own hero CTA button (their "تواصل معنا" /
   Contact Us pill - .elementor-button on that site: background:#131313,
   border-radius:26px, padding:14px 34px, font-weight:500, font-size:16px)
   so the Login button reads as the same design language, not a
   green re-skin of it. */
body[data-path="login"] .page-card .btn-login {
  background: #131313;
  border-color: #131313;
  border-radius: 26px;
  height: auto;
  padding: 14px 34px;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.2px;
  transition: background 0.15s ease, transform 0.15s ease;
}
body[data-path="login"] .page-card .btn-login:hover {
  background: #000;
  transform: translateY(-1px);
}