/* [SEARCH UX] global styling for universal search behaviors */

/* loading overlay บน grid */
.grid-view.search-loading,
.table-responsive.search-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}
.grid-view.search-loading::after,
.table-responsive.search-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle, rgba(255,255,255,0.6) 60%, transparent 100%) center/120px 120px no-repeat;
  z-index: 5;
}

/* universal search field — ทำให้เด่นขึ้นเล็กน้อย */
input[name$="[q]"],
input[name="q"] {
  background-image:
    url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 10px center;
  padding-left: 35px;
}

/* spinner ใน submit button (ใช้ Bootstrap class แล้ว — ทำให้ animate) */
.btn .spinner-border {
  vertical-align: -0.125em;
}

/* keyboard hint ที่ universal q (จะเพิ่ม via ::after ถ้า input ว่าง) */
input[name$="[q]"]:placeholder-shown:not(:focus)::after,
input[name="q"]:placeholder-shown:not(:focus)::after {
  content: '/';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: #f1f3f5;
  border: 1px solid #ced4da;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  color: #6c757d;
}

/* responsive: บนมือถือซ่อน hint shortcut */
@media (max-width: 576px) {
  input[name$="[q]"]:placeholder-shown:not(:focus)::after,
  input[name="q"]:placeholder-shown:not(:focus)::after {
    display: none;
  }
}