:root {
  /* ---- Brand refresh 2026 ----
     Amber used to be primary. It's now demoted to SECONDARY.
     Blaze is the new PRIMARY accent. Tactical black is the SHELL
     for header/nav/footer/status bars. --yellow token is kept
     for future secondary use. */

  /* PRIMARY action accent */
  --accent: #ff5a1f;         /* blaze orange — buttons, active nav, focus rings, key stats */
  --accentDark: #e04a12;     /* pressed/hover */
  --accentGlow: rgba(255, 90, 31, 0.35);

  /* SECONDARY accent (kept for future) */
  --yellow: #eba63f;         /* amber */
  --lightYellow: #f5c56e;    /* amber tint */

  /* Shell / header */
  --shell: #16150f;          /* tactical black */
  --shellInk: #f4f0e8;       /* text/icons on the shell */

  /* Surfaces — workspace stays light */
  --cream: #f4f0e8;          /* nudged from #f5eee0 */
  --white: #fcfcfc;
  --black: #16150f;          /* was #222220 — now tactical */

  /* Action colors — semantic, do not repurpose */
  --red: #e53935;            /* Delete / danger */
  --lightRed: #ef6f6c;
  --green: #2e7d32;          /* Save / success */
  --lightGreen: #7ab47d;

  /* Accent palette */
  --orange: #f57c00;         /* Warning — semantic */
  --blue: #1e88e5;
  --pink: #ec407a;
  --purple: #8e24aa;
  --brown: #6d4c41;
  --teal: #3cbcc3;

  --lightBrown: #efe7da;
  --darkBrown: #5b4636;
  --lightGrey: #e6e6e6;

  /* -- Trophy wizard: shared type & selection-box scale (2026-07-06,
        x-wizard-tokens). Single source of truth for row-picker cards and
        chip options across every wizard step. -- */
  --wiz-option-size: 16px;              /* row-title (Species, Client, PH, Hunt, Farm) */
  --wiz-option-weight: 600;             /* bolder — audience isn't app-savvy */
  --wiz-option-sub-size: 12px;          /* second line (owner, hunt dates) */
  --wiz-option-sub-weight: 400;
  --wiz-option-sub-color: #5a564c;      /* ink-mute */
  --wiz-chip-size: 13px;                /* Male/Female, Dead/Wounded, Parts */
  --wiz-chip-weight: 600;
  --wiz-pick-padding: 14px 16px;        /* td padding around .wizPickRow */
  --wiz-pick-min-height: 56px;          /* uniform selection-box height */
  --wiz-pick-radius: 10px;              /* box radius */

  /* Gradients */
  --gradient: linear-gradient(#fff, var(--cream));
  --gradientDown: linear-gradient(var(--cream), #fff);
  --gradientSide: linear-gradient(var(--lightYellow), var(--cream));

  /* Fonts */
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-heading: "Barlow Condensed", var(--font-ui);
}

html,
body {
  font-family: var(--font-ui);
}
h1,
h2,
h3,
.gFrmSubHeader,
.header .title {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.2px;
}

html,
body {
  margin: 0;
  padding: 0;
  border: 0;
  overscroll-behavior: contain;
  font-family: var(--font-ui);
}
body {
  width: 100%;
  touch-action: manipulation;
  font-family: var(--font-ui);
}
table,
td {
  border: 0;
  padding: 0;
  margin: 0;
  border: 1px solid black;
  border-collapse: collapse;
  background: transparent;
}
tr {
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  background: transparent;
}
thead,
tbody {
  width: 100%;
}

.gFrm {
  top: 60px;
  max-height: calc(100% - 120px);
  background-color: var(--cream);
  display: none;
  font-family: var(--font-ui);
  font-size: 18px;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
  --sticky-space: 96px; /* default space; JS sal dit update */
  padding-bottom: var(--sticky-space);

  --sticky-space: 96px;           /* default space; JS sal dit update */
  padding-bottom: var(--sticky-space);

}

.gFullFrm {
  display: none;
  font-family: var(--font-ui);
  font-size: 18px;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px 20px 20px;
  text-align: center;
  box-sizing: border-box;
}
/* Gradient fallback if --gradient isn't defined
   Previously an amber gradient; now tactical shell so any header
   falling back here reads as the new dark shell. */
:root {
  --hdrGradient: var(--shell);
}

.gFrmHeader {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  background: var(--gradient, var(--hdrGradient));
  color: var(--black);
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px 16px;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  margin-bottom: 16px; /* tighter, more modern spacing */
}

.gFrmHeadLine {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 52px;
}

.gFrmHeading {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  min-width: 0; /* enable ellipsis */
}

/* Back button */
/* Back button: make the CIRCLE and center contents */
.gFrmBackBtn {
  --size: 40px; /* 40px if you prefer bigger */
  width: var(--size);
  height: var(--size);
  padding: 0;
  border: 0;
  border-radius: 999px;
  display: grid; /* perfect centering */
  place-items: center;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.06); /* or none */
}
.gFrmBackBtn.gBtnPress {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Icon: remove baseline gap + micro-nudge */
.gFrmBackIcon {
  width: 30px;
  height: 30px;
  display: block; /* kills baseline gap */
  transform: translateY(-0.5px); /* tweak -0.25 to -1px if needed */
  pointer-events: none;
}

/* Title + optional sub */
.gFrmTitleWrap {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.gFrmName {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter,
    Roboto, "Helvetica Neue", Arial, "Noto Sans";
  font-weight: 700;
  font-size: clamp(18px, 2.4vw, 22px);
  line-height: 1.2;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gFrmSub {
  font-size: 12px;
  line-height: 1.2;
  color: rgba(0, 0, 0, 0.65);
  margin-top: 2px;
}
.gFrmToolbar {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 8px; /* subtle separation below the headline */
}

/* Mobile: stack checkbox above search field */
@media (max-width: 480px) {
  .gFrmToolbar {
    grid-template-columns: 1fr;
  }
}

/* Right-side actions (optional) */
.gFrmActions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gIconBtn {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: transform 0.08s ease, background 0.2s ease;
}
.gIconBtn:active {
  transform: scale(0.97);
}
.gIconBtn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Dark mode polish */
@media (prefers-color-scheme: dark) {
  .gFrmHeader {
    background: linear-gradient(180deg, #3a2f22, #1d1d1d);
    color: var(--white);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  }
  .gFrmBackBtn,
  .gIconBtn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
  }
  .gFrmSub {
    color: rgba(255, 255, 255, 0.75);
  }
}

/* If this header lives inside a floating modal and must NOT stick, remove position:sticky */

.gFullFrmHeader {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  margin-bottom: 12px;
  padding-top: 20px; /* room for back button tap target */
}
.gFullFrmHeader img {
  width: 13vh;
  margin-top: 20px;
  animation: pulseAnimation 2s 1;
}
/* Header container – tidy stack + spacing (safe, optional) */
.gFullFrmHeader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  margin-bottom: 12px;
}

/* Main headline */
.loginHeader {
  display: block;
  font-weight: 800;
  font-size: clamp(22px, 4.2vw, 28px);
  line-height: 1.2;
  color: var(--black);
  letter-spacing: 0.2px;
  margin-top: 4px;
}

/* Sub-headline */
.loginSubHeader {
  display: block;
  font-weight: 500;
  font-size: clamp(14px, 3.2vw, 16px);
  line-height: 1.35;
  color: var(--grey);
  max-width: 34ch; /* pleasant line length */
}

/* Optional: subtle brand accent under the main header */
.loginHeader::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin: 8px auto 0;
  border-radius: 3px;
  background: var(--accent);
  opacity: 0.9;
}

/* Optional: give a touch more spacing from the logo if present */
.loginHeader,
.gFullFrmHeader img + .loginHeader {
  margin-top: 6px;
}
.headLogo {
  margin-top: 50px !important;
}

.gFrmBody {
  position: relative;
  width: 100%;
  padding:  10px 10px 60px 10px;
}

@keyframes pulseAnimation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
/* Full-form footer */
.gFullFrmFooterCon {
  position: sticky; /* stays visible at bottom of long forms */
  bottom: 0;
  inset-inline: 0;
  display: grid;
  grid-template-columns: 1fr; /* stack on phones */
  gap: 8px;
  align-items: center;
  justify-items: center;
  padding: 12px 16px calc(env(safe-area-inset-bottom) + 12px);
  color: var(--grey);
  font-size: 0.8rem;
  line-height: 1.25;
  z-index: 1;
  margin-top: clamp(12px, 4vh, 24px);
}

.gFullFrmFooterRow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap; /* short bits stay on one line */
}

.gFullFrmFooterRow img {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  opacity: 0.9;
}

/* Brand the "Programify" link inside the footer */
.gFullFrmFooterCon .gFullFrmFooterBrand a {
  color: var(--black); /* brand text */
  text-decoration: none;
  border-bottom: 2px solid var(--accent); /* brand accent underline */
  padding: 0 2px;
  border-radius: 2px;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    outline-color 0.15s ease;
  cursor: pointer;
}

/* kill the default purple visited color */
.gFullFrmFooterCon .gFullFrmFooterBrand a:visited {
  color: var(--black);
}

/* subtle brand hover */
.gFullFrmFooterCon .gFullFrmFooterBrand a:hover {
  background: rgba(255, 90, 31, 0.1); /* translucent yellow */
  border-bottom-color: var(--accent);
}

/* accessible focus ring in brand yellow */
.gFullFrmFooterCon .gFullFrmFooterBrand a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* tiny press feedback */
.gFullFrmFooterCon .gFullFrmFooterBrand a:active {
  transform: translateY(1px);
}

/* Desktop/tablet: 3 columns (left/center/right) */
@media (min-width: 520px) {
  .gFullFrmFooterCon {
    grid-template-columns: 1fr auto 1fr;
    text-align: left;
  }
  .gFullFrmFooterCon > :nth-child(2) {
    justify-self: center;
  }
  .gFullFrmFooterCon > :last-child {
    justify-self: end;
  }
}

.gFrmFieldset {
}
.gFrmFieldset legend {
  font-weight: bolder;
}

/* Back icon: top-left, big tap area, brand-friendly */
.gFullFrmBackIcon {
  position: absolute;
  left: 12px;
  top: 12px;

  /* hit target */
  width: 20px !important;
  height: 20px;
  padding: 8px; /* increases clickable area to ~36x36 */
  border-radius: 50%;
  background: color-mix(in srgb, var(--cream) 70%, transparent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, transform 0.06s ease,
    opacity 0.15s ease;
}

/* Hover/focus/active feedback */
@media (hover: hover) {
  .gFullFrmBackIcon:hover {
    background: color-mix(in srgb, var(--cream) 85%, transparent);
  }
}
.gFullFrmBackIcon:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.gFullFrmBackIcon:active {
  transform: translateY(1px);
  opacity: 0.9;
}

/* If header has no logo, keep layout tidy */
.gFrmLabel {
  margin-left: 20px;
  font-weight: bold;
  display: block;
}
.gFrmIputReq {
  font-weight: normal;
  margin-left: 3px;
  font-size: 14px;
}
/* ---------- Floating field shell ---------- */
.gFrmField {
  position: relative;
  margin: 12px auto; /* spasie bo/onder en center */
  width: 100%;
  max-width: 420px; /* hou dit mooi breed, maar nie te wyd nie */
  padding: 0 16px; /* inset left/right margin */
  box-sizing: border-box;
}

/* ---------- Inputs / Textareas ---------- */
.gFrmInput,
.gFrmTextArea {
  width: 100%;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.4;
  margin-right: 28px;
  padding: 20px 14px 12px; /* ekstra top vir die label */
  border: 1px solid var(--border, #ddd4c9);
  border-radius: 14px;
  background: var(--fieldBg, #fffdf8);
  color: var(--ink, #22201f);
  outline: none;
  display: block;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease,
    background 0.15s ease;
}

/* Hide the actual placeholder text, but keep it present for :placeholder-shown */
.gFrmInput::placeholder,
.gFrmTextArea::placeholder {
  color: transparent;
}

/* Focus style (mobile-friendly, subtle but clear) */
.gFrmInput:focus,
.gFrmTextArea:focus {
  border-color: var(--accent, #ff5a1f);
  box-shadow: 0 0 0 4px
    color-mix(in srgb, var(--accent, #ff5a1f) 20%, transparent);
  background: var(--fieldBgFocus, #fffef9);
}

/* ---------- Floating label ---------- */
.gFrmLabel {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  line-height: 1;
  color: var(--muted, #7a746b);
  padding: 0 6px; /* skep ‘n klein “chip” agtergrond */
  background: var(--fieldBg, #fffdf8);
  pointer-events: none;
  transition: transform 0.15s ease, top 0.15s ease, font-size 0.15s ease,
    color 0.15s ease, background 0.15s ease;
  border-radius: 6px;
}

/* Float die label op focus of wanneer daar waarde is */
.gFrmInput:focus + .gFrmLabel,
.gFrmInput:not(:placeholder-shown) + .gFrmLabel,
.gFrmTextArea:focus + .gFrmLabel,
.gFrmTextArea:not(:placeholder-shown) + .gFrmLabel {
  top: 8px;
  transform: none;
  font-size: 12px;
  color: var(--accent, #ff5a1f);
  background: var(--fieldBg, #fffdf8);
}

/* Textarea – effens ander vertikale gevoel (opsioneel) */
.gFrmTextArea + .gFrmLabel {
  top: 20px;
}
.gFrmTextArea:focus + .gFrmLabel,
.gFrmTextArea:not(:placeholder-shown) + .gFrmLabel {
  top: 8px;
}

/* Required / optional badges */
.gFrmLabel .req {
  margin-left: 4px;
  color: var(--red, #e53935);
  font-weight: 600;
}

/* 2026-07-14 Step 2b: Helper text under an input, for settings that need
   a one-line explanation (e.g. Trophy tag visibility). Small, muted,
   respects the field's 16px inset so it aligns with the input above. */
.gFrmFieldHelp {
  display: block;
  margin: 6px 4px 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted, #7a746b);
}
.gFrmLabel .opt {
  margin-left: 6px;
  color: var(--muted, #7a746b);
  font-weight: 400;
  font-size: 0.9em;
}

/* Error state hook (as jy 'is-invalid' op die veld se wrapper sit) */
.gFrmField.is-invalid .gFrmInput,
.gFrmField.is-invalid .gFrmTextArea {
  border-color: var(--red, #e53935);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--red, #e53935) 15%, transparent);
}
.gFrmField.is-invalid .gFrmLabel {
  color: var(--red, #e53935);
}

/* Disabled state */
.gFrmInput:disabled,
.gFrmTextArea:disabled {
  opacity: 0.7;
  background: #f7f4ef;
  cursor: not-allowed;
}

/* ===== Full-form inputs ===== */
.gFullFrmInput {
  width: 100%;
  box-sizing: border-box;

  /* Size & touch */
  min-height: 48px;
  padding: 12px 14px;
  font-size: 16px; /* prevents iOS zoom */
  line-height: 24px;

  /* Brand look */
  color: var(--black);
  background: var(--white);
  border: 1.5px solid var(--lightGrey);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) inset;

  /* Feel */
  transition: border-color 0.18s ease, box-shadow 0.18s ease,
    background-color 0.18s ease, filter 0.18s ease;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Spacing between stacked inputs */
.gFullFrm .gFullFrmInput {
  margin-top: 10px;
}

/* Placeholder */
.gFullFrmInput::placeholder {
  color: var(--grey);
  opacity: 0.95;
}

/* Hover (desktop only) */
@media (hover: hover) {
  .gFullFrmInput:hover {
    border-color: color-mix(in srgb, var(--lightGrey) 60%, var(--accent));
  }
}

/* Focus: on-brand ring */
.gFullFrmInput:focus,
.gFullFrmInput:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(255, 90, 31, 0.22),
    0 1px 2px rgba(0, 0, 0, 0.04) inset;
}

/* Disabled / read-only */
.gFullFrmInput:disabled,
.gFullFrmInput[readonly] {
  background: var(--cream);
  color: color-mix(in srgb, var(--black) 70%, var(--grey));
  border-color: var(--lightGrey);
  cursor: not-allowed;
}

/* Validation helpers (use via JS when you show errors) */
.gFullFrmInput.is-invalid {
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(229, 57, 53, 0.18);
}
.gFullFrmInput.is-valid {
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(46, 125, 50, 0.18);
}

/* Autofill theming (Chrome/Safari) */
.gFullFrmInput:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--white) inset !important;
  -webkit-text-fill-color: var(--black) !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Number inputs: remove spinners (optional) */
.gFullFrmInput[type="number"]::-webkit-outer-spin-button,
.gFullFrmInput[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.gFullFrmInput[type="number"] {
  -moz-appearance: textfield;
}

/* Optional subtle shake you can add when invalid */
@keyframes gInputShake {
  10%,
  90% {
    transform: translateX(-1px);
  }
  20%,
  80% {
    transform: translateX(2px);
  }
  30%,
  50%,
  70% {
    transform: translateX(-4px);
  }
  40%,
  60% {
    transform: translateX(4px);
  }
}
.gFullFrmInput.is-invalid.is-shake {
  animation: gInputShake 0.35s ease;
}

/* Optional wrapper for adornments (used by JS eye toggle below) */
/* wrapper so the eye can sit inside the input, right aligned */
.gInputWrap {
  position: relative;
}

/* add room on the right for the eye */
.gInputWrap .gFullFrmInput {
  height: 48px; /* not min-height */
  line-height: 24px; /* 48 - (12 + 12) = 24 */
  padding: 12px 44px 12px 14px; /* keep room for eye on the right */
}

/* the eye button — no border, no background, crisp alignment */
.gInputAdornment {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(calc(-50% - 1px)); /* nudge up 1px */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 36px; /* comfy tap target */
  height: 36px;
  padding: 0;
  margin: 0;

  background: transparent;
  border: none;
  outline: none;
  appearance: none;

  color: var(--darkBrown); /* subtle brand tone */
  opacity: 0.8;
  transition: opacity 0.15s ease, transform 0.06s ease, color 0.15s ease;
  cursor: pointer;
  line-height: 0; /* prevents baseline wobble */
  touch-action: manipulation; /* better mobile taps */
}

/* hover/focus/active (kept minimal & professional) */
@media (hover: hover) {
  .gInputAdornment:hover {
    opacity: 1;
  }
}
.gInputAdornment:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.gInputAdornment:active {
  transform: translateY(calc(-50% + 1px));
}

/* icon size */
.gInputWrap > .gInputAdornment {
  position: absolute;
  inset-inline-end: 8px; /* right: 8px in LTR, left in RTL */
  inset-block: 0; /* top:0; bottom:0; -> full height of wrapper */
  display: grid;
  place-items: center; /* perfectly centers the SVG */
  width: 36px;
  height: auto; /* takes full height via inset-block */
  transform: none !important; /* override older translateY rules */
}

/* Keep icon crisp */
.gInputAdornment svg {
  width: 20px;
  height: 20px;
}

/* iOS placeholder tends to sit high – inherit line-height */
.gFullFrmInput::placeholder {
  line-height: inherit;
}
@supports (-webkit-touch-callout: none) {
  .gInputAdornment {
    transform: translateY(calc(-50% - 1.5px));
  }
}


/* Make space so content isn't hidden behind the sticky bar */


/* Sticky bar shell */
.gFrmStickyBar{
  position: fixed;                 /* meer betroubaar as sticky vir mobile */
  left: 0; right: 0;
  bottom: calc(env(safe-area-inset-bottom) + var(--kb-offset, 0px));
  z-index: 1001;
  pointer-events: none;            /* inner hanteer clicks */
}

/* Soft gradient + blur vir moderne app look */
.gFrmStickyBar::before{
  content:"";
  position:absolute; left:0; right:0; bottom:0; top:-24px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(250,248,242,.9) 60%, rgba(250,248,242,.98) 100%);
  backdrop-filter: blur(8px);
}

/* Centered, medium-width rail met gap vir 2 knoppies */
.gFrmStickyBar__inner{
  position: relative;
  pointer-events: auto;
  margin: 0 auto 8px;             /* klein lift van onder */
  width: min(92vw, 520px);        /* medium breedte, sentraal */
  display: grid;
  grid-template-columns: 1fr 1fr; /* Save + Cancel langs mekaar */
  gap: 12px;
  padding: 8px 16px;
}

/* Buttons */
.gBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;                   /* mobile tappable */
  padding: 0 16px;
  border-radius: 14px;
  font-weight: 700;
  letter-spacing: .2px;
  border: none;
  outline: none;
  transition: transform .12s ease, box-shadow .15s ease, opacity .15s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Primary = Save (green) */
.gBtnPrimary{
  background: var(--green, #2e7d32);
  color: #fff;
}
.gBtnPrimary:active{ transform: scale(.98); }

/* Secondary = Cancel (neutral) */
.gBtnSecondary{
  background: #efe7da;
  color: var(--ink, #22201f);
  box-shadow: 0 4px 14px rgba(0,0,0,.08) inset, 0 4px 14px rgba(0,0,0,.06);
}
.gBtnSecondary:active{ transform: scale(.98); }

/* Disabled pattern (as jy dit later wil gebruik) */
.gBtn[disabled]{
  opacity: .55;
  box-shadow: none;
  cursor: not-allowed;
}

/* Opsioneel: verberg enige ou knoppie-bokse in hierdie form */
#frmSettings .gFrmBtnBox{ display:none; }

/* ===== Search Item Card ===== */
.searchItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--white);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 6px 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.06);
  transition: background 0.2s, transform 0.1s;
  cursor: pointer;
}

.searchItem:hover {
  background: var(--cream);
}

.searchItem:active {
  transform: scale(0.98);
  /* Subtle blaze tint on white — matches .searchItem--v2 press feedback
     (loud full-orange fill removed 2026-07-06 tapfix). */
  background: color-mix(in srgb, var(--accent) 8%, var(--white));
}

.searchItem-left {
  flex-shrink: 0;
  margin-right: 12px;
}

/* Profile / contact photo inside search cards */
/* ===== Search Item Shared Styles ===== */

/* Left photo/icon container (Client, PH, Concession) */
.searchItem-photo {
  width: 40px;
  height: 40px;
  border-radius: 50%;        /* always a circle */
  object-fit: cover;         /* crop if it's a photo */
  background: var(--cream);  /* fallback for icons */
  display: block;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
/* Tweak only the farm icon inside the photo circle */
.searchItem-photo[src*="icoFarm.svg"] {
  padding: 6px;       /* shrinks the drawing inside the circle */
  object-fit: contain;
}

/* Action buttons (phone/email/etc.) */
.searchItem-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-left: 8px;
}

.searchItem-actions .action-icon {
  width: 18px;              /* inner icon size */
  height: 18px;
  padding: 8px;             /* makes the cream circle */
  border-radius: 50%;
  background: var(--cream);
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.2s, background 0.2s, transform 0.1s;
}

.searchItem-actions .action-icon:hover {
  opacity: 1;
  background: var(--accent);
  transform: scale(1.05);
}



.searchItem-right {
  flex: 1;
  min-width: 0;
}

.searchItem-head {
  font-size: 16px;
  font-weight: 600;
  color: var(--black);
  line-height: 1.2;
  margin-bottom: 2px;
}

.searchItem-sub {
  font-size: 13px;
  color: var(--grey);
  line-height: 1.2;
}

.searchItem-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--red);
  background: rgba(255,0,0,0.08);
  padding: 2px 6px;
  border-radius: 6px;
  align-self: flex-start;
}

/* =============================================================
   List pattern v2 — matches mockups/list-screens.html
   Applied so far to: Clients list rows (searchItem--v2).
   Legacy .searchItem styles above stay untouched; v2 selectors
   override where needed to give the mockup look.
   ============================================================= */

.searchItem.searchItem--v2 {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 1px solid #e8e2d4;
  border-radius: 12px;
  padding: 10px 12px;
  /* Tightened row rhythm — 6px between rows keeps the list scanning as one
     cohesive stack, min-height 56px preserves comfortable ≥48px tap targets. */
  margin: 0 0 6px;
  min-height: 56px;
  box-shadow: none;
  transition: background-color 0.15s, transform 0.06s;
  cursor: pointer;
}
.searchItem.searchItem--v2:hover {
  background: color-mix(in srgb, var(--cream) 60%, var(--white));
}
.searchItem.searchItem--v2:active {
  background: color-mix(in srgb, var(--accent) 8%, var(--white));
  transform: none;
}

/* Consistent gap between the search input row and the first list item. */
#frmSearchTblSearch { margin-top: 4px; }
#frmSearchTblSearch tr { border: 0; }
#frmSearchTblSearch td { padding: 0; border: 0; }

/* Avatar circle with initials (blaze-tinted for clients, tactical-black for
   PHs, warm-neutral for farms, grey-cream for hunts, tactical-black rounded
   square for trophies — matches mockups/list-screens.html). */
.searchItem-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-family: "Barlow Condensed", var(--font-heading, sans-serif);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.searchItem-avatar svg { width: 20px; height: 20px; display: block; }
.searchItem-avatar--client {
  background: rgba(255, 90, 31, 0.10);
  color: var(--accent);
}
.searchItem-avatar--ph {
  background: #16150f;   /* tactical black */
  color: #f4f0e8;        /* shell ink */
}
.searchItem-avatar--farm {
  background: #eae4d3;
  color: #6d4c41;
}
.searchItem-avatar--hunt {
  background: #e6e3d3;
  color: #16150f;
}
.searchItem-avatar--trophy {
  background: #16150f;
  color: #f4f0e8;
  border-radius: 10px;   /* rounded square, per mockup */
}

.searchItem.searchItem--v2 .searchItem-right {
  flex: 1 1 auto;
  min-width: 0;
}
.searchItem.searchItem--v2 .searchItem-head {
  font-family: "Barlow Condensed", var(--font-heading, sans-serif);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--black);
  line-height: 1.15;
  margin: 0;
}
.searchItem.searchItem--v2 .searchItem-sub {
  font-size: 12.5px;
  color: #5a564c;
  margin-top: 3px;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.searchItem.searchItem--v2 .searchItem-sub b {
  color: var(--black);
  font-weight: 600;
}

/* Hunt colour dot inline in the subtext (matches mockup). */
.searchItem--v2 .huntDot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex-shrink: 0;
  display: inline-block;
}

/* Trophy medal chip on the right of the row.
   Gold / silver / bronze — matches mockups/list-screens.html. */
.searchItem-medal {
  padding: 3px 9px;
  border-radius: 999px;
  font-family: "Barlow Condensed", var(--font-heading, sans-serif);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.searchItem-medal.gold   { background: #fff2cc; color: #b58a2a; }
.searchItem-medal.silver { background: #e8e8e8; color: #52565a; }
.searchItem-medal.bronze { background: #f4e2c9; color: #8a5a1a; }

/* Hunt state pill (Active / Complete / Pending / Deleted) — restyled to
   sit inline in the v2 row on the right, before the chevron. */
.searchItem--v2 .huntState {
  padding: 2px 8px;
  border-radius: 999px;
  font-family: "Barlow Condensed", var(--font-heading, sans-serif);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fcfcfc;
  flex-shrink: 0;
  align-self: center;
}

/* Compact action icons (kept for phone/email quick actions on clients) */
.searchItem.searchItem--v2 .searchItem-actions {
  gap: 6px;
  margin-left: 6px;
  flex-shrink: 0;
}
.searchItem.searchItem--v2 .searchItem-actions .action-icon {
  width: 16px;
  height: 16px;
  padding: 7px;
}

.searchItem-arrow {
  color: #8a8574;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
}
.searchItem-arrow svg {
  width: 16px;
  height: 16px;
  display: block;
}

.searchItem.searchItem--v2.is-deleted {
  opacity: 0.55;
}

/* =============================================================
   Nav-shell chrome — mockup-parity restyle (VISUAL ONLY)
   Applied to:
     - #mainHeader (title left, switch small, hamburger right)
     - #mainMenu   (bottom nav — Barlow labels under each tab)
     - #appViewDropMenu (Barlow-labelled dropdown polish)
   No wiring / behaviour changes. See mockups/nav-shell.html.
   ============================================================= */

/* Header ---------------------------------------------------- */
.mainHeader .gAsRow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
}
#mainHeaderTitle {
  flex: 1 1 auto;
  min-width: 0;
  order: 1;
  padding-left: 14px;
  font-family: var(--font-heading, "Barlow Condensed", sans-serif);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--shellInk);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Switch stays for now but shrinks so title dominates. Full removal
   from the header lands when we relocate it into the drawer. */
.mainHeader .switchBoxCon {
  order: 2;
  flex: 0 0 auto;
  gap: 6px;
  margin: 0;
  padding: 0 4px;
  transform: scale(0.82);
  transform-origin: right center;
  opacity: 0.9;
}
.mainHeader .switchLbl {
  font-size: 11px;
  letter-spacing: 0.14em;
}
.mainHeader .col1 {
  order: 3;
  flex: 0 0 auto;
  margin-left: 2px;
}

/* Bottom nav ------------------------------------------------ */
.mainMenu {
  background: var(--white);
  border-top: 1px solid var(--line, #e8e2d4);
  box-shadow: 0 -2px 8px rgba(22, 21, 15, 0.04);
  height: 74px;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.menuBtn {
  flex-direction: column;
  gap: 4px;
  height: 74px;
  color: var(--ink-mute, #5a564c);
  padding: 8px 4px 6px;
}
.menuBtn img {
  width: 24px;
  height: 24px;
}
/* 2026-07-13 QA1 fix #6 (chunk 7): footer nav icons are now inline SVG.
   Colour inherits currentColor from the button; active tab tints accent. */
.menuBtn .menuBtnIcon {
  width: 24px;
  height: 24px;
  color: var(--ink-mute, #5a564c);
  transition: color 0.12s ease;
}
.menuBtnLbl {
  font-family: var(--font-heading, "Barlow Condensed", sans-serif);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute, #5a564c);
  line-height: 1;
}
/* Active state: keep legacy .active as an alias for .is-active during
   the transition (nothing outside this file writes .active anymore, but
   older markup snapshots might). */
.menuBtn.is-active .menuBtnLbl,
.menuBtn.active .menuBtnLbl {
  color: var(--accent);
}
.menuBtn.is-active .menuBtnIcon,
.menuBtn.active .menuBtnIcon {
  color: var(--accent);
}
.menuBtn.is-active img,
.menuBtn.active img {
  filter: drop-shadow(0 0 0 var(--accent));
}
/* Center FAB — matches mockups/nav-shell.html.
   Structural swap 2026-07-06 fab3: the button is no longer the circle
   itself; it's a tall flex-column container. The blaze circle is
   painted via `.menuBtn.fab::before` (elevated -32px via absolute
   positioning). The SVG is absolute-positioned dead-center inside the
   circle. The label sits in-flow at the bottom of the container,
   aligned with the other bottom-nav labels. Every id / class preserved. */
.menuBtn.fab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0 4px 8px;
  margin: 0;
  overflow: visible;
  transition: transform 0.06s;
}
.menuBtn.fab::before { content: none; display: none; }
.menuBtn.fab:hover svg {
  background: var(--accentDark);
  box-shadow: 0 14px 28px rgba(255, 90, 31, 0.50);
}
.menuBtn.fab:active { transform: translateY(1px); }
.menuBtn.fab svg {
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 64px;
  box-sizing: border-box;
  padding: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 4px solid var(--white);
  box-shadow: 0 12px 24px rgba(255, 90, 31, 0.42);
  stroke: #fff;
  fill: none;
  z-index: 1;
  pointer-events: none;
  transition: background-color 0.15s, box-shadow 0.15s;
}

/* No extra layout on #mainMenuAddBtn — the .menuBtn.fab rule above owns
   the container. Kept as an anchor for any id-based lookups. */
#mainMenuAddBtn { padding: 0 4px 8px; margin: 0; }

/* "Trophy" label — in-flow at the bottom of the FAB container. Sized to
   match .menuBtnLbl so it aligns with the other bottom-nav labels. */
#mainMenuAddLbl {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  margin: 0;
  font-family: var(--font-heading, "Barlow Condensed", sans-serif);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}
/* The FAB cell has no label of its own; ensure the row aligns bottom */
.mainMenu .gAsCell {
  vertical-align: bottom;
}
.mainMenu .gAsCell .menuBtn {
  height: 66px;
}
.mainMenu .gAsCell .menuBtn.fab { height: 64px; }

/* Drawer / hamburger polish ----------------------- */
/* Intermediate #appViewDropMenu rules removed 2026-07-06 —
   the drawer is now fully governed by the "Drawer transform" block
   further down. .mainDropDown item styles below still apply to
   both the drawer and #appSettingDropMenu (shared). */
.mainDropDown > .menuItem {
  border-radius: 12px;
  padding: 12px 12px;
  min-height: 52px;
  gap: 12px;
  grid-template-columns: 32px 1fr;
}
.mainDropDown .menuIcon {
  width: 32px;
  height: 32px;
  background: var(--cream);
}
.mainDropDown .menuIcon svg { width: 18px; height: 18px; }
.mainDropDown .menuLabel {
  font-family: var(--font-heading, "Barlow Condensed", sans-serif);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink, #1c1b14);
}
@media (hover: hover) {
  .mainDropDown > .menuItem:hover {
    background: color-mix(in srgb, var(--cream) 65%, var(--white));
  }
}

/* =============================================================
   PH/HO switch — relocated 2026-07-06 from #mainHeader into the
   #appViewDropMenu drawer. Element ids (#mainHSwitchCon,
   #mainHSwitch) unchanged so MainHeaderUtils / GlobalUtils.switchUser
   keep working. This block re-tones the switch for the light drawer
   background (was tuned for tactical-black header) and wraps it in
   the "Switch view · Temporary" tile from mockups/nav-shell.html.
   ============================================================= */

/* Suppress header-position scaling now that the switch lives elsewhere. */
.mainHeader .switchBoxCon,
.mainHeader .switchLbl,
.mainHeader #mainHSwitchCon { display: none !important; }

.menuSwitchGroup {
  padding: 6px 4px 4px;
}
.menuSectionDivider {
  height: 1px;
  background: var(--line, #e8e2d4);
  margin: 8px 8px 6px;
}
.menuSectionTitle {
  padding: 4px 10px 6px;
  font-family: var(--font-heading, "Barlow Condensed", sans-serif);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint, #8a8574);
}
.menuSwitchTile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  margin: 0 4px;
  background: var(--cream);
  border: 1px dashed var(--line-strong, #d4ccb8);
  border-radius: 12px;
  min-height: 52px;
  color: var(--ink, #1c1b14);
}
.menuSwitchTileLbl {
  flex: 1 1 auto;
  font-family: var(--font-heading, "Barlow Condensed", sans-serif);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute, #5a564c);
}

/* Drawer-context overrides for the moved switch. Header-scoped rules
   above (lines ~2113-2189) target `.mainHeader ...` and therefore no
   longer apply. Re-set colors + sizing so it reads on a light bg. */
.menuSwitchTile .switchBoxCon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  height: auto;
  transform: none;
  opacity: 1;
  flex: 0 0 auto;
}
.menuSwitchTile .switchLbl {
  font-family: var(--font-heading, "Barlow Condensed", sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute, #5a564c);
  height: auto;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  user-select: none;
}
.menuSwitchTile .switchLbl.gMarginR { margin-right: 0; }

.menuSwitchTile #mainHSwitchCon {
  position: relative;
  width: 60px;
  height: 32px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink, #1c1b14), transparent 84%);
  box-shadow: 0 1px 2px rgba(22, 21, 15, 0.30) inset;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.menuSwitchTile #mainHSwitch.switch {
  box-sizing: border-box;
  position: relative;
  top: 2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--ink, #1c1b14);
  box-shadow: 0 1px 3px rgba(22, 21, 15, 0.20);
  transition: left 0.28s ease, transform 0.06s ease;
}
/* Blaze track when HO is on (knob at left:30px, data-userType="HO") */
.menuSwitchTile #mainHSwitch[data-userType="HO"] {
  border-color: var(--accent);
}
.menuSwitchTile #mainHSwitchCon:has(#mainHSwitch[data-userType="HO"]) {
  background: color-mix(in srgb, var(--accent), transparent 40%);
}
.menuSwitchTile #mainHSwitchCon:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* =============================================================
   On-screen "Add {entity}" button (2026-07-06) — solid tactical
   black, sits at the top of #frmSearch. Wired by FrmSearchUtils
   .configureAddTop() to fire GlobalUtils.openAdd(type). Replaces
   the FAB's old context-add role; blaze stays exclusive to the
   Trophy FAB.
   ============================================================= */
#frmSearchBtnAddTop.frmSearchBtnAddTop {
  width: 100%;
  min-height: 52px;
  margin: 10px 0 6px;
  padding: 14px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--shell);
  color: var(--shellInk);
  border: 0;
  border-radius: 12px;
  font-family: var(--font-heading, "Barlow Condensed", sans-serif);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 6px 14px rgba(22, 21, 15, 0.22);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s, transform 0.06s;
}
#frmSearchBtnAddTop.frmSearchBtnAddTop:hover  { background: #22201a; }
#frmSearchBtnAddTop.frmSearchBtnAddTop:active { transform: translateY(1px); }
#frmSearchBtnAddTop.frmSearchBtnAddTop svg    { width: 18px; height: 18px; display: block; }

/* =============================================================
   Contacts drop-up (2026-07-06 fix) — the bottom-nav Contacts tab
   opens #appContactDropMenu as a bottom-anchored chooser (Clients /
   PHs / Concessions). Before this pass the drop-up had z-index: 200,
   losing the layering fight to .mainMenu at z-index: 1000, so it
   rendered BEHIND the bottom nav and looked like "nothing showed".
   Bumped to 1500 (above nav 1000, below infoBox); added a scrim +
   safe-area padding so it feels like a real chooser.
   ============================================================= */

.contactScrim {
  position: fixed;
  inset: 0;
  background: rgba(22, 21, 15, 0.55);
  z-index: 1400;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
body:has(#appContactDropMenu[data-status="open"]) .contactScrim {
  opacity: 1;
  pointer-events: auto;
}

#appContactDropMenu {
  z-index: 1500 !important;  /* above .mainMenu (z-index: 1000) */
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 90px) !important;
}
/* Ensure the closed state is truly hidden — the earlier
   `[data-status="close"] { display: none }` rule stays, this
   just belt-and-braces the transition endpoints. */
#appContactDropMenu[data-status="open"] {
  padding: 8px 8px calc(env(safe-area-inset-bottom, 0px) + 90px) !important;
}

/* Item rows — nicer spacing on the drop-up chooser. */
#appContactDropMenu > .menuItem {
  margin: 4px 6px;
  padding: 14px 12px;
  border-radius: 12px;
  background: var(--white);
  min-height: 52px;
}

/* Header (title + X). Bind the X in JS directly. */
#appContactDropMenu > header {
  padding: 12px 14px 8px;
}
#appContactDropMenu .dropMenuClose {
  min-width: 40px;
  min-height: 40px;
  cursor: pointer;
}

/* =============================================================
   frmSearch — de-duplicate the second header (2026-07-06 fix).
   The main nav bar (#mainHeader) already names the screen and
   provides the drawer, so the sub-header inside #frmSearch should
   NOT repeat title/subtitle or show a big circular back button.
   Keep every JS-touched element in the DOM: #frmSearchIcoBack,
   #chkSearchInc, #frmSearchName, #frmSearchSub — just tone them
   down / hide the visual duplication. Matches mockups/list-screens.
   ============================================================= */

/* Hide the duplicated title/subtitle inside the sub-header (JS still
   writes to them; they just render off-screen visually). */
#frmSearch .frmSrcHeader .gFrmName,
#frmSearch .frmSrcHeader .gFrmSub,
#frmSearch .frmSrcTitle {
  display: none !important;
}

/* Tighten the sub-header — no big padding, no shadow, no border,
   let the app-header carry the screen title. */
#frmSearch .frmSrcHeader {
  padding: 8px 12px 4px !important;
  background: var(--cream) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  margin-bottom: 4px !important;
  position: static !important;
}
#frmSearch .frmSrcHeader .gFrmHeadLine {
  min-height: 40px !important;
}

/* Shrink the big circular back button to a small subtle control. */
#frmSearch #frmSearchIcoBack.gFrmBackBtn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  padding: 6px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: var(--ink, #1c1b14);
}
#frmSearch #frmSearchIcoBack .gFrmBackIcon {
  width: 18px !important;
  height: 18px !important;
}

/* "All" toggle stays; give it clean spacing. */
#frmSearch .frmSrcCheckCon {
  gap: 6px;
}

/* =============================================================
   Drawer transform — added 2026-07-06.
   Turns the old #appViewDropMenu (top drop-down) into a full-height
   slide-in from the right, over a dark scrim. Uses !important on
   the layout properties because MainMenuUtils.openCloseMenu still
   pokes inline maxHeight / opacity for the old drop-down animation
   — the drawer ignores those and drives visibility via transform +
   the drawer's own data-status="open" attribute.
   ============================================================= */

/* Scrim — sits between the app and the drawer. */
.menuScrim {
  position: fixed;
  inset: 0;
  background: rgba(22, 21, 15, 0.55);
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
body:has(#appViewDropMenu[data-status="open"]) .menuScrim {
  opacity: 1;
  pointer-events: auto;
}

/* Drawer container — override every old drop-down property. */
#appViewDropMenu {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: min(320px, 82vw) !important;
  max-width: none !important;
  min-width: 0 !important;
  max-height: none !important;
  height: 100dvh;
  height: 100vh;
  transform: translateX(100%);
  transition: transform 0.28s ease;
  background: var(--white);
  border: 0 !important;
  border-radius: 0 !important;
  /* Box-shadow only when open — previously on the base rule, which
     leaked a soft dark bleed on the right edge of every screen
     because the drawer sits at translateX(100%) off-canvas.
     Applied only in the [data-status="open"] state below. */
  box-shadow: none;
  opacity: 1 !important;
  padding: 0 !important;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  z-index: 50 !important;
  display: flex;
  flex-direction: column;
  gap: 0;
}
#appViewDropMenu[data-status="open"] {
  transform: translateX(0) !important;
  max-height: none !important;
  padding: 0 !important;
  opacity: 1 !important;
  box-shadow: -30px 0 60px rgba(22, 21, 15, 0.30);
}

