/* =========================================
   SEARCH PANEL (scoped to .search-background)
   ========================================= */
.search-background {
  /* sizing tokens */
  --sb-input-h: 44px;
  --sb-font-size: 1rem;
  --sb-line: 1.25;
  --sb-border: 1px;
  --sb-border-color: #cfe0ff;
  --sb-focus-ring: rgba(13,110,253,.15);
  --sb-gutter: .75rem;

  /* panel colors (updated to greenish theme) */
  --panel-base-1: #e9f2ef;
  --panel-base-2: #f4f9f7;
  --panel-active-1: #d8ebe7;
  --panel-active-2: #e4f2ef;
  --panel-border: #73ceb4;

  /* buttons (SOLID, no gradient) */
  --btn-primary: #0d6efd;
  --btn-primary-hover: #0b5ed7;
  --btn-text: #fff;
  --btn-rect-radius: 10px;   /* search button */
  --btn-square-radius: 8px;  /* + button */

  background: linear-gradient(180deg, var(--panel-base-1) 0%, var(--panel-base-2) 100%);
  border: 1px solid var(--panel-border);
  border-radius: 1rem;
  padding: 1rem 1rem .75rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

/* Panel brightens when advanced is open */
.search-background:has(#toggleAdvancedBtn.active-toggle),
.search-background:has(#toggleAdvancedBtn[aria-expanded="true"]),
.search-background:has(#advancedSearch.show) {
  background: linear-gradient(180deg, var(--panel-active-1) 0%, var(--panel-active-2) 100%);
  border-color: #14d9a1;
}

/* gutters */
.search-background .row.g-2,
.search-background .row.g-3 {
  --bs-gutter-x: var(--sb-gutter);
  --bs-gutter-y: .5rem;
}

/* top row alignment */
.search-background form.row.g-2 { align-items: center !important; }
.search-background form.row.g-2 > [class^="col-"],
.search-background form.row.g-2 > [class*=" col-"] {
  display: flex;
  align-items: center;
}
.search-background form.row.g-2 > [class^="col-"] > *,
.search-background form.row.g-2 > [class*=" col-"] > * { width: 100%; }

/* right action area */
.search-background .ms-auto.d-flex.justify-content-end.align-items-end.gap-2 {
  align-items: center !important;
}

/* -------------------------
   Controls (inputs & selects)
   ------------------------- */
.search-background .form-control,
.search-background .form-select {
  height: var(--sb-input-h);
  font-size: var(--sb-font-size);
  line-height: var(--sb-line);
  border: var(--sb-border) solid var(--sb-border-color);
  border-radius: .75rem;
  background: #fff;
  padding-top: calc((var(--sb-input-h) - (var(--sb-line) * 1rem) - (2 * var(--sb-border))) / 2);
  padding-bottom: calc((var(--sb-input-h) - (var(--sb-line) * 1rem) - (2 * var(--sb-border))) / 2);
  padding-left: .75rem;
  padding-right: .75rem;
  transition: border-color .1s ease, box-shadow .1s ease, background-color .1s ease;
}
.search-background .form-control::placeholder { color: #7a8aa6; opacity: .9; }

.search-background .form-control:focus,
.search-background .form-select:focus {
  border-color: #8fb1ff;
  box-shadow: 0 0 0 .2rem var(--sb-focus-ring);
  outline: none;
}

/* Dropdown caret */
.search-background .form-select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-color: #fff;
  background-image:
    url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%236c757d' d='M3.2 5.5a1 1 0 0 1 1.6-1.2L8 7.2l3.2-2.9a1 1 0 1 1 1.6 1.2L8.8 9a1.2 1.2 0 0 1-1.6 0L3.2 5.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 12px 12px;
  padding-right: 2rem;
  position: relative;
  top: 1px;
}
/* Firefox fix */
@-moz-document url-prefix() {
  .search-background .form-select { top: 0; }
}

/* labels */
.search-background .form-label {
  font-weight: 600;
  color: #2d3b55;
  margin-bottom: .35rem;
}

/* -------------------------
   Buttons (SOLID, no gradient)
   ------------------------- */
.search-background button[type="submit"] {
  height: var(--sb-input-h);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 1.1rem;
  border: 1px solid rgba(13,110,253,.25);
  border-radius: var(--btn-rect-radius);
  background-color: var(--btn-primary);
  color: var(--btn-text);
  font-weight: 700; letter-spacing: .2px; line-height: 1;
  box-shadow: 0 6px 16px rgba(13,110,253,.25);
  text-decoration: none;
  transition: box-shadow 120ms ease, filter 120ms ease, background-color .12s ease;
  max-width: none;
}
.search-background button[type="submit"]:hover,
.search-background button[type="submit"]:focus {
  background-color: var(--btn-primary-hover);
  box-shadow: 0 8px 22px rgba(13,110,253,.35);
  outline: none;
}

/* “+” toggle */
.search-background #toggleAdvancedBtn {
  height: var(--sb-input-h);
  width: var(--sb-input-h);
  padding: 0;
  border: 1px solid #ced4da;
  border-radius: var(--btn-square-radius);
  background-color: transparent;
  color: #6c757d;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800;
  box-shadow: none;
  transition: background-color .12s ease, border-color .12s ease,
              color .12s ease, box-shadow .12s ease, filter .12s ease;
}
.search-background #toggleAdvancedBtn:hover {
  border-color: #adb5bd;
  background-color: rgba(0,0,0,.03);
  color: #495057;
}
.search-background #toggleAdvancedBtn:focus {
  outline: none;
  box-shadow: 0 0 0 .2rem var(--sb-focus-ring);
}
.search-background #toggleAdvancedBtn.active-toggle,
.search-background #toggleAdvancedBtn[aria-expanded="true"] {
  border-color: rgba(13,110,253,.25);
  background-color: var(--btn-primary);
  color: var(--btn-text);
  box-shadow: 0 8px 22px rgba(13,110,253,.35);
}

