/* ============================================================
   File:        password.css
   Project:     StudioFlow (Grace Aerobics & Fitness Center)
   Developer:   Janvi Vakhariya — V Techno Labs
   Created:     2026-09-03  (updated 2026-09-07)
   Purpose:     Change Password — one screen, four states:
                1) voluntary  2) forced first-login (no exit)
                3) error (wrong current password)  4) success.
   Copyright:   © 2026 V Techno Labs. All rights reserved.
                Proprietary software developed by V Techno Labs.
   ============================================================

   PREFIX: sf-pw- on everything this file defines, so nothing here can reach
   another page. One deliberate note: site.css already owns .sf-pw-toggle on the
   login screen. That is a different class from .sf-pw-eye below and the two
   never meet -- login uses its own, this screen uses this one.

   Same "Sunset" language as the rest of the app, deliberately CALMER: one glass
   card, wing ribbon, pink primary, but no chips and no tints beyond the state
   colours. A security screen, not a dashboard.

   FIELD PATTERN - .sf-pw-field wraps label + .sf-pw-inwrap (input + 48x48
   show/hide toggle) + one .sf-pw-hint line. The hint is ALWAYS in the DOM so
   the rule is visible BEFORE a mistake: neutral by default, .is-ok green,
   .is-bad red.

   ERRORS - two levels, both used:
   - field level: .sf-pw-field.is-bad (red border + red hint)
   - screen level: .sf-pw-alert banner (role="alert") for the server-checked
     failure, which is the wrong current password.

   FORCED MODE - root gets .sf-pw--gate: setup framing (kicker + reassurance
   line) and no escape routes rendered at all. The copy explains why.

   SHOW/HIDE - .sf-pw-eye is a real <button aria-pressed>, 48x48, inside the
   input's own right padding so typed text never runs under it. site.js fills it
   with the app's existing eye / eye-off artwork and wires the toggle.

   INTEGRATION - the block at the foot of this file adapts the screen to the app
   shell, which already supplies the background and the bar clearances.
   ============================================================ */

