/* Sun Pharma login page.
 *
 * Scoped entirely under `body.sunpharma-login`, the class www/login.py puts on
 * the body. Nothing here can reach the desk or any other website page.
 *
 * WHY A BRAND PANEL AT ALL: Frappe centres a single card on an empty ground.
 * At desktop width that left two thirds of the screen blank, which read as a
 * page that had failed to load rather than as a deliberate layout.
 *
 * PALETTE comes from Sun-Pharma-Brand-Website.pdf p3. The brand has exactly
 * four colours: Primary Orange #F7941E, Light Orange #FCC89B, Grey #878786,
 * Black. The panel is black -> charcoal -> deep-brown, the same ramp the
 * dashboard header uses, and NOT flat orange: white body text on #F7941E
 * measures 2.28:1, below both AA and the 3:1 UI floor. Orange is kept for the
 * rule and the accent, where it carries no reading burden.
 */

body.sunpharma-login {
  --sp-orange: #F7941E;
  --sp-orange-light: #FCC89B;
  --sp-grey: #878786;
  --sp-black: #17150F;
  --sp-login-photo: url("/assets/mgrant_sunpharma/images/login_tile_hero.jpg");
  /* One source of truth for the panel's inner margin, so the top bar, the
     copy, the dots and the footer line cannot drift apart at any width. */
  --sp-login-gutter: clamp(24px, 4.2vw, 64px);
}

/* ------------------------------------------------------------------ split */
body.sunpharma-login .sp-login-split {
  display: grid;
  /* ~57 / 43, following the reference. It was 51/49, which gave a 940px form
     column at 1920 — the column the principal called "very bad white spaceing".
     Narrowing it is half the fix; removing the card (below) is the other half. */
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
  /* dvh, not vh: on a phone `100vh` counts the browser's collapsing toolbar, so
     the page is taller than the screen and the form starts below the fold. The
     vh line stays as the fallback for browsers without dvh. */
  min-height: 100vh;
  min-height: 100dvh;
}

body.sunpharma-login .sp-login-brand {
  position: relative;
  display: flex;
  /* BOTTOM-anchored, as the reference is. Centred copy left the top third of a
     1000px-tall panel empty and put the headline in the middle of the subject.
     The generous bottom padding clears the dots and the footer line. */
  align-items: flex-end;
  /* Was `40px 64px 132px`. Fixed values composed at 1600x900 and nowhere else —
     on a 1280x720 laptop the copy, the dots and the footer fought over the same
     space. All three edges now scale with the viewport. */
  padding: clamp(24px, 3vw, 44px) var(--sp-login-gutter) clamp(76px, 11vh, 132px);
  color: #fff;
  background: linear-gradient(100deg, var(--sp-black) 0%, #2B2926 58%, #3A2206 100%);
  overflow: hidden;
}

/* CLIENT-SUPPLIED CSR PHOTOGRAPHY, three slides, prepared by
   scratchpad/prep_slides.py from the principal's 2026-09-15 handover. They
   replace the unlicensed stock lab shot that stood here before, and they show
   actual CSR work rather than a manufacturing floor.

   Slide 1 came from a 1280x720 original and is the only one with enough pixels
   for this panel, so it leads. Slides 2 and 3 came from 738x360 and 433x461 and
   are enlarged about 2x — they are visibly softer, and higher-resolution
   originals are the only fix. */
/* Slide 1's image. Painted here rather than by script so the panel is never
   blank on first paint, and so a no-JS page still gets an image. */
body.sunpharma-login .sp-login-slides > .sp-login-slide:first-child,
body.sunpharma-login .sp-login-brand::before {
  background-image: var(--sp-login-photo);
}

/* DISABLED, NOT DELETED. The collage replaces the single full-bleed photo;
   this rule stays so that reverting to one image is a one-line change if a
   photograph large enough for the whole panel ever arrives. */
body.sunpharma-login .sp-login-brand::before {
  content: none;
  position: absolute;
  inset: 0;
  background-size: cover;
  /* CENTRE is safe now. Positioning used to be load-bearing: it was the only
     thing keeping the source's baked-in caption out of frame, and it could not
     do that at every viewport, so at 1600x900 the tail of the caption showed
     under our headline. The caption and logo are cropped out of the file
     itself, so this only has to frame a photograph. */
  background-position: center;
  pointer-events: none;
  z-index: 0;
}

/* The readability wash, as its own layer above every slide.
   LIGHTER than it was: the reference login the principal supplied keeps its
   photograph bright and legible. Contrast is preserved by concentrating the
   darkness at the lower left, under the text, instead of flattening the whole
   panel. Measured on the darkest slide: headline white on the wash clears 7:1,
   the sub-line clears 5.2:1. */
body.sunpharma-login .sp-login-brand::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Two jobs, one gradient: a short dark band at the very top so the top bar
     stays legible over the hero's bright sky, and a deep one at the bottom for
     the copy. The middle is left clear — that is where the tiles actually show,
     and darkening it would dull the collage for no reading benefit.

     Measured on the finished panel: headline white over the bottom band clears
     7:1, the sub-line 5.1:1. */
  background:
    linear-gradient(to bottom,
      rgba(23, 21, 15, .55) 0%,
      rgba(23, 21, 15, .12) 14%,
      rgba(23, 21, 15, 0) 30%,
      rgba(23, 21, 15, .30) 50%,
      rgba(23, 21, 15, .78) 74%,
      rgba(23, 21, 15, .94) 100%);
  border-radius: 0;
  width: auto;
  aspect-ratio: auto;
  pointer-events: none;
}

