/* inputs.css — All input variants. km- prefix. */

/* ── Field wrapper ── */
.km-field { display: flex; flex-direction: column; gap: 4px; }
.km-field--grow { flex: 1; }

.km-field-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.km-field-row .km-field--grow { min-width: 120px; }

/* Label */
.km-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text);
}
.km-label--required::after {
  content: ' *';
  color: var(--negative);
}

/* Hint & error */
.km-hint  { font-size: .76rem; color: var(--text-2); }
.km-error { font-size: .76rem; color: var(--negative); }

/* ── Text input ── */
.km-input {
  height: 36px;
  padding: 0 .7rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--km-radius);
  color: var(--text);
  font-size: .86rem;
  font-family: var(--km-font);
  transition: border-color var(--km-trans), box-shadow var(--km-trans);
  outline: none;
}
.km-input:focus         { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.km-input--block        { width: 100%; }
.km-input--sm           { height: 30px; font-size: .78rem; padding: 0 .55rem; }
.km-input--lg           { height: 42px; font-size: .92rem; padding: 0 .9rem; }
.km-input.error         { border-color: var(--negative); }
.km-input:disabled      { opacity: .5; cursor: not-allowed; background: var(--surface-2); }
.km-input::placeholder  { color: var(--km-placeholder); }

/* ── Select ── */
.km-select {
  height: 36px;
  padding: 0 2rem 0 .7rem;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235d6b7e' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right .7rem center;
  border: 1px solid var(--border);
  border-radius: var(--km-radius);
  color: var(--text);
  font-size: .86rem;
  font-family: var(--km-font);
  appearance: none;
  cursor: pointer;
  transition: border-color var(--km-trans), box-shadow var(--km-trans);
  outline: none;
}
.km-select:focus    { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.km-select--block   { width: 100%; }
.km-select--sm      { height: 30px; font-size: .78rem; }
.km-select:disabled { opacity: .5; cursor: not-allowed; }

/* ── Textarea ── */
.km-textarea {
  padding: .5rem .7rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--km-radius);
  color: var(--text);
  font-size: .86rem;
  font-family: var(--km-font);
  resize: vertical;
  min-height: 80px;
  transition: border-color var(--km-trans), box-shadow var(--km-trans);
  outline: none;
}
.km-textarea:focus    { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.km-textarea--block   { width: 100%; }
.km-textarea:disabled { opacity: .5; cursor: not-allowed; }

/* ── Checkbox ── */
.km-checkbox-wrap {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  font-size: .86rem;
  color: var(--text);
  user-select: none;
}

.km-checkbox {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-radius: calc(var(--km-radius) / 2);
  background: var(--surface);
  appearance: none;
  cursor: pointer;
  transition: all var(--km-trans);
  flex-shrink: 0;
  position: relative;
}
.km-checkbox:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.km-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 3px; top: 0px;
  width: 5px; height: 9px;
  border: 2px solid #fff;
  border-top: none; border-left: none;
  transform: rotate(45deg);
}
.km-checkbox:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Radio ── */
.km-radio-wrap {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  font-size: .86rem;
  color: var(--text);
  user-select: none;
}

.km-radio {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  appearance: none;
  cursor: pointer;
  transition: all var(--km-trans);
  flex-shrink: 0;
  position: relative;
}
.km-radio:checked {
  border-color: var(--accent);
}
.km-radio:checked::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.km-radio:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Toggle Switch ── */
.km-switch-wrap {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  cursor: pointer;
  font-size: .86rem;
  color: var(--text);
  user-select: none;
}

.km-switch {
  position: relative;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}

.km-switch input { display: none; }

.km-switch-track {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 999px;
  transition: background var(--km-trans);
  cursor: pointer;
}
.km-switch-track::after {
  content: '';
  position: absolute;
  left: 2px; top: 2px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--km-trans);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.km-switch input:checked + .km-switch-track {
  background: var(--accent);
}
.km-switch input:checked + .km-switch-track::after {
  transform: translateX(16px);
}

/* ── Input group (addon / joined button) ── */
.km-input-group { display: flex; }
.km-input-group .km-input { border-radius: 0; flex: 1; }
.km-input-group > :first-child { border-radius: var(--km-radius) 0 0 var(--km-radius); }
.km-input-group > :last-child  { border-radius: 0 var(--km-radius) var(--km-radius) 0; }
.km-input-group .km-addon {
  display: flex;
  align-items: center;
  padding: 0 .72rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: .84rem;
  color: var(--text-2);
  white-space: nowrap;
}
.km-input-group .km-addon + .km-input,
.km-input-group .km-input + .km-addon,
.km-input-group .km-input + .km-btn { margin-left: -1px; }

/* ── Range slider ── */
input[type="range"].km-slider { width: 100%; accent-color: var(--accent); }

/* ── Dropzone (file upload) ── */
.km-dropzone {
  border: 2px dashed var(--border);
  border-radius: var(--km-radius);
  padding: calc(var(--km-density) * 1.4);
  text-align: center;
  color: var(--text-2);
  font-size: .85rem;
  transition: all var(--km-trans);
  cursor: pointer;
  display: block;
}
.km-dropzone:hover,
.km-dropzone.drag { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.km-dropzone input { display: none; }

/* ── Searchable select (km-search-select.js) ── */
.km-ss { position: relative; }
/* NOTE: js/km-search-select.js sets position/background/max-height/border/box-shadow and
   each row's height INLINE (44px — a proper touch target), overriding all of this by design
   (see that file's comments for why). This block is a documented fallback only. */
.km-ss-list {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 50;
  max-height: calc(2.75rem * 5);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--km-radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.km-ss-list.show { display: block; }
.km-ss-item {
  height: 2.75rem;
  display: flex;
  align-items: center;
  padding: 0 calc(var(--km-density) * .7);
  background: var(--surface);
  color: var(--text);
  font-size: .85rem;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}
.km-ss-item:hover,
.km-ss-item.active { background: var(--accent-soft); color: var(--accent); }
.km-ss-empty {
  height: 2.75rem;
  display: flex;
  align-items: center;
  padding: 0 calc(var(--km-density) * .7);
  background: var(--surface);
  color: var(--text-2);
  font-size: .85rem;
  font-style: italic;
}

/* ── Tag / chip input ── */
.km-tag-field {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  padding: .4rem .6rem;
  border: 1px solid var(--border);
  border-radius: var(--km-radius);
  background: var(--surface);
  min-height: 38px;
  cursor: text;
  transition: all var(--km-trans);
}
.km-tag-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.km-tag-item {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: .76rem;
  font-weight: 600;
  padding: .18rem .5rem;
  border-radius: 999px;
}
.km-tag-item button {
  border: none;
  background: none;
  color: inherit;
  font-size: .9rem;
  line-height: 1;
  padding: 0;
  display: flex;
}
.km-tag-input-el {
  border: none;
  outline: none;
  background: none;
  font-size: .86rem;
  color: var(--text);
  min-width: 80px;
  flex: 1;
}

/* ── Multi-select (chips + dropdown checklist) ──
   Progressively enhances a native <select multiple> via kmEnhanceMultiSelect()
   (js/app.js). The native select stays hidden in the DOM as the source of truth. */
.km-multiselect { position: relative; cursor: pointer; }
.km-multiselect-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
  min-height: 38px;
  padding: .4rem .6rem;
  border: 1px solid var(--border);
  border-radius: var(--km-radius);
  background: var(--surface);
  transition: all var(--km-trans);
}
.km-multiselect.open .km-multiselect-chips,
.km-multiselect:focus-within .km-multiselect-chips {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.km-multiselect-placeholder { font-size: .86rem; color: var(--text-2); }
.km-multiselect-caret {
  margin-left: auto;
  color: var(--text-2);
  font-size: .75rem;
  transition: transform var(--km-trans);
  flex-shrink: 0;
}
.km-multiselect.open .km-multiselect-caret { transform: rotate(180deg); }
.km-multiselect-panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--km-radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.16);
  max-height: 220px;
  overflow-y: auto;
  padding: 6px;
}
.km-multiselect.open .km-multiselect-panel { display: block; }
.km-multiselect-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border-radius: calc(var(--km-radius) / 2);
  cursor: pointer;
  font-size: .85rem;
  color: var(--text);
  transition: background .12s;
}
.km-multiselect-option:hover { background: var(--surface-2); }
.km-multiselect-option input[type=checkbox] {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

/* ── Color picker swatches ── */
.km-color-picker-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.km-color-swatch {
  width: 28px;
  height: 28px;
  border-radius: calc(var(--km-radius) / 2);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--km-trans);
}
.km-color-swatch:hover  { transform: scale(1.15); }
.km-color-swatch.active { border-color: var(--text); }

/* ── Search input ── */
.km-input-search {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--km-radius);
  padding: 0 .7rem;
  height: 36px;
}
.km-input-search input {
  border: none;
  background: none;
  outline: none;
  width: 100%;
  color: var(--text);
  font-size: .86rem;
}
.km-input-search i { color: var(--text-2); font-size: .85rem; }