/*
 * Shared search controls
 *
 * Use .site-search-shell when a search icon is a sibling of the input.
 * Use .site-search-input on every real list/search input. Business-query
 * controls such as IP intelligence and VISA BIN recommendations deliberately
 * remain outside this visual contract.
 */

body {
  --site-search-bg: #fffdfb;
  --site-search-border: #aab8c8;
  --site-search-border-hover: #8297ae;
  --site-search-focus: #1474ef;
  --site-search-focus-ring: rgba(20, 116, 239, .14);
  --site-search-icon: #4d6d92;
  --site-search-ink: #112c4b;
  --site-search-placeholder: #5f7590;
  --site-search-shadow: 0 2px 8px rgba(34, 67, 105, .055), inset 0 1px 0 rgba(255, 255, 255, .72);
}

body .site-search-shell.site-search-shell {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 14px;
  color: var(--site-search-icon);
  border: 1px solid var(--site-search-border);
  border-radius: 12px;
  outline: 0;
  background: var(--site-search-bg);
  box-shadow: var(--site-search-shadow);
  cursor: text;
  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    background-color .16s ease;
}

body .site-search-shell.site-search-shell:hover {
  border-color: var(--site-search-border-hover);
}

body .site-search-shell.site-search-shell:focus-within {
  border-color: var(--site-search-focus);
  box-shadow:
    0 0 0 3px var(--site-search-focus-ring),
    var(--site-search-shadow);
}

body .site-search-shell.site-search-shell > svg,
body .site-search-shell.site-search-shell > i[data-lucide] {
  position: static;
  inset: auto;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--site-search-icon);
  stroke-width: 1.8;
  transform: none;
  pointer-events: none;
}

body .site-search-input.site-search-input,
body.admin-view .console-page .site-search-input.site-search-input {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  min-height: 44px;
  height: 44px;
  padding: 0 14px 0 44px;
  color: var(--site-search-ink);
  border: 1px solid var(--site-search-border);
  border-radius: 12px;
  outline: 0;
  background-color: var(--site-search-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%234d6d92' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 14px 50%;
  background-size: 18px 18px;
  box-shadow: var(--site-search-shadow);
  caret-color: var(--site-search-focus);
  font: inherit;
  font-size: 14px;
  -webkit-appearance: none;
  appearance: none;
  transition:
    border-color .16s ease,
    box-shadow .16s ease,
    background-color .16s ease;
}

body .site-search-input.site-search-input:hover,
body.admin-view .console-page .site-search-input.site-search-input:hover {
  border-color: var(--site-search-border-hover);
}

body .site-search-input.site-search-input:focus,
body.admin-view .console-page .site-search-input.site-search-input:focus {
  border-color: var(--site-search-focus);
  box-shadow:
    0 0 0 3px var(--site-search-focus-ring),
    var(--site-search-shadow);
}

body .site-search-input.site-search-input::placeholder,
body.admin-view .console-page .site-search-input.site-search-input::placeholder {
  color: var(--site-search-placeholder);
  opacity: 1;
}

body .site-search-input.site-search-input::-webkit-search-cancel-button,
body .site-search-input.site-search-input::-webkit-search-decoration,
body.admin-view .console-page .site-search-input.site-search-input::-webkit-search-cancel-button,
body.admin-view .console-page .site-search-input.site-search-input::-webkit-search-decoration {
  display: none;
  -webkit-appearance: none;
  appearance: none;
}

/* The shell owns the only border and focus ring in icon-plus-input controls. */
html body .site-search-shell.site-search-shell > .site-search-input.site-search-input {
  min-height: 40px;
  height: 40px;
  padding: 0;
  color: var(--site-search-ink);
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}

html body .site-search-shell.site-search-shell > .site-search-input.site-search-input:hover,
html body .site-search-shell.site-search-shell > .site-search-input.site-search-input:focus {
  border: 0;
  box-shadow: none;
}

html body .site-search-shell.site-search-shell > .site-search-input.site-search-input::placeholder {
  color: var(--site-search-placeholder);
}

body .site-search-shell--dark.site-search-shell--dark {
  --site-search-bg: rgba(10, 29, 49, .92);
  --site-search-border: #3a5572;
  --site-search-border-hover: #5f7d9d;
  --site-search-focus: #4b93f7;
  --site-search-focus-ring: rgba(75, 147, 247, .18);
  --site-search-icon: #91a9c2;
  --site-search-ink: #f5f8fc;
  --site-search-placeholder: #a5b5c7;
  --site-search-shadow: 0 3px 10px rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .035);
}

/* This page loads its module stylesheet from the content block after <head>. */
body.admin-view .admin-visa-toolbar-search > .site-search-shell.site-search-shell {
  min-height: 44px;
  height: 44px;
  padding: 0 14px;
  color: var(--site-search-icon);
  border: 1px solid var(--site-search-border);
  border-radius: 12px;
  background: var(--site-search-bg);
  box-shadow: var(--site-search-shadow);
}

body.admin-view .admin-visa-toolbar-search > .site-search-shell.site-search-shell:focus-within {
  border-color: var(--site-search-focus);
  box-shadow:
    0 0 0 3px var(--site-search-focus-ring),
    var(--site-search-shadow);
}

/* Search/filter rows must collapse before their fixed-width columns can spill. */
@media (max-width: 760px) {
  body.admin-view .admin-filter-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 620px) {
  body .site-search-shell.site-search-shell,
  body .site-search-input.site-search-input,
  body.admin-view .console-page .site-search-input.site-search-input {
    min-height: 42px;
    height: 42px;
  }

  html body .site-search-shell.site-search-shell > .site-search-input.site-search-input {
    min-height: 38px;
    height: 38px;
  }

  body.admin-view .admin-visa-toolbar-search > .site-search-shell.site-search-shell {
    min-height: 42px;
    height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body .site-search-shell.site-search-shell,
  body .site-search-input.site-search-input,
  body.admin-view .console-page .site-search-input.site-search-input {
    transition: none;
  }
}