/* ============================================================
   Inputs, selects, textareas, checkboxes, switches, fields
   ============================================================ */

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field__label {
  font: var(--font-label);
  color: var(--text-strong);
  display: flex; align-items: center; gap: 6px;
}
.field__label .req { color: var(--tx-danger-600); }
.field__hint { font: var(--font-caption); color: var(--text-subtle); }
.field__error { font: var(--font-caption); color: var(--status-danger-fg); }

.input, .select, .textarea {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--text-body);
  background: var(--surface-card);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard);
}
.textarea { height: auto; min-height: 84px; padding: 10px 12px; line-height: var(--leading-normal); resize: vertical; }

.input::placeholder, .textarea::placeholder { color: var(--text-subtle); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--border-strong); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
}
.input:disabled, .select:disabled, .textarea:disabled {
  background: var(--surface-sunken); color: var(--text-subtle); cursor: not-allowed;
}
.input--sm, .select--sm { height: 32px; font-size: var(--text-sm); padding: 0 10px; }

.select {
  appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a9099' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  cursor: pointer;
}
[data-theme="dark"] .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238f9cbd' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* ---------- Search ---------- */
.search { position: relative; display: flex; align-items: center; min-width: 0; }
.search__icon {
  position: absolute; left: 11px;
  width: 15px; height: 15px;
  color: var(--text-subtle); pointer-events: none;
}
.search .input { padding-left: 34px; }
.search__clear {
  position: absolute; right: 6px;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border: none; background: transparent; color: var(--text-subtle);
  border-radius: var(--radius-sm); cursor: pointer;
}
.search__clear:hover { background: var(--surface-sunken); color: var(--text-strong); }
.search__clear svg { width: 13px; height: 13px; }

/* Topbar global search doubles as the ⌘K trigger */
.search--global { flex: 0 1 330px; }
.search--global .input { background: var(--surface-sunken); cursor: pointer; }
.search--global .input:hover { background: var(--surface-card); }

/* ---------- Checkbox / switch ---------- */
.check { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; font: var(--font-body-sm); }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
  width: 17px; height: 17px; flex: 0 0 auto;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: var(--surface-card);
  display: grid; place-items: center;
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
.check__box svg { width: 11px; height: 11px; color: #fff; opacity: 0; transform: scale(0.6); transition: all var(--duration-fast) var(--ease-emphasized); }
.check input:checked + .check__box { background: var(--color-primary); border-color: var(--color-primary); }
.check input:checked + .check__box svg { opacity: 1; transform: scale(1); }
.check input:focus-visible + .check__box { box-shadow: var(--focus-ring); }

.switch { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
  width: 38px; height: 21px; flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--border-strong);
  padding: 2px;
  transition: background var(--duration-base) var(--ease-standard);
}
.switch__thumb {
  width: 17px; height: 17px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-emphasized);
}
.switch input:checked + .switch__track { background: var(--color-primary); }
.switch input:checked + .switch__track .switch__thumb { transform: translateX(17px); }
.switch input:focus-visible + .switch__track { box-shadow: var(--focus-ring); }

/* ---------- Upload zone ---------- */
.upload {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-5);
  text-align: center;
  border: 1.5px dashed var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  cursor: pointer;
  transition: border-color var(--duration-base) var(--ease-standard),
              background var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}
.upload:hover { border-color: var(--color-primary); background: var(--surface-tint); }
.upload.is-dragover {
  border-color: var(--color-primary);
  background: var(--color-primary-tint);
  transform: scale(1.01);
}
.upload.is-loaded { border-style: solid; border-color: var(--tx-success-600); background: var(--status-success-bg); }
.upload__icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--radius-lg);
  background: var(--surface-tint);
  color: var(--color-primary);
}
.upload__icon svg { width: 20px; height: 20px; }
.upload.is-loaded .upload__icon { background: rgba(21,158,128,0.18); color: var(--tx-success-600); }
.upload__title { font: var(--font-label); color: var(--text-strong); }
.upload__hint { font: var(--font-caption); color: var(--text-subtle); }