/* Drawer header block (tactical black user info + X). */
.menuHeader {
  flex: 0 0 auto;
  background: var(--shell);
  color: var(--shellInk);
  padding: calc(env(safe-area-inset-top, 0px) + 26px) 20px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}
.menuHeaderCol {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.menuUserRole {
  font-family: var(--font-heading, "Barlow Condensed", sans-serif);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--accent);
}
.menuUserName {
  font-family: var(--font-heading, "Barlow Condensed", sans-serif);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--shellInk);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menuClose {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--shellInk);
  cursor: pointer;
  border-radius: 999px;
  padding: 0;
  flex-shrink: 0;
}
.menuClose:hover { background: rgba(244, 240, 232, 0.10); }
.menuClose svg   { width: 22px; height: 22px; display: block; }

/* Menu item rows — restore left/right padding since drawer has none. */
#appViewDropMenu > .menuItem {
  margin: 4px 10px;
  padding: 14px 12px;
  border-radius: 12px;
  background: var(--white);
  min-height: 52px;
}
/* First item gets a bit of top space to breathe after the header. */
#appViewDropMenu > .menuItem:first-of-type {
  margin-top: 10px;
}

/* Switch group in drawer context */
#appViewDropMenu > .menuSwitchGroup {
  padding: 0;
  margin: 8px 0 0;
}
#appViewDropMenu .menuSectionDivider {
  margin: 6px 20px 4px;
}
#appViewDropMenu .menuSectionTitle {
  padding: 4px 22px 4px;
}
#appViewDropMenu .menuSwitchTile {
  margin: 4px 14px 8px;
}

/* Log out button pinned near the drawer's end.
   2026-07-13 QA1 fix #2: bottom margin lifted so Log Out fully clears
   the centre +Trophy FAB. The FAB circle (64px tall) sits at top:-32px
   inside the 64-74px footer; effective vertical footprint is roughly
   ~100px above the viewport bottom. safe-area + 100px keeps Log Out
   fully tappable on notched + un-notched devices. */
#appViewDropMenu > .menuLogout {
  margin: 12px 20px calc(env(safe-area-inset-bottom, 0px) + 100px);
  padding: 14px 18px;
  background: transparent;
  color: var(--red);
  border: 1px solid rgba(229, 57, 53, 0.32);
  border-radius: 12px;
  font-family: var(--font-heading, "Barlow Condensed", sans-serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  flex: 0 0 auto;
  -webkit-tap-highlight-color: transparent;
}
#appViewDropMenu > .menuLogout:hover { background: rgba(229, 57, 53, 0.06); }
#appViewDropMenu > .menuLogout svg   { width: 18px; height: 18px; display: block; }

/* Ensure the drawer scrolls independently of the app. */
#appViewDropMenu::-webkit-scrollbar { width: 4px; }
#appViewDropMenu::-webkit-scrollbar-thumb {
  background: rgba(22, 21, 15, 0.18);
  border-radius: 4px;
}

/* 2026-07-13 nav restructure: role gate. openCloseMenu('open') sets
   data-user-role on the drawer from sessionStorage.userType; HO-only
   items are hidden when the role is PH. */
#appViewDropMenu[data-user-role="ph"] .menuItem--hoOnly { display: none !important; }

/* 2026-07-13 nav restructure: bottom-nav footer role gate.
   GlobalUtils.showUser sets data-user-role on #mainMenu on login and on
   the PH/HO switch. Remaining cells auto-redistribute via the
   gAsTable's display:table-cell.
     PH footer: Home · [+Trophy FAB] · Trophies              (3 cells visible)
     HO footer: Home · Clients · [+Trophy FAB] · Hunts · Concessions (5 cells)
*/
#mainMenu[data-user-role="ph"] .menuCell--hoOnly { display: none !important; }
#mainMenu[data-user-role="ho"] .menuCell--phOnly { display: none !important; }

/* Deleted state */
.searchItem.is-deleted {
  opacity: 0.6;
  background: #fdf0f0;
}

.searchItem.is-deleted .searchItem-head,
.searchItem.is-deleted .searchItem-sub {
  color: var(--red);
}
.searchItem-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-left: 8px;
}

.searchItem-actions .action-icon {
  width: 18px;                 /* icon size inside */
  height: 18px;
  padding: 8px;                /* creates circle around it */
  border-radius: 50%;
  background: var(--cream);
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.2s, background 0.2s, transform 0.1s;
}

.searchItem-actions .action-icon:hover {
  opacity: 1;
  background: var(--accent);
  transform: scale(1.05);
}
.huntItem {
  background: var(--white);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 10px 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Header */
.huntHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.huntName {
  font-size: 16px;
  font-weight: 600;
  color: var(--black);
}
.huntState {
  font-size: 12px;
  color: var(--white);
  padding: 2px 8px;
  border-radius: 10px;
}

/* Dates */
.huntDates {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--darkGrey);
}
.huntDates .date {
  font-weight: 500;
}
.huntDates .icoArrow {
  width: 14px;
  height: auto;
  opacity: 0.6;
}

/* Participants */
.huntPeople {
  border-top: 1px solid var(--lightGrey);
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.peopleRow {
  display: flex;
  align-items: center;
  gap: 8px;
}
.iconCircle {
  width: 24px;
  height: 24px;
  background: var(--cream);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.iconCircle img {
  width: 14px;
  height: 14px;
}
.peopleText {
  font-size: 13px;
  color: var(--darkGrey);
}
.peopleText .label {
  font-weight: 600;
  margin-right: 4px;
  color: var(--black);
}
.huntPeopleGrid {
  border-top: 1px solid var(--lightGrey);
  padding-top: 8px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.peopleCol {
  flex: 1;
}

.colTitle {
  font-size: 12px;
  font-weight: 600;
  color: var(--black);
  margin-bottom: 4px;
  border-bottom: 1px solid var(--lightGrey);
  padding-bottom: 2px;
}

.peopleList {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
  color: var(--darkGrey);
}

.peopleList li {
  margin-bottom: 2px;
}
.huntMonthHeading {
  font-size: 14px;
  font-weight: 600;
  color: var(--black);
  padding: 8px 4px;
  border-bottom: 2px solid var(--accent);
  background: var(--cream);
}
.huntColorCircle {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-right: 6px;
  border: 1px solid var(--grey); /* outline for visibility */
  vertical-align: middle;
}










/* ===== Modern Button System (HC) ===== */

/* Container tweak: gives nice breathing room on mobile */
/* Align login/CTA buttons with inputs */
.gFullFrmBtnBox {
  width: 100%;
  margin: 6px 0 16px; /* same vertical rhythm as inputs */
  padding: 0; /* let .gFullFrm’s side padding define the edges */
  text-align: initial; /* prevents centering when button is not 100% */
}

.gFullFrmBtnBox > button {
  display: block;
  width: 100%; /* <-- key: match input width */
  box-sizing: border-box; /* <-- key: match input sizing model */
  margin: 16px 0 0 0;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12); /* kill default button margins */
}

/* Optional: keep all form controls visually aligned */
.gFullFrmInput,
.gFullFrmBtnBox > button {
  border-radius: 14px; /* consistent corners */
}

/* Base */
.hc-btn {
  /* sizing */
  --hc-btn-h: 52px;
  --hc-btn-r: 14px;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--hc-btn-h);
  padding: 0 18px;

  /* typography */
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.2px;

  /* visuals (defaults overridden per variant) */
  border-radius: var(--hc-btn-r);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  /* motion */
  transition: box-shadow 0.2s ease, transform 0.06s ease, filter 0.15s ease,
    background-position 0.2s ease;
}

/* Primary = Blaze orange, white label */
.hc-btn--primary {
  color: #ffffff;
  background: linear-gradient(180deg, var(--accent), var(--accentDark));
  border-color: rgba(0, 0, 0, 0.10);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 8px 20px var(--accentGlow); /* blaze glow */
}

/* Hover/Focus/Active states */
.hc-btn--primary:hover {
  filter: brightness(1.04);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 10px 24px rgba(255, 90, 31, 0.45);
}

.hc-btn--primary:active,
.hc-btn.gBtnPress:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16) inset,
    0 6px 14px rgba(255, 90, 31, 0.32);
}

/* Keyboard focus ring — crisp, accessible */
.hc-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--accentGlow),
    0 8px 20px rgba(255, 90, 31, 0.35);
}

/* Disabled */
.hc-btn:disabled,
.hc-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
  filter: grayscale(0.1);
}

/* Optional "loading" state: toggle via JS -> btn.setAttribute('aria-busy','true') */
.hc-btn[aria-busy="true"] {
  color: transparent !important;
  pointer-events: none;
}
.hc-btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-top-color: var(--black);
  animation: hc-spin 0.8s linear infinite;
}
@keyframes hc-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Text links under the form (Create/Forgot) -> make them feel intentional */
.lblCreate {
  display: block;
  margin: 10px 20px 0;
  color: var(--blue);
  font-weight: 600;
  text-align: center;
}
.lblCreate u {
  text-underline-offset: 3px;
}

/* Remember row alignment tidy-up */
.lblRemember {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 20px 0;
  color: var(--darkBrown);
  font-size: 14px;
}
.lblRemember .chkRemember {
  width: 18px;
  height: 18px;
  accent-color: var(--green);
}

/* Light/Dark surface compatibility (future-proof) */
@media (prefers-color-scheme: dark) {
  .hc-btn--primary {
    /* slightly stronger shadow on dark */
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset,
      0 10px 26px rgba(255, 90, 31, 0.48);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hc-btn {
    transition: none;
  }
  .hc-btn[aria-busy="true"]::after {
    animation: none;
  }
}

/*FORM LOGIN*/
#frmLogin {
  /* 2026-08-23: max-width was 400px here, which beat .gFullFrm.authFrm's
     shared 480px on specificity (id vs classes). Above a 400px viewport the
     login form centred at 400px and .gFullFrm.authFrm's `overflow: hidden`
     clipped the hero's bleed, so login alone showed cream margins either side
     while the other four ran edge-to-edge. Removed so all five share 480px. */
  text-align: center;
  overflow-y: auto;
  overflow-x: hidden;
}
#frmLogin .lblCreate {
  color: var(--black);
  font-size: 18px;
  display: block;
  margin-top: 15px;
  
}

#frmLogin .passwordCon{
  position: relative; /* so the eye can sit inside */
}
#frmLogin .showPass{
  /* 2026-08-23: was right:16px / top:calc(50% + 5px). This id-specificity rule
     beat the shared .authFrm .authEye (top:50%; right:10px), so the login eye
     sat 5px below the input's centre line and 6px further from the edge than
     registration's two eyes. Aligned to match them exactly. Position only —
     behaviour untouched. */
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; /* comfy tap target */
  height: 36px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  outline: none;
  appearance: none;
  color: var(--darkBrown); /* subtle brand tone */
  opacity: 0.8;
  transition: opacity 0.15s ease, transform 0.06s ease, color 0.15s ease;
  cursor: pointer;
  line-height: 0; /* prevents baseline wobble */
  touch-action: manipulation; /* better mobile taps */
}
/* Login: Remember me */
#frmLogin .lblRemember {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  color: var(--darkBrown);
  font-size: 0.95rem;
  cursor: pointer; /* hele label klikbaar */
  user-select: none;
}

#frmLogin .lblRemember .chkRemember {
  width: 18px;
  height: 18px;
  accent-color: var(--accent); /* brand kleur */
  flex: 0 0 auto;
  transform: translateY(0.5px); /* bietjie baseline align */
}

/* opsioneel: bietjie hover feedback op desktop */
@media (hover: hover) {
  #frmLogin .lblRemember:hover {
    filter: brightness(0.98);
  }
}

.gWizBtnBox {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  flex-flow: row;
  align-items: center;
}
.gWizBtnBox .btnSave {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  height: 100%;
  flex-grow: 1;
  background-color: var(--green);
}
.gWizBtnBox .btnDelete {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  margin: 20px 0;
  height: 100%;
  width: 50%;
  background-color: var(--red);
}

.gFullFrmBtnBox {
  width: 100%;
  margin-top: 5px;
  margin-bottom: 15px;
  position: relative;
  user-select: none;
  text-align: center;
}
.gTblSearch {
  width: calc(100% - 40px);
  margin: 0 auto;
  border-radius: 5px;
  border: none;
}
.gTblSearch tr {
  height: 50px;
  cursor: pointer;
  border-radius: 10px;
  box-sizing: border-box;
}
.gTblSearch tr:active {
  /* Subtle blaze tint on white — matches .searchItem--v2 press feedback.
     The row wraps a .searchItem card so this only shows for the sliver
     around the card edge; either way, no more full-orange flash
     (softened 2026-07-06 tapfix). */
  background-color: color-mix(in srgb, var(--accent) 8%, var(--white));
}
.gTblSearch td:nth-child(1) {
  padding-left: 10px;
}
.gTblSearch td {
  border: none;
  padding: 10px;
  box-sizing: border-box;
}

.gAsTable {
  margin: 0;
  padding: 0;
  border: 0;
  display: table;
  width: 100%;
  height: 100%;
}
.gAsRow {
  display: table-row;
}
.gAsCell {
  display: table-cell;
  box-sizing: border-box;
}
.gMask {
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
  display: none;
  position: absolute;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  text-align: center;
}
.gLoader {
  position: fixed;
  border: 16px solid var(--cream);
  border-radius: 50%;
  border-top: 16px solid var(--green);
  border-bottom: 16px solid var(--green);
  width: 60px;
  height: 60px;
  top: calc(50% - 10px);
  left: calc(50% - 10px);
  margin-left: -30px;
  margin-top: -30px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


/* ===== TagList card style — v2 "Modern List" (2026-07-14) =====
   Header row: logo + company/PH name + ticket pill on the right.
   Body: species headline + client sub-line.
   Parts: chip row below a hairline. */
.tagItem {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid #e8e2d4;
  border-radius: 12px;
  box-shadow: none;
  margin: 0 0 8px;
  transition: background-color 0.15s ease, transform 0.06s ease;
}
.tagItem:active {
  background: color-mix(in srgb, var(--accent) 8%, var(--white));
  transform: none;
}

.tagHead {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tagLogo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--cream);
  flex-shrink: 0;
}

.tagComp {
  flex: 1;
  min-width: 0;
  font-family: "Barlow Condensed", var(--font-heading, sans-serif);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--black);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tagTicket {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: "Barlow Condensed", var(--font-heading, sans-serif);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  color: var(--white);
  background: var(--accent);
  padding: 5px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.tagTicket .tagTicketHash {
  opacity: 0.7;
  font-weight: 600;
  margin-right: 1px;
}

.tagBody {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tagSpecie {
  font-family: "Barlow Condensed", var(--font-heading, sans-serif);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
  color: var(--black);
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tagClient {
  font-size: 13px;
  font-weight: 500;
  color: var(--darkBrown);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tagClient .tagClientLabel {
  color: var(--grey);
  font-weight: 500;
  margin-right: 2px;
}

.tagParts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--lightGrey);
}
.tagChip {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--black);
  background: color-mix(in srgb, var(--accent) 10%, var(--white));
  padding: 3px 8px;
  border-radius: 6px;
  line-height: 1.3;
  white-space: nowrap;
}

.tagItem.is-deleted {
  opacity: 0.6;
  border-left: 4px solid var(--red);
}
/* Date group header */


.tagDateRow td{
  position: sticky;
  top: 0;
  background: var(--cream);
  color: var(--black);
  font-weight: 600;
  font-size: 14px;
  padding: 6px 10px;
  z-index: 4;
  box-shadow: 0 5px 0 var(--cream);
}
.tagDateRow tr{
  background: var(--cream);
  border: none;
}


.gFullFrmBtnBox .btnSave {
  height: 50px;
  width: 250px;
  background-color: var(--green);
  border-radius: 5px;
  color: var(--cream);
  font-size: 20px;
  margin-left: 10px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
  margin: 0 auto;
}
.gMarginB {
  margin-bottom: 5px;
}
.gMarginR {
  margin-right: 5px;
}
.gMarginL {
  margin-left: 5px;
}
.gAlignL {
  text-align: left;
}
.gAlignR {
  text-align: right;
}
.gAlignC {
  text-align: center;
}
.gPointer {
  cursor: pointer;
}
.gDisplayNone {
  display: none;
}

.gBtnLocker {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 1;
  backdrop-filter: blur(1px);
}

.gjs_textareaCon {
  position: relative;
  width: calc(100% - 20px);
  padding-left: 10px;
  margin: 0;
  padding: 0;
}
.gjs_textareaCon textarea {
  resize: none;
  overflow: hidden;
  width: 100%;
  background-color: var(--white);
  box-sizing: border-box;
  min-height: 30px;
  border: var(--darkBlue) solid 1px;
  border-radius: 3px;
  padding: 7.5px;
}
.gjs_textareaCon span {
  position: absolute;
  right: 10px;
  top: 2px;
  color: black;
  font-size: 8px;
}

.appViewCon {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  position: fixed;
  background-color: var(--cream);
  z-index: 1;
  display: none;
}
/* Full-screen overlay container for full forms */
.fullViewCon {
  position: fixed;
  inset: 0; /* shorthand: top/right/bottom/left = 0 */
  height: 100dvh; /* mobile-safe viewport height */
  width: 100%;
  display: none; /* hidden until a full form opens */
  background: var(--cream); /* match brand bg */
  z-index: 2; /* above #appViewCon (z-index:1) */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch; /* momentum scroll on iOS */
  overscroll-behavior: contain; /* stop bounce chaining */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
    calc(env(safe-area-inset-bottom) + 12px) env(safe-area-inset-left);
  scroll-behavior: smooth;
}

/* (Optional) subtle fade when opening */
.fullViewCon.is-open {
  display: block;
  animation: fullViewFade 0.18s ease-out;
}
@keyframes fullViewFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* (Optional) brand scrollbars where supported */
.fullViewCon::-webkit-scrollbar {
  width: 8px;
}
.fullViewCon::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 10px;
}
.fullViewCon::-webkit-scrollbar-track {
  background: var(--cream);
}

