/*
 * Table search fields use the same look as the chart search: a quiet pill with
 * a leading magnifier and a faint focus halo. Declared in the `dk` layer so it
 * outranks the older per-page toolbar rules; colours come from theme tokens.
 */

@layer dk {
  :root .record-toolbar:not(.alumni-directory-toolbar) label {
    position: relative !important;
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  :root .record-toolbar:not(.alumni-directory-toolbar) input {
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 14px 0 36px !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-pill) !important;
    background-color: var(--surface-2) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b818c' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 13px center !important;
    background-size: 15px 15px !important;
    box-shadow: none !important;
    color: var(--ink) !important;
    font-size: 13px !important;
    font-weight: 450 !important;
    line-height: normal !important;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease !important;
  }

  :root .record-toolbar:not(.alumni-directory-toolbar) input::placeholder {
    color: var(--ink-3) !important;
    opacity: 1 !important;
  }

  :root .record-toolbar:not(.alumni-directory-toolbar) input:hover {
    border-color: var(--line-strong) !important;
    box-shadow: none !important;
  }

  :root .record-toolbar:not(.alumni-directory-toolbar) input:focus,
  :root .record-toolbar:not(.alumni-directory-toolbar) input:focus-visible {
    border-color: color-mix(in srgb, var(--brand) 45%, var(--line)) !important;
    background-color: var(--surface) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent) !important;
    outline: none !important;
  }

  :root[data-theme="dark"] .record-toolbar:not(.alumni-directory-toolbar) input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238993a5' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") !important;
  }
}