/* “+” icon spin */
.search-background #toggleIcon {
  color: currentColor;
  display: inline-block;
  font-size: 1.1rem;
  line-height: 1;
  transition: transform .1s ease;
  transform-origin: 50% 50%;
}
.rotate { transform: rotate(45deg); }

/* -------------------------
   Advanced panel (collapse)
   ------------------------- */
.search-background #advancedSearch.collapse:not(.show) {
  display: none;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}
.search-background #advancedSearch.collapsing {
  height: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  box-shadow: none;
  background: transparent;
  transition: height .1s ease;
}
.search-background #advancedSearch.show {
  background: #f6fbf9; /* light inner over green */
  border: 1px dashed rgba(153, 202, 188, .6);
  border-radius: .75rem;
  padding: .75rem var(--sb-gutter);
  box-shadow: inset 0 1px 2px rgba(153, 202, 188, .25);
}
.search-background #advancedSearch .row {
  --bs-gutter-x: var(--sb-gutter);
  --bs-gutter-y: .5rem;
}

/* -------------------------
   Responsive
   ------------------------- */
@media (max-width: 768px) {
  .search-background { padding: .75rem .75rem .5rem; }
  .search-background button[type="submit"] { width: 100%; }
}
@media (max-width: 576px) {
  .search-background { padding: .5rem; --sb-input-h: 46px; }
  .search-background .ms-auto.d-flex.justify-content-end.align-items-end.gap-2 {
    justify-content: stretch !important;
    gap: .5rem;
  }
  .search-background button[type="submit"],
  .search-background #toggleAdvancedBtn { width: 100%; }
}

/* -------------------------
   Reduced motion
   ------------------------- */
@media (prefers-reduced-motion: reduce) {
  .search-background .form-control,
  .search-background .form-select,
  .search-background button[type="submit"],
  .search-background #toggleAdvancedBtn,
  .search-background #toggleIcon { transition: none; }
}