/* ---------- INLINE VALIDATION TOOLTIP — 2026-07-07 brand refresh ----------
   Mockup: mockups/notification-redesign.html (.tooltip)
   Behaviour unchanged: anchored under the field, auto-dismisses ~4s,
   non-blocking. Look: tactical-black bubble, cream text, small ▲ arrow.
--------------------------------------------------------------------------- */
#toolTip {
  position: absolute;
  z-index: 5;
  display: none;
  background: var(--shell);
  color: var(--cream);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  padding: 7px 11px;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  max-width: 90vw;
  width: max-content;
  opacity: 1;
  transform: translateY(-2px);
  transition: opacity 0.5s ease, transform 0.2s ease;
  margin-top: 6px; /* leaves room for the arrow above the bubble */
  animation: toolTipIn 0.2s ease;
}
#toolTip::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 16px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--shell);
}
@keyframes toolTipIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(-2px);
  }
}
/* ---------- MODAL DIALOG — 2026-07-07 brand refresh ----------
   Mockup: mockups/notification-redesign.html
   Design language:
     • Tactical-black grain header strip carrying icon-tile + Barlow title
     • Cream body carrying message + stacked full-width pill buttons
     • Primary = blaze (positive) or red (destructive via .is-destructive)
     • Green NEVER on a button — only in the success check icon
--------------------------------------------------------------- */
.infoBox {
  position: fixed;
  inset: 0;
  display: none; /* toggled by JS */
  z-index: 9999;
  /* The mask already comes from createMask(); #infoBox only holds the card */
  pointer-events: none;
}

.infoBox-card {
  pointer-events: auto;
  width: min(320px, 92vw);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--cream);
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  animation: infoBoxPop 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

@keyframes infoBoxPop {
  from {
    transform: translate(-50%, calc(-50% + 8px)) scale(0.98);
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

.infoBox-header {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 20px 22px 16px;
  color: var(--cream);
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.035) 0 2px,
      transparent 2px 7px
    ),
    var(--shell);
}

.infoBox-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.infoBox-icon svg {
  width: 21px;
  height: 21px;
}

.infoBox-titles {
  min-width: 0;
  flex: 1;
}

.infoBox-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--cream);
  line-height: 1.15;
  margin: 0;
}

.infoBox-sub {
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 400;
  color: rgba(244, 240, 232, 0.6);
  margin: 2px 0 0;
  line-height: 1.35;
}
.infoBox-sub:empty {
  display: none;
}

.infoBox-body {
  padding: 18px 22px 12px;
}
/* Collapse the body when both msg and extra are empty (e.g. a plain
   "Saved" modal that only uses the header + sub) so we don't leave
   a phantom padding gap between header and buttons. */
.infoBox-body:has(> .infoBox-msg:empty):not(
    :has(> .infoBox-extra:not(:empty))
  ) {
  display: none;
}
.infoBox.is-success .infoBox-actions,
.infoBox.is-deleted .infoBox-actions {
  padding-top: 16px;
}

.infoBox-msg {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  color: #3f3a30;
  margin: 0;
}
.infoBox-msg:empty {
  display: none;
}

.infoBox-extra {
  margin-top: 12px;
}
.infoBox-extra:empty {
  display: none;
}

.infoBox-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 22px 22px;
  background: none;
}

.infoBox-btn {
  appearance: none;
  border: none;
  border-radius: 999px;
  padding: 14px;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 14.5px;
  letter-spacing: 0.3px;
  line-height: 1;
  cursor: pointer;
  width: 100%;
  transition: filter 0.15s, transform 0.05s;
}
.infoBox-btn:active {
  transform: scale(0.98);
}
.infoBox-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.infoBox-btn.primary {
  background: var(--accent);
  color: #fff;
}
.infoBox-btn.primary:hover {
  filter: brightness(1.05);
}

/* Destructive variant — red primary on delete/discard/close-with-loss */
.infoBox.is-destructive .infoBox-btn.primary {
  background: var(--red);
  color: #fff;
}

.infoBox-btn.ghost {
  background: transparent;
  color: var(--black);
  border: 2px solid rgba(22, 21, 15, 0.28);
}
.infoBox-btn.ghost:hover {
  background: rgba(22, 21, 15, 0.04);
}

/* Type accents — tint the icon tile per severity */
.infoBox.is-error .infoBox-icon,
.infoBox.is-destructive .infoBox-icon {
  background: rgba(229, 57, 53, 0.22);
}
.infoBox.is-success .infoBox-icon {
  background: rgba(46, 125, 50, 0.22);
}
.infoBox.is-warning .infoBox-icon {
  background: rgba(235, 166, 63, 0.22);
}
.infoBox.is-info .infoBox-icon {
  background: rgba(255, 90, 31, 0.22);
}

/* ---------- TOAST — 2026-07-07 brand refresh ----------
   Mockup: mockups/notification-redesign.html
   Slides down from the top, holds ~2.5s, slides up + fades out.
   Non-blocking, no buttons. Stacks vertically if several fire.
   Sits above the header via z-index; safe-area-inset aware.
--------------------------------------------------------- */
#toastWrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  background: var(--shell);
  color: var(--cream);
  border-radius: 14px;
  padding: 13px 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
  transform: translateY(-140%);
  opacity: 0;
  transition: transform 0.38s cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity 0.3s;
  border-left: 4px solid var(--green);
  pointer-events: auto;
}
.toast.show {
  transform: translateY(0);
  opacity: 1;
}
.toast.is-info {
  border-left-color: var(--accent);
}
.toast.is-warn {
  border-left-color: var(--yellow);
}

.toast-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(46, 125, 50, 0.18);
}
.toast-icon svg {
  width: 17px;
  height: 17px;
}
.toast.is-info .toast-icon {
  background: rgba(255, 90, 31, 0.2);
}
.toast.is-warn .toast-icon {
  background: rgba(235, 166, 63, 0.22);
}

.toast-text {
  min-width: 0;
  flex: 1;
}
.toast-text b {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.3px;
  display: block;
  text-transform: uppercase;
  line-height: 1.15;
}
.toast-text span {
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: rgba(244, 240, 232, 0.75);
  line-height: 1.35;
}

#placesBox {
  position: absolute;
  display: none;
  z-index: 3;
  background-color: white;
  border: 1px solid var(--green);
}
#placesBox td {
  border-bottom: 1px solid var(--green);
  height: 25px;
  cursor: pointer;
  width: 100%;
  padding-left: 5px;
}

/*HEADER*/
/* HEADER – modern polish */
.mainHeader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 12px;
  background: var(--shell);
  color: var(--shellInk);
  border-bottom: 1px solid color-mix(in srgb, var(--shellInk), transparent 92%);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  z-index: 5;
}
.mainHeader .gAsRow {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mainHeader .col1 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 0;
  background: transparent;
  color: var(--shellInk);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, transform 0.06s ease,
    opacity 0.15s ease;
}
.icon-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.icon-btn:active {
  transform: translateY(1px);
}
.icon-btn .icon-close {
  display: none;
}
.icon-btn.is-open .icon-hamburger {
  display: none;
}
.icon-btn.is-open .icon-close {
  display: block;
}

/* Notification state (existing class) */
.mainHeader.notiFi .icon-btn {
  color: var(--cream);
}

/* ===== PH / HO TOGGLE (keeps your IDs & left-based JS) ===== */
.switchBoxCon {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  margin: 0 11px;
}

/* Labels smaller & crisper */
.switchLbl {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  color: var(--shellInk);
  height: auto;
  display: flex;
  align-items: center;
  margin: 0;
  letter-spacing: 0.2px;
  user-select: none;
}

/* Track */
#mainHSwitchCon {
  position: relative;
  width: 60px;
  height: 32px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--shellInk), transparent 78%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) inset,
    0 2px 6px rgba(0, 0, 0, 0.20);
  cursor: pointer;
  transition: filter 0.2s ease, background-color 0.2s ease;
}

/* Knob (your #mainHSwitch) — JS still moves it with `left` */
#mainHSwitch.switch {
  box-sizing: border-box;
  position: relative; /* los soos jou JS verwag */
  top: 2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cream);
  border: 2px solid var(--black);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--black), transparent 85%);
  transition: left 0.28s ease, transform 0.06s ease, box-shadow 0.2s ease;
}
#mainHSwitchCon:active #mainHSwitch {
  transform: scale(0.98);
}

/* Optional “on” tint for track when HO is active:
   If your JS adds inline `left:30px` for HO, also toggle a helper class if you want:
   document.getElementById('mainHSwitchCon').classList.toggle('is-on', isHO);
   If you don't add the class, the toggle still works; this is purely cosmetic. */
#mainHSwitchCon.is-on {
  background: var(--green);
}

/* Focus ring for accessibility when you tab to the track */
#mainHSwitchCon:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Alert theme parity */
.mainHeader.notiFi .switchLbl {
  color: var(--cream);
}
.mainHeader.notiFi #mainHSwitchCon {
  background: color-mix(in srgb, var(--cream) 25%, var(--red));
}
.mainHeader.notiFi #mainHSwitch {
  border-color: var(--cream);
}


/* ===== Dropdown menus ===== */
/* === Shared styles for BOTH dropdowns (hamburger + settings) === */

.mainDropDown > .menuItem {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-radius: 10px;
  background: var(--white);
  cursor: pointer;
  user-select: none;
  outline: none;
  border: 1px solid transparent; /* space for focus ring */
  transition: background-color 0.15s ease, transform 0.06s ease, box-shadow 0.15s ease;
}
.mainDropDown > .menuItem:active {
  transform: translateY(1px);
}
.mainDropDown > .menuItem:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent), transparent 70%);
}

/* Icon chip – identical in both menus */
.mainDropDown .menuIcon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--black); /* svg inherits via currentColor */
  box-shadow: 0 1px 2px color-mix(in srgb, var(--black), transparent 90%);
}
.mainDropDown .menuIcon svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* Hover parity for chip + row */
@media (hover: hover) {
  .mainDropDown > .menuItem:hover {
    background: color-mix(in srgb, var(--cream) 70%, var(--white));
  }
  .mainDropDown > .menuItem:hover .menuIcon {
    background: color-mix(in srgb, var(--accent) 22%, var(--cream));
  }
}

/* Labels – identical bold look */
.mainDropDown .menuLabel {
  font-weight: 700;
  color: var(--black);
  letter-spacing: 0.2px;
}

/* OLD "Hamburger Dropdown" block removed 2026-07-06 — its
   `z-index: 5` was beating the new drawer's `z-index: 50` because
   both lacked !important, so the drawer sat under the scrim and the
   in-drawer X + menu items were unclickable. The slide-in drawer
   styling now lives in one place: the "Drawer transform" block
   earlier in this file (search for that comment). */


/* DropMenu Headers (Settings / Contacts) */
.mainDropDown > header {
  display: flex;
  align-items: center;
  justify-content: space-between;   /* titel links, close regs */
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 10px 14px;
  color: var(--darkBrown);
  background: var(--cream);
  border-bottom: 1px solid var(--lightGrey);
  border-radius: 8px 8px 0 0;
}

.mainDropDown .dropMenuTitle {
  flex: 1;
}

.mainDropDown .dropMenuClose {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  line-height: 0;
  border-radius: 50%;
  transition: background 0.2s ease;
}

.mainDropDown .dropMenuClose:hover {
  background: var(--lightGrey);
}


/* === Profile Settings Drop-up (appSettingDropMenu) === */
#appSettingDropMenu {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--white);
  border-top: 1px solid var(--lightGrey);
  box-shadow: 0 -10px 24px color-mix(in srgb, var(--black), transparent 88%);
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  max-height: 0; /* animated via [data-status] */
  opacity: 0;
  transform: translateY(6px);
  transition: max-height 0.35s ease, opacity 0.2s ease, transform 0.2s ease, padding 0.2s ease;
  z-index: 200; /* above content, below infobox */
}
#appSettingDropMenu[data-status="open"] {
  max-height: 420px;
  opacity: 1;
  transform: translateY(0);
  padding: 8px 8px 80px; /* ekstra onderruimte vir safe-area */
}

/* Logout highlight */
#appSettingDropMenu .logOut {
  color: var(--red);
  font-weight: 700;
}

/* Contacts dropdown inherits your .mainDropDown styles */
#appContactDropMenu {
  /* usually handled by .mainDropDown; keep empty unless you need overrides */
}

/* Optional: ensure basic open/close if your global CSS doesn’t already */
#appContactDropMenu[data-status="close"] { display: none; }
#appContactDropMenu[data-status="open"]  { display: block; }

/* === Contacts Drop-up (appContactDropMenu) === */
/* === Contacts Drop-up (appContactDropMenu) === */
#appContactDropMenu {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--white);
  border-top: 1px solid var(--lightGrey);
  box-shadow: 0 -10px 24px color-mix(in srgb, var(--black), transparent 88%);
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  max-height: 0; /* animated via [data-status] */
  opacity: 0;
  transform: translateY(6px);
  transition: max-height 0.35s ease,
              opacity 0.2s ease,
              transform 0.2s ease,
              padding 0.2s ease;
  z-index: 200; /* selfde layer as settings */
}

#appContactDropMenu[data-status="open"] {
  max-height: 420px;
  opacity: 1;
  transform: translateY(0);
  padding: 8px 8px 80px; /* ekstra onderruimte vir safe-area */
}





/* Items (inherits .menuItem). Add only if you want spacing tweaks here */
#appContactDropMenu .menuItem {
  /* padding, gap, etc. are likely already defined globally */
}




/* ---------- BILLING BANNER — 2026-07-07 brand refresh ----------
   Mockup: mockups/notification-redesign.html (.gbanner / .gbanner.amber)
   Persistent strip inside the header. Red for trial-ending / payment
   overdue (urgent); amber for card expiring (softer heads-up). The DOM
   node keeps its role="status" + aria-live="polite" (in index.html).
   The parent .notiFi class stays as the "banner is shown" marker —
   other header rules (icon-btn, switch, etc.) already react to it.
--------------------------------------------------------------- */
.notifiBox {
  position: relative;
  display: none; /* revealed by .mainHeader.notiFi below */
  padding: 8px 12px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.2px;
  line-height: 1.4;
}
.mainHeader.notiFi .notifiBox {
  display: block;
}
.notifiBox.is-red {
  background: var(--red);
  color: #fff;
}
.notifiBox.is-amber {
  background: var(--yellow);
  color: #4a3410;
}
.notifiBox.is-red a {
  color: #fff;
  text-decoration: underline;
  font-style: italic;
}
.notifiBox.is-amber a {
  color: #4a3410;
  text-decoration: underline;
  font-style: italic;
}

/*FORM CONTAINER*/
#frmCon {
  position: fixed;
  top: 65px;
  max-height: calc(100% - 115px);
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}

/*MAIN MENU*/
/* Main Menu Base */
.mainMenu {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 64px;
  background: var(--cream); /* softer background */
  border-top: 1px solid rgba(0,0,0,0.1);
  z-index: 1000;
}

.mainMenu .gAsTable {
  max-width: 800px;
  margin: 0 auto;
}

.mainMenu .gAsCell {
  width: 20%;
  text-align: center;
  vertical-align: middle;
}

.menuBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 64px;
  cursor: pointer;
  transition: transform 0.15s ease, color 0.15s ease;
}

.menuBtn svg {
  stroke: var(--darkBrown);
  fill: none;
  width: 26px;
  height: 26px;
  transition: all 0.2s ease;
}

/* Active state (common) — scoped :not(.fab) so it never recolours the
   FAB icon (the FAB is always blaze; its own .menuBtn.fab svg rule
   further up sets the white stroke). */
.menuBtn.active:not(.fab) svg {
  fill: var(--accent);
  stroke: var(--accent);
}

/* Tap feedback */
.menuBtn:active {
  transform: scale(0.92);
}

/* Normal/Active icons (raster fallback for tabs that use <img>) */
.menuBtn img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* NOTE 2026-07-06 (viii-fab-fix) — the previous duplicate
   .menuBtn.fab / .menuBtn.fab svg / #mainMenuAddBtn / #mainMenuAddBtn svg
   / #mainMenuAddLbl block that used to live here was DELETED. It set
   `#mainMenuAddBtn svg { background: var(--accent); border-radius: 50%;
   padding: 12px }` — giving the icon its own orange circle inside the
   button's orange circle (the two-tone artefact) — and pushed the FAB
   up 50px instead of 32px. The single authoritative FAB block now lives
   at ~lines 1252–1301 in the "Center FAB — elevate + white ring"
   section further up. Do NOT re-add rules for these selectors below
   that section; if you need to tweak the FAB, tweak that block. */




/* FORM PROFILE */

#frmProfile .profileImgCon{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#frmProfile .photoFile {
  display: none;
}

#frmProfile .frmProfileImg {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column nowrap;
  gap: 12px;
  width: 100%;
}

/* Wrapper controls size; lets button overlap outside the mask */
#frmProfile .avatarWrap {
  position: relative;
  margin: 0 auto;
  width: clamp(120px, 38vw, 220px);
  aspect-ratio: 1 / 1;
}

/* Circular masked image holder */
#frmProfile .photoCon {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden; /* only the image is clipped */
  background: radial-gradient(
    circle at 30% 30%,
    var(--cream, #f5eee0),
    var(--lightBrown, #efe7da)
  );
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08),
    inset 0 0 0 2px var(--white, #fcfcfc);
}

/* The image fills the circle; transform handles pan/zoom */
#frmProfile .photoCon .photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* Floating action button that overlaps the avatar edge */
#frmProfile .avatarEditBtn {
  position: absolute;
  right: 0;
  bottom: 0;
  transform: translate(1%, 1%); /* <-- adjust this */
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  outline: none;
  cursor: pointer;
  z-index: 3;
  transition: transform 0.15s ease, filter 0.15s ease;
}

#frmProfile .avatarEditBtn:focus-visible,
#frmProfile .avatarEditBtn:hover {
  transform: translate(1%, 1%) scale(0.98);
}
#frmProfile .avatarEditBtn:active {
  transform: translate(1%, 1%) scale(0.98);
}

/* Icon (SVG via background-image) */
#frmProfile .avatarEditBtn::before {
  content: "";
  width: 22px;
  height: 22px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: none; /* icons are colored themselves */
}

/* States: background colors + icons */
#frmProfile .avatarEditBtn.state-upload {
  background: var(--accent, #ff5a1f);
}
#frmProfile .avatarEditBtn.state-upload::before {
  background-image: url("../img/iconUpload.svg");
}

#frmProfile .avatarEditBtn.state-save {
  background: var(--green, #2e7d32);
}
#frmProfile .avatarEditBtn.state-save::before {
  background-image: url("../img/iconSave.svg");
}

#frmProfile .avatarEditBtn.state-delete {
  background: var(--red, #e53935);
}
#frmProfile .avatarEditBtn.state-delete::before {
  background-image: url("../img/iconDelete.svg");
}

/* Optional: when editing (pinch/zoom active), tint the ring slightly */
#frmProfile .frmProfileImg.is-cropping .photoCon {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1),
    inset 0 0 0 2px var(--accent, #ff5a1f);
}

/* HODetails – Company Logo block */
#frmHODetails .frmHOLogo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 12px 0 4px;
}

/* Wrapper controls size; lets button overlap outside the mask */
#frmHODetails .avatarWrap {
  position: relative;
  width: clamp(120px, 34vw, 200px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

/* Circular masked image holder */
#frmHODetails .logoCon {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden; /* only the image is clipped */
  background: radial-gradient(
    circle at 30% 30%,
    var(--cream, #f5eee0),
    var(--lightBrown, #efe7da)
  );
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08),
    inset 0 0 0 2px var(--white, #fcfcfc);
}

/* The image fills the circle; transform handles pan/zoom */
#frmHODetails .logoCon .logoImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* Floating action button that overlaps the avatar edge */
#frmHODetails .avatarEditBtn {
  position: absolute;
  right: 0;
  bottom: 0;
  transform: translate(1%, 1%); /* adjust overlap here (e.g. 25–35%) */
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  outline: none;
  cursor: pointer;
  z-index: 3;
  transition: transform 0.15s ease, filter 0.15s ease;
}
#frmHODetails .avatarEditBtn:focus-visible,
#frmHODetails .avatarEditBtn:hover {
  transform: translate(1%, 1%) scale(0.98);
}
#frmHODetails .avatarEditBtn:active {
  transform: translate(1%, 1%) scale(0.98);
}

/* Icon (SVG via background-image) */
#frmHODetails .avatarEditBtn::before {
  content: "";
  width: 22px;
  height: 22px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* States: background colors + icons (note ../ if your CSS is in /css/) */
#frmHODetails .avatarEditBtn.state-upload {
  background: var(--accent, #ff5a1f);
}
#frmHODetails .avatarEditBtn.state-upload::before {
  background-image: url("../img/iconUpload.svg");
}

#frmHODetails .avatarEditBtn.state-save {
  background: var(--green, #2e7d32);
}
#frmHODetails .avatarEditBtn.state-save::before {
  background-image: url("../img/iconSave.svg");
}

#frmHODetails .avatarEditBtn.state-delete {
  background: var(--red, #e53935);
}
#frmHODetails .avatarEditBtn.state-delete::before {
  background-image: url("../img/iconDelete.svg");
}

/* Optional: subtle edit tint */
#frmHODetails.is-cropping .logoCon {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1),
    inset 0 0 0 2px var(--accent, #ff5a1f);
}

/*FORM PAY FUNNEL*/
#frmPayFunnel {
  font-size: 14px;
  position: relative;
  padding-top: 20px;
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  max-width: 500px;
  display: none;
  margin: 0 auto;
}
#frmPayFunnel .conPanel {
  padding: 10px;
  padding-bottom: 20px;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 50px;
  background-color: var(--cream);
  border-radius: 15px;
  width: 90%;
  display: none;
}
#frmPayFunnel #frmPayFTrailCon {
  height: 500px;
}
#frmPayFunnel #frmPayFUpSaleCon {
  height: 300px;
  font-size: 18px;
}

#frmPayFunnel .redTxt {
  color: var(--red);
}
#frmPayFunnel .greenTxt {
  color: var(--green);
}
#frmPayFunnel .bold {
  font-family: var(--font-ui);
}
#frmPayFunnel .standOut {
  font-size: 1.1em;
}
#frmPayFunnel .bigText {
  font-size: 180%;
}
#frmPayFunnel .btnSave {
  width: 80%;
  background-color: var(--green);
  border-radius: 5px;
  color: var(--cream);
  text-align: center;
  cursor: pointer;
  margin: 0 auto;
  padding-top: 10px;
  padding-bottom: 10px;
}
#frmPayFunnel .btnSave label {
  display: block;
}
#frmPayFunnel .btnSave .secondLine {
  font-weight: none;
}
#frmPayFunnel .header {
  font-family: var(--font-ui);
  font-size: 1.3em;
}
#frmPayFunnel .packageCon {
  text-align: left;
  margin-left: 20px;
}
#frmPayFunnel .package {
  display: block;
  margin-bottom: 10px;
  font-size: 1.2em;
}
#frmPayFunnel .disabled {
  color: lightGray;
}
#frmPayFunnel .inputCon {
  text-align: left;
  margin-bottom: 20px;
}

/* FORM PEACH*/
#frmPeach {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#frmPeach .gFrmHeader {
  margin-bottom: 0px;
}
#frmPeach .frmCon {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  height: 85vh;
  padding: 10px;
  box-sizing: border-box;
}
#frmPeach .iFrameCon {
  position: relative;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}
#frmPeach iframe {
  height: 100%;
  width: 100%;
  padding: 3px;
  overflow-y: auto;
}

/*FORM PROFILE*/

#frmProPassCon {
  overflow-y: hidden;
  margin-bottom: 60px;
}

/* FORM LICENSES */
#frmLicenses {
}
#frmLicenses .photoSection {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}
#frmLicenses .photoSection .photoCon {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  position: relative;
}

#frmLicenses .photoCon .delPhoto {
  position: absolute;
  top: -5px;
  right: -5px;
  height: 30px;
  width: 30px;
}
#frmLicenses .photoCon .licPhoto {
  max-height: 300px;
  max-width: 80%;
}

#frmLicenses .photoSection .js_btnPhoto {
  height: 50px;
  width: 50px;
}

/*FORM SETTINGS*/

/*FORM DASHBOARD*/
#frmDashboard .offBtnCon {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  background-color: white;
  border: 2px solid var(--green);
  margin: 20px 20px 10px 20px;
  border-radius: 7px;
  padding: 15px 30px;
}
#frmDashboard .dashHeader {
  width: 100%;
  text-align: center;
  padding: 20px 20px 0 20px;
  font-size: 30px;
  font-weight: bold;
  box-sizing: border-box;
}
#frmDashboard .offConHead {
  text-align: center;
  font-size: 110%;
  font-weight: bold;
  margin-bottom: 12px;
}
#frmDashboard .offInfoCon {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  width: 100%;
}
#frmDashboard .offInfoCon span {
  margin-bottom: 5px;
}
#frmDashboard .offBtn {
  margin-top: 10px;
  padding: 5px 10px;
  background-color: var(--green);
  color: white;
  border-radius: 7px;
}
#frmDashboard .frmCaption {
  font-size: 13px;
  margin: 10px;
  text-align: center;
  font-weight: bold;
  color: #666;
}

#frmDashboard .dashSetupCon {
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
}
#frmDashboard .dashStepCon {
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  background-color: var(--white);
  border-radius: 5px;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  margin-bottom: 10px;
}
#frmDashboard .dashSetupHead {
  display: flex;
  flex-flow: column nowrap;
  font-size: 130%;
  font-weight: bold;
  align-items: center;
  width: 100%;
  margin: 20px 0;
}
#frmDashboard .dashSetupMessage {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
}
#frmDashboard .dashStepHead {
  font-size: 110%;
  width: 100%;
  box-sizing: border-box;
  font-weight: bold;
  margin-bottom: 5px;
}
#frmDashboard .dashStepInfo {
  font-size: 90%;
  width: 100%;
  box-sizing: border-box;
}
#frmDashboard .dashStepBtn {
  font-size: 90%;
  padding: 5px 8px;
  color: var(--cream);
  border-radius: 5px;
  box-sizing: border-box;
  background-color: var(--accent);
  margin-top: 20px;
}
#frmDashboard .dashStepDone {
  font-size: 110%;
  font-weight: bold;
  color: var(--green);
  box-sizing: border-box;
  margin-top: 20px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}
#frmDashboard .dashStepDone img {
  margin-left: 10px;
  width: 30px;
}

#frmDashboard .dashNotisCon {
  display: flex;
  flex-flow: column nowrap;
}

#frmDashboard .dashNotiCon {
  margin: 20px 20px 0 20px;
  background-color: var(--lightRed);
  border: var(--red) solid 2px;
  border-radius: 7px;
  padding: 20px;
  display: flex;
  flex-flow: column nowrap;
  box-sizing: border-box;
}
#frmDashboard .dashNotiCon img {
  width: 30px;
  height: 30px;
  margin-right: 20px;
}
#frmDashboard .dashNotiHead {
  color: var(--cream);
  width: 100%;
  font-weight: bold;
  font-size: 110%;
  box-sizing: border-box;
  margin-bottom: 5px;
}
#frmDashboard .dashNotiMessage {
  color: var(--cream);
  width: 100%;
  box-sizing: border-box;
}
#frmDashboard .dashNotiBtnCon {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-around;
  margin-top: 20px;
}
#frmDashboard .dashNotiBtn {
  padding: 5px 8px;
  border-radius: 5px;
  color: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--cream);
  border: var(--red) 2px solid;
  margin-left: 8px;
  cursor: pointer;
}

#frmDashBChartsCon {
  width: 100%;
  flex-flow: column nowrap;
  align-items: center;
}
#frmDashBChartsCon .frmDashChart1 {
  width: 100%;
  margin-top: 30px;
}
#frmDashBChartsCon .frmDashChart {
  width: 80%;
  padding: 20px;
  border-radius: 7px;
  background-color: var(--white);
  margin-top: 30px;
}

#frmDashboard .grpStatsCon {
  margin: 4vw 4vw;
  border-radius: 7px;
  background-color: white;
  padding: 4vw 4vw;
}
#frmDashboard .grpStatsCon h3 {
  margin-bottom: 2vw;
  color: var(--darkBrown);
}
#frmDashboard .grpStatsCon h6 {
  margin: 2px 0 2px 0;
}
#frmDashboard .progressBar {
  display: flex;
  align-items: center;
  border-radius: 5px;
  margin-bottom: 2vw;
  width: 100%;
}
#frmDashboard .progressBar span {
  background-color: green;
  color: white;
  padding: 5px 0 5px 2vw;
  position: relative;
  border-radius: 7px;
  transition: width 1s;
}

#frmDashLblHunted {
  width: 100%;
  font-size: 14px;
  font-weight: bold;
  display: block;
  text-align: left;
  color: var(--green);
}
#frmDashLblGoal {
  font-size: 14px;
  color: var(--red);
  font-weight: bold;
  text-align: right;
  display: block;
  width: 100%;
}
#frmDashGoal {
  position: relative;
  height: 10px;
  background-color: var(--red);
  width: 100%;
  display: block;
}
#frmDashGoalDone {
  position: relative;
  height: 10px;
  background-color: var(--green);
}
#frmDashboard .chartCon {
  width: 80%;
  padding: 20px;
  border-radius: 7px;
  background-color: var(--white);
  margin-top: 30px;
}
#frmDashboard .perMonthCanvas {
}
#frmDashChartSpecies {
}

