/* ============================================================
   PureNorth search pill — shared by the site hero and the admin
   list pages. Layered gradient pill: outer gradient ring, inner
   bevelled face with a highlight edge (top left), a shadow edge
   with glow (bottom right), and a circular icon divider.
   Design adapted from a Uiverse concept by Smit-Prajapati,
   recoloured to the PureNorth teal palette for both themes.
   ============================================================ */

:root{
  --sp-ring1:#8CE0D5;
  --sp-ring2:#4FBFB0;
  --sp-face1:#F0FAF8;
  --sp-face2:#DFF1EE;
  --sp-face-focus1:#FBFFFE;
  --sp-face-focus2:#E9F6F3;
  --sp-hi1:#D6F1EC;
  --sp-hi2:#FFFFFF;
  --sp-lo1:#2FA396;
  --sp-lo2:#A8E5DC;
  --sp-glow:3px 3px 5px 0 rgba(15,118,110,.38),5px 5px 20px 0 rgba(15,118,110,.28);
  --sp-text:#132A2F;
  --sp-placeholder:#6E8489;
  --sp-icon:#0A5A54;
  --sp-divider:rgba(255,255,255,.85);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --sp-ring1:#1E4E48;
    --sp-ring2:#12897F;
    --sp-face1:#17302E;
    --sp-face2:#122528;
    --sp-face-focus1:#1C3A37;
    --sp-face-focus2:#152B2E;
    --sp-hi1:#123230;
    --sp-hi2:#2E7168;
    --sp-lo1:#062E2A;
    --sp-lo2:#0F5049;
    --sp-glow:3px 3px 5px 0 rgba(0,0,0,.45),5px 5px 20px 0 rgba(18,137,127,.30);
    --sp-text:#E6EFF0;
    --sp-placeholder:#7E9499;
    --sp-icon:#7DE0D3;
    --sp-divider:rgba(125,224,211,.45);
  }
}
:root[data-theme="dark"]{
  --sp-ring1:#1E4E48;
  --sp-ring2:#12897F;
  --sp-face1:#17302E;
  --sp-face2:#122528;
  --sp-face-focus1:#1C3A37;
  --sp-face-focus2:#152B2E;
  --sp-hi1:#123230;
  --sp-hi2:#2E7168;
  --sp-lo1:#062E2A;
  --sp-lo2:#0F5049;
  --sp-glow:3px 3px 5px 0 rgba(0,0,0,.45),5px 5px 20px 0 rgba(18,137,127,.30);
  --sp-text:#E6EFF0;
  --sp-placeholder:#7E9499;
  --sp-icon:#7DE0D3;
  --sp-divider:rgba(125,224,211,.45);
}

.search-pill{
  position:relative;z-index:0;
  border-radius:999px;padding:8px;
  background:linear-gradient(135deg,var(--sp-ring1) 0%,var(--sp-ring2) 100%);
  display:flex;
}
.search-pill-inner{
  position:relative;flex:1;min-width:0;
  border-radius:999px;padding:5px;
  background:linear-gradient(135deg,var(--sp-face1) 0%,var(--sp-face2) 100%);
  display:flex;align-items:center;
}
.search-pill-inner::before,
.search-pill-inner::after{
  content:"";width:100%;height:100%;
  border-radius:inherit;position:absolute;
}
.search-pill-inner::before{
  top:-1px;left:-1px;
  background:linear-gradient(0deg,var(--sp-hi1) 0%,var(--sp-hi2) 100%);
  z-index:-1;
}
.search-pill-inner::after{
  bottom:-1px;right:-1px;
  background:linear-gradient(0deg,var(--sp-lo1) 0%,var(--sp-lo2) 100%);
  box-shadow:var(--sp-glow);
  z-index:-2;
}
.search-pill-inner:focus-within{
  background:linear-gradient(135deg,var(--sp-face-focus1) 0%,var(--sp-face-focus2) 100%);
}

.search-pill input{
  /* Tiny explicit width stops the input's default intrinsic size from
     inflating min-content sizing up the grid; flex:1 does the real sizing. */
  flex:1;min-width:0;width:10px;
  padding:.62rem .5rem .62rem 1rem;
  background:transparent;border:none;border-radius:999px;
  font-family:inherit;font-size:1rem;color:var(--sp-text);
  box-shadow:none;
}
.search-pill input:focus{outline:none;border:none}
.search-pill input::placeholder{color:var(--sp-placeholder)}
.search-pill input::-webkit-search-cancel-button{-webkit-appearance:none}

/* Circular icon area with a straight divider line, used as the submit
   button. A border-left on the rounded button rendered as a stray arc
   that read like a bracket, so the divider is its own element. */
.search-pill-icon{
  position:relative;flex-shrink:0;width:44px;aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
  border:none;border-radius:50%;
  background:transparent;cursor:pointer;padding:0 0 0 6px;margin-right:2px;
}
.search-pill-icon::before{
  content:"";position:absolute;left:0;top:22%;height:56%;width:2px;
  border-radius:2px;background:var(--sp-divider);
}
.search-pill-icon:hover::before{width:3px}
.search-pill-icon svg{width:22px;height:22px}
.search-pill-icon path{fill:var(--sp-icon)}
.search-pill-icon:focus-visible{outline:2px solid var(--sp-icon);outline-offset:2px}

/* Button living inside the pill (site hero). */
.search-pill .btn{flex-shrink:0;box-shadow:none}
@media (max-width:400px){
  .search-pill .btn{padding:.7rem 1.05rem;font-size:.92rem}
}

/* Compact variant for the admin filter rows. */
.search-pill-sm{padding:5px}
.search-pill-sm .search-pill-inner{padding:3px}
.search-pill-sm input{font-size:.9rem;padding:.4rem .4rem .4rem .85rem}
.search-pill-sm .search-pill-icon{width:34px;padding-left:5px}
.search-pill-sm .search-pill-icon svg{width:18px;height:18px}