/* om_search_bar_html — the search card's own rules, kept here because the
 * server strips a template's <style> block.
 *
 * The form root is the .om-search-card div itself, so that rule stays a
 * bare class; every other rule is scoped :where(.om-search-card), which adds no
 * specificity and so cannot change which rule wins. This is a child form
 * slotted into the owings-management shell, never a screen, so the root rule
 * takes no position, flex or min-height and carries exactly what it carried
 * before.
 *
 * No rule here needs promoting out of :where(). The one that
 * could tie is `.om-search-field .px-input, .om-search-field .px-select` at
 * (0,2,0): it keeps (0,2,0) under :where(), because the root class is not part
 * of the selector, so it still beats the dependency's `.px-input, .px-select`
 * at (0,1,0) even though that sheet is injected after every head link. The
 * dependency's `:focus` pair is (0,2,0)
 * on a property set this form never declares, so there is no tie there either.
 * `.om-checkbox-wrap` is private and does not collide with the dependency's
 * `.px-checkbox-wrap`.
 *
 * --accent and --accent-subtle are declared on .om-dashboard by the shell and
 * reach this card by inheritance, unchanged.
 *
 * Both media blocks carry across unchanged inside the same scoping, and each
 * keeps the same selector weight as the base rule it overrides, so which of the
 * two wins is still decided by their order in this file, exactly as it was
 * decided by their order in the style block.
 *
 * No designer gate: nothing in this form is hidden until JavaScript runs.
 */

.om-search-card {
  background: var(--px-bg-card);
  border: 1px solid var(--px-border);
  border-radius: var(--px-radius);
  box-shadow: var(--px-shadow);
  padding: 16px 20px;
  font-family: var(--px-font);
}

:where(.om-search-card) .om-search-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

:where(.om-search-card) .om-search-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 100px;
}

:where(.om-search-card) .om-search-field.om-field-narrow {
  min-width: 90px;
  flex: 0.8;
}

:where(.om-search-card) .om-search-field label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--px-text-muted);
  font-family: var(--px-mono);
  white-space: nowrap;
}

:where(.om-search-card) .om-search-field .px-input,
:where(.om-search-card) .om-search-field .px-select {
  width: 100%;
  padding: 6px 10px;
  font-size: 12px;
}

:where(.om-search-card) .om-checkbox-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 12px;
  user-select: none;
  white-space: nowrap;
  padding-bottom: 6px;
}

:where(.om-search-card) .om-checkbox-wrap input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
  cursor: pointer;
}

:where(.om-search-card) .om-search-clear {
  background: var(--accent-subtle);
  color: var(--accent);
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--px-radius-sm);
  transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  font-family: var(--px-font);
  white-space: nowrap;
}

:where(.om-search-card) .om-search-clear:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}

@media (max-width: 1200px) {
  :where(.om-search-card) .om-search-row {
    flex-wrap: wrap;
  }
  :where(.om-search-card) .om-search-field {
    min-width: 120px;
  }
}

@media (max-width: 768px) {
  :where(.om-search-card) .om-search-row {
    flex-direction: column;
    align-items: stretch;
  }
  :where(.om-search-card) .om-search-field {
    min-width: 100%;
  }
  :where(.om-search-card) .om-checkbox-wrap {
    padding: 8px 0;
  }
  :where(.om-search-card) .om-search-clear {
    align-self: stretch;
    margin-top: 8px;
  }
}