/*FORM DASH FEED*/
#frmDashFeedCon {
  display: flex;
  flex-flow: column nowrap;
  box-sizing: border-box;
  width: 100%;
}
#frmDashFeedCon .feedItemCon {
  background-color: var(--white);
  display: flex;
  flex-flow: column nowrap;
  box-sizing: border-box;
  width: 90%;
  margin: auto;
  border-radius: 7px;
  margin-top: 20px;
}
#frmDashFeedCon .postHead {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  height: 50px;
  margin: 10px 10px 5px 10px;
}
#frmDashFeedCon .postProfilePic {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
#frmDashFeedCon .postNamesCon {
  flex-grow: 1;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-around;
  padding: 0 5px;
  height: 100%;
}
#frmDashFeedCon .postPHName {
  color: var(--black);
  font-size: 16px;
  font-weight: bold;
}
#frmDashFeedCon .postHOName {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
}
#frmDashFeedCon .postHOName img {
  width: 14px;
  height: auto;
}
#frmDashFeedCon .postHOName span {
  font-size: 14px;
}
#frmDashFeedCon .postMedal {
  height: 30px;
}
#frmDashFeedCon .postPhoto {
  width: 100%;
}
#frmDashFeedCon .postInfo {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-around;
  height: 40px;
  margin: 10px 5px;
  width: 100%;
}
#frmDashFeedCon .postInfoSec {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: 20%;
}
#frmDashFeedCon .postSecTop {
  color: var(--black);
  font-size: 20px;
  font-weight: bold;
  height: 20px;
  display: flex;
  align-items: center;
}
#frmDashFeedCon .postInfoSec span {
  font-size: 14px;
}
#frmDashFeedCon .postInfoSec img {
  width: 20px;
}
#frmDashFeedCon .postActions {
  width: 100%;
  height: 40px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-around;
}
#frmDashFeedCon .postActCon {
  width: 30%;
  height: 30px;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
}
#frmDashFeedCon .postActImg {
  width: 20px;
}
#frmDashFeedCon .postActCon span {
  margin-left: 3px;
}

.showMore {
  width: 100%;
  text-align: center;
  margin: 20px 0 60px 0;
}
.showMore span {
  background-color: var(--black);
  color: var(--cream);
  border-radius: 7px;
  padding: 5px 8px;
}

/*FORM HO COMPANY DETAILS*/

/*FORM CONTACTS*/
#frmContacts .ulContacts {
  list-style: none;
  margin: 0;
  border: 0;
  padding: 0;
  text-align: center;
  width: 100%;
}
#frmContacts .ulContacts li {
  margin: 0 auto;
  display: block;
  margin-top: 20px;
  background-color: var(--green);
  color: white;
  font-family: var(--font-ui);
  font-size: 24px;
  height: 70px;
  width: 80%;
  border-radius: 5px;
  line-height: 70px;
  font-weight: bolder;
  cursor: pointer;
}

/*FORM CREATE HUNT*/

/* FORM MESURE */
#frmMeasure .frmMeasureCon {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  width: 100%;
}
#frmMeasure .gFrmHeader {
  margin: 0;
}
#frmMeasure .frmMeasureSec {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  width: 80%;
}
#frmMeasure .frmMeasureSec img {
  margin: 10px 0;
}
#frmMeasure .frmMeasureSecItems {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  padding: 10px;
  margin: 5px 0;
  width: 100%;
  border-radius: 7px;
  border: 2px solid var(--black);
}

#frmMeasure .frmMeasureSecItems h2 {
  margin: 0 0 10px 0;
  font-family: var(--font-ui);
  font-weight: bold;
  font-size: 100%;
  width: 100%;
  text-align: left;
}
#frmMeasure .frmMeasureSecItems .gFrmInput {
  margin: 0;
  width: 100px;
}
#frmMeasure .frmMeasureSecItems .gFrmLabel {
  margin: 0;
  font-size: 80%;
}
#frmMeasure .frmMeasureSecItem {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  width: 100%;
}

/* FORM WEIGHT MESURE */
#frmMeasureWeight {
  width: 90%;
}
#frmMeasureWeight .frmMeasureSec {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}
#frmMeasureWeight .frmMeasureWeightCon {
  width: 100%;
  border-bottom: 1px solid var(--black);
  margin: 0 0 10px 0;
  padding: 0 0 10px 0;
}
#frmMeasureWeight .frmMeasureWeightCon h2 {
  margin: 20px 0 10px 0;
  font-family: var(--font-ui);
  font-weight: bold;
  font-size: 110%;
  width: 100%;
  text-align: left;
}
#frmMeasureWeight .frmMeasureWeightCon .purchaser {
  margin: 0;
  width: 100%;
  font-size: 80%;
}
#frmMeasureWeight .frmMeasureWeightCon .weight {
  margin: 0;
  width: 45%;
  font-size: 80%;
}
#frmMeasureWeight .frmMeasureWeightCon .price {
  margin: 0;
  width: 35%;
  font-size: 80%;
}
#frmMeasureWeight .frmMeasureWeightCon .gFrmInput {
  margin: 0;
  width: 100%;
}
#frmMeasureWeight .frmMeasureWeightlogBtn {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: var(--green);
  border-radius: 7px;
  padding: 10px 0;
  margin: 20px 0 10px 0;
  color: white;
}
#frmMeasureWeight .frmMeasureWeightInfo {
  display: flex;
  position: relative;
  flex-flow: row nowrap;
  justify-content: space-between;
  width: 100%;
  margin-top: 10px;
}
#frmMeasureWeight .weightTbl {
  border: none;
  width: 100%;
}
#frmMeasureWeight .weightTbl tr {
  border: none;
  padding: 10px 0px 10px 0px;
  border-bottom: solid 8px var(--cream);
  border-radius: 7px;
  background-color: white;
}
#frmMeasureWeight .weightTbl td {
  border: none;

  font-size: 60%;
}
#frmMeasureWeight .weightTbl img {
  width: 30px;
  height: 30px;
}
#frmMeasureWeight .weightTbl td:nth-child(1) {
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
}

#frmMeasureWeight .weightTbl td:nth-child(4) {
  width: 40px;
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
  text-align: center;
}
#frmMeasureWeight .btnSave {
  margin-left: -110px;
}

#frmHunt .gTblSearch div {
  display: inline-block;
  position: relative;
  top: -2px;
  margin-right: 10px;
  text-align: center;
  border-radius: 50%;
  background-color: var(--red);
  color: var(--cream);
  font-size: 16px;
  font-weight: bold;
  line-height: 30px;
  width: 30px;
  height: 30px;
}
#frmHunt .frmHuntInpLbl {
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px;
  margin-bottom: 20px;
}
#frmHunt .datesCon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-flow: row nowrap;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  margin-bottom: 30px;
}
#frmHunt .dateCon {
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
  width: 48%;
  box-sizing: border-box;
}
#frmHunt .frmHuntInput {
  height: 40px;
  border-radius: 5px;
  width: 100%;
  font-size: 18px;
  border: none;
  background-color: white;
  box-sizing: border-box;
  margin-top: 5px;
  padding: 0 10px;
  font-family: var(--font-ui);
}
#frmHunt .addBtn {
  width: 30px;
  height: 30px;
}
#frmHunt .gTblSearch .icoCell {
  width: 45px;
  text-align: center;
}
#frmHunt .icoCell img {
  width: 30px;
  height: 30px;
}
#frmHunt .frmHuntLbl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex-flow: row nowrap;
  font-size: 20px;
  font-weight: bold;
}
#frmHunt .addClient {
  margin: 15px 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
#frmHunt .addPH {
  margin: 15px 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
#frmHunt .addHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 20px 4px 0px;            /* same side padding as inputs */
  margin: 20px 0 10px;          /* spacing above/below */
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;              /* same as .gFrmSubHeader */
  color: var(--black);
  border-bottom: 1px solid var(--lightGrey);
}

#frmHunt .addHeader .addHeadName {
  flex: 1;
  line-height: 1.4;
}

#frmHunt .addHeader .addHeadBtn {
  flex-shrink: 0;
  margin-left: 12px;
}
/* Container */
#frmHunt .gHuntColorCon {
  padding: 0 20px 0 0;
  margin: 20px 0;
  box-sizing: border-box;
}

/* Row of colors */
#frmHunt .gHuntColorCon .colorOptionsRow {
  display: flex;
  flex-wrap: wrap;           /* wrap neatly on small screens */
  gap: 12px;
  margin-top: 12px;
  padding: 0 0 0 20px;
}

/* Each color circle */
#frmHunt .gHuntColorCon .colorOption {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;     /* default: clean */
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

/* Hover & focus */
#frmHunt .gHuntColorCon .colorOption:hover {
  transform: scale(1.28);
  border-color: var(--white);
}

/* Active / selected state */
#frmHunt .gHuntColorCon .colorOption.selected {
  border-color: var(--white);
  box-shadow: 0 0 0 3px rgba(255,90,31,0.3);
  transform: scale(1.1);
}





/*FORM TROPHY WIZARD*/
#frmWizard {
  max-width: 500px;
  background-color: var(--cream);
  height: calc(100% - 60px);
  overflow-y: auto;
}

#frmWizard .frmWizHeader {
  width: 100%;
  text-align: left;
  color: var(--black);
  background-color: var(--cream);
  position: sticky;
  top: 0px;
  border-bottom: 1px solid var(--black);
  margin-bottom: 20px;
  padding-top: 20px;
}
#frmWizard .headImgCon {
  display: flex;
  align-items: center;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
}
#frmWizard .headBackIcon {
  height: 30px;
}
#frmWizard .headCloseIcon {
  height: 30px;
}
/* .headDesc + .headQ base rules deleted 2026-07-06 (x-wizard-tokens) —
   fully superseded by the tactical-black rules further down (search
   `#frmWizard .headDesc {` and `#frmWizard .headQ {`). */

#frmWizard .btnContinue {
  display: flex;
  align-items: center;              /* vertical centering */
  justify-content: center;          /* horizontal centering */
  position: relative;

  width: 200px;
  height: 50px;
  margin: 50px auto 0;              /* center on page + top space */

  background-color: var(--green);
  color: var(--cream);

  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.3px;
  text-align: center;

  border: none;
  border-radius: 14px;              /* smoother corners */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: transform 0.12s ease, opacity 0.12s ease, box-shadow 0.15s ease;
}

/* Tap feedback (mobile) */
#frmWizard .btnContinue:active {
  transform: scale(0.97);
  opacity: 0.9;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}


#frmWizSCon {
  position: relative;
  width: 100%;
  text-align: center;
}
#frmWizard .searchInput {
  border: solid 1px var(--accent);
  border-radius: 7px;
  height: 50px;
  position: relative;
  font-size: 18px;
  background-color: white;
  width: calc(100% - 30px);
  display: inline-block;
  box-sizing: border-box;
  padding: 0 8px;
  margin-bottom: 20px;
}
/* .searchTable base rule deleted 2026-07-06 (x-wizard-tokens) — every
   property was superseded by the later polish rules; type properties
   moved to .wizPickRow tokens. Keep border-collapse: separate on the
   surviving `.searchTable` rule so row cards keep their gap. */
#frmWizard .searchTable {
  border-collapse: separate;
}
#frmWizard .searchTable td {
  text-align: left;
  color: var(--black);
  transition: transform 0.12s ease, box-shadow 0.18s ease;
}





/* .wizHuntName + .wizSpanLine + .wizContactIcon + .wizDateLine +
   .wizCalanderRowS/E + .wizDateS/E + .wizDateS/E p + .wizCalanderIcon
   deleted 2026-07-06 (x-wizard-tokens) — the old active-PH-hunt rich-card
   render is gone (replaced by .wizHuntRow → now .wizPickRow). No JS
   emits these class names any more; verified via grep before deletion. */


/* .wizHuntNameP + .wizSpanLineP + .wizDateSP/EP + .wizDateLineP deleted
   2026-07-06 (x-wizard-tokens) — same reason as the sibling active-hunt
   rich-card rules above: JS no longer emits these classes. */



/* .clientIcon + .clientName base rules deleted 2026-07-06 (x-wizard-tokens)
   — `.clientIcon` removed entirely (icon injection is gone from the JS);
   `.clientName` styling handled by .wizPickRow__title going forward. */


/* ───── Farm (Concessions) styling ───── */
#frmWizard .farmCell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#frmWizard .farmLine {
  display: flex;
  align-items: center;
  gap: 8px;
}

#frmWizard .farmIcon {
  width: 25px;
  height: 25px;
  margin-right: 8px;
  vertical-align: middle;
}

/* .farmName + .ownerName base rules deleted 2026-07-06 (x-wizard-tokens)
   — farm rows now render as .wizPickRow with title + sub. */

/* ---------- Fix Date & Time layout in Wizard ---------- */
/* 🟩 Main container centered both horizontally & vertically */
#frmWizard #frmWizDateCon {
  display: flex;
  flex-direction: column;

  width: 100%;
  max-width: 400px;
  max-height: 400px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

/* .wizLabel + .wizInput base rules + hover/focus deleted 2026-07-06
   (x-wizard-tokens) — the older centered/orange design is fully
   superseded by the later field-card rules further down. */

/* Picker icons */
#frmWizard input[type="date"]::-webkit-calendar-picker-indicator,
#frmWizard input[type="time"]::-webkit-calendar-picker-indicator {
  filter: opacity(0.7);
  cursor: pointer;
  transition: filter 0.2s ease;
}

#frmWizard input[type="date"]:hover::-webkit-calendar-picker-indicator,
#frmWizard input[type="time"]:hover::-webkit-calendar-picker-indicator {
  filter: brightness(1.1) saturate(1.2);
}

/* Focus-within label effect */
#frmWizard .wizLabel:focus-within {
  color: var(--green);
  transform: translateY(-2px);
}

/* 🟢 Responsive layout */
@media (max-width: 420px) {
  #frmWizard #frmWizDateCon {
    height: calc(100vh - 120px);
    gap: 24px;
    padding: 0 12px;
  }
  /* .wizInput { max-width: 260px } dead — new .wizInput has max-width:none */
}

















#frmWizard .searchTable td .multiLine {
  font-weight: normal;
  font-size: 70%;
  display: block;
}
/* .searchTable .rowSelected base (solid blaze fill) deleted 2026-07-06
   (x-wizard-tokens) — superseded by the tint+outline rule further down.
   Note: the unrelated `.searchTable .wizSwitch .rowSelected` at ~L4659
   stays (that's for the quote wizard's switch step, different context). */
#frmWizard .searchTable .wizSwitch {
  display: inline-block;
  border-radius: 20px;
  background-color: var(--black);
  position: relative;
  width: 50px;
  height: 25px;
  top: 3px;
  float: right;
  margin-right: 10px;
}
#frmWizard .searchTable .wizSwitch div {
  background-color: var(--cream);
  border-radius: 50%;
  width: 25px;
  height: 25px;
  top: -3px;
  position: relative;
  -webkit-transition: left 0.5s;
  -moz-transition: left 0.5s;
  -o-transition: left 0.5s;
  transition: left 0.5s;
  border: solid 2px var(--black);
}
#frmWizard .searchTable .wizSwitch .rowSelected {
  background-color: pink;
}
#frmWizard .viewTbl td{
  display: flex;
  flex-flow: column;
  height: 30px;
  border-bottom: none;
  vertical-align: top;
  background-color: var(--white);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  border-radius: 14px;
}
#frmWizard .viewTbl td:nth-child(1) {
  display: flex;
  flex-flow: row;
  font-family: var(--font-ui);
  align-items: center;
  text-align: right;
  font-weight: normal;
  padding: 0;
  padding-right: 5px;
  box-sizing: border-box;
  color: var(--accent);
  background-color: none;
}
#frmWizard .viewTbl td:nth-child(2) {
  border-bottom: none;
  font-family: var(--font-heading);
  font-weight: bold;
  padding-left: 5px;
  box-sizing: border-box;
  text-align: left;
  color: var(--black);
  padding-left: 10px;
  background-color: none;
}




/* ───────── View Card Container ───────── */
#frmWizard .wizViewRow {
  background-color: var(--white);
  border: 1.5px solid var(--black);
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  padding: 14px 16px;
  margin: 10px auto;
  width: 90%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

/* subtle lift on hover/tap */
#frmWizard .wizViewRow:active,
#frmWizard .wizViewRow:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}

/* ───────── Header (Label) ───────── */
#frmWizard .wizViewHead {
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 4px;
}

/* ───────── Description (Value) ───────── */
#frmWizard .wizViewDesc {
  color: var(--black);
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  padding-left: 4px;
  line-height: 1.3;
}












#frmWizard .tblsCon {
  max-height: 100%;
}
#frmWizard #frmWizTbl2 td {
  border: none;
}
#frmWizard .viewTblQuote {
  display: none;
  background-color: var(--cream);
  width: calc(100% - 20px);
  margin-left: 10px;
  border: none;
  border-top: solid 3px var(--green);
  border-bottom: solid 3px var(--green);
}
#frmWizard .viewTblQuote td:nth-child(1) {
  text-align: left;
  padding-bottom: 3px;
}
#frmWizard .viewTblQuote td:nth-child(2) {
  width: 50px;
  text-align: center;
  padding-bottom: 3px;
}
#frmWizard .viewTblQuote td:nth-child(3) {
  width: 80px;
  text-align: center;
  padding-bottom: 3px;
}
#frmWizard .viewTblQuote .colHeader {
  font-weight: bolder;
}
#frmWizard .viewTblQuote .itemHeader {
  height: 35px;
  font-style: italic;
  vertical-align: bottom;
}
#frmWizard .viewTblQuote .item {
  font-weight: bold;
}
#frmWizard #frmWizTbl2 .qty {
  width: 95%;
  text-align: center;
}
#frmWizard #frmWizTbl2 .price {
  width: 95%;
  text-align: right;
}
#frmWizard #frmWizTbl2 .totalRow {
  font-weight: bold;
}
#frmWizard #frmWizTbl2 .totalRow .lblTotal {
  float: left;
}
#frmWizard #frmWizTbl2 .totalRow .lblPrice {
  float: right;
}



#frmWizard .dateCon {
  text-align: center;
  margin-top: 10px;
}
#frmWizard .dateCon label {
  margin-top: 10px;
  display: block;
}
#frmWizard .dateCon input {
  width: 200px;
  margin: 0 auto;
  display: block;
  margin-top: 10px;
}
#frmWizard .btnNextCon {
  width: 100%;
  position: relative;
  height: 70px;
  text-align: right;
}
#frmWizard .nextBtn,
#frmWizard .btnSave {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  margin: none !important;

  height: 64px;
  background: linear-gradient(135deg, var(--green) 0%, #4fa86b 100%);
  color: var(--cream);
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.5px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: none;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.2);

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.18s ease;
  padding-bottom: env(safe-area-inset-bottom); /* iPhone safe area */
}

#frmWizPartsCon {
  width: 100%;
  flex-flow: column nowrap;
  align-items: center;
}
#frmWizPartsBtnCon {
  display: flex;
  flex-flow: row wrap;
  gap: 20px;
  max-width: 310px;
}
/* .partsBtn + .partSelected base rules deleted 2026-07-06 (x-wizard-tokens)
   — old 90×40 pill with solid-blaze selected. Superseded by the .wizChip
   / .partsBtn shared-class rules further down. */
#frmWizPartsCon .otherDesc {
  margin: 0 auto;
  width: 300px;
  margin-top: 20px;
  display: none;
  color: var(--black);
  font-size: 16px;
  font-family: var(--font-ui);
  padding: 10px;
}






#frmWizKill {
  display: none;
}
#frmWizKill div {
  margin: 0 auto;
  width: 150px;
  height: 40px;
  line-height: 35px;
  margin-top: 50px;
  color: var(--cream);
  text-align: center;
  border-radius: 5px;
}
#frmWizKill .dead {
  background-color: var(--green);
}
#frmWizKill .wounded {
  background-color: var(--red);
}

#frmWizCountCon {
  margin-top: 20px;
}
#frmWizCountCon img {
  height: 50px;
  width: 50px;
  vertical-align: center;
}
#frmWizCountCon .counterCell {
  font-size: 80px;
}



#frmWizPhotoCon{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#frmWizPhoto {
  margin: 0 auto;
  max-height: 355px;
  max-width: 355px;
  margin-bottom: 15px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
  border-radius: 14px;
}
#frmWizNoPhotoCon {
  text-align: center;
  display: none;
  width: 250px;
  height: 200px;
  border: 2px dashed var(--grey);
  margin: 20px 0;
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}
#frmWizNoPhotoCon p {
  font-family: var(--font-ui);
}
#frmWizNoPhotoCon .emptyIcon {
  width: 50px;
  height: 50px;
  margin-bottom: 15px;
}

#frmWizBtnAddBPhoto {
  display: flex;
  align-items: center;              /* vertical centering */
  justify-content: center;          /* horizontal centering */
  position: relative;

  width: 250px;
  height: 50px;            /* center on page + top space */

  background-color: var(--green);
  color: var(--cream);

  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.3px;
  text-align: center;

  border: none;
  border-radius: 14px;              /* smoother corners */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: transform 0.12s ease, opacity 0.12s ease, box-shadow 0.15s ease;
}

#frmWizBtnAddBPhoto label {
  color: var(--cream);
  position: relative;
 
}

#frmWizAddDPhotoCon div {
  display: flex;
  align-items: center;              /* vertical centering */
  justify-content: center;          /* horizontal centering */
  position: relative;

  width: 250px;
  height: 50px;            /* center on page + top space */

  background-color: var(--green);
  color: var(--cream);

  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.3px;
  text-align: center;

  border: none;
  border-radius: 14px;              /* smoother corners */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: transform 0.12s ease, opacity 0.12s ease, box-shadow 0.15s ease;
}

#frmWizQExtras {
  margin-top: 10px;
  display: none;
  text-align: left;
}

/*FORM VIEWS*/

#frmViews .viewDetails {
  background: var(--gradient);
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  color: var(--black);
  font-family: var(--font-ui);
  font-size: 24px;
  padding: 20px 20px 0 20px;
  border-bottom: 0.5px solid var(--grey);
}
#frmViews .tabCon {
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-evenly;
  display: flex;
  flex-flow: row nowrap;
  margin-top: 20px;
}
#frmViews .tabCon span {
  color: var(--black);
  padding-bottom: 5px;
  font-size: 70%;
}
#frmViews .tabCon span:hover {
  border-bottom: var(--green) 4px solid;
}
#frmViews .tabCon span.selected {
  border-bottom: var(--green) 4px solid;
}

#frmViews .copyUpdateLinkCon {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
#frmViews .copyLink {
  padding: 5px 7px;
  background-color: var(--green);
  border-radius: 5px;
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
#frmViews .copyLink img {
  width: 15px;
  margin-right: 3px;
}

#frmViews .viewDetBtnCon {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
#frmViewsHeaderDesc {
  margin: 10px 0;
  font-weight: bold;
  font-size: 26px;
}
#frmViews .viewDetails .btnBack {
  height: 30px;
}
#frmViews .viewDetails .btnEdit {
  font-size: 18px;
  color: var(--accent);
}

#frmViews .trophyHeader {
  background-color: var(--cream);
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  font-size: 24px;
  padding: 20px 20px;
  box-sizing: border-box;
}
#frmViews .trophyHeader .actionBtnsCon img {
  height: 30px;
  width: 30px;
}

#frmViews .tHeaderLbl {
  font-weight: bold;
}
#frmViews .tHeaderBtn {
  height: 30px;
}
#frmViews .trophyHeader .chkDelInc {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  height: 20px;
  width: 20px;
}
#frmViews .trophyHeader .chkDelIncLbl {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 14px;
  position: relative;

  left: -5px;
}
#frmViews .killDotRed {
  position: relative;
  font-size: 28px;
  top: 3px;
  color: red;
}
#frmViews .killDotGreen {
  position: relative;
  top: 3px;
  font-size: 28px;
  color: green;
}

#frmViews .frmViewNoteCon {
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
  background-color: var(--white);
  border-radius: 5px;
  box-sizing: border-box;
}
#frmViews .frmViewNoteTitle {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
  white-space: pre;
  box-sizing: border-box;
}
#frmViews .frmViewNoteDisc {
  font-size: 14px;
  display: inline-block;
  max-width: 100%;
  word-wrap: break-word;
}

#frmViews .licenseItem {
  box-sizing: border-box;
}
#frmViews .licenseItem .header {
  font-weight: bold;
}
#frmViews .licenseItem .dateCon {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  margin-top: 8px;
}
#frmViews .licenseItem .icoArrow {
  height: 15px;
}
#frmViews .licenseItem .dates {
  font-size: 14px;
  color: var(--grey);
}

#frmViews .infoTbl {
  width: 100%;
  border: none;
}
#frmViews .infoTbl tr {
}
#frmViews .infoTbl td {
  line-height: 1.5;
  font-size: 14px;
  font-family: var(--font-ui);
  border: none;
}
#frmViews .infoTbl tbody tr td:nth-child(1) {
  text-align: left;
  padding-right: 5px;
  width: 40%;
  vertical-align: top;
}
#frmViews .infoTbl tbody tr td:nth-child(2) {
  text-align: right;
  padding-left: 5px;
}

#frmViews .filterCon {
  margin-left: 10px;
  margin-top: 5px;
  margin-bottom: 0px;
  height: 0px;
  overflow: hidden;
  transition: height 0.5s;
}
#frmViews .filterCon .gAsTable {
  width: calc(100% - 8px);
}
#frmViews .filterCon .gFrmLabel {
  margin: 0px;
}
#frmViews .filterCon .gFrmInput {
  width: 95%;
  display: block;
  margin-left: 0px;
}

#frmViews .gTblSearch label {
  display: block;
  font-size: 14px;
}
#frmViews .gTblSearch label span {
  font-weight: bold;
}

#frmViews .gTblSearch .tblCellHeader {
  font-size: 20px;
  font-family: var(--font-ui);
  font-weight: bold;
  display: inline-block;
  margin-bottom: 5px;
}
#frmViews .gTblSearch .cellKill {
  position: relative;
  display: inline-block;
  height: 22px;
  width: 22px;
  margin-left: 5px;
  top: 3px;
  display: none;
}
#frmViews .gTblSearch .genderIcon {
  width: 14px;
  height: 14px;
  position: absolute;
  left: -20px;
  top: 2px;
}
#frmViews .gTblSearch .viewBtn {
  float: right;
  width: 60px;
  text-align: center;
  margin-right: 10px;
  background-color: var(--green);
  border-radius: 5px;
  height: 30px;
  line-height: 30px;
  color: white;
}
#frmViews .gTblSearch .imgBtn {
  width: 50px;
  height: 50px;
  margin-right: 5px;
}
.frmViewsTPhotoCon {
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px 50px 20px;
}
#frmViewsTPhoto {
  width: 100%;
}
#frmViews #frmViewsNoPhoto {
  text-align: center;
  display: none;
}

#frmViews #frmWizNoPhotoCon p {
  font-weight: bold;
}
#frmViews #frmWizNoPhotoCon .emptyIcon {
  width: 50px;
  height: 50px;
  margin-bottom: 15px;
}
#frmViews #frmViewsBtnAddPhoto {
  position: relative;
  height: 50px;
  width: 250px;
  border-radius: 5px;
  margin: 0 auto;
  background-color: var(--green);
  color: var(--cream);
  font-family: var(--font-ui);
  font-weight: bold;
  font-size: 24px;
  margin-top: 15px;
}
#frmViews #frmViewsBtnAddPhoto .addBtnIcon {
  height: 40px;
  position: relative;
  top: 5px;
}
#frmViews #frmViewsBtnAddPhoto label {
  color: var(--cream);
  position: relative;
  top: -7px;
}

/*FORM SEARCH*/

#frmViews .viewMeasureBtnCon {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  padding-right: 15px;
  box-sizing: border-box;
}
#frmViews .viewMeasureBtnCon .viewMeasureBtnTop {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  background-color: var(--green);
  color: white;
  padding: 5px;
  margin: 5px 0 5px 0;
  border-radius: 7px;
}
#frmViews .viewMeasureBtnCon .viewMeasureBtnBot {
  display: flex;
  flex-flow: column nowrap;
  align-items: right;
  background-color: var(--green);
  color: white;
  padding: 5px;
  margin: 5px 0 5px 0;
  border-radius: 7px;
}
#frmViews .viewMeasureBtnCon .btnTop {
  width: 45%;
  display: flex;
  flex-flow: column nowrap;
  align-items: right;
}
#frmViews .viewMeasureBtnCon .measureHead {
  font-size: 7px;
}
#frmViews .viewMeasureBtnCon .measureDis {
  font-size: 12px;
  font-weight: bold;
}

#frmSearch {
  width: 100%;
  height: 100%;
}

/* Maak frmSrcHeader dieselfde as gFrmHeader */
#frmSearch .frmSrcHeader {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  background: var(--gradient, var(--hdrGradient));
  color: var(--black);
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px 16px;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  margin-bottom: 16px; /* selfde spacing as gFrmHeader */
}

/* Verseker dat die headline layout ook consistent is */
#frmSearch .frmSrcHeader .gFrmHeadLine {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 52px;
}

/* Search form specifics already scoped to gFrmHeader — keep/reuse these */
#frmSearch .gFrmHeader .chkInclude {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  height: 20px;
  width: 20px;
}
#frmSearch .gFrmHeader .chkIncludeLbl {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 14px;
  position: relative;
  left: -5px;
}
#frmSearch .copyLink {
  padding: 5px 7px;
  background-color: var(--green);
  border-radius: 5px;
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
#frmSearch .copyLink img {
  width: 15px;
  margin-right: 3px;
}
#frmSearch .frmSrcTitleCon {
  display: contents; 
}
#frmSearch .frmSrcTitle {
  color: var(--black);
  text-align: left;
  font-weight: bold;
  font-size: 24px;
}
#frmSearch .frmSrcCheckCon {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-end;
}
#frmSearch .chkIncludeLbl {
  color: var(--black);
  font-size: 14px;
}
#frmSearch .gFrmHeader .chkInclude {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  height: 20px;
  width: 20px;
}
#frmSearch .gFrmHeader .chkIncludeLbl {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 14px;
  position: relative;
  left: -5px;
}

#frmSearch .gTblSearch .huntItem {
  box-sizing: border-box;
}
#frmSearch .gTblSearch .huntItem .huntHead {
  box-sizing: border-box;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
}
#frmSearch .huntItem .hoDetailsCon {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--grey);
}
#frmSearch .huntItem .logo {
  height: 40px;
  margin-right: 5px;
}
#frmSearch .huntItem .hoName {
}

