/* ============================================================
   WORKZOOM FORM ATOMS — specialized layer
   ------------------------------------------------------------
   Ported from the Component Showcase, re-mapped onto live tokens.
   These are the lower-frequency controls (steppers, pickers, OTP,
   files, etc.). Loaded ONLY on pages that set `formsJs: true`, so
   the site-wide render-blocking budget stays lean (core controls
   live in forms.css and load globally).

   Same rules as forms.css: tokens only, light-only, Switzer, no
   pills, no raw hex / rgba. Floating panels reuse .wz-popover from
   forms.css for the open/close transition; widths set per widget.
   ============================================================ */

/* ---- Number stepper ---------------------------------------- */
.wz-num { display: flex; align-items: center; width: 100%; max-width: 200px; }
.wz-num-btn {
  width: var(--field-h);
  height: var(--field-h);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  background: var(--surface-card);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-color),
              background-color var(--dur-fast) var(--ease-color),
              color var(--dur-fast) var(--ease-color);
}
.wz-num-btn:hover { background: var(--n25); color: var(--color-text-primary); border-color: var(--n300); }
.wz-num-btn:active { background: var(--color-surface-inset); }
.wz-num-btn:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
.wz-num-btn:last-child  { border-radius: 0 var(--r-md) var(--r-md) 0; }
.wz-num .wz-input {
  border-radius: 0;
  border-left: none;
  border-right: none;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-medium);
}

/* ---- Percentage field -------------------------------------- */
.wz-pct {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 200px;
  height: var(--field-h);
  padding: 0 var(--field-pad-x);
  background: var(--surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  transition: border-color var(--dur-fast) var(--ease-color),
              box-shadow var(--dur-fast) var(--ease-color);
}
.wz-pct:hover { border-color: var(--n300); }
.wz-pct:focus-within { border-color: var(--field-border-focus); box-shadow: var(--field-ring); }
.wz-pct-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  text-align: right;
  font-family: var(--font);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
}
.wz-pct-suffix { margin-left: var(--gap-2xs); color: var(--color-text-tertiary); font-weight: var(--fw-medium); }
.wz-pct-track { position: relative; height: 3px; margin-top: var(--gap-xs); background: var(--n25); border-radius: var(--r-xs); overflow: hidden; }
.wz-pct-fill  { height: 100%; background: var(--brand-green); border-radius: var(--r-xs); transition: width var(--dur-default) var(--ease-entrance); }

/* ---- Slider ------------------------------------------------ */
.wz-slider { position: relative; display: flex; align-items: center; height: 32px; width: 100%; margin-top: var(--gap-xs); }
.wz-slider-track { position: absolute; top: 50%; left: 0; right: 0; height: 4px; transform: translateY(-50%); background: var(--n25); border-radius: var(--r-xs); overflow: hidden; }
.wz-slider-fill  { height: 100%; background: var(--brand-green); border-radius: var(--r-xs); }
.wz-slider-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; }
.wz-slider-thumb {
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  background: var(--surface-card);
  border: 2px solid var(--brand-green);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  pointer-events: none;
  transition: box-shadow var(--dur-fast) var(--ease-color), transform var(--dur-fast) var(--ease);
}
.wz-slider-input:hover + .wz-slider-thumb,
.wz-slider-input:focus-visible + .wz-slider-thumb { box-shadow: var(--field-ring); transform: translate(-50%, -50%) scale(1.05); }

/* ---- Phone (country prefix + number) ----------------------- */
.wz-phone { position: relative; display: flex; }
.wz-phone-country {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  height: var(--field-h);
  padding: 0 var(--gap-sm) 0 var(--field-pad-x);
  background: var(--surface-card);
  border: 1px solid var(--color-border);
  border-right: none;
  border-radius: var(--r-md) 0 0 var(--r-md);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-color);
}
.wz-phone-country:hover { background: var(--n25); }
.wz-phone-flag { font-size: var(--text-base); line-height: 1; }
.wz-phone-dial { font-family: var(--mono); font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--color-text-secondary); }
.wz-phone .wz-input { border-radius: 0 var(--r-md) var(--r-md) 0; flex: 1; font-variant-numeric: tabular-nums; }
.wz-phone:focus-within .wz-phone-country { border-color: var(--field-border-focus); }

