/* ============================================================
   Handova — icons inside text inputs
   ------------------------------------------------------------
   A small leading icon in every text-type input (text, email,
   password, phone, search, web address), drawn as a background
   image so no form's markup changes. Selects, text areas,
   checkboxes, dates and numbers are left as they are.

   The icon follows the input's type; a plain text input gets one
   from what it is for (its autocomplete, name or id), or a pen.
   Inputs that already draw their own icon (the search boxes, the
   combo picker) are excluded at the end.

   Imported by components.css; the marketing site links it
   directly. The grey reads on both the light and dark themes.
   ============================================================ */

input.control:where([type="text"], [type="email"], [type="password"], [type="tel"],
  [type="search"], [type="url"], :not([type])) {
  padding-left: 2.375rem;
  background-repeat: no-repeat;
  background-position: 0.8125rem 50%;
  background-size: 1rem 1rem;
  /* pen: anything without a more specific icon */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A94A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
}

/* person: names */
input.control:where([autocomplete*="name"], [name="name"], [id*="name" i], [id*="first" i], [id*="last" i]):where([type="text"], :not([type])) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A94A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
}

/* building: organisations and schools */
input.control:where([autocomplete*="organization"], [name="organization"], [id*="org" i], [id*="school" i], [id*="institution" i]):where([type="text"], :not([type])) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A94A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='1'/%3E%3Cpath d='M9 7h1M14 7h1M9 11h1M14 11h1M9 15h1M14 15h1M10 21v-3h4v3'/%3E%3C/svg%3E");
}

/* map pin: addresses */
input.control:where([autocomplete*="address"], [id*="address" i], [id*="city" i]):where([type="text"], :not([type])) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A94A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}

/* key: one-time codes, card codes, reset codes */
input.control:where([autocomplete="one-time-code"], [id*="code" i], [id*="otp" i], [id*="token" i]):where([type="text"], :not([type])) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A94A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='m10.8 12.2 8.7-8.7M17 6l3 3M14.5 8.5l2 2'/%3E%3C/svg%3E");
}

/* envelope: email */
input.control:where([type="email"], [autocomplete="email"], [autocomplete="username"][id*="email" i]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A94A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
}

/* padlock: passwords */
input.control:where([type="password"]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A94A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
}

/* handset: phone numbers */
input.control:where([type="tel"], [autocomplete="tel"]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A94A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E");
}

/* magnifier: search */
input.control:where([type="search"]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A94A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
}

/* link: web addresses */
input.control:where([type="url"]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A94A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E");
}

/* Small controls (the table filter panel). */
input.control.control-sm:where([type="text"], [type="email"], [type="password"], [type="tel"],
  [type="search"], [type="url"], :not([type])) {
  padding-left: 1.875rem;
  background-position: 0.5625rem 50%;
  background-size: 0.875rem 0.875rem;
}

/* Inputs that already draw their own icon keep only theirs. */
.filter-search input.control,
.ow-filter-search input.control,
.gt-search input.control,
input.control.topbar-search-input,
input.control.ow-search-input,
input.control.combo-input {
  background-image: none;
}