/* Page search – small, clean, centred search box for all tables on the page
   (used with /assets/js/page-search.js). !important overrides the site's fixed font sizes. */

.page-search {
  max-width: 480px;
  margin: 8px auto 24px;                   /* centred */
  text-align: center;
}

/* Label kept for screen readers, hidden visually – the placeholder and icon say what it is */
.page-search .page-search-label {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Rounded bar: [ 🔍 search box   Clear ] */
.page-search .page-search-row {
  display: flex;
  align-items: center;
  border: 1px solid #b8c0cc;
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.page-search .page-search-row:hover { border-color: #8a94a3; }

.page-search .page-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px !important;                 /* 44px minimum touch target */
  margin: 0 !important;
  padding: 0 16px 0 44px !important;
  font-size: max(var(--dbim-fs-p1), 16px) !important; /* 16px stops phones zooming in */
  line-height: 1 !important;
  text-align: left;
  color: #1a1a1a !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7684' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7'/%3E%3Cline x1='16' y1='16' x2='21.5' y2='21.5'/%3E%3C/svg%3E") no-repeat 16px center / 17px 17px !important;
}
.page-search .page-search-input::placeholder { color: #6b7684; opacity: 1; }
.page-search .page-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* Clear: small text button, only shown once something is typed */
.page-search .page-search-clear {
  flex: 0 0 auto;
  height: 32px !important;
  margin: 0 6px 0 0 !important;
  padding: 0 14px !important;
  font-size: var(--dbim-fs-p2) !important;
  font-weight: 600 !important;
  color: #1b3a6b !important;
  background: #eef2f7 !important;
  border: 0 !important;
  border-radius: 999px !important;
}
.page-search .page-search-clear:hover { background: #dfe6ef !important; }
.page-search .page-search-input:placeholder-shown + .page-search-clear { display: none; }

/* Keyboard focus */
.page-search .page-search-row:focus-within {
  border-color: #1b3a6b;
  box-shadow: 0 0 0 3px rgba(27, 58, 107, .25);
}
.page-search .page-search-input:focus-visible { outline: none !important; }
.page-search .page-search-clear:focus-visible { outline: 2px solid #1b3a6b !important; outline-offset: 2px; }

.page-search .page-search-status {
  margin: 8px 0 0 !important;
  font-size: var(--dbim-fs-p2) !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #4a5563 !important;               /* 7.5:1 on white */
}

.page-search-empty {
  margin: 0 auto 24px;
  text-align: center;
  color: #4a5563;
}

/* ---------- Groups (one heading + table each) ----------
   The site's style.css gives every <section> 60px top/bottom padding – reset it here. */
[data-page-search] .search-group {
  padding: 0 !important;
  margin: 0 0 32px !important;
  overflow: visible;
}
[data-page-search] .search-group:last-child { margin-bottom: 0 !important; }

[data-page-search] .search-group-title {
  margin: 0 0 12px !important;
  padding: 0 0 8px !important;
  font-weight: 700 !important;   /* size from the base h2 */
  line-height: 1.3 !important;
  color: #1b3a6b !important;
  border-bottom: 2px solid #1b3a6b;
}

[data-page-search] .search-group .table-responsive { margin: 0 !important; }
[data-page-search] .search-group .table { margin-bottom: 0 !important; }

[data-search-group][hidden],
[data-page-search] tr[hidden] { display: none !important; }