/* ============================================================
   File:        member-actions.css
   Project:     StudioFlow (Grace Aerobics & Fitness Center)
   Developer:   Janvi Vakhariya — V Techno Labs
   Created:     2026-09-02  (updated 2026-09-07)
   Purpose:     The member action flows - Add Payment, Freeze, Resume, Add Weight,
                and the confirm sheet that will one day replace the browser alert
                on Deactivate.
   Copyright:   © 2026 V Techno Labs. All rights reserved.
                Proprietary software developed by V Techno Labs.
   ============================================================

   LOAD ORDER: after members.css. This file only ADDS. Every layout primitive
   these screens use - .sf-member-form-card, -field, -label, -input, -seg, -sum,
   -kv, -submit, -cancel, -whom, -foot - comes from members.css and is not
   repeated here.

   PREFIX: sf-memact- on everything this file defines, so nothing can collide
   with sf-member-, sf-dash-, sf-idash-, sf-plan-, sf-batch-, sf-user- or
   sf-dev-. The supplied design named these sf-member-* and relied on being
   loaded after the members sheet; renaming them means a class here can never
   silently change a members screen, and a modifier is applied by wearing both
   names, e.g. class="sf-member-whom sf-memact-whom--ice".

   COLOUR PER FLOW: each action carries its own identity so the screens are
   distinguishable at a glance - money stays the app's pink, freezing is ice
   blue, resuming is green, a weigh-in is teal. The tokens come from .sf-member,
   which every one of these screens sits inside.

   NO BACKGROUND: the design references none, and site.css already paints one
   shared background on .sf-app for every signed-in page.
   ============================================================ */

/* ---------- whom card, kicker style: "PAUSING / name / sub" ---------- */
.sf-memact-whom--plain { display: block; }
.sf-memact-kick {
  margin: 0 0 1px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--sf-member-pink);
}
.sf-memact-whom--ice { background: var(--sf-member-ice-tint); border-color: rgba(70,88,126,.35); }
.sf-memact-whom--ice .sf-memact-kick { color: var(--sf-member-ice); }
.sf-memact-whom--good { background: var(--sf-member-good-tint); border-color: rgba(29,122,63,.35); }
.sf-memact-whom--good .sf-memact-kick { color: var(--sf-member-good); }
.sf-memact-whom--teal { background: var(--sf-member-aer-tint); border-color: rgba(15,118,110,.35); }
.sf-memact-whom--teal .sf-memact-kick { color: var(--sf-member-aer); }

/* ---------- info note (the freeze explanation) ---------- */
.sf-memact-note {
  border: 1.5px solid rgba(70,88,126,.3); border-left-width: 5px;
  border-radius: 14px; background: var(--sf-member-ice-tint);
  padding: 10px 14px;
  font-size: 13px; font-weight: 600; color: #34456b; text-wrap: pretty;
}
.sf-memact-note strong { color: var(--sf-member-ice); font-variant-numeric: tabular-nums; }

/* ---------- the hero input: the one number the screen is about ---------- */
.sf-memact-input--big { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; min-height: 58px; }
.sf-memact-affix--big .sf-member-affix-unit { font-size: 18px; }

/* A suffix rather than a prefix, for "kg". members.css only has the prefix
   form, because money is the only affix on the five member screens. */
.sf-memact-affix--suf .sf-member-input { padding-left: 14px; padding-right: 64px; }
.sf-memact-affix--suf .sf-member-affix-unit { left: auto; right: 14px; }

/* The live change readout under a weigh-in: what this reading does to the last
   one. Only ever filled in by script once a number has been typed. */
.sf-memact-delta {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px;
  border-radius: 999px; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: rgba(43,42,31,.07); color: var(--sf-member-muted);
}
.sf-memact-delta--down { background: var(--sf-member-good-tint); color: var(--sf-member-good); }
.sf-memact-delta--up { background: var(--sf-member-warn-tint); color: var(--sf-member-warn); }

/* ---------- waive-off: a deliberate amber dashed row, never a solid button ----
   Writing money off is a decision, not a step in the flow, so it does not look
   like the submit button sitting under it. Admin only - the view leaves the
   whole block out for an instructor, and the action refuses it as well. */
.sf-memact-waive {
  display: flex; align-items: center; gap: 8px;
  width: 100%; min-height: var(--sf-member-tap); padding: 12px 14px;
  border: 1.5px dashed rgba(154,91,0,.5); border-radius: 14px; cursor: pointer;
  background: var(--sf-member-warn-tint); color: var(--sf-member-warn);
  font-family: inherit; font-size: 14px; font-weight: 800; text-align: left;
}
.sf-memact-waive::-webkit-details-marker { display: none; }
.sf-memact-waive:active { filter: brightness(.96); }

/* The block the summary opens. It is a <details>, so it stays closed until the
   owner deliberately opens it. */