#frmSearch .huntItem .huntName {
  font-weight: bold;
}
#frmSearch .huntItem .huntState {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-end;
  font-size: 60%;
  padding: 4px 6px;
  background-color: var(--accent);
  color: var(--white);
  border-radius: 3px;
}
#frmSearch .huntItem .huntDateCon {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  margin-top: 8px;
}
#frmSearch .huntItem .icoArrow {
  height: 15px;
}
#frmSearch .huntItem .dates {
  font-size: 14px;
  color: var(--grey);
}

#frmSearch .gTblSearch .icon {
  height: 30px;
}

#frmSearch .gTblSearch .licenseItem {
  box-sizing: border-box;
}
#frmSearch .gTblSearch .licenseItem .header {
  font-weight: bold;
}
#frmSearch .gTblSearch .licenseItem .dateCon {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  margin-top: 8px;
}

/* 2026-07-13 nav restructure: unified Licences list — type badge +
   "Current" chip. Rendered only in the "licences" case; older PH/HO
   single-type list cases are untouched. */
#frmSearch .gTblSearch .licenseItem .licHead {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
#frmSearch .gTblSearch .licenseItem .licTypeBadge {
  display: inline-block;
  font-family: var(--font-heading, "Barlow Condensed", sans-serif);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  line-height: 1.1;
}
#frmSearch .gTblSearch .licenseItem .licTypeBadge.is-ph {
  color: var(--accent, #ff5a1f);
  background: rgba(255, 90, 31, 0.10);
  border-color: rgba(255, 90, 31, 0.35);
}
#frmSearch .gTblSearch .licenseItem .licTypeBadge.is-ho {
  color: var(--shell, #16150f);
  background: rgba(22, 21, 15, 0.08);
  border-color: rgba(22, 21, 15, 0.24);
}
/* Status chip: shows "Current" (green) on the latest not-yet-expired
   row per userType, or "Expired" (red) on the latest expired row per
   userType. Older rows carry no chip (QA1 fix #5). */
#frmSearch .gTblSearch .licenseItem .licStatus {
  display: inline-block;
  font-family: var(--font-heading, "Barlow Condensed", sans-serif);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  color: #ffffff;
  line-height: 1.1;
}
#frmSearch .gTblSearch .licenseItem .licStatus.is-current {
  background: var(--green, #2e7d32);
}
#frmSearch .gTblSearch .licenseItem .licStatus.is-expired {
  background: var(--red, #e53935);
}
#frmSearch .gTblSearch .licenseItem .licStatus[hidden] { display: none; }
#frmSearch .gTblSearch .licenseItem .icoArrow {
  height: 15px;
}
#frmSearch .gTblSearch .licenseItem .dates {
  font-size: 14px;
  color: var(--grey);
}
#frmSearch .gTblSearch img {
  max-width: 30px;
  max-height: 30px;
}

#frmSearch .gTblSearch .doubleLine {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
}
#frmSearch .gTblSearch .doubleLine span:nth-child(1) {
  font-weight: bold;
}
#frmSearch .gTblSearch .doubleLine span:nth-child(2) {
  font-size: 14px;
  margin-top: 3px;
  color: var(--grey);
}

#frmSearch .searchLbl {
  font-family: var(--font-ui);
  font-weight: bold;
  font-size: 18px;
}

/* You already have these; leaving here for clarity. Keep as-is. */
#frmSearchSCon {
  width: 100%;
}
#frmSearchSCon .searchInput {
  height: 40px;
  border-radius: 5px;
  font-size: 18px;
  border: none;
  background-color: white;
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px;
}

#frmSearchEmptyTbl {
  display: none;
  flex-flow: column nowrap;
  align-items: center;
  padding: 30px;
}
#frmSearchEmptyMsg {
  font-weight: bold;
  text-align: center;
}
#frmSearchEmptyTbl .emptyIcon {
  width: 50px;
  height: 50px;
  margin-bottom: 15px;
}
/* Client Link — on-brand, slim, secondary-action card.
   Restyled from the loud blue banner to a tactical-black card with a
   subtle blaze-orange left border. It's a secondary action, not the
   main event — kept quieter than the black "Add {entity}" button.
   Every id / class / handler preserved so click behaviour is unchanged. */
.js_BtnClientLink {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  margin: 10px auto;
  background: #16150f;
  color: #f4f0e8;
  border: none;
  border-left: 3px solid #ff5a1f;
  border-radius: 10px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  min-height: 44px;
  box-shadow: 0 2px 4px rgba(22, 21, 15, 0.14);
  transition: background 0.15s;
}

.js_BtnClientLink:hover {
  background: #22201a;
}

.js_BtnClientLink:active {
  background: #22201a;
  transform: translateY(1px);
}

.js_BtnClientLink .btnIcon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff5a1f;
}

.js_BtnClientLink .btnText {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.js_BtnClientLink .btnHeadline {
  font-family: "Barlow Condensed", var(--font-heading, sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.15;
  color: #f4f0e8;
}

.js_BtnClientLink .btnSub {
  font-size: 11.5px;
  color: rgba(244, 240, 232, 0.72);
  line-height: 1.3;
  margin-top: 1px;
}

/* =============================================================
   Auth flow — Split Hero + medium diagonal grain
   Applied to: frmLogin, frmRegistration, frmForgotPass,
   frmOTPCode, frmResetPass (each carries the .authFrm class).

   Fit-to-viewport strategy:
     - .authFrm is a flex column pinned to 100dvh (with -webkit-fill-available
       and 100vh fallbacks) so it consumes the visible viewport exactly.
     - .authHero is `flex: 0 0 auto` — natural size, fluid via clamp().
     - .authBody is `flex: 1 1 auto; min-height: 0; overflow-y: auto` so
       the form + footer fill the remaining space and scroll GRACEFULLY
       only if content genuinely can't fit (small phones / landscape / A11Y
       text size). No scroll in the normal portrait keyboard-closed case.
     - Inputs are 16px so iOS won't auto-zoom on focus.
     - display: flex is forced with !important because showForm() sets
       inline display:block that would otherwise win the cascade.
   ============================================================= */

/* Base rule: layout properties only, NO display. Unshown auth forms
   inherit `display: none` from the base .gFullFrm rule so only the
   showForm()-activated form appears. */
.gFullFrm.authFrm {
  flex-direction: column;
  height: 100vh;                    /* legacy fallback */
  height: -webkit-fill-available;   /* iOS Safari — actual visible height */
  height: 100dvh;                   /* modern dynamic viewport */
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 480px;
  margin: 0 auto;
  padding: 0;
  text-align: left;
  background: var(--cream);
  box-sizing: border-box;
  overflow: hidden;                 /* internal scroll lives in .authBody */
  position: relative;
}

/* When showForm() marks a form active it sets inline `display: block`.
   Upgrade that to flex so the fit-to-viewport column takes effect on
   the active form only. Also match `display: flex` for future-proofing. */
.gFullFrm.authFrm[style*="display: block"],
.gFullFrm.authFrm[style*="display:block"],
.gFullFrm.authFrm[style*="display: flex"],
.gFullFrm.authFrm[style*="display:flex"] {
  display: flex !important;
}

/* Explicit closed state — belt-and-braces so a stale inline display:none
   is never overridden. Harmless duplicate of the base .gFullFrm rule. */
.gFullFrm.authFrm[style*="display: none"],
.gFullFrm.authFrm[style*="display:none"] {
  display: none !important;
}

.authFrm .authHero {
  flex: 0 0 auto;
  color: var(--shellInk);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding:
    calc(clamp(36px, 5vh, 60px) + env(safe-area-inset-top))
    clamp(22px, 6vw, 30px)
    clamp(14px, 2vh, 22px);
  position: relative;
  border-bottom: 4px solid var(--accent);
  background-color: var(--shell);
  background-image:
    radial-gradient(circle at 26% 30%, rgba(255, 90, 31, 0.14), transparent 55%),
    radial-gradient(ellipse at 70% 85%, rgba(0, 0, 0, 0.30), transparent 62%),
    url("data:image/png;base64,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");
  background-size: auto, auto, 630px 630px;
  background-repeat: no-repeat, no-repeat, repeat;
}

.authFrm .authHero--center {
  align-items: center;
  text-align: center;
}
.authFrm .authHero--center .authHeadlineRule {
  margin-left: auto;
  margin-right: auto;
}

.authFrm .authHero--compact {
  padding-top: calc(clamp(28px, 4.5vh, 46px) + env(safe-area-inset-top));
}

.authFrm .authHeroLogo {
  width: clamp(46px, 9.5vh, 76px);
  height: clamp(46px, 9.5vh, 76px);
  object-fit: contain;
  margin: 0 0 clamp(6px, 1.2vh, 12px) !important;
  animation: none;
  flex: 0 0 auto;
}
.authFrm .authHero--compact .authHeroLogo {
  width: clamp(40px, 7.5vh, 58px);
  height: clamp(40px, 7.5vh, 58px);
  margin-bottom: clamp(4px, 1vh, 10px) !important;
}

.authFrm .authHeadline {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(22px, 4.2vh, 32px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0;
  color: var(--shellInk);
  display: block;
}
.authFrm .authHeadline::after { display: none; }

.authFrm .authHeadlineRule {
  display: block;
  width: clamp(36px, 6vw, 46px);
  height: 3px;
  background: var(--accent);
  border-radius: 3px;
  margin: clamp(8px, 1.5vh, 14px) 0 clamp(8px, 1.4vh, 12px);
}

.authFrm .authSubtitle {
  font-family: var(--font-ui);
  font-size: clamp(13px, 1.9vh, 14px);
  line-height: 1.45;
  margin: 0;
  color: rgba(244, 240, 232, 0.72);
  max-width: 300px;
  font-weight: 400;
  display: block;
}

.authFrm .authBackBtn {
  /* 2026-08-23: was position:absolute with top/left, which overlapped the logo
     by 26-44px at every viewport (worst on short ones, where the hero compacts
     but the arrow does not move). Now the first in-flow child of the hero
     column, so it owns a clear band above the logo at every size and cannot
     collide. The -9px inset optically aligns the glyph with the headline's
     text edge, since the 22px icon is centred in a 40px tap target. */
  position: static;
  margin: 0 0 clamp(6px, 1.2vh, 12px) -9px;
  flex: 0 0 auto;
  align-self: flex-start;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--shellInk);
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: 50%;
  z-index: 2;
  transition: background-color 0.12s;
}
.authFrm .authBackBtn:hover {
  background: rgba(244, 240, 232, 0.10);
}
.authFrm .authBackBtn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.authFrm .authBackBtn svg {
  width: 22px;
  height: 22px;
  display: block;
}

.authFrm .authBody {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--cream);
  color: var(--black);
  padding:
    clamp(14px, 2.5vh, 24px)
    clamp(22px, 6vw, 30px)
    calc(env(safe-area-inset-bottom) + clamp(8px, 1.6vh, 14px));
  display: flex;
  flex-direction: column;
  gap: 0;
  box-sizing: border-box;
}
/* Slim, brand-friendly scrollbar when the fallback scroll appears */
.authFrm .authBody::-webkit-scrollbar { width: 4px; }
.authFrm .authBody::-webkit-scrollbar-thumb {
  background: rgba(22, 21, 15, 0.18);
  border-radius: 4px;
}

.authFrm .authField {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.8vh, 6px);
  margin-bottom: clamp(8px, 1.6vh, 14px);
  flex: 0 0 auto;
}

.authFrm .authFieldLabel {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5a564c;
}

.authFrm .authInputWrap {
  position: relative;
}

.authFrm .authInput,
.authFrm .gFullFrmInput.authInput {
  width: 100%;
  height: clamp(46px, 6.2vh, 52px);
  min-height: clamp(46px, 6.2vh, 52px);
  padding: 0 16px;
  border-radius: 14px;
  font-family: var(--font-ui);
  font-size: 16px;                  /* ≥16px so iOS doesn't zoom on focus */
  color: var(--black);
  background: var(--white);
  border: 1px solid #d4ccb8;
  outline: none;
  box-shadow: none;
  transition: border-color 0.12s, box-shadow 0.12s;
  box-sizing: border-box;
  margin: 0;
}
.authFrm .authInput::placeholder {
  color: #8a8574;
}
.authFrm .authInput:focus,
.authFrm .gFullFrmInput.authInput:focus,
.authFrm .authInput:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.14);
}
.authFrm .authInput--eye {
  padding-right: 48px;
}

.authFrm .passwordCon {
  position: relative;
}

.authFrm .authEye,
.authFrm .showPass.js_BtnPassEye.authEye,
.authFrm .js_PassEye.authEye {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #5a564c;
  cursor: pointer;
  border-radius: 999px;
  padding: 0;
  z-index: 1;
}
.authFrm .authEye:hover {
  background: rgba(22, 21, 15, 0.05);
  color: var(--black);
}
.authFrm .authEye:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.authFrm .authEye svg {
  width: 20px;
  height: 20px;
  display: block;
}

.authFrm .authRemember {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: clamp(2px, 0.6vh, 6px) 0 clamp(6px, 1.2vh, 12px);
  cursor: pointer;
  user-select: none;
  color: var(--black);
  font-size: 14px;
  flex: 0 0 auto;
}
.authFrm .authRemember .authCheck,
.authFrm .authRemember input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid #d4ccb8;
  background: var(--white);
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin: 0;
  transition: background-color 0.12s, border-color 0.12s;
}
.authFrm .authRemember input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.authFrm .authRemember input[type="checkbox"]:checked::after {
  content: "";
  width: 12px;
  height: 12px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 11 8 15 16 5'/></svg>") no-repeat center / contain;
}

.authFrm .authBtnBox,
.authFrm .gFullFrmBtnBox.authBtnBox {
  margin: clamp(4px, 1vh, 10px) 0 0;
  padding: 0;
  display: block;
  flex: 0 0 auto;
}
.authFrm .authBtnBox > .authBtnPrimary,
.authFrm .gFullFrmBtnBox.authBtnBox > button {
  width: 100%;
  height: clamp(48px, 6.5vh, 54px);
  min-height: clamp(48px, 6.5vh, 54px);
  border-radius: 14px;
  border: 0;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: clamp(15px, 2.1vh, 16px);
  color: #fff;
  background: var(--accent);
  transition: background-color 0.12s, transform 0.06s, box-shadow 0.12s;
  box-shadow: 0 6px 16px rgba(255, 90, 31, 0.28);
  margin: 0;
}
.authFrm .authBtnPrimary:hover {
  background: var(--accentDark);
  box-shadow: 0 8px 20px rgba(255, 90, 31, 0.35);
}
.authFrm .authBtnPrimary:active {
  transform: translateY(1px);
}

.authFrm .authBelowLinks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 0.8vh, 6px);
  margin-top: clamp(10px, 2vh, 18px);
  font-size: 14px;
  flex: 0 0 auto;
}
.authFrm .authLinkPrimary {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  padding: 4px 0;
}
.authFrm .authLinkPrimary:hover {
  color: var(--accentDark);
  text-decoration: underline;
}
.authFrm .authLinkSecondary {
  font-size: 13px;
  text-decoration: none;
  color: #5a564c;
  cursor: pointer;
  padding: 2px 0;
}
.authFrm .authLinkSecondary:hover {
  text-decoration: underline;
  color: var(--black);
}

.authFrm .authHintRow {
  margin-top: clamp(8px, 1.6vh, 14px);
  text-align: center;
  font-size: 13px;
  color: #5a564c;
  flex: 0 0 auto;
}
.authFrm .authHintLink {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  margin-left: 4px;
  cursor: pointer;
}
.authFrm .authHintLink:hover {
  text-decoration: underline;
}

.authFrm .authOtpLabel {
  margin-bottom: clamp(2px, 0.4vh, 4px);
}
.authFrm .authOtpRow {
  display: flex;
  gap: clamp(6px, 2vw, 10px);
  justify-content: space-between;
  margin: clamp(4px, 0.8vh, 6px) 0 clamp(10px, 2vh, 18px);
  flex: 0 0 auto;
}
.authFrm .authOtpCell {
  flex: 1 1 0;
  min-width: 0;
  height: clamp(52px, 7vh, 58px);
  border: 1px solid #d4ccb8;
  border-radius: 12px;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(22px, 3.5vh, 26px);
  color: var(--black);
  background: var(--white);
  outline: none;
  padding: 0;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.authFrm .authOtpCell:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.14);
}

.authFrm .authFooter,
.authFrm .gFullFrmFooterCon.authFooter {
  position: static;
  margin-top: auto;                  /* Push to end of .authBody flex column */
  padding: clamp(8px, 1.6vh, 14px) 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #8a8574;
  font-size: 11px;
  letter-spacing: 0.02em;
  background: transparent;
  flex: 0 0 auto;
}
.authFrm .authFooterRow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.authFrm .authFooterRow img {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  opacity: 0.85;
}
/* 2026-08-23: the amber raster shield (img/iconSecure.png) was replaced by an
   inline SVG so it inherits the footer's muted text colour via currentColor
   instead of shipping a fixed old-brand amber. */
.authFrm .authFooterRow svg {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  opacity: 0.85;
}

/* Kill legacy Programify styling if any stray anchor slips through */
.authFrm .gFullFrmFooterBrand { display: none; }

/* Overrides to defuse pre-existing .gFullFrm/.gFullFrmHeader legacy
   styling so the Split-Hero renders cleanly inside .fullViewCon. */
.authFrm .authHero .headLogo {
  margin-top: 0 !important;
}
.authFrm .loginHeader::after,
.authFrm .authHeadline::after {
  display: none !important;
}

/* Keyboard-open compaction — when JS detects VisualViewport shrinkage
   it toggles .authFrm.is-keyboard on. Hero collapses further so the
   focused field stays visible above the keyboard. */
.authFrm.is-keyboard .authHero {
  padding-top: calc(clamp(20px, 3vh, 32px) + env(safe-area-inset-top));
  padding-bottom: clamp(8px, 1.4vh, 14px);
}
.authFrm.is-keyboard .authHero--compact,
.authFrm.is-keyboard .authHero {
  padding-bottom: clamp(6px, 1vh, 10px);
}
.authFrm.is-keyboard .authHeroLogo {
  width: clamp(36px, 6vh, 52px);
  height: clamp(36px, 6vh, 52px);
  margin-bottom: clamp(2px, 0.6vh, 6px) !important;
}
.authFrm.is-keyboard .authSubtitle {
  display: none;                    /* buy vertical room */
}
.authFrm.is-keyboard .authHeadlineRule {
  margin: clamp(4px, 0.8vh, 8px) 0 clamp(4px, 0.6vh, 6px);
}
.authFrm.is-keyboard .authFooter {
  display: none;                    /* footer irrelevant while typing */
}

/* ---- Camo v3 legibility (shipped 2026-08-23 with the hero tile) ----
   Additive only. The existing .authHeadline / .authSubtitle / .authHeroLogo
   rules above are untouched; the logo rule's animation:none and !important
   margins are unaffected — this adds a filter and nothing else. */
.authFrm .authHeadline {
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}
.authFrm .authSubtitle {
  color: rgba(244, 240, 232, 0.75);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}
.authFrm .authHeroLogo {
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.55));
}

/* Landscape / very short viewports: compact hero, tighter body */
@media (max-height: 600px), (orientation: landscape) and (max-height: 500px) {
  .authFrm .authHero {
    padding-top: calc(clamp(20px, 3vh, 32px) + env(safe-area-inset-top));
    padding-bottom: clamp(10px, 1.6vh, 16px);
  }
  .authFrm .authHeroLogo {
    width: clamp(40px, 8vh, 56px);
    height: clamp(40px, 8vh, 56px);
    margin-bottom: 6px !important;
  }
  .authFrm .authSubtitle {
    display: none;
  }
  .authFrm .authField {
    margin-bottom: 8px;
  }
}

/* Very small phones (iPhone SE 1st gen, older Androids) — allow the
   .authBody scroll fallback to always be available. */
@media (max-height: 560px) {
  .authFrm .authHero .authHeadlineRule {
    margin: 8px 0 6px;
  }
  .authFrm .authFooter {
    display: none;                  /* deprioritise footer on tiny screens */
  }
}

/* =============================================================
   FORM FAMILY v2 — matches mockups/form-screen.html.
   Applied form-by-form via the `.gFrmV2` class on the <form> root
   (2026-07-06). Legacy `.gFrm` styling above stays intact for any
   form that has not been converted yet. Every JS-hook id / input
   name / class is preserved on the wired inputs — only the visual
   shell is restyled.
   Tokens: --shell #16150f, --cream #f4f0e8, --white #fcfcfc,
           --green #2e7d32, --blaze #ff5a1f (required marker only).
   ============================================================= */