/* ---- Currency (amount + currency picker) ------------------- */
.wz-cur {
  display: flex;
  align-items: stretch;
  position: relative;
  height: var(--field-h);
  background: var(--surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  transition: border-color var(--dur-fast) var(--ease-color), box-shadow var(--dur-fast) var(--ease-color);
}
.wz-cur:hover { border-color: var(--n300); }
.wz-cur:focus-within { border-color: var(--field-border-focus); box-shadow: var(--field-ring); }
.wz-cur-prefix { display: flex; align-items: center; padding-left: var(--field-pad-x); font-weight: var(--fw-semibold); color: var(--color-text-tertiary); flex-shrink: 0; }
.wz-cur-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0 var(--gap-xs) 0 var(--gap-2xs);
  font-family: var(--font);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
  outline: none;
}
.wz-cur-picker {
  display: flex;
  align-items: center;
  gap: var(--gap-2xs);
  padding: 0 var(--gap-sm) 0 var(--field-pad-x);
  background: transparent;
  border: none;
  border-left: 1px solid var(--color-border);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color var(--dur-fast) var(--ease-color);
}
.wz-cur-picker:hover { background: var(--n25); }
.wz-cur-code { font-family: var(--mono); font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--color-text-secondary); }

/* ---- Calendar / date picker -------------------------------- */
.wz-date-trigger,
.wz-time-trigger { width: 100%; display: flex; align-items: center; cursor: pointer; text-align: left; font-variant-numeric: tabular-nums; }
.wz-cal-popover { width: 320px; padding: var(--gap-sm); }
.wz-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--gap-sm); }
.wz-cal-nav {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-color), color var(--dur-fast) var(--ease-color);
}
.wz-cal-nav:hover { background: var(--color-surface-inset); color: var(--color-text-primary); }
.wz-cal-month { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--color-text-primary); }
.wz-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--field-nudge); }
.wz-cal-dow {
  font-family: var(--mono);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--gap-xs) 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.wz-cal-day {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: var(--r-sm);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color var(--dur-snap) var(--ease-color);
}
.wz-cal-day:hover { background: var(--color-surface-inset); }
.wz-cal-day.is-other { color: var(--n300); }
.wz-cal-day.is-today { font-weight: var(--fw-semibold); color: var(--color-text-primary); position: relative; }
.wz-cal-day.is-today::after { content: ''; position: absolute; bottom: var(--field-gap-4); left: 50%; transform: translateX(-50%); width: 4px; height: 4px; background: var(--brand-green); border-radius: 50%; }
.wz-cal-day.is-selected { background: var(--brand-green); color: var(--white); font-weight: var(--fw-semibold); }
.wz-cal-day.is-in-range { background: var(--brand-green-50); color: var(--brand-green-deep); border-radius: 0; }
.wz-cal-day.is-range-start { background: var(--brand-green); color: var(--white); border-radius: var(--r-sm) 0 0 var(--r-sm); }
.wz-cal-day.is-range-end   { background: var(--brand-green); color: var(--white); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.wz-cal-foot { display: flex; justify-content: space-between; margin-top: var(--gap-sm); padding-top: var(--gap-xs); border-top: 1px solid var(--color-border); }
.wz-cal-btn {
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
  background: transparent;
  border: none;
  padding: var(--gap-2xs) var(--gap-sm);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-color);
}
.wz-cal-btn:hover { background: var(--color-surface-inset); }
.wz-cal-btn.is-muted { color: var(--color-text-tertiary); }

/* Date-range presets layout */
.wz-range-popover { width: auto; padding: 0; }
.wz-range-layout { display: grid; grid-template-columns: 160px 1fr; }
.wz-range-presets { display: flex; flex-direction: column; gap: var(--field-nudge); padding: var(--gap-sm); background: var(--n25); border-right: 1px solid var(--color-border); }
.wz-range-preset {
  text-align: left;
  padding: var(--gap-xs) var(--gap-sm);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-color), color var(--dur-fast) var(--ease-color);
}
.wz-range-preset:hover { background: var(--surface-card); color: var(--color-text-primary); }
.wz-range-preset.is-active { background: var(--brand-green); color: var(--white); }
.wz-range-cal { padding: var(--gap-sm); }

