/**
 * 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: 170px;
  /* Mobile: search + marquee same row (no D/W); min width = --header-search-min (150px) */
  --header-search-marquee-slot-max: 260px;
  /* 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;
}

/* No deposit/withdraw: wider search + marquee; gap + padding so text doesn’t crowd the input */
.marquee-toolbar-row--search-marquee-slot {
  gap: 12px !important;
  align-items: center !important;
}

.marquee-toolbar-row--search-marquee-slot .marquee-toolbar-search-wrap--compact {
  flex: 0 0 auto !important;
  width: auto !important;
  /* Icon + padding + field at least 150px — prevents flex from crushing the input */
  min-width: calc(48px + var(--header-search-min)) !important;
  max-width: calc(52px + var(--header-search-marquee-slot-max));
  position: relative;
  z-index: 2;
}

.marquee-toolbar-row--search-marquee-slot .MuiAutocomplete-root.show,
.marquee-toolbar-row--search-marquee-slot .MuiAutocomplete-root.autocomplete-fixed-open {
  /* Same 150px floor as --header-search-min; never let flex shrink the field smaller */
  min-width: min(100%, var(--header-search-min)) !important;
  max-width: min(100%, var(--header-search-marquee-slot-max)) !important;
}

.marquee-welcome-toolbar .marquee-toolbar-row--search-marquee-slot .marqueeN--beside-search-slot {
  flex: 1 1 0%;
  min-width: 0;
  min-height: 2.25rem;
  overflow: hidden;
  margin-left: 0;
  padding: 6px 8px 6px 14px !important;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0 4px 4px 0;
  display: flex;
  align-items: center;
}

.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: 0 1 var(--header-search-max);
  /* was 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: 0 1 var(--header-search-max);
    /* was 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: 6px 6px !important;
  margin: 0 !important;
}

.marquee-welcome-toolbar .marqueeN--below-search {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 10px !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;
}

/* Same row as search (no D/W): larger type + centering — wins over rule above via specificity */
.marquee-welcome-toolbar .marquee-toolbar-row--search-marquee-slot .marqueeN--beside-search-slot p {
  padding-left: 100% !important;
  box-sizing: content-box;
  align-self: center;
  font-size: 13px !important;
  line-height: 1.45 !important;
}

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