.sf-memact-waivebox {
  border: 1.5px dashed rgba(154,91,0,.5); border-radius: 14px;
  background: var(--sf-member-warn-tint);
}
.sf-memact-waivebox[open] .sf-memact-waive { border: 0; border-radius: 14px 14px 0 0; }
.sf-memact-waivebody { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 12px; }
.sf-memact-waivenote { margin: 0; font-size: 12.5px; font-weight: 600; color: #6b4a00; text-wrap: pretty; }
.sf-memact-waiverest {
  align-self: flex-start; min-height: 40px; padding: 0 13px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid rgba(154,91,0,.5); background: #fff;
  color: var(--sf-member-warn); font-family: inherit; font-size: 13.5px; font-weight: 800;
}

/* ---------- the settled state on Add Payment ------------------------------
   Shown when a period has nothing left owing. Green rather than amber: this is
   a good outcome, not a warning -- the fee was agreed and it has been met. It
   sits above the form and says why the form below it is out of action, so a
   disabled amount box and a dead button are never unexplained.

   Uses the same tokens as the Active badge on the members list, so "settled"
   and "active" read as the same kind of fact in the same colour. */
.sf-memact-settled {
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid rgba(29,122,63,.28);
  border-left: 4px solid var(--sf-member-good);
  border-radius: 14px;
  background: var(--sf-member-good-tint);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sf-memact-settled-title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 800;
  color: #14532d;
  text-wrap: pretty;
}

.sf-memact-settled-note {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: #1f5133;
  text-wrap: pretty;
}

/* The way onward. A real button, because on a settled and expired period this
   is the action the person came for, even if they arrived at the wrong screen. */
.sf-memact-settled-go {
  align-self: flex-start;
  margin-top: 4px;
  min-height: 42px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--sf-member-good);
  color: #fff;
  font-size: 13.5px;
  font-weight: 800;
  text-decoration: none;
}

/* A form that cannot be submitted should look like one. Both are set here
   rather than on the elements, so the disabled look lives with the state that
   causes it. */
.sf-member-input:disabled {
  background: rgba(43,42,31,.04);
  color: var(--sf-member-muted);
  cursor: not-allowed;
}

.sf-member-submit:disabled {
  background: rgba(43,42,31,.16);
  box-shadow: none;
  color: var(--sf-member-muted);
  cursor: not-allowed;
}

/* ---------- submit colour per flow (the base pink stays in members.css) ---- */
.sf-memact-submit--ice  { background: linear-gradient(155deg, #6d7fa3, #3c4d74); box-shadow: 0 12px 24px -12px rgba(60,77,116,.7); }
.sf-memact-submit--good { background: linear-gradient(155deg, #2e9958, #14602f); box-shadow: 0 12px 24px -12px rgba(20,96,47,.7); }
.sf-memact-submit--teal { background: linear-gradient(155deg, #17a89a, #0b6f64); box-shadow: 0 12px 24px -12px rgba(11,111,100,.7); }

/* ============================================================
   CONFIRM SHEET

   NOT YET IN USE. Deactivate still goes through window.confirm, driven by the
   data-sf-confirm attribute site.js reads - that was a deliberate choice, since
   replacing it means a new interaction rather than a restyle, and the wording
   the design asked for is carried by the prompt instead.

   Kept here, complete, so upgrading the prompt later is a markup-and-script job
   with the styling already done.
   ============================================================ */

/* The veil mounts OUTSIDE .sf-member - fixed, on the body - so it carries its
   own copy of every token it uses rather than inheriting them. */
.sf-memact-veil {
  --sf-memact-radius: 20px; --sf-memact-tap: 48px;
  --sf-memact-edge: rgba(43,42,31,.10);
  /* 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-memact-ink: #2b2a1f; --sf-memact-muted: #615F4E;
  --sf-memact-bad-deep: #8c1d17;

  /* Centred and capped to the app frame rather than inset: 0, so the veil
     dims the phone column instead of the whole laptop window. */
  position: fixed; top: 0; bottom: 0;
  left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--frame-w, 480px);
  z-index: 60;
  font-family: "Archivo", system-ui, sans-serif;
  color: var(--sf-memact-ink);
  background: rgba(43,42,31,.45);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 24px;
}
.sf-memact-confirm {
  width: 100%; max-width: 360px;
  background: #fff; border-radius: var(--sf-memact-radius);
  border: 1.5px solid var(--sf-memact-edge);
  box-shadow: 0 24px 48px -20px rgba(43,42,31,.5);
  padding: 18px 16px 16px; position: relative; overflow: hidden;
}
.sf-memact-confirm::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, #c4372e, var(--sf-memact-bad-deep)); }
.sf-memact-confirm-title { margin: 2px 0 6px; font-size: 17px; font-weight: 800; text-transform: capitalize; }
.sf-memact-confirm-body { margin: 0 0 14px; font-size: 14px; color: var(--sf-memact-muted); text-wrap: pretty; }
.sf-memact-confirm-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sf-memact-confirm-yes {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--sf-memact-tap); border: 0; border-radius: 13px; cursor: pointer;
  background: linear-gradient(155deg, #c4372e, var(--sf-memact-bad-deep));
  color: #fff; font-family: inherit; font-size: 14.5px; font-weight: 800;
  box-shadow: 0 10px 20px -10px rgba(140,29,23,.7);
}
.sf-memact-confirm-yes:active { transform: translateY(1px); }
.sf-memact-confirm-no {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--sf-memact-tap); border: 1.5px solid rgba(43,42,31,.2); border-radius: 13px; cursor: pointer;
  background: #fff; color: var(--sf-memact-ink); font-family: inherit; font-size: 14.5px; font-weight: 700;
}
.sf-memact-confirm-no:active { background: rgba(43,42,31,.05); }