/* 自動補樣式：js/components/form.js（_build/style.py） */
/* ==========================================================================
   表單補充樣式：步進器輸入框、日期時間欄位、帶單位欄位
   結構對應 form.js：
   .c-stepper > .c-stepper__row > [− 按鈕][input.c-stepper__input][+ 按鈕][單位]
   .c-timed > .c-timed__row > (.c-field.c-timed__date + .c-field.c-timed__time.has-unit)
   ========================================================================== */

/* ---------- 步進器：數值輸入框 ---------- */
.c-stepper__input {
  flex: 0 1 auto;
  box-sizing: border-box;
  width: clamp(64px, 6em, 104px);
  min-width: 56px;
  min-height: var(--tap);
  margin: 0;
  padding: 0 var(--sp-2);
  border: 1px solid transparent;
  border-radius: var(--r-input);
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit;
  font-size: max(16px, var(--fs-title3));
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -webkit-appearance: none;
  appearance: none;
  outline: 0;
  transition:
    background var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease),
    box-shadow var(--dur-1) var(--ease);
}

.c-stepper__input::placeholder {
  color: var(--text-3);
  font-weight: 400;
}

.c-stepper__input:focus {
  background: var(--surface);
  border-color: var(--primary);
}

.c-stepper__input:focus-visible {
  background: var(--surface);
  border-color: var(--primary);
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

.c-stepper__input:disabled,
.c-stepper__input:read-only:not(:focus) {
  color: var(--text-2);
}

.c-stepper__input:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.c-stepper__input[aria-invalid="true"],
.c-stepper__input.is-error {
  border-color: var(--up);
}

@media (pointer: fine) {
  .c-stepper__input {
    min-height: 40px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .c-stepper__input:not(:focus):not(:disabled):hover {
    border-color: var(--text-3);
  }
}

/* ---------- 日期時間：日期與時間欄位 ---------- */
.c-timed .c-field.c-timed__date,
.c-timed .c-field.c-timed__time {
  flex: 1 1 140px;
  min-width: 0;
  margin-top: 0;
}

.c-timed .c-field.c-timed__date {
  flex-basis: 160px;
  transition: flex-basis var(--dur-2) var(--ease);
}

.c-timed .c-field.c-timed__time {
  flex-basis: 150px;
}

.c-timed__date .c-field__input,
.c-timed__time .c-field__input {
  min-width: 0;
  min-height: 48px;
  text-align: left;
  font-variant-numeric: tabular-nums;
  -webkit-appearance: none;
  appearance: none;
  accent-color: var(--primary);
}

/* iOS 的日期、時間輸入會被撐出容器，這裡讓內部文字可收縮 */
.c-timed__date .c-field__input::-webkit-date-and-time-value,
.c-timed__time .c-field__input::-webkit-date-and-time-value {
  min-width: 0;
  margin: 0;
  text-align: left;
}

.c-timed__date .c-field__input::-webkit-calendar-picker-indicator,
.c-timed__time .c-field__input::-webkit-calendar-picker-indicator {
  padding: var(--sp-2);
  border-radius: var(--r-sm);
  cursor: pointer;
  opacity: .75;
}

.c-timed__date .c-field__input:disabled,
.c-timed__time .c-field__input:disabled {
  opacity: .5;
  cursor: not-allowed;
}

@media (pointer: fine) {
  .c-timed__date .c-field__input,
  .c-timed__time .c-field__input {
    min-height: 44px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .c-timed__date .c-field__control:not(:focus-within):hover,
  .c-timed__time .c-field__control:not(:focus-within):hover {
    border-color: var(--text-3);
  }

  .c-timed__date .c-field__input::-webkit-calendar-picker-indicator:hover,
  .c-timed__time .c-field__input::-webkit-calendar-picker-indicator:hover {
    background: var(--surface-3);
    opacity: 1;
  }
}

/* ---------- 欄位帶單位（時間欄位會顯示時區名稱，可能很長） ---------- */
.c-field.has-unit .c-field__control {
  min-width: 0;
}

.c-field.has-unit .c-field__input {
  flex: 1 1 auto;
  min-width: 0;
  padding-right: var(--sp-2);
}

.c-field.has-unit .c-field__unit {
  flex: 0 1 auto;
  max-width: 48%;
  min-width: 0;
  padding-left: var(--sp-1);
  overflow: hidden;
  font-size: var(--fs-footnote);
  line-height: 1.2;
  letter-spacing: var(--ls-caption);
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text-3);
}

.c-field.has-unit:focus-within .c-field__unit {
  color: var(--text-2);
}

.c-field.has-unit.is-error .c-field__unit {
  color: var(--up);
}

@container view (max-width: 420px) {
  .c-field.has-unit .c-field__unit {
    max-width: 38%;
  }
}

/* ---------- 只記日期：隱藏時間，日期欄位佔滿整列 ---------- */
.c-timed.is-date-only .c-field.c-timed__date {
  flex: 1 1 100%;
}

.c-timed.is-date-only .c-timed__time {
  display: none;
}

.c-timed.is-date-only .c-timed__date .c-field__control {
  background: var(--primary-tint);
}

.c-timed.is-date-only .c-timed__date .c-field__control:focus-within {
  background: var(--surface);
}

/* ---------- 減少動態 ---------- */
@media (prefers-reduced-motion: reduce) {
  .c-stepper__input,
  .c-timed .c-field.c-timed__date {
    transition-duration: 0.01ms !important;
  }
}