/* =====================================================================
   Animated control kit — shared by the staff app and the member portal.

   Replaces native <input>, <select> and <input type=date>, which cannot be
   styled consistently and look nothing like the rest of the design. Every
   control here is built from a button or a plain div, so it renders the same
   in every browser and can animate.

   Depends on the design tokens in crm.css. Fallbacks are given so this file
   also works standalone (the member portal loads it before its own theme).
   ===================================================================== */

.kit{
  --k-accent:var(--accent,#1E7845);
  --k-accent-soft:var(--accent-soft,rgba(30,120,69,.14));
  --k-line:var(--line,#ECEAE5);
  --k-ink:var(--ink,#16171B);
  --k-muted:var(--muted,#6B6F76);
  --k-faint:var(--faint,#A2A5AC);
  --k-card:var(--card,#fff);
  --k-sunk:var(--sunk,#FAF9F7);
  --k-red:var(--red,#E8341C);
  --k-r:var(--r-ctl,10px);
  --k-ease:cubic-bezier(.4,0,.2,1);
}

/* Users who ask for less motion get the states without the movement. */
@media (prefers-reduced-motion:reduce){
  .kit *,.kit *::before,.kit *::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ---------------------------------------------------------- text field */
/* The label starts inside the box as placeholder text and lifts into the
   border when the control is focused or holds a value, so the field never
   needs a separate label line above it. */
.kf{position:relative;display:block}
.kf .kf-in{
  width:100%;border:1.5px solid var(--k-line);border-radius:var(--k-r);
  background:var(--k-card);color:var(--k-ink);
  font:inherit;font-size:14px;line-height:1.25;padding:23px 13px 8px;outline:none;
  transition:border-color .18s var(--k-ease),box-shadow .18s var(--k-ease);
}
.kf textarea.kf-in{resize:none;min-height:88px;line-height:1.45}
/* Native date/time inputs bring their own inner widget (Chrome's
   ::-webkit-datetime-edit plus a picker button) which is centred in the
   content box and taller than a line of text, so they need the same padding
   spelled out or they end up 2-3px taller than every field beside them —
   which is exactly how "07:15 PM" came to sit under the word "Time".
   Chrome also gives that inner widget a minimum height of its own, which made
   a time field ~3px taller than the text field beside it in the same grid
   row — two controls that are obviously meant to match, not matching.
   Pinning the inner editor's line-height brings it back into line. */
.kf input[type=time].kf-in,.kf input[type=date].kf-in,
.kf input[type="datetime-local"].kf-in,.kf input[type=month].kf-in{
  min-height:0;height:auto;
}
.kf .kf-in::-webkit-datetime-edit{line-height:1.25;padding:0}
.kf .kf-in::-webkit-datetime-edit-fields-wrapper{padding:0}
.kf .kf-in::-webkit-calendar-picker-indicator{margin:0;opacity:.55;cursor:pointer}
.kf .kf-in::-webkit-calendar-picker-indicator:hover{opacity:1}
/* The floating label. `line-height:1` is load-bearing: without it the label's
   box is 1.5 lines tall, and the lifted label's bottom edge lands inside the
   input's text area — a one-pixel overlap on a text field and a visible
   collision on a native time input, which draws its value higher. With an
   exact-height box the numbers below are checkable: at rest the 14px label
   sits at y=19; lifted it is 10.5px tall at y=7, and the value's first line
   starts at y=24.5. Seven pixels of daylight, on purpose. */
.kf .kf-lab{
  position:absolute;left:14px;top:19px;
  font-size:14px;line-height:1;color:var(--k-faint);font-weight:600;
  pointer-events:none;transform-origin:left top;
  max-width:calc(100% - 28px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:transform .18s var(--k-ease),color .18s var(--k-ease);
}
.kf.filled .kf-lab,.kf.focus .kf-lab{transform:translateY(-12px) scale(.75)}
.kf.focus .kf-lab{color:var(--k-accent)}
.kf.focus .kf-in{border-color:var(--k-accent);box-shadow:0 0 0 3.5px var(--k-accent-soft)}
.kf.bad .kf-in{border-color:var(--k-red)}
.kf.bad .kf-lab{color:var(--k-red)}
.kf .kf-hint{font-size:11.5px;color:var(--k-faint);margin:5px 2px 0;min-height:1em}
.kf.bad .kf-hint{color:var(--k-red)}
.kf .kf-suffix{position:absolute;right:13px;top:50%;transform:translateY(-50%);font-size:13px;color:var(--k-faint);font-weight:700;pointer-events:none}
.kf.has-prefix .kf-in{padding-left:30px}
/* has-prefix moved the INPUT's text clear of the "£" but not the floating
   label, so the resting label sat directly on top of the prefix — "£" and
   "Discount" overlapping in the same 1px column. The label has to move with
   it. transform-origin is left top, so shifting `left` keeps the lifted
   (scaled) position aligned too. */
.kf.has-prefix .kf-lab{left:30px}
/* The prefix is only meaningful once the label has lifted out of the way;
   before that it is decoration competing with the label for the same space. */
.kf .kf-prefix{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:13.5px;color:var(--k-muted);font-weight:700;pointer-events:none;opacity:0;transition:opacity .18s var(--k-ease)}
.kf.filled .kf-prefix,.kf.focus .kf-prefix{opacity:1}
@media (prefers-reduced-motion:reduce){.kf .kf-prefix{transition:none}}

/* ---- 16px on touch, and it has to be exactly 16 ----
   iOS Safari zooms the page in when you focus a control whose computed
   font-size is under 16px, and it does NOT zoom back out when the control
   blurs. That is the whole of the "I log in on my phone and land in the app
   zoomed in" bug: the sign-in field was 14px, focusing it zoomed, and the
   zoom then rode along into the app. The fix people reach for first is
   `maximum-scale=1, user-scalable=no` on the viewport tag, which also takes
   pinch-zoom away from everyone who actually needs it — so: 16px instead.

   Bumping the font means redoing the label arithmetic, which is spelled out
   on .kf-lab above. At 16px/1: the resting label is a 16px box at y=20; the
   content box starts at y=24 so the value's glyphs land around y=26; lifted,
   the label is 16 x .7 = 11.2px tall at y=7, ending at 18.2. Just under 6px
   of daylight — the same shape of answer as the 14px case, recomputed. */
@media (pointer:coarse){
  .kf .kf-in,.ktrig{font-size:16px;padding-top:24px;padding-bottom:8px}
  .kf .kf-lab{font-size:16px;top:20px}
  .kf.filled .kf-lab,.kf.focus .kf-lab{transform:translateY(-13px) scale(.7)}
  .kf .kf-prefix{font-size:15px}
  .kf .kf-suffix{font-size:14px}
  .kstep .ks-val{font-size:16px}
}

/* ------------------------------------------------------------ trigger */
/* Shared look for controls that open a popover: select, date, time. */
.ktrig{
  width:100%;display:flex;align-items:center;gap:10px;text-align:left;
  border:1.5px solid var(--k-line);border-radius:var(--k-r);background:var(--k-card);
  color:var(--k-ink);font:inherit;font-size:14px;line-height:1.25;
  padding:23px 13px 8px;cursor:pointer;
  transition:border-color .18s var(--k-ease),box-shadow .18s var(--k-ease);
}
.ktrig:hover{border-color:#DAD6CE}
.kf.open .ktrig,.ktrig:focus-visible{border-color:var(--k-accent);box-shadow:0 0 0 3.5px var(--k-accent-soft);outline:none}
.ktrig .kt-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ktrig .kt-val.ph{color:var(--k-faint)}
.ktrig .kt-caret{flex-shrink:0;transition:transform .2s var(--k-ease);color:var(--k-muted)}
.kf.open .ktrig .kt-caret{transform:rotate(180deg)}
.ktrig .kt-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}

/* ------------------------------------------------------------ popover */
@keyframes kpopIn{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
/* Sized to its content, never to the trigger. Pinning left:0 AND right:0 made
   the panel exactly as wide as the field, so a 268px calendar hung out of a
   180px panel — the overhang. width:max-content lets the panel grow to the
   calendar and min-width keeps a narrow menu at least as wide as its field. */
.kpop{
  position:absolute;z-index:80;left:0;right:auto;top:calc(100% + 6px);
  width:max-content;min-width:100%;max-width:min(320px,calc(100vw - 24px));
  background:var(--k-card);border:1px solid var(--k-line);border-radius:14px;
  box-shadow:0 16px 40px rgba(0,0,0,.14);padding:6px;
  animation:kpopIn .16s var(--k-ease);transform-origin:top left;
}
/* Anchored to the right edge instead, when opening leftwards would run off screen. */
.kpop.right{left:auto;right:0;transform-origin:top right}
.kpop.up.right{transform-origin:bottom right}
.kpop.up{top:auto;bottom:calc(100% + 6px);transform-origin:bottom left}
.kpop .kp-scroll{max-height:236px;overflow-y:auto;scrollbar-width:none}
.kpop .kp-scroll::-webkit-scrollbar{width:0}
.kopt{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  border:none;background:none;font:inherit;font-size:13.5px;color:var(--k-ink);
  padding:9px 11px;border-radius:9px;cursor:pointer;
  transition:background .12s var(--k-ease);
}
.kopt:hover,.kopt.cursor{background:var(--k-sunk)}
.kopt.on{background:var(--k-accent-soft);color:var(--k-accent);font-weight:700}
.kopt .tick{margin-left:auto;opacity:0;transition:opacity .12s}
.kopt.on .tick{opacity:1}
.kopt .kt-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.kpop .kp-search{
  width:100%;border:none;border-bottom:1px solid var(--k-line);background:none;
  font:inherit;font-size:13.5px;padding:8px 11px 10px;margin-bottom:4px;outline:none;color:var(--k-ink);
}
.kpop .kp-none{padding:14px 11px;font-size:13px;color:var(--k-faint);text-align:center}

/* -------------------------------------------------------------- chips */
/* Used for "which days does this class run?" — tap to toggle, no dropdown. */
.kchips{display:flex;flex-wrap:wrap;gap:7px}
.kchip{
  border:1.5px solid var(--k-line);background:var(--k-card);color:var(--k-muted);
  font:inherit;font-size:12.5px;font-weight:700;padding:7px 13px;border-radius:var(--r-pill,20px);
  cursor:pointer;transition:transform .14s var(--k-ease),background .14s var(--k-ease),
    color .14s var(--k-ease),border-color .14s var(--k-ease);
}
.kchip:hover{border-color:#D6D2C9;transform:translateY(-1px)}
.kchip.on{background:var(--k-accent);border-color:var(--k-accent);color:#fff}
.kchip:active{transform:scale(.94)}
.kchip.sq{border-radius:10px;min-width:44px;text-align:center;padding:8px 10px}

/* ----------------------------------------------------------- calendar */
@keyframes kdayIn{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
.kcal{width:268px;max-width:100%;user-select:none}
.kcal .kc-head{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 10px;gap:6px}
.kcal .kc-title{font-family:var(--display,inherit);font-weight:700;font-size:14px;background:none;border:none;cursor:pointer;color:inherit;padding:2px 6px;border-radius:6px;transition:background .14s var(--k-ease)}
.kcal .kc-title:hover{background:var(--k-sunk)}
.kcal .kc-jump{display:flex;align-items:center;gap:6px;flex:1}
.kcal .kc-jump select{
  font:inherit;font-size:13px;font-weight:700;color:var(--k-ink);background:var(--k-sunk);
  border:none;border-radius:8px;padding:5px 6px;cursor:pointer;
}
.kcal .kc-jump-month{flex:1;min-width:0}
.kcal .kc-nav{
  width:28px;height:28px;border-radius:8px;border:none;background:none;cursor:pointer;
  color:var(--k-muted);display:flex;align-items:center;justify-content:center;
  transition:background .14s var(--k-ease),color .14s var(--k-ease);
}
.kcal .kc-nav:hover{background:var(--k-sunk);color:var(--k-ink)}
.kcal .kc-dows{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:3px}
.kcal .kc-dow{text-align:center;font-size:10.5px;font-weight:800;color:var(--k-faint);text-transform:uppercase;letter-spacing:.04em}
.kcal .kc-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.kcal .kc-day{
  aspect-ratio:1;border:none;background:none;font:inherit;font-size:12.5px;font-weight:700;
  color:var(--k-ink);border-radius:9px;cursor:pointer;position:relative;
  animation:kdayIn .18s var(--k-ease) backwards;
  transition:background .14s var(--k-ease),color .14s var(--k-ease),transform .14s var(--k-ease);
}
.kcal .kc-day:hover:not(:disabled){background:var(--k-sunk)}
.kcal .kc-day.dim{color:var(--k-faint);font-weight:600}
.kcal .kc-day.today{box-shadow:inset 0 0 0 1.5px var(--k-line)}
.kcal .kc-day.on{background:var(--k-accent);color:#fff;transform:scale(1.04)}
.kcal .kc-day.on:hover{background:var(--k-accent)}
.kcal .kc-day.inrange{background:var(--k-accent-soft);color:var(--k-accent);border-radius:0}
.kcal .kc-day:disabled{opacity:.3;cursor:default}
.kcal .kc-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:9px;margin-top:6px;border-top:1px solid var(--k-line)}
.kcal .kc-count{font-size:11.5px;color:var(--k-muted);font-weight:700}
.kcal .kc-clear{background:none;border:none;font:inherit;font-size:11.5px;font-weight:700;color:var(--k-muted);cursor:pointer;padding:0}
.kcal .kc-clear:hover{color:var(--k-red)}

/* --------------------------------------------------------------- time */
.ktime{display:flex;gap:6px;width:236px}
.ktime .kt-col{flex:1;max-height:190px;overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:2px}
.ktime .kt-col::-webkit-scrollbar{width:0}
.ktime .kt-cell{
  border:none;background:none;font:inherit;font-size:13px;font-weight:700;color:var(--k-ink);
  padding:7px 0;border-radius:8px;cursor:pointer;text-align:center;
  transition:background .12s var(--k-ease),color .12s var(--k-ease);
}
.ktime .kt-cell:hover{background:var(--k-sunk)}
.ktime .kt-cell.on{background:var(--k-accent);color:#fff}

/* ------------------------------------------------------------ stepper */
.kstep{display:flex;align-items:center;gap:0;border:1.5px solid var(--k-line);border-radius:var(--k-r);overflow:hidden;background:var(--k-card)}
.kstep button{
  width:38px;height:38px;border:none;background:none;font:inherit;font-size:17px;font-weight:700;
  color:var(--k-muted);cursor:pointer;flex-shrink:0;
  transition:background .12s var(--k-ease),color .12s var(--k-ease);
}
.kstep button:hover:not(:disabled){background:var(--k-sunk);color:var(--k-accent)}
.kstep button:disabled{opacity:.35;cursor:default}
.kstep .ks-val{flex:1;text-align:center;font-weight:800;font-size:14px;font-variant-numeric:tabular-nums}
.kstep .ks-unit{font-size:11.5px;color:var(--k-faint);font-weight:700;padding-right:11px}

/* --------------------------------------------------------------- misc */
.kgrid{display:grid;gap:13px}
.kgrid.c2{grid-template-columns:1fr 1fr}
.kgrid.c3{grid-template-columns:repeat(3,1fr)}
.klabel{font-size:11.5px;color:var(--k-muted);font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin-bottom:7px;display:block}
@media (max-width:640px){
  .kgrid.c2,.kgrid.c3{grid-template-columns:1fr}
  .kcal{width:100%}
}