/* ------------------------------------------------------------------ collage */
/* Three tiles across the top of the panel; the copy sits below on the panel's
   own gradient. Splitting it this way means no tile has to be dimmed to make
   text readable, and the headline gets a solid ground instead of competing with
   a photograph.

   FULL HEIGHT. A first cut stopped the collage at 68% and put the copy on the
   ground below it; rendered, that left a large patch of empty dark at the
   bottom right where the right-hand column simply stopped, and it made the
   hero and the right column read as two equal columns instead of as a hero
   with two accents. Running the tiles to every edge removes the dead space and
   matches the reference, where the imagery is full-bleed and the copy sits over
   it. */
body.sunpharma-login .sp-login-collage {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  /* The hero is the only near-square source, so it takes the full-height tile;
     the two landscape sources take the short wide ones. Every tile then sits
     within 1.5x of its native size, which is what keeps the collage sharp. */
  grid-template-columns: 1.45fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  pointer-events: none;
}

body.sunpharma-login .sp-tile {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #241F18;   /* holds the shape while the file loads */
}

body.sunpharma-login .sp-tile-hero {
  grid-column: 1;
  grid-row: 1 / 3;
  background-image: var(--sp-login-photo);
  /* The tile is now far taller than it is wide, so `cover` crops hard on the
     horizontal. 62% keeps the woman and the seed drill in frame; centre put her
     half out of it. */
  background-position: 62% center;
}

body.sunpharma-login .sp-tile-a {
  grid-column: 2;
  grid-row: 1;
  background-image: url("/assets/mgrant_sunpharma/images/login_tile_a.jpg");
}

body.sunpharma-login .sp-tile-b {
  grid-column: 2;
  grid-row: 2;
  background-image: url("/assets/mgrant_sunpharma/images/login_tile_b.jpg");
  /* The handover banner is on the right of this frame; keep it in shot. */
  background-position: 62% center;
}

/* Narrow panels cannot carry three tiles — the right column would be a pair of
   slivers. Below this the collage is the hero alone, full width. */
@media (max-width: 1180px) {
  body.sunpharma-login .sp-login-collage { grid-template-columns: 1fr; }
  body.sunpharma-login .sp-tile-hero { grid-row: 1 / 3; }
  body.sunpharma-login .sp-tile-a,
  body.sunpharma-login .sp-tile-b { display: none; }
}