/* ---- Time picker ------------------------------------------- */
.wz-time-popover { width: 240px; padding: var(--gap-tween); }
.wz-time-stepper { display: flex; align-items: center; justify-content: center; gap: var(--gap-xs); margin-bottom: var(--gap-sm); }
.wz-time-col { display: flex; flex-direction: column; align-items: center; gap: var(--gap-2xs); }
.wz-time-arrow {
  width: 32px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-color), color var(--dur-fast) var(--ease-color);
}
.wz-time-arrow:hover { background: var(--color-surface-inset); color: var(--color-text-primary); }
.wz-time-value {
  width: 64px;
  text-align: center;
  padding: var(--gap-2xs) 0;
  font-family: var(--mono);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
  background: var(--n25);
  border-radius: var(--r-sm);
}
.wz-time-sep { font-family: var(--mono); font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--color-text-muted); margin-bottom: var(--field-mb); }
.wz-time-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-xs); padding-top: var(--gap-sm); border-top: 1px solid var(--color-border); }
.wz-time-quick button {
  padding: var(--gap-xs);
  font-family: var(--mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  background: var(--n25);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-color), border-color var(--dur-fast) var(--ease-color), color var(--dur-fast) var(--ease-color);
}
.wz-time-quick button:hover { background: var(--surface-card); border-color: var(--navy-200); color: var(--color-text-primary); }

/* ---- Year / month picker ----------------------------------- */
.wz-ym-popover { width: 280px; padding: var(--gap-sm); }
.wz-ym-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-sm); }
.wz-ym-col-label { font-size: var(--text-eyebrow); font-weight: var(--fw-bold); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; text-align: center; margin-bottom: var(--gap-xs); }
.wz-ym-list { height: 220px; overflow-y: auto; display: grid; grid-template-columns: 1fr; gap: var(--field-nudge); }
.wz-ym-list::-webkit-scrollbar { width: 4px; }
.wz-ym-list::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--r-xs); }
.wz-ym-item {
  padding: var(--gap-xs);
  text-align: center;
  font-family: var(--mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background-color var(--dur-snap) var(--ease-color);
}
.wz-ym-item:hover { background: var(--color-surface-inset); }

/* ---- Password strength ------------------------------------- */
.wz-pwd-input { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.wz-pwd-meter { display: flex; align-items: center; gap: var(--gap-sm); margin-top: var(--gap-xs); }
.wz-pwd-bar { flex: 1; height: 4px; background: var(--n25); border-radius: var(--r-xs); overflow: hidden; }
.wz-pwd-fill { height: 100%; width: 0%; background: var(--status-error); border-radius: var(--r-xs); transition: width var(--dur-default) var(--ease-entrance), background-color var(--dur-fast) var(--ease-color); }
.wz-pwd-label { width: 56px; text-align: right; font-size: var(--text-eyebrow); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-tertiary); }
.wz-pwd-checks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-xs) var(--gap-sm); margin-top: var(--gap-sm); padding: var(--gap-sm); background: var(--n25); border-radius: var(--r-md); }
.wz-pwd-check { display: flex; align-items: center; gap: var(--gap-2xs); font-size: var(--text-xs); color: var(--color-text-tertiary); }
.wz-pwd-check span { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: var(--color-border); color: var(--white); }
.wz-pwd-check.is-met { color: var(--color-text-primary); }
.wz-pwd-check.is-met span { background: var(--brand-green); }

/* ---- OTP --------------------------------------------------- */
.wz-otp { display: flex; align-items: center; gap: var(--gap-xs); }
.wz-otp-box {
  width: 44px;
  height: 52px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  background: var(--surface-card);
  font-family: var(--mono);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  text-align: center;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-fast) var(--ease-color), box-shadow var(--dur-fast) var(--ease-color), background-color var(--dur-fast) var(--ease-color);
}
.wz-otp-box:focus { outline: none; border-color: var(--field-border-focus); box-shadow: var(--field-ring); }
.wz-otp-box.is-filled { background: var(--brand-green-50); border-color: var(--brand-green); color: var(--brand-green-deep); }
.wz-otp-sep { font-family: var(--mono); color: var(--n300); font-size: var(--text-base); margin: 0 var(--field-nudge); }

