/* =====================================================
   Command Palette – Trigger Button + Modal Overlay
   ===================================================== */

/* ----- Trigger button in the navbar ----- */
.cmd-palette-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  background: transparent;
  border: 1.5px solid #E7FF00;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
  margin-left: auto;
  flex-shrink: 0;
  line-height: 1;
}

.cmd-palette-trigger:hover,
.cmd-palette-trigger:focus-visible {
  background: rgba(231, 255, 0, 0.1);
  color: #fff;
  outline: none;
}

.cmd-palette-trigger svg {
  flex-shrink: 0;
  opacity: 0.85;
}

.cmd-palette-trigger__label {
  min-width: auto;
}

.cmd-palette-trigger__kbd {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 4px;
  border: 1px solid rgba(231, 255, 0, 0.4);
  border-radius: 0;
  font-size: 10px;
  font-family: inherit;
  background: transparent;
  color: rgba(231, 255, 0, 0.7);
  line-height: 1.4;
  letter-spacing: 0.02em;
  margin-left: 50px;
}

/* Hide keyboard hint on small screens */
@media (max-width: 900px) {
  .cmd-palette-trigger__label,
  .cmd-palette-trigger__kbd {
    display: none;
  }
  .cmd-palette-trigger {
    padding: 6px 8px;
    border-radius: 0;
  }
  .cmd-palette-trigger svg {
    opacity: 0.85;
  }
}

/* Hide the trigger completely on mobile (hamburger takes over) */
@media (max-width: 600px) {
  .cmd-palette-trigger {
    display: none;
  }
}

/* ----- Overlay backdrop ----- */
.cmd-palette-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 72px;
  padding-left: 16px;
  padding-right: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease;
}

.cmd-palette-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* ----- Modal box ----- */
.cmd-palette-modal {
  position: relative; /* Required: makes overflow:hidden clip position:absolute children */
  width: 100%;
  max-width: 680px;
  max-height: calc(100vh - 100px);
  background: #fff;
  border-radius: 0;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.18s ease;
  display: flex;
  flex-direction: column;
}

.cmd-palette-overlay.is-open .cmd-palette-modal {
  opacity: 1;
}

/* Search input row — shrinks to content height so suggestions
   appear immediately below the input, not crammed inside it.
   NO position: relative here — we must not steal the containing-block
   role away from SearchUnify's inner form wrapper (.su__form-block). */
.cmd-palette-body {
  overflow: visible;
  flex: 0 0 auto;
  background: #fff;
}

/* ----- Custom results container -------------------------------- */
#cmdCustomResults {
  background: #fff;
  max-height: 60vh;
  overflow-y: auto;
}

/* Results list — matches the search page's .su__listed-item padding */
#cmdCustomResults .cmd-results-list {
  padding: 0 20px;
}

/* No-results message */
#cmdCustomResults .cmd-noresults {
  padding: 20px 0;
  font-size: 14px;
  color: #5B6062;
}

/* Each result card — matches main.css .su__list-items exactly */
#cmdCustomResults .su__list-items {
  padding: 16px 0;
  border-bottom: 1px solid #D0D0D0;
}

#cmdCustomResults .su__list-items:last-child {
  border-bottom: none;
}

/* Title link */
#cmdCustomResults .su__result-title {
  font-weight: 700;
  font-size: 15px;
  line-height: 22px;
  color: #192124;
  margin: 0 0 4px;
}

#cmdCustomResults .su__result-title a {
  color: #192124;
  text-decoration: none;
}

#cmdCustomResults .su__result-title a:hover {
  text-decoration: underline;
}

/* Description */
#cmdCustomResults .su__list-item-desc {
  font-size: 13px;
  line-height: 20px;
  color: #5B6062;
  margin-top: 4px;
}

/* Metadata tag row */
#cmdCustomResults .su__tag_box {
  display: flex;
  flex-wrap: wrap;
  margin-top: 6px;
  gap: 0;
}

#cmdCustomResults .su__meta-data {
  position: relative;
  padding: 0 10px 0 0;
  font-size: 12px;
  line-height: 20px;
}

#cmdCustomResults .su__meta-data:not(:last-child)::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 65%;
  background: #D0D0D0;
  position: absolute;
  right: 4px;
  top: 3px;
}

#cmdCustomResults .metaDataKey {
  font-weight: 700;
  color: #192124;
  margin-right: 3px;
}

#cmdCustomResults .su__tags {
  color: #5B6062;
  font-weight: 400;
}

/* ----- Filter pills ----- */
.cmd-palette-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #fff;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.cmd-palette-filter {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  color: #5B6062;
  background: transparent;
  border: 1px solid #e0e0e0;
  border-radius: 0;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
  line-height: 1.4;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.cmd-palette-filter:hover {
  border-color: #192124;
  color: #192124;
  background: #f5f5f5;
}

.cmd-palette-filter.is-active {
  background: #192124;
  border-color: #192124;
  color: #fff;
  font-weight: 600;
}

.cmd-palette-filter:focus-visible {
  outline: 2px solid #E7FF00;
  outline-offset: 2px;
}

/* ----- "Press Esc to close" footer hint ----- */
.cmd-palette-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 8px 16px;
  border-top: 1px solid #e8e8e8;
  background: #fafafa;
  font-size: 12px;
  color: #888;
  flex-shrink: 0;
}

.cmd-view-all {
  display: inline-flex;
  align-items: center;
  font-size: 13px !important;
  font-weight: 400;
  color: #888;
  text-decoration: none !important;
  margin-right: auto;
  visibility: hidden;
  transition: color 0.12s ease;
}

.cmd-view-all.is-visible {
  visibility: visible;
}