/* Header — tactical black with back / title+subtitle / close */
.gFrm.gFrmV2 .gFrmHeader {
  background: var(--shell, #16150f);
  color: var(--shell-ink, #f4f0e8);
  padding: 32px 12px 14px;
  border: 0;
  box-shadow: none;
  position: relative;
  z-index: 1;
}
.gFrm.gFrmV2 .gFrmHeader::before,
.gFrm.gFrmV2 .gFrmHeader::after { content: none; }
.gFrm.gFrmV2 .gFrmHeadLine {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}
.gFrm.gFrmV2 .gFrmHeading {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}
.gFrm.gFrmV2 .gFrmBackBtn,
.gFrm.gFrmV2 .gFrmActions .gIconBtn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--shell-ink, #f4f0e8);
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
}
.gFrm.gFrmV2 .gFrmBackBtn svg,
.gFrm.gFrmV2 .gFrmActions .gIconBtn svg {
  width: 22px;
  height: 22px;
  color: var(--shell-ink, #f4f0e8);
  stroke: currentColor;
}
.gFrm.gFrmV2 .gFrmTitleWrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 0 2px;
}
.gFrm.gFrmV2 .gFrmName {
  font-family: "Barlow Condensed", var(--font-heading, sans-serif);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--shell-ink, #f4f0e8);
}
.gFrm.gFrmV2 .gFrmSub {
  font-size: 12px;
  color: var(--shell-ink-mute, #a8a498);
  line-height: 1.2;
}

/* Body — cream, scrollable, padded for the sticky footer */
/* Every element inside a v2 form uses border-box so width:100% + padding +
   border never overflows its container (was causing all forms to lean right). */
.gFrm.gFrmV2,
.gFrm.gFrmV2 *,
.gFrm.gFrmV2 *::before,
.gFrm.gFrmV2 *::after { box-sizing: border-box; }

.gFrm.gFrmV2 .gFrmBody {
  background: var(--cream, #f4f0e8);
  padding: 14px 16px 140px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Small "* required" note at the top of the body */
.gFrm.gFrmV2 .gFrmReqNote {
  font-size: 11px;
  color: var(--ink-faint, #8a8574);
  margin: 0 4px 8px;
}
.gFrm.gFrmV2 .gFrmReqNote b { color: var(--blaze, #ff5a1f); }

/* Grouped section — white rounded card */
.gFrm.gFrmV2 .gFrmSection {
  background: var(--white, #fcfcfc);
  border: 1px solid var(--line, #e8e2d4);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 0 0 12px;
}
.gFrm.gFrmV2 .gFrmSection > .gFrmSubHeader,
.gFrm.gFrmV2 .gFrmSectionTitle {
  font-family: "Barlow Condensed", var(--font-heading, sans-serif);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute, #5a564c);
  margin: 0 0 10px;
  padding: 0;
  background: transparent;
  border: 0;
  text-align: left;
  display: block;
}
.gFrm.gFrmV2 .gFrmSectionTitle .req { color: var(--blaze, #ff5a1f); font-weight: 700; margin-left: 2px; }
.gFrm.gFrmV2 .gFrmHint {
  font-size: 11px;
  color: var(--ink-faint, #8a8574);
  margin: 6px 4px 0;
  font-style: italic;
}

/* Floating-label field — reuses existing .gFrmField / .gFrmInput / .gFrmLabel */
.gFrm.gFrmV2 .gFrmField {
  position: relative;
  display: block;
  margin: 0 0 10px;
  padding: 0;
  max-width: none;
}
.gFrm.gFrmV2 .gFrmField:last-child { margin-bottom: 0; }
.gFrm.gFrmV2 .gFrmField .gFrmInput,
.gFrm.gFrmV2 .gFrmField input[type="text"],
.gFrm.gFrmV2 .gFrmField input[type="tel"],
.gFrm.gFrmV2 .gFrmField input[type="email"],
.gFrm.gFrmV2 .gFrmField input[type="date"],
.gFrm.gFrmV2 .gFrmField input[type="number"],
.gFrm.gFrmV2 .gFrmField textarea {
  width: 100%;
  min-height: 52px;
  padding: 20px 12px 8px;
  background: var(--cream, #f4f0e8);
  border: 1px solid var(--line, #e8e2d4);
  border-radius: 10px;
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 16px;   /* prevents iOS auto-zoom */
  color: var(--ink, #1c1b14);
  outline: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
}
.gFrm.gFrmV2 .gFrmField textarea { min-height: 84px; padding-top: 24px; resize: vertical; }
.gFrm.gFrmV2 .gFrmField .gFrmInput:focus,
.gFrm.gFrmV2 .gFrmField input:focus,
.gFrm.gFrmV2 .gFrmField textarea:focus {
  border-color: var(--shell, #16150f);
  background: var(--white, #fcfcfc);
}
.gFrm.gFrmV2 .gFrmField .gFrmLabel {
  position: absolute;
  top: 6px;
  left: 12px;
  padding: 0;
  margin: 0;
  font-family: "Barlow Condensed", var(--font-heading, sans-serif);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute, #5a564c);
  background: transparent;
  pointer-events: none;
  transform: none;
  transition: none;
}
.gFrm.gFrmV2 .gFrmField .gFrmLabel .req { color: var(--blaze, #ff5a1f); margin-left: 3px; }
.gFrm.gFrmV2 .gFrmField .gFrmLabel .opt {
  color: var(--ink-faint, #8a8574);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.10em;
  margin-left: 4px;
  text-transform: none;
}
/* Reset the animated float behaviour from the legacy rules */
.gFrm.gFrmV2 .gFrmField .gFrmInput:not(:placeholder-shown) + .gFrmLabel,
.gFrm.gFrmV2 .gFrmField .gFrmInput:focus + .gFrmLabel,
.gFrm.gFrmV2 .gFrmField input:not(:placeholder-shown) + .gFrmLabel,
.gFrm.gFrmV2 .gFrmField input:focus + .gFrmLabel,
.gFrm.gFrmV2 .gFrmField .gFrmTextArea:not(:placeholder-shown) + .gFrmLabel,
.gFrm.gFrmV2 .gFrmField .gFrmTextArea:focus + .gFrmLabel {
  top: 6px;
  left: 12px;
  transform: none;
  font-size: 11px;
  color: var(--ink-mute, #5a564c);
  background: transparent;
}

.gFrm.gFrmV2 .gFrmField.is-invalid .gFrmInput,
.gFrm.gFrmV2 .gFrmField.is-invalid input,
.gFrm.gFrmV2 .gFrmField.is-invalid .gFrmTextArea {
  border-color: var(--red, #e53935);
}

/* Two-up row for short paired fields (e.g. name + surname).
   Dates are NEVER placed in a two-up row (native date pickers overflow). */
.gFrm.gFrmV2 .gFrmFieldRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 10px;
}
.gFrm.gFrmV2 .gFrmFieldRow > .gFrmField { margin: 0; }

/* Address search-first + collapsed manual fallback */
.gFrm.gFrmV2 .gFrmAddressSearch {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--cream, #f4f0e8);
  border: 1px solid var(--line, #e8e2d4);
  border-radius: 10px;
  padding: 12px 14px;
  min-height: 52px;
}
.gFrm.gFrmV2 .gFrmAddressSearch input {
  border: 0;
  background: transparent;
  outline: none;
  padding: 0;
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 15px;
  color: var(--ink, #1c1b14);
  flex: 1 1 auto;
  min-width: 0;
}
.gFrm.gFrmV2 .gFrmAddressSearch input::placeholder { color: var(--ink-faint, #8a8574); }
.gFrm.gFrmV2 .gFrmAddressSearch svg { width: 18px; height: 18px; color: var(--ink-faint, #8a8574); flex-shrink: 0; }

.gFrm.gFrmV2 .gFrmManualToggle {
  margin: 10px 0 6px;
  padding: 8px 10px;
  background: var(--cream, #f4f0e8);
  border: 1px dashed var(--line-strong, #d4ccb8);
  border-radius: 10px;
  font-size: 13px;
  color: var(--ink-mute, #5a564c);
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  cursor: pointer;
  font-family: var(--font-body, "Inter", sans-serif);
}
.gFrm.gFrmV2 .gFrmManualToggle .gFrmManualToggleLink {
  color: var(--shell, #16150f);
  font-family: "Barlow Condensed", var(--font-heading, sans-serif);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--shell, #16150f);
  padding-bottom: 1px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.gFrm.gFrmV2 .gFrmManualToggle .gFrmManualToggleLink svg { width: 14px; height: 14px; }

.gFrm.gFrmV2 .gFrmManualBlock {
  display: none;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line, #e8e2d4);
}
.gFrm.gFrmV2 .gFrmManualBlock.is-open { display: block; }

/* Attach chips (people attached to a hunt) */
.gFrm.gFrmV2 .gFrmAttachChips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}
.gFrm.gFrmV2 .gFrmAttachChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 12px;
  background: var(--cream, #f4f0e8);
  border: 1px solid var(--line, #e8e2d4);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink, #1c1b14);
}
.gFrm.gFrmV2 .gFrmAttachChip .xBtn {
  width: 20px;
  height: 20px;
  border: 0;
  background: transparent;
  color: var(--ink-mute, #5a564c);
  display: grid;
  place-items: center;
  cursor: pointer;
  border-radius: 999px;
  padding: 0;
}
.gFrm.gFrmV2 .gFrmAttachChip .xBtn svg { width: 14px; height: 14px; }
.gFrm.gFrmV2 .gFrmAttachEmpty {
  font-size: 13px;
  color: var(--ink-faint, #8a8574);
  margin: 0 0 10px;
  font-style: italic;
}

/* Black tactical "Add X" button (attach clients / PHs / etc.) */
.gFrm.gFrmV2 .gFrmAddBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border-radius: 10px;
  cursor: pointer;
  font-family: "Barlow Condensed", var(--font-heading, sans-serif);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--shell, #16150f);
  color: var(--shell-ink, #f4f0e8);
  border: 0;
  box-shadow: 0 6px 14px rgba(22, 21, 15, 0.22);
  transition: background-color 0.15s, transform 0.06s;
}
.gFrm.gFrmV2 .gFrmAddBtn:hover  { background: var(--shell-hi, #22201a); }
.gFrm.gFrmV2 .gFrmAddBtn:active { transform: translateY(1px); }
.gFrm.gFrmV2 .gFrmAddBtn svg    { width: 16px; height: 16px; display: block; }

/* Hunt colour chip row (mockup Frame 01) */
.gFrm.gFrmV2 .gFrmChipRow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gFrm.gFrmV2 .gFrmChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--cream, #f4f0e8);
  border: 1px solid var(--line, #e8e2d4);
  color: var(--ink, #1c1b14);
  font-family: "Barlow Condensed", var(--font-heading, sans-serif);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
}
.gFrm.gFrmV2 .gFrmChip .dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  display: inline-block;
}
.gFrm.gFrmV2 .gFrmChip.is-selected {
  background: var(--white, #fcfcfc);
  border-color: var(--shell, #16150f);
  box-shadow: 0 0 0 3px rgba(22, 21, 15, 0.08);
}

/* Sticky footer — green Save + quiet Cancel/Delete */
.gFrm.gFrmV2 .gFrmStickyBar {
  background: linear-gradient(180deg, rgba(244, 240, 232, 0), var(--cream, #f4f0e8) 30%);
  padding: 18px 16px 20px;
}
.gFrm.gFrmV2 .gFrmStickyBar::before { content: none; }
.gFrm.gFrmV2 .gFrmStickyBar__inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 0;
  grid-template-columns: none;
}
.gFrm.gFrmV2 .gFrmStickyBar .gBtnPrimary {
  order: 1;
  width: 100%;
  min-height: 52px;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--green, #2e7d32);
  color: #fff;
  font-family: "Barlow Condensed", var(--font-heading, sans-serif);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 6px 14px rgba(46, 125, 50, 0.35);
}
.gFrm.gFrmV2 .gFrmStickyBar .gBtnPrimary:hover { background: var(--green-strong, #256a29); }
.gFrm.gFrmV2 .gFrmStickyBar .gBtnSecondary {
  order: 2;
  align-self: center;
  background: transparent;
  color: var(--ink-mute, #5a564c);
  box-shadow: none;
  font-family: "Barlow Condensed", var(--font-heading, sans-serif);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  height: auto;
  padding: 6px 12px;
}
.gFrm.gFrmV2 .gFrmStickyBar .gBtnSecondary:hover { color: var(--ink, #1c1b14); }

/* ---------- FrmHunt-specific v2 pieces ---------- */

/* Colour tag section — chip-style swatches inside a .gFrmSection.
   Overrides the older `#frmHunt .gHuntColorCon .colorOption` rules only
   for the v2 form (specificity via .gFrmV2). Behaviour unchanged: click
   handler in FrmHuntUtils.setListeners toggles .selected + writes the
   chosen hex into the hidden input[name="color"]. */
.gFrm.gFrmV2 .gHuntColorCon .colorOptionsRow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0;
}
.gFrm.gFrmV2 .gHuntColorCon .colorOption {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  cursor: pointer;
  border: 2px solid var(--white, #fcfcfc);
  box-shadow: 0 0 0 1px var(--line, #e8e2d4);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.gFrm.gFrmV2 .gHuntColorCon .colorOption:hover {
  transform: scale(1.08);
}
.gFrm.gFrmV2 .gHuntColorCon .colorOption.selected {
  box-shadow: 0 0 0 3px var(--shell, #16150f);
  transform: scale(1.05);
}

/* Attach tables — hunts' client + PH lists render as pill "chips"
   with an inline X. The existing JS inserts <tr>s with:
     <td>{{name}}</td>  <td class="icoCell">X or i</td>
   We restyle those rows to look like the mockup's attach chips. Every
   id / structure preserved so add/remove/tap behaviour is unchanged. */
.gFrm.gFrmV2 .gFrmAttachTbl {
  width: auto;
  border: 0;
  border-spacing: 0;
  margin: 0 0 10px;
  padding: 0;
  background: transparent;
  box-shadow: none;
  display: block;
}
.gFrm.gFrmV2 .gFrmAttachTbl tbody {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gFrm.gFrmV2 .gFrmAttachTbl tr {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 12px;
  background: var(--cream, #f4f0e8);
  border: 1px solid var(--line, #e8e2d4);
  border-radius: 999px;
  min-height: 34px;
  box-shadow: none;
  cursor: default;
}
.gFrm.gFrmV2 .gFrmAttachTbl tr:hover,
.gFrm.gFrmV2 .gFrmAttachTbl tr:active {
  background: var(--cream, #f4f0e8);
  transform: none;
}
.gFrm.gFrmV2 .gFrmAttachTbl td {
  padding: 0;
  border: 0;
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 13px;
  color: var(--ink, #1c1b14);
  background: transparent;
}
.gFrm.gFrmV2 .gFrmAttachTbl td.icoCell {
  width: 20px;
  height: 20px;
  padding: 0;
  display: inline-grid;
  place-items: center;
}
.gFrm.gFrmV2 .gFrmAttachTbl td.icoCell div {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(22, 21, 15, 0.06);
  color: var(--ink-mute, #5a564c);
  font-family: var(--font-body, "Inter", sans-serif);
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.gFrm.gFrmV2 .gFrmAttachTbl td.icoCell div:hover {
  background: rgba(22, 21, 15, 0.12);
  color: var(--ink, #1c1b14);
}

/* ==========================================================================
   Trophy wizard — reskin (Stage B) + lightbox / wounded note (Stage C)
   Added 2026-07-06. See mockups/wizard-new-flow.html + wizard-review.html.
   Everything here is scoped to #frmWizard (or the top-level lightbox)
   so nothing else in the app is affected.
   ========================================================================== */

/* --- Review — top hint + rows (single source of truth 2026-07-06,
       x-wizard-tokens: merged the Stage-B block and the round-2 enlarge
       block into one). Values are the round-2 winners where they overlap. */
#frmWizard .wizReviewHint {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--white, #fcfcfc);
  border: 1px dashed var(--line-strong, #d4ccb8);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--ink-mute, #5a564c);
  margin: 0 0 12px;
}
#frmWizard .wizReviewHint svg {
  width: 14px;
  height: 14px;
  color: var(--blaze, #ff5a1f);
  flex-shrink: 0;
}
#frmWizard .wizReviewHint b { color: var(--ink, #1c1b14); font-weight: 600; }

#frmWizard .wizReviewRow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 14px;
  background: var(--white, #fcfcfc);
  border: 1px solid var(--line, #e8e2d4);
  border-radius: 12px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
  margin: 0 0 8px;
}
#frmWizard .wizReviewRow:hover,
#frmWizard .wizReviewRow:active {
  background: rgba(255, 90, 31, 0.10);
  border-color: rgba(255, 90, 31, 0.35);
  box-shadow: 0 0 0 2px rgba(255, 90, 31, 0.08);
}
#frmWizard .wizReviewRow .wizReviewBody {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
#frmWizard .wizReviewRow .wizReviewLbl {
  font-family: "Barlow Condensed", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute, #5a564c);
}
#frmWizard .wizReviewRow .wizReviewVal {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink, #1c1b14);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
#frmWizard .wizReviewRow .wizReviewChev {
  font-family: "Barlow Condensed", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 26px;
  color: var(--ink-faint, #8a8574);
  line-height: 1;
  padding-right: 2px;
  transition: color 0.12s ease;
}
#frmWizard .wizReviewRow:hover .wizReviewChev,
#frmWizard .wizReviewRow:active .wizReviewChev {
  color: var(--blaze, #ff5a1f);
}

/* NA row — wounded parts/photo */
#frmWizard .wizReviewRow--na {
  cursor: default;
  background: var(--cream, #f4f0e8);
  border-style: dashed;
  border-color: var(--line-strong, #d4ccb8);
}
#frmWizard .wizReviewRow--na:hover,
#frmWizard .wizReviewRow--na:active {
  background: var(--cream, #f4f0e8);
  border-color: var(--line-strong, #d4ccb8);
  box-shadow: none;
}
#frmWizard .wizReviewRow--na .wizReviewChev { visibility: hidden; }
#frmWizard .wizReviewRow--na .wizReviewVal {
  color: var(--ink-faint, #8a8574);
  font-style: italic;
  font-size: 15px;
  font-weight: 400;
}

/* --- Photo row (thumbnail + zoom hint) --- */
#frmWizard .wizReviewVal--photo {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: normal;
}
#frmWizard .wizReviewThumb {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--line-strong, #d4ccb8);
  background: var(--cream, #f4f0e8);
  cursor: zoom-in;
  display: block;
  padding: 0;
  position: relative;
}
#frmWizard .wizReviewThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#frmWizard .wizReviewThumb:hover {
  border-color: var(--blaze, #ff5a1f);
}
#frmWizard .wizReviewPhotoTxt {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
#frmWizard .wizReviewPhotoTxt .attached {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink, #1c1b14);
}
#frmWizard .wizReviewPhotoTxt .zoomHint {
  font-size: 12px;
  color: var(--ink-mute, #5a564c);
  display: flex;
  align-items: center;
  gap: 4px;
}
#frmWizard .wizReviewPhotoTxt .zoomHint svg { width: 9px; height: 9px; }

/* SUBMIT stays green via existing `.btnSave` rules (`--green` background is
   already applied inside `#frmWizard` / `.gWizBtnBox .btnSave`). */

/* --- Kill step: honest wounded note (Stage C) --- */
#frmWizard .wizKillNote {
  align-items: flex-start;
  gap: 8px;
  margin: 12px 6px 0;
  padding: 10px 12px;
  background: rgba(198, 40, 40, 0.06);
  border: 1px solid rgba(198, 40, 40, 0.28);
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.35;
  color: #c62828;
}
#frmWizard .wizKillNote svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}
#frmWizard .wizKillNote b { color: #c62828; }
#frmWizard .wizKillNote:not(.gDisplayNone) { display: flex; }

/* ==========================================================================
   Photo lightbox — top-level overlay (not scoped to #frmWizard)
   ========================================================================== */
.wizLightbox {
  position: fixed;
  inset: 0;
  background: rgba(6, 5, 3, 0.94);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 60px 20px 60px;
  cursor: pointer;
}
.wizLightbox.is-visible { display: flex; }
.wizLightbox .wizLightboxCaption {
  position: absolute;
  top: 20px;
  left: 20px;
  color: #fff;
  font-family: "Barlow Condensed", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  max-width: calc(100% - 90px);
  pointer-events: none;
}
.wizLightbox .wizLightboxClose {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
.wizLightbox .wizLightboxClose svg { width: 18px; height: 18px; display: block; }
.wizLightbox .wizLightboxClose:hover { background: rgba(255, 255, 255, 0.18); }
.wizLightbox .wizLightboxImg {
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  cursor: zoom-out;
  display: block;
}
.wizLightbox .wizLightboxHint {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  pointer-events: none;
}
.wizLightbox .wizLightboxHint b { color: rgba(255, 255, 255, 0.9); font-weight: 600; }

/* ==========================================================================
   Trophy wizard — step-screen polish (2026-07-06, x-wizard-polish)
   Brings the live wizard steps in line with mockups/wizard-new-flow.html:
     · Tactical-black header with white question + muted-light hint
     · SVG icon buttons (back + close) — no more filter-blob PNGs
     · Search input moved out of the black header onto the cream body
     · NEXT / SUBMIT / DELETE recut as inset rounded floating buttons
       (blaze NEXT, green SUBMIT, red DELETE)
   Appended at end of file so it wins the cascade against the older rules.
   ========================================================================== */

/* --- Step header: tactical black --- */
#frmWizard .frmWizHeader {
  background-color: var(--shell, #16150f);
  color: var(--shellInk, #f4f0e8);
  border-bottom: 0;
  padding: 24px 16px 16px;
  margin-bottom: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
#frmWizard .frmWizHeader .headImgCon {
  padding: 0;
  margin-bottom: 8px;
  min-height: 32px;
}

/* Icon buttons in the header (SVG-based, inherit currentColor = shellInk) */
#frmWizard .headBackIcon,
#frmWizard .headCloseIcon {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--shellInk, #f4f0e8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 999px;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.14s ease, opacity 0.14s ease;
  /* undo the img-era hack in case a stale rule tries to run */
  filter: none !important;
  opacity: 1;
}
#frmWizard .headBackIcon svg,
#frmWizard .headCloseIcon svg {
  width: 22px;
  height: 22px;
  display: block;
}
#frmWizard .headBackIcon:active,
#frmWizard .headCloseIcon:active {
  background-color: rgba(255, 255, 255, 0.10);
}

#frmWizard .headDesc {
  color: var(--shellInk, #f4f0e8);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: 0.02em;
  margin: 6px 0 6px;
}
#frmWizard .headQ {
  color: #a8a498;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.4;
  margin: 0;
}
#frmWizard .headQ b { color: var(--shellInk, #f4f0e8); }

/* --- Search input: light box on cream, sits BELOW the black header --- */
#frmWizard #frmWizSCon {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--cream);
  padding: 14px 16px 10px;
  margin: 0;
  width: 100%;
  text-align: left;
}
#frmWizard .searchInput {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background-color: var(--white);
  color: var(--black);
  border: 1px solid rgba(22, 21, 15, 0.12);
  border-radius: 10px;
  font-family: var(--font-ui);
  font-size: 15px;
  margin: 0;
  box-sizing: border-box;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
#frmWizard .searchInput::placeholder {
  color: #8a8574;
  opacity: 1;
}
#frmWizard .searchInput:focus {
  outline: none;
  border-color: var(--accent, #ff5a1f);
  box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.12);
}

/* --- NEXT button: inset floating blaze pill --- */
#frmWizard .nextBtn {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom));
  left: 16px;
  right: 16px;
  height: 52px;
  z-index: 10;
  background: var(--accent, #ff5a1f);
  color: var(--cream, #f4f0e8);
  border: 0;
  border-radius: 12px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(255, 90, 31, 0.32);
  cursor: pointer;
  padding: 0;
  margin: 0;
}
#frmWizard .nextBtn:active {
  background: var(--accentDark, #e04a12);
  transform: translateY(1px);
}

/* --- SUBMIT + DELETE: inset floating buttons (review + edit mode) --- */
#frmWizard .gWizBtnBox {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom));
  left: 16px;
  right: 16px;
  z-index: 10;
  height: auto;
  display: flex;
  flex-direction: row;
  gap: 10px;
  padding: 0;
  margin: 0;
  align-items: stretch;
  background: transparent;
}
#frmWizard .gWizBtnBox .btnSave {
  /* Override the older `#frmWizard .btnSave { position: fixed; … }` so this
     one sits properly inside its flex container beside DELETE. */
  position: static;
  flex: 1 1 auto;
  height: 52px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 12px;
  background: var(--green, #2e7d32);
  color: var(--cream, #f4f0e8);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(46, 125, 50, 0.32);
  cursor: pointer;
}
#frmWizard .gWizBtnBox .btnSave:active {
  background: #256a29;
  transform: translateY(1px);
}
#frmWizard .gWizBtnBox .btnDelete {
  position: static;
  flex: 0 0 auto;
  width: auto;
  height: 52px;
  padding: 0 22px;
  margin: 0;
  border: 0;
  border-radius: 12px;
  background: var(--red, #e53935);
  color: var(--cream, #f4f0e8);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(229, 57, 53, 0.32);
  cursor: pointer;
}
#frmWizard .gWizBtnBox .btnDelete:active {
  background: #c22b28;
  transform: translateY(1px);
}

/* Splash "Continue" — recut as an inset rounded pill (used by the qw quote
   wizard's Home splash; `tw` has no splash anymore). */
#frmWizard .btnContinue {
  background-color: var(--accent, #ff5a1f);
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(255, 90, 31, 0.32);
}
#frmWizard .btnContinue:active {
  background-color: var(--accentDark, #e04a12);
}

/* --- Wizard body: extra bottom padding so content doesn't hide behind the
       inset floating button. --- */
#frmWizard .tblsCon,
#frmWizard #frmWizDateCon,
#frmWizard #frmWizPartsCon,
#frmWizard #frmWizPhotoCon,
#frmWizard #frmWizCountCon {
  padding-bottom: 96px;
}

/* Intermediate .searchTable rule deleted 2026-07-06 (x-wizard-tokens)
   — superseded by the align-sweep rule further down (margin 0, padding
   0 16px, width 100%, border-spacing 0 8px). */

/* ==========================================================================
   Trophy wizard — step CONTENT polish (2026-07-06, x-wizard-content)
   Fixes:
     · Real horizontal-overflow root cause (`width:100%` + padding without
       `box-sizing: border-box` on `.frmWizHeader` + `#frmWizSCon` — added
       ~32px of horizontal bleed that we've been chasing).
     · Search box + list cards now share the same 16px inset.
     · Selected state: outline + faint blaze tint (not solid orange fill),
       so the NEXT button stays the one obvious action.
     · Parts step → compact pill chips.
     · Photo step → clean dashed drop-zone with camera glyph + on-brand
       shell buttons for Gallery / Camera / "Add a photo".
     · Date & time → white field-cards (label above, native input below).
     · Hunt / Client / PH / Concession rows → cleaner typography, no
       oversized icons, on-brand row rhythm.
   ========================================================================== */

/* --- Overflow root cause: force border-box on the wizard's own boxes --- */
#frmWizard {
  overflow-x: hidden;
}
#frmWizard .frmWizHeader,
#frmWizard #frmWizSCon,
#frmWizard .searchInput,
#frmWizard #frmWizDateCon,
#frmWizard #frmWizPartsCon,
#frmWizard #frmWizPhotoCon,
#frmWizard #frmWizCountCon,
#frmWizard .tblsCon {
  box-sizing: border-box;
  max-width: 100%;
}
#frmWizard .headImgCon { max-width: 100%; }

/* --- Consistent 16px inset for search + list cards --- */
#frmWizard #frmWizSCon {
  padding: 14px 16px 10px;
  margin: 0;
  width: 100%;
}
#frmWizard .searchTable {
  margin: 0;
  padding: 0 16px;
  width: 100%;
  border-spacing: 0 8px;
}

/* --- Card visual rhythm --- */
#frmWizard .searchTable td {
  border: 1px solid var(--line, #e8e2d4);
  background-color: var(--white, #fcfcfc);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* --- Selected state (rows AND chips): outline + tint, NOT solid orange ---
       The blaze NEXT button stays the one solid-blaze thing on screen.
       !important dropped 2026-07-06 (x-wizard-tokens) — the older solid-blaze
       base rules that fought this have been deleted, so no more collision. */
#frmWizard .searchTable .rowSelected,
#frmWizPartsCon .partSelected {
  background-color: rgba(255, 90, 31, 0.08);
  color: var(--ink, #1c1b14);
  border-color: var(--accent, #ff5a1f);
  box-shadow: 0 0 0 1px var(--accent, #ff5a1f), 0 3px 8px rgba(0, 0, 0, 0.06);
}
/* When the picker cell is a chipGrid td (Gender/Kill), the visible box is
   the inner .wizChip — apply the selected tint/outline there instead of on
   the transparent td. */
#frmWizard .searchTable.chipGrid .rowSelected .wizChip {
  background-color: rgba(255, 90, 31, 0.08);
  color: var(--ink, #1c1b14);
  border-color: var(--accent, #ff5a1f);
  box-shadow: 0 0 0 1px var(--accent, #ff5a1f), 0 3px 8px rgba(0, 0, 0, 0.06);
}

/* --- Parts step: compact pill chips --- */
#frmWizPartsCon {
  padding: 0 16px;
  align-items: stretch;
}
#frmWizPartsBtnCon {
  max-width: none;
  gap: 8px;
  justify-content: flex-start;
  padding: 0;
  margin: 0;
}
/* .partsBtn intermediate pill rule (11px 999-radius) deleted 2026-07-06
   (x-wizard-tokens) — superseded by the round-2 card grid rule further
   down (and the .wizChip shared class in Part C). */
#frmWizPartsCon .otherDesc {
  margin: 12px 0 0;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line, #e8e2d4);
  background: var(--white, #fcfcfc);
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--ink, #1c1b14);
}
#frmWizPartsCon .otherDesc:focus {
  outline: none;
  border-color: var(--accent, #ff5a1f);
  box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.12);
}

/* --- Photo step: clean drop-zone + on-brand shell buttons --- */
#frmWizPhotoCon {
  padding: 0 16px;
  gap: 12px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
#frmWizPhoto {
  border-radius: 12px;
  max-width: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: block;
  margin: 0 auto;
}
#frmWizNoPhotoCon {
  background: var(--white, #fcfcfc);
  border: 1.5px dashed rgba(22, 21, 15, 0.20);
  border-radius: 12px;
  padding: 28px 16px;
  text-align: center;
  color: var(--ink-mute, #5a564c);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
#frmWizNoPhotoCon .emptyIcon { display: none; }
#frmWizNoPhotoCon .wizPhotoGlyph {
  width: 50px;
  height: 50px;
  border-radius: 999px;
  background: var(--cream, #f4f0e8);
  color: var(--ink-mute, #5a564c);
  display: grid;
  place-items: center;
}
#frmWizNoPhotoCon .wizPhotoGlyph svg { width: 22px; height: 22px; display: block; }
#frmWizNoPhotoCon p {
  margin: 0;
  font-size: 13px;
  color: var(--ink-mute, #5a564c);
}
#frmWizBtnAddBPhoto {
  background: var(--shell, #16150f);
  color: var(--shellInk, #f4f0e8);
  border-radius: 10px;
  padding: 12px 16px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  box-shadow: 0 4px 10px rgba(22, 21, 15, 0.20);
  min-height: 44px;
}
#frmWizBtnAddBPhoto label {
  cursor: pointer;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
#frmWizAddDPhotoCon {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
#frmWizBtnGallery,
#frmWizBtnCamera {
  background: var(--shell, #16150f);
  color: var(--shellInk, #f4f0e8);
  border-radius: 10px;
  padding: 12px 16px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  box-shadow: 0 4px 10px rgba(22, 21, 15, 0.20);
}

/* --- Date & Time step: white field cards --- */
#frmWizard #frmWizDateCon {
  max-width: none;
  padding: 0 16px;
  gap: 10px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
#frmWizard .wizLabel {
  display: block;
  background: var(--white, #fcfcfc);
  border: 1px solid var(--line, #e8e2d4);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--ink, #1c1b14);
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 400;
  text-align: left;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}
#frmWizard .wizLabel .wizFieldLbl {
  display: block;
  color: var(--ink-mute, #5a564c);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
#frmWizard .wizLabel .wizFieldLbl .req {
  color: var(--accent, #ff5a1f);
  font-style: normal;
  margin-left: 2px;
}
#frmWizard .wizInput {
  width: 100%;
  max-width: none;
  padding: 2px 0;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  color: var(--ink, #1c1b14);
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  min-height: 24px;
  box-sizing: border-box;
}
#frmWizard .wizInput:hover,
#frmWizard .wizInput:focus {
  border: 0;
  box-shadow: none;
  background-color: transparent;
}
#frmWizard .wizLabel:focus-within {
  border-color: var(--accent, #ff5a1f);
  box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.12);
}

/* Hunt-row rich-card polish rules deleted 2026-07-06 (x-wizard-tokens)
   — all the wizHuntName/wizHuntNameP/wizSpanLine/wizDateLine/etc classes
   are unreferenced by the JS since the round-2 pass (verified via grep).
   Hunt rows now render as .wizPickRow. */

/* --- Client / PH row cleanup: small avatar chip --- */
#frmWizard .clientIcon {
  width: 16px;
  height: 16px;
  padding: 5px;
  background: var(--cream, #f4f0e8);
  border-radius: 999px;
  margin-right: 8px;
  vertical-align: middle;
  box-sizing: content-box;
  opacity: 0.85;
}
/* Intermediate .clientName rule deleted 2026-07-06 (x-wizard-tokens)
   — the align-sweep rule further down is the winner; going forward,
   client rows render as .wizPickRow so this class alias will drop. */

/* --- Concession row: clean stacked lines, no farm icon --- */
#frmWizard .farmCell { gap: 2px; }
#frmWizard .farmIcon { display: none; }
#frmWizard .farmName {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink, #1c1b14);
  letter-spacing: 0.01em;
}
#frmWizard .ownerName {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-mute, #5a564c);
}

/* ==========================================================================
   Trophy wizard — full alignment sweep (2026-07-06, x-wizard-align)
   Items 1-11 + bonus cleanups per the align task. Appended at end of file
   so it wins the cascade against older rules.
   ========================================================================== */

/* --- App-wide focus (item 7c) --------------------------------------------
   Kill browser default focus outline for mouse/touch, add on-brand blaze
   ring for keyboard users via :focus-visible. Placed at the top of this
   block so it applies globally; per-element rules further down still layer. */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--accent, #ff5a1f);
  outline-offset: 2px;
  border-radius: inherit;
}

/* --- LOGIN (items 1-2): auth hero breaks out of the .gFullFrm 20px gutter -
   Negative-margin break-out. The orange accent border-bottom on .authHero
   automatically runs full-width once the hero spans edge-to-edge. */
.gFullFrm.authFrm .authHero {
  /* 2026-08-23: was margin-left/right: -20px — a break-out written when
     .gFullFrm still had its 20px gutter. .gFullFrm.authFrm sets `padding: 0`,
     so the compensation had nothing left to compensate: it pushed the hero
     40px wider than the screen and swallowed the hero's own interior padding,
     landing headline/logo/subtitle 2.0-5.8px from the screen edge.
     Zeroed: the hero is now exactly edge-to-edge and its own padding below
     supplies the inset. Camo still bleeds to both edges. */
  margin-left: 0;
  margin-right: 0;
}
/* If .gFullFrm.authFrm ever has non-zero horizontal padding (safe-area etc.),
   push the interior padding on the hero itself so content still stays clear
   of the notches. */
.gFullFrm.authFrm .authHero {
  padding-left: max(clamp(22px, 6vw, 30px), env(safe-area-inset-left));
  padding-right: max(clamp(22px, 6vw, 30px), env(safe-area-inset-right));
}

/* --- WIZARD (item 3): zero the .gFullFrm 20px horizontal inset on #frmWizard.
   Every interior wizard container already has its own 16px lateral padding
   (search, list, date, parts, photo, count, review) — see the earlier polish
   blocks. Bottom padding is set to 96px so the last row scrolls clear of the
   floating NEXT button (item 7b: replaces the per-container padding-bottom
   that was creating the empty band on the Date step). */
#frmWizard {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 96px;
}

/* Remove per-container padding-bottom (item 7b) — the wrapper #frmWizard now
   owns the bottom clearance, so hiding one step doesn't leave a 96px band
   above the next one. */
#frmWizard .tblsCon,
#frmWizard #frmWizDateCon,
#frmWizard #frmWizPartsCon,
#frmWizard #frmWizPhotoCon,
#frmWizard #frmWizCountCon {
  padding-bottom: 0;
}

/* --- WIZARD (item 4): search must scroll UNDER the header, not over it.
   Raise the header's z-index above the search (search was z-index: 5). List
   rows have no z-index, so they continue to scroll behind everything. */
#frmWizard .frmWizHeader {
  z-index: 10;
}

/* --- WIZARD (item 5): Parts 2-column card grid + full-width "Other" ------ */
#frmWizPartsCon {
  /* Older CSS gave the container display:flex column, align-items:center.
     Keep it stacking normally so the button grid + the Other textarea below
     both fit — the grid inside the button container handles its own layout. */
  display: block;
  padding: 0 16px;
}
#frmWizPartsBtnCon {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  max-width: none;
  padding: 0;
  margin: 0;
  justify-content: stretch;
}
#frmWizPartsBtnCon .partsBtn {
  min-width: 0;
  width: auto;
  height: auto;
  padding: 14px 12px;
  border-radius: 10px;
  border: 1px solid var(--line, #e8e2d4);
  background: var(--white, #fcfcfc);
  color: var(--ink, #1c1b14);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
}
#frmWizPartsBtnCon .partsBtn:last-child {
  grid-column: 1 / -1;
}

/* --- WIZARD (item 6): Photo step — single tap card ----------------------- */
/* Web path: whole #frmWizNoPhotoCon becomes the tap target. JS handler is
   wired in setListeners(). #frmWizBtnAddBPhoto stays in the DOM (still holds
   the hidden file input) but is visually hidden — the file input can still be
   triggered programmatically. */
#frmWizNoPhotoCon {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}
#frmWizNoPhotoCon:hover,
#frmWizNoPhotoCon:active {
  border-color: var(--accent, #ff5a1f);
  background-color: rgba(255, 90, 31, 0.04);
}
#frmWizBtnAddBPhoto {
  display: none !important;
}

/* --- WIZARD (item 7a): Date & Time — box-sizing on .wizLabel ------------- */
#frmWizard .wizLabel {
  box-sizing: border-box;
}

/* --- WIZARD (item 10): Concession — equal row heights (Option A) -------- */
#frmWizard .farmCell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 40px;
}
#frmWizard .farmLine:empty { display: none; }
/* When ownerName is empty, its wrapping .farmLine has no visible content
   (icon is display:none). Vertically-center what's left via the flex column
   above. min-height ensures a no-owner row still matches an owner row. */

/* --- WIZARD (item 11): Review — left-aligned ----------------------------- */
#frmWizard .wizReviewRow,
#frmWizard .wizReviewBody,
#frmWizard .wizReviewLbl,
#frmWizard .wizReviewVal,
#frmWizard .wizReviewHint {
  text-align: left;
}

/* --- BONUS A: neutralize the .gFullFrm { text-align: center } landmine ---
   Reset text-align inside the wizard to `left`. Anywhere in the wizard that
   legitimately wants centering already sets it explicitly (Home splash, etc.
   — Home is out of the tw flow now, but qw still uses it and sets center
   inline via headerCon.style.textAlign in displayStep). */
#frmWizard { text-align: left; }

/* --- BONUS B: full-height wizard scroll -----------------------------------
   The old carve-out was for a 60px bottom bar that no longer exists (nav is
   inside the fullViewCon overlay, not siblings). Full-height scroll is safe. */
#frmWizard {
  height: 100%;
}

/* --- Client row: remove the .clientIcon styling (item 9) ------------------
   Icon injection is gone in the JS too. Rule stays as an override in case the
   selector reappears; it just disappears the icon reliably. */
#frmWizard .clientIcon { display: none; }
#frmWizard .clientName {
  vertical-align: baseline;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink, #1c1b14);
}

/* --- Hunt row (item 8) — clean single row: name + date range (+ Pending) - */
#frmWizard .wizHuntRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}
#frmWizard .wizHuntRow .wizHuntRowName {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink, #1c1b14);
  letter-spacing: 0.02em;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#frmWizard .wizHuntRow .wizHuntRowDates {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink-mute, #5a564c);
  flex: 0 0 auto;
  white-space: nowrap;
}
#frmWizard .wizHuntRow .wizHuntRowPending {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent, #ff5a1f);
  background: rgba(255, 90, 31, 0.10);
  border: 1px solid rgba(255, 90, 31, 0.35);
  padding: 2px 6px;
  border-radius: 999px;
  margin-left: 6px;
  flex: 0 0 auto;
}

/* ==========================================================================
   Trophy wizard — round-2 polish (2026-07-06, x-wizard-round2)
   Items 1 (PH locked hunts), 3 (systemic header spacing), 4 (photo center +
   fill spacing), 5 (review enlarged). Appended at end of file so it beats
   older rules.
   ========================================================================== */

/* --- Item 3: systemic top gap on every wizard step ---------------------- */
#frmWizard .tblsCon,
#frmWizard #frmWizDateCon,
#frmWizard #frmWizPartsCon,
#frmWizard #frmWizPhotoCon,
#frmWizard #frmWizCountCon {
  padding-top: 16px;
}

/* --- Item 4: photo step centered + max-widths -------------------------- */
#frmWizPhotoCon {
  align-items: center;
}
#frmWizNoPhotoCon,
#frmWizPhoto,
#frmWizAddDPhotoCon {
  width: 100%;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}
/* Filled state: the preview img needs the same top breathing room as any
   other first-content element (item 4b). Item 3 covers the container, but
   the img is a direct child — the container's padding-top already gives
   the gap; belt-and-braces margin for consistency. */
#frmWizPhoto {
  margin-top: 0;
}

/* --- Item 1: PH locked hunt row (visible, non-tappable) --------------- */
/* Cell greyed + non-interactive. Reuses .wizHuntRow shape, adds --locked
   variant plus a lock icon and a status chip (Upcoming / Closed). */
#frmWizard .searchTable td.wizHuntCell--locked {
  background-color: color-mix(in srgb, var(--cream, #f4f0e8) 60%, transparent);
  border-color: rgba(22, 21, 15, 0.10);
  color: var(--ink-mute, #5a564c);
  cursor: default;
  box-shadow: none;
  pointer-events: none;
}
#frmWizard .searchTable td.wizHuntCell--locked:hover,
#frmWizard .searchTable td.wizHuntCell--locked:active {
  background-color: color-mix(in srgb, var(--cream, #f4f0e8) 60%, transparent);
  border-color: rgba(22, 21, 15, 0.10);
  box-shadow: none;
  transform: none;
}
#frmWizard .wizHuntRow--locked .wizHuntRowName {
  color: var(--ink-mute, #5a564c);
  opacity: 0.85;
}
#frmWizard .wizHuntRow--locked .wizHuntRowDates {
  color: var(--ink-faint, #8a8574);
  opacity: 0.85;
}
#frmWizard .wizHuntLockIcon {
  width: 14px;
  height: 14px;
  color: var(--ink-faint, #8a8574);
  flex: 0 0 auto;
  opacity: 0.9;
}

/* Status chips (Upcoming / Closed). Neither is red — red is delete/error. */
#frmWizard .wizHuntRow .wizHuntRowChip {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  margin-left: 6px;
  flex: 0 0 auto;
}
#frmWizard .wizHuntRowChip--upcoming {
  /* Amber = warning/anticipation. On-brand secondary. */
  color: #7a5310;
  background: rgba(235, 166, 63, 0.18);
  border: 1px solid rgba(235, 166, 63, 0.5);
}
#frmWizard .wizHuntRowChip--closed {
  /* Neutral shell for a past/inactive hunt. No red. */
  color: var(--ink-mute, #5a564c);
  background: rgba(22, 21, 15, 0.06);
  border: 1px solid rgba(22, 21, 15, 0.15);
}

/* Round-2 review enlarge block deleted 2026-07-06 (x-wizard-tokens) —
   folded into the single merged Review source-of-truth further up
   (search `#frmWizard .wizReviewRow {`). No behaviour change. */

/* ==========================================================================
   Trophy wizard — SHARED type & selection-box (2026-07-06, x-wizard-tokens)
   Two classes, one source of truth:
     · .wizPickRow  — the standardised list-row content wrapper (Species,
                      Client, PH, Hunt, Farm). Vertically centres content;
                      title left-aligned. Renders inside the existing
                      `.searchTable td` box which owns the border/bg/shadow.
     · .wizChip     — the standardised chip (Male/Female, Dead/Wounded,
                      Parts) in a 2-col grid.
   Uniform 56px row height regardless of single- vs two-line content.
   ========================================================================== */

/* --- The picker box (td) ------------------------------------------------- */
#frmWizard .searchTable td {
  padding: var(--wiz-pick-padding);
  border-radius: var(--wiz-pick-radius);
  border: 1px solid var(--line, #e8e2d4);
  background-color: var(--white, #fcfcfc);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  /* Font properties are set on .wizPickRow__title/__sub so plain-cell
     inheritance no longer decides the option-text look. */
  color: var(--ink, #1c1b14);
  font-family: var(--font-ui);
  font-size: var(--wiz-option-size);
  font-weight: var(--wiz-option-weight);
  text-align: left;
}

/* --- .wizPickRow (content wrapper inside the td) ------------------------ */
#frmWizard .wizPickRow {
  display: flex;
  align-items: center;
  gap: 10px;
  /* min-height inside the td: subtracts the td's vertical padding (14+14)
     from the target 56px so total box = padding + wrapper = 56px. */
  min-height: calc(var(--wiz-pick-min-height) - 28px);
}
#frmWizard .wizPickRow__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  gap: 2px;
}
#frmWizard .wizPickRow__title {
  font-family: var(--font-ui);
  font-size: var(--wiz-option-size);
  font-weight: var(--wiz-option-weight);
  color: var(--ink, #1c1b14);
  text-align: left;
  line-height: 1.2;
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#frmWizard .wizPickRow__sub {
  font-family: var(--font-ui);
  font-size: var(--wiz-option-sub-size);
  font-weight: var(--wiz-option-sub-weight);
  color: var(--wiz-option-sub-color);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Right-aligned meta (chip + lock icon, on locked hunt rows) */
#frmWizard .wizPickRow__meta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* --- Locked hunt (item 1 round-2, retained) — muted card + non-tappable */
#frmWizard .searchTable td.wizPickCell--locked {
  background-color: color-mix(in srgb, var(--cream, #f4f0e8) 60%, transparent);
  border-color: rgba(22, 21, 15, 0.10);
  color: var(--ink-mute, #5a564c);
  cursor: default;
  box-shadow: none;
  pointer-events: none;
}
#frmWizard .wizPickRow--locked .wizPickRow__title {
  color: var(--ink-mute, #5a564c);
  opacity: 0.85;
}
#frmWizard .wizPickRow--locked .wizPickRow__sub {
  color: var(--ink-faint, #8a8574);
  opacity: 0.85;
}
#frmWizard .wizPickRow__lock {
  width: 14px;
  height: 14px;
  color: var(--ink-faint, #8a8574);
  flex: 0 0 auto;
  opacity: 0.9;
}
#frmWizard .wizPickRow__chip {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  flex: 0 0 auto;
}
#frmWizard .wizPickRow__chip--upcoming {
  color: #7a5310;
  background: rgba(235, 166, 63, 0.18);
  border: 1px solid rgba(235, 166, 63, 0.5);
}
#frmWizard .wizPickRow__chip--closed {
  color: var(--ink-mute, #5a564c);
  background: rgba(22, 21, 15, 0.06);
  border: 1px solid rgba(22, 21, 15, 0.15);
}

/* --- .wizChip — Male/Female, Dead/Wounded (Gender/Kill) ---------------- */
/* Container: table gets `chipGrid` class from JS on Gender/Kill steps.
   The td strips its own box (border/bg/padding) so the .wizChip inside
   is the visible unit — mirrors how #frmWizPartsBtnCon works. */
#frmWizard .searchTable.chipGrid {
  border-spacing: 0;
}
#frmWizard .searchTable.chipGrid tbody {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 16px;
}
#frmWizard .searchTable.chipGrid tr {
  display: contents;
}
#frmWizard .searchTable.chipGrid td {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
#frmWizard .wizChip {
  padding: 14px 12px;
  border-radius: var(--wiz-pick-radius);
  border: 1px solid var(--line, #e8e2d4);
  background: var(--white, #fcfcfc);
  color: var(--ink, #1c1b14);
  font-family: var(--font-heading);
  font-size: var(--wiz-chip-size);
  font-weight: var(--wiz-chip-weight);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
  display: block;
}

/* --- Date & Time — align field label + value with the tokens ------------ */
#frmWizard .wizLabel .wizFieldLbl {
  font-size: 11px;
  letter-spacing: 0.18em;
}
#frmWizard .wizInput {
  font-size: var(--wiz-option-size);
  font-weight: 500;
}

/* --- Legacy alias so any leftover name classes still render sanely ----- */
#frmWizard .wizHuntRow,
#frmWizard .clientName,
#frmWizard .farmName {
  font-family: var(--font-ui);
  font-size: var(--wiz-option-size);
  font-weight: var(--wiz-option-weight);
  color: var(--ink, #1c1b14);
}

/* ============================================================================
   ===== TROPHY WIZARD v2 (tlog-) — isolated, do not merge with old wizard =====
   ============================================================================
   Fully self-contained. Every rule scoped under #tlogWizard. Zero borrowed
   class names (no .searchTable, no .wizPickRow, no .wizChip, no .rowSelected,
   no .gFullFrm, no .headQ / .headDesc). Tokens forked into --tlog-*. No
   <table> anywhere — divs only, so cell/border-spacing right-shift ghosts
   are physically impossible. One padding-owner per horizontal level: the
   content wrapper owns the 16px side gutter; descendants do NOT add left
   or right padding.
   ============================================================================ */

/* --- Root: hard reset + re-declare + tokens ------------------------------- */
#tlogWizard {
  /* Full-viewport overlay above the app shell. */
  all: revert;
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  background: #f4f0e8;
  overflow: hidden;

  /* Fonts + colour re-declared explicitly. */
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  color: #16150f;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;

  /* Tokens (forked from --wiz-* into a completely separate namespace) */
  --tlog-blaze: #ff5a1f;
  --tlog-black: #16150f;
  --tlog-amber: #eba63f;
  --tlog-cream: #f4f0e8;
  --tlog-white: #fcfcfc;
  --tlog-green: #2e7d32;
  --tlog-red: #e53935;
  --tlog-line: #e5e0d5;
  --tlog-ink: #16150f;
  --tlog-ink-mute: #5a564c;
  --tlog-ink-faint: #a8a498;
  --tlog-tint: rgba(255, 90, 31, 0.09);

  --tlog-font-head: 'Barlow Condensed', 'Inter', sans-serif;
  --tlog-font-body: 'Inter', system-ui, sans-serif;
}
#tlogWizard[hidden] { display: none; }

#tlogWizard *,
#tlogWizard *::before,
#tlogWizard *::after {
  box-sizing: border-box;
}

/* Hidden state helper (attribute-driven, avoids leaking a bare class) */
#tlogWizard [hidden] { display: none !important; }

/* --- Header (sticky, black) ---------------------------------------------- */
#tlogWizard .tlog-header {
  flex: 0 0 auto;
  background: var(--tlog-black);
  color: #fff;
  padding: 14px 16px;
  position: relative;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
}
#tlogWizard .tlog-headQ {
  margin: 0;
  font-family: var(--tlog-font-head);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.05;
  color: #fff;
  padding-right: 40px; /* clear the close button */
}
#tlogWizard .tlog-headSub {
  margin: 6px 0 0;
  font-family: var(--tlog-font-body);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.35;
  color: var(--tlog-ink-faint);
  padding-right: 40px;
}
#tlogWizard .tlog-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 0;
  color: var(--tlog-ink-faint);
  font-family: var(--tlog-font-body);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#tlogWizard .tlog-close:active { background: rgba(255,255,255,0.06); }

/* --- Content frame (cream, gutter-owner) --------------------------------- */
#tlogWizard .tlog-content {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--tlog-cream);
  padding: 16px 16px 24px; /* 16px top gap under header + 16px side gutter */
  -webkit-overflow-scrolling: touch;
}

/* Step containers stack; only the active one is visible */
#tlogWizard .tlog-step {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* --- Search input (Species, Hunt, Concession) ---------------------------- */
#tlogWizard .tlog-search {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  margin: 0 0 8px;
  background: var(--tlog-white);
  border: 1.5px solid var(--tlog-line);
  border-radius: 10px;
  font-family: var(--tlog-font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--tlog-ink);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
#tlogWizard .tlog-search::placeholder {
  color: var(--tlog-ink-faint);
  font-weight: 400;
}
#tlogWizard .tlog-search:focus {
  border-color: var(--tlog-blaze);
  background: #fff;
}

/* --- Picker list + row (single-column vertical stack of picker boxes) ---- */
#tlogWizard .tlog-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#tlogWizard .tlog-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 14px 16px;
  background: var(--tlog-white);
  border: 1.5px solid var(--tlog-line);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  color: var(--tlog-ink);
}
#tlogWizard .tlog-row:active {
  transform: scale(0.997);
}
#tlogWizard .tlog-row.is-selected {
  background: var(--tlog-tint);
  border-color: var(--tlog-blaze);
  /* border width stays 1.5px in both states so selection never reflows */
}
#tlogWizard .tlog-row__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}
#tlogWizard .tlog-row__title {
  font-family: var(--tlog-font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--tlog-ink);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#tlogWizard .tlog-row__sub {
  font-family: var(--tlog-font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--tlog-ink-mute);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#tlogWizard .tlog-row__meta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Locked hunt row (Upcoming / Closed) — visible, non-tappable */
#tlogWizard .tlog-row.is-locked {
  background: #f0ece2;
  opacity: 0.72;
  pointer-events: none;
  cursor: default;
  box-shadow: none;
}
#tlogWizard .tlog-row.is-locked .tlog-row__title,
#tlogWizard .tlog-row.is-locked .tlog-row__sub {
  color: var(--tlog-ink-mute);
}
#tlogWizard .tlog-row__lock {
  width: 14px;
  height: 14px;
  color: var(--tlog-ink-faint);
  flex: 0 0 auto;
  opacity: 0.9;
}
#tlogWizard .tlog-statusChip {
  font-family: var(--tlog-font-head);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  flex: 0 0 auto;
}
#tlogWizard .tlog-statusChip--upcoming {
  color: #7a5310;
  background: rgba(235, 166, 63, 0.18);
  border: 1px solid rgba(235, 166, 63, 0.5);
}
#tlogWizard .tlog-statusChip--closed {
  color: var(--tlog-ink-mute);
  background: rgba(22, 21, 15, 0.06);
  border: 1px solid rgba(22, 21, 15, 0.15);
}

/* --- Chip grid (Gender / Kill / Parts) ----------------------------------- */
#tlogWizard .tlog-chipGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
#tlogWizard .tlog-chip {
  min-height: 52px;
  padding: 14px 12px;
  background: var(--tlog-white);
  border: 1.5px solid var(--tlog-line);
  border-radius: 10px;
  font-family: var(--tlog-font-head);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tlog-ink);
  text-align: center;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
#tlogWizard .tlog-chip:active { transform: scale(0.98); }
#tlogWizard .tlog-chip.is-selected {
  background: var(--tlog-tint);
  border-color: var(--tlog-blaze);
  /* border-width unchanged — tint + outline only, no reflow */
}

/* Wounded note under the Kill grid */
#tlogWizard .tlog-woundedNote {
  margin-top: 4px;
  padding: 10px 12px;
  background: rgba(235, 166, 63, 0.12);
  border: 1px solid rgba(235, 166, 63, 0.4);
  border-radius: 10px;
  font-family: var(--tlog-font-body);
  font-size: 12px;
  color: var(--tlog-ink-mute);
  line-height: 1.4;
}
#tlogWizard .tlog-woundedNote b { color: var(--tlog-ink); font-weight: 600; }

/* --- Field card (Date, Time) --------------------------------------------- */
#tlogWizard .tlog-fieldCard {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--tlog-white);
  border: 1.5px solid var(--tlog-line);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
#tlogWizard .tlog-fieldLbl {
  font-family: var(--tlog-font-head);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tlog-ink-faint);
}
#tlogWizard .tlog-fieldVal {
  font-family: var(--tlog-font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--tlog-ink);
  border: 0;
  background: transparent;
  outline: none;
  padding: 0;
  margin: 0;
  width: 100%;
  min-height: 24px;
  -webkit-appearance: none;
  appearance: none;
}
#tlogWizard input.tlog-fieldVal::-webkit-calendar-picker-indicator {
  color: var(--tlog-blaze);
  opacity: 0.85;
}

/* --- Photo tap-card ------------------------------------------------------ */
#tlogWizard .tlog-photoCard {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
#tlogWizard .tlog-photoEmpty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 30px 16px;
  background: var(--tlog-white);
  border: 1.5px dashed #cfc9ba;
  border-radius: 12px;
  text-align: center;
}
#tlogWizard .tlog-photoPlus {
  font-family: var(--tlog-font-body);
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  color: var(--tlog-blaze);
}
#tlogWizard .tlog-photoTitle {
  font-family: var(--tlog-font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--tlog-ink);
}
#tlogWizard .tlog-photoHint {
  font-family: var(--tlog-font-body);
  font-weight: 400;
  font-size: 12px;
  color: var(--tlog-ink-faint);
}
#tlogWizard .tlog-photoPreview {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 0 auto;
  border-radius: 12px;
  background: var(--tlog-white);
}
#tlogWizard .tlog-hiddenInput {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

