/* In assets/*.css, e.g. app.css */
:root {
  --pi-control-height: 32px;
  --pi-control-radius: 6px;
  --pi-color-primary: #0066cc;
  --pi-color-border-subtle: #cfd8e3;
  --pi-color-border-strong: #b8c9e6;
  --pi-color-text: #111827;
  --pi-color-placeholder: #6b7280;
  --pi-color-disabled-bg: #f5f5f5;
  --pi-color-disabled-text: #9ca3af;
}

/* Wrapper so we can place the clear button inside the input */
.pi-search-wrap{
  position: relative;
  width: 100%;
}

/* Generic search input used next to action buttons */
.pi-search-input{
  display: block;
  width: 100%;
  max-width: 100%;

  height: var(--pi-control-height);

  /* left padding for the search icon + right padding for the clear button */
  padding: 0 44px 0 36px;

  font-size: 0.95rem;
  line-height: 1.5;

  border-radius: var(--pi-control-radius);
  border: 1px solid var(--pi-color-border-strong);
  background-color: #ffffff;
  color: var(--pi-color-text);

  /* built-in search icon to visually connect with blue buttons */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230066cc'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11 5a6 6 0 014.472 10.027l3.75 3.75a.75.75 0 11-1.06 1.06l-3.75-3.75A6 6 0 1111 5z'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px 50%;
  background-size: 23px 23px;

  box-shadow: none;
  outline: none;
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background-color .15s ease;
}

/* Placeholder – readable but clearly secondary */
.pi-search-input::placeholder{
  color: var(--pi-color-placeholder);
  opacity: 1;
}

/* Hover – light affordance, keeps alignment with button outlines */
.pi-search-input:hover:not(:disabled):not(:focus){
  border-color: var(--pi-color-primary);
  background-color: #f5f8ff;
}

/* Focus – strong, consistent blue ring like primary buttons */
.pi-search-input:focus{
  border-color: var(--pi-color-primary);
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.16);
  background-color: #ffffff;
}

/* Disabled state */
.pi-search-input:disabled{
  background-color: var(--pi-color-disabled-bg);
  color: var(--pi-color-disabled-text);
  border-color: var(--pi-color-border-subtle);
  cursor: not-allowed;
  background-image: none; /* remove icon in disabled state */
}

/* Clear “×” button inside the input (consistent + more visible) */
.pi-search-clear{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);

  width: 20px;
  height: 20px;

  border: 0;
  padding: 0;

  /* match the rest of the system */
  border-radius: var(--pi-control-radius);

  /* a bit less subtle by default */
  color: #374151;
  background: rgba(0, 102, 204, 0.06);

  display: none; /* hidden by default */
  align-items: center;
  justify-content: center;

  line-height: 1;
  font-size: 19px;
  font-weight: 600;
  cursor: pointer;

  transition:
    background-color .15s ease,
    color .15s ease,
    box-shadow .15s ease,
    transform .05s ease;
}

/* Show the X only when input has text (CSS-only toggle) */
.pi-search-input:not(:placeholder-shown) ~ .pi-search-clear{
  display: flex;
}

/* Hover – more obvious + consistent radius */
.pi-search-clear:hover{
  background: rgba(0, 102, 204, 0.12);
  color: var(--pi-color-primary);
}

/* Keyboard focus */
.pi-search-clear:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.16);
}

/* Press feedback */
.pi-search-clear:active{
  transform: translateY(-50%) scale(0.97);
}