/* =============================================================================
   FILE: resources/css/components/top-app-bar.css
   Frontend Spec Section 5.1 — Top App Bar
============================================================================= */

.top-app-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: var(--topbar-height);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  padding-inline: var(--space-3);
  background-color: var(--color-paper);
  border-bottom: 1px solid var(--color-border);
}

#app[data-flow="invoice"] .top-app-bar,
#app[data-flow="form"] .top-app-bar {
  grid-template-columns: 48px 1fr 48px;
}

#app[data-flow="invoice"] .top-app-bar__title,
#app[data-flow="form"] .top-app-bar__title {
  text-align: center;
  padding-inline: 0;
}

body.splash-screen .top-app-bar,
body.auth-screen .top-app-bar {
  display: none;
}

.top-app-bar__leading,
.top-app-bar__trailing {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.top-app-bar__trailing {
  justify-content: flex-end;
}

.top-app-bar__title {
  text-align: left;
  padding-inline: var(--space-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.brand-lockup__mark {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
}

.brand-lockup--sm .brand-lockup__mark {
  width: 28px;
  height: 28px;
}

.brand-lockup--lg .brand-lockup__mark {
  width: 48px;
  height: 48px;
  border-radius: 12px;
}

.brand-lockup__name {
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-lockup--lg .brand-lockup__name {
  font-size: var(--text-display);
  color: var(--color-brand);
}

.top-app-bar__back {
  width: var(--tap-target-min);
  height: var(--tap-target-min);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink);
}

.top-app-bar__back svg {
  width: 24px;
  height: 24px;
}

/* New Invoice flow progress dots (replaces the title — Section 6.5/6.6/6.7) */
.progress-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.progress-dots__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-border);
}

.progress-dots__dot.is-active {
  background-color: var(--color-brand);
}