/**
 * Event search bar (MUI Autocomplete) — header + mobile marquee.
 * Size tokens: edit :root here and matching px in src/config/headerSearchAutocomplete.ts
 */
:root {
  --header-search-min: 150px;
  --header-search-max: 200px;
  /* Desktop <li>: field max + icon/gap */
  --header-search-li-max: min(100%, 260px);
}

/* Collapsed */
.MuiAutocomplete-root {
  width: 0px !important;
  overflow: hidden;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
  opacity: 0;
}

.MuiAutocomplete-root.show {
  width: auto !important;
  min-width: min(100%, var(--header-search-min)) !important;
  max-width: min(100%, var(--header-search-max)) !important;
  opacity: 1;
  overflow: visible !important;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
  display: block;
}

.MuiAutocomplete-root.autocomplete-fixed-open {
  width: auto !important;
  min-width: min(100%, var(--header-search-min)) !important;
  max-width: min(100%, var(--header-search-max)) !important;
  flex: 1 1 auto !important;
  opacity: 1 !important;
  overflow: visible !important;
}

.marquee-toolbar-row .MuiAutocomplete-root.show {
  width: auto !important;
  flex: 1 1 auto !important;
  min-width: min(100%, var(--header-search-min)) !important;
  max-width: min(100%, var(--header-search-max)) !important;
  opacity: 1 !important;
  overflow: visible !important;
}

.marquee-toolbar-row .MuiAutocomplete-root.autocomplete-fixed-open {
  min-width: min(100%, var(--header-search-min)) !important;
  max-width: min(100%, var(--header-search-max)) !important;
}

.header .profile-right-side > li.search {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.header .profile-right-side > li.search:has(.MuiAutocomplete-root.show),
.header .profile-right-side > li.search:has(.MuiAutocomplete-root.autocomplete-fixed-open) {
  flex: 1 1 var(--header-search-max);
  min-width: min(100%, var(--header-search-min));
  max-width: var(--header-search-li-max);
}

.header .profile-right-side li.search .MuiAutocomplete-root.show,
.header .profile-right-side li.search .MuiAutocomplete-root.autocomplete-fixed-open {
  width: 100% !important;
  flex: 1 1 auto !important;
  min-width: min(100%, var(--header-search-min)) !important;
  max-width: min(100%, var(--header-search-max)) !important;
  overflow: visible !important;
}

@media (min-width: 992px) {
  .header .profile-right-side > li.search:has(.MuiAutocomplete-root.show),
  .header .profile-right-side > li.search:has(.MuiAutocomplete-root.autocomplete-fixed-open) {
    flex: 1 1 var(--header-search-max);
    min-width: min(100%, var(--header-search-min));
    max-width: var(--header-search-li-max);
  }

  .header .profile-right-side li.search .MuiAutocomplete-root.show,
  .header .profile-right-side li.search .MuiAutocomplete-root.autocomplete-fixed-open {
    min-width: min(100%, var(--header-search-min)) !important;
    max-width: min(100%, var(--header-search-max)) !important;
  }
}

/* ---- Admin userMessage marquee: compact row + same scroll as style.css .marqueeN p ---- */
.marquee-welcome-toolbar {
  gap: 6px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.marquee-welcome-toolbar .marquee-toolbar-row {
  min-height: auto !important;
}

.marquee-welcome-toolbar .marqueeN--toolbar-inline,
.marquee-welcome-toolbar .marqueeN--below-search {
  padding: 2px 6px !important;
  margin: 0 !important;
}

.marquee-welcome-toolbar .marqueeN--below-search {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 4px !important;
  margin-top: 2px !important;
}

/* Matches global @keyframes marquee in style.css — do not set transform: none (breaks scroll) */
.marquee-welcome-toolbar .marqueeN p,
.marquee-header-user-message p {
  margin: 0 !important;
  display: inline-block !important;
  padding-left: 100% !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
  animation: marquee 25s linear infinite !important;
}

.marquee-header-user-message {
  padding: 4px 10px !important;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}