/* ------------------------------------------------------------- panel top bar */
/* Mark | hairline | product name, over the photograph. Sits above the wash
   (z-index 2) so it stays legible on the brightest part of the image. */
body.sunpharma-login .sp-login-topbar {
  position: absolute;
  top: clamp(22px, 3vw, 38px);
  left: var(--sp-login-gutter);
  right: var(--sp-login-gutter);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 18px);
  /* Wraps rather than overflowing once the panel is narrow — the legal name is
     long and used to push the label off the edge. */
  flex-wrap: wrap;
  row-gap: 4px;
}

/* TEXT, not an image: the only Sun Pharma logo we hold is black, which is
   unreadable on a photograph. Swap in an <img> here when the white asset
   arrives — no other rule needs to change. */
body.sunpharma-login .sp-login-mark {
  font-size: clamp(11.5px, 1vw, 14px);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}

body.sunpharma-login .sp-login-topdiv {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, .42);
  flex: 0 0 auto;
}

body.sunpharma-login .sp-login-toplabel {
  font-size: clamp(10px, .85vw, 12px);
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .88);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}

body.sunpharma-login .sp-login-brand-inner {
  position: relative;
  z-index: 1;
  max-width: 34rem;
}

/* The brand name moved to the top bar, so this line is now a category label.
   Light orange, not primary: on a photograph #F7941E is where the eye goes
   first, and it should go to the headline. */
body.sunpharma-login .sp-login-eyebrow {
  margin-bottom: 14px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sp-orange-light);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .4);
}

/* Bold lead, light tail — the reference's treatment. Two spans rather than
   markup inside one node, so the carousel can swap both halves with
   textContent and never write HTML. */
body.sunpharma-login .sp-login-headline {
  margin: 0;
  font-size: clamp(1.9rem, 3.1vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .34);
}

body.sunpharma-login .sp-login-lead { font-weight: 700; }
body.sunpharma-login .sp-login-tail { font-weight: 300; color: rgba(255, 255, 255, .93); }

body.sunpharma-login .sp-login-sub {
  margin: 20px 0 0;
  max-width: 27rem;
  font-size: 1.02rem;
  line-height: 1.62;
  color: #E2DDD6;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .38);
}

body.sunpharma-login .sp-login-foot {
  position: absolute;
  left: var(--sp-login-gutter);
  bottom: clamp(20px, 3vh, 34px);
  z-index: 1;
  font-size: 11.5px;
  letter-spacing: .04em;
  color: #8E8880;
}

