/* ccs_search_bar_html, the search card.
 *
 * THREE SCOPES IN ONE FILE, and which one a rule takes is not a style choice:
 *
 * 1. BARE, because the root is the subject: .ccs-search-card is the form root.
 *
 * 2. BARE, because the node LEAVES the root at runtime. The shell's
 *    relocateFilters moves #ccs-filters-row into the shell's #ccs-filters-area
 *    on every mount, so a :where(.ccs-search-card) scope on any
 *    .ccs-filters-row, .ccs-filter-* or .ccs-checkbox-* rule would silently
 *    unstyle the whole filter bar.
 *
 * 3. :where(.ccs-search-card) for everything that stays inside the card.
 *
 * CLASS-DOUBLED, because a head link loses a tie on document order to the
 * dependency's theme, which is appended to <head> at startup:
 *   - @media 480 .ccs-search-card.ccs-search-card { padding: 16px } versus the
 *     dependency's .px-card { padding: 20px }; the card carries both classes.
 *   - the three .ccs-home-dropdown.ccs-home-dropdown::-webkit-scrollbar* rules
 *     versus the dependency's .themed-scrollbar ::-webkit-scrollbar-thumb.
 *
 * The two combobox icons are a <span> carrying the class around an unclassed
 * <svg>, because the designer cannot set a class on an SVGElement; line-height: 0
 * makes the span's box equal the svg's.
 */

/* ========================================
   CCS SEARCH BAR CARD
   ======================================== */
.ccs-search-card {
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.ccs-search-card:hover {
  box-shadow: var(--px-shadow-md);
}

/* ANVIL-RESET TWIN. This root is a .px-card (padding 20px, 1px border) and a
   .px-anvil-reset under the shell root .ccs-dashboard.px-anvil-reset.
   theme.css declares .px-anvil-reset .anvil-component { padding: 0 !important;
   border: none !important } at (0,2,0), which beats .px-card if the runtime
   stamps anvil-component on the form root. The twin restates the card's
   padding and border at (0,3,0): inert if the class never lands. The @media 480
   twin further down restates the mobile padding for the same reason. */
.px-anvil-reset .ccs-search-card.px-anvil-reset {
  padding: 20px !important;
  border: 1px solid var(--px-border) !important;
}

:where(.ccs-search-card) .ccs-search-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: end;
}

/* ========================================
   HOME SELECTION - SEARCHABLE COMBOBOX
   ======================================== */
:where(.ccs-search-card) .ccs-home-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

:where(.ccs-search-card) .ccs-home-label {
  font-family: var(--px-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--px-text-muted);
}

:where(.ccs-search-card) .ccs-home-combo {
  position: relative;
}

:where(.ccs-search-card) .ccs-home-combo-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  line-height: 0;
  color: var(--px-text-muted);
  pointer-events: none;
  transition: color 0.2s ease;
}

:where(.ccs-search-card) .ccs-home-combo-chevron {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  line-height: 0;
  color: var(--px-text-muted);
  pointer-events: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

:where(.ccs-search-card) .ccs-home-combo.open .ccs-home-combo-chevron {
  transform: translateY(-50%) rotate(180deg);
  color: var(--accent);
}

:where(.ccs-search-card) #ccs-home-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 36px 10px 36px;
  font-family: var(--px-font);
  font-size: 13px;
  font-weight: 500;
  color: var(--px-text-primary);
  background: var(--px-bg-elevated);
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius-sm);
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

:where(.ccs-search-card) #ccs-home-input::placeholder {
  color: var(--px-text-muted);
  font-weight: 400;
}

:where(.ccs-search-card) #ccs-home-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
  cursor: text;
}

:where(.ccs-search-card) #ccs-home-input:focus ~ .ccs-home-combo-icon {
  color: var(--accent);
}

:where(.ccs-search-card) .ccs-home-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  background: var(--px-bg-card);
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius-sm);
  box-shadow: var(--px-shadow-md);
  z-index: 100;
}

:where(.ccs-search-card) .ccs-home-combo.open .ccs-home-dropdown {
  display: block;
}