/* --- Review rows --------------------------------------------------------- */
#tlogWizard .tlog-reviewList {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#tlogWizard .tlog-reviewRow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--tlog-white);
  border: 1.5px solid var(--tlog-line);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  cursor: pointer;
}
#tlogWizard .tlog-reviewRow:active { transform: scale(0.997); }
#tlogWizard .tlog-reviewBody {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
#tlogWizard .tlog-reviewLbl {
  font-family: var(--tlog-font-head);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tlog-ink-faint);
}
#tlogWizard .tlog-reviewVal {
  font-family: var(--tlog-font-body);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.25;
  color: var(--tlog-ink);
  word-break: break-word;
}
#tlogWizard .tlog-reviewChev {
  flex: 0 0 auto;
  color: var(--tlog-ink-faint);
  font-size: 24px;
  line-height: 1;
  font-family: var(--tlog-font-body);
}
#tlogWizard .tlog-reviewThumb {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--tlog-cream);
  border: 1px solid var(--tlog-line);
}
#tlogWizard .tlog-reviewThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#tlogWizard .tlog-reviewRow.is-na {
  cursor: default;
  opacity: 0.72;
}
#tlogWizard .tlog-reviewRow.is-na:active { transform: none; }
#tlogWizard .tlog-reviewRow.is-na .tlog-reviewChev { visibility: hidden; }
#tlogWizard .tlog-reviewRow.is-na .tlog-reviewVal {
  font-style: italic;
  color: var(--tlog-ink-mute);
  font-weight: 500;
  font-size: 15px;
}
#tlogWizard .tlog-reviewHint {
  padding: 10px 12px;
  margin-bottom: 4px;
  background: rgba(255, 90, 31, 0.08);
  border: 1px solid rgba(255, 90, 31, 0.24);
  border-radius: 10px;
  font-family: var(--tlog-font-body);
  font-size: 12px;
  color: var(--tlog-ink-mute);
  line-height: 1.4;
}
#tlogWizard .tlog-reviewHint b { color: var(--tlog-ink); font-weight: 600; }

/* --- Empty state --------------------------------------------------------- */
#tlogWizard .tlog-empty {
  padding: 24px 16px;
  text-align: center;
  font-family: var(--tlog-font-body);
  font-size: 14px;
  color: var(--tlog-ink-mute);
}

/* --- Footer (Back + Next / Submit) --------------------------------------- */
#tlogWizard .tlog-footer {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid var(--tlog-line);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
}
#tlogWizard .tlog-btn {
  border: 0;
  border-radius: 10px;
  padding: 14px 18px;
  font-family: var(--tlog-font-head);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  line-height: 1;
}
#tlogWizard .tlog-btn:active { transform: scale(0.98); }
#tlogWizard .tlog-btn--back {
  flex: 0 0 auto;
  background: var(--tlog-white);
  color: var(--tlog-ink-mute);
  border: 1px solid var(--tlog-line);
}
#tlogWizard .tlog-btn--next {
  flex: 1 1 auto;
  background: var(--tlog-blaze);
  color: #fff;
}
#tlogWizard .tlog-btn--next[disabled],
#tlogWizard .tlog-btn--submit[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
#tlogWizard .tlog-btn--submit {
  flex: 1 1 100%;
  background: var(--tlog-green);
  color: #fff;
}

/* Prevent background scroll behind the wizard */
body.tlog-openLock { overflow: hidden; }

/* ===== END TROPHY WIZARD v2 ============================================= */


/* =========================================================================
   FORM DASHBOARD v2 — 2026-07-13
   Two-tab home screen (MY STATS · COMMUNITY) on the new brand tokens.
   Overrides the v1 rules further up the file where structure changed.
   ========================================================================= */

/* ---------- Reset a few v1 rules that no longer belong on the new form ---- */
#frmDashboard .dashHeader { display: none; }           /* screen title now in shell */
#frmDashboard .frmCaption { display: none; }           /* old goal caption; replaced */

/* Old goal-bar red/green look — reset before v2 fills paint over it. */
#frmDashboard #frmDashGoal {
  background-color: transparent;
  height: auto;
  display: block;
}
#frmDashboard #frmDashLblHunted,
#frmDashboard #frmDashLblGoal {
  color: inherit;
  text-align: inherit;
  display: inline-block;
  width: auto;
  font-weight: inherit;
  font-size: inherit;
}

/* ---------- Pinned notification zone (billing / upgrade / card / overdue) - */
#frmDashboard .dashNotisCon {
  display: flex;
  flex-flow: column nowrap;
  gap: 8px;
  /* Even 14px margin on all four sides so cards never touch the shell above
     or the tab bar below. Collapsed when there are no notifications. */
  padding: 14px 14px 14px;
}
#frmDashboard .dashNotisCon:empty { padding: 0; }

/* --- Card: neutral base + severity variants -------------------------------
   Each card sets --noti-tone / --noti-strong; every visual property (bg tint,
   border, icon colour, solid button, ghost button) reads from these tokens.
   Defaults to WARNING (amber) so cards from any code path show sensibly. */
#frmDashboard .dashNotiCon {
  --noti-tone: var(--yellow);
  --noti-strong: #b06e00;
  --noti-solid-fg: var(--black);

  margin: 0;
  background: color-mix(in srgb, var(--noti-tone) 12%, var(--white));
  border: 1px solid color-mix(in srgb, var(--noti-tone) 45%, transparent);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-flow: row nowrap;
  gap: 12px;
  align-items: flex-start;
  color: var(--black);
  box-shadow: 0 2px 6px rgba(22, 21, 15, 0.05);
}
#frmDashboard .dashNotiCon.is-warning {
  --noti-tone: var(--yellow);
  --noti-strong: #b06e00;
  --noti-solid-fg: var(--black);
}
#frmDashboard .dashNotiCon.is-danger {
  --noti-tone: var(--red);
  --noti-strong: var(--red);
  --noti-solid-fg: #fff;
}
/* Retire any raster icon that slips into the card — inline SVG owns the slot. */
#frmDashboard .dashNotiCon img { display: none; }

/* --- Inline SVG icon (replaces iconWarning.png) ---------------------------- */
#frmDashboard .dashNotiIcon {
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  flex-shrink: 0;
  color: var(--noti-strong);
  display: block;
}

#frmDashboard .dashNotiR {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-flow: column nowrap;
}
#frmDashboard .dashNotiHead {
  color: var(--black);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  margin: 0 0 4px;
}
#frmDashboard .dashNotiMessage {
  color: color-mix(in srgb, var(--black) 78%, transparent);
  font-size: 13px;
  line-height: 1.35;
  margin: 0;
}
#frmDashboard .dashNotiBtnCon {
  display: flex;
  flex-flow: row wrap;
  gap: 8px;
  margin-top: 10px;
  justify-content: flex-start;
}

/* --- Buttons: slimmer, severity-tinted ------------------------------------ */
#frmDashboard .dashNotiBtn {
  padding: 7px 12px;
  border-radius: 7px;
  background: var(--noti-tone);
  color: var(--noti-solid-fg);
  border: 1px solid transparent;
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
#frmDashboard .dashNotiBtn:active {
  filter: brightness(0.92);
}
/* Second button is a ghost outline in the same severity tone. */
#frmDashboard .dashNotiBtn + .dashNotiBtn {
  background: transparent;
  color: var(--noti-strong);
  border-color: color-mix(in srgb, var(--noti-strong) 55%, transparent);
}

/* ---------- Offline card ------------------------------------------------- */
#frmDashboard .offBtnCon {
  margin: 12px 14px;
  padding: 14px 18px;
  border: 1px solid color-mix(in srgb, var(--green) 40%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--green) 5%, var(--white));
  box-shadow: 0 2px 6px rgba(22, 21, 15, 0.05);
}
#frmDashboard .offConHead {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--black);
}
#frmDashboard .offBtn {
  background: var(--green);
  color: #fff;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 600;
  cursor: pointer;
}

/* ---------- Segmented tab bar (MY STATS · COMMUNITY) --------------------- */
#frmDashboard .dashTabs {
  background: var(--white);
  padding: 10px 14px 10px;
  border-bottom: 1px solid #e8e2d4;
  position: sticky;
  top: 0;
  z-index: 3;
}
#frmDashboard .dashTabs-track {
  background: var(--cream);
  border-radius: 12px;
  padding: 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
#frmDashboard .dashTab {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 11px 8px;
  border-radius: 9px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--black) 60%, transparent);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s, background-color 0.15s, box-shadow 0.15s;
  line-height: 1;
}
#frmDashboard .dashTab.is-active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 12px var(--accentGlow);
}

/* ---------- Panels ------------------------------------------------------- */
#frmDashboard .dashPanel { display: none; padding: 12px 14px 24px; }
#frmDashboard .dashPanel.is-active { display: block; }

/* ---------- MY STATS · Onboarding checklist ------------------------------- */
#frmDashboard .dashSetupCon {
  padding: 4px 0 0;
}
#frmDashboard .dashSetupHead {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.02em;
  text-align: left;
  margin: 4px 4px 6px;
  color: var(--black);
}
#frmDashboard .dashSetupMessage {
  font-size: 14px;
  color: color-mix(in srgb, var(--black) 70%, transparent);
  line-height: 1.4;
  margin: 0 4px 14px;
  padding: 0;
  display: block;
  align-items: initial;
  width: auto;
}
#frmDashboard .dashSetupHighlight {
  font-weight: 700;
  color: var(--accent);
}
#frmDashboard .dashStepCon {
  background: var(--white);
  border: 1px solid #e8e2d4;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  align-items: flex-start;
}
#frmDashboard .dashStepHead {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
#frmDashboard .dashStepInfo {
  font-size: 14px;
  line-height: 1.4;
  color: var(--black);
}
#frmDashboard .dashStepBtn {
  background-color: var(--accent);
  color: #fff;
  border-radius: 8px;
  padding: 9px 14px;
  margin-top: 12px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#frmDashboard .dashStepDone {
  color: var(--green);
  margin-top: 12px;
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.12em;
}

/* ---------- MY STATS · Charts container --------------------------------- */
#frmDashBChartsCon {
  display: flex;
  flex-flow: column nowrap;
  gap: 12px;
  align-items: stretch;
  padding: 0;
  width: 100%;
}

/* ---------- Goal card (chartTotal) --------------------------------------- */
#frmDashboard .dashGoalCard {
  background: var(--white);
  border: 1px solid #e8e2d4;
  border-radius: 16px;
  padding: 16px 16px 14px;
  box-shadow: 0 2px 6px rgba(22, 21, 15, 0.05);
  position: relative;
  overflow: hidden;
  /* Reset old v1 .chartCon look */
  width: auto;
  margin-top: 0;
}
#frmDashboard .dashGoalCard::after {
  content: "";
  position: absolute;
  inset: auto -60px -60px auto;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(255,90,31,0.06), transparent 65%);
  pointer-events: none;
}
#frmDashboard .dashGoalHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
#frmDashboard .dashGoalEyebrow {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--black) 65%, transparent);
}
#frmDashboard .dashGoalYear {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
#frmDashboard .dashGoalRow {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 6px;
}
#frmDashboard .dashGoalCurrent {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 52px;
  line-height: 1;
  color: var(--black);
}
#frmDashboard .dashGoalOf {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  color: color-mix(in srgb, var(--black) 40%, transparent);
  letter-spacing: 0.05em;
}
#frmDashboard .dashGoalTarget {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  color: var(--black);
  letter-spacing: 0.02em;
}
#frmDashboard .dashGoalBar {
  margin-top: 12px;
  height: 14px;
  background: var(--cream);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  width: 100%;
}
#frmDashboard .dashGoalBarFill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accentDark));
  border-radius: 999px;
  position: relative;
  display: block;
  transition: width 0.4s ease-out;
}
#frmDashboard .dashGoalBarFill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.25), transparent 40%);
}
#frmDashboard .dashGoalFoot {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11px;
  color: color-mix(in srgb, var(--black) 50%, transparent);
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
#frmDashboard .dashGoalFoot .dashGoalPct { color: var(--accent); }