/* ------------------------------------------------------------- form side */
body.sunpharma-login .sp-login-form {
  display: flex;
  justify-content: center;
  padding: 18px 24px;
  /* PLAIN WHITE, AND THE CARD IS GONE (see section[class^="for-"] below).
     A bordered 416px card marooned in a 940px column was what the principal
     called "very bad white spaceing"; the reference answers it by deleting the
     card and letting the content sit on the ground, not by dressing the card
     up. An earlier pass here tried a warmed ground and a bigger card — it is
     reverted, because the reference is the better answer. */
  background: #fff;
  /* Only the FORM column scrolls when the card is taller than the screen.
     The brand panel then stays a full-height image instead of scrolling half
     out of view, and the page itself never grows a scrollbar. Paired with
     `margin: auto` on the child, which keeps the card centred while it fits
     and keeps its top reachable once it does not. */
  max-height: 100vh;
  max-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* `margin: auto` rather than `align-items: center`. Both centre a child that
   fits; only this one degrades correctly when the child is TALLER than the
   column -- align-items overflows in both directions and puts the top of the
   card out of reach, which is what produced a clipped card plus a scrollbar
   that could not reach it. */
body.sunpharma-login .sp-login-formwrap {
  width: 100%;
  max-width: 24rem;
  margin: auto;
  /* Column, so "Powered by" is a sibling of the form and lands under it
     whatever height the form happens to be. */
  display: flex;
  flex-direction: column;
}

/* The visible white card is the SECTION (section.for-login and siblings);
   login.bundle.css paints `.for-login .page-card` white and caps it at 400px,
   and the section carries the rounding. Confirmed by walking computed styles
   up from the form, not by reading selectors. Both are neutralised here and
   the card is rebuilt once, on the wrapper, so there is no card-inside-a-card. */
body.sunpharma-login section[class^="for-"] {
  /* login.bundle.css stacks the four login sections with position:absolute so
     they occupy the same spot. That collapses their wrapper to zero height,
     which in turn breaks any attempt to centre the card in a column: the
     wrapper centres as a 0px box and the card spills out below it. Only one
     section is ever visible (the JS sets display:none on the rest), so static
     flow is both safe and what the layout needs. */
  position: static;
  width: 100%;
  /* NO CARD. The reference puts the form straight on the white ground; the box
     is what made the column read as empty around it. Everything that drew the
     card is zeroed rather than deleted, because login.bundle.css still paints
     .for-login .page-card and would show through. */
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

body.sunpharma-login .page-card {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  background: transparent;
  border: 0;
}

/* CENTRED, as the reference is and as the principal asked: the logo "is been
   hiden left side, it should be in the center". `margin: 0 auto` on the image
   as well as text-align, because the logo is a block-level <img> and text-align
   alone would not move it.

   PADDING ZEROED. login.bundle.css wraps ~60px top and bottom around this
   block — 120px of empty space around a 46px logo. That alone pushed the card
   past the bottom of a 900px screen, which is what put "Powered by" under the
   fold and a scrollbar on the column. */
body.sunpharma-login .page-card-head {
  text-align: center;
  padding: 0;
}

body.sunpharma-login .page-card-head .app-logo {
  display: block;
  width: auto;
  height: 46px;          /* the brand minimum-size rule is a HEIGHT floor */
  margin: 0 auto 16px;
}

/* FRAPPE'S OWN HEADING IS HIDDEN, because we render our own below.
   It could not simply be relabelled: login.bundle.js REBUILDS `.login-content`
   after our script runs, which both discards any text we set and inserts a
   SECOND `.page-card-head` — so the page briefly showed "Welcome to Sun Pharma
   CSR" and "Login to Sun Pharma CSR" stacked. Hiding every h4 in this section
   covers both the server-rendered head and the one the bundle builds, whenever
   it builds it.

   Scoped to `.for-login`: the forgot-password and email-link sections keep the
   headings Frappe gives them, which are already correct. */
body.sunpharma-login .for-login .page-card-head h4 {
  display: none !important;
}

/* OUR heading, inserted by the page script, so it does not depend on a rule we
   do not control. */
body.sunpharma-login .sp-login-title {
  margin: 0;
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--sp-black);
}

body.sunpharma-login .form-control {
  height: 40px;
  border-radius: 8px;
}

body.sunpharma-login .form-control:focus {
  border-color: var(--sp-orange);
  box-shadow: 0 0 0 3px rgba(247, 148, 30, .22);
}

/* `.btn.btn-primary` in website.bundle.css is (0,2,0) and forces white text.
   These use `.btn.btn-primary` under the body class -> (0,3,0), which wins on
   specificity rather than on !important. */
body.sunpharma-login .btn.btn-primary {
  height: 42px;
  font-weight: 600;
  border-radius: 8px;
  background-color: var(--sp-orange);
  border-color: var(--sp-orange);
  color: var(--sp-black);   /* black on orange = 8.2:1; white would be 2.28:1 */
}

body.sunpharma-login .btn.btn-primary:hover,
body.sunpharma-login .btn.btn-primary:focus,
body.sunpharma-login .btn.btn-primary:active {
  background-color: #E07F0B;
  border-color: #E07F0B;
  color: var(--sp-black);
}

/* --------------------------------------------------- SSO / option buttons */
/* Frappe injects one .login-button-wrapper per enabled Social Login Key into
   .social-login-buttons. This styles whatever turns up, so Google and
   Microsoft need no markup of their own — only their Social Login Key
   records. Until a provider is configured the container renders empty and
   these rules simply match nothing. */
body.sunpharma-login .social-logins {
  margin-top: 8px;
}

body.sunpharma-login .login-divider {
  position: relative;
  margin: 9px 0;
  font-size: 12px;
  color: var(--sp-grey);
}

body.sunpharma-login .login-divider::before,
body.sunpharma-login .login-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 1.6rem);
  height: 1px;
  background: #E3DFD9;
}