.cmd-view-all:hover {
  color: #192124;
  text-decoration: none !important;
}

.cmd-view-all__arrow {
  display: none;
}

.cmd-palette-footer kbd {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border: 1px solid #d0d0d0;
  border-radius: 0;
  font-size: 11px;
  background: #fff;
  color: #555;
  font-family: inherit;
}

/* ----- Override search-widget styles inside the modal ----- */

/* Remove the dark search-section background */
.cmd-palette-body .su_autocomplete-block .su__search_section,
.cmd-palette-body .su_autocomplete-block .su__search_section.su__bg-blue-grd {
  background: #fff !important;
  padding: 0 !important;
}

/* Make the search form full width */
.cmd-palette-body .su_autocomplete-block .su__search-forms {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Input field — always yellow border-bottom so the accent line is
   visible from the moment the modal opens, not only on focus/typing.

   .su_container has padding:0 5px injected by SearchUnify's React
   bundle which it restores after every render, keeping the input 10px
   narrower than the modal. Negative margins pull the input 5px past
   each side of that padding, making it visually fill the full modal
   width. width:calc(100% + 10px) compensates so the input doesn't
   shrink from its own percentage width calculation. */
.cmd-palette-body .su_autocomplete-block .su__input-search {
  border-radius: 0 !important;
  padding: 16px 90px 16px 48px !important;
  height: auto !important;
  font-size: 16px !important;
  border: none !important;
  border-bottom: 2px solid #E7FF00 !important;
  box-shadow: none !important;
  background: #fff !important;
  color: #192124 !important;
  margin-left: -5px !important;
  margin-right: -5px !important;
  width: calc(100% + 10px) !important;
}

.cmd-palette-body .su_autocomplete-block .su__input-search:focus,
.cmd-palette-body .su_autocomplete-block .su__input-search:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-bottom: 2px solid #E7FF00 !important;
}

.cmd-palette-body .su_autocomplete-block .su__input-search::placeholder {
  color: #aaa !important;
}

/* Search icon button */
#auto .su_autocomplete-block .su__search_btn {
  left: 0 !important;
  right: auto !important;
  padding: 0 14px !important;
}

.cmd-palette-body #auto .su_autocomplete-block .su__search_btn {
  left: 0 !important;
  right: auto !important;
  padding: 0 14px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.cmd-palette-body .su_autocomplete-block .su__btn.su__search_btn svg path {
  fill: #888 !important;
}

/* Close / clear button */
.cmd-palette-body .su_autocomplete-block .su__input-close {
  top: 18px !important;
  margin-right: -12px !important;
}

.cmd-palette-body .su_autocomplete-block .su__input-close:after {
  display: none !important;
}

/* SU's own loader — hidden; we use our own instead */
.cmd-palette-body .su_autocomplete-block .su__linear-loader {
  display: none !important;
}

/* Our loading bar — sits over the input's yellow border-bottom.
   Shown by adding .cmd-loading to .cmd-palette-body via JS.     */
.cmd-palette-body {
  position: relative;
}

.cmd-palette-loading-bar {
  display: none;
  position: absolute;
  bottom: 0;
  left: -5px;
  right: -5px;
  height: 2px;
  background: #E7FF00;
  z-index: 2;
  overflow: hidden;
}

.cmd-palette-body.cmd-loading .cmd-palette-loading-bar {
  display: block;
}

.cmd-palette-loading-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  background: #192124;
  animation: cmd-loading-sweep 1s linear infinite;
}

@keyframes cmd-loading-sweep {
  0%   { left: -40%; }
  100% { left: 100%; }
}

/* ── Suggestions panel ──────────────────────────────────────────
   position:fixed + exact viewport coords are stamped by
   command-palette.js so the panel aligns perfectly with the input
   regardless of ancestor padding/box-sizing. Only visual styles here.
   ────────────────────────────────────────────────────────────── */
.cmd-palette-body .su_autocomplete-block .su__autocomplete-suggestion,
.cmd-palette-body .su_autocomplete-block .su__autosearchapp-suggestion {
  border-radius: 0 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
  /* No border-top — the input's permanent border-bottom is the separator.
     Adding a border-top here would double the line when both are visible. */
  border: none !important;
  margin-top: 0 !important;
  max-height: 60vh;
  overflow-y: auto;
  background: #fff;
}

/* Every ancestor between the modal and the suggestion panel must
   not clip overflow. Work up the tree: block → forms → section → body → modal.
   .su__form-block also needs position:relative so the absolute-positioned
   loader anchors to the bottom of the input area, not a distant ancestor. */
.cmd-palette-body .su_autocomplete-block,
.cmd-palette-body .su_autocomplete-block .su__search_section,
.cmd-palette-body .su_autocomplete-block .su__search-forms,
.cmd-palette-body .su_autocomplete-block .su__form-block {
  overflow: visible !important;
}
.cmd-palette-body .su_autocomplete-block .su__form-block {
  position: relative !important;
}

/* .su_container width is handled via negative margins on the input
   and loader — see su__input-search and su__linear-loader rules above. */

/* ── Remove search-term highlighting entirely ────────────────────
   SearchUnify uses .highlight (correct) and .hightlight (their
   typo) on matched text spans. Strip both back to plain text so
   results read cleanly with no coloured marks.
   ────────────────────────────────────────────────────────────── */
.cmd-palette-body .highlight,
.cmd-palette-body .hightlight {
  background: none !important;
  color: inherit !important;
  padding: 0 !important;
  font-weight: inherit !important;
  text-decoration: none !important;
}

/* Hide the original #auto position (it now lives in the modal) */
#auto {
  display: contents;
}