/* SolsticioUI — SolTopBar
 * App shell top bar. Flat, theme-variable driven. Three flex zones: start | center | end.
 * Sticky at the top of the content column; pairs with SolSidebar.
 *
 * Identity anatomy: the header is shell chrome — warm dark surface one step
 * lighter than the drawer, in BOTH themes, landed by a solid 2px accent
 * bottom edge (the suite's signature gesture). --sol-topbar-bg/--sol-topbar-fg
 * are consumer hooks to opt out of the shell surface.
 */
@layer solsticio-components {
  .sol-topbar {
    display: flex;
    align-items: center;
    gap: var(--sol-space-3, 12px);
    /* The device's top edge (a notch, the status bar) is part of the strip, never under its content. */
    height: calc(var(--sol-topbar-height, 56px) + var(--sol-safe-area-top));
    box-sizing: border-box;  /* border-box regardless of the sol-root reset — keeps the strip aligned with the sidebar brand */
    flex-shrink: 0;
    padding: var(--sol-safe-area-top) calc(var(--sol-space-4, 16px) + var(--sol-safe-area-right)) 0
      calc(var(--sol-space-4, 16px) + var(--sol-safe-area-left));
    background: var(--sol-topbar-bg, var(--sol-shell-surface, var(--sol-bg-surface)));
    /* The accent edge: the same gesture as the active nav item's left bar. */
    border-bottom: 2px solid var(--sol-accent);
    color: var(--sol-topbar-fg, var(--sol-shell-text, var(--sol-text-primary)));
    font-family: var(--sol-font-family, system-ui, sans-serif);
    position: sticky;
    top: 0;
    z-index: 20;
  }

  /* Accent variant: brand color fill in light. */
  .sol-topbar--accent {
    background: var(--sol-accent);
    color: var(--sol-on-accent);
    border-bottom: none;
  }
  .sol-topbar--accent .sol-topbar__start { color: var(--sol-on-accent); }

  /* Dark: accent fill oversaturates → elevated surface + accent bottom border. */
  [data-sol-theme="dark"] .sol-topbar--accent {
    background: var(--sol-bg-surface);
    color: var(--sol-text-primary);
    border-bottom: 2px solid var(--sol-accent);
  }

  .sol-topbar__start {
    display: flex;
    align-items: center;
    gap: var(--sol-space-2, 8px);
    min-width: 0;            /* allow the title to truncate instead of pushing the actions off */
    flex: 0 1 auto;
    font-weight: var(--sol-font-weight-semibold, 600);
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sol-topbar__center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
  }

  /* When there is no center zone, the start zone takes the slack so actions sit flush right. */
  .sol-topbar:not(:has(.sol-topbar__center)) .sol-topbar__start {
    flex: 1 1 auto;
  }

  .sol-topbar__end {
    display: flex;
    align-items: center;
    gap: var(--sol-space-2, 8px);
    flex: 0 0 auto;
    margin-inline-start: auto;       /* fallback for browsers without :has() — keeps actions right-aligned */
  }

  /* Phone: the leading zone keeps room for the menu button and a readable title. When the
     actions do not fit beside that, they wrap to a second row instead of squeezing it. */
  @media (max-width: 480px) {
    .sol-topbar {
      flex-wrap: wrap;
      row-gap: var(--sol-space-1, 4px);
      height: auto;
      min-height: calc(var(--sol-topbar-height, 56px) + var(--sol-safe-area-top));
      padding-block: calc(var(--sol-space-1, 4px) + var(--sol-safe-area-top)) var(--sol-space-1, 4px);
    }

    .sol-topbar__start,
    .sol-topbar:not(:has(.sol-topbar__center)) .sol-topbar__start {
      flex: 1 1 0;
      min-width: min(100%, 10em);
    }
  }
}

@layer solsticio-components {
  /* Menu button — SolTopBar.MenuBreakpoint. Opens a SolSidebar laid out as a drawer. Hidden until
     the bar's breakpoint, by static media queries, so it is never on screen where no drawer is. */
  .sol-topbar .sol-topbar__menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    inline-size: var(--sol-control-h, 32px);
    block-size: var(--sol-control-h, 32px);
    margin-inline-end: var(--sol-space-2, 8px);
    padding: 0;
    border: 0;
    border-radius: var(--sol-radius-action, 4px);
    background: transparent;
    color: inherit;
    cursor: pointer;
    flex-shrink: 0;
  }

  .sol-topbar .sol-topbar__menu-btn:hover {
    background: var(--sol-shell-hover);
  }

  .sol-topbar .sol-topbar__menu-btn:focus-visible {
    outline: 2px solid var(--sol-accent);
    outline-offset: 2px;
  }

  .sol-topbar .sol-topbar__menu-btn svg {
    inline-size: 20px;
    block-size: 20px;
  }

  @media (max-width: 1024px) {
    .sol-topbar--menu-lg .sol-topbar__menu-btn { display: inline-flex; }
  }

  @media (max-width: 768px) {
    .sol-topbar--menu-md .sol-topbar__menu-btn { display: inline-flex; }
  }

  @media (max-width: 480px) {
    .sol-topbar--menu-sm .sol-topbar__menu-btn { display: inline-flex; }
  }
}