body.sunpharma-login .login-divider::before { left: 0; }
body.sunpharma-login .login-divider::after { right: 0; }

body.sunpharma-login .social-login-buttons .login-button-wrapper + .login-button-wrapper {
  margin-top: 6px;
}

body.sunpharma-login .btn.btn-default.btn-login-option,
body.sunpharma-login .btn-login-option {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 38px;
  font-weight: 600;
  border-radius: 8px;
  background-color: #fff;
  border: 1px solid #DAD5CE;
  color: var(--sp-black);
}

body.sunpharma-login .btn.btn-default.btn-login-option:hover,
body.sunpharma-login .btn.btn-default.btn-login-option:focus,
body.sunpharma-login .btn-login-option:hover,
body.sunpharma-login .btn-login-option:focus {
  background-color: #fff;
  border-color: var(--sp-grey);
  color: var(--sp-black);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .10);
}

body.sunpharma-login .btn-login-option img,
body.sunpharma-login .btn-login-option svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

body.sunpharma-login .forgot-password-message {
  text-align: right;
  font-size: 13px;
}

body.sunpharma-login .forgot-password-message a {
  color: #9A5B06;          /* orange darkened to clear AA on the light ground */
}

/* ------------------------------------------------------------ responsive */
/* Below this width the panel would steal the whole first screen and push the
   form under the fold, so it is dropped rather than stacked. */
/* THE MISSING MIDDLE STEP. The layout went straight from a 57/43 split to no
   panel at all, so every size between 900 and 1180 ran the widest rules in a
   space that could not hold them. Evening the split gives the form room before
   the panel is dropped. */
@media (max-width: 1180px) {
  body.sunpharma-login .sp-login-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  body.sunpharma-login .sp-login-headline { font-size: clamp(1.55rem, 3vw, 2.1rem); }
  body.sunpharma-login .sp-login-sub { font-size: .94rem; }
  body.sunpharma-login .sp-login-topdiv,
  body.sunpharma-login .sp-login-toplabel { display: none; }
}

/* SHORT screens, at any width: a 1366x768 laptop has ~630px of usable height
   once browser chrome is taken off, and the bottom-anchored stack needs to give
   ground rather than overlap itself. */