.sf-pw {
  /* NO PAGE BACKGROUND IMAGE HERE. site.css declares the one background the
     whole signed-in app uses, on .sf-frame. A second photo in this sheet is
     how the app ended up with a different ground on every screen. */
  --sf-pw-wing: linear-gradient(90deg,#43a047,#d4b91e,#f57c00,#e53957,#c2185b,#7e57c2,#5c6f91);

  /* The wash alone now; it used to sit over this screen's own copy of
     /img/stripes.jpeg. Change Password is a signed-in screen and takes the
     shared ground like the rest of them. */
  --sf-pw-ground:
    linear-gradient(178deg, rgba(255,250,250,.5) 0%, rgba(255,246,240,.42) 40%, rgba(250,244,252,.48) 100%);
  /* Muted deepened from #6d6b58, which measured 4.05:1 against the darkest
     part of the shared ball-pit ground -- under the 4.5:1 minimum for any
     muted line that sits on the ground rather than inside a card. #615F4E
     measures 4.85:1 there and 6.45:1 on white. Deepening the ink was the fix,
     not a panel behind the text. */
  --sf-pw-ink: #2b2a1f; --sf-pw-muted: #615F4E;
  --sf-pw-pink: #c2185b; --sf-pw-pink-deep: #98123f;
  --sf-pw-card: rgba(255,255,255,.86); --sf-pw-edge: rgba(255,255,255,.92);
  --sf-pw-line: rgba(43,42,31,.12);
  --sf-pw-good: #1d7a3f; --sf-pw-good-tint: #e3f3e8;
  --sf-pw-bad: #b3261e; --sf-pw-bad-deep: #8c1d17; --sf-pw-bad-tint: #fdecea;
  --sf-pw-radius: 20px; --sf-pw-tap: 48px;
  --sf-pw-top-bar: 56px; --sf-pw-bottom-bar: 64px;

  box-sizing: border-box; max-width: 480px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 16px;
  padding: calc(var(--sf-pw-top-bar) + 14px) 16px calc(var(--sf-pw-bottom-bar) + 26px + env(safe-area-inset-bottom, 0px));
  background: var(--sf-pw-ground);
  color: var(--sf-pw-ink);
  font-family: "Archivo", system-ui, sans-serif; font-size: 15px; line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}
.sf-pw *, .sf-pw *::before, .sf-pw *::after { box-sizing: border-box; }
.sf-pw a { color: inherit; text-decoration: none; }
.sf-pw :focus-visible { outline: 2px solid var(--sf-pw-pink); outline-offset: 2px; }
.sf-pw-ico { display: inline-block; width: 20px; height: 20px; flex: none; }
.sf-pw-go { display: inline-block; width: 16px; height: 16px; flex: none; }

/* forced first-login: outside the shell, no bars, more headroom */
.sf-pw--gate { --sf-pw-top-bar: 0px; --sf-pw-bottom-bar: 0px; min-height: 100dvh; justify-content: center; padding-top: 28px; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }

/* ---------- chrome ---------- */
.sf-pw-back {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  min-height: 44px; margin: -6px 0 -10px; padding: 0 14px 0 10px;
  border-radius: 999px; background: rgba(255,255,255,.8);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1.5px solid var(--sf-pw-edge);
  font-size: 14px; font-weight: 800; color: var(--sf-pw-pink);
  box-shadow: 0 8px 18px -12px rgba(194,24,91,.6);
}
.sf-pw-back:active { text-decoration: underline; text-underline-offset: 3px; }
.sf-pw-back .sf-pw-go { transform: rotate(180deg); }

.sf-pw-intro { margin: 0 2px; }
.sf-pw-kicker { margin: 0 0 6px; display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 3px 12px; border-radius: 999px 4px 999px 4px; background: linear-gradient(120deg,#43a047,#17a89a); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; transform: rotate(-1.25deg); box-shadow: 0 5px 12px -8px rgba(23,168,154,.7); }
.sf-pw-title { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.sf-pw-title mark { background: linear-gradient(120deg, rgba(240,138,29,.22), rgba(194,24,91,.14)) 0 62% / 100% 42% no-repeat; color: inherit; padding: 0 3px; border-radius: 4px; }
.sf-pw-sub { margin: 2px 0 0; font-size: 14px; color: var(--sf-pw-muted); text-wrap: pretty; }
.sf-pw-sub strong { color: var(--sf-pw-ink); font-weight: 700; }

/* the one card - warm glass with a thick wing ribbon */
.sf-pw-card {
  background: linear-gradient(165deg, rgba(255,255,255,.93), rgba(255,246,241,.87) 55%, rgba(252,243,251,.9));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1.5px solid var(--sf-pw-edge);
  border-radius: var(--sf-pw-radius);
  box-shadow: 0 16px 32px -16px rgba(194,24,91,.45);
  padding: 18px 16px 16px; position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 14px;
}
.sf-pw-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--sf-pw-wing); }

/* screen-level alert - wrong current password etc. */
.sf-pw-alert {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1.5px solid rgba(179,38,30,.4); border-left-width: 5px;
  border-radius: 14px; background: var(--sf-pw-bad-tint);
  padding: 10px 12px;
}
.sf-pw-alert .sf-pw-ico { color: var(--sf-pw-bad); margin-top: 1px; }
.sf-pw-alert strong { display: block; font-size: 14px; font-weight: 800; color: var(--sf-pw-bad-deep); }
.sf-pw-alert span { display: block; font-size: 12.5px; color: var(--sf-pw-bad-deep); opacity: .85; text-wrap: pretty; }

/* ---------- field pattern ---------- */
/* each field takes one wing colour: 1 teal, 2 orange, 3 violet -
   coloured label dot + matching focus ring.

   Named rather than counted. The design picked them with :nth-of-type, which
   counts every sibling DIV and not just the fields -- so on the error state the
   alert banner became the first div and slid all three colours down by one,
   leaving the same three boxes wearing different colours than they had a moment
   earlier. A class per field says which is which whatever else is on screen. */
.sf-pw-field { --sf-pw-hue: #17a89a; display: flex; flex-direction: column; gap: 6px; }
.sf-pw-field--teal { --sf-pw-hue: #17a89a; }
.sf-pw-field--amber { --sf-pw-hue: #f08a1d; }
.sf-pw-field--violet { --sf-pw-hue: #7e57c2; }
.sf-pw-label { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 800; letter-spacing: .02em; }
.sf-pw-label::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: color-mix(in srgb, var(--sf-pw-hue) 78%, #fff); transform: rotate(45deg); flex: none; }
.sf-pw-label small { font-weight: 600; color: var(--sf-pw-muted); }

.sf-pw-inwrap { position: relative; }
.sf-pw-input {
  width: 100%; min-height: 52px; padding: 0 60px 0 14px;  /* room for the eye */
  border: 1.5px solid rgba(43,42,31,.2); border-radius: 14px;
  background: #fff; color: var(--sf-pw-ink);
  font-family: inherit; font-size: 16px; font-weight: 600; letter-spacing: .02em;
}
.sf-pw-input::placeholder { color: rgba(43,42,31,.35); font-weight: 400; letter-spacing: 0; }
.sf-pw-input:focus { border-color: var(--sf-pw-hue, var(--sf-pw-pink)); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--sf-pw-hue, var(--sf-pw-pink)) 16%, transparent); }

/* show/hide - a real button, 48x48, never over the text */
.sf-pw-eye {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  width: var(--sf-pw-tap); height: var(--sf-pw-tap);
  border: 0; border-radius: 12px; background: transparent; cursor: pointer;
  color: var(--sf-pw-muted);
}
.sf-pw-eye .sf-pw-ico { width: 24px; height: 24px; }
.sf-pw-eye .sf-pw-ico svg { width: 100%; height: 100%; display: block; }
.sf-pw-eye:active { background: rgba(43,42,31,.07); }
.sf-pw-eye[aria-pressed="true"] { color: var(--sf-pw-pink); background: #fce8f0; }  /* shown */

/* the always-present hint line: rule / match feedback */
.sf-pw-hint { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--sf-pw-muted); text-wrap: pretty; }
.sf-pw-hint .sf-pw-ico { width: 14px; height: 14px; }
.sf-pw-hint.is-ok { color: var(--sf-pw-good); font-weight: 700; }
.sf-pw-hint.is-bad { color: var(--sf-pw-bad); font-weight: 700; }

/* field-level error: red ring on the input too */
.sf-pw-field.is-bad .sf-pw-input { border-color: var(--sf-pw-bad); box-shadow: 0 0 0 3px rgba(179,38,30,.12); }
.sf-pw-field.is-ok .sf-pw-input { border-color: var(--sf-pw-good); }

/* ---------- buttons ---------- */
.sf-pw-submit {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 52px; margin-top: 2px;
  border: 0; border-radius: 16px; cursor: pointer;
  background: linear-gradient(155deg, #e0447a, var(--sf-pw-pink-deep));
  color: #fff; font-family: inherit; font-size: 16px; font-weight: 800;
  box-shadow: 0 12px 24px -12px rgba(194,24,91,.7);
}
.sf-pw-submit:active { transform: translateY(1px); filter: brightness(.95); }
.sf-pw-cancel {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: var(--sf-pw-tap);
  border: 1.5px solid var(--sf-pw-edge); border-radius: 14px; cursor: pointer;
  background: var(--sf-pw-card); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--sf-pw-ink); font-family: inherit; font-size: 15px; font-weight: 700;
}
.sf-pw-cancel:active { filter: brightness(.96); }

/* ---------- success - a little celebration ---------- */
.sf-pw-done { align-items: center; text-align: center; padding: 30px 18px 22px; }
.sf-pw-done::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(5px 5px at 12% 24%, #43a047 98%, transparent), radial-gradient(4px 4px at 26% 68%, #f08a1d 98%, transparent),
    radial-gradient(5px 5px at 84% 30%, #c2185b 98%, transparent), radial-gradient(4px 4px at 72% 74%, #7e57c2 98%, transparent),
    radial-gradient(4px 4px at 90% 60%, #17a89a 98%, transparent), radial-gradient(4px 4px at 8% 52%, #d4b91e 98%, transparent),
    radial-gradient(3px 3px at 40% 16%, #e53957 98%, transparent), radial-gradient(3px 3px at 60% 12%, #5c6f91 98%, transparent);
  opacity: .5;
}
.sf-pw-done-badge {
  display: grid; place-items: center;
  width: 68px; height: 68px; border-radius: 24px 10px 24px 10px;
  background: linear-gradient(150deg,#43a047,#17a89a); color: #fff;
  transform: rotate(-2deg);
  box-shadow: 0 12px 22px -12px rgba(29,122,63,.6);
}
.sf-pw-done-badge .sf-pw-ico { width: 30px; height: 30px; }
.sf-pw-done-title { margin: 0; font-size: 21px; font-weight: 800; }
.sf-pw-done-sub { margin: 0; font-size: 14px; color: var(--sf-pw-muted); text-wrap: pretty; max-width: 30ch; }

/* ---------- footer ---------- */
.sf-pw-foot { text-align: center; padding: 2px 2px 0; }
.sf-pw-wingbar { height: 4px; border: 0; width: 132px; margin: 0 auto 12px; border-radius: 999px; background: var(--sf-pw-wing); }
.sf-pw-foot-tag { margin: 0; font-size: 15px; font-weight: 800; color: var(--sf-pw-pink); }
.sf-pw-foot-credit { margin: 4px 0 0; font-size: 12px; color: var(--sf-pw-muted); }

/* ============================================================
   INTEGRATION with the app shell

   The design was drawn as a whole page: it paints its own background and
   reserves its own space for the top bar and the tab bar. Inside StudioFlow
   neither is its job.

   The background is defined ONCE, on .sf-frame, so it can be changed in one
   place; a second full-cover image here would paint the same photo again with a
   second scrim over it, and a fixed attachment inside a 480px column does not
   line up with the frame's. The bar clearances belong to .sf-content, which
   already pads for both, so keeping the design's would double them and push the
   card half a screen down.

   Both are handed back to the shell rather than deleted above, so the file
   still stands on its own if the screen is ever shown outside the app.
   ============================================================ */
.sf-app .sf-pw {
  --sf-pw-top-bar: 0px;
  --sf-pw-bottom-bar: 0px;
  background: none;
  padding-top: 2px;
  padding-bottom: 8px;
}

/* The forced screen still sits inside the shell -- see ChangePassword.cshtml
   for why -- so it takes the same handover, and its full-height centring is
   dropped: the shell is already the scrolling container. */
.sf-app .sf-pw--gate { min-height: 0; justify-content: flex-start; padding-top: 6px; }

/* .sf-content is 640px wide and already centres; this column is narrower on
   purpose, so it centres inside it rather than sitting left on a tablet. */
.sf-app .sf-pw { margin-left: auto; margin-right: auto; }

/* Cancel is drawn as glass: a near-white fill inside a near-white border, which
   reads as a button over the design's photographic ground and as bare text over
   the shell's plain one. Given a real edge here, so it still looks like the
   control it is. */
.sf-app .sf-pw-cancel {
  background: #fff;
  border-color: var(--sf-pw-line);
  box-shadow: 0 6px 14px -10px rgba(43,42,31,.5);
}

/* The wing bar is the only part of the design's footer kept -- the shell prints
   the studio credit under every page -- so it carries the spacing the removed
   lines used to provide. */
.sf-app .sf-pw-foot { padding-top: 6px; }
.sf-app .sf-pw-wingbar { margin-bottom: 0; }