/* ---- Dropzone + file rows ---------------------------------- */
.wz-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xs);
  padding: var(--gap-lg) var(--gap-md);
  border: 1.5px dashed var(--color-border);
  border-radius: var(--r-lg);
  background: var(--n25);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-color), background-color var(--dur-fast) var(--ease-color);
}
.wz-dropzone:hover, .wz-dropzone.is-drag { border-color: var(--brand-green); background: var(--brand-green-50); }
.wz-dropzone-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface-card); border: 1px solid var(--color-border); color: var(--brand-green-deep); margin-bottom: var(--gap-2xs); }
.wz-dropzone-title { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--color-text-primary); }
.wz-dropzone-title span { color: var(--brand-green-text); text-decoration: underline; text-decoration-color: var(--brand-green-light); text-underline-offset: 2px; }
.wz-dropzone-meta { font-size: var(--text-xs); color: var(--color-text-tertiary); }
.wz-file-row { display: flex; align-items: center; gap: var(--gap-sm); padding: var(--gap-sm); background: var(--surface-card); border: 1px solid var(--color-border); border-radius: var(--r-md); transition: border-color var(--dur-fast) var(--ease-color), box-shadow var(--dur-fast) var(--ease-color); }
.wz-file-row:hover { border-color: var(--n300); box-shadow: var(--shadow-sm); }
.wz-file-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-sm); font-size: var(--text-eyebrow); font-weight: var(--fw-bold); letter-spacing: 0.05em; flex-shrink: 0; color: var(--white); }
.wz-file-pdf { background: linear-gradient(135deg, var(--status-error), var(--error-dark)); }
.wz-file-img { background: var(--brand-gradient); }
.wz-file-doc { background: var(--status-info); }
.wz-file-info { flex: 1; min-width: 0; }
.wz-file-name { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wz-file-meta { font-size: var(--text-eyebrow); color: var(--color-text-tertiary); }
.wz-file-actions { display: flex; gap: var(--gap-2xs); flex-shrink: 0; }
.wz-file-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 var(--gap-sm);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-color), color var(--dur-fast) var(--ease-color);
}
.wz-file-btn:hover { background: var(--color-surface-inset); color: var(--color-text-primary); }
.wz-file-btn.is-danger:hover { background: var(--error-bg); color: var(--error-text); }

/* ---- Color picker ------------------------------------------ */
.wz-color { position: relative; width: 100%; max-width: 280px; }
.wz-color-trigger {
  width: 100%;
  height: var(--field-h);
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  padding: 0 var(--field-pad-x);
  background: var(--surface-card);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-color);
}
.wz-color-trigger:hover { border-color: var(--n300); }
.wz-color-swatch { width: 20px; height: 20px; border-radius: var(--r-xs); border: 1px solid var(--color-overlay-shadow-08); flex-shrink: 0; }
.wz-color-hex { font-family: var(--mono); font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--color-text-primary); }
.wz-color-popover { width: 280px; padding: var(--gap-sm); }
.wz-color-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--gap-xs); }
.wz-color-cell { width: 100%; aspect-ratio: 1; border-radius: var(--r-xs); border: 1px solid var(--color-overlay-shadow-06); cursor: pointer; position: relative; transition: transform var(--dur-fast) var(--ease-elastic); }
.wz-color-cell:hover { transform: scale(1.1); }
.wz-color-cell.is-selected::after { content: ''; position: absolute; inset: calc(-1 * var(--field-nudge-3)); border: 2px solid var(--color-text-primary); border-radius: var(--r-sm); pointer-events: none; }

/* ---- Star rating ------------------------------------------- */
.wz-stars { display: inline-flex; align-items: center; gap: var(--field-nudge); }
.wz-star {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  position: relative;
  transition: transform var(--dur-fast) var(--ease-elastic);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23CFCFCF'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.wz-stars:not(.is-readonly) .wz-star:hover { transform: scale(1.1); }
.wz-star.is-full { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f59e0b'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E"); }
.wz-star.is-half { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g'%3E%3Cstop offset='50%25' stop-color='%23f59e0b'/%3E%3Cstop offset='50%25' stop-color='%23CFCFCF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E"); }
.wz-stars-label { margin-left: var(--gap-sm); font-family: var(--mono); font-size: var(--text-xs); color: var(--color-text-tertiary); }