/* =============================================================================
   FILE: resources/css/components/bottom-tab-bar.css
   3 equal tabs + a separate corner FAB (not inside the bar).
============================================================================= */

.bottom-tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  background-color: var(--color-paper);
  border-top: 1px solid var(--color-border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.bottom-tab-bar__inner {
  width: 100%;
  max-width: var(--content-max-width-md);
  height: var(--tabbar-height);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
}

.bottom-tab-bar__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 100%;
  color: var(--color-ink-faint);
}

.bottom-tab-bar__tab[aria-current="true"] {
  color: var(--color-brand);
}

.bottom-tab-bar__icon {
  width: 22px;
  height: 22px;
}

.app-fab {
  position: fixed;
  right: var(--space-4);
  bottom: calc(var(--tabbar-height) + var(--space-4) + env(safe-area-inset-bottom, 0px));
  z-index: 21;
  width: var(--fab-size);
  height: var(--fab-size);
  border-radius: 50%;
  background-color: var(--color-brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-fab);
  transition: background-color var(--ease-standard);
}

.app-fab:hover,
.app-fab:active {
  background-color: var(--color-brand-dark);
}

.app-fab svg {
  width: 26px;
  height: 26px;
}

#app[data-flow="invoice"] .bottom-tab-bar,
#app[data-flow="auth"] .bottom-tab-bar,
#app[data-flow="form"] .bottom-tab-bar,
#app[data-flow="invoice"] .app-fab,
#app[data-flow="auth"] .app-fab,
#app[data-flow="form"] .app-fab {
  display: none;
}