:where(.ccs-search-card) .ccs-home-dropdown.ccs-home-dropdown::-webkit-scrollbar {
  width: 6px;
}

:where(.ccs-search-card) .ccs-home-dropdown.ccs-home-dropdown::-webkit-scrollbar-track {
  background: transparent;
}

:where(.ccs-search-card) .ccs-home-dropdown.ccs-home-dropdown::-webkit-scrollbar-thumb {
  background: var(--px-border);
  border-radius: 3px;
}

:where(.ccs-search-card) .ccs-home-option {
  padding: 9px 12px;
  font-family: var(--px-font);
  font-size: 13px;
  color: var(--px-text-primary);
  cursor: pointer;
  transition: background 0.15s ease;
}

:where(.ccs-search-card) .ccs-home-option:hover,
:where(.ccs-search-card) .ccs-home-option.highlighted {
  background: var(--accent-subtle);
  color: var(--accent);
}

:where(.ccs-search-card) .ccs-home-option.selected {
  font-weight: 600;
  color: var(--accent);
}

/* DEACTIVATED HOME BADGE - PICKER OPTIONS ONLY.
   The badge itself is the shared .px-badge.is-deactivated (theme.css),
   which the Left-to-PMR home cell renders too; nothing about it is
   local to this form. What IS local is where it may be painted: the
   OPTION NODE and nowhere else, so the option's data-name, the
   combobox input value and therefore _current_home_name - which is the
   exported PDF's TITLE - stay byte-identical to care_home_name. */

:where(.ccs-search-card) .ccs-home-no-results {
  padding: 12px;
  font-family: var(--px-font);
  font-size: 13px;
  color: var(--px-text-muted);
  font-style: italic;
  text-align: center;
}

/* ========================================
   ACTIONS SECTION
   ======================================== */
:where(.ccs-search-card) .ccs-actions-section {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* ========================================
   FILTERS ROW — bare, the row leaves this form's root at runtime
   ======================================== */
.ccs-filters-row {
  display: none;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--px-border);
}

.ccs-filters-row.visible {
  display: grid;
}

.ccs-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ccs-filter-label {
  font-family: var(--px-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--px-text-muted);
}

.ccs-filter-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  font-family: var(--px-font);
  font-size: 12px;
  color: var(--px-text-primary);
  background: var(--px-bg-elevated);
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius-sm);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ccs-filter-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-subtle);
}

.ccs-filter-input::placeholder {
  color: var(--px-text-muted);
}

.ccs-filter-select {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 28px 8px 10px;
  font-family: var(--px-font);
  font-size: 12px;
  color: var(--px-text-primary);
  background: var(--px-bg-elevated);
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius-sm);
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ccs-filter-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-subtle);
}

.ccs-checkbox-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 18px;
}

.ccs-checkbox-wrap input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.ccs-checkbox-label {
  font-family: var(--px-font);
  font-size: 12px;
  color: var(--px-text-secondary);
  cursor: pointer;
  user-select: none;
}

.ccs-filter-actions {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding-top: 18px;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
  :where(.ccs-search-card) .ccs-search-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  :where(.ccs-search-card) .ccs-actions-section {
    justify-content: stretch;
  }

  :where(.ccs-search-card) .ccs-actions-section button {
    flex: 1;
  }

  :where(.ccs-search-card) .ccs-home-option {
    padding: 12px;
    font-size: 14px;
  }

  :where(.ccs-search-card) .ccs-home-dropdown {
    max-height: 260px;
  }

  .ccs-filters-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .ccs-search-card.ccs-search-card {
    padding: 16px;
  }

  /* The mobile half of the anvil-reset twin above: same (0,3,0), later in the
     file, so 16px still wins under 480px. */
  .px-anvil-reset .ccs-search-card.px-anvil-reset {
    padding: 16px !important;
  }

  .ccs-filters-row {
    grid-template-columns: 1fr;
  }

  .ccs-filter-actions {
    flex-direction: column;
    padding-top: 12px;
  }

  .ccs-filter-actions button {
    width: 100%;
  }
}