/* ── Tab bar: Hoje · Agenda · + · Clientes · Eu ────────────────────────── */
/* Icons are the design's geometric placeholders, drawn in CSS until we pick
   an icon set (design note on F1–F4). */
.tabbar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  padding: 10px 12px calc(10px + max(env(safe-area-inset-bottom), 8px));
  background: var(--card);
  border-top: 1px solid var(--line);
}

.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font: 500 11px var(--font-body);
  color: var(--muted);
}
.tab[aria-current="page"] { font-weight: 600; color: var(--verniz); }

.tab__icon { position: relative; width: 22px; height: 22px; --icon: var(--soft); }
.tab[aria-current="page"] .tab__icon { --icon: var(--verniz); }

/* Hoje — a dot; filled when active */
.tab__icon--today { border-radius: 50%; border: 2px solid var(--icon); }
.tab[aria-current="page"] .tab__icon--today { background: var(--icon); }

/* Agenda — four rounded squares */
.tab__icon--agenda { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.tab__icon--agenda i { border-radius: 3px; border: 2px solid var(--icon); }

/* Clientes — two overlapping heads */
.tab__icon--clients i {
  position: absolute;
  top: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--icon);
}
.tab__icon--clients i:first-child { left: 0; }
.tab__icon--clients i:last-child { right: 0; background: var(--card); }

/* Eu — head and shoulders */
.tab__icon--me i:first-child {
  position: absolute;
  left: 6px;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--icon);
}
.tab__icon--me i:last-child {
  position: absolute;
  left: 1px;
  bottom: 0;
  width: 20px;
  height: 8px;
  border-radius: 10px 10px 2px 2px;
  border: 2px solid var(--icon);
  border-bottom: 0;
}

/* "+" — Adicionar rápido, always one tap away */
.tab--add { display: flex; justify-content: center; }
.tab--add__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-top: -26px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--card);
  font: 300 30px/1 var(--font-body);
  box-shadow: var(--shadow-fab);
}