/* ZenithUI — ZenTopBar
 * App shell top bar. Flat, theme-variable driven. Three flex zones: start | center | end.
 * Sticky at the top of the content column; pairs with ZenSidebar.
 *
 * 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). --zen-topbar-bg/--zen-topbar-fg
 * are consumer hooks to opt out of the shell surface.
 */
@layer zenith-components {
  .zen-topbar {
    display: flex;
    align-items: center;
    gap: var(--zen-space-3, 12px);
    height: var(--zen-topbar-height, 56px);
    box-sizing: border-box;  /* border-box regardless of the zen-root reset — keeps the strip aligned with the sidebar brand */
    flex-shrink: 0;
    padding: 0 var(--zen-space-4, 16px);
    background: var(--zen-topbar-bg, var(--zen-shell-surface, var(--zen-bg-surface)));
    /* The accent edge: the same gesture as the active nav item's left bar. */
    border-bottom: 2px solid var(--zen-accent);
    color: var(--zen-topbar-fg, var(--zen-shell-text, var(--zen-text-primary)));
    font-family: var(--zen-font-family, system-ui, sans-serif);
    position: sticky;
    top: 0;
    z-index: 20;
  }

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

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

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

  .zen-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. */
  .zen-topbar:not(:has(.zen-topbar__center)) .zen-topbar__start {
    flex: 1 1 auto;
  }

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