/* ---------- Goal card · "no goal set" empty state ----------------------- */
#frmDashboard .dashGoalNoneCon {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
#frmDashboard .dashGoalNoneHead {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--black);
  line-height: 1.3;
}
#frmDashboard .dashGoalNoneHead b {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 22px;
  color: var(--accent);
  letter-spacing: 0.02em;
}
#frmDashboard .dashGoalNoneSub {
  font-size: 13px;
  color: color-mix(in srgb, var(--black) 55%, transparent);
  margin-bottom: 4px;
}
#frmDashboard .dashGoalSetBtn {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: var(--accent);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  min-height: 40px;
  box-shadow: 0 4px 12px var(--accentGlow);
  -webkit-tap-highlight-color: transparent;
}
#frmDashboard .dashGoalSetBtn:active {
  background: var(--accentDark);
  transform: translateY(1px);
}

/* ---------- Goal card · inline set-goal input form ---------------------- */
#frmDashboard .dashGoalFormCon {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#frmDashboard .dashGoalFormLabel {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--black) 55%, transparent);
}
#frmDashboard .dashGoalFormRow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: stretch;
}
#frmDashboard .dashGoalFormInput {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid color-mix(in srgb, var(--black) 15%, transparent);
  background: var(--white);
  color: var(--black);
  padding: 10px 12px;
  border-radius: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.02em;
  min-height: 44px;
  width: 100%;
  outline: none;
  -moz-appearance: textfield;
}
#frmDashboard .dashGoalFormInput::-webkit-outer-spin-button,
#frmDashboard .dashGoalFormInput::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#frmDashboard .dashGoalFormInput:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
#frmDashboard .dashGoalSaveBtn {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: var(--accent);
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}
#frmDashboard .dashGoalSaveBtn:active {
  background: var(--accentDark);
  transform: translateY(1px);
}
#frmDashboard .dashGoalFormErr {
  font-size: 12px;
  color: var(--red);
  margin-top: 2px;
}

/* ---------- Chart cards (line + doughnuts) ------------------------------- */
#frmDashboard .dashChartCard {
  background: var(--white);
  border: 1px solid #e8e2d4;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 2px 6px rgba(22, 21, 15, 0.05);
  /* Reset old v1 sizes so cards fill the panel width. */
  width: auto;
  margin-top: 0;
}
#frmDashboard .dashChartTitleRow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
#frmDashboard .dashChartTitle {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--black);
}
#frmDashboard .dashChartScope {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--black) 45%, transparent);
}
#frmDashboard .dashChartCanvasWrap {
  position: relative;
  width: 100%;
  height: 190px;
}
#frmDashboard .dashChartCanvasWrap.pie { height: 160px; }
#frmDashboard .dashChartCanvasWrap canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
/* Layout for doughnut cards: pie + legend side by side */
#frmDashboard .dashPieLayout {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  align-items: center;
}
#frmDashboard .dashChartLegend {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#frmDashboard .dashPieLayout .dashChartLegend { margin-top: 0; }
#frmDashboard .dashChartLegend li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--black);
  min-width: 0;
}
#frmDashboard .dashChartLegend .sw {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
#frmDashboard .dashChartLegend .name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#frmDashboard .dashChartLegend .val {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--black);
}

/* ---------- COMMUNITY · Trophy cards ------------------------------------- */
#frmDashFeedCon {
  display: flex;
  flex-flow: column nowrap;
  gap: 14px;
  width: 100%;
}
#frmDashFeedCon .feedItemCon {
  background: var(--white);
  border: 1px solid #e8e2d4;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(22, 21, 15, 0.05);
  width: auto;
  margin: 0;
  display: flex;
  flex-direction: column;
}
#frmDashFeedCon .trophyPhoto {
  position: relative;
  width: 100%;
  /* Grain matte (2026-07-13c): no fixed aspect-ratio — the panel now
     hugs the photo so the matte is equal on all four sides regardless
     of orientation. --matte-inset controls the uniform margin around
     the photo. */
  --matte-inset: 14px;
  padding: var(--matte-inset);
  overflow: hidden;
  box-sizing: border-box;
  display: block;
  /* Tactical grain matte: dark base + subtle diagonal line texture,
     per BRAND.md's .hc-grain treatment. Reads as canvas/utility. */
  background-color: #16150f;
  background-image:
    linear-gradient(160deg, rgba(255,255,255,0.03) 0%, rgba(0,0,0,0.20) 100%),
    linear-gradient(135deg,
      rgba(255,255,255,0.05) 25%, transparent 25%,
      transparent 50%, rgba(255,255,255,0.05) 50%,
      rgba(255,255,255,0.05) 75%, transparent 75%);
  background-size: auto, 14px 14px;
}
#frmDashFeedCon .trophyPhoto img {
  /* In-flow (no absolute positioning): the panel height follows the
     photo's natural aspect, so top/bottom matte equals the left/right
     matte automatically for landscape AND portrait. */
  display: block;
  width: 100%;
  height: auto;
  /* Cap for extreme portraits — a phone-friendly ceiling. When the cap
     kicks in, object-fit: contain letterboxes the photo sideways so it
     stays fully visible and undistorted, centred inside the matte. */
  max-height: 460px;
  object-fit: contain;
  margin: 0 auto;
  /* Subtle rounding softens the photo edge inside the grain matte. */
  border-radius: 4px;
  position: static;
  inset: auto;
  z-index: 1;
}
#frmDashFeedCon .trophyMedalChip {
  position: absolute;
  /* Sit 8px inside the photo's top-left corner: matte inset (14px) + 8px
     inside the photo, so the chip reads as pinned to the photo, not the
     panel. Keeps the grain margin clean. */
  top: 22px;
  left: 22px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  background: rgba(22,21,15,0.72);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  z-index: 2;
  backdrop-filter: blur(4px);
}
#frmDashFeedCon .trophyMedalChip .dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.35);
  flex-shrink: 0;
}
#frmDashFeedCon .trophyMedalChip.gold   .dot { background: #d4a017; }
#frmDashFeedCon .trophyMedalChip.silver .dot { background: #9aa0a6; }
#frmDashFeedCon .trophyMedalChip.bronze .dot { background: #a76a2b; }

#frmDashFeedCon .trophyDays {
  position: absolute;
  /* Mirror of the medal chip — 8px inside the photo's top-right corner. */
  top: 22px;
  right: 22px;
  background: rgba(255,255,255,0.92);
  color: var(--black);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  z-index: 2;
}
#frmDashFeedCon .trophyDays.today {
  background: var(--accent);
  color: #fff;
}

#frmDashFeedCon .trophyBody {
  padding: 12px 14px 12px;
}
#frmDashFeedCon .trophySpecies {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--black);
  line-height: 1.1;
}
#frmDashFeedCon .trophyAttrib {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-top: 6px;
  color: color-mix(in srgb, var(--black) 70%, transparent);
  font-size: 12px;
}
#frmDashFeedCon .trophyProfilePic {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
}
#frmDashFeedCon .trophyAttrib .ph {
  color: var(--black);
  font-weight: 600;
}
#frmDashFeedCon .trophyAttrib .outfit {
  color: var(--accent);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
#frmDashFeedCon .trophyAttrib .outfit img {
  width: 12px;
  height: auto;
  opacity: 0.9;
}
#frmDashFeedCon .trophyAttrib .dotSep {
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--black) 25%, transparent);
  display: inline-block;
  flex-shrink: 0;
}
#frmDashFeedCon .trophyMeasures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--cream);
  border-radius: 12px;
  margin-top: 10px;
  overflow: hidden;
}
#frmDashFeedCon .trophyMeasures .measure {
  padding: 10px 6px;
  text-align: center;
  position: relative;
}
#frmDashFeedCon .trophyMeasures .measure + .measure::before {
  content: "";
  position: absolute;
  left: 0; top: 22%; bottom: 22%;
  width: 1px;
  background: color-mix(in srgb, var(--black) 12%, transparent);
}
#frmDashFeedCon .measureLabel {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--black) 50%, transparent);
}
#frmDashFeedCon .measureValue {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  color: var(--black);
  margin-top: 2px;
  letter-spacing: 0.02em;
  line-height: 1;
}
#frmDashFeedCon .measureValue .unit {
  font-size: 11px;
  color: color-mix(in srgb, var(--black) 45%, transparent);
  letter-spacing: 0.10em;
  font-weight: 600;
  margin-left: 2px;
}
#frmDashFeedCon .trophyActions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e8e2d4;
}
#frmDashFeedCon .trophyActBtn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: color-mix(in srgb, var(--black) 60%, transparent);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13px;
  min-height: 36px;
}
#frmDashFeedCon .trophyActBtn svg {
  width: 18px;
  height: 18px;
  display: block;
}
#frmDashFeedCon .trophyActBtn:active { background: var(--cream); }

/* ---------- Show more (Community footer) --------------------------------- */
#frmDashboard .showMore {
  width: 100%;
  text-align: center;
  margin: 18px 0 30px;
}
#frmDashboard .showMore span {
  background: var(--black);
  color: var(--cream);
  border-radius: 8px;
  padding: 10px 16px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: inline-block;
  cursor: pointer;
}
/* ---------- MY STATS · Medal tally (PH only) ----------------------------- */
#frmDashboard .dashMedalCard {
  background: var(--white);
  border: 1px solid #e8e2d4;
  border-radius: 16px;
  padding: 16px 16px 14px;
  box-shadow: 0 2px 6px rgba(22, 21, 15, 0.05);
}
#frmDashboard .dashMedalHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
#frmDashboard .dashMedalEyebrow {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--black) 65%, transparent);
}
#frmDashboard .dashMedalYear {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
/* Accordion — 5 rows: gold → silver → bronze → no qualification → unmeasured.
   Each header shows label + this-year count (+ "last yr N" on the medal
   rows). Tapping the header toggles the drop-down list of trophies in that
   category. Rows toggle independently; all start collapsed. */
#frmDashboard .dashMedalAcc {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#frmDashboard .dashMedalAccRow {
  border-radius: 10px;
  background: var(--cream);
  overflow: hidden;
}
#frmDashboard .dashMedalAccRow.unmeasured {
  background: color-mix(in srgb, var(--yellow) 12%, var(--white));
  border: 1px solid color-mix(in srgb, var(--yellow) 38%, transparent);
}

/* --- Row header (tappable button) --- */
#frmDashboard .dashMedalAccHead {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  width: 100%;
  padding: 10px 12px;
  min-height: 46px;
  display: grid;
  grid-template-columns: 16px 1fr auto auto 20px;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
}
#frmDashboard .dashMedalAccHead:active {
  background: color-mix(in srgb, var(--black) 4%, transparent);
}
#frmDashboard .dashMedalAccRow.unmeasured .dashMedalAccHead {
  grid-template-columns: 16px 1fr auto 20px;
}

#frmDashboard .dashMedalDot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--black) 8%, transparent);
}
#frmDashboard .dashMedalAccRow.gold       .dashMedalDot { background: #d4a017; }
#frmDashboard .dashMedalAccRow.silver     .dashMedalDot { background: #9aa0a6; }
#frmDashboard .dashMedalAccRow.bronze     .dashMedalDot { background: #a76a2b; }
#frmDashboard .dashMedalAccRow.noq        .dashMedalDot {
  background: transparent;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--black) 25%, transparent);
}
#frmDashboard .dashMedalAccRow.unmeasured .dashMedalDot {
  background: #b06e00;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--yellow) 25%, transparent);
}

#frmDashboard .dashMedalRowLabel {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--black);
  line-height: 1;
}
#frmDashboard .dashMedalAccRow.noq .dashMedalRowLabel {
  color: color-mix(in srgb, var(--black) 60%, transparent);
  letter-spacing: 0.10em;
}
#frmDashboard .dashMedalAccRow.unmeasured .dashMedalRowLabel {
  letter-spacing: 0.10em;
}

#frmDashboard .dashMedalRowCount {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  color: var(--black);
  min-width: 24px;
  text-align: right;
  letter-spacing: 0.02em;
}
#frmDashboard .dashMedalAccRow.gold   .dashMedalRowCount { color: #d4a017; }
#frmDashboard .dashMedalAccRow.silver .dashMedalRowCount { color: #6d7278; }
#frmDashboard .dashMedalAccRow.bronze .dashMedalRowCount { color: #a76a2b; }
#frmDashboard .dashMedalAccRow.unmeasured .dashMedalRowCount { color: #b06e00; }

#frmDashboard .dashMedalRowLast {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--black) 45%, transparent);
  line-height: 1;
  min-width: 62px;
  text-align: right;
}
#frmDashboard .dashMedalRowLast b {
  font-weight: 700;
  color: color-mix(in srgb, var(--black) 70%, transparent);
}

#frmDashboard .dashMedalAccChev {
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--black) 45%, transparent);
  transition: transform 0.18s ease-out;
}
#frmDashboard .dashMedalAccChev svg {
  width: 16px;
  height: 16px;
  display: block;
}
#frmDashboard .dashMedalAccRow.is-open .dashMedalAccChev {
  transform: rotate(90deg);
}

/* --- Row body (drop-down list) — collapsed by default --- */
#frmDashboard .dashMedalAccBody {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.22s ease-out;
  background: color-mix(in srgb, var(--white) 60%, transparent);
}
#frmDashboard .dashMedalAccRow.is-open .dashMedalAccBody {
  /* Enough headroom for a long list; scrolls internally past this. */
  max-height: 480px;
  overflow-y: auto;
}
#frmDashboard .dashMedalAccRow.unmeasured .dashMedalAccBody {
  background: color-mix(in srgb, var(--yellow) 8%, var(--white));
  border-top: 1px solid color-mix(in srgb, var(--yellow) 24%, transparent);
}
#frmDashboard .dashMedalAccRow:not(.unmeasured) .dashMedalAccBody {
  border-top: 1px solid color-mix(in srgb, var(--black) 8%, transparent);
}

#frmDashboard .dashMedalTrophyList {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
#frmDashboard .dashMedalTrophyRow {
  display: grid;
  grid-template-columns: 1fr auto auto 16px;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-top: 1px solid color-mix(in srgb, var(--black) 6%, transparent);
  min-height: 44px;
}
#frmDashboard .dashMedalTrophyRow:first-child { border-top: 0; }
#frmDashboard .dashMedalAccRow.unmeasured .dashMedalTrophyRow {
  border-top-color: color-mix(in srgb, var(--yellow) 20%, transparent);
}
#frmDashboard .dashMedalTrophyRow:active {
  background: color-mix(in srgb, var(--black) 5%, transparent);
}
#frmDashboard .dashMedalAccRow.unmeasured .dashMedalTrophyRow:active {
  background: color-mix(in srgb, var(--yellow) 20%, transparent);
}

#frmDashboard .dashMedalTrophySpecies {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--black);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#frmDashboard .dashMedalTrophyDate {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--black) 55%, transparent);
}
#frmDashboard .dashMedalTrophySci {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--black);
}
#frmDashboard .dashMedalTrophyArrow {
  color: color-mix(in srgb, var(--black) 40%, transparent);
  display: grid;
  place-items: center;
}
#frmDashboard .dashMedalAccRow.unmeasured .dashMedalTrophyArrow {
  color: #b06e00;
}
#frmDashboard .dashMedalTrophyArrow svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* Muted "None yet." shown when an expanded category has no trophies. */
#frmDashboard .dashMedalNone {
  padding: 12px 14px;
  font-size: 12px;
  color: color-mix(in srgb, var(--black) 50%, transparent);
  font-style: italic;
}

/* Empty / low-medal encouragement — replaces the accordion when the PH
   has nothing at all (this year AND last year AND no unmeasured). */
#frmDashboard .dashMedalEmpty {
  margin-top: 12px;
  padding: 14px 14px;
  border-radius: 12px;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--accent) 6%, var(--white)) 0%,
    var(--white) 100%);
  border: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent);
}
#frmDashboard .dashMedalEmptyHead {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--black);
  line-height: 1.3;
}
#frmDashboard .dashMedalEmptySub {
  margin-top: 4px;
  font-size: 12px;
  color: color-mix(in srgb, var(--black) 55%, transparent);
}

/* ---------- MY STATS · Top 5 PHs by Wound Rate (HO only) ----------------
   Ranked list card — reuses the medal-list rhythm rather than a pie chart.
   Highest wound rate on top. Percentage is the emphasis; the "N of M"
   ratio sits beside it in muted text so the outfitter can sanity-check
   the sample size at a glance. */
#frmDashboard .dashWoundDesc {
  margin: 4px 0 12px;
  padding: 0;
  font-size: 12px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--black) 62%, transparent);
}
#frmDashboard .dashWoundEmpty {
  margin: 8px 0 0;
  padding: 12px 12px;
  border-radius: 10px;
  background: var(--cream);
  font-size: 12px;
  color: color-mix(in srgb, var(--black) 50%, transparent);
  font-style: italic;
  text-align: center;
}
#frmDashboard .dashWoundList {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#frmDashboard .dashWoundRow {
  display: grid;
  grid-template-columns: 24px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--cream);
  min-height: 46px;
}
#frmDashboard .dashWoundRank {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--black) 40%, transparent);
  text-align: center;
  line-height: 1;
}
#frmDashboard .dashWoundName {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--black);
  line-height: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#frmDashboard .dashWoundRatio {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--black) 50%, transparent);
  line-height: 1;
  min-width: 62px;
  text-align: right;
}
#frmDashboard .dashWoundPct {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 20px;
  color: var(--red);
  line-height: 1;
  min-width: 48px;
  text-align: right;
  letter-spacing: 0.02em;
}

/* ===== END FORM DASHBOARD v2 ============================================ */


/* ============================================================================
   FORM FAMILY v3 — CLIENT FORM RESTYLE (2026-07-14)
   Scoped to #frmClients.frm-v3 only. Do NOT bleed into other forms — the
   other v2 forms are unchanged until their own restyle turn.
   Preserves the existing .gFrmV2 hooks required by:
     · gUtils.showForm() display mechanism
     · the delegated address-toggle handler at js/index.js:15188 which
       flips .gFrmManualBlock.is-open + sets aria-expanded on
       .gFrmManualToggle
   ============================================================================ */

#frmClients.frm-v3 {
  --v3-orange: #ff5a1f;
  --v3-orange-soft: rgba(255, 90, 31, 0.09);
  --v3-orange-ring: rgba(255, 90, 31, 0.20);
  --v3-ink: #16150f;
  --v3-ink-soft: #3a362d;
  --v3-ink-muted: #6b6659;
  --v3-ink-faint: #9a9284;
  --v3-page: #f4f0e8;
  --v3-surface: #ffffff;
  --v3-surface-alt: #faf7f0;
  --v3-surface-sunk: #efe9d9;
  --v3-border: #e5dfd0;
  --v3-border-strong: #cdc4ac;
  --v3-danger: #c93737;
  --v3-danger-soft: #fdecec;
  --v3-success: #438945;
  --v3-success-dark: #367034;
  --v3-radius: 12px;
  --v3-radius-lg: 16px;
  --v3-shadow: 0 1px 2px rgba(22, 21, 15, 0.03), 0 6px 18px rgba(22, 21, 15, 0.05);

  background: var(--v3-page);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--v3-ink);
  padding-bottom: 100px; /* clears the fixed footer */
  padding-top: 0;
}
#frmClients.frm-v3,
#frmClients.frm-v3 *,
#frmClients.frm-v3 *::before,
#frmClients.frm-v3 *::after {
  box-sizing: border-box;
}

/* Header (black, sticky-top-of-form) */
#frmClients.frm-v3 .fv-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--v3-ink);
  color: #fff;
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 60px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
}
#frmClients.frm-v3 .fv-header-btn {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border: 0;
  background: transparent;
  color: #fff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
}
#frmClients.frm-v3 .fv-header-btn:active { background: rgba(255, 255, 255, 0.12); }
#frmClients.frm-v3 .fv-header-title {
  flex: 1;
  margin: 0;
  font-family: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.02em;
  color: #fff;
  line-height: 1;
  text-align: left;
}

/* Body
   2026-08-10 (QA T-003 / S2): bottom padding was 8px while the fixed action bar
   is ~77px tall, so the last field scrolled underneath it and could not be
   reached. Reserve the bar's height (+ safe area) as scroll clearance. */
#frmClients.frm-v3 .fv-body {
  padding: 14px 16px calc(96px + env(safe-area-inset-bottom));
}

/* Card */
#frmClients.frm-v3 .fv-card {
  background: var(--v3-surface);
  border: 1px solid var(--v3-border);
  border-radius: var(--v3-radius-lg);
  padding: 20px;
  margin-bottom: 12px;
  box-shadow: var(--v3-shadow);
}
#frmClients.frm-v3 .fv-card:last-child { margin-bottom: 0; }
#frmClients.frm-v3 .fv-card-eyebrow {
  font-family: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--v3-orange);
  margin: 0 0 12px;
  line-height: 1;
}
#frmClients.frm-v3 .fv-card-eyebrow .fv-tag {
  color: var(--v3-ink-faint);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.10em;
  margin-left: 4px;
}
#frmClients.frm-v3 .fv-card-note {
  font-size: 13px;
  color: var(--v3-ink-muted);
  margin: -4px 0 14px;
  line-height: 1.4;
  font-family: 'Inter', system-ui, sans-serif;
}

/* Field */
#frmClients.frm-v3 .fv-field { display: block; margin: 0 0 16px; }
#frmClients.frm-v3 .fv-field:last-child { margin-bottom: 0; }
#frmClients.frm-v3 .fv-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--v3-ink-soft);
  margin: 0 0 8px;
}
#frmClients.frm-v3 .fv-req { color: var(--v3-orange); font-weight: 700; }
#frmClients.frm-v3 .fv-tag {
  font-size: 10px;
  color: var(--v3-ink-faint);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.03em;
  margin-left: 4px;
}

/* Input — reset any inherited v2 chrome, then apply v3 style */
#frmClients.frm-v3 .fv-input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  margin: 0;
  border: 1.5px solid var(--v3-border-strong);
  border-radius: var(--v3-radius);
  background: var(--v3-surface);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: var(--v3-ink);
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
  outline: none;
  letter-spacing: 0;
  text-transform: none;
  display: block;
  line-height: normal;
}
#frmClients.frm-v3 .fv-input::placeholder { color: var(--v3-ink-faint); opacity: 1; }
#frmClients.frm-v3 .fv-input:focus {
  outline: none;
  border-color: var(--v3-orange);
  box-shadow: 0 0 0 4px var(--v3-orange-ring);
  background: #fff;
}

/* Input suffix (search icon inside address search) */
#frmClients.frm-v3 .fv-wrap { position: relative; }
#frmClients.frm-v3 .fv-wrap .fv-input { padding-right: 46px; }
#frmClients.frm-v3 .fv-suffix {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--v3-ink-muted);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

/* Manual address toggle */
#frmClients.frm-v3 .fv-manual-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 0;
  color: var(--v3-orange);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 0;
  margin: 4px 0 0;
  -webkit-tap-highlight-color: transparent;
  text-align: left;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.2;
}
#frmClients.frm-v3 .fv-manual-toggle .fv-manual-toggle-chev {
  transition: transform 200ms ease;
  flex-shrink: 0;
  color: currentColor;
}
#frmClients.frm-v3 .fv-manual-toggle[aria-expanded="true"] .fv-manual-toggle-chev {
  transform: rotate(180deg);
}
#frmClients.frm-v3 .fv-manual-toggle .fv-manual-toggle-label--open { display: none; }
#frmClients.frm-v3 .fv-manual-toggle[aria-expanded="true"] .fv-manual-toggle-label--closed { display: none; }
#frmClients.frm-v3 .fv-manual-toggle[aria-expanded="true"] .fv-manual-toggle-label--open { display: inline; }

/* Manual block — hooks the existing delegated toggler that flips .is-open */
#frmClients.frm-v3 .gFrmManualBlock {
  display: none;
  flex-direction: column;
  gap: 16px;
  padding-top: 12px;
  margin: 0;
}
#frmClients.frm-v3 .gFrmManualBlock.is-open { display: flex; }

/* Two-column row for city + postal */
#frmClients.frm-v3 .fv-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
#frmClients.frm-v3 .fv-row-2 .fv-field { margin-bottom: 0; }

/* Sticky footer — fixed to viewport bottom (only visible when this form is shown)
   2026-08-10 (QA T-003 / S2): z-index was 30, but the app's bottom nav
   (.mainMenu) is z-index: 1000 and occupies the same strip at the bottom of the
   viewport. The whole action bar was therefore painted BEHIND the nav — on a
   real phone the Save button was simply not there. Measured before the fix at
   390x844: footer top 767 / buttons top 780, nav top 779 — the buttons sat
   entirely inside the nav band, at every width tested (360 / 390 / 768 / 1280).
   Raised above the nav but kept below the drawer + scrim (9000/9001) and the
   modal layers (9999+), so the drawer still covers this form correctly. */
#frmClients.frm-v3 .fv-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid var(--v3-border);
  display: flex;
  gap: 10px;
  z-index: 1100;
  margin: 0;
}
@media (min-width: 421px) {
  /* Mirror the mockup: constrain footer to the mobile shell width on desktop */
  #frmClients.frm-v3 .fv-footer {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 100%;
    max-width: 420px;
  }
}

/* Footer buttons */
#frmClients.frm-v3 .fv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 52px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--v3-radius);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: 120ms ease;
  -webkit-tap-highlight-color: transparent;
  line-height: 1;
  flex: 1 1 0;
  min-width: 0;
  text-transform: none;
  box-shadow: none;
  outline: none;
  margin: 0;
}
#frmClients.frm-v3 .fv-btn-primary {
  background: var(--v3-success);
  color: #fff;
  flex: 1.5 1 0;
}
#frmClients.frm-v3 .fv-btn-primary:active { background: var(--v3-success-dark); }
/* In-flight save (2026-08-10, F3-feedback double-submit guard). valData()
   sets disabled + aria-busy on #frmClientBtnSave from the tap until the
   response settles, and swaps the label to "SAVING…". This is the visual
   half: the button reads as busy rather than dead, and cannot be re-tapped.
   Scoped with the same #frmClients.frm-v3 prefix as the rules above — a bare
   .fv-btn:disabled would lose the cascade to them. */
#frmClients.frm-v3 .fv-btn:disabled,
#frmClients.frm-v3 .fv-btn[disabled] {
  opacity: 0.62;
  cursor: default;
  pointer-events: none;
}
#frmClients.frm-v3 .fv-btn-primary:disabled { background: var(--v3-success); }
#frmClients.frm-v3 .fv-btn-ghost {
  background: #fff;
  color: var(--v3-ink);
  border: 1.5px solid var(--v3-border-strong);
}
#frmClients.frm-v3 .fv-btn-ghost:active { background: var(--v3-surface-sunk); }
#frmClients.frm-v3 .fv-btn-danger {
  background: transparent;
  color: var(--v3-danger);
  border: 1.5px solid var(--v3-danger);
}
#frmClients.frm-v3 .fv-btn-danger:active {
  background: var(--v3-danger);
  color: #fff;
}
/* Delete is hidden by default; JS loadUpdate() sets inline display:flex to reveal
   in edit mode, and clearForm() sets inline display:none in add mode. */
#frmClients.frm-v3 #frmClientBtnDelete { display: none; }

/* ===== END FORM FAMILY v3 — CLIENT ======================================= */


/* ============================================================
   2026-08-10 (QA T-001 / A2) — trophy-wizard confirm dialog was invisible.
   #tlogWizard is a full-viewport overlay at z-index: 10000. The confirm
   dialog it raises is the SAME gUtils.showInfoBox() the Log Out dialog uses,
   but that renders at .infoBox z-index: 9999 with .gMask at z-index: 2 — i.e.
   both paint UNDERNEATH the wizard. The dialog was fully functional the whole
   time (Confirm/Cancel wired, clicks worked when dispatched via JS); it simply
   could not be seen, while the species list stayed visible on top. Log Out
   renders correctly because no wizard overlay is present in that flow.

   Render fix only — no wizard-flow changes (that department is closed).
   Scoped to body.tlog-openLock, which TlogWizardUtils.open()/close() add and
   remove, so stacking outside the wizard is untouched.
   ============================================================ */
body.tlog-openLock .gMask {
  z-index: 10001;
}
body.tlog-openLock .infoBox {
  z-index: 10002;
}

/* ============================================================
   2026-08-10 — drawer stacking. Sub-screen headers (and the footer nav)
   painted ABOVE the open hamburger drawer.

   Cause: screen chrome sits at z-index: 1000 — .gFrmHeader (sticky screen
   header), #frmSearch .frmSrcHeader, and .mainMenu (footer nav) — while the
   drawer was z-index: 50 and its scrim z-index: 40. So any screen with the
   sticky header pattern floated on top of the drawer, and the footer nav did
   too (footer not in the original report, same root cause, fixed here).

   NOT caused by the v332 wizard-dialog change: that rule is scoped to
   body.tlog-openLock and only applies while the wizard is open. .gFrmHeader
   has been z-index: 1000 since at least SW v310 — this is long-standing and
   was simply surfaced by real-phone testing.

   Rule of thumb encoded here: the drawer + scrim sit above ALL screen
   content; only true modals sit above the drawer.
     screen chrome (headers, footer nav) .... 1000
     scrim .................................. 9000   <-- this block
     drawer ................................. 9001   <-- this block
     infoBox dialogs ........................ 9999
     trophy wizard overlay .................. 10000
     infoBox while wizard open .............. 10001/10002 (v332 block above)

   Stacking only — no header or drawer restructuring.
   ============================================================ */
.menuScrim {
  z-index: 9000;
}
#appViewDropMenu {
  z-index: 9001 !important; /* !important mirrors the base rule it overrides */
}