@media (max-height: 760px) {
  body.sunpharma-login .sp-login-brand { padding-bottom: clamp(64px, 13vh, 96px); }
  body.sunpharma-login .sp-login-headline { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
  body.sunpharma-login .sp-login-sub { margin-top: 12px; font-size: .92rem; }
  body.sunpharma-login .page-card-head .app-logo { height: 38px; margin-bottom: 12px; }
  body.sunpharma-login .sp-login-cardsub { margin-bottom: 18px; }
  body.sunpharma-login .sp-login-powered { margin-top: 22px; }
}

@media (max-width: 900px) {
  body.sunpharma-login .sp-login-split { grid-template-columns: minmax(0, 1fr); }
  body.sunpharma-login .sp-login-brand { display: none; }
  body.sunpharma-login .sp-login-form {
    min-height: 100vh;
    min-height: 100dvh;
    max-height: none;
    padding: 32px 20px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  body.sunpharma-login .sp-login-formwrap { animation: sp-login-in .32s ease-out both; }
  @keyframes sp-login-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ------------------------------------------------- theme-override endgame */
/* `!important` IS LOAD-BEARING HERE and is not laziness. A theme stylesheet is
   injected INLINE into every page — so it always wins on source order — and it
   declares, with !important:

       .btn-primary.btn-login             { color: #fff !important }
       .btn-default, .btn-default:active  { background: #878786 !important;
                                            color: #fff !important }

   An !important declaration can only be beaten by another !important one, so
   these are the only rules that can land the brand colours. Confirmed by
   enumerating every matching rule on the live page, not assumed.

   This is a correctness fix, not a preference: white on #F7941E measures
   2.28:1, below WCAG AA (4.5:1) and below even the 3:1 non-text floor. Black on
   the same orange measures 8.2:1. Everything here stays under
   body.sunpharma-login, so it cannot reach any other page. */
body.sunpharma-login .btn.btn-primary,
body.sunpharma-login .btn.btn-primary.btn-login {
  background-color: var(--sp-orange) !important;
  border-color: var(--sp-orange) !important;
  color: var(--sp-black) !important;
}

body.sunpharma-login .btn.btn-primary:hover,
body.sunpharma-login .btn.btn-primary:focus,
body.sunpharma-login .btn.btn-primary:active,
body.sunpharma-login .btn.btn-primary.btn-login:hover,
body.sunpharma-login .btn.btn-primary.btn-login:focus {
  background-color: #E07F0B !important;
  border-color: #E07F0B !important;
  color: var(--sp-black) !important;
}

/* Secondary / SSO buttons: white with a hairline, so Google and Microsoft read
   as alternatives to the primary action rather than competing with it. */
body.sunpharma-login .btn.btn-default.btn-login-option,
body.sunpharma-login .social-login-buttons .btn-default,
body.sunpharma-login .social-login-buttons .btn-default:active {
  background-color: #fff !important;
  border: 1px solid #DAD5CE !important;
  color: var(--sp-black) !important;
}

body.sunpharma-login .btn.btn-default.btn-login-option:hover,
body.sunpharma-login .social-login-buttons .btn-default:hover {
  background-color: #FCFBFA !important;
  border-color: var(--sp-grey) !important;
  color: var(--sp-black) !important;
}

/* ---------------------------------------------- inline-theme login overrides */
/* The theme injects an inline <style> on every page. Two of its rules break
   this layout, and both need beating on SPECIFICITY — an inline <style> always
   wins on source order, and both are !important.

   (a) It renders the card heading as GENERATED CONTENT:

           .for-login .page-card-head h4    { display: none !important }
           .for-login .page-card-head:after { content: 'Login to ...' !important }

       so the heading is not a DOM node. This is why relabelling the h4 changed
       nothing on screen and why hiding the h4 changed nothing either — the
       theme had already hidden it — and the page showed our "Welcome to Sun
       Pharma CSR" with the theme's "Login to Sun Pharma CSR" stacked under it.
       `content: none` is what actually removes it.

   (b) It forces `.login-content.page-card` to a fixed 450px with 40px side
       padding. Our column caps the card at 24rem, so the form overflowed its
       own wrapper and sat ~26px off-centre from the heading above it. */
body.sunpharma-login .for-login .page-card-head::after {
  content: none !important;
  display: none !important;
}

body.sunpharma-login .login-content.page-card {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* The same block absolutely-positions `.for-login` at `right: 10%; top: 26%`,
   which is meaningless inside our grid column and would drag the card out of
   it. Re-stated here so the card stays in normal flow. */
body.sunpharma-login section.for-login {
  position: static !important;
  right: auto !important;
  left: auto !important;
  top: auto !important;
  background-color: transparent !important;
}

/* ------------------------------------------------------ page chrome reset */
/* templates/web.html wraps page_content in a Bootstrap container and a footer
   block. Both are sized for a normal content page, and together they added
   ~130px below our 100vh split — enough to put a scrollbar on a page that has
   nothing to scroll to. Zeroed only under the login body class. */
body.sunpharma-login .page-content-wrapper,
body.sunpharma-login main.container,
body.sunpharma-login .page_content {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.sunpharma-login .page-footer,
body.sunpharma-login .page-breadcrumbs,
body.sunpharma-login .page-header-wrapper {
  display: none !important;
}

body.sunpharma-login {
  margin: 0;
  overflow-x: hidden;
}


/* ------------------------------------------- SSO placeholders (pre-config) */

/* Shown only while NO Social Login Key is enabled — www/login.py passes
   `sso_configured` and the template's script bails out when Frappe has already
   injected its own buttons, so these can never appear alongside real ones.
   They carry the real provider icons and the same styling as the live buttons,
   and they do NOT navigate: clicking explains that sign-in is not enabled yet,
   rather than sending someone to an OAuth error page. */
body.sunpharma-login .sp-sso-placeholder {
  cursor: default;
}

body.sunpharma-login .sp-sso-note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--sp-grey);
  text-align: center;
}

body.sunpharma-login .sp-sso-note[hidden] { display: none; }
/* -------------------------------------------------------------- carousel */
/* Slide layers stack under the readability wash (::after, z-index 1) and above
   the first-paint image (::before, z-index 0). Cross-fade only — no movement,
   so it never competes with the form for attention. */
body.sunpharma-login .sp-login-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

body.sunpharma-login .sp-login-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity .9s ease-in-out;
}

body.sunpharma-login .sp-login-slide.is-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  body.sunpharma-login .sp-login-slide { transition: none; }
}

body.sunpharma-login .sp-login-dots {
  position: absolute;
  left: var(--sp-login-gutter);
  bottom: clamp(46px, 7vh, 66px);
  z-index: 2;
  display: flex;
  gap: 8px;
}

body.sunpharma-login .sp-login-dot {
  appearance: none;
  border: 0;
  padding: 0;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  cursor: pointer;
  background: rgba(255, 255, 255, .34);
  transition: background .2s, width .2s;
}

body.sunpharma-login .sp-login-dot:hover { background: rgba(255, 255, 255, .6); }
body.sunpharma-login .sp-login-dot.is-on { background: var(--sp-orange); width: 34px; }
body.sunpharma-login .sp-login-dot:focus-visible {
  outline: 2px solid var(--sp-orange-light);
  outline-offset: 3px;
}

/* Panel text sits above both the slides and the wash. */
body.sunpharma-login .sp-login-brand-inner,
body.sunpharma-login .sp-login-foot { z-index: 2; }

/* ------------------------------------------------------- card field labels */
/* Frappe ships these as .sr-only; the script removes that class rather than
   inventing new labels, so the label/for wiring stays Frappe's. */
body.sunpharma-login .for-login .form-label {
  display: block;
  margin-bottom: 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sp-black);
  letter-spacing: .01em;
}

/* The line under the welcome heading. The two-line version the principal
   struck out ("Sign in to manage CSR grants and partner applications.") is
   replaced by the reference's shorter one, sitting under a heading that now
   greets rather than instructs. Centred with the heading above it. */
body.sunpharma-login .sp-login-cardsub {
  margin: 8px 0 22px;
  font-size: 14px;
  line-height: 1.5;
  color: #6E6862;
  text-align: center;
}

/* --------------------------------------------------------------- powered by */
/* Closes the column, as the reference does. The mark is `mgrant`'s own file at
   its own 58x22 — mgrant is a hard dependency and already serves it, so there
   is no second copy of the binary in this repo to drift. */
body.sunpharma-login .sp-login-powered {
  margin: 34px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 11.5px;
  color: #9A948C;
}

body.sunpharma-login .sp-login-powered img {
  width: 58px;
  height: 22px;
  display: block;
}

body.sunpharma-login .sp-login-powered a {
  display: inline-flex;
  opacity: .9;
  transition: opacity .15s;
}

body.sunpharma-login .sp-login-powered a:hover { opacity: 1; }