/**
 * Header tweaks for [data-taskcore-header] (built bundle).
 * Keeps ONE horizontal top bar (same row as the app): title | optional “due today” | tools.
 * Eases crowding by capping the title / “due today” strips. Overflow must stay visible so header menus work.
 */

[data-taskcore-header] {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  width: 100%;
  box-sizing: border-box;
  column-gap: 0.5rem !important;
  row-gap: 0 !important;
  /* Do NOT use overflow: auto/hidden here — it clips the account / theme dropdowns (position absolute below the bar). */
  overflow: visible !important;
}

/* Title (menu + logo + page name): don’t eat the whole bar */
[data-taskcore-header] > div:first-child {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: min(38vw, 20rem) !important;
}

@media (min-width: 768px) {
  [data-taskcore-header] > div:first-child {
    max-width: min(34vw, 24rem) !important;
  }
}

/* Optional “due today” strip between title and tools */
[data-taskcore-header] > div:not(.justify-end):not(:first-child) {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: min(36vw, 18rem) !important;
  overflow: hidden;
}

/* Tools: search, time, workspace, actions, profile */
[data-taskcore-header] > div.justify-end {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.45rem 0.6rem !important;
  overflow: visible !important;
  padding: 0.15rem 0;
}

/* Popovers from header controls (account, colour mode) must paint above the page */
[data-taskcore-header] [role='menu'] {
  z-index: 200 !important;
}

[data-taskcore-header] > div.justify-end > * {
  flex: 0 0 auto;
}

/* Search: stable width; ⌘K chip sits inside the field (see saas-upgrade.css) */
[data-taskcore-header] > div.justify-end > .tc-header-search-wrap {
  flex: 0 1 22rem;
  max-width: min(24rem, 46vw);
  min-width: 10rem;
}

/* Fallback before shell marks the wrap (first paint) */
[data-taskcore-header] > div.justify-end > :first-child:not(.tc-notif-wrap):not(a.tc-quick-add) {
  flex: 0 1 22rem;
  max-width: min(24rem, 46vw);
  min-width: 10rem;
}

[data-taskcore-header] > div.justify-end > select {
  flex: 0 1 auto;
  min-width: 6.5rem;
  max-width: 11rem;
}

[data-taskcore-header] > div.justify-end > time {
  flex: 0 0 auto;
  white-space: nowrap;
}

[data-taskcore-header] > div.justify-end > div.relative:not(:first-child),
[data-taskcore-header] > div.justify-end > button {
  flex: 0 0 auto;
}

[data-taskcore-header] > div.justify-end > .tc-header-search-wrap input[type='search'],
[data-taskcore-header] > div.justify-end > .tc-header-search-wrap input[type='text'] {
  max-width: 100%;
  min-width: 0;
}

[data-taskcore-header] > div.justify-end > :first-child:not(.tc-notif-wrap) input[type='search'],
[data-taskcore-header] > div.justify-end > :first-child:not(.tc-notif-wrap) input[type='text'] {
  max-width: 100%;
  min-width: 0;
}

@media (max-width: 639px) {
  [data-taskcore-header] > div.justify-end > .tc-header-search-wrap {
    flex-basis: 12rem;
    max-width: min(62vw, 17rem);
    min-width: 8rem;
  }
}